support onClick for Donut/PieChart

Author: Lukas742

packages/charts/src/components/PieChart/PieChart.tsx

@@ -3,7 +3,7 @@
 import { enrichEventWithDetails, useStylesheet, useSyncRef } from '@ui5/webcomponents-react-base';
 import { clsx } from 'clsx';
 import type { CSSProperties } from 'react';
-import { cloneElement, forwardRef, isValidElement, useCallback, useMemo } from 'react';
+import { useRef, cloneElement, forwardRef, isValidElement, useCallback, useMemo } from 'react';
 import {
   Cell,
   Curve,
@@ -18,7 +18,7 @@ import {
 import { getValueByDataKey } from 'recharts/lib/util/ChartUtils.js';
 import { useLegendItemClick } from '../../hooks/useLegendItemClick.js';
 import { useOnClickInternal } from '../../hooks/useOnClickInternal.js';
-import type { IChartBaseProps } from '../../interfaces/IChartBaseProps.js';
+import type { ActivePayload, IChartBaseProps } from '../../interfaces/IChartBaseProps.js';
 import type { IChartDimension } from '../../interfaces/IChartDimension.js';
 import type { IChartMeasure } from '../../interfaces/IChartMeasure.js';
 import type { IPolarChartConfig } from '../../interfaces/IPolarChartConfig.js';
@@ -141,6 +141,16 @@ const PieChart = forwardRef<HTMLDivElement, PieChartProps>((props, ref) => {
     }),
     [props.measure],
   );
+  const activePayloadsRef = useRef<ActivePayload>({
+    ...measure,
+    // these properties must be either set in the component, or in the `useOnClickInternal` hook
+    dataKey: measure.accessor,
+    name: measure.accessor,
+    color: '',
+    stroke: '',
+    payload: {},
+    value: '',
+  });
 
   const dataLabel = (props) => {
     const hideDataLabel =
@@ -164,11 +174,12 @@ const PieChart = forwardRef<HTMLDivElement, PieChartProps>((props, ref) => {
   );
 
   const onItemLegendClick = useLegendItemClick(onLegendClick, () => measure.accessor);
-  const onClickInternal = useOnClickInternal(onClick);
+  const onClickInternal = useOnClickInternal(onClick, dataset, activePayloadsRef);
 
   const onDataPointClickInternal = useCallback(
     (payload, dataIndex, event) => {
       if (payload && payload && typeof onDataPointClick === 'function') {
+        //todo check values
         onDataPointClick(
           enrichEventWithDetails(event, {
             value: payload.value,
@@ -302,6 +313,10 @@ const PieChart = forwardRef<HTMLDivElement, PieChartProps>((props, ref) => {
           classNames.piechart,
         )}
       >
+        {/*todo: accessibility layer needs active shape?*/}
+        {/*todo: keyboard nav with active shape doesn't hide the default label of the Cell when active*/}
+        {/*todo: when clicked while activeShape is set, it takes a lot of time to rerender the component, leading to
+        strange behavior*/}
         <Pie
           onClick={onDataPointClickInternal}
           innerRadius={chartConfig.innerRadius}
@@ -315,17 +330,23 @@ const PieChart = forwardRef<HTMLDivElement, PieChartProps>((props, ref) => {
           labelLine={renderLabelLine}
           label={dataLabel}
           activeShape={chartConfig.activeSegment != null && renderActiveShape}
-          rootTabIndex={-1}
+          //todo: why do we need this?
+          // rootTabIndex={-1}
         >
           {centerLabel && <RechartsLabel position="center">{centerLabel}</RechartsLabel>}
           {dataset &&
-            dataset.map((data, index) => (
-              <Cell
-                key={index}
-                name={`${dimension.formatter(getValueByDataKey(data, dimension.accessor, ''))}`}
-                fill={measure.colors?.[index] ?? `var(--sapChart_OrderedColor_${(index % 12) + 1})`}
-              />
-            ))}
+            dataset.map((data, index) => {
+              const color = measure.colors?.[index] ?? `var(--sapChart_OrderedColor_${(index % 12) + 1})`;
+              activePayloadsRef.current.color = color;
+              activePayloadsRef.current.stroke = color;
+              return (
+                <Cell
+                  key={index}
+                  name={`${dimension.formatter(getValueByDataKey(data, dimension.accessor, ''))}`}
+                  fill={color}
+                />
+              );
+            })}
         </Pie>
         {tooltipConfig?.active !== false && (
           <Tooltip

packages/charts/src/hooks/useLabelFormatter.ts

@@ -1,10 +1,9 @@
 import { useCallback } from 'react';
-import type { TooltipProps } from 'recharts';
-import type { NameType, TooltipLabelFormatter, ValueType } from '../interfaces/index.js';
+import type { TooltipLabelFormatter } from '../interfaces/index.js';
 
 export const useLabelFormatter = (formatter: TooltipLabelFormatter) => {
   return useCallback<TooltipLabelFormatter>(
-    (label: TooltipProps<ValueType, NameType>['label'], payload) => {
+    (label: string | number, payload) => {
       if (typeof formatter === 'function') {
         return formatter(label, payload);
       }

packages/charts/src/hooks/useOnClickInternal.ts

@@ -6,19 +6,20 @@ import type { ActivePayload, IChartBaseProps } from '../interfaces/IChartBasePro
 export const useOnClickInternal = (
   onClick: IChartBaseProps['onClick'],
   dataset: IChartBaseProps['dataset'],
-  activePayloadsRef: MutableRefObject<ActivePayload[]>,
+  activePayloadsRef: MutableRefObject<ActivePayload[]> | MutableRefObject<ActivePayload>,
 ): CategoricalChartFunc => {
   //todo: deprecate payload & activePayloads?
   return useCallback(
     (nextState, event) => {
       if (typeof onClick === 'function') {
         const payload = nextState.activeIndex != null ? dataset?.[nextState.activeIndex] : undefined;
-        const activePayloads = activePayloadsRef.current.map((item) => ({
+        const activePayloads = (
+          Array.isArray(activePayloadsRef.current) ? activePayloadsRef.current : [activePayloadsRef.current]
+        ).map((item) => ({
           ...item,
           payload,
           value: item.dataKey ? payload?.[item.dataKey] : undefined,
         }));
-        console.log('click enriched');
         onClick(
           //todo: check ts-error
           // @ts-expect-error: check

packages/charts/src/interfaces/IChartBaseProps.ts

@@ -13,12 +13,13 @@ export interface ActivePayload {
   color: string;
   stroke: string;
   dataKey: string;
-  hide: boolean;
+  hide?: boolean;
   name: string;
-  fillOpacity: string | number;
-  strokeOpacity: string | number;
+  fillOpacity?: string | number;
+  strokeOpacity?: string | number;
   payload: Record<string, unknown>;
   value: number | string;
+  colors?: string[];
 }
 
 export interface IChartBaseProps<T = ICartesianChartConfig> extends Omit<CommonProps, 'onClick'> {