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:
With a code that looks like this: <ChartContainer enableDragZoom={true} timeRange={this.state.timerange} onTimeRangeChanged={timerange => this.setState({timerange})>/* Some charts here */</ChartContainer>
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):
🐛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:
<ChartContainer enableDragZoom={true} timeRange={this.state.timerange} onTimeRangeChanged={timerange => this.setState({timerange})>/* Some charts here */</ChartContainer>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):