feat: pie chart expose selection

mendix · Nov 6, 2024 · 5e2f196 · 5e2f196
1 parent cd8e8df
commit 5e2f196
Show file tree

Hide file tree

Showing 9 changed files with 35 additions and 10 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.0",
+    "version": "5.1.1",
     "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.0" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="Charts" version="5.1.1" 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]
 
+### Added
+
+-   We allow pie chart to exposed the selection.
+
 ## [5.1.0] - 2024-10-28
 
 ### Changed

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.0",
+    "version": "5.1.1",
     "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
@@ -38,7 +38,8 @@ export function PieChart(props: PieChartContainerProps): ReactElement | null {
         seriesSortOrder: props.seriesSortOrder,
         seriesValueAttribute: props.seriesValueAttribute,
         onClickAction: props.onClickAction,
-        tooltipHoverText: props.tooltipHoverText
+        tooltipHoverText: props.tooltipHoverText,
+        optionsSourceDatabaseItemSelection: props.optionsSourceDatabaseItemSelection
     });
 
     return (

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="optionsSourceDatabaseItemSelection" 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,5 +1,5 @@
-import { ValueStatus } from "mendix";
-import { useEffect, useMemo, useState } from "react";
+import { ObjectItem, SelectionSingleValue, ValueStatus } from "mendix";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { ensure } from "@mendix/pluggable-widgets-tools";
 import Big from "big.js";
 import { PieChartContainerProps } from "../../typings/PieChartProps";
@@ -18,6 +18,7 @@ type PieChartDataSeriesHooks = Pick<
     | "seriesSortOrder"
     | "seriesValueAttribute"
     | "tooltipHoverText"
+    | "optionsSourceDatabaseItemSelection"
 >;
 
 type LocalPieChartData = {
@@ -38,7 +39,8 @@ export const usePieChartDataSeries = ({
     seriesSortOrder,
     seriesValueAttribute,
     onClickAction,
-    tooltipHoverText
+    tooltipHoverText,
+    optionsSourceDatabaseItemSelection
 }: PieChartDataSeriesHooks): ChartWidgetProps["data"] => {
     const [pieChartData, setPieChartData] = useState<LocalPieChartData[]>([]);
 
@@ -71,7 +73,15 @@ export const usePieChartDataSeries = ({
         tooltipHoverText
     ]);
 
-    const onClick = useMemo(() => (onClickAction ? () => executeAction(onClickAction) : undefined), [onClickAction]);
+    const onClick: (obj: ObjectItem) => void = useCallback(
+        (item: ObjectItem) => {
+            executeAction(onClickAction);
+            if (optionsSourceDatabaseItemSelection && optionsSourceDatabaseItemSelection.type === "Single") {
+                (optionsSourceDatabaseItemSelection as SelectionSingleValue).setSelection(item);
+            }
+        },
+        [onClickAction]
+    );
 
     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.0" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="PieChart" version="5.1.1" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="PieChart.xml" />
         </widgetFiles>

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 { ActionValue, ListValue, ListAttributeValue, ListExpressionValue } from "mendix";
+import { ActionValue, ListValue, 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>;
+    optionsSourceDatabaseItemSelection?: SelectionSingleValue;
     enableAdvancedOptions: boolean;
     showPlaygroundSlot: boolean;
     playground?: ReactNode;
@@ -57,6 +58,7 @@ export interface PieChartPreviewProps {
     seriesSortAttribute: string;
     seriesSortOrder: SeriesSortOrderEnum;
     seriesColorAttribute: string;
+    optionsSourceDatabaseItemSelection: "None" | "Single";
     enableAdvancedOptions: boolean;
     showPlaygroundSlot: boolean;
     playground: { widgetCount: number; renderer: ComponentType<{ children: ReactNode; caption?: string }> };