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

Zoom and pan are synchronized, changed afterBuildTicksSignature

Browse Source
This commit is contained in:
l_samenv
2024-09-13 15:47:53 +02:00
parent 05a77ce2f4
commit 6c1a13c382
2 changed files with 35 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
README.md
View File

@ -6,8 +6,18 @@ This repository contains the code of the server for the control and graphical pa
**IMPORTANT**
This version has an update frequency of 5 seconds in order to have a software that can be used for a certain amount of time without crashing (due to memory leaks of ChartJS 2.9.4).
A migration attempt can be found on the branch `chartjs-migration`.
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**

47
client/jsFiles/SEAWebClientGraphics.js
View File

@ -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;
}
/**