From 6f5fc16df9c7c18bcc0adc1df9f441edc9be023e Mon Sep 17 00:00:00 2001
From: Lukas Harbarth <lukas.harbarth@sap.com>
Date: Fri, 3 May 2024 17:26:32 +0200
Subject: [PATCH 1/3] fix(charts): correctly apply React `key` with function
 `accessor`s

---
 .../src/components/BarChart/BarChart.cy.tsx   | 16 ++++++++--
 .../src/components/BarChart/BarChart.tsx      |  4 +--
 .../components/BulletChart/BulletChart.tsx    |  4 +--
 .../components/ColumnChart/ColumnChart.tsx    |  4 +--
 .../src/components/ComposedChart/index.tsx    |  4 +--
 .../src/components/LineChart/LineChart.tsx    |  4 +--
 .../src/components/RadarChart/RadarChart.tsx  |  2 +-
 .../components/ScatterChart/ScatterChart.tsx  | 11 +++++--
 .../hooks/usePrepareDimensionsAndMeasures.ts  | 30 ++++++++++++++-----
 9 files changed, 54 insertions(+), 25 deletions(-)

diff --git a/packages/charts/src/components/BarChart/BarChart.cy.tsx b/packages/charts/src/components/BarChart/BarChart.cy.tsx
index 828ddc184c3..518c8e710cd 100644
--- a/packages/charts/src/components/BarChart/BarChart.cy.tsx
+++ b/packages/charts/src/components/BarChart/BarChart.cy.tsx
@@ -8,14 +8,15 @@ const dimensions = [
     interval: 0
   }
 ];
+
 const measures = [
   {
-    accessor: 'users',
+    accessor: (data) => data.users,
     label: 'Users',
     formatter: (val: number) => val.toLocaleString('en')
   },
   {
-    accessor: 'sessions',
+    accessor: (data) => data.sessions,
     label: 'Active Sessions',
     formatter: (val) => `${val} sessions`,
     hideDataLabel: true
@@ -66,7 +67,16 @@ describe('BarChart', () => {
       'have.been.calledWith',
       Cypress.sinon.match({
         detail: Cypress.sinon.match({
-          dataKey: 'users'
+          value: 'Users'
+        })
+      })
+    );
+    cy.contains('Vol.').click();
+    cy.get('@onLegendClick').should(
+      'have.been.calledWith',
+      Cypress.sinon.match({
+        detail: Cypress.sinon.match({
+          dataKey: 'volume'
         })
       })
     );
diff --git a/packages/charts/src/components/BarChart/BarChart.tsx b/packages/charts/src/components/BarChart/BarChart.tsx
index 3dc4df94c12..d37c81fb042 100644
--- a/packages/charts/src/components/BarChart/BarChart.tsx
+++ b/packages/charts/src/components/BarChart/BarChart.tsx
@@ -297,7 +297,7 @@ const BarChart = forwardRef<HTMLDivElement, BarChartProps>((props, ref) => {
               <YAxis
                 interval={dimension?.interval ?? (isBigDataSet ? 'preserveStart' : 0)}
                 type="category"
-                key={dimension.accessor}
+                key={dimension.reactKey}
                 dataKey={dimension.accessor}
                 tick={<YAxisTicks config={dimension} />}
                 tickLine={index < 1}
@@ -316,7 +316,7 @@ const BarChart = forwardRef<HTMLDivElement, BarChartProps>((props, ref) => {
               <Bar
                 stackId={element.stackId}
                 fillOpacity={element.opacity}
-                key={element.accessor}
+                key={element.reactKey}
                 name={element.label ?? element.accessor}
                 strokeOpacity={element.opacity}
                 type="monotone"
diff --git a/packages/charts/src/components/BulletChart/BulletChart.tsx b/packages/charts/src/components/BulletChart/BulletChart.tsx
index 1953b98b99f..495f3926bed 100644
--- a/packages/charts/src/components/BulletChart/BulletChart.tsx
+++ b/packages/charts/src/components/BulletChart/BulletChart.tsx
@@ -319,7 +319,7 @@ const BulletChart = forwardRef<HTMLDivElement, BulletChartProps>((props, ref) =>
               axisProps.reversed = isRTL;
             }
 
-            return <AxisComponent key={dimension.accessor} {...axisProps} />;
+            return <AxisComponent key={dimension.reactKey} {...axisProps} />;
           })}
         {layout === 'horizontal' && (
           <YAxis
@@ -473,7 +473,7 @@ const BulletChart = forwardRef<HTMLDivElement, BulletChartProps>((props, ref) =>
 
           return (
             <Bar
-              key={element.accessor}
+              key={element.reactKey}
               name={element.label ?? element.accessor}
               label={
                 isBigDataSet ? null : <ChartDataLabel config={element} chartType={'bar'} position={labelPosition} />
diff --git a/packages/charts/src/components/ColumnChart/ColumnChart.tsx b/packages/charts/src/components/ColumnChart/ColumnChart.tsx
index 07aab1ba7c3..b03b0c81304 100644
--- a/packages/charts/src/components/ColumnChart/ColumnChart.tsx
+++ b/packages/charts/src/components/ColumnChart/ColumnChart.tsx
@@ -253,7 +253,7 @@ const ColumnChart = forwardRef<HTMLDivElement, ColumnChartProps>((props, ref) =>
           dimensions.map((dimension, index) => {
             return (
               <XAxis
-                key={dimension.accessor}
+                key={dimension.reactKey}
                 dataKey={dimension.accessor}
                 xAxisId={index}
                 interval={dimension?.interval ?? (isBigDataSet ? 'preserveStart' : 0)}
@@ -310,7 +310,7 @@ const ColumnChart = forwardRef<HTMLDivElement, ColumnChartProps>((props, ref) =>
                 yAxisId={chartConfig.secondYAxis?.dataKey === element.accessor ? 'right' : 'left'}
                 stackId={element.stackId}
                 fillOpacity={element.opacity}
-                key={element.accessor}
+                key={element.key}
                 name={element.label ?? element.accessor}
                 strokeOpacity={element.opacity}
                 type="monotone"
diff --git a/packages/charts/src/components/ComposedChart/index.tsx b/packages/charts/src/components/ComposedChart/index.tsx
index e27a309f529..03deb1d5998 100644
--- a/packages/charts/src/components/ComposedChart/index.tsx
+++ b/packages/charts/src/components/ComposedChart/index.tsx
@@ -326,7 +326,7 @@ const ComposedChart = forwardRef<HTMLDivElement, ComposedChartProps>((props, ref
             axisProps.reversed = isRTL;
           }
 
-          return <AxisComponent key={dimension.accessor} {...axisProps} />;
+          return <AxisComponent key={dimension.reactKey} {...axisProps} />;
         })}
         {layout === 'horizontal' && (
           <YAxis
@@ -487,7 +487,7 @@ const ComposedChart = forwardRef<HTMLDivElement, ComposedChartProps>((props, ref
           }
           return (
             <ChartElement
-              key={element.accessor}
+              key={element.reactKey}
               name={element.label ?? element.accessor}
               label={
                 element.type === 'bar' || isBigDataSet ? undefined : (
diff --git a/packages/charts/src/components/LineChart/LineChart.tsx b/packages/charts/src/components/LineChart/LineChart.tsx
index 57c7202ff22..2b1b46e5114 100644
--- a/packages/charts/src/components/LineChart/LineChart.tsx
+++ b/packages/charts/src/components/LineChart/LineChart.tsx
@@ -237,7 +237,7 @@ const LineChart = forwardRef<HTMLDivElement, LineChartProps>((props, ref) => {
         {dimensions.map((dimension, index) => {
           return (
             <XAxis
-              key={dimension.accessor}
+              key={dimension.reactKey}
               dataKey={dimension.accessor}
               xAxisId={index}
               interval={dimension?.interval ?? (isBigDataSet ? 'preserveStart' : 0)}
@@ -294,7 +294,7 @@ const LineChart = forwardRef<HTMLDivElement, LineChartProps>((props, ref) => {
             <Line
               dot={element.showDot ?? !isBigDataSet}
               yAxisId={chartConfig.secondYAxis?.dataKey === element.accessor ? 'right' : 'left'}
-              key={element.accessor}
+              key={element.reactKey}
               name={element.label ?? element.accessor}
               strokeOpacity={element.opacity}
               // eslint-disable-next-line @typescript-eslint/ban-ts-comment
diff --git a/packages/charts/src/components/RadarChart/RadarChart.tsx b/packages/charts/src/components/RadarChart/RadarChart.tsx
index f8bb279f5c4..80e48652707 100644
--- a/packages/charts/src/components/RadarChart/RadarChart.tsx
+++ b/packages/charts/src/components/RadarChart/RadarChart.tsx
@@ -187,7 +187,7 @@ const RadarChart = forwardRef<HTMLDivElement, RadarChartProps>((props, ref) => {
         {measures.map((element, index) => {
           return (
             <Radar
-              key={element.accessor}
+              key={element.reactKey}
               activeDot={{ onClick: onDataPointClickInternal } as any}
               name={element.label ?? element.accessor}
               dataKey={element.accessor}
diff --git a/packages/charts/src/components/ScatterChart/ScatterChart.tsx b/packages/charts/src/components/ScatterChart/ScatterChart.tsx
index 1c75d08b390..c14ecdaa6b3 100644
--- a/packages/charts/src/components/ScatterChart/ScatterChart.tsx
+++ b/packages/charts/src/components/ScatterChart/ScatterChart.tsx
@@ -237,7 +237,7 @@ const ScatterChart = forwardRef<HTMLDivElement, ScatterChartProps>((props, ref)
         {chartConfig.xAxisVisible && (
           <XAxis
             type={'number'}
-            key={xMeasure?.accessor}
+            key={typeof xMeasure?.accessor !== 'function' ? xMeasure?.accessor : xMeasure?.label}
             name={xMeasure?.label}
             dataKey={xMeasure?.accessor}
             xAxisId={0}
@@ -263,7 +263,7 @@ const ScatterChart = forwardRef<HTMLDivElement, ScatterChartProps>((props, ref)
           name={yMeasure?.label}
           axisLine={chartConfig.yAxisVisible}
           tickLine={tickLineConfig}
-          key={yMeasure?.accessor}
+          key={typeof yMeasure?.accessor !== 'function' ? yMeasure?.accessor : yMeasure?.label}
           dataKey={yMeasure?.accessor}
           tickFormatter={yMeasure?.formatter}
           interval={0}
@@ -272,7 +272,12 @@ const ScatterChart = forwardRef<HTMLDivElement, ScatterChartProps>((props, ref)
           margin={yMeasure?.label ? { left: 200 } : 0}
           orientation={isRTL === true ? 'right' : 'left'}
         />
-        <ZAxis name={zMeasure?.label} dataKey={zMeasure?.accessor} range={[0, 5000]} key={zMeasure?.accessor} />
+        <ZAxis
+          name={zMeasure?.label}
+          dataKey={zMeasure?.accessor}
+          range={[0, 5000]}
+          key={typeof zMeasure?.accessor !== 'function' ? zMeasure?.accessor : zMeasure?.label}
+        />
         {dataset?.map((dataSet, index) => {
           return (
             <Scatter
diff --git a/packages/charts/src/hooks/usePrepareDimensionsAndMeasures.ts b/packages/charts/src/hooks/usePrepareDimensionsAndMeasures.ts
index 7743d1b59f3..8280e5d35b3 100644
--- a/packages/charts/src/hooks/usePrepareDimensionsAndMeasures.ts
+++ b/packages/charts/src/hooks/usePrepareDimensionsAndMeasures.ts
@@ -1,5 +1,13 @@
 import { useMemo } from 'react';
 
+function getAccessorReactKey(accessorObj: Record<string, any>) {
+  let reactKey = accessorObj.accessor;
+  if (typeof accessorObj.accessor === 'function') {
+    reactKey = JSON.stringify(accessorObj);
+  }
+  return reactKey;
+}
+
 export const usePrepareDimensionsAndMeasures = <DimensionConfig = any, MeasureConfig = any>(
   rawDimensions,
   rawMeasures,
@@ -8,19 +16,25 @@ export const usePrepareDimensionsAndMeasures = <DimensionConfig = any, MeasureCo
 ) => {
   const dimensions: DimensionConfig = useMemo(
     () =>
-      rawDimensions.map((label) => ({
-        ...dimensionDefaults,
-        ...label
-      })),
+      rawDimensions.map((dimension) => {
+        return {
+          ...dimensionDefaults,
+          ...dimension,
+          reactKey: getAccessorReactKey(dimension)
+        };
+      }),
     [rawDimensions, dimensionDefaults]
   );
 
   const measures: MeasureConfig = useMemo(
     () =>
-      rawMeasures.map((value) => ({
-        ...measureDefaults,
-        ...value
-      })),
+      rawMeasures.map((measure) => {
+        return {
+          ...measureDefaults,
+          ...measure,
+          reactKey: getAccessorReactKey(measure)
+        };
+      }),
     [rawMeasures, measureDefaults]
   );
 

From a6c1922c28394a170f1ca256d7d703f38516cab9 Mon Sep 17 00:00:00 2001
From: Lukas Harbarth <lukas.harbarth@sap.com>
Date: Fri, 3 May 2024 17:28:24 +0200
Subject: [PATCH 2/3] Update ColumnChart.tsx

---
 packages/charts/src/components/ColumnChart/ColumnChart.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/charts/src/components/ColumnChart/ColumnChart.tsx b/packages/charts/src/components/ColumnChart/ColumnChart.tsx
index b03b0c81304..17590954d2b 100644
--- a/packages/charts/src/components/ColumnChart/ColumnChart.tsx
+++ b/packages/charts/src/components/ColumnChart/ColumnChart.tsx
@@ -310,7 +310,7 @@ const ColumnChart = forwardRef<HTMLDivElement, ColumnChartProps>((props, ref) =>
                 yAxisId={chartConfig.secondYAxis?.dataKey === element.accessor ? 'right' : 'left'}
                 stackId={element.stackId}
                 fillOpacity={element.opacity}
-                key={element.key}
+                key={element.reactKey}
                 name={element.label ?? element.accessor}
                 strokeOpacity={element.opacity}
                 type="monotone"

From f747d084d9ad409cb00f53042b10622b445800c8 Mon Sep 17 00:00:00 2001
From: Lukas Harbarth <lukas.harbarth@sap.com>
Date: Mon, 6 May 2024 08:53:43 +0200
Subject: [PATCH 3/3] update tests

---
 .../usePrepareDimensionsAndMeasures.cy.tsx     | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/packages/charts/src/hooks/usePrepareDimensionsAndMeasures.cy.tsx b/packages/charts/src/hooks/usePrepareDimensionsAndMeasures.cy.tsx
index 123dadca09e..cdca0ea3170 100644
--- a/packages/charts/src/hooks/usePrepareDimensionsAndMeasures.cy.tsx
+++ b/packages/charts/src/hooks/usePrepareDimensionsAndMeasures.cy.tsx
@@ -27,12 +27,14 @@ describe('useLabelFormatter', () => {
     cy.get('@result').should('have.been.calledWith', {
       dimensions: [
         {
-          accessor: 'a'
+          accessor: 'a',
+          reactKey: 'a'
         }
       ],
       measures: [
         {
-          accessor: 'b'
+          accessor: 'b',
+          reactKey: 'b'
         }
       ]
     });
@@ -52,13 +54,15 @@ describe('useLabelFormatter', () => {
       dimensions: [
         {
           accessor: 'a',
-          dimensionDefault: true
+          dimensionDefault: true,
+          reactKey: 'a'
         }
       ],
       measures: [
         {
           accessor: 'b',
-          measureDefault: true
+          measureDefault: true,
+          reactKey: 'b'
         }
       ]
     });
@@ -81,13 +85,15 @@ describe('useLabelFormatter', () => {
       dimensions: [
         {
           accessor: 'a',
-          dimensionDefault: true
+          dimensionDefault: true,
+          reactKey: 'a'
         }
       ],
       measures: [
         {
           accessor: 'b',
-          measureDefault: true
+          measureDefault: true,
+          reactKey: 'b'
         }
       ]
     });