fix(custom-chart-web): refactor, updates changelog

Author: rahmanunver

packages/pluggableWidgets/custom-chart-web/CHANGELOG.md

@@ -6,9 +6,9 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
-### Fixed
+### Breaking changes
 
-- We fixed an issue where static data and source attribute wouldn't merge properly.
+- 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.
 
 ## [1.2.3] - 2025-10-10
 

packages/pluggableWidgets/custom-chart-web/src/utils/utils.ts

@@ -3,10 +3,9 @@ import deepmerge from "deepmerge";
 import { Config, Data, Layout } from "plotly.js-dist-min";
 import { ChartProps } from "../components/PlotlyChart";
 
-// Custom merge options: arrays are replaced (not concatenated) to match Plotly expectations
-const mergeOptions: deepmerge.Options = {
-    arrayMerge: (_target, source) => source
-};
+// Plotly-specific deep merge: arrays are replaced (not concatenated) to match Plotly expectations
+const deepmergePlotly = <T extends object>(target: T, source: T): T =>
+    deepmerge(target, source, { arrayMerge: (_target, src) => src });
 
 export function parseData(staticData?: string, attributeData?: string, sampleData?: string): Data[] {
     try {
@@ -22,7 +21,7 @@ export function parseData(staticData?: string, attributeData?: string, sampleDat
         for (let i = 0; i < maxLen; i++) {
             const staticTrace = (staticTraces[i] ?? {}) as Record<string, unknown>;
             const dynamicTrace = (dynamicTraces[i] ?? {}) as Record<string, unknown>;
-            result.push(deepmerge(staticTrace, dynamicTrace, mergeOptions) as Data);
+            result.push(deepmergePlotly(staticTrace, dynamicTrace));
         }
 
         return result;
@@ -38,7 +37,7 @@ export function parseLayout(staticLayout?: string, attributeLayout?: string, sam
         const attrObj = attributeLayout ? JSON.parse(attributeLayout) : {};
         const dynamicObj = Object.keys(attrObj).length > 0 ? attrObj : sampleLayout ? JSON.parse(sampleLayout) : {};
 
-        return deepmerge(staticObj, dynamicObj, mergeOptions);
+        return deepmergePlotly(staticObj, dynamicObj);
     } catch (error) {
         console.error("Error parsing chart layout:", error);
         return {};
@@ -61,8 +60,8 @@ export function parseConfig(configOptions?: string): Partial<Config> {
 export function mergeChartProps(chartProps: ChartProps, editorState: EditorStoreState): ChartProps {
     return {
         ...chartProps,
-        config: deepmerge(chartProps.config, parseConfig(editorState.config), mergeOptions),
-        layout: deepmerge(chartProps.layout, parseLayout(editorState.layout), mergeOptions),
+        config: deepmergePlotly(chartProps.config, parseConfig(editorState.config)),
+        layout: deepmergePlotly(chartProps.layout, parseLayout(editorState.layout)),
         data: chartProps.data.map((trace, index) => {
             let stateTrace: Data | null = null;
             try {
@@ -78,7 +77,7 @@ export function mergeChartProps(chartProps: ChartProps, editorState: EditorStore
             if (stateTrace == null || typeof stateTrace !== "object") {
                 return trace;
             }
-            return deepmerge(trace as object, stateTrace as object, mergeOptions) as Data;
+            return deepmergePlotly(trace, stateTrace);
         })
     };
 }