Currently all panels (and consequently the graphs they contain) have two separate "modes": fullscreen and "regular" (i.e. not fullscreen). When they are fullscreen the graphs show all the steps; when they are not they only show the last 24 steps (at least in simulation mode, with 1 step for each hour).
In regular mode the following things happen:
The data for the current step and the 23 steps before it are loaded in the dataset array of the graph. If there are no steps before it, "empty slots" are added to ensure that there are 24 values in the array and in the graph.
Each second, the current step is increased by one, the oldest step in the array is removed and the next step is added, so that the graph keeps shifting on the left by one step every second. The scrubber determines the current step, and all the graphs are aligned/synchronized with it.
If we implement zooming/panning for regular panel/graphs, we need to decide how to handle a few things:
Zooming increases/reduces the total number of steps plotted on the graph. If there are only 24 steps in the graph's dataset array, zooming out won't work unless all the available data are loaded in the array. If we want to limit how much the user can zoom out, we can also just load the max amount we want to allow, and then set the default zoom level to 24 steps.
Zooming shouldn't affect the current step which should always be the rightmost step in the plot, and it should therefore only affects how many steps are visualized before the current step. Some extra work might be necessary to ensure this.
If we want to have consistent zoom among all the visible graphs, if the zoom level is increased/decreased on one graph, all the other graphs should be updated accordingly (this might cause performance issues).
We might need a button somewhere to reset the zoom level to the default value (24).
The zoom can be implemented either by scrolling or by dragging (pinching is also an option on touchscreens). Scrolling zoom might be inadvertently triggered while trying to scroll through the page or dropdowns. Dragging zoom is also problematic because it allows the user to select a range before the current step.
Panning could be implemented through dragging, but it will have to update the scrubber position and therefore the current step, which in turn should update the other graphs automatically.
Because of these issues, I think we are better off implementing zooming only on the fullscreen graphs. Panning could be implemented for regular graphs too, even though it doesn't add much -- only the ability to drag any graph in addition to the scrubber. We could possibly add a way to dynamically change the number of steps to implement some sort of global zoom.
For fullscreen panels/graphs things should be easier -- we could:
show all the steps, possibly capped to a max value (at least until we add decimation);
use scrolling for zooming, dragging for panning (the default);
pause the auto-update and disable (or even hide) the bottom bar;
let the user scroll/pan freely, and reset the zoom/pan levels every time the graph switches to fullscreen;
possibly add a button to reset the zoom/pan levels;
Currently all panels (and consequently the graphs they contain) have two separate "modes": fullscreen and "regular" (i.e. not fullscreen). When they are fullscreen the graphs show all the steps; when they are not they only show the last 24 steps (at least in simulation mode, with 1 step for each hour).
In regular mode the following things happen:
If we implement zooming/panning for regular panel/graphs, we need to decide how to handle a few things:
Because of these issues, I think we are better off implementing zooming only on the fullscreen graphs. Panning could be implemented for regular graphs too, even though it doesn't add much -- only the ability to drag any graph in addition to the scrubber. We could possibly add a way to dynamically change the number of steps to implement some sort of global zoom.
For fullscreen panels/graphs things should be easier -- we could:
For this, I'm currently using https://www.chartjs.org/chartjs-plugin-zoom/latest/