Zoom and pan are synchronized, changed afterBuildTicksSignature

README.md

@@ -4,6 +4,20 @@ The WEB GUI client of SEA.
 
 This repository contains the code of the server for the control and graphical parts, plus the client code (HTML, CSS, JS).
 
+**IMPORTANT**
+
+This branch is an attempt to migrate from ChartJS 2.9.4 to 4.4.4.
+
+Here is a list of what has been done :
+- Uprgaded the ChartJS zoom plugin library, and changed the corresponding options in the chart configuration. The previous version was not working with the version 4.4.4 of ChartJS
+- Installing the date library Luxon and its adpater for ChartJS. This is needed because since version 3.x, time axes need these libraries.
+- Renamed or moved all needed parameters in the ChartJS configuration.
+- Changed all `xAxes` and `yAxes` references to `x` and `y`.
+- Adapted `afterBuildTicks` callbacks with the new signature (only `axis` is given)
+
+Here is a list of what needs to be done :
+- Change the implementation of the callback located in `options.scales.x.ticks` at chart creation in the Chart class, so it considers that the label is a timestamp. Reference : https://www.chartjs.org/docs/latest/axes/labelling.html#creating-custom-tick-formats
+
 **Summary**
 
 - [Documentation](#documentation)

client/jsFiles/SEAWebClientGraphics.js

@@ -828,14 +828,15 @@ let graphs = (function (){
      * @param {*} graph - The graph Object on which the zoom callback has to be called
      */
     function zoomCallback(graph){
-        let tk, min, max;
+        console.log(graph.chart)
+        let a, min, max;
         if (currentZoomMode == 'y') {
-            tk = graph.chart.options.scales.y.ticks;
+            a = graph.chart.options.scales.y;
         } else {
-            tk = graph.chart.options.scales.x.ticks;
+            a = graph.chart.options.scales.x;
         }
-        min = tk.min;
+        min = a.min;
-        max = tk.max;
+        max = a.max;
         if (!isTouchDevice) {
             /*
             if (prevGraph != graph) {
@@ -859,8 +860,8 @@ let graphs = (function (){
             */
         }
         if (currentZoomMode == 'y') {
-            tk.min = min;
+            a.min = min;
-            tk.max = max;
+            a.max = max;
             graph.setAutoScale(false);
         } else {
             if (liveMode && max < lastTime) setLiveMode(false);
@@ -924,8 +925,8 @@ let graphs = (function (){
      * @param {*} graph - The graph for which the function has to be called
      */
     function panCallback(graph){
-        let tk = graph.chart.options.scales.x.ticks;
+        let ax = graph.chart.options.scales.x;
-        let xmin = tk.min, xmax = tk.max;
+        let xmin = ax.min, xmax = ax.max;
         if (liveMode && xmax < lastTime) setLiveMode(false);
         setMinMax(xmin,xmax);
         update();
@@ -1387,8 +1388,7 @@ function Graph(gindex, container, x_label, y_label, tag, scaleType = "linear"){
                         title: false, //Former scaleLabel
                         type: scaleType,
                         position: 'right',
-                        afterBuildTicks: function({chart}) {
+                        afterBuildTicks: function(axis) {
-                            let axis = chart.scales.y
                             let ticks = axis.ticks
                             if (scaleType == "logarithmic" && ticks.length <= 4) {
                                 y1 = ticks[0];
@@ -1418,7 +1418,7 @@ function Graph(gindex, container, x_label, y_label, tag, scaleType = "linear"){
                         },
                         ticks: { 
                             padding: -20,
-                            // LABEL = TIMESTAMP
+                            // TODO : change this callback so it considers that labels are timestamps (currenly considering them as formated). Change the signature (see README.md IMPORTANT)
                             // callback: function(label, index, labels) {
                             //     let l = labels.length - 1;
                             //     if (index == 0 || index == l) return "";
@@ -1438,8 +1438,7 @@ function Graph(gindex, container, x_label, y_label, tag, scaleType = "linear"){
                             //     return label;
                             // }
                         },
-                        afterBuildTicks: function({chart}) {
+                        afterBuildTicks: function(axis) {
-                            let axis = chart.scales.x
                             let ticks = axis.ticks
 
                             if (!ticks || ticks.length <= 2) return ticks;
@@ -1936,10 +1935,7 @@ function Graph(gindex, container, x_label, y_label, tag, scaleType = "linear"){
      */
     function setMinMax(min, max){
         let ax = chart.options.scales.x;
-        ax = chart.scales.x
-        console.log(chart)
         let ay = chart.options.scales.y;
-        ay = chart.scales.y
         // clamp X-span
         let span = max - min;
         let half = 0;
@@ -1954,13 +1950,13 @@ function Graph(gindex, container, x_label, y_label, tag, scaleType = "linear"){
            mid = (chart.lastXmin + chart.lastXmax) * 0.5;
            min = mid - half;
            max = mid + half;
-           ay.ticks.min = chart.lastYmin;
+           ay.min = chart.lastYmin;
-           ay.ticks.max = chart.lastYmax;
+           ay.max = chart.lastYmax;
         } else {
            chart.lastXmin = min;
            chart.lastXmax = max;
-           chart.lastYmin = ay.ticks.min;
+           chart.lastYmin = ay.min;
-           chart.lastYmax = ay.ticks.max;
+           chart.lastYmax = ay.max;
         }
         // custom algorithm for tick step
         mainstep = 1000;
@@ -1981,15 +1977,16 @@ function Graph(gindex, container, x_label, y_label, tag, scaleType = "linear"){
             mainstep *= info[1];
         }
         ax["time"] = {"unit":info[0]}
-        // ax["time"] = {"unit":info[0]}
-
         // ax.time.unit = info[0];
+
         ax.time["stepSize"] = Math.round(step / mainstep);
+        // ax.time.stepSize = Math.round(step / mainstep);
+
         //ax.ticks.unit = ax.time.unit;
         //ax.ticks.stepSize =ax.time.stepSize;
         //console.log('INFO', step, mainstep, info, ax, ax.time);
-        ax.ticks.max = max;
+        ax.max = max;
-        ax.ticks.min = min;
+        ax.min = min;
     }
 
     /**