Add lines example + doc

denis-migdal · Nov 12, 2024 · c2ccd86 · c2ccd86
1 parent b00be2c
commit c2ccd86
Show file tree

Hide file tree

Showing 27 changed files with 201 additions and 69 deletions.
diff --git a/README.md b/README.md
@@ -7,4 +7,28 @@
 ## Build
 
 - `npm run build`
-- `npm run watch`
+- `npm run watch`
+
+## TODO
+
+### Bugs
+
+- canvas overflow (1px de trop)
+- default datalabel/zoom
+
+### Features
+
+- share components (clone)
+- move  components (remove and add)
+
+- if color starts with -- => use css prop computed value ? (requires to manually update)
+
+### Refactors
+
+- refactor internals
+- use signal/computedSignal/effect
+
+### TS type errors
+
+- LISS(extends)
+- ChartHTML.XXX
diff --git a/dist/dev/assets/examples/html-line/index.html b/dist/dev/assets/examples/html-line/index.html
@@ -0,0 +1,5 @@
+<chart-html>
+    <curve-line>
+        [[0,0], [1,1], [2,0]]
+    </curve-line>
+</chart-html>
diff --git a/dist/dev/assets/examples/js-line/index.js b/dist/dev/assets/examples/js-line/index.js
@@ -0,0 +1,5 @@
+const graph = new ChartHTML();
+graph.addComponent(ChartHTML.Line, {
+    content: [[0,0], [1,1], [2,0]]
+});
+document.body.append(graph.host);
diff --git a/dist/dev/index.js b/dist/dev/index.js
diff --git a/dist/dev/pages/playground/index.js b/dist/dev/pages/playground/index.js
diff --git a/dist/libs/LISS/src/LISSHost.js b/dist/libs/LISS/src/LISSHost.js
diff --git a/dist/libs/LISS/src/LISSHost.js.map b/dist/libs/LISS/src/LISSHost.js.map
diff --git a/doc/fr/index.md b/doc/fr/index.md
@@ -46,4 +46,34 @@ document.body.append(graph.host);
             <a href="https://denis-migdal.github.io/ChartsHTML/dist/dev/pages/playground/?example=js-empty">playground</a>
         </td></tr>
     </tfoot>
+</table>
+
+Nous pouvons ensuite ajouter, e.g. une ligne au graphe :
+<table>
+    <thead>
+        <tr><th>HTML</th><th>JS</th></tr>
+    </thead>
+    <tbody>
+        <tr><td>
+            <pre><code lang="html">&lt;chart-html&gt;
+    &lt;curve-line&gt;
+        [[0,0], [1,1], [2,0]]
+    &lt;/curve-line&gt;
+&lt;/chart-html&gt;</code></pre>
+        </td><td>
+<pre><code lang="js">const graph = new ChartHTML();
+graph.addComponent(ChartHTML.Line, {
+    content: [[0,0], [1,1], [2,0]]
+});
+document.body.append(graph.host);
+</code></pre>
+        </td></tr>
+    </tbody>
+    <tfoot>
+        <tr><td>
+            <a href="https://denis-migdal.github.io/ChartsHTML/dist/dev/pages/playground/?example=html-line">playground</a>
+        </td><td>
+            <a href="https://denis-migdal.github.io/ChartsHTML/dist/dev/pages/playground/?example=js-line">playground</a>
+        </td></tr>
+    </tfoot>
 </table>
diff --git a/src/assets/examples/html-line/index.html b/src/assets/examples/html-line/index.html
@@ -0,0 +1,5 @@
+<chart-html>
+    <curve-line>
+        [[0,0], [1,1], [2,0]]
+    </curve-line>
+</chart-html>
diff --git a/src/assets/examples/js-line/index.js b/src/assets/examples/js-line/index.js
@@ -0,0 +1,5 @@
+const graph = new ChartHTML();
+graph.addComponent(ChartHTML.Line, {
+    content: [[0,0], [1,1], [2,0]]
+});
+document.body.append(graph.host);
diff --git a/src/components/curves/Bars.ts b/src/components/curves/Bars.ts
@@ -5,8 +5,8 @@ import LISS from "../../../libs/LISS/src/index.ts";
 //@ts-ignore
 export default class Bars extends LISS({extends: Dataset, attrs: ['reversed']}) {
 
-    constructor() {
-        super();
+    constructor(...args: any[]) {
+        super(...args);
 
 		this.setAttrDefault('type', 'bar');
     }

diff --git a/src/components/curves/HLine.ts b/src/components/curves/HLine.ts
@@ -4,8 +4,8 @@ import LISS from "../../../libs/LISS/src/index.ts";
 
 export default class HLine extends LISS({extends: Line}) {
 
-    constructor() {
-        super();
+    constructor(...args: any[]) {
+        super(...args);
 
         this.setAttrDefault('showPoints', 'false');
     }

diff --git a/src/components/curves/Histogram.ts b/src/components/curves/Histogram.ts
@@ -4,8 +4,8 @@ import LISS from "../../../libs/LISS/src/index.ts";
 
 export default class Histogram extends LISS({extends: Bars, attrs: ['precision']}) {
 
-    constructor() {
-        super();
+    constructor(...args: any[]) {
+        super(...args);
     }
 
     override _contentParser(content: unknown) {

diff --git a/src/components/curves/Line.ts b/src/components/curves/Line.ts
@@ -5,8 +5,8 @@ import LISS from "../../../libs/LISS/src/index.ts";
 //@ts-ignore : "Property 'onAttrChanged' is protected in type 'Line' but public in type 'Dataset'." WTF ???
 export default class Line extends LISS({extends: Dataset, attrs: ['show-points', 'decimate']}) {
 
-    constructor() {
-        super();
+    constructor(...args: any[]) {
+        super(...args);
 
 		this.setAttrDefault('type', 'scatter');
     }

diff --git a/src/components/curves/Points.ts b/src/components/curves/Points.ts
@@ -5,8 +5,8 @@ import LISS from "../../../libs/LISS/src/index.ts";
 //@ts-ignore : "Property 'onAttrChanged' is protected in type 'Line' but public in type 'Dataset'." WTF ???
 export default class Points extends LISS({extends: Dataset}) {
 
-    constructor() {
-        super();
+    constructor(...args: any[]) {
+        super(...args);
 
 		this.setAttrDefault('type', 'scatter');
     }

diff --git a/src/components/curves/Timelapse.ts b/src/components/curves/Timelapse.ts
@@ -4,8 +4,8 @@ import LISS from "../../../libs/LISS/src/index.ts";
 
 export default class Timelapse extends LISS({extends: Line}) {
 
-    constructor() {
-        super();
+    constructor(...args: any[]) {
+        super(...args);
     }
 
     override _contentParser(content: unknown) {

diff --git a/src/components/curves/VLine.ts b/src/components/curves/VLine.ts
@@ -4,8 +4,8 @@ import LISS from "../../../libs/LISS/src/index.ts";
 
 export default class VLine extends LISS({extends: Line}) {
 
-    constructor() {
-        super();
+    constructor(...args: any[]) {
+        super(...args);
 
         this.setAttrDefault('showPoints', 'false');
     }

diff --git a/src/components/datalabels.ts b/src/components/datalabels.ts
@@ -7,8 +7,8 @@ import LISS from "../../libs/LISS/src/index.ts";
 
 export default class Datalabels extends LISS({extends: GraphComponent}) {
 
-    constructor() {
-        super();
+    constructor(...args: any[]) {
+        super(...args);
         this.host.setAttribute('slot', 'options');
 
         //TODO : move 2 parents....

diff --git a/src/components/dataset.ts b/src/components/dataset.ts
@@ -9,15 +9,17 @@ export default class Dataset extends LISS({extends: GraphComponent, attrs: ['typ
 
     #chart?: ChartHTML;
 
-    constructor() {
-        super();
+    constructor(...args: any[]) {
+        super(...args);
+
         this.host.setAttribute('slot', 'dataset');
+        this.setAttrDefault('color', 'black');
     }
 
     #dataset = {
         name: this.attrs.name,
         data: [],
-        type: ""
+        type: null
     };
     get dataset() {
         return this.#dataset as any;

diff --git a/src/components/datasets.ts b/src/components/datasets.ts
@@ -5,8 +5,8 @@ import { StringEval } from '..';
 
 export default class Datasets extends LISS({extends: GraphComponent, shadow: ShadowCfg.OPEN, attrs: ['type', 'tooltip', 'color', 'colors']}) {
 
-    constructor() {
-        super();
+    constructor(...args: any[]) {
+        super(...args);
         this.host.setAttribute('slot', 'datasets');
     }
 

diff --git a/src/components/index.ts b/src/components/index.ts
@@ -7,8 +7,17 @@ export default class GraphComponent extends LISS({shadow: ShadowCfg.NONE,attrs:
 
     #chart?: ChartHTML;
 
-    constructor() {
+    constructor(params: Record<string,any> = {}) {
         super();
+
+        for(let key in params ) {
+            if( key === "content" ) {
+                this.host.textContent = JSON.stringify(params.content);
+                continue;
+            }
+            this.attrs[key] = params[key];
+        }
+
         this.#contentInit();
     }
 
@@ -67,6 +76,7 @@ export default class GraphComponent extends LISS({shadow: ShadowCfg.NONE,attrs:
     _attach(chart: ChartHTML) {
         this.#chart = chart;
         this._insert();
+
         if( this.isInDOM)
             this._update();
     }

diff --git a/src/components/scale.ts b/src/components/scale.ts
@@ -6,8 +6,8 @@ export default class Scale extends LISS({extends: GraphComponent, attrs: ['min',
 
     #chart?: ChartHTML;
 
-    constructor() {
-        super();
+    constructor(...args: any[]) {
+        super(...args);
 
         this.host.setAttribute('slot', 'scale');
     }

diff --git a/src/components/tooltip.ts b/src/components/tooltip.ts
@@ -7,8 +7,8 @@ import {Chart, ChartType, TooltipItem, ChartDataset} from 'chart.js';
 //TODO: direction... (with zoom...)
 export default class Tooltip extends LISS({extends: GraphComponent, attrs: ['direction']}) {
 
-    constructor() {
-        super();
+    constructor(...args: any[]) {
+        super(...args);
 
         this.host.setAttribute('slot', 'options');
 

diff --git a/src/components/value.ts b/src/components/value.ts
@@ -6,8 +6,8 @@ import {Chart} from 'chart.js';
 
 export default class Value extends LISS({extends: GraphComponent}) {
 
-    constructor() {
-        super();
+    constructor(...args: any[]) {
+        super(...args);
         this.host.setAttribute('slot', 'dataset');
 
         const observer = new MutationObserver( () => {

diff --git a/src/components/zoom.ts b/src/components/zoom.ts
@@ -6,8 +6,8 @@ import {Chart} from 'chart.js';
 
 export default class ChartZoom extends LISS({extends: GraphComponent, attrs:['direction']}) {
 
-    constructor() {
-        super();
+    constructor(...args: any[]) {
+        super(...args);
         this.host.setAttribute('slot', 'options');
 
         this.setAttrDefault('direction', 'xy');

diff --git a/src/index.ts b/src/index.ts
@@ -54,6 +54,7 @@ Chart.register(CategoryScale);
 
 const CSS = `
 :host {
+	position: relative;
     display: block;
     width: 100%;
     height: 100%;
@@ -93,6 +94,18 @@ export default class ChartHTML extends LISS({css: CSS, attrs: ["measure-render-t
 		this.updateAll();
 	}
 
+	addComponent(Component: Constructor<Dataset>, params: Record<string,string|null> = {}) {
+
+		let instance = new Component(params);
+		this.host.append(instance.host);
+		instance._attach(this);
+
+		this.#components.push(instance);
+
+		//instance._before_chart_update();
+		//this.update();
+	}
+
 	evalContext(context = {}) {
 		return {c: context, v: this.#values};
 	}
@@ -140,6 +153,7 @@ export default class ChartHTML extends LISS({css: CSS, attrs: ["measure-render-t
 			options: {
 				locale: 'en-IN',
 				animation: false,
+				responsive: true,
 				maintainAspectRatio: false,
                 scales: {},
 				plugins: {},
@@ -200,6 +214,8 @@ export default class ChartHTML extends LISS({css: CSS, attrs: ["measure-render-t
 			return;
 		this.#isUpdatingAll = true;
 
+		this._chartJS.resize();
+
 		for(let elem of this.#components)
 			elem.update(); //TODO...
 
@@ -248,13 +264,16 @@ import "./components/scale.ts";
 
 import "./components/datasets.ts";
 import "./components/dataset.ts";
-import './components/curves/Line';
+import Line from './components/curves/Line';
 import './components/curves/HLine';
 import './components/curves/VLine';
 import './components/curves/Timelapse';
 import './components/curves/Bars';
 import './components/curves/Histogram';
 import './components/curves/Points';
 import Dataset from "./components/dataset";
+import { Constructor } from "LISS/src/types.ts";
+
+ChartHTML.Line = Line;
 
 LISS.define('chart-html', ChartHTML);
diff --git a/src/pages/playground/index.ts b/src/pages/playground/index.ts
@@ -4,8 +4,10 @@ let iframe = document.querySelector('iframe')!;
 
 const examples = [
     "html-empty",
+    "html-line",
 
     "js-empty",
+    "js-line",
 ];
 
 const resources = [