[@mantine/charts] fix: PieChart key error on same data names

mantinedev · Apr 12, 2024 · 0abfcb1 · 0abfcb1
1 parent afc9929
commit 0abfcb1
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 3 deletions.
diff --git a/packages/@mantine/charts/src/ChartTooltip/ChartTooltip.tsx b/packages/@mantine/charts/src/ChartTooltip/ChartTooltip.tsx
@@ -123,7 +123,7 @@ export const ChartTooltip = factory<ChartTooltipFactory>((_props, ref) => {
   const _label = label || scatterLabel;
 
   const items = filteredPayload.map((item) => (
-    <div key={item.name} data-type={type} {...getStyles('tooltipItem')}>
+    <div key={item?.key ?? item.name} data-type={type} {...getStyles('tooltipItem')}>
       <div {...getStyles('tooltipItemBody')}>
         <ColorSwatch
           color={getThemeColor(item.color, theme)}

diff --git a/packages/@mantine/charts/src/PieChart/PieChart.story.tsx b/packages/@mantine/charts/src/PieChart/PieChart.story.tsx
@@ -1,13 +1,15 @@
 import React from 'react';
-import { PieChart } from './PieChart';
+import { PieChart, PieChartCell } from './PieChart';
 
 export default { title: 'PieChart' };
 
-const data = [
+const data: PieChartCell[] = [
   { name: 'Group A', value: 400, color: 'indigo.6' },
   { name: 'Group B', value: 300, color: 'yellow.6' },
   { name: 'Group C', value: 300, color: 'teal.6' },
   { name: 'Group D', value: 200, color: 'pink.6' },
+  { key: 'e-1', name: 'Group E', value: 100, color: 'red.6' },
+  { key: 'e-2', name: 'Group E', value: 150, color: 'orange.6' },
 ];
 
 export function Usage() {
@@ -28,6 +30,14 @@ export function WithLabels() {
   );
 }
 
+export function WithTooltip() {
+  return (
+    <div style={{ padding: 40 }}>
+      <PieChart data={data} withLabels withTooltip size={200} />
+    </div>
+  );
+}
+
 export function Semicircle() {
   return (
     <div style={{ padding: 40 }}>

diff --git a/packages/@mantine/charts/src/PieChart/PieChart.tsx b/packages/@mantine/charts/src/PieChart/PieChart.tsx
@@ -29,6 +29,7 @@ import { ChartTooltip } from '../ChartTooltip/ChartTooltip';
 import classes from './PieChart.module.css';
 
 export interface PieChartCell {
+  key?: string | number;
   name: string;
   value: number;
   color: MantineColor;