From 8cb1818612e75ae0fd4fe088f1cb7b1115fb0825 Mon Sep 17 00:00:00 2001 From: linarphy Date: Wed, 17 Jan 2024 03:13:30 +0100 Subject: [PATCH] Add x and yAxis label --- README.md | 3 +- coc-nvim.lua | 3 ++ lichartee.js | 144 ++++++++++++++++++++++++++++++++++++++++++++++----- test.js | 4 +- 4 files changed, 137 insertions(+), 17 deletions(-) create mode 100644 coc-nvim.lua diff --git a/README.md b/README.md index fcb2dc0..3b56987 100644 --- a/README.md +++ b/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 diff --git a/coc-nvim.lua b/coc-nvim.lua new file mode 100644 index 0000000..916b630 --- /dev/null +++ b/coc-nvim.lua @@ -0,0 +1,3 @@ +return { + 'neoclide/coc.nvim', +} diff --git a/lichartee.js b/lichartee.js index 314a0bd..596bd01 100644 --- a/lichartee.js +++ b/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], - plot_window[1][0] - plot_window[0][0], - plot_window[1][1] - plot_window[0][1], + n_window[0][0], n_window[0][1], + n_window[1][0] - n_window[0][0], + 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 Window where to draw the canvas + * @param view 2darray 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 * diff --git a/test.js b/test.js index 996d91b..f2ed22f 100644 --- a/test.js +++ b/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], - [1,1/2,1/3,1/4,1/5], + [2,4,6,8,10], + [1/2,1/4,1/6,1/8,1/10], { color: 'rgb(0,255,0)', style: 'dashdot'