UPDATE chartjs time to show reference point on xdata event

creative-connections · Nov 23, 2023 · 5095197 · 5095197
1 parent e5d4b26
commit 5095197
Show file tree

Hide file tree

Showing 11 changed files with 112 additions and 11 deletions.
diff --git a/dist/bodylight.bundle.js b/dist/bodylight.bundle.js
diff --git a/dist/bodylight.bundle.map b/dist/bodylight.bundle.map
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -128,6 +128,7 @@
     ]
   },
   "dependencies": {
-    "aurelia-bodylight-plugin": "^2.3.0"
+    "aurelia-bodylight-plugin": "^2.3.0",
+    "aurelia-resize": "^1.1.2"
   }
 }
diff --git a/src_aurelia-bodylight-plugin/package-lock.json b/src_aurelia-bodylight-plugin/package-lock.json
diff --git a/src_aurelia-bodylight-plugin/src/elements/chartjs-time.js b/src_aurelia-bodylight-plugin/src/elements/chartjs-time.js
@@ -17,10 +17,15 @@ export class ChartjsTime extends Chartjs {
     @bindable colorindex;
     @bindable timedenom; //coeficient which will be denominated from time (e.g. 60 => time/60 in minutes 3600 => time/3600 in hours)
     @bindable timedenomfixed = 1;
+    @bindable showrefpoint;
     refindices;
 
     constructor() {
         super();
+        this.handleXData  = e => {
+            window.refpoint = e.target.value;
+            this.updatechart();
+        }
         //this.type = 'line';
         this.handleValueChange = e => {
             //e.detail do not reallocate - using same buffer, thus slicing to append to data array
@@ -108,11 +113,72 @@ export class ChartjsTime extends Chartjs {
         };
         if (this.verticalline) this.type = 'LineWithLine';
         else this.type = 'line';
-
+        if (typeof (this.showrefpoint) === 'string') {
+            this.showrefpoint = this.showrefpoint === 'true';            
+        }
     }
 
-    attached () {super.attached();}
-    detached() {super.detached();}
+    attached () {
+        if (this.showrefpoint) {
+            document.addEventListener('xdata',this.handleXData);
+            window.refpoint=0;
+            Chart.pluginService.register({
+                id: 'custom_lines to ref point',
+                afterDraw: (chart) => {
+
+                        const ctx = chart.canvas.getContext('2d');
+                        ctx.save();
+
+                        // draw line
+                        let meta1 = chart.getDatasetMeta(0);
+                        //let meta2 = chart.getDatasetMeta(1);
+                        if (meta1) {
+                            ctx.beginPath();
+                            try {
+                                //expect that data[0] contains point data[1] lines
+                                let x = meta1.data[window.refpoint]._model.x;
+                                let y = meta1.data[window.refpoint]._model.y;
+                                let value = chart.data.datasets[0].data[window.refpoint];
+                                if (isNaN(value)) {
+                                    //value is object x, y
+                                    ctx.moveTo(0, y);
+                                    ctx.lineTo(x, y);
+                                    ctx.lineTo(x, chart.height);
+                                    ctx.lineWidth = 1;
+                                    ctx.strokeStyle = '#ff9c9c';
+                                    ctx.stroke();
+                                    ctx.font = "10px Arial"
+                                    if (value.y) ctx.fillText(value.y.toPrecision(4),x,y);
+                                } else {
+                                    //only y value is there
+                                    ctx.moveTo(0, y);
+                                    ctx.lineTo(x, y);
+                                    ctx.lineTo(x, chart.height);
+//                                    ctx.lineTo(chart.width, y);
+                                    ctx.lineWidth = 1;
+                                    ctx.strokeStyle = '#ff9c9c';
+                                    ctx.stroke();
+                                    ctx.font = "10px Arial"
+                                    ctx.fillStyle = "black";
+                                    ctx.fillText(value.toPrecision(4),x,y);
+                                }
+                            } catch (e) {
+                                //console.warn('error, meta1:',meta1);
+                            }
+                            ctx.restore();
+                        //}
+
+
+                }
+            }
+        });
+        }
+        super.attached();
+    }
+    detached() {
+        if (this.showrefpoint) document.removeEventListener('xdata',this.handleXData);
+        super.detached();
+    }
 
     resetdata() {
         //super.resetdata();

diff --git a/src_aurelia-bodylight-plugin/src/elements/chartjs.html b/src_aurelia-bodylight-plugin/src/elements/chartjs.html
@@ -6,7 +6,7 @@
             <i class="fa fa-download fa-rotate-270" title="download flat csv data, row=all data for variable"
                click.delegate="downloadflat()"> </i>
         </div>
-        <div css="${minichart ? '' : 'margin-top: -1.5em'}">
+        <div css="${minichart ? '' : 'margin-top: -1.5em'}" resizable resize.trigger="resizeCanvas($event.detail) & throttle:500">
             <canvas id="${id}-canvas" ref="chartcanvas" width="${width}" height="${height}"></canvas>
         </div>
     </div>

diff --git a/src_aurelia-bodylight-plugin/src/elements/chartjs.js b/src_aurelia-bodylight-plugin/src/elements/chartjs.js
@@ -651,4 +651,11 @@ export class Chartjs {
     if (this.sampledata)
     this.chart.update();
   }
+
+  /* resizeCanvas is triggered only when using aurelia-resize plugin*/
+  resizeCanvas(detail){
+    console.log("chartjs.resizeCanvas() width=" + detail.width);    
+    this.width = detail.width;
+    //this.height = detail.height;
+  }
 }
diff --git a/src_aurelia-bodylight-plugin/src/elements/fmi.js b/src_aurelia-bodylight-plugin/src/elements/fmi.js
@@ -295,8 +295,8 @@ export class Fmi {
         } else //do simulation step after 100 ms
         if (window.thisfmi.isOneshot) {
           //console.log('oneshot scheduling startevent in promise() to do step()')
-          setTimeout(window.thisfmi.sendStartEvent.bind(window.thisfmi),1000);
-          console.log('oneshot scheduling promise() to do shot()')
+          setTimeout(window.thisfmi.sendStartEvent.bind(window.thisfmi),800);
+          console.log('oneshot scheduling promise() to do shot() after 4.5s')
           //setTimeout(window.thisfmi.shot.bind(window.thisfmi),1500);
           window.thisfmi.debounceShot();
         } else //do simulation step after 100 ms
@@ -693,16 +693,20 @@ export class Fmi {
   }
 
   shot(e){
+    console.log('fmi -> shot()')
     //check whether initialized and instantiated
     if (!this.inst) {
       //not instantiated
       if (window.fmiinst && window.fmiinst[this.fminame]) {
+        console.warn('fmi shot() not instantiated, do it first time')
         this.instantiate();
+        this.initialize();
       } else {
         //no initfmi() called = wait for script to be loaded, do nothing
         return
       }
     } else {
+      console.log('fmi shot() doing reset')
       this.reset();
       //this.setInputVariables();
     }

diff --git a/src_aurelia-bodylight-plugin/src/elements/range.js b/src_aurelia-bodylight-plugin/src/elements/range.js
@@ -153,7 +153,7 @@ export class Range {
             this.refinput.value = value;
             this.refinput.dispatchEvent(new Event(this.fireevent, {
                 bubbles: true,
-                cancelable: true
+                cancelable: true                
             }));
         }
     }

diff --git a/src_webcomponents/webcomponents.js b/src_webcomponents/webcomponents.js
@@ -10,6 +10,7 @@ export function configure(aurelia) {
         .standardConfiguration()
         //all components from src (resources/index) will be registered as web component
         .plugin(PLATFORM.moduleName('aurelia-bodylight-plugin'))
+        .plugin(PLATFORM.moduleName('aurelia-resize'))
         .plugin(PLATFORM.moduleName('aurelia-i18n'),(instance) =>{
             let aliases = ['t','i18n'];
             TCustomAttribute.configureAliases(aliases);