diff --git a/packages/pluggableWidgets/charts-web/package.json b/packages/pluggableWidgets/charts-web/package.json index e4ab4c329f..463c256e09 100644 --- 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 index 46fb92e8e6..53f8598821 100644 --- a/packages/pluggableWidgets/charts-web/src/package.xml +++ b/packages/pluggableWidgets/charts-web/src/package.xml @@ -1,6 +1,6 @@ - + diff --git a/packages/pluggableWidgets/pie-doughnut-chart-web/CHANGELOG.md b/packages/pluggableWidgets/pie-doughnut-chart-web/CHANGELOG.md index 7100231074..3d47b50d9d 100644 --- 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 fixed an issue on pie chart onClick when multiple points are added to the same item. + ## [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 index abbff87942..2fb7a059b1 100644 --- 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.xml b/packages/pluggableWidgets/pie-doughnut-chart-web/src/PieChart.xml index 292392e558..1cd92d2f82 100644 --- a/packages/pluggableWidgets/pie-doughnut-chart-web/src/PieChart.xml +++ b/packages/pluggableWidgets/pie-doughnut-chart-web/src/PieChart.xml @@ -117,7 +117,7 @@ - + On click action diff --git a/packages/pluggableWidgets/pie-doughnut-chart-web/src/__tests__/PieChart.spec.tsx b/packages/pluggableWidgets/pie-doughnut-chart-web/src/__tests__/PieChart.spec.tsx index 73c75b0464..345e681fa8 100644 --- a/packages/pluggableWidgets/pie-doughnut-chart-web/src/__tests__/PieChart.spec.tsx +++ b/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().withValue(new Big(20)).build()) + .mockReturnValueOnce(new EditableValueBuilder().withValue(new Big(15)).build()) + .mockReturnValueOnce(new EditableValueBuilder().withValue(new Big(20)).build()) + .mockReturnValueOnce(new EditableValueBuilder().withValue(new Big(15)).build()) + .mockReturnValueOnce(new EditableValueBuilder().withValue(new Big(20)).build()) .mockReturnValueOnce(new EditableValueBuilder().withValue(new Big(15)).build()); const pieChart = renderPieChart({ seriesSortAttribute }); @@ -97,6 +101,10 @@ describe("The PieChart widget", () => { seriesSortAttribute.get = jest .fn() .mockReturnValueOnce(new EditableValueBuilder().withValue(new Big(20)).build()) + .mockReturnValueOnce(new EditableValueBuilder().withValue(new Big(15)).build()) + .mockReturnValueOnce(new EditableValueBuilder().withValue(new Big(20)).build()) + .mockReturnValueOnce(new EditableValueBuilder().withValue(new Big(15)).build()) + .mockReturnValueOnce(new EditableValueBuilder().withValue(new Big(20)).build()) .mockReturnValueOnce(new EditableValueBuilder().withValue(new Big(15)).build()); const pieChart = renderPieChart({ seriesSortAttribute, seriesSortOrder: "desc" }); @@ -127,10 +135,21 @@ function setupBasicAttributes(): Partial { 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().withValue(new Big(15)).build()) + .mockReturnValueOnce(new EditableValueBuilder().withValue(new Big(20)).build()) + .mockReturnValueOnce(new EditableValueBuilder().withValue(new Big(15)).build()) + .mockReturnValueOnce(new EditableValueBuilder().withValue(new Big(20)).build()) + .mockReturnValueOnce(new EditableValueBuilder().withValue(new Big(15)).build()) + .mockReturnValueOnce(new EditableValueBuilder().withValue(new Big(20)).build()); + return { seriesColorAttribute, seriesDataSource, seriesName, - seriesValueAttribute + seriesValueAttribute, + seriesSortAttribute }; } diff --git a/packages/pluggableWidgets/pie-doughnut-chart-web/src/hooks/data.ts b/packages/pluggableWidgets/pie-doughnut-chart-web/src/hooks/data.ts index bea9f03cfe..5ef7320cde 100644 --- a/packages/pluggableWidgets/pie-doughnut-chart-web/src/hooks/data.ts +++ b/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( () => [ @@ -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; +} diff --git a/packages/pluggableWidgets/pie-doughnut-chart-web/src/package.xml b/packages/pluggableWidgets/pie-doughnut-chart-web/src/package.xml index dba0da8683..1756a0eba9 100644 --- a/packages/pluggableWidgets/pie-doughnut-chart-web/src/package.xml +++ b/packages/pluggableWidgets/pie-doughnut-chart-web/src/package.xml @@ -1,6 +1,6 @@ - + diff --git a/packages/pluggableWidgets/pie-doughnut-chart-web/typings/PieChartProps.d.ts b/packages/pluggableWidgets/pie-doughnut-chart-web/typings/PieChartProps.d.ts index 6122ca08b7..bd451b2979 100644 --- 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 { 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; diff --git a/packages/shared/charts/src/components/ChartView.tsx b/packages/shared/charts/src/components/ChartView.tsx index 1c9197a5cb..5958391e3a 100644 --- a/packages/shared/charts/src/components/ChartView.tsx +++ b/packages/shared/charts/src/components/ChartView.tsx @@ -29,10 +29,11 @@ export const ChartView = ({ const handleChartClick = useCallback>( 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); }, diff --git a/packages/shared/charts/src/components/types.ts b/packages/shared/charts/src/components/types.ts index ef5c2fcaaf..273e120ce9 100644 --- a/packages/shared/charts/src/components/types.ts +++ b/packages/shared/charts/src/components/types.ts @@ -5,6 +5,7 @@ declare module "plotly.js" { interface PlotDatum { /** This array appears on only when aggregation is used */ pointIndices?: number[]; + pointNumbers?: number[]; } } export type ExtraTraceProps = {