chore(custom-chart): add onclick

mendix · Jan 29, 2025 · 17aae7d · 17aae7d
1 parent 2fd7b51
commit 17aae7d
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 7 deletions.
diff --git a/packages/pluggableWidgets/custom-chart-web/src/CustomChart.tsx b/packages/pluggableWidgets/custom-chart-web/src/CustomChart.tsx
@@ -1,20 +1,26 @@
-import { ReactElement, createElement } from "react";
+import { ReactElement, createElement, useEffect } from "react";
 import { CustomChartContainerProps } from "../typings/CustomChartProps";
 import { useCustomChart } from "./hooks/useCustomChart";
-import { useActionEvents } from "./hooks/useActionEvents";
+// import { useActionEvents } from "./hooks/useActionEvents";
+import { executeAction } from "@mendix/widget-plugin-platform/framework/execute-action";
 import "./ui/CustomChart.scss";
 
 export default function CustomChart(props: CustomChartContainerProps): ReactElement {
     const { chartRef, containerStyle } = useCustomChart(props);
-    const { handleClick } = useActionEvents(props);
+    // const { handleClick } = useActionEvents(props);
 
+    useEffect(() => {
+        if (props.eventDataAttribute && props.eventDataAttribute.value && props.onClick) {
+            executeAction(props.onClick);
+        }
+    }, [props.eventDataAttribute?.value]);
     return (
         <div
             ref={chartRef}
             className="widget-custom-chart"
             style={containerStyle}
             tabIndex={props.tabIndex}
-            onClick={handleClick}
+            // onClick={handleClick}
         />
     );
 }
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
@@ -70,6 +70,14 @@ export function useCustomChart(props: CustomChartContainerProps): UseCustomChart
 
         const updateData: ChartProps = {
             data,
+            onClick: (data: any) => {
+                // TODO: value has to be set to data.points
+                const cloneData = data.points[0];
+
+                console.log("[DEV] onclick event", data, cloneData);
+                debugger;
+                props.eventDataAttribute?.setValue(JSON.stringify(data.points[0].bbox));
+            },
             layout: {
                 ...layout,
                 width: dimensions.width,
@@ -119,7 +127,7 @@ export function useCustomChart(props: CustomChartContainerProps): UseCustomChart
             width: dimensions.width,
             height: dimensions.height
         };
-
+        chartRef.current;
         updateChartDebounced(chart, updateData);
 
         return () => {

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;
 }