esnet / esnet/react-timeseries-charts

Zooming out a chart too much yields invalid timerange and likely crashes the component

Open
#467 0 comments 0 reactions 0 assignees View on GitHub
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.