diff --git a/lichartee.js b/lichartee.js index c695cb5..2c973ed 100644 --- a/lichartee.js +++ b/lichartee.js @@ -1,5 +1,19 @@ +/** + * a manager allows to manipulate multiple canvas + * + * it's different from matplotlib, where the manager can only store one + * canvas + * + * @property Element parent_element DOM element containing every canvas + * of this manager + * @property 1darray list_canvas List of canvas held by this + * manager + */ class Manager { + /** + * @param Element parent_element Element holding the canvas + */ constructor(parent_element) { this.parent_element = parent_element; @@ -41,6 +55,9 @@ class Manager return canvas; } + /** + * draw every canvas + */ draw() { for (const index in this.list_canvas) @@ -49,6 +66,11 @@ class Manager } } + /** + * remove a canvas + * + * @param int position Position of the canvas to remove + */ remove_canvas(position = 0) { document.removeChild(this.list_canvas[position].ctx.canvas); @@ -56,14 +78,27 @@ class Manager } } +/** + * a canvas allows to render a figure + * + * @property CanvasRenderingContext2D ctx Canvas API interface + * @property Figure figure Figure held by this canvas + */ class Canvas { + /** + * @param CanvasRenderingContext2D ctx Canvas API interface + * @param Figure figure Figure held by this canvas + */ constructor(ctx, figure) { this.ctx = ctx ; this.figure = figure; } + /** + * render the figure to the canvas + */ draw() { if (this.figure instanceof Figure.constructor) @@ -132,6 +167,15 @@ class Canvas } } +/** + * a figure hold axes and every plot elements + * + * @property int width Total width of this figure (related to each + * axes) + * @property int height Total height of this figure (related to each + * axes) + * @property 1darray list_axes List of every axes + */ class Figure { constructor() @@ -141,6 +185,13 @@ class Figure this.list_axes = []; } + /** + * add axes to this figure + * + * @param int relative_width Relative width of the new axes + * @param int relative_height Relative height of the new axes + * @param int position Position of the axes in the figure + */ add_axes(relative_width = 50, relative_height = 50, position = 0) { this.width += relative_width ; @@ -150,49 +201,110 @@ class Figure return axes; } + /** + * remove an axes + * + * @param int position Position of the axes in the figure to delete + */ remove_axes(position) { this.list_axes.splice(position, 1); } } +/** + * an axes represents one plot in a figure. + * + * @property int width Width of the axes + * @property int height Height of the axes + * @property String title Title of the axes + * @property 1darray lines List of lines + */ class Axes { + /** + * @param int width Width of the axes + * @param int height Height of the axes + * @param String title Title of the axes + */ constructor( width = 100 , height = 100 , - position = 0 , title = '' , ) { this.width = width ; this.height = height ; - this.position = position; this.title = title ; this.lines = [] ; } - plot(x, y, linestyle = undefined, label = '') + /** + * plot y versus x as lines + * + * @param 1darray x x data + * @param 1darray y y data + * @param object linestyle Object defining a style for a line. The + * structure of the object should be: + * { + * color: color + * style: style + * } + * where color is a string containing + * "rgb(x,y,z)", "#abcdef" or a name of + * a color, and style is "solid", "dotted", + * "dashdot" or "dashed". Default value is + * color = "black" and style = "solid" + * @param String label Label that will be displayed in the legend + */ + plot(x, y, linestyle = {color: "black", style: "solid"}, label = '') { - if (linestyle === undefined) - { - linestyle = { - color: 'rgb(0,0,0)', - style: 'solid' - }; - } let line = new Line(x, y, linestyle, label); this.lines.push(line); } } +/** + * a line, with a color and a line style + * + * @property 1darray x xdata + * @property 1darray y ydata + * @property object linestyle Object defining a style for a line. The + * structure of the object should be: + * { + * color: color + * style: style + * } + * where color is a string containing + * "rgb(x,y,z)", "#abcdef" or a name of + * a color, and style is "solid", "dotted", + * "dashdot" or "dashed". Default value is + * color = "black" and style = "solid" + * @property String label Label that will be displayed in the legend + */ class Line { + /** + * @param 1darray x xdata + * @param 1darray y ydata + * @param object linestyle Object defining a style for a line. The + * structure of the object should be: + * { + * color: color + * style: style + * } + * where color is a string containing + * "rgb(x,y,z)", "#abcdef" or a name of + * a color, and style is "solid", "dotted", + * "dashdot" or "dashed". Default value is + * color = "black" and style = "solid" + * @param String label Label that will be displayed in the legend + */ constructor( - x , - y , - linestyle = undefined , - label = '' + x , + y , + linestyle = {color: "black", style: "solid"}, + label = '' ) { this.x = x ; @@ -204,7 +316,7 @@ class Line /** * draw the line in the box coordinate * - * @param ctx ctx Context of the canvas + * @param CanvasRenderingContext2d ctx Context of the canvas * @param 2dlist box Box where to draw the line * @param 2dlist view Scale of the box (link value <-> * coordinate @@ -271,6 +383,13 @@ class Line } } +/** + * get max or min of a 1d array of number + * + * @param 1darray array Array where to get max values + * @param function f Math.max or Math.min if we want max or min value + * @param int sign -1 if max, 1 if min + */ function get_ext_array(array, f = Math.max, sign = -1) { return array.reduce(