[WC-2678]: Add playground to Custom Chart

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

@@ -51,6 +51,8 @@
         "cross-env": "^7.0.3"
     },
     "dependencies": {
+        "@mendix/shared-charts": "workspace:*",
+        "@mendix/widget-plugin-mobx-kit": "workspace:*",
         "classnames": "^2.3.2",
         "plotly.js-dist-min": "^2.35.3"
     }

packages/pluggableWidgets/custom-chart-web/src/CustomChart.editorConfig.ts

@@ -1,15 +1,19 @@
-import { Properties } from "@mendix/pluggable-widgets-tools";
+import { hidePropertyIn, Problem, Properties } from "@mendix/pluggable-widgets-tools";
+import { checkSlot, withPlaygroundSlot } from "@mendix/shared-charts/preview";
 import {
-    StructurePreviewProps,
-    structurePreviewPalette
+    structurePreviewPalette,
+    StructurePreviewProps
 } from "@mendix/widget-plugin-platform/preview/structure-preview-api";
 import { CustomChartPreviewProps } from "../typings/CustomChartProps";
 
-export function getProperties(_values: CustomChartPreviewProps, defaultProperties: Properties): Properties {
+export function getProperties(values: CustomChartPreviewProps, defaultProperties: Properties): Properties {
+    if (values.showPlaygroundSlot === false) {
+        hidePropertyIn(defaultProperties, values, "playground");
+    }
     return defaultProperties;
 }
 
-export function getPreview(_values: CustomChartPreviewProps, isDarkMode: boolean): StructurePreviewProps {
+export function getPreview(values: CustomChartPreviewProps, isDarkMode: boolean): StructurePreviewProps {
     const palette = structurePreviewPalette[isDarkMode ? "dark" : "light"];
     const sampleChartSvg = `
         <svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -25,7 +29,7 @@ export function getPreview(_values: CustomChartPreviewProps, isDarkMode: boolean
         </svg>
     `;
 
-    return {
+    const preview: StructurePreviewProps = {
         type: "Container",
         backgroundColor: palette.background.container,
         borders: true,
@@ -59,4 +63,14 @@ export function getPreview(_values: CustomChartPreviewProps, isDarkMode: boolean
             }
         ]
     };
+
+    return withPlaygroundSlot(values, preview);
+}
+
+export function check(values: CustomChartPreviewProps): Problem[] {
+    const errors: Array<Problem | Problem[]> = [];
+
+    errors.push(checkSlot(values));
+
+    return errors.flat();
 }

packages/pluggableWidgets/custom-chart-web/src/CustomChart.editorPreview.tsx

@@ -7,7 +7,7 @@ const defaultSampleData = `[{
     "x": [1, 2, 3, 4, 5, 6, 7, 8],
     "y": [5, 35, 15, 45, 25, 65, 30, 55],
     "mode": "lines+markers",
-    "marker": { 
+    "marker": {
         "color": "#264AE5",
         "size": 8
     },
@@ -39,14 +39,16 @@ const defaultConfig = `{
 }`;
 
 export function preview(props: CustomChartPreviewProps): ReactElement {
+    const { renderer: PlaygroundSlot } = props.playground ?? { renderer: () => null };
+
     const containerProps = {
         name: "preview-custom-chart",
         class: props.class,
         style: props.styleObject,
         tabIndex: 0,
         dataStatic: props.dataStatic || defaultSampleData,
         sampleData: props.sampleData,
-        devMode: props.devMode,
+        showPlaygroundSlot: props.showPlaygroundSlot,
         layoutStatic: props.layoutStatic || defaultSampleLayout,
         sampleLayout: props.sampleLayout,
         configurationOptions: props.configurationOptions || defaultConfig,
@@ -56,5 +58,25 @@ export function preview(props: CustomChartPreviewProps): ReactElement {
         height: props.height || 75
     };
 
-    return <CustomChart {...containerProps} />;
+    return (
+        <div style={{ display: "flex", flexFlow: "column nowrap" }}>
+            <div
+                style={
+                    props.showPlaygroundSlot
+                        ? undefined
+                        : {
+                              display: "none"
+                          }
+                }
+            >
+                <PlaygroundSlot caption="Playground slot">{dropzone()}</PlaygroundSlot>
+            </div>
+            <CustomChart {...containerProps} />
+        </div>
+    );
 }
+
+// Preview don't support React component as children. So we forced to use plain function.
+const dropzone = (): React.ReactNode => (
+    <div style={{ padding: "10px 10px 10px 0", display: "flex", justifyContent: "end", flexGrow: 1, height: 58 }} />
+);

packages/pluggableWidgets/custom-chart-web/src/CustomChart.tsx

@@ -1,20 +1,18 @@
-import { ReactElement, createElement } from "react";
+import { getPlaygroundContext } from "@mendix/shared-charts/main";
+import { createElement, Fragment, ReactElement } from "react";
 import { CustomChartContainerProps } from "../typings/CustomChartProps";
 import { useCustomChart } from "./hooks/useCustomChart";
-import { useActionEvents } from "./hooks/useActionEvents";
 import "./ui/CustomChart.scss";
 
+const PlaygroundContext = getPlaygroundContext();
+
 export default function CustomChart(props: CustomChartContainerProps): ReactElement {
-    const { chartRef, containerStyle } = useCustomChart(props);
-    const { handleClick } = useActionEvents(props);
+    const { containerStyle, playgroundData, ref } = useCustomChart(props);
 
     return (
-        <div
-            ref={chartRef}
-            className="widget-custom-chart"
-            style={containerStyle}
-            tabIndex={props.tabIndex}
-            onClick={handleClick}
-        />
+        <Fragment>
+            <div ref={ref} className="widget-custom-chart" style={containerStyle} tabIndex={props.tabIndex} />
+            <PlaygroundContext.Provider value={playgroundData}>{props.playground}</PlaygroundContext.Provider>
+        </Fragment>
     );
 }

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

@@ -21,13 +21,21 @@
                 <caption>Sample data</caption>
                 <description>Data for preview. It will be merged with the 'Static data' in the web modeler or at runtime when no 'Source attribute' is selected</description>
             </property>
-            <property key="devMode" type="enumeration" defaultValue="developer">
+            <!-- <property key="devMode" type="enumeration" defaultValue="developer">
                 <caption>Mode</caption>
                 <description>The development mode adds a button to the charts when running the app which can be used to toggle a live editor for the advanced configuration options</description>
                 <enumerationValues>
                     <enumerationValue key="developer">Development</enumerationValue>
                     <enumerationValue key="advanced">Production</enumerationValue>
                 </enumerationValues>
+            </property> -->
+            <property key="showPlaygroundSlot" type="boolean" defaultValue="false">
+                <caption>Show playground slot</caption>
+                <description />
+            </property>
+            <property key="playground" type="widgets" required="false">
+                <caption>Playground slot</caption>
+                <description />
             </property>
         </propertyGroup>
         <propertyGroup caption="Layout options">
@@ -85,6 +93,13 @@
                 <caption>On click</caption>
                 <description />
             </property>
+            <property key="eventDataAttribute" type="attribute" required="false">
+                <caption>Event data attribute</caption>
+                <description>The attribute to store received raw data from the chart event. https://plot.ly/javascript/plotlyjs-events/#event-data</description>
+                <attributeTypes>
+                    <attributeType name="String" />
+                </attributeTypes>
+            </property>
             <!-- <property key="eventEntity" type="association" required="false" setLabel="true">
                 <caption>Event entity</caption>
                 <description>The entity used to pass the event data to the server</description>

packages/pluggableWidgets/custom-chart-web/src/components/PlotlyChart.ts

@@ -6,6 +6,7 @@ export interface ChartProps {
     config: Partial<Config>;
     width: number;
     height: number;
+    onClick?: (data: any) => void;
 }
 
 export class PlotlyChart {
@@ -20,13 +21,16 @@ export class PlotlyChart {
         this.data = props.data;
         this.layout = props.layout;
         this.config = props.config;
-        this.init();
+        this.init(props);
     }
 
-    private init(): void {
+    private init(props: ChartProps): void {
         newPlot(this.element, this.data, this.layout, this.config)
             .then(plotlyElement => {
                 this.plotlyElement = plotlyElement;
+                if (props?.onClick) {
+                    this.plotlyElement.on("plotly_click", props.onClick);
+                }
             })
             .catch(error => {
                 console.error("Error initializing chart:", error);

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

@@ -0,0 +1,141 @@
+import { ReactiveController } from "@mendix/widget-plugin-mobx-kit/main";
+import { debounce } from "@mendix/widget-plugin-platform/utils/debounce";
+import { makeObservable, observable } from "mobx";
+import { Config, Data, Layout } from "plotly.js-dist-min";
+import { CustomChartContainerProps } from "../../typings/CustomChartProps";
+import { ChartProps, PlotlyChart } from "../components/PlotlyChart";
+import { parseConfig, parseData, parseLayout } from "../utils/utils";
+import { CustomChartControllerHost } from "./CustomChartControllerHost";
+import { ResizeController } from "./ResizeController";
+
+export class ChartController implements ReactiveController {
+    private cleanup: undefined | (() => void) = undefined;
+    private configurationOptions: string;
+    private dataAttribute?: string;
+    private dataStatic: string;
+    private layoutAttribute?: string;
+    private layoutStatic: string;
+    private sampleData: string;
+    private sampleLayout: string;
+    private chart: PlotlyChart | null;
+
+    constructor(host: CustomChartControllerHost, props: CustomChartContainerProps) {
+        host.addController(this);
+
+        this.configurationOptions = props.configurationOptions;
+        this.dataAttribute = props.dataAttribute?.value;
+        this.dataStatic = props.dataStatic;
+        this.layoutAttribute = props.layoutAttribute?.value;
+        this.layoutStatic = props.layoutStatic;
+        this.sampleData = props.sampleData;
+        this.sampleLayout = props.sampleLayout;
+        this.chart = null;
+
+        makeObservable<
+            ChartController,
+            | "configurationOptions"
+            | "dataAttribute"
+            | "dataStatic"
+            | "layoutAttribute"
+            | "layoutStatic"
+            | "sampleData"
+            | "sampleLayout"
+        >(this, {
+            configurationOptions: observable,
+            dataAttribute: observable,
+            dataStatic: observable,
+            layoutAttribute: observable,
+            layoutStatic: observable,
+            sampleData: observable,
+            sampleLayout: observable
+        });
+    }
+
+    setup(): () => void {
+        return () => this.cleanup?.();
+    }
+
+    getChartData(onClick: (data: any) => void, resizeController: ResizeController): ChartProps {
+        const layout = this.getLayout();
+        return {
+            config: {
+                ...this.getConfig(),
+                responsive: true
+            },
+            data: this.getData(),
+            layout: {
+                ...layout,
+                width: resizeController.width,
+                height: resizeController.height,
+                autosize: true,
+                font: {
+                    family: "Open Sans, sans-serif",
+                    size: Math.max(12 * (resizeController.width / 1000), 8)
+                },
+                legend: {
+                    ...layout.legend,
+                    font: {
+                        ...layout.legend?.font,
+                        size: Math.max(10 * (resizeController.width / 1000), 7)
+                    },
+                    itemwidth: Math.max(10 * (resizeController.width / 1000), 3),
+                    itemsizing: "constant"
+                },
+                xaxis: {
+                    ...layout.xaxis,
+                    tickfont: {
+                        ...layout.xaxis?.tickfont,
+                        size: Math.max(10 * (resizeController.width / 1000), 7)
+                    }
+                },
+                yaxis: {
+                    ...layout.yaxis,
+                    tickfont: {
+                        ...layout.yaxis?.tickfont,
+                        size: Math.max(10 * (resizeController.width / 1000), 7)
+                    }
+                },
+                margin: {
+                    ...layout.margin,
+                    l: Math.max(50 * (resizeController.width / 1000), 30),
+                    r: Math.max(50 * (resizeController.width / 1000), 30),
+                    t: Math.max(50 * (resizeController.width / 1000), 30),
+                    b: Math.max(50 * (resizeController.width / 1000), 30),
+                    pad: Math.max(4 * (resizeController.width / 1000), 2)
+                }
+            },
+            onClick,
+
+            width: resizeController.width,
+            height: resizeController.height
+        };
+    }
+
+    getConfig(): Partial<Config> {
+        return parseConfig(this.configurationOptions);
+    }
+
+    getData(): Data[] {
+        return parseData(this.dataStatic, this.dataAttribute, this.sampleData);
+    }
+
+    getLayout(): Partial<Layout> {
+        return parseLayout(this.layoutStatic, this.layoutAttribute, this.sampleLayout);
+    }
+
+    setChart(target: HTMLDivElement, props: ChartProps): void {
+        const [setChartDebounced, abort] = debounce(() => {
+            if (!this.chart) {
+                this.chart = new PlotlyChart(target, props);
+            } else {
+                this.chart.update(props);
+            }
+        }, 100);
+
+        setChartDebounced();
+
+        this.cleanup = () => {
+            abort();
+        };
+    }
+}

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

@@ -0,0 +1,15 @@
+import { BaseControllerHost } from "@mendix/widget-plugin-mobx-kit/BaseControllerHost";
+import { ResizeController } from "./ResizeController";
+import { ChartController } from "./ChartController";
+import { CustomChartContainerProps } from "../../typings/CustomChartProps";
+
+export class CustomChartControllerHost extends BaseControllerHost {
+    resizeCtrl: ResizeController;
+    chartCtrl: ChartController;
+
+    constructor(props: CustomChartContainerProps) {
+        super();
+        this.resizeCtrl = new ResizeController(this);
+        this.chartCtrl = new ChartController(this, props);
+    }
+}