[WC-2990] heatmap onclick with datasource and listen selection

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

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Changed
+
+- We updated shared charts dependency.
+
 ## [6.2.0] - 2025-06-03
 
 ### Fixed

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

@@ -1,7 +1,7 @@
 {
     "name": "@mendix/area-chart-web",
     "widgetName": "AreaChart",
-    "version": "6.2.0",
+    "version": "6.2.1",
     "description": "An area chart displays a solid color between the traces of a graph.",
     "copyright": "© Mendix Technology BV 2025. All rights reserved.",
     "license": "Apache-2.0",

packages/pluggableWidgets/area-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="AreaChart" version="6.2.0" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="AreaChart" version="6.2.1" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="AreaChart.xml" />
         </widgetFiles>

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

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Changed
+
+- We updated shared charts dependency.
+
 ## [6.2.0] - 2025-06-03
 
 ### Fixed

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

@@ -1,7 +1,7 @@
 {
     "name": "@mendix/bar-chart-web",
     "widgetName": "BarChart",
-    "version": "6.2.0",
+    "version": "6.2.1",
     "description": "Shows difference between the data points for one or more categories.",
     "copyright": "© Mendix Technology BV 2025. All rights reserved.",
     "license": "Apache-2.0",

packages/pluggableWidgets/bar-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="BarChart" version="6.2.0" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="BarChart" version="6.2.1" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="BarChart.xml" />
         </widgetFiles>

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

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Changed
+
+- We updated shared charts dependency.
+
 ## [6.2.0] - 2025-06-03
 
 ### Fixed

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

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

packages/pluggableWidgets/bubble-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="BubbleChart" version="6.2.0" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="BubbleChart" version="6.2.1" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="BubbleChart.xml" />
         </widgetFiles>

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

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Changed
+
+- We updated shared charts dependency.
+
 ## [2.0.0] - 2025-02-28
 
 ### Changed

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

@@ -1,7 +1,7 @@
 {
     "name": "@mendix/chart-playground-web",
     "widgetName": "ChartPlayground",
-    "version": "2.0.0",
+    "version": "2.1.1",
     "description": "A small playground widget for charts",
     "copyright": "© Mendix Technology BV 2025. All rights reserved.",
     "license": "Apache-2.0",

packages/pluggableWidgets/chart-playground-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="ChartPlayground" version="2.0.0" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="ChartPlayground" version="2.1.1" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="ChartPlayground.xml" />
         </widgetFiles>

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/column-chart-web/CHANGELOG.md

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Changed
+
+- We updated shared charts dependency.
+
 ## [6.2.0] - 2025-06-03
 
 ### Fixed

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

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

packages/pluggableWidgets/column-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="ColumnChart" version="6.2.0" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="ColumnChart" version="6.2.1" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="ColumnChart.xml" />
         </widgetFiles>

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

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Changed
+
+- We updated shared charts dependency.
+
 ## [1.2.0] - 2025-06-03
 
 ### Changed

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

@@ -1,7 +1,7 @@
 {
     "name": "@mendix/custom-chart-web",
     "widgetName": "CustomChart",
-    "version": "1.2.0",
+    "version": "1.2.1",
     "description": "",
     "copyright": "© Mendix Technology BV 2025. All rights reserved.",
     "license": "Apache-2.0",

packages/pluggableWidgets/custom-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="CustomChart" version="1.2.0" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="CustomChart" version="1.2.1" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="CustomChart.xml" />
         </widgetFiles>

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/pluggableWidgets/line-chart-web/CHANGELOG.md

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Changed
+
+- We updated shared charts dependency.
+
 ## [6.2.0] - 2025-06-03
 
 ### Fixed