fix(charts): correctly apply React key with function accessors

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'
         })
       })
     );

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"

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} />

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.reactKey}
                 name={element.label ?? element.accessor}
                 strokeOpacity={element.opacity}
                 type="monotone"

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 : (

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

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}

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

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'
         }
       ]
     });

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]
   );