linse/seweb
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Autoscale considers new ChartJS format, data reloads onzoom and onpan

Browse Source
This commit is contained in:
l_samenv
2024-09-13 16:11:40 +02:00
parent 6c1a13c382
commit a2ad485402
2 changed files with 14 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
README.md
View File

@ -14,9 +14,13 @@ Here is a list of what has been done :
- 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
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.
**Summary**

21
client/jsFiles/SEAWebClientGraphics.js
View File

@ -601,8 +601,8 @@ let graphs = (function (){
* @returns If the minimun y-value of all the curves of the charts is greater than the maximum y-value (same)
*/
function autoScale(chart) {
axis = chart.options.scales.y;
tax = chart.options.scales.x.ticks;
ay = chart.options.scales.y;
ax = chart.options.scales.x;
datasets = chart.data.datasets;
let max = -1e99;
let min = 1e99;
@ -613,8 +613,8 @@ let graphs = (function (){
for (let i = 0; i < datasets.length; i++){
ds = datasets[i];
if (ds.borderWidth == 1) continue;
let lmax = maxAr(ds.data, tax.min, tax.max);
let lmin = minAr(ds.data, tax.min, tax.max);
let lmax = maxAr(ds.data, ax.min, ax.max);
let lmin = minAr(ds.data, ax.min, ax.max);
if(lmax > max)
max = lmax;
if(lmin < min)
@ -648,8 +648,8 @@ let graphs = (function (){
}
extraMin = Math.min(min - ystep * 0.5, extraMin);
extraMax = Math.max(max + ystep * 0.5, extraMax);
if (min >= axis.ticks.min && axis.ticks.min >= extraMin &&
max <= axis.ticks.max && axis.ticks.max <= extraMax) {
if (min >= ay.min && ay.min >= extraMin &&
max <= ay.max && ay.max <= extraMax) {
//console.log('NOCHANGE', max, axis.ticks.max, extraMax)
return; // do not yet change
}
@ -658,8 +658,8 @@ let graphs = (function (){
min = extraMin;
max = extraMax;
}
axis.min = axis.ticks.min = min;
axis.max = axis.ticks.max = max;
ay.min = min;
ay.max = max;
}
/**
@ -788,8 +788,8 @@ let graphs = (function (){
* @returns When data is received (no need to autoScale and update as it is done in reloadData)
*/
function checkReload(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 (xmax < now()-100000) { // was 100000 = 100sec
if (liveMode) console.log('UPDATES OFF?')
@ -828,7 +828,6 @@ let graphs = (function (){
* @param {*} graph - The graph Object on which the zoom callback has to be called
*/
function zoomCallback(graph){
console.log(graph.chart)
let a, min, max;
if (currentZoomMode == 'y') {
a = graph.chart.options.scales.y;