PlotObject docs (#33)

refactor: change order of the doc
feat: implement PlotObject documentation
closes : #29
closes : #30

docs/050_gettingStarted/100_basics.md

@@ -4,7 +4,7 @@ import SimpleExample from './SimpleExample.demo.tsx';
 
 There are several components in `react-plot` divided to 5 basic categories:
 
-- **[Plot](../070_plot.md)** : the container of all other components
+- **[Container](../070_container/000_intro.md)** : component that represents plot container
 - **[Series](../100_series/000_intro.md)** : branch of components allow us to add different Graphs
 - **[Axes](../200_axes/000_intro.md)** : component that represents plot axis
 - **[Annotations](../300_annotations/000_intro.md)** : where we can add different shapes to our plot

docs/070_container/000_intro.md

@@ -0,0 +1,12 @@
+# Introduction
+
+import Intro from './Intro.demo.tsx';
+
+You can add as many plots as you want in your application. Each plot is a container for all the components that will be displayed in it. you have two different ways to add a plot to your application:
+
+- **[Plot](./100_plot.md)**
+- **[PlotObject](./200_plotObject.md)**
+
+## Example
+
+<Intro/>

docs/070_plot.md → docs/070_container/100_plot.md

@@ -1,7 +1,7 @@
 # Plot
 
-import PlotDemo from './plot/Plot.demo.tsx';
-import PlotMargin from './plot/PlotMargin.demo.tsx';
+import PlotDemo from './Plot.demo.tsx';
+import PlotMargin from './PlotMargin.demo.tsx';
 
 `Plot` is the container of all other components, and the main component in `react-plot` that creates the plot svg
 
@@ -11,47 +11,46 @@ import PlotMargin from './plot/PlotMargin.demo.tsx';
 
 `Plot` children must be one of the following components :
 
-- [`Series`](./100_series/000_intro.md) components
-- [`Axes`](./200_axes/000_intro.md) components
-- [`Annotations`](./300_annotations/000_intro.md)
-- [`Heading`](./450_illustrations/100_heading.md)
-- [`Legend`](./450_illustrations/200_legend.md)
+- [`Series`](../100_series/000_intro.md) components
+- [`Axes`](../200_axes/000_intro.md) components
+- [`Annotations`](../300_annotations/000_intro.md)
+- [`Heading`](../450_illustrations/100_heading.md)
+- [`Legend`](../450_illustrations/200_legend.md)
 
 ## Props
 
 <PlotMargin/>
 
 ### Mandatory
 
-- **width:** Width of the SVG in pixels<br />
+- **width:** Width of the SVG in pixels <br />
   type: `number`<br/>
-
-- **height:** Height of the SVG in pixels<br />
+- **height:** Height of the SVG in pixels <br />
   type: `number`<br/>
 
 ### Optional
 
-- **colorScheme:** Color scheme used to pick colors for the series<br />
+- **colorScheme:** Color scheme used to pick colors for the series <br />
   type: `Iterable<string>`<br/>
   default: "schemeSet1" from "d3-scale-chromatic"
 - **margin:** Pixel distance between seriesViewport and plotViewport.<br />
   type: `{top?:number, bottom?:number, left?:number, right?:number}`<br/>
   default: `{}`
-- **svgStyle:** Style applied to the SVG element<br />
+- **svgStyle:** Style applied to the SVG element <br />
   type: `CSSProperties`<br/>
   default: `{}`
-- **svgId:** Id of the SVG element<br />
+- **svgId:** Id of the SVG element <br />
   type: `string`<br/>
   default: generated automatically
-- **svgClassName:** Class name of the SVG element<br />
+- **svgClassName:** Class name of the SVG element <br />
   type: `string`<br/>
   default: `""`
-- **plotViewportStyle:** Style applied to the rectangle around the entire plot<br />
+- **plotViewportStyle:** Style applied to the rectangle around the entire plot <br />
   type: `CSSProperties`<br/>
   default: `{}`
-- **seriesViewportStyle:** Style applied to the rectangle around the series viewport<br />
+- **seriesViewportStyle:** Style applied to the rectangle around the series viewport <br />
   type: `CSSProperties`<br/>
   default: `{}`
-- **controllerId:** Id of the parent PlotController that will control this plot<br />
+- **controllerId:** Id of the parent PlotController that will control this plot <br />
   type: `string`<br/>
   default: `""`

docs/070_container/200_plotObject.md

@@ -0,0 +1,22 @@
+# PlotObject
+
+import PlotObjectDemo from './PlotObject.demo.tsx';
+
+`PlotObject` is is responsible for rendering a plot on an SVG element. It takes as prop an object that defines the properties of the plot, such as the data to be plotted, the type of plot (e.g., line, bar, scatter), and various formatting options such as colors, line widths, and axis labels.
+
+<PlotObjectDemo/>
+
+this example render a simple line plot with the given data on the x and y axes. You can customize the appearance of the plot by passing additional props to the PlotObject component, such as colors, axis labels, and other formatting options.
+
+## Props
+
+### Mandatory
+
+- **plot:** Object that defines the properties of the plot to be rendered. <br />
+  type: [`PlotObjectPlot`](../500_types/200_plotObjectPlot.md)
+
+### Optional
+
+- **children:** React children to be rendered inside the plot. <br />
+  type: `ReactNode`<br />
+  default: `null`

docs/070_container/Intro.demo.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import PlotDemo from './Plot.demo';
+import PlotObjectDemo from './PlotObject.demo';
+
+export default function Intro() {
+  return (
+    <div style={{ display: 'flex', gap: '3rem' }}>
+      <div
+        style={{
+          alignItems: 'center',
+          display: 'flex',
+          flexDirection: 'column',
+        }}
+      >
+        <PlotDemo />
+        <h3>Plot component</h3>
+      </div>
+      <div
+        style={{
+          alignItems: 'center',
+          display: 'flex',
+          flexDirection: 'column',
+        }}
+      >
+        <PlotObjectDemo />
+        <h3>PlotObject component</h3>
+      </div>
+    </div>
+  );
+}

docs/plot/Plot.demo.tsx → docs/070_container/Plot.demo.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import { Axis, Heading, Legend, LineSeries, Plot } from 'react-plot';
+import { Axis, LineSeries, Plot } from 'react-plot';
 
-export default function DrainVoltage() {
+export default function PlotDemo() {
   return (
     <Plot
       width={300}

docs/plot/PlotMargin.demo.tsx → docs/070_container/PlotMargin.demo.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Axis, LineSeries, Plot } from 'react-plot';
 
-export default function DrainVoltage() {
+export default function PlotMarginDemo() {
   const Explanation = (
     <div>
       <span

docs/070_container/PlotObject.demo.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { Axis, LineSeries, Plot, PlotObject } from 'react-plot';
+
+export default function PlotObjectDemo() {
+  return (
+    <PlotObject
+      plot={{
+        axes: [
+          { type: 'main', position: 'bottom' },
+          { type: 'main', position: 'left' },
+        ],
+        content: [
+          {
+            type: 'line',
+            data: [
+              { x: 1, y: 1 },
+              { x: 2, y: 2 },
+              { x: 3, y: 3 },
+              { x: 4, y: 2 },
+              { x: 5, y: 1 },
+            ],
+          },
+        ],
+        dimensions: {
+          width: 300,
+          height: 300,
+        },
+        seriesViewportStyle: {
+          stroke: 'black',
+          strokeWidth: 1,
+        },
+      }}
+    />
+  );
+}

docs/070_container/_category_.yml

@@ -0,0 +1 @@
+label: 'Container'

docs/100_series/000_intro.md

@@ -24,28 +24,28 @@ Base props are the props that all series have:
 #### <u>Mandatory</u>
 
 - **data:** displays serie's data<br/>
-  type: [`Data`](../500_types/data.md)
+  type: [`Data`](../500_types/000_data.md)
 
 #### <u>Optional</u>
 
 - **id:** serie id<br/>
   type: `string`
   default: generated automatically
-- **xAxis:** series horizontal axis id <br />
+- **xAxis:** series horizontal axis id `<br />`
   type: `string`<br/>
   default: `"x"`
-- **yAxis:** series vertical axis id <br />
+- **yAxis:** series vertical axis id `<br />`
   type: `string`<br/>
   default: `"y"`
-- **label:** label of the serie that can be displayed in legends<br />
+- **label:** label of the serie that can be displayed in legends`<br />`
   type: `string`<br/>
-- **hidden:** hides serie<br />
+- **hidden:** hides serie`<br />`
   type: `boolean`<br/>
   default: `false`
-- **xShift:** shifts the data relative to horizontal axis<br />
+- **xShift:** shifts the data relative to horizontal axis`<br />`
   type: `number or string`<br/>
   default: `0`
-- **yShift:** shifts the data relative to vertical axis<br />
+- **yShift:** shifts the data relative to vertical axis`<br />`
   type: `number or string`<br/>
   default: `0`
 

docs/100_series/100_scatterSeries.md

@@ -12,55 +12,56 @@ import ScatterSeriesLines from './scatterSeries/ScatterSeriesLines.demo.tsx';
 
 ## Data
 
-point type must extend from **[`SeriesPoint`](../500_types/data.md#1-seriespoint)**
+point type must extend from **[`SeriesPoint`](../500_types/000_data.md#1-seriespoint)**
 
 ## Props
 
 Like all other series, scatter series have **[Base props](./000_intro.md/#base-props)**, but in addition to that they also have many other props that we can class into the following categories :
 
 ### 1. Markers
 
-- **displayMarkers:** display scatter points markers<br />
-  type: `boolean`<br/>
+- **displayMarkers:** display scatter points markers`<br />`
+  type: `boolean<br/>`
   default: `true`
-- **markerShape:** serie's shape of a marker. Can be either dynamic or static<br />
-  type: `ShapeFuncProps`<br/>
+- **markerShape:** serie's shape of a marker. Can be either dynamic or static`<br />`
+  type: `ShapeFuncProps<br/>`
   default: `'circle'`
-- **markerSize:** serie's size of a marker<br />
-  type: `number`<br/>
+- **markerSize:** serie's size of a marker`<br />`
+  type: `number<br/>`
   default: `8`
-- **markerStyle:** serie's markers style (static / dynamic)<br />
-  type: `CSSFuncProps`<br/>
+- **markerStyle:** serie's markers style (static / dynamic)`<br />`
+  type: `CSSFuncProps<br/>`
   default: `{}`
 
 <ScatterSeriesMarkerDemo/>
 
 ### 2. Point Label
 
-- **pointLabel:** serie's point label (static / dynamic)<br />
-  type: `LabelFuncProps`<br/>
+- **pointLabel:** serie's point label (static / dynamic)`<br />`
+  type: `LabelFuncProps<br/>`
   default: `''`
-- **pointLabelStyle:** serie's point label style (static / dynamic)<br />
-  type: `CSSFuncProps`<br/>
+- **pointLabelStyle:** serie's point label style (static / dynamic)`<br />`
+  type: `CSSFuncProps<br/>`
   default: `{}`
 
 <ScatterSeriesPointLabel/>
 
 ### 3. ErrorBars
 
-- **displayErrorBars:** displays error bars in the serie<br />
-  type: `boolean`<br/>
+- **displayErrorBars:** displays error bars in the serie`<br />`
+  type: `boolean<br/>`
   default: `false`
-- **errorBarsStyle:** changes error bars style<br />
-  type: `SVGAttributes<SVGLineElement>`<br/>
-- **errorBarsCapSize:** size of error bars' cap<br />
-  type: `number`<br/>
-- **errorBarsCapStyle:** changes error bars' cap style<br />
-  type: `SVGAttributes<SVGLineElement>`<br/>
+- **errorBarsStyle:** changes error bars style`<br />`
+  type: `SVGAttributes<SVGLineElement><br/>`
+- **errorBarsCapSize:** size of error bars' cap`<br />`
+  type: `number<br/>`
+- **errorBarsCapStyle:** changes error bars' cap style`<br />`
+  type: `SVGAttributes<SVGLineElement><br/>`
 
 <ScatterSeriesError/>
 
 <!-- ### 4. Lines -->
+
 <!--
   todo: next release
 - **displayLines:** display line between scatter series points<br />