First commit
This commit is contained in:
commit
3176e4fdf6
8 changed files with 510 additions and 0 deletions
32
README.md
Normal file
32
README.md
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
# lichartee
|
||||
|
||||
Clone of [matplotlib](https://matplotlib.org) in javascript
|
||||
|
||||
## Getting started
|
||||
|
||||
Download or clone this repo, then open [index.html](index.html) in your
|
||||
favorite browser.
|
||||
|
||||
[test.js](test.js) present an example use of this library.
|
||||
|
||||
## Documentation
|
||||
|
||||
WIP
|
||||
|
||||
## Author
|
||||
|
||||
- linarphy - *initial work*
|
||||
|
||||
## Versioning
|
||||
|
||||
We use [Semver](http://semver.org) for versioning.
|
||||
|
||||
## License
|
||||
|
||||
This project is licensied under the Chocolate-Ware license - see the
|
||||
[LICENSE](LICENSE) file for more information.
|
||||
|
||||
## Changelog
|
||||
|
||||
*v.0.1*
|
||||
- creation of a basic layout
|
||||
87
favicon.svg
Normal file
87
favicon.svg
Normal file
|
|
@ -0,0 +1,87 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
<!-- Edited with neovim (Neovide for windows) -->
|
||||
|
||||
<svg
|
||||
width="500"
|
||||
height="500"
|
||||
version="2.0"
|
||||
inkscape:version="1.3.2 (091e20e, 2023-11-25, custom)"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/">
|
||||
<style>
|
||||
path
|
||||
{
|
||||
fill: #000000;
|
||||
}
|
||||
@media (prefers-color-scheme: dark)
|
||||
{
|
||||
path
|
||||
{
|
||||
fill: #ffffff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<title>
|
||||
lichartee logo
|
||||
</title>
|
||||
<path
|
||||
d="M 250,500 H 0 V 0 L 73.2233,73.2233 V 426.7767 c 0,0 60.78,72.95 179.20,72.19"
|
||||
id="bar_left" />
|
||||
<path
|
||||
d="M 250,500 H 500 V 0 L 426.7767,73.2233 V 426.7767 c 0,0 -58.26,72.95 -177.94,72.19"
|
||||
id="bar_right" />
|
||||
<path
|
||||
d="M 375,125 250,250 125,125 c -33.527221,33.35835 -52.451433,78.65491 -52.62,125.95 0,98.62149 79.94851,178.57 178.57,178.57 98.62149,0 178.57,-79.94851 178.57,-178.57 C 429.35143,203.65491 408.52722,158.35835 375,125 Z"
|
||||
id="circle" />
|
||||
<path
|
||||
d="M 250,0 125,125 c 34.60338,-29.864158 79.34131,-45.322007 125,-43.19 46.91963,0.333871 86.51935,10.011293 125,43.19 z"
|
||||
id="top" />
|
||||
<metadata>
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:title>lichartee logo</dc:title>
|
||||
<dc:date>2023/12/30</dc:date>
|
||||
<dc:creator>
|
||||
<cc:Agent>
|
||||
<dc:title>linarphy</dc:title>
|
||||
</cc:Agent>
|
||||
</dc:creator>
|
||||
<dc:subject>
|
||||
<rdf:Bag>
|
||||
<rdf:li>logo</rdf:li>
|
||||
<rdf:li>char</rdf:li>
|
||||
<rdf:li>lichartee</rdf:li>
|
||||
</rdf:Bag>
|
||||
</dc:subject>
|
||||
<dc:rights>
|
||||
<cc:Agent>
|
||||
<dc:title>ArtLibre</dc:title>
|
||||
</cc:Agent>
|
||||
</dc:rights>
|
||||
<cc:license
|
||||
rdf:resource="http://artlibre.org/licence/lal" />
|
||||
</cc:Work>
|
||||
<cc:License
|
||||
rdf:about="http://artlibre.org/licence/lal">
|
||||
<cc:permits
|
||||
rdf:resource="http://creativecommons.org/ns#Reproduction" />
|
||||
<cc:permits
|
||||
rdf:resource="http://creativecommons.org/ns#Distribution" />
|
||||
<cc:permits
|
||||
rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
|
||||
<cc:requires
|
||||
rdf:resource="http://creativecommons.org/ns#ShareAlike" />
|
||||
<cc:requires
|
||||
rdf:resource="http://creativecommons.org/ns#Notice" />
|
||||
<cc:requires
|
||||
rdf:resource="http://creativecommons.org/ns#Attribution" />
|
||||
</cc:License>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.7 KiB |
9
humans.txt
Normal file
9
humans.txt
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
/* TEAM */
|
||||
Dev: linarphy
|
||||
Fediverse: @linarphy@linarphy.net
|
||||
|
||||
/* SITE */
|
||||
Last update: 2023/12/30
|
||||
Language: English
|
||||
Doctype: HTML5
|
||||
IDE: neovim
|
||||
29
index.html
Normal file
29
index.html
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="description"
|
||||
content="A small demo of this plotting library" />
|
||||
<meta name="author" content="linarphy" />
|
||||
<meta name="keywords" content="chart,plot,js,library" />
|
||||
<meta name="generator" content="neovim" />
|
||||
<link type="text/plain" rel="author" href="humans.txt" />
|
||||
<link type="image/svg+xml" rel="icon" href="favicon.svg" />
|
||||
<link rel="stylesheet" href="main.css" />
|
||||
<title>Chart demo</title>
|
||||
<script src="main.js"></script>
|
||||
<!-- Added by include() -->
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
Multiple plot
|
||||
</header>
|
||||
<main>
|
||||
</main>
|
||||
<footer>
|
||||
<a href="https://git.linarphy.net/linarphy/lichartee" title="Source of this code">
|
||||
code
|
||||
</a>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
281
lichartee.js
Normal file
281
lichartee.js
Normal file
|
|
@ -0,0 +1,281 @@
|
|||
class Manager
|
||||
{
|
||||
constructor(parent_element)
|
||||
{
|
||||
this.parent_element = parent_element;
|
||||
this.list_canvas = [];
|
||||
}
|
||||
|
||||
/**
|
||||
* add a canvas
|
||||
*
|
||||
* @param int width Width of the added canvas
|
||||
* @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)
|
||||
{
|
||||
let element_canvas = document.createElement('canvas');
|
||||
let text = document.createTextNode(
|
||||
'Your browser doesn\'t seem to support canvas, or you ' +
|
||||
'deactivated them. This is the canvas where the chart ' +
|
||||
'should be displayed'
|
||||
);
|
||||
element_canvas.appendChild(text);
|
||||
if (this.parent_element.childElementCount === 0)
|
||||
{
|
||||
this.parent_element.appendChild(element_canvas);
|
||||
}
|
||||
else
|
||||
{
|
||||
this.parent_element.children[position].before(
|
||||
element_canvas
|
||||
);
|
||||
}
|
||||
let ctx = element_canvas.getContext('2d');
|
||||
ctx.canvas.width = width ;
|
||||
ctx.canvas.height = height;
|
||||
let figure = new Figure();
|
||||
let canvas = new Canvas(ctx, figure);
|
||||
this.list_canvas.splice(position, 0, canvas);
|
||||
return canvas;
|
||||
}
|
||||
|
||||
draw()
|
||||
{
|
||||
for (const index in this.list_canvas)
|
||||
{
|
||||
this.list_canvas[index].draw();
|
||||
}
|
||||
}
|
||||
|
||||
remove_canvas(position = 0)
|
||||
{
|
||||
document.removeChild(this.list_canvas[position].ctx.canvas);
|
||||
this.list_canvas.splice(position, 1);
|
||||
}
|
||||
}
|
||||
|
||||
class Canvas
|
||||
{
|
||||
constructor(ctx, figure)
|
||||
{
|
||||
this.ctx = ctx ;
|
||||
this.figure = figure;
|
||||
}
|
||||
|
||||
draw()
|
||||
{
|
||||
if (this.figure instanceof Figure.constructor)
|
||||
{
|
||||
throw _('this canvas does not possess figure to draw')
|
||||
}
|
||||
let start_x = 0;
|
||||
for (const index_axes in this.figure.list_axes)
|
||||
{
|
||||
let axes = this.figure.list_axes[index_axes];
|
||||
let x_proportion = axes.width/this.figure.width
|
||||
this.ctx.beginPath();
|
||||
this.ctx.moveTo(
|
||||
start_x,
|
||||
0
|
||||
);
|
||||
this.ctx.lineTo(
|
||||
start_x ,
|
||||
this.ctx.canvas.height
|
||||
);
|
||||
let end_x = start_x + this.ctx.canvas.width * x_proportion
|
||||
this.ctx.lineTo(
|
||||
end_x ,
|
||||
this.ctx.canvas.height
|
||||
);
|
||||
this.ctx.lineTo(
|
||||
end_x,
|
||||
0
|
||||
);
|
||||
this.ctx.lineTo(
|
||||
start_x,
|
||||
0
|
||||
);
|
||||
this.ctx.strokeStyle = 'rgb(0,0,0)';
|
||||
this.ctx.stroke();
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
class Figure
|
||||
{
|
||||
constructor()
|
||||
{
|
||||
this.width = 0 ;
|
||||
this.height = 0 ;
|
||||
this.list_axes = [];
|
||||
}
|
||||
|
||||
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);
|
||||
this.list_axes.splice(position, 0, axes);
|
||||
return axes;
|
||||
}
|
||||
|
||||
remove_axes(position)
|
||||
{
|
||||
this.list_axes.splice(position, 1);
|
||||
}
|
||||
}
|
||||
|
||||
class Axes
|
||||
{
|
||||
constructor(
|
||||
width = 100 ,
|
||||
height = 100 ,
|
||||
position = 0 ,
|
||||
title = '' ,
|
||||
)
|
||||
{
|
||||
this.width = width ;
|
||||
this.height = height ;
|
||||
this.position = position;
|
||||
this.title = title ;
|
||||
this.lines = [] ;
|
||||
}
|
||||
|
||||
plot(x, y, linestyle = undefined, label = '')
|
||||
{
|
||||
if (linestyle === undefined)
|
||||
{
|
||||
linestyle = new Style();
|
||||
}
|
||||
let line = new Line(x, y, linestyle, label);
|
||||
this.lines.push(line);
|
||||
}
|
||||
}
|
||||
|
||||
class Line
|
||||
{
|
||||
constructor(
|
||||
x ,
|
||||
y ,
|
||||
linestyle = undefined ,
|
||||
label = ''
|
||||
)
|
||||
{
|
||||
this.x = x ;
|
||||
this.y = y ;
|
||||
this.linestyle = linestyle ;
|
||||
this.label = label ;
|
||||
}
|
||||
|
||||
/**
|
||||
* draw the line in the box coordinate
|
||||
*
|
||||
* @param ctx ctx Context of the canvas
|
||||
* @param 2dlist<int> box Box where to draw the line
|
||||
* @param 2dlist<float> view Scale of the box (link value <->
|
||||
* coordinate
|
||||
*/
|
||||
draw(ctx, box, view)
|
||||
{
|
||||
const x_delta = view[1][0] - view[0][0];
|
||||
const y_delta = view[1][1] - view[0][1];
|
||||
const box_width = box[1][0] - box[0][0];
|
||||
const box_height = box[1][1] - box[0][1];
|
||||
|
||||
let x_coordinates = this.x.map(
|
||||
function (element, index, array)
|
||||
{
|
||||
return box[0][0] + box_width * (
|
||||
element - view[0][0]
|
||||
) / x_delta;
|
||||
}
|
||||
);
|
||||
let y_coordinates = this.y.map(
|
||||
function (element, index, array)
|
||||
{
|
||||
return box[0][1] + box_height - ( // starting top left
|
||||
box_height * (
|
||||
element - view[0][1]
|
||||
) / y_delta
|
||||
);
|
||||
}
|
||||
);
|
||||
ctx.moveTo(
|
||||
x_coordinates[0],
|
||||
y_coordinates[0]
|
||||
);
|
||||
for (const index in x_coordinates)
|
||||
{
|
||||
ctx.lineTo(
|
||||
x_coordinates[index],
|
||||
y_coordinates[index]
|
||||
);
|
||||
}
|
||||
ctx.strokeStyle = this.linestyle.color;
|
||||
ctx.stroke();
|
||||
}
|
||||
}
|
||||
|
||||
class Style
|
||||
{
|
||||
constructor(color = "rgb(0,0,0)", style = 'solid')
|
||||
{
|
||||
this.color = color;
|
||||
this.style = style;
|
||||
}
|
||||
}
|
||||
|
||||
function get_ext_array(array, f = Math.max, sign = -1)
|
||||
{
|
||||
return array.reduce(
|
||||
(a, b) => f(a, b),
|
||||
sign * Infinity
|
||||
);
|
||||
}
|
||||
1
main.css
Normal file
1
main.css
Normal file
|
|
@ -0,0 +1 @@
|
|||
|
||||
58
main.js
Normal file
58
main.js
Normal file
|
|
@ -0,0 +1,58 @@
|
|||
/*
|
||||
* GLOBAL VARIABLE!
|
||||
* list of loaded scripts (only itself at start)
|
||||
**/
|
||||
var __scripts = [ 'main.js' ];
|
||||
//var __lang = 'en';
|
||||
|
||||
/* i18n small function */
|
||||
function _(key)
|
||||
{
|
||||
return key;
|
||||
//return LANG[__lang][key] == undefined ? key : LANG[__lang][key];
|
||||
}
|
||||
|
||||
/* include other scripts to the html file */
|
||||
async function include(src, script_list)
|
||||
{
|
||||
/* DOM operations */
|
||||
let script = document.createElement('script');
|
||||
script.setAttribute('src' , src );
|
||||
document.getElementsByTagName('head')[0].appendChild(script);
|
||||
|
||||
/* check if the element is added to the DOM */
|
||||
let script_loaded = new Promise( (resolve, reject) => {
|
||||
if (script !== undefined)
|
||||
{
|
||||
script.addEventListener('load', () => {
|
||||
resolve(0);
|
||||
});
|
||||
}
|
||||
else
|
||||
{
|
||||
reject(
|
||||
_(
|
||||
'an error occured when adding the script element' +
|
||||
'for ${src}'
|
||||
)
|
||||
);
|
||||
}
|
||||
} );
|
||||
|
||||
script_list.push(src); // the script is considered as loaded
|
||||
|
||||
return script_loaded.then(
|
||||
(value) => script_list,
|
||||
(error) => {
|
||||
throw error;
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
async function launch()
|
||||
{
|
||||
__scripts = await include('./lichartee.js', __scripts);
|
||||
__scripts = await include('./test.js', __scripts);
|
||||
}
|
||||
|
||||
launch()
|
||||
13
test.js
Normal file
13
test.js
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
let manager = new Manager(
|
||||
document.getElementsByTagName('main')[0]
|
||||
);
|
||||
manager.add_canvas(500, 500);
|
||||
manager.add_canvas(500, 500).figure.add_axes().plot(
|
||||
[0,1,2,3,4,5] ,
|
||||
[0,1,4,9,16,25],
|
||||
);
|
||||
manager.list_canvas[0].figure.list_axes[0].plot(
|
||||
[0,1,2,3,4,5],
|
||||
[0,2,4,6,8,10]
|
||||
);
|
||||
manager.draw();
|
||||
Loading…
Reference in a new issue