Data Zoom should be fixed scrolling on the dashboard

Bug description

To enhance user experience, Data Zoom should be set to remain fixed on the dashboard even after refreshing the browser or the dashboard. Currently, when we refresh, the data zoom resets back to full scroll position.

How to reproduce the bug

Create any chart which have Data Zoom options Add it to the dashboard if more dimension values the scroll will not fixed with readable option

Screenshots/recordings

https://github.com/user-attachments/assets/1990f551-045d-4b54-95df-39804566a404

Superset version

master / latest-dev

Python version

3.9

Node version

Browser

Chrome

Additional context

No response

Checklist

[X] I have searched Superset docs and Slack and didn't find a solution to my problem.
[X] I have searched the GitHub issue tracker and didn't find a similar bug report.
[X] I have checked Superset's logs for errors and if I found a relevant Python stacktrace, I included it here as text in the "additional context" section.

I found a similar issue that was discussed and resolved. The issue was about ensuring that the Data Zoom remains fixed on the dashboard even after refreshing the browser or the dashboard. Here is the solution:

To fix the Data Zoom to remain fixed on the dashboard, you need to ensure that the dataZoom configuration is set up correctly in the transformProps function. The dataZoom configuration should be part of the echartOptions and should be set to maintain its state.

Here is the relevant part of the transformProps function that configures dataZoom:

const echartOptions: EChartsCoreOption = {
  // other configurations...
  dataZoom: zoomable
    ? [
        {
          type: 'slider',
          start: TIMESERIES_CONSTANTS.dataZoomStart,
          end: TIMESERIES_CONSTANTS.dataZoomEnd,
          bottom: TIMESERIES_CONSTANTS.zoomBottom,
          yAxisIndex: isHorizontal ? 0 : undefined,
        },
        {
          type: 'inside',
          yAxisIndex: 0,
          zoomOnMouseWheel: false,
          moveOnMouseWheel: true,
        },
        {
          type: 'inside',
          xAxisIndex: 0,
          zoomOnMouseWheel: false,
          moveOnMouseWheel: true,
        },
      ]
    : [],
  // other configurations...
};

To ensure that the Data Zoom remains fixed, you need to store the start and end values of the dataZoom configuration in a persistent storage (like localStorage) and retrieve them when the dashboard is loaded. Here is an example of how you can achieve this:

Store the Data Zoom state:

Modify the dataZoom configuration to store the start and end values in localStorage whenever they change:

const dataZoomConfig = [
 {
   type: 'slider',
   start: localStorage.getItem('dataZoomStart') || TIMESERIES_CONSTANTS.dataZoomStart,
   end: localStorage.getItem('dataZoomEnd') || TIMESERIES_CONSTANTS.dataZoomEnd,
   bottom: TIMESERIES_CONSTANTS.zoomBottom,
   yAxisIndex: isHorizontal ? 0 : undefined,
   handleChange: (params) => {
     localStorage.setItem('dataZoomStart', params.start);
     localStorage.setItem('dataZoomEnd', params.end);
   },
 },
 {
   type: 'inside',
   yAxisIndex: 0,
   zoomOnMouseWheel: false,
   moveOnMouseWheel: true,
 },
 {
   type: 'inside',
   xAxisIndex: 0,
   zoomOnMouseWheel: false,
   moveOnMouseWheel: true,
 },
];

const echartOptions: EChartsCoreOption = {
 // other configurations...
 dataZoom: zoomable ? dataZoomConfig : [],
 // other configurations...
};

Retrieve the Data Zoom state:

When the dashboard is loaded, retrieve the start and end values from localStorage and use them to set the initial state of the dataZoom configuration.

By implementing these changes, the Data Zoom will remain fixed on the dashboard even after refreshing the browser or the dashboard ^[1].

To continue talking to Dosu, mention @dosu.

apache / superset