Fixed incorrect chart positioning after transition

This commit is contained in:
Przemek Wiech
2022-02-04 19:03:15 +01:00
parent ab66492a86
commit 1e3cf7a24f

View File

@@ -269,6 +269,7 @@ class ChartWrapper {
private zoomBehavior?: ZoomBehavior<Element, any>; private zoomBehavior?: ZoomBehavior<Element, any>;
/** Props that will be used for rerendering. */ /** Props that will be used for rerendering. */
private rerenderProps?: ChartProps; private rerenderProps?: ChartProps;
private rerenderResetPosition?: boolean;
zoom(factor: number) { zoom(factor: number) {
const parent = select('#svgContainer') as Selection<Element, any, any, any>; const parent = select('#svgContainer') as Selection<Element, any, any, any>;
@@ -292,6 +293,7 @@ class ChartWrapper {
if (!args.initialRender && this.animating) { if (!args.initialRender && this.animating) {
this.rerenderRequired = true; this.rerenderRequired = true;
this.rerenderProps = props; this.rerenderProps = props;
this.rerenderResetPosition = args.resetPosition;
return; return;
} }
@@ -392,7 +394,7 @@ class ChartWrapper {
// the props may have been updated in the meantime. // the props may have been updated in the meantime.
this.renderChart(this.rerenderProps!, intl, { this.renderChart(this.rerenderProps!, intl, {
initialRender: false, initialRender: false,
resetPosition: false, resetPosition: !!this.rerenderResetPosition,
}); });
} }
}); });
@@ -417,7 +419,10 @@ export function Chart(props: ChartProps) {
const initialRender = const initialRender =
props.chartType !== prevProps?.chartType || props.chartType !== prevProps?.chartType ||
props.colors !== prevProps?.colors; props.colors !== prevProps?.colors;
const resetPosition = props.chartType !== prevProps?.chartType; const resetPosition =
props.chartType !== prevProps?.chartType ||
props.data !== prevProps.data ||
props.selection !== prevProps.selection;
chartWrapper.current.renderChart(props, intl, { chartWrapper.current.renderChart(props, intl, {
initialRender, initialRender,
resetPosition, resetPosition,
@@ -428,7 +433,7 @@ export function Chart(props: ChartProps) {
resetPosition: true, resetPosition: true,
}); });
} }
}); }, [props.data, props.selection, props.chartType, props.colors]);
return ( return (
<div id="svgContainer"> <div id="svgContainer">