From 0abfcb1cbf3238d505ee813345c892e78d196393 Mon Sep 17 00:00:00 2001
From: mullwar <mullwar@proton.me>
Date: Fri, 12 Apr 2024 14:48:22 +0300
Subject: [PATCH] [@mantine/charts] fix: PieChart key error on same data names

---
 .../charts/src/ChartTooltip/ChartTooltip.tsx       |  2 +-
 .../charts/src/PieChart/PieChart.story.tsx         | 14 ++++++++++++--
 packages/@mantine/charts/src/PieChart/PieChart.tsx |  1 +
 3 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/packages/@mantine/charts/src/ChartTooltip/ChartTooltip.tsx b/packages/@mantine/charts/src/ChartTooltip/ChartTooltip.tsx
index 8c6fbf55a26..4686a224307 100644
--- 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
index 3066d52a7f3..ed1d9f8d268 100644
--- 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
index bb2dc7b824a..c5d34524620 100644
--- 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;