Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
imaspeer opened this issue Apr 16, 2021 · 0 comments

Comments

@imaspeer
Copy link

imaspeer commented Apr 16, 2021

🐛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 <ChartContainer timeRange={this.state.timerange} onTimeRangeChanged={timerange => 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: <ChartContainer enableDragZoom={true} timeRange={this.state.timerange} onTimeRangeChanged={timerange => this.setState({timerange})>/* Some charts here */</ChartContainer>
  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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant