fix: heatmap update onclick

Author: gjulivan

packages/pluggableWidgets/charts-web/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@mendix/charts-web",
-    "version": "6.2.0",
+    "version": "6.2.1",
     "description": "Chart widgets collection for data visualization",
     "copyright": "© Mendix Technology BV 2025. All rights reserved.",
     "license": "Apache-2.0",

packages/pluggableWidgets/charts-web/src/package.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <package xmlns="http://www.mendix.com/package/1.0/">
-    <clientModule name="Charts" version="6.2.0" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="Charts" version="6.2.1" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="AreaChart/AreaChart.xml" />
             <widgetFile path="BarChart/BarChart.xml" />

packages/pluggableWidgets/heatmap-chart-web/CHANGELOG.md

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Fixed
+
+- We fixed on click events by correctly adding datasource and allow to listen to selection.
+
 ## [6.0.0] - 2025-02-28
 
 ### Changed

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

@@ -1,7 +1,7 @@
 {
     "name": "@mendix/heatmap-chart-web",
     "widgetName": "HeatMap",
-    "version": "6.0.0",
+    "version": "6.2.1",
     "description": "Shows data in a heatmap format graph.",
     "copyright": "© Mendix Technology BV 2025. All rights reserved.",
     "license": "Apache-2.0",

packages/pluggableWidgets/heatmap-chart-web/src/HeatMap.tsx

@@ -68,7 +68,8 @@ export function HeatMap(props: HeatMapContainerProps): ReactElement | null {
         tooltipHoverText: props.tooltipHoverText,
         verticalAxisAttribute: props.verticalAxisAttribute,
         verticalSortAttribute: props.verticalSortAttribute,
-        verticalSortOrder: props.verticalSortOrder
+        verticalSortOrder: props.verticalSortOrder,
+        seriesItemSelection: props.seriesItemSelection
     });
 
     const heatmapChartLayout = useMemo<ChartWidgetProps["layoutOptions"]>(() => {

packages/pluggableWidgets/heatmap-chart-web/src/HeatMap.xml

@@ -20,6 +20,14 @@
                         <attributeType name="Long" />
                     </attributeTypes>
                 </property>
+                <property key="seriesItemSelection" type="selection" dataSource="seriesDataSource">
+                    <caption>Selection type</caption>
+                    <description />
+                    <selectionTypes>
+                        <selectionType name="None" />
+                        <selectionType name="Single" />
+                    </selectionTypes>
+                </property>
             </propertyGroup>
             <propertyGroup caption="Axis">
                 <property key="horizontalAxisAttribute" type="attribute" required="false" dataSource="seriesDataSource">
@@ -184,7 +192,7 @@
         </propertyGroup>
         <propertyGroup caption="Events">
             <propertyGroup caption="Events">
-                <property key="onClickAction" type="action" required="false">
+                <property key="onClickAction" type="action" required="false" dataSource="seriesDataSource">
                     <caption>On click action</caption>
                     <description />
                 </property>

packages/pluggableWidgets/heatmap-chart-web/src/hooks/data.ts

@@ -1,10 +1,11 @@
-import { ValueStatus } from "mendix";
-import { useEffect, useMemo, useState } from "react";
+import { ValueStatus, ObjectItem } from "mendix";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { ensure } from "@mendix/pluggable-widgets-tools";
 import { HeatMapContainerProps } from "../../typings/HeatMapProps";
 import { ChartWidgetProps, compareAttrValuesAsc } from "@mendix/shared-charts/main";
 import { executeAction } from "@mendix/widget-plugin-platform/framework/execute-action";
 import Big from "big.js";
+import { PlotDatum } from "plotly.js-dist-min";
 
 type HeatMapDataSeriesHooks = Pick<
     HeatMapContainerProps,
@@ -22,6 +23,7 @@ type HeatMapDataSeriesHooks = Pick<
     | "verticalAxisAttribute"
     | "verticalSortAttribute"
     | "verticalSortOrder"
+    | "seriesItemSelection"
 >;
 
 type AttributeValue = string | number | Date | undefined;
@@ -33,6 +35,7 @@ type LocalHeatMapData = {
     verticalAxisValue: AttributeValue;
     horizontalSortValue: string | Big | Date | undefined;
     verticalSortValue: string | Big | Date | undefined;
+    id: string;
 };
 
 function getUniqueValues<T>(values: T[]): T[] {
@@ -64,20 +67,28 @@ export const useHeatMapDataSeries = ({
     tooltipHoverText,
     verticalAxisAttribute,
     verticalSortAttribute,
-    verticalSortOrder
+    verticalSortOrder,
+    seriesItemSelection
 }: HeatMapDataSeriesHooks): HeatMapHookData => {
     const [heatmapChartData, setHeatMapData] = useState<LocalHeatMapData[]>([]);
+    const objectMap = useRef<Map<string, ObjectItem>>(new Map());
 
     useEffect(() => {
         if (seriesDataSource.status === ValueStatus.Available && seriesDataSource.items) {
-            const dataSourceItems = seriesDataSource.items.map(dataSourceItem => ({
-                value: ensure(seriesValueAttribute).get(dataSourceItem).value?.toNumber(),
-                hoverText: tooltipHoverText?.get(dataSourceItem).value,
-                horizontalAxisValue: formatValueAttribute(horizontalAxisAttribute?.get(dataSourceItem).value),
-                horizontalSortValue: horizontalSortAttribute?.get(dataSourceItem).value,
-                verticalAxisValue: formatValueAttribute(verticalAxisAttribute?.get(dataSourceItem).value),
-                verticalSortValue: verticalSortAttribute?.get(dataSourceItem).value
-            }));
+            objectMap.current = new Map();
+            const dataSourceItems = seriesDataSource.items.map(dataSourceItem => {
+                objectMap.current.set(dataSourceItem.id, dataSourceItem);
+                const item = {
+                    value: ensure(seriesValueAttribute).get(dataSourceItem).value?.toNumber(),
+                    hoverText: tooltipHoverText?.get(dataSourceItem).value,
+                    horizontalAxisValue: formatValueAttribute(horizontalAxisAttribute?.get(dataSourceItem).value),
+                    horizontalSortValue: horizontalSortAttribute?.get(dataSourceItem).value,
+                    verticalAxisValue: formatValueAttribute(verticalAxisAttribute?.get(dataSourceItem).value),
+                    verticalSortValue: verticalSortAttribute?.get(dataSourceItem).value,
+                    id: dataSourceItem.id
+                };
+                return item;
+            });
             setHeatMapData(dataSourceItems);
         }
     }, [
@@ -90,7 +101,32 @@ export const useHeatMapDataSeries = ({
         verticalSortAttribute
     ]);
 
-    const onClick = useMemo(() => (onClickAction ? () => executeAction(onClickAction) : undefined), [onClickAction]);
+    const onClick = useCallback(
+        (item: ObjectItem, data: PlotDatum) => {
+            let selectedObjectItem: ObjectItem | undefined = item;
+            if (selectedObjectItem === null || selectedObjectItem === undefined) {
+                const selectedLocalHeatmapData = heatmapChartData.values().find(heatMapPointData => {
+                    return (
+                        heatMapPointData.horizontalAxisValue === data.x &&
+                        heatMapPointData.verticalAxisValue === data.y &&
+                        heatMapPointData.value === data.z
+                    );
+                });
+
+                if (selectedLocalHeatmapData) {
+                    selectedObjectItem = objectMap.current.get(selectedLocalHeatmapData.id);
+                }
+            }
+
+            if (selectedObjectItem) {
+                executeAction(onClickAction?.get(selectedObjectItem));
+                if (seriesItemSelection && seriesItemSelection.type === "Single") {
+                    seriesItemSelection.setSelection(selectedObjectItem);
+                }
+            }
+        },
+        [onClickAction, heatmapChartData, seriesItemSelection]
+    );
 
     return useMemo<HeatMapHookData>(() => {
         // `Array.reverse` mutates, so we make a copy.

packages/pluggableWidgets/heatmap-chart-web/src/package.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <package xmlns="http://www.mendix.com/package/1.0/">
-    <clientModule name="HeatMap" version="6.0.0" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="HeatMap" version="6.2.1" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="HeatMap.xml" />
         </widgetFiles>

packages/pluggableWidgets/heatmap-chart-web/typings/HeatMapProps.d.ts

@@ -4,7 +4,7 @@
  * @author Mendix Widgets Framework Team
  */
 import { ComponentType, CSSProperties, ReactNode } from "react";
-import { ActionValue, DynamicValue, ListValue, ListAttributeValue, ListExpressionValue } from "mendix";
+import { DynamicValue, ListValue, ListActionValue, ListAttributeValue, ListExpressionValue, SelectionSingleValue } from "mendix";
 import { Big } from "big.js";
 
 export type HorizontalSortOrderEnum = "asc" | "desc";
@@ -34,6 +34,7 @@ export interface HeatMapContainerProps {
     tabIndex?: number;
     seriesDataSource: ListValue;
     seriesValueAttribute: ListAttributeValue<Big>;
+    seriesItemSelection?: SelectionSingleValue;
     horizontalAxisAttribute?: ListAttributeValue<string>;
     horizontalSortAttribute?: ListAttributeValue<Big | string | Date>;
     horizontalSortOrder: HorizontalSortOrderEnum;
@@ -55,7 +56,7 @@ export interface HeatMapContainerProps {
     width: number;
     heightUnit: HeightUnitEnum;
     height: number;
-    onClickAction?: ActionValue;
+    onClickAction?: ListActionValue;
     tooltipHoverText?: ListExpressionValue<string>;
     enableThemeConfig: boolean;
     customLayout: string;
@@ -76,6 +77,7 @@ export interface HeatMapPreviewProps {
     translate: (text: string) => string;
     seriesDataSource: {} | { caption: string } | { type: string } | null;
     seriesValueAttribute: string;
+    seriesItemSelection: "None" | "Single";
     horizontalAxisAttribute: string;
     horizontalSortAttribute: string;
     horizontalSortOrder: HorizontalSortOrderEnum;

packages/shared/charts/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@mendix/shared-charts",
-    "version": "2.2.0",
+    "version": "2.2.1",
     "description": "Shared components for charts",
     "copyright": "© Mendix Technology BV 2025. All rights reserved.",
     "private": true,

packages/shared/charts/src/components/ChartView.tsx

@@ -35,10 +35,16 @@ export const ChartView = ({
             const [{ curveNumber, pointIndex, pointIndices, pointNumber, pointNumbers }] = event.points;
             const index = pointIndex ?? pointNumber;
             const indices = pointIndices ?? pointNumbers;
-            const itemIndex = getItemIndex(index, indices);
-            const { dataSourceItems, onClick } = data[curveNumber];
-            const item = dataSourceItems[itemIndex];
-            onClick?.(item);
+            try {
+                const itemIndex = getItemIndex(index, indices);
+                const { dataSourceItems, onClick } = data[curveNumber];
+                const item = dataSourceItems[itemIndex];
+                onClick?.(item);
+            } catch (_e: any) {
+                // let the chart handle it's own onClick
+                const { onClick } = data[curveNumber];
+                onClick?.(null, event.points[0]);
+            }
         },
         [data]
     );

packages/shared/charts/src/components/types.ts

@@ -1,11 +1,13 @@
 import { ObjectItem } from "mendix";
-import { Config, Data, Layout } from "plotly.js-dist-min";
+import { Config, Data, Layout, PlotDatum } from "plotly.js-dist-min";
 
 declare module "plotly.js-dist-min" {
     interface PlotDatum {
         /** This array appears on only when aggregation is used */
         pointIndices?: number[];
         pointNumbers?: number[];
+        // this is only appear on 3 dimentional matrix datasource
+        z?: number;
     }
 }
 export type ExtraTraceProps = {
@@ -14,7 +16,7 @@ export type ExtraTraceProps = {
     /** JSON string. Expected to be an object with custom 'trace' options. */
     customSeriesOptions: string | undefined;
     /** Click handler for each point on current 'trace'. Should be call with ObjectItem associated with clicked point. */
-    onClick?: (item: ObjectItem) => void;
+    onClick?: (item: ObjectItem | null, data?: Partial<PlotDatum>) => void;
 };
 
 export type PlotTrace = Partial<Data> & ExtraTraceProps;