fix(custom-chart-web): use deepmerge for data

rahmanunver · rahmanunver · commit 132106ca1eef · 2025-12-11T21:35:26.000+01:00
diff --git a/packages/pluggableWidgets/custom-chart-web/package.json b/packages/pluggableWidgets/custom-chart-web/package.json
@@ -49,6 +49,7 @@
         "@mendix/widget-plugin-mobx-kit": "workspace:*",
         "@mendix/widget-plugin-platform": "workspace:*",
         "classnames": "^2.5.1",
+        "deepmerge": "^4.3.1",
         "plotly.js-dist-min": "^3.0.0"
     },
     "devDependencies": {
diff --git a/packages/pluggableWidgets/custom-chart-web/src/utils/utils.spec.ts b/packages/pluggableWidgets/custom-chart-web/src/utils/utils.spec.ts
@@ -80,6 +80,81 @@ describe("parseData", () => {
         const sampleData = JSON.stringify([{ y: [5] }]);
         expect(parseData(staticData, attributeData, sampleData)).toEqual([{ type: "line", x: [1], y: [5] }]);
     });
+
+    describe("deep merge behavior", () => {
+        it("deeply merges nested marker objects", () => {
+            const staticData = JSON.stringify([
+                { type: "bar", marker: { color: "red", size: 10, line: { width: 2 } } }
+            ]);
+            const attributeData = JSON.stringify([{ marker: { symbol: "circle", line: { color: "blue" } } }]);
+            expect(parseData(staticData, attributeData)).toEqual([
+                {
+                    type: "bar",
+                    marker: {
+                        color: "red",
+                        size: 10,
+                        symbol: "circle",
+                        line: { width: 2, color: "blue" }
+                    }
+                }
+            ]);
+        });
+
+        it("deeply merges multiple traces with nested objects", () => {
+            const staticData = JSON.stringify([
+                { type: "scatter", marker: { color: "red" }, line: { width: 2 } },
+                { type: "bar", marker: { size: 10 } }
+            ]);
+            const attributeData = JSON.stringify([
+                { marker: { symbol: "diamond" }, line: { dash: "dot" } },
+                { marker: { color: "blue" } }
+            ]);
+            expect(parseData(staticData, attributeData)).toEqual([
+                {
+                    type: "scatter",
+                    marker: { color: "red", symbol: "diamond" },
+                    line: { width: 2, dash: "dot" }
+                },
+                {
+                    type: "bar",
+                    marker: { size: 10, color: "blue" }
+                }
+            ]);
+        });
+
+        it("attribute arrays replace static arrays (not concatenate)", () => {
+            const staticData = JSON.stringify([{ x: [1, 2, 3], y: [4, 5, 6] }]);
+            const attributeData = JSON.stringify([{ x: [10, 20] }]);
+            expect(parseData(staticData, attributeData)).toEqual([{ x: [10, 20], y: [4, 5, 6] }]);
+        });
+
+        it("deeply merges font and other nested layout-like properties in traces", () => {
+            const staticData = JSON.stringify([
+                {
+                    type: "scatter",
+                    textfont: { family: "Arial", size: 12 },
+                    hoverlabel: { bgcolor: "white", font: { size: 10 } }
+                }
+            ]);
+            const attributeData = JSON.stringify([
+                {
+                    textfont: { color: "black" },
+                    hoverlabel: { bordercolor: "gray", font: { family: "Helvetica" } }
+                }
+            ]);
+            expect(parseData(staticData, attributeData)).toEqual([
+                {
+                    type: "scatter",
+                    textfont: { family: "Arial", size: 12, color: "black" },
+                    hoverlabel: {
+                        bgcolor: "white",
+                        bordercolor: "gray",
+                        font: { size: 10, family: "Helvetica" }
+                    }
+                }
+            ]);
+        });
+    });
 });
 
 describe("parseLayout", () => {
@@ -102,6 +177,73 @@ describe("parseLayout", () => {
         const sampleLayout = JSON.stringify({ title: "Sample" });
         expect(parseLayout(undefined, attributeLayout, sampleLayout)).toEqual({ title: "Attr" });
     });
+
+    describe("deep merge behavior", () => {
+        it("deeply merges nested font objects", () => {
+            const staticLayout = JSON.stringify({
+                title: { text: "Chart Title", font: { family: "Arial", size: 16 } }
+            });
+            const attributeLayout = JSON.stringify({
+                title: { font: { color: "blue", weight: "bold" } }
+            });
+            expect(parseLayout(staticLayout, attributeLayout)).toEqual({
+                title: {
+                    text: "Chart Title",
+                    font: { family: "Arial", size: 16, color: "blue", weight: "bold" }
+                }
+            });
+        });
+
+        it("deeply merges xaxis and yaxis configurations", () => {
+            const staticLayout = JSON.stringify({
+                xaxis: { title: "X Axis", tickfont: { size: 12 }, gridcolor: "lightgray" },
+                yaxis: { title: "Y Axis", showgrid: true }
+            });
+            const attributeLayout = JSON.stringify({
+                xaxis: { tickfont: { color: "black" }, range: [0, 100] },
+                yaxis: { gridcolor: "gray" }
+            });
+            expect(parseLayout(staticLayout, attributeLayout)).toEqual({
+                xaxis: {
+                    title: "X Axis",
+                    tickfont: { size: 12, color: "black" },
+                    gridcolor: "lightgray",
+                    range: [0, 100]
+                },
+                yaxis: { title: "Y Axis", showgrid: true, gridcolor: "gray" }
+            });
+        });
+
+        it("deeply merges legend configuration", () => {
+            const staticLayout = JSON.stringify({
+                legend: { x: 0.5, y: 1, font: { size: 10 }, bgcolor: "white" }
+            });
+            const attributeLayout = JSON.stringify({
+                legend: { orientation: "h", font: { family: "Helvetica" } }
+            });
+            expect(parseLayout(staticLayout, attributeLayout)).toEqual({
+                legend: {
+                    x: 0.5,
+                    y: 1,
+                    font: { size: 10, family: "Helvetica" },
+                    bgcolor: "white",
+                    orientation: "h"
+                }
+            });
+        });
+
+        it("attribute arrays replace static arrays in layout", () => {
+            const staticLayout = JSON.stringify({
+                annotations: [{ text: "Note 1" }, { text: "Note 2" }]
+            });
+            const attributeLayout = JSON.stringify({
+                annotations: [{ text: "New Note" }]
+            });
+            expect(parseLayout(staticLayout, attributeLayout)).toEqual({
+                annotations: [{ text: "New Note" }]
+            });
+        });
+    });
 });
 
 describe("parseConfig", () => {
diff --git a/packages/pluggableWidgets/custom-chart-web/src/utils/utils.ts b/packages/pluggableWidgets/custom-chart-web/src/utils/utils.ts
@@ -1,7 +1,13 @@
 import { EditorStoreState } from "@mendix/shared-charts/main";
+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
+};
+
 export function parseData(staticData?: string, attributeData?: string, sampleData?: string): Data[] {
     try {
         const staticTraces: Data[] = staticData ? JSON.parse(staticData) : [];
@@ -14,7 +20,9 @@ export function parseData(staticData?: string, attributeData?: string, sampleDat
         const result: Data[] = [];
 
         for (let i = 0; i < maxLen; i++) {
-            result.push({ ...staticTraces[i], ...dynamicTraces[i] } as Data);
+            const staticTrace = (staticTraces[i] ?? {}) as Record<string, unknown>;
+            const dynamicTrace = (dynamicTraces[i] ?? {}) as Record<string, unknown>;
+            result.push(deepmerge(staticTrace, dynamicTrace, mergeOptions) as Data);
         }
 
         return result;
@@ -25,19 +33,16 @@ export function parseData(staticData?: string, attributeData?: string, sampleDat
 }
 
 export function parseLayout(staticLayout?: string, attributeLayout?: string, sampleLayout?: string): Partial<Layout> {
-    let finalLayout: Partial<Layout> = {};
-
     try {
-        const layoutAttribute = attributeLayout ? JSON.parse(attributeLayout) : {};
-        finalLayout = { ...finalLayout, ...(staticLayout ? JSON.parse(staticLayout) : {}), ...layoutAttribute };
+        const staticObj = staticLayout ? JSON.parse(staticLayout) : {};
+        const attrObj = attributeLayout ? JSON.parse(attributeLayout) : {};
+        const dynamicObj = Object.keys(attrObj).length > 0 ? attrObj : sampleLayout ? JSON.parse(sampleLayout) : {};
 
-        if (Object.keys(layoutAttribute).length === 0) {
-            finalLayout = { ...finalLayout, ...(sampleLayout ? JSON.parse(sampleLayout) : {}) };
-        }
+        return deepmerge(staticObj, dynamicObj, mergeOptions);
     } catch (error) {
         console.error("Error parsing chart layout:", error);
+        return {};
     }
-    return finalLayout;
 }
 
 export function parseConfig(configOptions?: string): Partial<Config> {
@@ -56,16 +61,10 @@ export function parseConfig(configOptions?: string): Partial<Config> {
 export function mergeChartProps(chartProps: ChartProps, editorState: EditorStoreState): ChartProps {
     return {
         ...chartProps,
-        config: {
-            ...chartProps.config,
-            ...parseConfig(editorState.config)
-        },
-        layout: {
-            ...chartProps.layout,
-            ...parseLayout(editorState.layout)
-        },
+        config: deepmerge(chartProps.config, parseConfig(editorState.config), mergeOptions),
+        layout: deepmerge(chartProps.layout, parseLayout(editorState.layout), mergeOptions),
         data: chartProps.data.map((trace, index) => {
-            let stateTrace: Data = {};
+            let stateTrace: Data | null = null;
             try {
                 if (!editorState.data || !editorState.data[index]) {
                     return trace;
@@ -75,10 +74,11 @@ export function mergeChartProps(chartProps: ChartProps, editorState: EditorStore
                 console.warn(`Editor props for trace(${index}) is not a valid JSON:${editorState.data[index]}`);
                 console.warn("Please make sure the props is a valid JSON string.");
             }
-            return {
-                ...trace,
-                ...stateTrace
-            } as Data;
+            // deepmerge can't handle null, so return trace unchanged if stateTrace is null/undefined
+            if (stateTrace == null || typeof stateTrace !== "object") {
+                return trace;
+            }
+            return deepmerge(trace as object, stateTrace as object, mergeOptions) as Data;
         })
     };
 }
