From d5a5c6553ebf982d4f7d97bcd3828ba16659d92b Mon Sep 17 00:00:00 2001 From: l_samenv Date: Fri, 13 Sep 2024 15:47:53 +0200 Subject: [PATCH] Zoom and pan are synchronized, changed afterBuildTicksSignature --- README.md | 14 ++++++++ client/jsFiles/SEAWebClientGraphics.js | 47 ++++++++++++-------------- 2 files changed, 36 insertions(+), 25 deletions(-) diff --git a/README.md b/README.md index 30415e5..85015a4 100644 --- a/README.md +++ b/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) diff --git a/client/jsFiles/SEAWebClientGraphics.js b/client/jsFiles/SEAWebClientGraphics.js index 46db9b5..84b7bd9 100644 --- a/client/jsFiles/SEAWebClientGraphics.js +++ b/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; - max = tk.max; + min = a.min; + max = a.max; if (!isTouchDevice) { /* if (prevGraph != graph) { @@ -859,8 +860,8 @@ let graphs = (function (){ */ } if (currentZoomMode == 'y') { - tk.min = min; - tk.max = max; + a.min = min; + 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 xmin = tk.min, xmax = tk.max; + let ax = graph.chart.options.scales.x; + 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}) { - let axis = chart.scales.y + afterBuildTicks: function(axis) { 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}) { - let axis = chart.scales.x + afterBuildTicks: function(axis) { 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.ticks.max = chart.lastYmax; + ay.min = chart.lastYmin; + ay.max = chart.lastYmax; } else { chart.lastXmin = min; chart.lastXmax = max; - chart.lastYmin = ay.ticks.min; - chart.lastYmax = ay.ticks.max; + chart.lastYmin = ay.min; + 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.ticks.min = min; + ax.max = max; + ax.min = min; } /**