fix(custom-chart-web): send real layout/config to playground and drop dead style

Author: yordan-st

packages/pluggableWidgets/custom-chart-web/jest.config.js

@@ -1,4 +1,11 @@
+const base = require("@mendix/pluggable-widgets-tools/test-config/jest.config.js");
+
 module.exports = {
-    ...require("@mendix/pluggable-widgets-tools/test-config/jest.config.js"),
-    testEnvironment: "@happy-dom/jest-environment"
+    ...base,
+    testEnvironment: "@happy-dom/jest-environment",
+    moduleNameMapper: {
+        ...base.moduleNameMapper,
+        // Source uses baseUrl-relative imports (e.g. `from "src/controllers/..."`); map them to rootDir.
+        "^src/(.*)$": "<rootDir>/$1"
+    }
 };

packages/pluggableWidgets/custom-chart-web/src/hooks/__tests__/useCustomChart.spec.ts

@@ -0,0 +1,72 @@
+import { render, renderHook, screen, waitFor } from "@testing-library/react";
+import { observer } from "mobx-react-lite";
+import { createElement, ReactElement } from "react";
+import { PlaygroundDataV2 } from "@mendix/shared-charts/main";
+import { CustomChartContainerProps } from "../../../typings/CustomChartProps";
+import { useCustomChart } from "../useCustomChart";
+
+function props(overrides: Partial<CustomChartContainerProps> = {}): CustomChartContainerProps {
+    return {
+        name: "chart",
+        class: "",
+        tabIndex: 0,
+        dataStatic: "[]",
+        sampleData: "",
+        showPlaygroundSlot: true,
+        layoutStatic: "{}",
+        sampleLayout: "",
+        configurationOptions: "{}",
+        widthUnit: "percentage",
+        width: 100,
+        heightUnit: "percentageOfWidth",
+        height: 75,
+        minHeightUnit: "none",
+        minHeight: 0,
+        maxHeightUnit: "none",
+        maxHeight: 0,
+        OverflowY: "auto",
+        ...overrides
+    } as CustomChartContainerProps;
+}
+
+describe("useCustomChart", () => {
+    it("passes the adapter's parsed layout and config into playgroundData (not empty objects)", () => {
+        const { result } = renderHook(() =>
+            useCustomChart(
+                props({
+                    layoutStatic: JSON.stringify({ title: "X" }),
+                    configurationOptions: JSON.stringify({ displaylogo: true })
+                })
+            )
+        );
+
+        const data = result.current.playgroundData as PlaygroundDataV2;
+
+        expect(data.layoutOptions).toMatchObject({ title: "X" });
+        expect(data.configOptions).toMatchObject({ displaylogo: true });
+    });
+
+    it("returns only playgroundData and ref (no dead containerStyle)", () => {
+        const { result } = renderHook(() => useCustomChart(props()));
+
+        expect(Object.keys(result.current).sort()).toEqual(["playgroundData", "ref"]);
+    });
+
+    it("stays reactive to the store's parsed traces when rendered inside an observer", async () => {
+        // Mirrors CustomChart.tsx: the hook is consumed by an observer component, which
+        // re-renders once the store's setup autorun loads the parsed data.
+        const Probe = observer(function Probe(p: CustomChartContainerProps): ReactElement {
+            const { playgroundData } = useCustomChart(p);
+            const data = playgroundData as PlaygroundDataV2;
+            return createElement("output", {}, JSON.stringify({ type: data.type, plotData: data.plotData }));
+        });
+
+        render(createElement(Probe, props({ dataStatic: JSON.stringify([{ type: "bar", x: [1], y: [2] }]) })));
+
+        await waitFor(() => {
+            const parsed = JSON.parse(screen.getByRole("status").textContent ?? "{}");
+            expect(parsed.type).toBe("editor.data.v2");
+            expect(parsed.plotData).toEqual([{ type: "bar", x: [1], y: [2] }]);
+        });
+    });
+});

packages/pluggableWidgets/custom-chart-web/src/hooks/useCustomChart.ts

@@ -1,5 +1,4 @@
-import { computed } from "mobx";
-import { CSSProperties, Ref, RefCallback, useEffect } from "react";
+import { Ref, RefCallback, useEffect } from "react";
 import { CustomChartControllerHost } from "src/controllers/CustomChartControllerHost";
 import { mergeRefs } from "src/utils/mergeRefs";
 import { PlaygroundData } from "@mendix/shared-charts/main";
@@ -9,30 +8,7 @@ import { useSetup } from "@mendix/widget-plugin-mobx-kit/react/useSetup";
 import { CustomChartContainerProps } from "../../typings/CustomChartProps";
 import { ControllerProps } from "../controllers/typings";
 
-// TODO: replace with get-dimensions from widget-plugin-platform
-function getContainerStyle(
-    width: number,
-    widthUnit: CustomChartContainerProps["widthUnit"],
-    height: number,
-    heightUnit: CustomChartContainerProps["heightUnit"]
-): CSSProperties {
-    const style: CSSProperties = {
-        width: widthUnit === "percentage" ? `${width}%` : `${width}px`
-    };
-
-    if (heightUnit === "percentageOfWidth") {
-        style.paddingBottom = widthUnit === "percentage" ? `${height}%` : `${width / 2}px`;
-    } else if (heightUnit === "pixels") {
-        style.height = `${height}px`;
-    } else if (heightUnit === "percentageOfParent") {
-        style.height = `${height}%`;
-    }
-
-    return style;
-}
-
 interface UseCustomChartReturn {
-    containerStyle: CSSProperties;
     playgroundData: PlaygroundData;
     ref: Ref<HTMLDivElement> | RefCallback<HTMLDivElement> | undefined;
 }
@@ -42,6 +18,7 @@ export function useCustomChart(props: CustomChartContainerProps): UseCustomChart
 
     const {
         store,
+        adapter,
         chartViewModel,
         resizeCtrl: resizeController
     } = useSetup(() => new CustomChartControllerHost(gateProvider.gate));
@@ -50,19 +27,15 @@ export function useCustomChart(props: CustomChartContainerProps): UseCustomChart
         gateProvider.setProps(props);
     });
 
-    const containerStyle = getContainerStyle(props.width, props.widthUnit, props.height, props.heightUnit);
-    const playgroundData = computed(
-        (): PlaygroundData => ({
-            type: "editor.data.v2",
-            store,
-            plotData: store.data,
-            layoutOptions: {},
-            configOptions: {}
-        })
-    ).get();
+    const playgroundData: PlaygroundData = {
+        type: "editor.data.v2",
+        store,
+        plotData: store.data,
+        layoutOptions: adapter.layout,
+        configOptions: adapter.config
+    };
 
     return {
-        containerStyle,
         playgroundData,
         ref: mergeRefs<HTMLDivElement>(resizeController.setTarget, chartViewModel.setChart)
     };