esnet / esnet/react-timeseries-charts
Zooming out a chart too much yields invalid timerange and likely crashes the component
- Dominant language
- JavaScript
- Stars
- 876
- Forks
- 279
- PR merge metrics
- No merged PRs in 30d
Description
# 🐛Bug report
**Describe the bug**
If the user zooms out a chart so much that either end of the time range exceeds the minimum or maximum values for a Date object (which can happen very quickly when using the mouse wheel), the onTimeRangeChanged callback is called with a TimeRange containing an Invalid Date.
In a naive implementation such as ` this.setState({timerange})} ...`, which is suggested in the documentation of ChartContainer.onTimeRangeChanged, this breaks the ChartContainer irrecoverably: it produces incorrect SVG containing NaN values, and even if the user tries to zoom back in it will only yield more invalid dates.
**To Reproduce**
Steps to reproduce the behavior:
1. With a code that looks like this: ` this.setState({timerange})>/* Some charts here */`
2. Zoom out the chart until the display becomes incorrect (exactly how may depend on charts type and data) and it no longer responds to zooming in or out
**Expected behavior**
The TimeRange passed to onTimeRangeChanged is clamped to the lowest and highest valid Dates; or at least the documentation mentions that it is not and does not provide a bugged example.
**Desktop (please complete the following information):**
- OS: Windows
- Browser: Chrome
- Version: 90.0
Contributor guide
Assessment
This issue has not been assessed yet.