feat(custom-chart): add onClick with data attribute

mendix · Feb 11, 2025 · 91715b9 · 91715b9
1 parent 987c98b
commit 91715b9
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 18 deletions.
diff --git a/packages/pluggableWidgets/custom-chart-web/src/CustomChart.tsx b/packages/pluggableWidgets/custom-chart-web/src/CustomChart.tsx
@@ -1,26 +1,26 @@
 import { useSetup } from "@mendix/widget-plugin-mobx-kit/react/useSetup";
-import { ReactElement, createElement } from "react";
+import { executeAction } from "@mendix/widget-plugin-platform/framework/execute-action";
+import { createElement, ReactElement, useEffect } from "react";
 import { CustomChartContainerProps } from "../typings/CustomChartProps";
+import { Host } from "./controllers/Host";
 import { useCustomChart } from "./hooks/useCustomChart";
-import { useActionEvents } from "./hooks/useActionEvents";
 import "./ui/CustomChart.scss";
-import { Host } from "./controllers/Host";
 
 export default function CustomChart(props: CustomChartContainerProps): ReactElement {
     const host = useSetup(() => new Host());
     const { chartRef, containerStyle } = useCustomChart(props);
-    const { handleClick } = useActionEvents(props);
+    // const { handleClick } = useActionEvents(props);
+
+    useEffect(() => {
+        if (props.eventDataAttribute?.value && props.onClick) {
+            executeAction(props.onClick);
+            // reset to allow re-click on same spot
+            props.eventDataAttribute.setValue("");
+        }
+    }, [props.eventDataAttribute?.value]);
 
     const x = mergeRefs<HTMLDivElement>(chartRef, host.resizeCtrl.setTarget);
-    return (
-        <div
-            ref={x}
-            className="widget-custom-chart"
-            style={containerStyle}
-            tabIndex={props.tabIndex}
-            onClick={handleClick}
-        />
-    );
+    return <div ref={x} className="widget-custom-chart" style={containerStyle} tabIndex={props.tabIndex} />;
 }
 
 export function mergeRefs<T>(...refs: Array<React.Ref<T>>): React.Ref<T> | React.RefCallback<T> | undefined {

diff --git a/packages/pluggableWidgets/custom-chart-web/src/CustomChart.xml b/packages/pluggableWidgets/custom-chart-web/src/CustomChart.xml
@@ -85,6 +85,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>

diff --git a/packages/pluggableWidgets/custom-chart-web/src/components/PlotlyChart.ts b/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);

diff --git a/packages/pluggableWidgets/custom-chart-web/src/hooks/useCustomChart.ts b/packages/pluggableWidgets/custom-chart-web/src/hooks/useCustomChart.ts
@@ -1,8 +1,9 @@
+import { executeAction } from "@mendix/widget-plugin-platform/framework/execute-action";
 import { debounce } from "@mendix/widget-plugin-platform/utils/debounce";
-import { useEffect, useMemo, useRef, useState, type RefObject, CSSProperties } from "react";
+import { CSSProperties, useEffect, useMemo, useRef, useState, type RefObject } from "react";
 import { CustomChartContainerProps } from "../../typings/CustomChartProps";
-import { PlotlyChart, ChartProps } from "../components/PlotlyChart";
-import { parseData, parseLayout, parseConfig } from "../utils/utils";
+import { ChartProps, PlotlyChart } from "../components/PlotlyChart";
+import { parseConfig, parseData, parseLayout } from "../utils/utils";
 
 interface UseCustomChartReturn {
     chartRef: RefObject<HTMLDivElement>;
@@ -70,6 +71,15 @@ export function useCustomChart(props: CustomChartContainerProps): UseCustomChart
 
         const updateData: ChartProps = {
             data,
+            onClick: (data: any) => {
+                if (props.eventDataAttribute) {
+                    // TODO: value has to be set to correct value (possibly data.points)
+                    props.eventDataAttribute?.setValue(JSON.stringify(data.points[0].bbox));
+                } else {
+                    // if event attribute not set, directly trigger actions.
+                    executeAction(props.onClick);
+                }
+            },
             layout: {
                 ...layout,
                 width: dimensions.width,

diff --git a/packages/pluggableWidgets/custom-chart-web/typings/CustomChartProps.d.ts b/packages/pluggableWidgets/custom-chart-web/typings/CustomChartProps.d.ts
@@ -30,6 +30,7 @@ export interface CustomChartContainerProps {
     heightUnit: HeightUnitEnum;
     height: number;
     onClick?: ActionValue;
+    eventDataAttribute?: EditableValue<string>;
 }
 
 export interface CustomChartPreviewProps {
@@ -55,4 +56,5 @@ export interface CustomChartPreviewProps {
     heightUnit: HeightUnitEnum;
     height: number | null;
     onClick: {} | null;
+    eventDataAttribute: string;
 }