feat(charts): update recharts to v3

packages/charts/package.json

@@ -36,7 +36,7 @@
   "dependencies": {
     "clsx": "2.1.1",
     "react-content-loader": "7.1.1",
-    "recharts": "2.15.4"
+    "recharts": "3.1.2"
   },
   "peerDependencies": {
     "@ui5/webcomponents-react": "~2.13.0",

packages/charts/src/components/BarChart/BarChart.stories.tsx

@@ -86,7 +86,18 @@ export const WithDataLabels: Story = {
 
 export const WithFormatter: Story = {
   args: {
-    dimensions: [{ accessor: 'name', formatter: (element) => element.slice(0, 3) }],
+    dimensions: [
+      {
+        accessor: 'name',
+        formatter: (element) => {
+          //todo: remove once issue has been fixed (should never be number in this case)
+          if (typeof element === 'string') {
+            return element.slice(0, 3);
+          }
+          return element;
+        },
+      },
+    ],
     measures: [
       {
         accessor: 'users',

packages/charts/src/components/BarChart/BarChart.tsx

@@ -2,7 +2,7 @@
 
 import { enrichEventWithDetails, ThemingParameters, useIsRTL, useSyncRef } from '@ui5/webcomponents-react-base';
 import type { CSSProperties } from 'react';
-import { forwardRef, useCallback } from 'react';
+import { useRef, forwardRef, useCallback } from 'react';
 import {
   Bar,
   BarChart as BarChartLib,
@@ -17,7 +17,6 @@ import {
   YAxis,
 } from 'recharts';
 import type { YAxisProps } from 'recharts';
-import { getValueByDataKey } from 'recharts/lib/util/ChartUtils.js';
 import { useCancelAnimationFallback } from '../../hooks/useCancelAnimationFallback.js';
 import { useChartMargin } from '../../hooks/useChartMargin.js';
 import { useLabelFormatter } from '../../hooks/useLabelFormatter.js';
@@ -27,7 +26,7 @@ import { useObserveXAxisHeights } from '../../hooks/useObserveXAxisHeights.js';
 import { useOnClickInternal } from '../../hooks/useOnClickInternal.js';
 import { usePrepareDimensionsAndMeasures } from '../../hooks/usePrepareDimensionsAndMeasures.js';
 import { useTooltipFormatter } from '../../hooks/useTooltipFormatter.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 { ChartContainer } from '../../internal/ChartContainer.js';
@@ -48,12 +47,6 @@ const measureDefaults = {
   opacity: 1,
 };
 
-const valueAccessor =
-  (attribute) =>
-  ({ payload }) => {
-    return getValueByDataKey(payload, attribute);
-  };
-
 interface MeasureConfig extends IChartMeasure {
   /**
    * Bar Width
@@ -165,7 +158,6 @@ const BarChart = forwardRef<HTMLDivElement, BarChartProps>((props, ref) => {
     ...props.chartConfig,
   };
   const referenceLine = chartConfig.referenceLine;
-
   const { dimensions, measures } = usePrepareDimensionsAndMeasures(
     props.dimensions,
     props.measures,
@@ -187,7 +179,7 @@ const BarChart = forwardRef<HTMLDivElement, BarChartProps>((props, ref) => {
     : 0;
 
   const [componentRef, chartRef] = useSyncRef<any>(ref);
-
+  const activePayloadsRef = useRef<ActivePayload[]>(measures);
   const onItemLegendClick = useLegendItemClick(onLegendClick);
   const tooltipLabelFormatter = useLabelFormatter(primaryDimension?.formatter);
 
@@ -210,7 +202,7 @@ const BarChart = forwardRef<HTMLDivElement, BarChartProps>((props, ref) => {
     [onDataPointClick],
   );
 
-  const onClickInternal = useOnClickInternal(onClick);
+  const onClickInternal = useOnClickInternal(onClick, dataset, activePayloadsRef);
 
   const isBigDataSet = dataset?.length > 30;
   const primaryDimensionAccessor = primaryDimension?.accessor;
@@ -313,26 +305,36 @@ const BarChart = forwardRef<HTMLDivElement, BarChartProps>((props, ref) => {
           })}
         {isMounted &&
           measures.map((element, index) => {
+            const color = element.color ?? `var(--sapChart_OrderedColor_${(index % 12) + 1})`;
+            const dataKey = element.accessor;
+            const name = element.label ?? element.accessor;
+            const opacity = element.opacity ?? 1;
+            activePayloadsRef.current[index].color = color;
+            activePayloadsRef.current[index].stroke = color;
+            activePayloadsRef.current[index].dataKey = dataKey;
+            activePayloadsRef.current[index].hide = element.hide;
+            activePayloadsRef.current[index].name = name;
+            activePayloadsRef.current[index].fillOpacity = opacity;
+            activePayloadsRef.current[index].strokeOpacity = opacity;
             return (
               <Bar
+                key={element.reactKey}
+                fill={color}
+                stroke={color}
                 stackId={element.stackId}
+                name={name}
                 fillOpacity={element.opacity}
-                key={element.reactKey}
-                name={element.label ?? element.accessor}
                 strokeOpacity={element.opacity}
                 type="monotone"
-                dataKey={element.accessor}
-                fill={element.color ?? `var(--sapChart_OrderedColor_${(index % 12) + 1})`}
-                stroke={element.color ?? `var(--sapChart_OrderedColor_${(index % 12) + 1})`}
+                dataKey={dataKey}
                 barSize={element.width}
                 onClick={onDataPointClickInternal}
                 isAnimationActive={!noAnimation}
                 onAnimationStart={handleBarAnimationStart}
                 onAnimationEnd={handleBarAnimationEnd}
               >
                 <LabelList
-                  data={dataset}
-                  valueAccessor={valueAccessor(element.accessor)}
+                  dataKey={element.accessor}
                   content={<ChartDataLabel config={element} chartType="bar" position={'insideRight'} />}
                 />
                 {dataset.map((data, i) => {
@@ -364,7 +366,6 @@ const BarChart = forwardRef<HTMLDivElement, BarChartProps>((props, ref) => {
             label={referenceLine?.label}
           />
         )}
-        {/*ToDo: remove conditional rendering once `active` is working again (https://github.com/recharts/recharts/issues/2703)*/}
         {tooltipConfig?.active !== false && (
           <Tooltip
             cursor={tooltipFillOpacity}

packages/charts/src/components/BulletChart/BulletChart.cy.tsx

@@ -64,7 +64,7 @@ describe('BulletChart', () => {
         }),
       );
 
-    cy.contains('Users').click();
+    cy.get('[class="recharts-legend-wrapper"]').findByText('Users').realClick();
     cy.get('@onLegendClick').should(
       'have.been.calledWith',
       Cypress.sinon.match({

packages/charts/src/components/BulletChart/BulletChart.stories.tsx

@@ -52,7 +52,18 @@ export const Default: Story = {};
 export const WithCustomSize: Story = {
   args: {
     layout: 'vertical',
-    dimensions: [{ accessor: 'name', formatter: (element) => element.slice(0, 3) }],
+    dimensions: [
+      {
+        accessor: 'name',
+        formatter: (element) => {
+          //todo: remove once issue has been fixed (should never be number in this case)
+          if (typeof element === 'string') {
+            return element.slice(0, 3);
+          }
+          return element;
+        },
+      },
+    ],
     measures: [
       {
         accessor: 'users',

packages/charts/src/components/BulletChart/BulletChart.tsx

@@ -2,7 +2,7 @@
 
 import { enrichEventWithDetails, ThemingParameters, useIsRTL, useSyncRef } from '@ui5/webcomponents-react-base';
 import type { CSSProperties } from 'react';
-import { forwardRef, useCallback, useMemo } from 'react';
+import { useRef, forwardRef, useCallback, useMemo } from 'react';
 import {
   Bar,
   Brush,
@@ -24,7 +24,7 @@ import { useObserveXAxisHeights } from '../../hooks/useObserveXAxisHeights.js';
 import { useOnClickInternal } from '../../hooks/useOnClickInternal.js';
 import { usePrepareDimensionsAndMeasures } from '../../hooks/usePrepareDimensionsAndMeasures.js';
 import { useTooltipFormatter } from '../../hooks/useTooltipFormatter.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 { ChartContainer } from '../../internal/ChartContainer.js';
@@ -172,17 +172,22 @@ const BulletChart = forwardRef<HTMLDivElement, BulletChartProps>((props, ref) =>
     dimensionDefaults,
     measureDefaults,
   );
+  const activePayloadsRef = useRef<ActivePayload[]>(measures);
 
   const sortedMeasures = useMemo(() => {
-    return measures.sort((measure) => {
-      if (measure.type === 'comparison') {
+    return [...measures].sort((a, b) => {
+      if (a.type === 'primary' && b.type !== 'primary') {
+        return -1;
+      }
+      if (b.type === 'primary' && a.type !== 'primary') {
         return 1;
       }
-
-      if (measure.type === 'primary') {
+      if (a.type === 'comparison' && b.type !== 'comparison') {
+        return 1;
+      }
+      if (b.type === 'comparison' && a.type !== 'comparison') {
         return -1;
       }
-
       return 0;
     });
   }, [measures]);
@@ -239,7 +244,8 @@ const BulletChart = forwardRef<HTMLDivElement, BulletChartProps>((props, ref) =>
   );
 
   const onItemLegendClick = useLegendItemClick(onLegendClick);
-  const onClickInternal = useOnClickInternal(onClick);
+  //todo: implement activePayloadsRef
+  const onClickInternal = useOnClickInternal(onClick, dataset, activePayloadsRef);
 
   const isBigDataSet = dataset?.length > 30;
   const primaryDimensionAccessor = primaryDimension?.accessor;

packages/charts/src/components/ColumnChart/ColumnChart.tsx

@@ -2,7 +2,7 @@
 
 import { enrichEventWithDetails, ThemingParameters, useIsRTL, useSyncRef } from '@ui5/webcomponents-react-base';
 import type { CSSProperties } from 'react';
-import { forwardRef, useCallback } from 'react';
+import { useRef, forwardRef, useCallback } from 'react';
 import {
   Bar as Column,
   BarChart as ColumnChartLib,
@@ -17,7 +17,6 @@ import {
   YAxis,
 } from 'recharts';
 import type { YAxisProps } from 'recharts';
-import { getValueByDataKey } from 'recharts/lib/util/ChartUtils.js';
 import { useCancelAnimationFallback } from '../../hooks/useCancelAnimationFallback.js';
 import { useChartMargin } from '../../hooks/useChartMargin.js';
 import { useLabelFormatter } from '../../hooks/useLabelFormatter.js';
@@ -27,7 +26,7 @@ import { useObserveXAxisHeights } from '../../hooks/useObserveXAxisHeights.js';
 import { useOnClickInternal } from '../../hooks/useOnClickInternal.js';
 import { usePrepareDimensionsAndMeasures } from '../../hooks/usePrepareDimensionsAndMeasures.js';
 import { useTooltipFormatter } from '../../hooks/useTooltipFormatter.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 { ChartContainer } from '../../internal/ChartContainer.js';
@@ -116,12 +115,6 @@ const measureDefaults = {
   opacity: 1,
 };
 
-const valueAccessor =
-  (attribute) =>
-  ({ payload }) => {
-    return getValueByDataKey(payload, attribute);
-  };
-
 /**
  * A `ColumnChart` is a data visualization where each category is represented by a rectangle, with the height of the rectangle being proportional to the values being plotted.
  */
@@ -183,6 +176,7 @@ const ColumnChart = forwardRef<HTMLDivElement, ColumnChartProps>((props, ref) =>
   const tooltipLabelFormatter = useLabelFormatter(primaryDimension?.formatter);
 
   const [componentRef, chartRef] = useSyncRef<any>(ref);
+  const activePayloadsRef = useRef<ActivePayload[]>(measures);
 
   const dataKeys = measures.map(({ accessor }) => accessor);
   const colorSecondY = chartConfig.secondYAxis
@@ -211,7 +205,7 @@ const ColumnChart = forwardRef<HTMLDivElement, ColumnChartProps>((props, ref) =>
     [onDataPointClick],
   );
 
-  const onClickInternal = useOnClickInternal(onClick);
+  const onClickInternal = useOnClickInternal(onClick, dataset, activePayloadsRef);
 
   const isBigDataSet = dataset?.length > 30;
   const primaryDimensionAccessor = primaryDimension?.accessor;
@@ -307,27 +301,38 @@ const ColumnChart = forwardRef<HTMLDivElement, ColumnChartProps>((props, ref) =>
         )}
         {isMounted &&
           measures.map((element, index) => {
+            const color = element.color ?? `var(--sapChart_OrderedColor_${(index % 12) + 1})`;
+            const dataKey = element.accessor;
+            const name = element.label ?? element.accessor;
+            const opacity = element.opacity ?? 1;
+            activePayloadsRef.current[index].color = color;
+            activePayloadsRef.current[index].stroke = color;
+            activePayloadsRef.current[index].dataKey = dataKey;
+            activePayloadsRef.current[index].hide = element.hide;
+            activePayloadsRef.current[index].name = name;
+            activePayloadsRef.current[index].fillOpacity = opacity;
+            activePayloadsRef.current[index].strokeOpacity = opacity;
             return (
               <Column
-                yAxisId={chartConfig.secondYAxis?.dataKey === element.accessor ? 'right' : 'left'}
+                key={element.reactKey}
+                fill={color}
+                stroke={color}
                 stackId={element.stackId}
+                name={name}
                 fillOpacity={element.opacity}
-                key={element.reactKey}
-                name={element.label ?? element.accessor}
                 strokeOpacity={element.opacity}
                 type="monotone"
-                dataKey={element.accessor}
-                fill={element.color ?? `var(--sapChart_OrderedColor_${(index % 12) + 1})`}
-                stroke={element.color ?? `var(--sapChart_OrderedColor_${(index % 12) + 1})`}
+                dataKey={dataKey}
+                // todo: multiple `yAxisId`s cause the Cartesian Grid to break
+                yAxisId={chartConfig.secondYAxis?.dataKey === element.accessor ? 'right' : 'left'}
                 barSize={element.width}
                 onClick={onDataPointClickInternal}
                 isAnimationActive={!noAnimation}
                 onAnimationStart={handleBarAnimationStart}
                 onAnimationEnd={handleBarAnimationEnd}
               >
                 <LabelList
-                  data={dataset}
-                  valueAccessor={valueAccessor(element.accessor)}
+                  dataKey={element.accessor}
                   content={<ChartDataLabel config={element} chartType="column" position={'insideTop'} />}
                 />
                 {dataset.map((data, i) => {

packages/charts/src/components/ComposedChart/ComposedChart.cy.tsx

@@ -51,12 +51,13 @@ describe('ComposedChart', () => {
         measures={measures}
         onClick={onClick}
         onLegendClick={onLegendClick}
+        noAnimation
       />,
     );
 
     cy.findByText('January').click();
     cy.get('@onClick').should('have.been.called');
-    cy.get('[name="January"]').eq(0).click();
+    cy.get('[name="January"]').eq(0).realClick({ position: 'topLeft' });
     cy.get('@onClick')
       .should('have.been.calledTwice')
       .and(
@@ -68,7 +69,7 @@ describe('ComposedChart', () => {
         }),
       );
 
-    cy.contains('Users').click();
+    cy.get('[class="recharts-legend-wrapper"]').findByText('Users').realClick();
     cy.get('@onLegendClick').should(
       'have.been.calledWith',
       Cypress.sinon.match({