From 04666597b914b865fadb91ab236e599338a37345 Mon Sep 17 00:00:00 2001
From: linarphy <linarphy@linarphy.net>
Date: Mon, 1 Jan 2024 23:13:17 +0100
Subject: [PATCH] Add documentation

---
 doc/index.md      |   5 +
 doc/references.md | 268 ++++++++++++++++++++++++++++++++++++++++++++++
 doc/tutorials.md  |  47 ++++++++
 lichartee.js      |   2 +-
 4 files changed, 321 insertions(+), 1 deletion(-)
 create mode 100644 doc/index.md
 create mode 100644 doc/references.md
 create mode 100644 doc/tutorials.md

diff --git a/doc/index.md b/doc/index.md
new file mode 100644
index 0000000..8de6125
--- /dev/null
+++ b/doc/index.md
@@ -0,0 +1,5 @@
+# Documentation
+
+## [Tutorials](tutorials.md)
+
+## [References](references.md)
diff --git a/doc/references.md b/doc/references.md
new file mode 100644
index 0000000..ee76079
--- /dev/null
+++ b/doc/references.md
@@ -0,0 +1,268 @@
+# API Reference
+
+## Manager
+
+A Manager allows to manipulate multiple [Canvas](#Canvas) inside a DOM
+element
+
+### Manager.parent_element
+
+*property*: **Element**
+
+DOM element containing every canvas Element
+
+### Manager.list_canvas
+
+*property*: **list<Canvas>**
+
+List of [Canvas](#Canvas) managed
+
+### Manager.add_canvas
+
+Add a managed canvas
+
+Parameters:
+
+- *width*(optional): **int**
+
+Width in pixel of the canvas Element. Default to 100
+
+- *height*(optional): **int**
+
+Height in pixel of the canvas Element. Default to 100
+
+- *position*(optional): **int**
+
+Position of the added Canvas in the
+[parent_element](#Manager.parent_element) and in
+[list_canvas](#Manager.list_canvas). Default to 0
+
+Return:
+
+**Canvas**: the created [Canvas](#Canvas)
+
+### Manager.draw
+
+Draw every managed [Canvas](#Canvas)
+
+### Manager.remove_canvas
+
+Remove a canvas at a given position
+
+Parameters:
+
+- *position(optional)*: **int**
+
+Position of the canvas to delete. Default to 0
+
+## Canvas
+
+### Canvas.ctx
+
+*property*: **CanvasRenderingContext2D**
+
+API interface of the associated canvas Element
+
+### Canvas.figure
+
+*property*: **Figure**
+
+Figure held
+
+### Canvas.draw
+
+Render the figure to the canvas
+
+## Figure
+
+A figure hold multiple axes. That the object which contains every plot
+elements
+
+### Figure.width
+
+*property*: **int**
+
+Width of the figure (related to each axes)
+
+### Figure.height
+
+*property*: **int**
+
+Height of the figure (related to each axes)
+
+### Figure.list_axes
+
+*property*: **list<Axes>**
+
+List of [Axes](#Axes).
+
+### Figure.add_axes
+
+Add an [Axes](#Axes) to this figure
+
+Parameters:
+
+- *width*(optional): **int**
+
+Relative width of the new [Axes](#Axes). Default to 50
+
+- *height*(optional): **int**
+
+Relative height of the new [Axes](#Axes). Default to 50
+
+- *position*(optional): **int**
+
+Position of the new [Axes](#Axes) in the [list_axes](#Figure.list_axes).
+Default to 0
+
+Return:
+
+**Axes**: Added [Axes](#Axes)
+
+### Figure.remove_axes
+
+Remove an [Axes](#Axes) in a given position
+
+Parameters:
+
+- *position*: **int**
+
+Position of the [Axes](#Axes) to delete
+
+## Axes
+
+An Axes represents one plot in a [Figure](#Figure)
+
+### Axes.width
+
+*property*: **int**
+
+Width of the axes (relative to the [Figure](#Figure))
+
+### Axes.height
+
+*property*: **int**
+
+Height of the axes (relative to the [Figure](#Figure))
+
+### Axes.title
+
+*property*: **String**
+
+Title of the axes
+
+### Axes.lines
+
+*property*: **list<Line>**
+
+List of lines
+
+### Axes.plot
+
+Plot y versus x as lines
+
+Parameters:
+
+- *x*: **list<Number>**
+
+x data
+
+- *y*: **list<Number>**
+
+y data
+
+- *linestyle*(optional): **object**
+
+Object defining a style for a line. The structure of the object should
+be:
+```json
+{
+    color: "color",
+    style: "style",
+}
+```
+where `"color"` is a string like `rgb(x,y,z)`, or `#abcdef` or a name of
+a color an,d `"style"` is `solid`, `dotted`, `dashdot` or `dashed`.
+Default is "black" and "solid" for color and style.
+
+- *label*(optional): **String**
+
+Label that will be displayed in the legend. Default to empty String
+
+## Line
+
+A line, with a color and a line style
+
+### Line.x
+
+*property*: **list<Number>**
+
+xdata
+
+### Line.y
+
+*property*: **list<Number>**
+
+ydata
+
+### Line.linestyle
+
+*property*: **object**
+
+Object defining a style for a line. The structure of the object should
+be:
+```json
+{
+    color: "color",
+    style: "style",
+}
+```
+where `"color"` is a string like `rgb(x,y,z)`, or `#abcdef` or a name of
+a color an,d `"style"` is `solid`, `dotted`, `dashdot` or `dashed`
+
+### Line.label
+
+*property*: **String**
+
+Label that will be displayed in the legend
+
+### Line.draw
+
+Draw the line in the box coordinate
+
+Parameters:
+
+- *ctx*: **CanvasRenderingContext2D**
+
+Context of the canvas
+
+- *box*: **list<list<int>>**
+
+Box where to draw the line (absolute dimension)
+
+- *view*: **list<list<Number>>**
+
+Box where to draw the line (in the xdata and ydata scale). It links
+absolute coordinate and value.
+
+## get_ext_array
+
+Get max or min of a 1d array of number
+
+Parameters:
+
+- *array*: **list<Number>**
+
+Array where to get max/min values
+
+- *f*: **function**
+
+`Math.max` or `Math.min`
+
+- *sign*: **int**
+
+-1 if max, 1 if min
+
+Return:
+
+**Number**: Max/min value of the 1d array
diff --git a/doc/tutorials.md b/doc/tutorials.md
new file mode 100644
index 0000000..af813f6
--- /dev/null
+++ b/doc/tutorials.md
@@ -0,0 +1,47 @@
+# Tutorials
+
+## Quick start guide
+
+This tutorial covers some basic usage to help getting started with
+lichartee.
+
+### A Simple example
+
+Display of a five-point dotted red trace of the square function on a
+canvas at the end of a web page.
+
+```js
+let manager = new Manager(
+    document.getElementsByTagName('body')[0],
+);
+manager.add_canvas(500, 500).figure.add_axes().plot(
+    [0, 1, 2, 3, 4 , 5 ],
+    [0, 1, 4, 9, 16, 25],
+    {
+        color: 'red'   ,
+        style: 'dashed',
+    }                   ,
+);
+manager.draw();
+```
+
+The first instruction create a [Manager](references.md#Manager) which
+can be used to manage one or more [Canvas](references.md#Canvas). This
+manager is defined from the html `<body>` tag, so each
+[Canvas](references.md#Canvas) managed by this one will be at the end
+of this elements.
+
+The second instruction do a lot of things at once. First, the method
+[`add_canvas`](references.md#Manager.add_canvas) add, like this name
+indicate, a [Canvas](references.md#Canvas) with a specific width and
+height associated to the [Manager](references.md#Manager) we created
+before. Next, the method [`add_axes`](references.md#Figure.add_axes) of
+the [figure](references.md#Canvas.figure) property of the canvas we
+created add an [Axes](references.md#Axes) to this figure. Then, the
+[`plot`](references.md#Axes.plot) method take the first list of number
+as the x coordinate of points, the second as y ones and finally, an
+optional dictionary which define the style of the plot composed of each
+point.
+
+Finally the [`draw`](references.md#Manager.draw) method render the plot
+we created to display it on the created canvas in the web page.
diff --git a/lichartee.js b/lichartee.js
index 2c973ed..abf4d3d 100644
--- a/lichartee.js
+++ b/lichartee.js
@@ -206,7 +206,7 @@ class Figure
 	 *
 	 * @param int position Position of the axes in the figure to delete
 	 */
-	remove_axes(position)
+	remove_axes(position = 0)
 	{
 		this.list_axes.splice(position, 1);
 	}