diff --git a/packages/charts/src/specs/specs_parser.test.tsx b/packages/charts/src/specs/specs_parser.test.tsx index 021de4b76b..a36911246d 100644 --- a/packages/charts/src/specs/specs_parser.test.tsx +++ b/packages/charts/src/specs/specs_parser.test.tsx @@ -15,6 +15,8 @@ import { DEFAULT_SETTINGS_SPEC } from './constants'; import { SpecsParser } from './specs_parser'; import { BarSeries } from '../chart_types/specs'; import { BarSeriesSpec } from '../chart_types/xy_chart/utils/specs'; +import { ChartContainer } from '../components/chart_container'; +import { updateParentDimensions } from '../state/actions/chart_settings'; import { chartStoreReducer } from '../state/chart_state'; describe('Specs parser', () => { @@ -170,4 +172,44 @@ describe('Specs parser', () => { component.unmount(); expect(chartStore.getState().specsInitialized).toBe(false); }); + + test('correctly set the rendered status', () => { + const storeReducer = chartStoreReducer('chart_id'); + const chartStore = createStore(storeReducer); + + expect(chartStore.getState().specsInitialized).toBe(false); + const chartContainerRef: React.RefObject = React.createRef(); + const getChartContainerRef = () => chartContainerRef; + const chartStageRef: React.RefObject = React.createRef(); + + const component = ( + + + + + + + ); + mount(component); + const state = chartStore.getState(); + expect(state.specsInitialized).toBe(true); + expect(state.parentDimensions).toEqual({ width: 0, height: 0, top: 0, left: 0 }); + chartStore.dispatch(updateParentDimensions({ width: 100, height: 100, top: 0, left: 0 })); + expect(chartStore.getState().parentDimensions).toEqual({ width: 100, height: 100, top: 0, left: 0 }); + // passing the same parent dimmesion again can be triggered by the ResizeObserver + chartStore.dispatch(updateParentDimensions({ width: 100, height: 100, top: 0, left: 0 })); + expect(chartStore.getState().chartRendered).toBe(true); + + // trigger also with just differences in top/left + chartStore.dispatch(updateParentDimensions({ width: 100, height: 100, top: 1, left: 1 })); + expect(chartStore.getState().chartRendered).toBe(true); + }); }); diff --git a/packages/charts/src/state/chart_state.ts b/packages/charts/src/state/chart_state.ts index 58ef5b7c8d..db6c68dc80 100644 --- a/packages/charts/src/state/chart_state.ts +++ b/packages/charts/src/state/chart_state.ts @@ -43,6 +43,7 @@ import { TooltipInfo } from '../components/tooltip/types'; import { DEFAULT_SETTINGS_SPEC, PointerEvent, Spec, TooltipValue } from '../specs'; import { keepDistinct } from '../utils/common'; import { Dimensions } from '../utils/dimensions'; +import { deepEqual } from '../utils/fast_deep_equal'; import { Logger } from '../utils/logger'; import { Point } from '../utils/point'; @@ -388,6 +389,9 @@ export const chartStoreReducer = (chartId: string, title?: string, description?: chartRenderedCount, }; case UPDATE_PARENT_DIMENSION: + if (deepEqual(action.dimensions, state.parentDimensions)) { + return state; + } return { ...state, interactions: {