feat(pie-chart): listen to widget

mendix · Jan 15, 2025 · 88dd635 · 88dd635
1 parent 8f78ff9
commit 88dd635
Show file tree

Hide file tree

Showing 10 changed files with 48 additions and 13 deletions.
diff --git a/packages/pluggableWidgets/charts-web/package.json b/packages/pluggableWidgets/charts-web/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@mendix/charts-web",
-    "version": "5.1.1",
+    "version": "5.1.2",
     "description": "Chart widgets collection for data visualization",
     "license": "Apache-2.0",
     "private": false,

diff --git a/packages/pluggableWidgets/charts-web/src/package.xml b/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="5.1.1" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="Charts" version="5.1.2" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="AreaChart/AreaChart.xml" />
             <widgetFile path="BarChart/BarChart.xml" />

diff --git a/packages/pluggableWidgets/pie-doughnut-chart-web/CHANGELOG.md b/packages/pluggableWidgets/pie-doughnut-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 add listen to widget functionality on pie chart selection.
+
 ## [5.1.1] - 2024-12-12
 
 ### Fixed

diff --git a/packages/pluggableWidgets/pie-doughnut-chart-web/package.json b/packages/pluggableWidgets/pie-doughnut-chart-web/package.json
@@ -1,7 +1,7 @@
 {
     "name": "@mendix/pie-doughnut-chart-web",
     "widgetName": "PieChart",
-    "version": "5.1.1",
+    "version": "5.2.0",
     "description": "Shows data in a pie format graph.",
     "copyright": "© Mendix Technology BV 2023. All rights reserved.",
     "license": "Apache-2.0",

diff --git a/packages/pluggableWidgets/pie-doughnut-chart-web/src/PieChart.tsx b/packages/pluggableWidgets/pie-doughnut-chart-web/src/PieChart.tsx
@@ -4,6 +4,7 @@ import classNames from "classnames";
 import { createElement, ReactElement } from "react";
 import { PieChartContainerProps } from "../typings/PieChartProps";
 import { usePieChartDataSeries } from "./hooks/data";
+import "./ui/PieChart.scss";
 
 const pieChartLayoutOptions: ChartWidgetProps["layoutOptions"] = {
     font: {
@@ -38,13 +39,16 @@ export function PieChart(props: PieChartContainerProps): ReactElement | null {
         seriesSortOrder: props.seriesSortOrder,
         seriesValueAttribute: props.seriesValueAttribute,
         onClickAction: props.onClickAction,
-        tooltipHoverText: props.tooltipHoverText
+        tooltipHoverText: props.tooltipHoverText,
+        seriesItemSelection: props.seriesItemSelection
     });
 
+    const isPieClickable = props.seriesItemSelection?.type === "Single" || props.onClickAction;
+
     return (
         <ChartWidget
             type="PieChart"
-            className={classNames("widget-pie-chart", props.class)}
+            className={classNames("widget-pie-chart", { "widget-pie-chart-selectable": isPieClickable }, props.class)}
             data={pieChartData}
             width={props.width}
             widthUnit={props.widthUnit}

diff --git a/packages/pluggableWidgets/pie-doughnut-chart-web/src/PieChart.xml b/packages/pluggableWidgets/pie-doughnut-chart-web/src/PieChart.xml
@@ -51,6 +51,14 @@
                     <description />
                     <returnType type="String" />
                 </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="General">
                 <property key="enableAdvancedOptions" type="boolean" defaultValue="false">

diff --git a/packages/pluggableWidgets/pie-doughnut-chart-web/src/hooks/data.ts b/packages/pluggableWidgets/pie-doughnut-chart-web/src/hooks/data.ts
@@ -1,10 +1,10 @@
-import { ObjectItem, ValueStatus } from "mendix";
-import { useEffect, useMemo, useState } from "react";
 import { ensure } from "@mendix/pluggable-widgets-tools";
-import Big from "big.js";
-import { PieChartContainerProps } from "../../typings/PieChartProps";
 import { ChartWidgetProps, compareAttrValuesAsc } from "@mendix/shared-charts/main";
 import { executeAction } from "@mendix/widget-plugin-platform/framework/execute-action";
+import Big from "big.js";
+import { ObjectItem, ValueStatus } from "mendix";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { PieChartContainerProps } from "../../typings/PieChartProps";
 
 type PieChartDataSeriesHooks = Pick<
     PieChartContainerProps,
@@ -18,6 +18,7 @@ type PieChartDataSeriesHooks = Pick<
     | "seriesSortOrder"
     | "seriesValueAttribute"
     | "tooltipHoverText"
+    | "seriesItemSelection"
 >;
 
 type LocalPieChartData = {
@@ -38,7 +39,8 @@ export const usePieChartDataSeries = ({
     seriesSortOrder,
     seriesValueAttribute,
     onClickAction,
-    tooltipHoverText
+    tooltipHoverText,
+    seriesItemSelection
 }: PieChartDataSeriesHooks): ChartWidgetProps["data"] => {
     const [pieChartData, setPieChartData] = useState<LocalPieChartData[]>([]);
 
@@ -71,7 +73,15 @@ export const usePieChartDataSeries = ({
         tooltipHoverText
     ]);
 
-    const onClick = onClickAction ? (item: ObjectItem) => executeAction(onClickAction?.get(item)) : undefined;
+    const onClick = useCallback(
+        (item: ObjectItem) => {
+            executeAction(onClickAction?.get(item));
+            if (seriesItemSelection && seriesItemSelection.type === "Single") {
+                seriesItemSelection.setSelection(item);
+            }
+        },
+        [onClickAction, seriesItemSelection]
+    );
 
     return useMemo<ChartWidgetProps["data"]>(
         () => [

diff --git a/packages/pluggableWidgets/pie-doughnut-chart-web/src/package.xml b/packages/pluggableWidgets/pie-doughnut-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="PieChart" version="5.1.1" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="PieChart" version="5.2.0" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="PieChart.xml" />
         </widgetFiles>

diff --git a/packages/pluggableWidgets/pie-doughnut-chart-web/src/ui/PieChart.scss b/packages/pluggableWidgets/pie-doughnut-chart-web/src/ui/PieChart.scss
@@ -0,0 +1,7 @@
+.widget-pie-chart {
+    &.widget-pie-chart-selectable {
+        .pielayer .slice {
+            cursor: pointer;
+        }
+    }
+}
diff --git a/packages/pluggableWidgets/pie-doughnut-chart-web/typings/PieChartProps.d.ts b/packages/pluggableWidgets/pie-doughnut-chart-web/typings/PieChartProps.d.ts
@@ -4,7 +4,7 @@
  * @author Mendix Widgets Framework Team
  */
 import { ComponentType, CSSProperties, ReactNode } from "react";
-import { ListValue, ListActionValue, ListAttributeValue, ListExpressionValue } from "mendix";
+import { ListValue, ListActionValue, ListAttributeValue, ListExpressionValue, SelectionSingleValue } from "mendix";
 import { Big } from "big.js";
 
 export type SeriesSortOrderEnum = "asc" | "desc";
@@ -24,6 +24,7 @@ export interface PieChartContainerProps {
     seriesSortAttribute?: ListAttributeValue<string | boolean | Date | Big>;
     seriesSortOrder: SeriesSortOrderEnum;
     seriesColorAttribute?: ListExpressionValue<string>;
+    seriesItemSelection?: SelectionSingleValue;
     enableAdvancedOptions: boolean;
     showPlaygroundSlot: boolean;
     playground?: ReactNode;
@@ -57,6 +58,7 @@ export interface PieChartPreviewProps {
     seriesSortAttribute: string;
     seriesSortOrder: SeriesSortOrderEnum;
     seriesColorAttribute: string;
+    seriesItemSelection: "None" | "Single";
     enableAdvancedOptions: boolean;
     showPlaygroundSlot: boolean;
     playground: { widgetCount: number; renderer: ComponentType<{ children: ReactNode; caption?: string }> };