Add i18n & Named arg
This commit is contained in:
parent
1fc3ed58e2
commit
dba23293e1
6 changed files with 172 additions and 92 deletions
|
|
@ -26,6 +26,10 @@ This project is licensied under the GPL 3 license - see the
|
|||
|
||||
## Changelog
|
||||
|
||||
*v 0.1.6*
|
||||
- Add i18n feature
|
||||
- Add named argument
|
||||
|
||||
*v 0.1.5*
|
||||
- Add state interface with jsplot (pyplot procedural style)
|
||||
- Update documentation
|
||||
|
|
@ -57,4 +61,4 @@ This project is licensied under the GPL 3 license - see the
|
|||
|
||||
## Roadmap
|
||||
|
||||
- Add named argument functionalities
|
||||
- Add tooltip
|
||||
|
|
|
|||
8
lang/en.json
Normal file
8
lang/en.json
Normal 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
8
lang/fr.json
Normal 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
137
lichartee.js
|
|
@ -27,7 +27,11 @@ class Manager
|
|||
* @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)
|
||||
add_canvas({
|
||||
width = 100,
|
||||
height = 100,
|
||||
position = 0 ,
|
||||
})
|
||||
{
|
||||
let element_canvas = document.createElement('canvas');
|
||||
let text = document.createTextNode(
|
||||
|
|
@ -49,7 +53,7 @@ class Manager
|
|||
let ctx = element_canvas.getContext('2d');
|
||||
ctx.canvas.width = width ;
|
||||
ctx.canvas.height = height;
|
||||
let figure = new Figure();
|
||||
let figure = new Figure({});
|
||||
let canvas = new Canvas(ctx, figure);
|
||||
this.list_canvas.splice(position, 0, canvas);
|
||||
return canvas;
|
||||
|
|
@ -71,7 +75,7 @@ class Manager
|
|||
*
|
||||
* @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);
|
||||
this.list_canvas.splice(position, 1);
|
||||
|
|
@ -103,7 +107,7 @@ class Canvas
|
|||
{
|
||||
if (this.figure instanceof Figure.constructor)
|
||||
{
|
||||
throw _('this canvas does not possess figure to draw')
|
||||
throw _('no_figure')
|
||||
}
|
||||
let start_x = 0;
|
||||
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 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.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);
|
||||
return axes;
|
||||
}
|
||||
|
|
@ -183,14 +194,14 @@ class Axes
|
|||
* @param int height Height of the axes
|
||||
* @param String title Title of the axes
|
||||
*/
|
||||
constructor(
|
||||
width = 100 ,
|
||||
height = 100 ,
|
||||
)
|
||||
constructor({
|
||||
width = 100,
|
||||
height = 100,
|
||||
})
|
||||
{
|
||||
this.width = width;
|
||||
this.height = height;
|
||||
this.axis = new Axis();
|
||||
this.axis = new Axis({});
|
||||
this.lines = [];
|
||||
}
|
||||
|
||||
|
|
@ -212,7 +223,7 @@ class Axes
|
|||
* definition than linecolor)
|
||||
* @param Number markersize size of the marker
|
||||
*/
|
||||
plot(
|
||||
plot({
|
||||
x ,
|
||||
y ,
|
||||
linestyle = 'solid' ,
|
||||
|
|
@ -220,17 +231,17 @@ class Axes
|
|||
markerstyle = '' ,
|
||||
markercolor = 'black' ,
|
||||
markersize = 5 ,
|
||||
)
|
||||
})
|
||||
{
|
||||
let line = new Line(
|
||||
x ,
|
||||
y ,
|
||||
linestyle ,
|
||||
linecolor ,
|
||||
markerstyle,
|
||||
markercolor,
|
||||
markersize ,
|
||||
);
|
||||
let line = new Line({
|
||||
x : x ,
|
||||
y : y ,
|
||||
linestyle : linestyle ,
|
||||
linecolor : linecolor ,
|
||||
markerstyle: markerstyle,
|
||||
markercolor: markercolor,
|
||||
markersize : markersize ,
|
||||
});
|
||||
this.lines.push(line);
|
||||
}
|
||||
|
||||
|
|
@ -319,7 +330,7 @@ class Axes
|
|||
*/
|
||||
set title(content)
|
||||
{
|
||||
this._title = new Title(content);
|
||||
this._title = new Title({content: content});
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -367,7 +378,7 @@ class Line
|
|||
* definition than linecolor)
|
||||
* @param Number markersize size of the marker
|
||||
*/
|
||||
constructor(
|
||||
constructor({
|
||||
x ,
|
||||
y ,
|
||||
linestyle = 'solid' ,
|
||||
|
|
@ -375,7 +386,7 @@ class Line
|
|||
markerstyle = '' ,
|
||||
markercolor = 'black' ,
|
||||
markersize = 5 ,
|
||||
)
|
||||
})
|
||||
{
|
||||
this.x = x ;
|
||||
this.y = y ;
|
||||
|
|
@ -470,7 +481,7 @@ class Line
|
|||
}
|
||||
else
|
||||
{
|
||||
throw _('the style of the line is not correctly defined');
|
||||
throw _('line_style', {style: this.linestyle});
|
||||
}
|
||||
for (const index in x_coordinates)
|
||||
{
|
||||
|
|
@ -564,7 +575,7 @@ class Line
|
|||
}
|
||||
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 color string font color
|
||||
*/
|
||||
constructor(
|
||||
constructor({
|
||||
size = 20 ,
|
||||
family = 'sans-serif',
|
||||
color = 'black' ,
|
||||
)
|
||||
})
|
||||
{
|
||||
this.size = size;
|
||||
this.family = family;
|
||||
|
|
@ -618,16 +629,16 @@ class Title
|
|||
* @param content Content Content of a title
|
||||
* @param font Font Font of a title
|
||||
*/
|
||||
constructor(
|
||||
constructor({
|
||||
content = '' ,
|
||||
font = undefined,
|
||||
margin = 5 ,
|
||||
)
|
||||
})
|
||||
{
|
||||
this.content = content;
|
||||
if (font === undefined)
|
||||
{
|
||||
font = new Font();
|
||||
font = new Font({});
|
||||
}
|
||||
this.font = font;
|
||||
this.margin = margin;
|
||||
|
|
@ -696,14 +707,14 @@ class Axis
|
|||
* @param text_height int Height of the text label
|
||||
* @param Font font Font of tick labels
|
||||
*/
|
||||
constructor(
|
||||
constructor({
|
||||
number_x_tick = 4 ,
|
||||
number_y_tick = 4 ,
|
||||
size_tick = 5 ,
|
||||
margin = 15 ,
|
||||
text_height = 15 ,
|
||||
font = undefined,
|
||||
)
|
||||
})
|
||||
{
|
||||
this.number_x_tick = number_x_tick;
|
||||
this.number_y_tick = number_y_tick;
|
||||
|
|
@ -712,7 +723,7 @@ class Axis
|
|||
this.text_height = text_height;
|
||||
if (font === undefined)
|
||||
{
|
||||
font = new Font();
|
||||
font = new Font({});
|
||||
}
|
||||
this.font = font;
|
||||
}
|
||||
|
|
@ -839,7 +850,7 @@ class jsplot
|
|||
* definition than linecolor)
|
||||
* @param Number markersize size of the marker
|
||||
*/
|
||||
plot(
|
||||
plot({
|
||||
x ,
|
||||
y ,
|
||||
linestyle ,
|
||||
|
|
@ -847,11 +858,14 @@ class jsplot
|
|||
markerstyle,
|
||||
markercolor,
|
||||
markersize ,
|
||||
)
|
||||
})
|
||||
{
|
||||
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[
|
||||
this.manager.list_canvas.length - 1
|
||||
|
|
@ -859,17 +873,17 @@ class jsplot
|
|||
canvas = this.manager.list_canvas[0];
|
||||
if (canvas.figure.list_axes.length === 0)
|
||||
{
|
||||
canvas.figure.add_axes();
|
||||
canvas.figure.add_axes({});
|
||||
}
|
||||
canvas.figure.list_axes[0].plot(
|
||||
x ,
|
||||
y ,
|
||||
linestyle ,
|
||||
linecolor ,
|
||||
markerstyle,
|
||||
markercolor,
|
||||
markersize ,
|
||||
);
|
||||
canvas.figure.list_axes[0].plot({
|
||||
x : x ,
|
||||
y : y ,
|
||||
linestyle: linestyle ,
|
||||
linecolor: linecolor ,
|
||||
markerstyle: markerstyle,
|
||||
markercolor: markercolor,
|
||||
markersize: markersize ,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -881,12 +895,15 @@ class jsplot
|
|||
{
|
||||
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];
|
||||
if (canvas.figure.list_axes.length === 0)
|
||||
{
|
||||
canvas.figure.add_axes();
|
||||
canvas.figure.add_axes({});
|
||||
}
|
||||
canvas.figure.list_axes[0].title = content;
|
||||
}
|
||||
|
|
@ -898,20 +915,20 @@ class jsplot
|
|||
{
|
||||
if (this.manager.list_canvas.length === 0)
|
||||
{
|
||||
this.manager.add_canvas(
|
||||
500 ,
|
||||
500 ,
|
||||
this.manager.list_canvas[0],
|
||||
);
|
||||
this.manager.add_canvas({
|
||||
width: 500 ,
|
||||
height: 500 ,
|
||||
position: this.manager.list_canvas - 1,
|
||||
});
|
||||
}
|
||||
else
|
||||
{
|
||||
this.manager.list_canvas[0].draw();
|
||||
this.manager.add_canvas(
|
||||
500 ,
|
||||
500 ,
|
||||
this.manager.list_canvas.length - 1,
|
||||
);
|
||||
this.manager.add_canvas({
|
||||
width: 500 ,
|
||||
height: 500 ,
|
||||
position: this.manager.list_canvas.length - 1,
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
64
main.js
64
main.js
|
|
@ -3,13 +3,50 @@
|
|||
* list of loaded scripts (only itself at start)
|
||||
**/
|
||||
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 */
|
||||
function _(key)
|
||||
function _(content, replacements = {})
|
||||
{
|
||||
return key;
|
||||
//return LANG[__lang][key] == undefined ? key : LANG[__lang][key];
|
||||
if (typeof __lang !== 'undefined')
|
||||
{
|
||||
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 */
|
||||
|
|
@ -30,19 +67,23 @@ async function include(src, script_list)
|
|||
}
|
||||
else
|
||||
{
|
||||
reject(
|
||||
_(
|
||||
'an error occured when adding the script element' +
|
||||
'for ${src}'
|
||||
)
|
||||
);
|
||||
reject(_('err_include', {src: src}))
|
||||
}
|
||||
} );
|
||||
|
||||
script_list.push(src); // the script is considered as loaded
|
||||
|
||||
return script_loaded.then(
|
||||
(value) => script_list,
|
||||
() =>
|
||||
{
|
||||
console.info(_(
|
||||
'script_load',
|
||||
{
|
||||
script: src,
|
||||
} ,
|
||||
));
|
||||
return script_list
|
||||
},
|
||||
(error) => {
|
||||
throw error;
|
||||
}
|
||||
|
|
@ -51,6 +92,7 @@ async function include(src, script_list)
|
|||
|
||||
async function launch()
|
||||
{
|
||||
await load_lang();
|
||||
__scripts = await include('./lichartee.js', __scripts);
|
||||
__scripts = await include('./test.js', __scripts);
|
||||
}
|
||||
|
|
|
|||
41
test.js
41
test.js
|
|
@ -8,26 +8,27 @@ let b = x.map((element) => - Math.sin(element));
|
|||
let c = x.map((element) => - Math.cos(element));
|
||||
|
||||
let pyplot = new jsplot();
|
||||
pyplot.plot(
|
||||
x,
|
||||
y,
|
||||
);
|
||||
pyplot.plot({
|
||||
x: x ,
|
||||
y: y ,
|
||||
linecolor: 'green',
|
||||
});
|
||||
pyplot.title('4 sinus');
|
||||
pyplot.show();
|
||||
pyplot.plot(
|
||||
x,
|
||||
y,
|
||||
);
|
||||
pyplot.plot(
|
||||
x,
|
||||
a,
|
||||
);
|
||||
pyplot.plot(
|
||||
x,
|
||||
b,
|
||||
);
|
||||
pyplot.plot(
|
||||
x,
|
||||
c,
|
||||
);
|
||||
pyplot.plot({
|
||||
x: x,
|
||||
y: y,
|
||||
});
|
||||
pyplot.plot({
|
||||
x: x,
|
||||
y: a,
|
||||
});
|
||||
pyplot.plot({
|
||||
x: x,
|
||||
y: b,
|
||||
});
|
||||
pyplot.plot({
|
||||
x: x,
|
||||
y: c,
|
||||
});
|
||||
pyplot.show();
|
||||
|
|
|
|||
Loading…
Reference in a new issue