Add x and yAxis label

README.md

@@ -27,7 +27,8 @@ This project is licensied under the Chocolate-Ware license - see the
 ## Changelog
 
 *v 0.1.3*
-- Add text support (title only)
+- Add text support
+- Add x and y-Axis with label
 
 *v 0.1.2*
 - Add documentation

coc-nvim.lua

@@ -0,0 +1,3 @@
+return {
+	'neoclide/coc.nvim',
+}

lichartee.js

@@ -192,6 +192,7 @@ class Axes
 		this.width    = width;
 		this.height   = height;
 		this.title    = new Title( title );
+		this.axis     = new Axis();
 		this.lines    = [];
 	}
 
@@ -211,11 +212,10 @@ class Axes
 	 *                         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 = '')
+	plot(x, y, linestyle = {color: "black", style: "solid"})
 	{
-		let line = new Line(x, y, linestyle, label);
+		let line = new Line(x, y, linestyle);
 		this.lines.push(line);
 	}
 
@@ -263,15 +263,20 @@ class Axes
 				)
 			)
 		);
-		let plot_window = this.title.draw(
+		let n_window = this.title.draw(
 			ctx   ,
 			window,
 		);
+		n_window = this.axis.draw(
+			ctx   ,
+			n_window,
+			[ [x_min, y_min], [x_max, y_max] ],
+		);
 		for (const index_line in this.lines)
 		{
 			this.lines[index_line].draw(
 				ctx        ,
-				plot_window,
+				n_window,
 				[
 					[x_min, y_min],
 					[x_max, y_max],
@@ -282,9 +287,9 @@ class Axes
 		ctx.strokeStyle = 'black';
 		ctx.setLineDash([]);
 		ctx.strokeRect(
-			plot_window[0][0], plot_window[0][1],
+			n_window[0][0], n_window[0][1],
-			plot_window[1][0] - plot_window[0][0],
+			n_window[1][0] - n_window[0][0],
-			plot_window[1][1] - plot_window[0][1],
+			n_window[1][1] - n_window[0][1],
 		);
 	}
 
@@ -323,7 +328,6 @@ class Axes
  *                            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
 {
@@ -341,19 +345,16 @@ class Line
 	 *                         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     ;
 	}
 
 	/**
@@ -372,7 +373,7 @@ class Line
 		const box_height =  box[1][1] -  box[0][1];
 
 		let x_coordinates = this.x.map(
-			function (element, index, array)
+			function (element)
 			{
 				return box[0][0] + box_width * (
 					element - view[0][0]
@@ -380,7 +381,7 @@ class Line
 			}
 		);
 		let y_coordinates = this.y.map(
-			function (element, index, array)
+			function (element)
 			{
 				return box[0][1] + box_height - ( // starting top left
 					box_height * (
@@ -531,6 +532,121 @@ class Title
 	}
 }
 
+/**
+ * Axis (x and y) of the axes (not separated xaxis and yaxis)
+ *
+ * @property number_x_tick int Number of x axis tick
+ * @property number_y_tick int Number of y axis tick
+ * @property int size_tick Size of the tick
+ * @property int margin Size of the margin
+ */
+class Axis
+{
+	/**
+	 * @param number_x_tick int Number of x axis tick
+	 * @param number_y_tick int Number of y axis tick
+	 * @param size_tick int Size of the tick
+	 * @param margin int Size of the margin
+	 * @param text_height int Height of the text label
+	 */
+	constructor(
+		number_x_tick = 4,
+		number_y_tick = 4,
+		size_tick     = 5,
+		margin        = 15,
+		text_height   = 15,
+	)
+	{
+		this.number_x_tick = number_x_tick;
+		this.number_y_tick = number_y_tick;
+		this.size_tick = size_tick;
+		this.margin = margin;
+		this.text_height = text_height;
+	}
+
+	/**
+	 * draw xaxis and yaxis to canvas
+	 *
+	 * @param ctx CanvasRenderingContext2D Context of canvas
+	 * @param window 2darray<Number> Window where to draw the canvas
+	 * @param view 2darray<Number> Window where to draw the canvas with
+	 * 							   the real value
+	 */
+	draw(ctx, window, view)
+	{
+		let index = 0;
+		let start_pos = window[0][1];
+		let padding = (
+			window[1][1] - window[0][1] - this.margin - this.text_height - this.size_tick
+		) / this.number_y_tick;
+		let step = (view[1][1] - view[0][1]) / this.number_y_tick;
+		let width = 2 * this.text_height;
+		while (index <= this.number_y_tick)
+		{
+			let current_y = start_pos + index * padding;
+			let text      = (
+				view[1][1] - index * step
+			).toString().slice(0,3);
+			let text_position = current_y + this.text_height / 2
+			ctx.strokeStyle = 'black';
+			ctx.beginPath();
+			ctx.moveTo(
+				window[0][0] + this.margin + width,
+				current_y,
+			);
+			ctx.lineTo(
+				window[0][0] + this.margin + this.size_tick + width,
+				current_y,
+			);
+			ctx.stroke();
+			ctx.fillText(
+				text,
+				window[0][0] + this.margin,
+				text_position,
+			);
+			current_y += padding;
+			index += 1;
+		}
+		index = 0;
+		start_pos = window[0][0] + this.margin + this.size_tick
+			+ width;
+		padding = (
+			window[1][0] - this.margin - start_pos
+		) / this.number_x_tick;
+		step = (view[1][0] - view[0][0]) / this.number_x_tick;
+		while (index <= this.number_x_tick)
+		{
+			let current_x = start_pos + padding * index;
+			let text      = (
+				view[0][0] + index * step
+			).toString().slice(0,3);
+			let text_width = ctx.measureText(text).width;
+			let text_position = current_x - text_width / 2;
+			ctx.strokeStyle = 'black';
+			ctx.beginPath();
+			ctx.moveTo(
+				current_x,
+				window[1][1] - this.margin - this.text_height,
+			);
+			ctx.lineTo(
+				current_x,
+				window[1][1] - this.margin - this.size_tick - this.text_height,
+			);
+			ctx.stroke();
+			ctx.fillText(
+				text         ,
+				text_position,
+				window[1][1] - this.margin,
+			);
+			index += 1;
+		}
+		return [
+			[window[0][0] + this.margin + this.size_tick + width, window[0][1]],
+			[window[1][0] - this.margin , window[1][1] - this.text_height - this.margin - this.size_tick],
+		];
+	}
+}
+
 /**
  * get max or min of a 1d array of number
  *

test.js

@@ -16,8 +16,8 @@ manager.list_canvas[0].figure.list_axes[0].plot(
 	[0,2,4,6,8,10]
 );
 manager.list_canvas[0].figure.add_axes().plot(
-	[0,1,2,3,4,5],
+	[2,4,6,8,10],
-	[1,1/2,1/3,1/4,1/5],
+	[1/2,1/4,1/6,1/8,1/10],
 	{
 		color: 'rgb(0,255,0)',
 		style: 'dashdot'