refactor(custom-chart-web): route store data through typed toPlotlyData helper

Author: yordan-st

packages/pluggableWidgets/custom-chart-web/src/controllers/CustomChartControllerHost.ts

@@ -1,13 +1,13 @@
 import { computed } from "mobx";
 
-import { Data } from "plotly.js-dist-min";
 import { EditableChartStore, EditableChartStoreProps } from "@mendix/shared-charts/main";
 import { ComputedAtom, DerivedPropsGate, SetupHost } from "@mendix/widget-plugin-mobx-kit/main";
 import { ChartPropsController } from "./ChartPropsController";
 import { PlotlyController } from "./PlotlyController";
 import { ResizeController } from "./ResizeController";
 import { ControllerProps } from "./typings";
 import { PlotlyChartProps } from "../components/PlotlyChart";
+import { toPlotlyData } from "../utils/toPlotlyData";
 
 export class CustomChartControllerHost extends SetupHost {
     resizeCtrl: ResizeController;
@@ -31,7 +31,7 @@ export class CustomChartControllerHost extends SetupHost {
 function viewModelAtom(store: EditableChartStore, adapter: ChartPropsController): ComputedAtom<PlotlyChartProps> {
     return computed(() => {
         return {
-            data: store.data as Data[],
+            data: toPlotlyData(store.data),
             layout: store.layout,
             config: store.config,
             onClick: adapter.chartOnClick

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

@@ -0,0 +1,16 @@
+import { toPlotlyData } from "../toPlotlyData";
+
+describe("toPlotlyData", () => {
+    it("maps stored records to Plotly traces without reshaping them", () => {
+        const stored = [
+            { type: "bar", x: [1, 2], y: [3, 4] },
+            { type: "scatter", x: [5], y: [6] }
+        ];
+
+        expect(toPlotlyData(stored)).toEqual(stored);
+    });
+
+    it("returns an empty array for empty data", () => {
+        expect(toPlotlyData([])).toEqual([]);
+    });
+});

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

@@ -0,0 +1,13 @@
+import { Data } from "plotly.js-dist-min";
+
+/**
+ * Boundary between the editable store and Plotly.
+ *
+ * The store keeps traces as `Record<string, unknown>[]` because user JSON is validated
+ * on write (`EditableChartStore.setDataAt` parses, type-checks and warns on bad input) but
+ * cannot be narrowed to Plotly's large `Data` union at that point. This helper localizes the
+ * unavoidable conversion in one named, documented place instead of scattering `as Data[]` casts.
+ */
+export function toPlotlyData(data: Array<Record<string, unknown>>): Data[] {
+    return data as Data[];
+}