[WC-2440]: pie chart issue (#1362)

Author: samuelreichert

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,

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" />

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 fixed an issue on pie chart onClick when multiple points are added to the same item.
+
 ## [5.1.0] - 2024-10-28
 
 ### Changed

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",

packages/pluggableWidgets/pie-doughnut-chart-web/src/PieChart.xml

@@ -117,7 +117,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/pie-doughnut-chart-web/src/__tests__/PieChart.spec.tsx

@@ -82,6 +82,10 @@ describe("The PieChart widget", () => {
             seriesSortAttribute.get = jest
                 .fn()
                 .mockReturnValueOnce(new EditableValueBuilder<Big>().withValue(new Big(20)).build())
+                .mockReturnValueOnce(new EditableValueBuilder<Big>().withValue(new Big(15)).build())
+                .mockReturnValueOnce(new EditableValueBuilder<Big>().withValue(new Big(20)).build())
+                .mockReturnValueOnce(new EditableValueBuilder<Big>().withValue(new Big(15)).build())
+                .mockReturnValueOnce(new EditableValueBuilder<Big>().withValue(new Big(20)).build())
                 .mockReturnValueOnce(new EditableValueBuilder<Big>().withValue(new Big(15)).build());
 
             const pieChart = renderPieChart({ seriesSortAttribute });
@@ -97,6 +101,10 @@ describe("The PieChart widget", () => {
             seriesSortAttribute.get = jest
                 .fn()
                 .mockReturnValueOnce(new EditableValueBuilder<Big>().withValue(new Big(20)).build())
+                .mockReturnValueOnce(new EditableValueBuilder<Big>().withValue(new Big(15)).build())
+                .mockReturnValueOnce(new EditableValueBuilder<Big>().withValue(new Big(20)).build())
+                .mockReturnValueOnce(new EditableValueBuilder<Big>().withValue(new Big(15)).build())
+                .mockReturnValueOnce(new EditableValueBuilder<Big>().withValue(new Big(20)).build())
                 .mockReturnValueOnce(new EditableValueBuilder<Big>().withValue(new Big(15)).build());
 
             const pieChart = renderPieChart({ seriesSortAttribute, seriesSortOrder: "desc" });
@@ -127,10 +135,21 @@ function setupBasicAttributes(): Partial<PieChartContainerProps> {
     const seriesColorAttribute = listExp(() => "name");
     seriesColorAttribute.get = jest.fn().mockReturnValueOnce(dynamic("red")).mockReturnValueOnce(dynamic("blue"));
 
+    const seriesSortAttribute = new ListAttributeValueBuilder().build();
+    seriesSortAttribute.get = jest
+        .fn()
+        .mockReturnValueOnce(new EditableValueBuilder<Big>().withValue(new Big(15)).build())
+        .mockReturnValueOnce(new EditableValueBuilder<Big>().withValue(new Big(20)).build())
+        .mockReturnValueOnce(new EditableValueBuilder<Big>().withValue(new Big(15)).build())
+        .mockReturnValueOnce(new EditableValueBuilder<Big>().withValue(new Big(20)).build())
+        .mockReturnValueOnce(new EditableValueBuilder<Big>().withValue(new Big(15)).build())
+        .mockReturnValueOnce(new EditableValueBuilder<Big>().withValue(new Big(20)).build());
+
     return {
         seriesColorAttribute,
         seriesDataSource,
         seriesName,
-        seriesValueAttribute
+        seriesValueAttribute,
+        seriesSortAttribute
     };
 }

packages/pluggableWidgets/pie-doughnut-chart-web/src/hooks/data.ts

@@ -1,4 +1,4 @@
-import { ValueStatus } from "mendix";
+import { ObjectItem, ValueStatus } from "mendix";
 import { useEffect, useMemo, useState } from "react";
 import { ensure } from "@mendix/pluggable-widgets-tools";
 import Big from "big.js";
@@ -71,7 +71,7 @@ export const usePieChartDataSeries = ({
         tooltipHoverText
     ]);
 
-    const onClick = useMemo(() => (onClickAction ? () => executeAction(onClickAction) : undefined), [onClickAction]);
+    const onClick = onClickAction ? (item: ObjectItem) => executeAction(onClickAction?.get(item)) : undefined;
 
     return useMemo<ChartWidgetProps["data"]>(
         () => [
@@ -87,10 +87,40 @@ export const usePieChartDataSeries = ({
                 hoverinfo: pieChartData.some(({ itemHoverText }) => itemHoverText !== undefined && itemHoverText !== "")
                     ? "text"
                     : "none",
-                dataSourceItems: seriesDataSource.items ?? [],
+                dataSourceItems: sortDatasourceItems(
+                    seriesDataSource.items ?? [],
+                    seriesSortOrder,
+                    seriesSortAttribute
+                ),
                 onClick
             }
         ],
-        [customSeriesOptions, holeRadius, pieChartData, onClick, seriesDataSource.items]
+        [
+            customSeriesOptions,
+            holeRadius,
+            pieChartData,
+            onClick,
+            seriesDataSource.items,
+            seriesSortAttribute,
+            seriesSortOrder
+        ]
     );
 };
+
+function sortDatasourceItems(
+    items: ObjectItem[],
+    seriesSortOrder: "asc" | "desc",
+    seriesSortAttribute: PieChartContainerProps["seriesSortAttribute"]
+): ObjectItem[] {
+    const sortedItems = [...items].sort((firstItem, secondItem) => {
+        const first = seriesSortAttribute?.get(firstItem).value;
+        const second = seriesSortAttribute?.get(secondItem).value;
+        return compareAttrValuesAsc(first, second);
+    });
+
+    if (seriesSortOrder === "desc") {
+        sortedItems.reverse();
+    }
+
+    return sortedItems;
+}

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>

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 { ListValue, ListActionValue, ListAttributeValue, ListExpressionValue } from "mendix";
 import { Big } from "big.js";
 
 export type SeriesSortOrderEnum = "asc" | "desc";
@@ -34,7 +34,7 @@ export interface PieChartContainerProps {
     width: number;
     heightUnit: HeightUnitEnum;
     height: number;
-    onClickAction?: ActionValue;
+    onClickAction?: ListActionValue;
     enableThemeConfig: boolean;
     customLayout: string;
     customConfigurations: string;

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

@@ -29,10 +29,11 @@ export const ChartView = ({
     const handleChartClick = useCallback<NonNullable<PlotParams["onClick"]>>(
         event => {
             // As this is click handler, this event has single, "clicked" point, so we can destruct.
-            const [{ curveNumber, pointIndex, pointIndices, pointNumber }] = event.points;
+            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 itemIndex = getItemIndex(index, pointIndices);
             const item = dataSourceItems[itemIndex];
             onClick?.(item);
         },