fix(custom-chart-web): fix static-source data merge

Author: rahmanunver

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

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

packages/pluggableWidgets/custom-chart-web/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@mendix/custom-chart-web",
     "widgetName": "CustomChart",
-    "version": "1.2.3",
+    "version": "1.2.4",
     "description": "Create customizable charts with Plotly.js for advanced visualization needs",
     "copyright": "© Mendix Technology BV 2025. All rights reserved.",
     "license": "Apache-2.0",

packages/pluggableWidgets/custom-chart-web/src/package.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <package xmlns="http://www.mendix.com/package/1.0/">
-    <clientModule name="CustomChart" version="1.2.3" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="CustomChart" version="1.2.4" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="CustomChart.xml" />
         </widgetFiles>

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

@@ -10,15 +10,75 @@ describe("parseData", () => {
         expect(parseData(staticData)).toEqual([{ x: [1], y: [2] }]);
     });
 
-    it("parses sampleData when attributeData and staticData are empty", () => {
-        const sampleData = JSON.stringify([{ x: [3], y: [4] }]);
-        expect(parseData(undefined, undefined, sampleData)).toEqual([{ x: [3], y: [4] }]);
+    it("parses attributeData only", () => {
+        const attributeData = JSON.stringify([{ x: [5], y: [6] }]);
+        expect(parseData(undefined, attributeData)).toEqual([{ x: [5], y: [6] }]);
     });
 
-    it("parses attributeData and ignores sampleData if attributeData is present", () => {
-        const attributeData = JSON.stringify([{ x: [5], y: [6] }]);
-        const sampleData = JSON.stringify([{ x: [7], y: [8] }]);
-        expect(parseData(undefined, attributeData, sampleData)).toEqual([{ x: [5], y: [6] }]);
+    it("merges static and attribute traces by index with equal lengths", () => {
+        const staticData = JSON.stringify([
+            { type: "bar", x: [1, 2, 3] },
+            { type: "line", x: [4, 5, 6] }
+        ]);
+        const attributeData = JSON.stringify([{ y: [10, 20, 30] }, { y: [40, 50, 60] }]);
+        expect(parseData(staticData, attributeData)).toEqual([
+            { type: "bar", x: [1, 2, 3], y: [10, 20, 30] },
+            { type: "line", x: [4, 5, 6], y: [40, 50, 60] }
+        ]);
+    });
+
+    it("attribute data overrides static properties", () => {
+        const staticData = JSON.stringify([{ name: "static", x: [1, 2] }]);
+        const attributeData = JSON.stringify([{ name: "attribute", y: [3, 4] }]);
+        expect(parseData(staticData, attributeData)).toEqual([{ name: "attribute", x: [1, 2], y: [3, 4] }]);
+    });
+
+    it("appends extra static traces when static has more traces", () => {
+        const staticData = JSON.stringify([
+            { type: "bar", x: [1] },
+            { type: "line", x: [2] },
+            { type: "scatter", x: [3] }
+        ]);
+        const attributeData = JSON.stringify([{ y: [10] }]);
+        expect(parseData(staticData, attributeData)).toEqual([
+            { type: "bar", x: [1], y: [10] },
+            { type: "line", x: [2] },
+            { type: "scatter", x: [3] }
+        ]);
+    });
+
+    it("appends extra attribute traces when attribute has more traces", () => {
+        const staticData = JSON.stringify([{ type: "bar", x: [1] }]);
+        const attributeData = JSON.stringify([{ y: [10] }, { y: [20] }, { y: [30] }]);
+        expect(parseData(staticData, attributeData)).toEqual([
+            { type: "bar", x: [1], y: [10] },
+            { y: [20] },
+            { y: [30] }
+        ]);
+    });
+
+    it("returns empty array on invalid JSON", () => {
+        expect(parseData("invalid json")).toEqual([]);
+    });
+
+    it("merges sampleData with static when attributeData is empty", () => {
+        const staticData = JSON.stringify([{ type: "bar", x: [1, 2, 3] }]);
+        const sampleData = JSON.stringify([{ y: [10, 20, 30] }]);
+        expect(parseData(staticData, undefined, sampleData)).toEqual([{ type: "bar", x: [1, 2, 3], y: [10, 20, 30] }]);
+    });
+
+    it("ignores sampleData when attributeData is present", () => {
+        const staticData = JSON.stringify([{ type: "bar", x: [1] }]);
+        const attributeData = JSON.stringify([{ y: [10] }]);
+        const sampleData = JSON.stringify([{ y: [99], name: "sample" }]);
+        expect(parseData(staticData, attributeData, sampleData)).toEqual([{ type: "bar", x: [1], y: [10] }]);
+    });
+
+    it("uses sampleData only when attributeData is empty array string", () => {
+        const staticData = JSON.stringify([{ type: "line", x: [1] }]);
+        const attributeData = JSON.stringify([]);
+        const sampleData = JSON.stringify([{ y: [5] }]);
+        expect(parseData(staticData, attributeData, sampleData)).toEqual([{ type: "line", x: [1], y: [5] }]);
     });
 });
 

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

@@ -3,20 +3,25 @@ import { Config, Data, Layout } from "plotly.js-dist-min";
 import { ChartProps } from "../components/PlotlyChart";
 
 export function parseData(staticData?: string, attributeData?: string, sampleData?: string): Data[] {
-    let finalData: Data[] = [];
-
     try {
-        const dataAttribute = attributeData ? JSON.parse(attributeData) : [];
-        finalData = [...finalData, ...(staticData ? JSON.parse(staticData) : []), ...dataAttribute];
+        const staticTraces: Data[] = staticData ? JSON.parse(staticData) : [];
+        const attrTraces: Data[] = attributeData ? JSON.parse(attributeData) : [];
+
+        // Use sampleData as fallback when attributeData is empty
+        const dynamicTraces: Data[] = attrTraces.length > 0 ? attrTraces : sampleData ? JSON.parse(sampleData) : [];
+
+        const maxLen = Math.max(staticTraces.length, dynamicTraces.length);
+        const result: Data[] = [];
 
-        if (dataAttribute.length === 0) {
-            finalData = [...finalData, ...(sampleData ? JSON.parse(sampleData) : [])];
+        for (let i = 0; i < maxLen; i++) {
+            result.push({ ...staticTraces[i], ...dynamicTraces[i] } as Data);
         }
+
+        return result;
     } catch (error) {
         console.error("Error parsing chart data:", error);
+        return [];
     }
-
-    return finalData;
 }
 
 export function parseLayout(staticLayout?: string, attributeLayout?: string, sampleLayout?: string): Partial<Layout> {