diff --git a/packages/pluggableWidgets/custom-chart-web/CHANGELOG.md b/packages/pluggableWidgets/custom-chart-web/CHANGELOG.md index b57b370abb..91fb3ed864 100644 --- a/packages/pluggableWidgets/custom-chart-web/CHANGELOG.md +++ b/packages/pluggableWidgets/custom-chart-web/CHANGELOG.md @@ -10,6 +10,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), - We changed how "Static" data and "Source attribute" data are merged. Previously, traces were appended as separate chart elements. Now, traces are merged by index, where source attribute values override static values for the same trace position. This enables proper customization of chart traces through dynamic data. +### Fixed + +- We fixed an issue when conditional visibility enabled charts wouldn't re-draw as expected when the data changes. + ## [1.2.3] - 2025-10-10 ### Changed diff --git a/packages/pluggableWidgets/custom-chart-web/src/hooks/useCustomChart.ts b/packages/pluggableWidgets/custom-chart-web/src/hooks/useCustomChart.ts index 5f72215182..c384dea2d8 100644 --- a/packages/pluggableWidgets/custom-chart-web/src/hooks/useCustomChart.ts +++ b/packages/pluggableWidgets/custom-chart-web/src/hooks/useCustomChart.ts @@ -32,8 +32,8 @@ export function useCustomChart(props: CustomChartContainerProps): UseCustomChart ); const editorStore = useEditorStore({ - dataLength: chartPropsController.data.length, - initState: initStateFromProps(chartPropsController.data) + initState: initStateFromProps(chartPropsController.data), + dataSourceKey: chartPropsController.data }); useEffect(() => { diff --git a/packages/shared/charts/src/helpers/EditorStore.ts b/packages/shared/charts/src/helpers/EditorStore.ts index 43e23fad94..c0075080dc 100644 --- a/packages/shared/charts/src/helpers/EditorStore.ts +++ b/packages/shared/charts/src/helpers/EditorStore.ts @@ -35,8 +35,8 @@ export class EditorStore { return () => (this.listeners = this.listeners.filter(l => l !== listener)); } - resetData(length = 0): void { - this.state.data = Array(length).fill("{}"); + resetData(freshData: JSONString[]): void { + this.state = { ...this.state, data: [...freshData] }; this.emit(); } diff --git a/packages/shared/charts/src/helpers/useChartController.ts b/packages/shared/charts/src/helpers/useChartController.ts index 776ee29c9b..86db05df7f 100644 --- a/packages/shared/charts/src/helpers/useChartController.ts +++ b/packages/shared/charts/src/helpers/useChartController.ts @@ -12,7 +12,6 @@ type Params = { export function useChartController(props: ChartProps, params: Params): [ChartProps, PlaygroundData] { const { playgroundOn } = params; const store = useEditorStore({ - dataLength: props.data.length, initState: initStateFromProps(props) }); const playgroundContext = usePlaygroundDataFactory(props, store); diff --git a/packages/shared/charts/src/helpers/useEditorStore.ts b/packages/shared/charts/src/helpers/useEditorStore.ts index 7610acf221..1b5f4b843b 100644 --- a/packages/shared/charts/src/helpers/useEditorStore.ts +++ b/packages/shared/charts/src/helpers/useEditorStore.ts @@ -6,7 +6,7 @@ import { EditorStore, EditorStoreState } from "./EditorStore"; export type EditorStoreInitializer = () => EditorStoreState; type Params = { - dataLength: number; + dataSourceKey?: Data[]; initState?: EditorStoreInitializer; }; @@ -23,12 +23,14 @@ export function useEditorStore(params: Params): EditorStore { return store; }); - useEffect( - () => () => { - store.resetData(params.dataLength); - }, - [store, params.dataLength] - ); + useEffect(() => { + if (params.initState) { + // Reset only data, preserving layout/config customizations + const freshState = params.initState(); + store.resetData(freshState.data); + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [store, params.dataSourceKey]); return store; }