linarphy/lichartee
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add i18n & Named arg

Browse source
This commit is contained in:
linarphy 2024-01-28 06:57:00 +01:00
parent 1fc3ed58e2
commit dba23293e1
No known key found for this signature in database
GPG key ID: 0610ABB68DAA7B65
6 changed files with 172 additions and 92 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
README.md
View file

@ -26,6 +26,10 @@ This project is licensied under the GPL 3 license - see the
## Changelog ## Changelog
*v 0.1.6*
- Add i18n feature
- Add named argument
*v 0.1.5* *v 0.1.5*
- Add state interface with jsplot (pyplot procedural style) - Add state interface with jsplot (pyplot procedural style)
- Update documentation - Update documentation
@ -57,4 +61,4 @@ This project is licensied under the GPL 3 license - see the
## Roadmap ## Roadmap
- Add named argument functionalities - Add tooltip

8
lang/en.json Normal file
View file

@ -0,0 +1,8 @@
{
"success_load": "successfully loaded language file",
"script_load": "successfully loaded script {script}",
"err_include": "an error occured when adding the script element for {src}",
"no_figure": "this canvas does not possess figure to draw",
"line_style": "the style of line {style} is unknown",
"marker_style": "the style of marker {style} is unknown"
}

8
lang/fr.json Normal file
View file

@ -0,0 +1,8 @@
{
"success_load": "chargement du fichier du langage réussi",
"script_load": "chargement du script {script} réussi",
"err_include": "une erreur s'est produite lors de l'ajout de l'élement de script pour {src}",
"no_figure": "ce canvas ne possède aucune figure à dessiner",
"line_style": "le style de ligne {style} est inconnu",
"marker_style": "le style de marqueur {style} est inconnu"
}

137
lichartee.js
View file

@ -27,7 +27,11 @@ class Manager
* @param int height Height of the added canvas * @param int height Height of the added canvas
* @param int position Subjective position of the added canvas * @param int position Subjective position of the added canvas
*/ */
add_canvas(width = 100, height = 100, position = 0) add_canvas({
width = 100,
height = 100,
position = 0 ,
})
{ {
let element_canvas = document.createElement('canvas'); let element_canvas = document.createElement('canvas');
let text = document.createTextNode( let text = document.createTextNode(
@ -49,7 +53,7 @@ class Manager
let ctx = element_canvas.getContext('2d'); let ctx = element_canvas.getContext('2d');
ctx.canvas.width = width ; ctx.canvas.width = width ;
ctx.canvas.height = height; ctx.canvas.height = height;
let figure = new Figure(); let figure = new Figure({});
let canvas = new Canvas(ctx, figure); let canvas = new Canvas(ctx, figure);
this.list_canvas.splice(position, 0, canvas); this.list_canvas.splice(position, 0, canvas);
return canvas; return canvas;
@ -71,7 +75,7 @@ class Manager
* *
* @param int position Position of the canvas to remove * @param int position Position of the canvas to remove
*/ */
remove_canvas(position = 0) remove_canvas({position = 0})
{ {
document.removeChild(this.list_canvas[position].ctx.canvas); document.removeChild(this.list_canvas[position].ctx.canvas);
this.list_canvas.splice(position, 1); this.list_canvas.splice(position, 1);
@ -103,7 +107,7 @@ class Canvas
{ {
if (this.figure instanceof Figure.constructor) if (this.figure instanceof Figure.constructor)
{ {
throw _('this canvas does not possess figure to draw') throw _('no_figure')
} }
let start_x = 0; let start_x = 0;
for (const index_axes in this.figure.list_axes) for (const index_axes in this.figure.list_axes)
@ -148,11 +152,18 @@ class Figure
* @param int relative_height Relative height of the new axes * @param int relative_height Relative height of the new axes
* @param int position Position of the axes in the figure * @param int position Position of the axes in the figure
*/ */
add_axes(relative_width = 50, relative_height = 50, position = 0) add_axes({
relative_width = 50,
relative_height = 50,
position = 0 ,
})
{ {
this.width += relative_width ; this.width += relative_width ;
this.height += relative_height; this.height += relative_height;
let axes = new Axes(relative_width, relative_height); let axes = new Axes({
width: relative_width ,
height: relative_height,
});
this.list_axes.splice(position, 0, axes); this.list_axes.splice(position, 0, axes);
return axes; return axes;
} }
@ -183,14 +194,14 @@ class Axes
* @param int height Height of the axes * @param int height Height of the axes
* @param String title Title of the axes * @param String title Title of the axes
*/ */
constructor( constructor({
width = 100 , width = 100,
height = 100 , height = 100,
) })
{ {
this.width = width; this.width = width;
this.height = height; this.height = height;
this.axis = new Axis(); this.axis = new Axis({});
this.lines = []; this.lines = [];
} }
@ -212,7 +223,7 @@ class Axes
* definition than linecolor) * definition than linecolor)
* @param Number markersize size of the marker * @param Number markersize size of the marker
*/ */
plot( plot({
x , x ,
y , y ,
linestyle = 'solid' , linestyle = 'solid' ,
@ -220,17 +231,17 @@ class Axes
markerstyle = '' , markerstyle = '' ,
markercolor = 'black' , markercolor = 'black' ,
markersize = 5 , markersize = 5 ,
) })
{ {
let line = new Line( let line = new Line({
x , x : x ,
y , y : y ,
linestyle , linestyle : linestyle ,
linecolor , linecolor : linecolor ,
markerstyle, markerstyle: markerstyle,
markercolor, markercolor: markercolor,
markersize , markersize : markersize ,
); });
this.lines.push(line); this.lines.push(line);
} }
@ -319,7 +330,7 @@ class Axes
*/ */
set title(content) set title(content)
{ {
this._title = new Title(content); this._title = new Title({content: content});
} }
/** /**
@ -367,7 +378,7 @@ class Line
* definition than linecolor) * definition than linecolor)
* @param Number markersize size of the marker * @param Number markersize size of the marker
*/ */
constructor( constructor({
x , x ,
y , y ,
linestyle = 'solid' , linestyle = 'solid' ,
@ -375,7 +386,7 @@ class Line
markerstyle = '' , markerstyle = '' ,
markercolor = 'black' , markercolor = 'black' ,
markersize = 5 , markersize = 5 ,
) })
{ {
this.x = x ; this.x = x ;
this.y = y ; this.y = y ;
@ -470,7 +481,7 @@ class Line
} }
else else
{ {
throw _('the style of the line is not correctly defined'); throw _('line_style', {style: this.linestyle});
} }
for (const index in x_coordinates) for (const index in x_coordinates)
{ {
@ -564,7 +575,7 @@ class Line
} }
else else
{ {
throw _('the style of the marker is not correctly defined'); throw _('marker_style', {style: this.markerstyle});
} }
} }
} }
@ -584,11 +595,11 @@ class Font
* @param family string font-family * @param family string font-family
* @param color string font color * @param color string font color
*/ */
constructor( constructor({
size = 20 , size = 20 ,
family = 'sans-serif', family = 'sans-serif',
color = 'black' , color = 'black' ,
) })
{ {
this.size = size; this.size = size;
this.family = family; this.family = family;
@ -618,16 +629,16 @@ class Title
* @param content Content Content of a title * @param content Content Content of a title
* @param font Font Font of a title * @param font Font Font of a title
*/ */
constructor( constructor({
content = '' , content = '' ,
font = undefined, font = undefined,
margin = 5 , margin = 5 ,
) })
{ {
this.content = content; this.content = content;
if (font === undefined) if (font === undefined)
{ {
font = new Font(); font = new Font({});
} }
this.font = font; this.font = font;
this.margin = margin; this.margin = margin;
@ -696,14 +707,14 @@ class Axis
* @param text_height int Height of the text label * @param text_height int Height of the text label
* @param Font font Font of tick labels * @param Font font Font of tick labels
*/ */
constructor( constructor({
number_x_tick = 4 , number_x_tick = 4 ,
number_y_tick = 4 , number_y_tick = 4 ,
size_tick = 5 , size_tick = 5 ,
margin = 15 , margin = 15 ,
text_height = 15 , text_height = 15 ,
font = undefined, font = undefined,
) })
{ {
this.number_x_tick = number_x_tick; this.number_x_tick = number_x_tick;
this.number_y_tick = number_y_tick; this.number_y_tick = number_y_tick;
@ -712,7 +723,7 @@ class Axis
this.text_height = text_height; this.text_height = text_height;
if (font === undefined) if (font === undefined)
{ {
font = new Font(); font = new Font({});
} }
this.font = font; this.font = font;
} }
@ -839,7 +850,7 @@ class jsplot
* definition than linecolor) * definition than linecolor)
* @param Number markersize size of the marker * @param Number markersize size of the marker
*/ */
plot( plot({
x , x ,
y , y ,
linestyle , linestyle ,
@ -847,11 +858,14 @@ class jsplot
markerstyle, markerstyle,
markercolor, markercolor,
markersize , markersize ,
) })
{ {
if (this.manager.list_canvas.length === 0) if (this.manager.list_canvas.length === 0)
{ {
this.manager.add_canvas(500,500); this.manager.add_canvas({
width: 500,
height: 500,
});
} }
let canvas = this.manager.list_canvas[ let canvas = this.manager.list_canvas[
this.manager.list_canvas.length - 1 this.manager.list_canvas.length - 1
@ -859,17 +873,17 @@ class jsplot
canvas = this.manager.list_canvas[0]; canvas = this.manager.list_canvas[0];
if (canvas.figure.list_axes.length === 0) if (canvas.figure.list_axes.length === 0)
{ {
canvas.figure.add_axes(); canvas.figure.add_axes({});
} }
canvas.figure.list_axes[0].plot( canvas.figure.list_axes[0].plot({
x , x : x ,
y , y : y ,
linestyle , linestyle: linestyle ,
linecolor , linecolor: linecolor ,
markerstyle, markerstyle: markerstyle,
markercolor, markercolor: markercolor,
markersize , markersize: markersize ,
); });
} }
/** /**
@ -881,12 +895,15 @@ class jsplot
{ {
if (this.manager.list_canvas.length === 0) if (this.manager.list_canvas.length === 0)
{ {
this.manager.add_canvas(500,500); this.manager.add_canvas({
width: 500,
height: 500,
});
} }
let canvas = this.manager.list_canvas[0]; let canvas = this.manager.list_canvas[0];
if (canvas.figure.list_axes.length === 0) if (canvas.figure.list_axes.length === 0)
{ {
canvas.figure.add_axes(); canvas.figure.add_axes({});
} }
canvas.figure.list_axes[0].title = content; canvas.figure.list_axes[0].title = content;
} }
@ -898,20 +915,20 @@ class jsplot
{ {
if (this.manager.list_canvas.length === 0) if (this.manager.list_canvas.length === 0)
{ {
this.manager.add_canvas( this.manager.add_canvas({
500 , width: 500 ,
500 , height: 500 ,
this.manager.list_canvas[0], position: this.manager.list_canvas - 1,
); });
} }
else else
{ {
this.manager.list_canvas[0].draw(); this.manager.list_canvas[0].draw();
this.manager.add_canvas( this.manager.add_canvas({
500 , width: 500 ,
500 , height: 500 ,
this.manager.list_canvas.length - 1, position: this.manager.list_canvas.length - 1,
); });
} }
} }
} }

64
main.js
View file

@ -3,13 +3,50 @@
* list of loaded scripts (only itself at start) * list of loaded scripts (only itself at start)
**/ **/
var __scripts = [ 'main.js' ]; var __scripts = [ 'main.js' ];
//var __lang = 'en'; var __lang = undefined;
async function load_lang()
{
let language = navigator.language.slice(0,2).toLowerCase();
if (!(['en', 'fr'].includes(language)))
{
language === 'en';
}
__lang = await fetch('./lang/'+language+'.json')
.then((response) => response.json())
.then((json) => { return json });
console.info(_('success_load'));
}
/* i18n small function */ /* i18n small function */
function _(key) function _(content, replacements = {})
{ {
return key; if (typeof __lang !== 'undefined')
//return LANG[__lang][key] == undefined ? key : LANG[__lang][key]; {
if (content in __lang)
{
content = __lang[content];
}
}
if (Object.keys(replacements).length)
{
let tokens = content.split(/({[^}\\]*})/g);
Object.keys(replacements).forEach((name) =>
{
if (tokens.includes('{'+name+'}'))
{
Object.keys(tokens).forEach((key) =>
{
if ('{'+name+'}' === tokens[key])
{
tokens[key] = replacements[name];
}
});
}
});
content = tokens.join('');
}
return content;
} }
/* include other scripts to the html file */ /* include other scripts to the html file */
@ -30,19 +67,23 @@ async function include(src, script_list)
} }
else else
{ {
reject( reject(_('err_include', {src: src}))
_(
'an error occured when adding the script element' +
'for ${src}'
)
);
} }
} ); } );
script_list.push(src); // the script is considered as loaded script_list.push(src); // the script is considered as loaded
return script_loaded.then( return script_loaded.then(
(value) => script_list, () =>
{
console.info(_(
'script_load',
{
script: src,
} ,
));
return script_list
},
(error) => { (error) => {
throw error; throw error;
} }
@ -51,6 +92,7 @@ async function include(src, script_list)
async function launch() async function launch()
{ {
await load_lang();
__scripts = await include('./lichartee.js', __scripts); __scripts = await include('./lichartee.js', __scripts);
__scripts = await include('./test.js', __scripts); __scripts = await include('./test.js', __scripts);
} }

41
test.js
View file

@ -8,26 +8,27 @@ let b = x.map((element) => - Math.sin(element));
let c = x.map((element) => - Math.cos(element)); let c = x.map((element) => - Math.cos(element));
let pyplot = new jsplot(); let pyplot = new jsplot();
pyplot.plot( pyplot.plot({
x, x: x ,
y, y: y ,
); linecolor: 'green',
});
pyplot.title('4 sinus'); pyplot.title('4 sinus');
pyplot.show(); pyplot.show();
pyplot.plot( pyplot.plot({
x, x: x,
y, y: y,
); });
pyplot.plot( pyplot.plot({
x, x: x,
a, y: a,
); });
pyplot.plot( pyplot.plot({
x, x: x,
b, y: b,
); });
pyplot.plot( pyplot.plot({
x, x: x,
c, y: c,
); });
pyplot.show(); pyplot.show();