From 6f318f26b727a2f71404d6d763568245171712c9 Mon Sep 17 00:00:00 2001 From: l_samenv Date: Wed, 25 Sep 2024 11:15:35 +0200 Subject: [PATCH] fix zoom mode + update README.md --- README.md | 14 ++++++++------ client/jsFiles/SEAWebClientGraphics.js | 2 +- 2 files changed, 9 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index 1a685d7..b4b18f6 100644 --- a/README.md +++ b/README.md @@ -10,20 +10,22 @@ This branch is an attempt to migrate from ChartJS 2.9.4 to 4.4.4. TESTED ON SAFARI : with this new version, the application takes much less RAM, and does not crash at some point. The user can still experience some latencies, but it might be due to the presence of too many time axis labels + the fact that each graphs has its own (for the moment). 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 +- Upgraded 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) - Changed all references to `ticks.max|min` : these two properties are one step higher, at the level of the axis, not the ticks +- 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. -> move code to afterBuildTicks + Reference : https://www.chartjs.org/docs/latest/axes/labelling.html#creating-custom-tick-formats +- improvment of labeling, using beforeFit instead of ticks.callback to modify labels +- fixed flase cursor appearance when panning +- Make the zoom type toggle work again. +- Display only one time axis. 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 -- Labels of the x axis are not displayed in the desired format, and do not rescale properly on zooming/dezooming. There can be too much labels, that make them rotate and invisible. -- The cursor now also displays when the click ends, which is not the same behavior as before. -- Make the zoom type toggle work again. - Make the zoom via touchpad less sensitive. The recent tests have shown that the zoom via gesture is very sensitive. Two things can be looked for : 1. see if there is the possibility to adapt the sensitivity of the zoom for the touchpad only or 2. update the library Hammer.js which is used by ChartJS to handle this type of gesture (even if the current version is 0.0.1 version later than the last one, this might be an explanation). -- Display only one time axis. **Summary** diff --git a/client/jsFiles/SEAWebClientGraphics.js b/client/jsFiles/SEAWebClientGraphics.js index 4579678..cbdaca4 100644 --- a/client/jsFiles/SEAWebClientGraphics.js +++ b/client/jsFiles/SEAWebClientGraphics.js @@ -1694,7 +1694,7 @@ function Graph(gindex, container, x_label, y_label, tag, scaleType = "linear"){ * @param {string} to - The zoom mode to set */ function setZoomMode(to){ - chart.options.zoom.mode = to; + chart.options.plugins.zoom.zoom.mode = to; } // Unused