[WC-2989]Backport custom chart parsing issue

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]
 
-### Changed
+### Fixed
 
-- We updated shared charts dependency.
+- We fixed an issue with incorrect parsing and merging of layout and data properties.
 
 ## [1.1.0] - 2025-06-04
 

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

@@ -39,7 +39,7 @@
         "publish-marketplace": "rui-publish-marketplace",
         "release": "cross-env NODE_OPTIONS=--max-old-space-size=8192 pluggable-widgets-tools release:web",
         "start": "cross-env NODE_OPTIONS=--max-old-space-size=8192 pluggable-widgets-tools start:server",
-        "test": "echo 'FIXME: Finish custom-chart-web unit test migration'",
+        "test": "pluggable-widgets-tools test:unit:web:enzyme-free",
         "update-changelog": "rui-update-changelog-widget",
         "verify": "rui-verify-package-format"
     },

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

@@ -0,0 +1,56 @@
+import { parseData, parseLayout, parseConfig } from "../utils/utils";
+
+describe("parseData", () => {
+    it("returns empty array when all inputs are empty", () => {
+        expect(parseData()).toEqual([]);
+    });
+
+    it("parses staticData only", () => {
+        const staticData = JSON.stringify([{ x: [1], y: [2] }]);
+        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 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] }]);
+    });
+});
+
+describe("parseLayout", () => {
+    it("returns empty object when all inputs are empty", () => {
+        expect(parseLayout()).toEqual({});
+    });
+
+    it("parses staticLayout only", () => {
+        const staticLayout = JSON.stringify({ title: "Test" });
+        expect(parseLayout(staticLayout)).toEqual({ title: "Test" });
+    });
+
+    it("parses sampleLayout when attributeLayout and staticLayout are empty", () => {
+        const sampleLayout = JSON.stringify({ title: "Sample" });
+        expect(parseLayout(undefined, undefined, sampleLayout)).toEqual({ title: "Sample" });
+    });
+
+    it("parses attributeLayout and ignores sampleLayout if attributeLayout is present", () => {
+        const attributeLayout = JSON.stringify({ title: "Attr" });
+        const sampleLayout = JSON.stringify({ title: "Sample" });
+        expect(parseLayout(undefined, attributeLayout, sampleLayout)).toEqual({ title: "Attr" });
+    });
+});
+
+describe("parseConfig", () => {
+    it("returns empty object when configOptions is empty", () => {
+        expect(parseConfig()).toEqual({});
+    });
+
+    it("parses configOptions", () => {
+        const configOptions = JSON.stringify({ responsive: true });
+        expect(parseConfig(configOptions)).toEqual({ responsive: true });
+    });
+});

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

@@ -3,14 +3,11 @@ export function parseData(staticData?: string, attributeData?: string, sampleDat
     let finalData: Data[] = [];
 
     try {
-        if (staticData) {
-            finalData = [...finalData, ...JSON.parse(staticData)];
-        }
-        if (attributeData) {
-            finalData = [...finalData, ...JSON.parse(attributeData)];
-        }
-        if (!finalData.length && sampleData) {
-            finalData = [...finalData, ...JSON.parse(sampleData)];
+        const dataAttribute = attributeData ? JSON.parse(attributeData) : [];
+        finalData = [...finalData, ...(staticData ? JSON.parse(staticData) : []), ...dataAttribute];
+
+        if (dataAttribute.length === 0) {
+            finalData = [...finalData, ...(sampleData ? JSON.parse(sampleData) : [])];
         }
     } catch (error) {
         console.error("Error parsing chart data:", error);
@@ -23,14 +20,11 @@ export function parseLayout(staticLayout?: string, attributeLayout?: string, sam
     let finalLayout: Partial<Layout> = {};
 
     try {
-        if (staticLayout) {
-            finalLayout = { ...finalLayout, ...JSON.parse(staticLayout) };
-        }
-        if (attributeLayout) {
-            finalLayout = { ...finalLayout, ...JSON.parse(attributeLayout) };
-        }
-        if (Object.keys(finalLayout).length === 0 && sampleLayout) {
-            finalLayout = { ...finalLayout, ...JSON.parse(sampleLayout) };
+        const layoutAttribute = attributeLayout ? JSON.parse(attributeLayout) : {};
+        finalLayout = { ...finalLayout, ...(staticLayout ? JSON.parse(staticLayout) : {}), ...layoutAttribute };
+
+        if (Object.keys(layoutAttribute).length === 0) {
+            finalLayout = { ...finalLayout, ...(sampleLayout ? JSON.parse(sampleLayout) : {}) };
         }
     } catch (error) {
         console.error("Error parsing chart layout:", error);