feat(echarts): add data zoom options (start/end/lock)

[hexcafe]

SUMMARY

Add 3 Customization Options for echarts data zoom:

• start: The end percentage of the window out of the data extent, in the range of 0 ~ 100.
• end: The end percentage of the window out of the data extent, in the range of 0 ~ 100.
• zoomLock: Specify whether to lock the size of window (selected area).

Currently, when Data Zoom is enabled in ECharts, the default start and end values are set to 0 and 100, respectively, which means all data is displayed in a single chart by default. This may not be ideal for high-density data scenarios.

By introducing these customization options, users can set the default data range for data zooming. This can be particularly beneficial for users with high-density data, allowing them to control the default size of the sliding window more effectively.

For example, users can set start to 0 and end to 10, which will display the top 10% of the data by default.
Users can still navigate through the rest of the data range by dragging the data zoom bar.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

Before:

After:

TESTING INSTRUCTIONS

ADDITIONAL INFORMATION

• Has associated issue:
• Required feature flags:
• Changes UI
• Includes DB Migration (follow approval process in SIP-59)
  • Migration is atomic, supports rollback & is backwards-compatible
  • Confirm DB migration upgrade and downgrade tested
  • Runtime estimates and downtime expectations provided
• Introduces new feature or API
• Removes existing feature or API

[rusackas]

Hmm... I've never really wished for this, I just scale down the zoom window until it's the density I want. But... I guess this seems reasonable. Two questions:

1. Do the zoom start/end settings apply to the default display of the chart? This might be a problem to some who wand to see ALL the data on the dashboard by default before they play with the slider.
2. Are the new controls dynamic (e.g. they only appear when you check the "Data Zoom" checkbox?

I'll spin up a test env to kick the tires, but just thought I'd express those questions while I wait for it to spin up :D

[rusackas]

/testenv up

[github-actions]

@rusackas Ephemeral environment spinning up at http://54.71.140.132:8080. Credentials are admin/admin. Please allow several minutes for bootstrapping and startup.

[hexcafe]

Hi Evan,
Thank you for your review!

This feature allows customization of the default zoom window for a specific chart in the design phase, while still permitting users to adjust it as needed in the view phase.

1. Do the zoom start/end settings apply to the default display of the chart? This might be a problem to some who wand to see ALL the data on the dashboard by default before they play with the slider.

No, these settings take effect only if users set them manually. Otherwise, the default values (0 for start and 100 for end) will be used. This ensures that all data is displayed by default and maintains the current behavior.

2. Are the new controls dynamic (e.g. they only appear when you check the "Data Zoom" checkbox?

Yes, they are fully dynamic and only appear when the "Data Zoom" checkbox is checked.