From 9b497b78cf820f7af54f26cb10df855c4c54eaa3 Mon Sep 17 00:00:00 2001 From: Viktor Bersch Date: Tue, 19 May 2020 08:17:09 +0200 Subject: [PATCH 1/2] fix(Charts): fix onDataPointClick event not firing or firing for wrong segment on Donut/Piechart --- .../charts/src/components/PieChart/PieChart.tsx | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/charts/src/components/PieChart/PieChart.tsx b/packages/charts/src/components/PieChart/PieChart.tsx index 0b43f4548f4..00600421f04 100644 --- a/packages/charts/src/components/PieChart/PieChart.tsx +++ b/packages/charts/src/components/PieChart/PieChart.tsx @@ -116,15 +116,15 @@ const PieChart: FC = forwardRef((props: PieChartProps, ref: Ref measure.accessor); const onDataPointClickInternal = useCallback( - (payload, event) => { - if (payload && payload?.activePayload && onDataPointClick) { + (payload, dataIndex, event) => { + if (payload && payload && typeof onDataPointClick === 'function') { onDataPointClick( enrichEventWithDetails(event, { - value: payload.activePayload[0].value, - dataKey: payload.activePayload[0].dataKey, - name: payload.activePayload[0].payload.name, - payload: payload.activePayload[0].payload, - dataIndex: payload.activeTooltipIndex + value: payload.value, + dataKey: payload.tooltipPayload?.[0].dataKey, + name: payload.name, + payload: payload.payload, + dataIndex }) ); } @@ -145,11 +145,11 @@ const PieChart: FC = forwardRef((props: PieChartProps, ref: Ref Date: Tue, 19 May 2020 09:04:33 +0200 Subject: [PATCH 2/2] fix(Pie/DonutChart): respect measure formatter and custom data label --- .../src/components/PieChart/PieChart.tsx | 31 ++++++++++++------- 1 file changed, 20 insertions(+), 11 deletions(-) diff --git a/packages/charts/src/components/PieChart/PieChart.tsx b/packages/charts/src/components/PieChart/PieChart.tsx index 00600421f04..d3be5e59b52 100644 --- a/packages/charts/src/components/PieChart/PieChart.tsx +++ b/packages/charts/src/components/PieChart/PieChart.tsx @@ -3,8 +3,8 @@ import { enrichEventWithDetails } from '@ui5/webcomponents-react-base/lib/Utils' import { ChartContainer } from '@ui5/webcomponents-react-charts/lib/components/ChartContainer'; import { PieChartPlaceholder } from '@ui5/webcomponents-react-charts/lib/PieChartPlaceholder'; import { useLegendItemClick } from '@ui5/webcomponents-react-charts/lib/useLegendItemClick'; -import React, { CSSProperties, FC, forwardRef, Ref, useCallback, useMemo } from 'react'; -import { Cell, Label, Legend, Pie, PieChart as PieChartLib, Tooltip } from 'recharts'; +import React, { CSSProperties, FC, forwardRef, Ref, useCallback, useMemo, isValidElement, cloneElement } from 'react'; +import { Cell, Label, Legend, Pie, PieChart as PieChartLib, Tooltip, Text } from 'recharts'; import { getValueByDataKey } from 'recharts/lib/util/ChartUtils'; import { IChartBaseProps } from '../../interfaces/IChartBaseProps'; import { IChartMeasure } from '../../interfaces/IChartMeasure'; @@ -101,14 +101,22 @@ const PieChart: FC = forwardRef((props: PieChartProps, ref: Ref { - if (measure.hideDataLabel) return null; - return { - position: 'outside', - content: measure.DataLabel, - formatter: measure.formatter - }; - }, [measure]); + const dataLabel = useCallback( + (props) => { + if (measure.hideDataLabel) return null; + + if (isValidElement(measure.DataLabel)) { + return cloneElement(measure.DataLabel, { ...props, config: measure }); + } + + return ( + + {measure.formatter(props.value)} + + ); + }, + [measure] + ); const tooltipValueFormatter = useCallback((value) => measure.formatter(value), [measure.formatter]); const chartRef = useConsolidatedRef(ref); @@ -158,7 +166,8 @@ const PieChart: FC = forwardRef((props: PieChartProps, ref: Ref {centerLabel && } {dataset &&