399 lines
10 KiB
JavaScript
399 lines
10 KiB
JavaScript
/**
|
|
* 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<Canvas> 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;
|
|
this.list_canvas = [];
|
|
}
|
|
|
|
/**
|
|
* add a canvas
|
|
*
|
|
* @param int width Width of the added canvas
|
|
* @param int height Height of the added canvas
|
|
* @param int position Subjective position of the added canvas
|
|
*/
|
|
add_canvas(width = 100, height = 100, position = 0)
|
|
{
|
|
let element_canvas = document.createElement('canvas');
|
|
let text = document.createTextNode(
|
|
'Your browser doesn\'t seem to support canvas, or you ' +
|
|
'deactivated them. This is the canvas where the chart ' +
|
|
'should be displayed'
|
|
);
|
|
element_canvas.appendChild(text);
|
|
if (this.parent_element.childElementCount === 0)
|
|
{
|
|
this.parent_element.appendChild(element_canvas);
|
|
}
|
|
else
|
|
{
|
|
this.parent_element.children[position].before(
|
|
element_canvas
|
|
);
|
|
}
|
|
let ctx = element_canvas.getContext('2d');
|
|
ctx.canvas.width = width ;
|
|
ctx.canvas.height = height;
|
|
let figure = new Figure();
|
|
let canvas = new Canvas(ctx, figure);
|
|
this.list_canvas.splice(position, 0, canvas);
|
|
return canvas;
|
|
}
|
|
|
|
/**
|
|
* draw every canvas
|
|
*/
|
|
draw()
|
|
{
|
|
for (const index in this.list_canvas)
|
|
{
|
|
this.list_canvas[index].draw();
|
|
}
|
|
}
|
|
|
|
/**
|
|
* remove a canvas
|
|
*
|
|
* @param int position Position of the canvas to remove
|
|
*/
|
|
remove_canvas(position = 0)
|
|
{
|
|
document.removeChild(this.list_canvas[position].ctx.canvas);
|
|
this.list_canvas.splice(position, 1);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 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)
|
|
{
|
|
throw _('this canvas does not possess figure to draw')
|
|
}
|
|
let start_x = 0;
|
|
for (const index_axes in this.figure.list_axes)
|
|
{
|
|
let axes = this.figure.list_axes[index_axes];
|
|
let x_proportion = axes.width/this.figure.width;
|
|
let end_x = start_x + this.ctx.canvas.width * x_proportion;
|
|
this.ctx.beginPath();
|
|
this.ctx.strokeStyle = 'black';
|
|
this.ctx.setLineDash([]);
|
|
this.ctx.strokeRect(
|
|
start_x, 0 ,
|
|
end_x, this.ctx.canvas.height
|
|
);
|
|
const x_min = get_ext_array(
|
|
axes.lines.map(
|
|
(element) => element.x.reduce(
|
|
(a, b) => Math.min(a, b),
|
|
Infinity
|
|
)
|
|
) ,
|
|
Math.min,
|
|
1
|
|
);
|
|
const y_min = get_ext_array(
|
|
axes.lines.map(
|
|
(element) => element.y.reduce(
|
|
(a, b) => Math.min(a, b),
|
|
Infinity
|
|
)
|
|
) ,
|
|
Math.min,
|
|
1
|
|
);
|
|
const x_max = get_ext_array(
|
|
axes.lines.map(
|
|
(element) => element.x.reduce(
|
|
(a, b) => Math.max(a, b),
|
|
-Infinity
|
|
)
|
|
)
|
|
);
|
|
const y_max = get_ext_array(
|
|
axes.lines.map(
|
|
(element) => element.y.reduce(
|
|
(a, b) => Math.max(a, b),
|
|
-Infinity
|
|
)
|
|
)
|
|
);
|
|
for (const index_line in axes.lines)
|
|
{
|
|
axes.lines[index_line].draw(
|
|
this.ctx ,
|
|
[[start_x, 0],[end_x, this.ctx.canvas.height]],
|
|
[[x_min, y_min], [x_max, y_max]]
|
|
);
|
|
}
|
|
start_x = end_x;
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 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<Axes> list_axes List of every axes
|
|
*/
|
|
class Figure
|
|
{
|
|
constructor()
|
|
{
|
|
this.width = 0 ;
|
|
this.height = 0 ;
|
|
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 ;
|
|
this.height += relative_height;
|
|
let axes = new Axes(relative_width, relative_height);
|
|
this.list_axes.splice(position, 0, axes);
|
|
return axes;
|
|
}
|
|
|
|
/**
|
|
* remove an axes
|
|
*
|
|
* @param int position Position of the axes in the figure to delete
|
|
*/
|
|
remove_axes(position = 0)
|
|
{
|
|
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<Line> 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 ,
|
|
title = '' ,
|
|
)
|
|
{
|
|
this.width = width ;
|
|
this.height = height ;
|
|
this.title = title ;
|
|
this.lines = [] ;
|
|
}
|
|
|
|
/**
|
|
* plot y versus x as lines
|
|
*
|
|
* @param 1darray<Number> x x data
|
|
* @param 1darray<Number> 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 = '')
|
|
{
|
|
let line = new Line(x, y, linestyle, label);
|
|
this.lines.push(line);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* a line, with a color and a line style
|
|
*
|
|
* @property 1darray<float> x xdata
|
|
* @property 1darray<float> 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<float> x xdata
|
|
* @param 1darray<float> 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 = {color: "black", style: "solid"},
|
|
label = ''
|
|
)
|
|
{
|
|
this.x = x ;
|
|
this.y = y ;
|
|
this.linestyle = linestyle ;
|
|
this.label = label ;
|
|
}
|
|
|
|
/**
|
|
* draw the line in the box coordinate
|
|
*
|
|
* @param CanvasRenderingContext2d ctx Context of the canvas
|
|
* @param 2dlist<int> box Box where to draw the line
|
|
* @param 2dlist<float> view Scale of the box (link value <->
|
|
* coordinate
|
|
*/
|
|
draw(ctx, box, view)
|
|
{
|
|
const x_delta = view[1][0] - view[0][0];
|
|
const y_delta = view[1][1] - view[0][1];
|
|
const box_width = box[1][0] - box[0][0];
|
|
const box_height = box[1][1] - box[0][1];
|
|
|
|
let x_coordinates = this.x.map(
|
|
function (element, index, array)
|
|
{
|
|
return box[0][0] + box_width * (
|
|
element - view[0][0]
|
|
) / x_delta;
|
|
}
|
|
);
|
|
let y_coordinates = this.y.map(
|
|
function (element, index, array)
|
|
{
|
|
return box[0][1] + box_height - ( // starting top left
|
|
box_height * (
|
|
element - view[0][1]
|
|
) / y_delta
|
|
);
|
|
}
|
|
);
|
|
if (this.linestyle.style === 'solid')
|
|
{
|
|
ctx.setLineDash([]);
|
|
}
|
|
else if (this.linestyle.style === 'dashed')
|
|
{
|
|
ctx.setLineDash([15, 5]);
|
|
}
|
|
else if (this.linestyle.style === 'dotted')
|
|
{
|
|
ctx.setLineDash([2,2]);
|
|
}
|
|
else if (this.linestyle.style === 'dashdot')
|
|
{
|
|
ctx.setLineDash([15,2,2,2]);
|
|
}
|
|
else
|
|
{
|
|
throw _('the style of the line is not correctly defined');
|
|
}
|
|
ctx.strokeStyle = this.linestyle.color;
|
|
ctx.beginPath();
|
|
ctx.moveTo(
|
|
x_coordinates[0],
|
|
y_coordinates[0]
|
|
);
|
|
for (const index in x_coordinates)
|
|
{
|
|
ctx.lineTo(
|
|
x_coordinates[index],
|
|
y_coordinates[index]
|
|
);
|
|
}
|
|
ctx.stroke();
|
|
}
|
|
}
|
|
|
|
/**
|
|
* get max or min of a 1d array of number
|
|
*
|
|
* @param 1darray<number> 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(
|
|
(a, b) => f(a, b),
|
|
sign * Infinity
|
|
);
|
|
}
|