Add title support

README.md

@@ -26,6 +26,9 @@ This project is licensied under the Chocolate-Ware license - see the
 
 ## Changelog
 
+*v 0.1.3*
+- Add text support (title only)
+
 *v 0.1.2*
 - Add documentation
 
@@ -40,6 +43,5 @@ This project is licensied under the Chocolate-Ware license - see the
 
 ## Roadmap
 
-- Add text to plots
 - Add more option to stylize the line
 - Add **point** style

lichartee.js

@@ -111,57 +111,13 @@ class Canvas
 			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();
+			axes.draw(
-			this.ctx.strokeStyle = 'black';
+				this.ctx,
-			this.ctx.setLineDash([]);
+				[
-			this.ctx.strokeRect(
+					[start_x, 0                     ],
-				start_x, 0                   ,
+					[end_x  , this.ctx.canvas.height],
-				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;
 		}
 	}
@@ -233,10 +189,10 @@ class Axes
 		title    = ''       ,
 	)
 	{
-		this.width    = width   ;
+		this.width    = width;
-		this.height   = height  ;
+		this.height   = height;
-		this.title    = title   ;
+		this.title    = new Title( title );
-		this.lines    = []      ;
+		this.lines    = [];
 	}
 
 	/**
@@ -262,6 +218,93 @@ class Axes
 		let line = new Line(x, y, linestyle, label);
 		this.lines.push(line);
 	}
+
+	/**
+	 * render the axes to the canvas
+	 *
+	 * @param ctx CanvasRenderingContext2D Context of the canvas
+	 * @param window 2darray<Number> Window where to draw the canvas
+	 */
+	draw(ctx, window)
+	{
+		const x_min = get_ext_array(
+			this.lines.map(
+				(element) => element.x.reduce(
+					(a, b) => Math.min(a, b),
+					Infinity
+				)
+			)       ,
+			Math.min,
+			1
+		);
+		const y_min = get_ext_array(
+			this.lines.map(
+				(element) => element.y.reduce(
+					(a, b) => Math.min(a, b),
+					Infinity
+				)
+			)       ,
+			Math.min,
+			1
+		);
+		const x_max = get_ext_array(
+			this.lines.map(
+				(element) => element.x.reduce(
+					(a, b) => Math.max(a, b),
+					-Infinity
+				)
+			)
+		);
+		const y_max = get_ext_array(
+			this.lines.map(
+				(element) => element.y.reduce(
+					(a, b) => Math.max(a, b),
+					-Infinity
+				)
+			)
+		);
+		let plot_window = this.title.draw(
+			ctx   ,
+			window,
+		);
+		for (const index_line in this.lines)
+		{
+			this.lines[index_line].draw(
+				ctx        ,
+				plot_window,
+				[
+					[x_min, y_min],
+					[x_max, y_max],
+				]         ,
+			);
+		}
+		ctx.beginPath();
+		ctx.strokeStyle = 'black';
+		ctx.setLineDash([]);
+		ctx.strokeRect(
+			plot_window[0][0], plot_window[0][1],
+			plot_window[1][0] - plot_window[0][0],
+			plot_window[1][1] - plot_window[0][1],
+		);
+	}
+
+	/**
+	 * title setter
+	 *
+	 * @param content String Content of the title
+	 */
+	set title(content)
+	{
+		this._title = new Title(content);
+	}
+
+	/**
+	 * title getter
+	 */
+	get title()
+	{
+		return this._title;
+	}
 }
 
 /**
@@ -383,6 +426,111 @@ class Line
 	}
 }
 
+/**
+ * font object
+ *
+ * @property size int font-size (px)
+ * @property family string font-family
+ * @property color string font color
+ */
+class Font
+{
+	/**
+	 * @param size int font-size (px)
+	 * @param family string font-family
+	 * @param color string font color
+	 */
+	constructor(
+		size   = 20          ,
+		family = 'sans-serif',
+		color  = 'black'     ,
+	)
+	{
+		this.size   = size;
+		this.family = family;
+		this.color  = color;
+	}
+
+	/**
+	 * Convert font to css font proprety's syntax
+	 *
+	 * @return String
+	 */
+	toString()
+	{
+		return this.size.toString() + 'px ' + self.family;
+	}
+}
+
+/**
+ * title of an axes
+ *
+ * @property content String Content of a title
+ * @property font Font Font of a title
+ */
+class Title
+{
+	/**
+	 * @param content Content Content of a title
+	 * @param font Font Font of a title
+	 */
+	constructor(
+		content = ''       ,
+		font    = undefined,
+		margin  = 5        ,
+	)
+	{
+		this.content = content;
+		if (font === undefined)
+		{
+			font = new Font();
+		}
+		this.font = font;
+		this.margin = margin;
+	}
+
+	/**
+	 * draw the title in the given windows
+	 *
+	 * @param ctx CanvasRenderingContext2D Context of the canvas
+	 * @param window int<array> Window where to write the title on
+	 *
+	 * @return plot_windows int<array> New windows for the plot
+	 */
+	draw(ctx, window)
+	{
+		ctx.font = this.font.toString();
+		let width = ctx.measureText(this.content).width;
+		if (width > window[1][0] - window[0][0] + 2 * this.margin)
+		{
+			ctx.fillText(
+				this.content      ,
+				window[0][0]      ,
+				this.font.size + this.margin,
+				window[1][0] - window[0][0],
+			);
+		}
+		else
+		{
+			let text_position = window[0][0] + (
+				window[1][0] - window[0][0] - width
+			) / 2
+			ctx.fillText(
+				this.content,
+				text_position,
+				this.font.size + this.margin,
+			);
+		}
+		return [
+			[
+				window[0][0],
+				window[0][1] + this.font.size + 2 * this.margin,
+			],
+			[window[1][0], window[1][1]],
+		];
+	}
+}
+
 /**
  * get max or min of a 1d array of number
  *

test.js

@@ -1,8 +1,8 @@
 let manager = new Manager(
 	document.getElementsByTagName('main')[0]
 );
-manager.add_canvas(500, 500);
+manager.add_canvas(1000, 500);
-manager.add_canvas(500, 500).figure.add_axes().plot(
+manager.add_canvas(1000, 500).figure.add_axes().plot(
 	[0,1,2,3,4,5]  ,
 	[0,1,4,9,16,25],
 	{
@@ -10,6 +10,7 @@ manager.add_canvas(500, 500).figure.add_axes().plot(
 		style: 'dashed'
 	}
 );
+manager.list_canvas[0].figure.list_axes[0].title = 'squared and x2';
 manager.list_canvas[0].figure.list_axes[0].plot(
 	[0,1,2,3,4,5],
 	[0,2,4,6,8,10]
@@ -22,4 +23,5 @@ manager.list_canvas[0].figure.add_axes().plot(
 		style: 'dashdot'
 	}
 );
+manager.list_canvas[0].figure.list_axes[0].title = '1/x';
 manager.draw();