From ca345030f15dedf9e7a504389c1e2dc5af30f1e3 Mon Sep 17 00:00:00 2001
From: Eric Laursen <ericjlaursen@gmail.com>
Date: Sat, 2 Dec 2023 08:30:40 -0500
Subject: [PATCH 1/2] Chore: adjust pie sector key value

---
 src/polar/Pie.tsx            |  4 ++--
 test/chart/PieChart.spec.tsx | 30 ++++++++++++++++++++++++------
 2 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/src/polar/Pie.tsx b/src/polar/Pie.tsx
index 948cd42612..e8aee134fb 100644
--- a/src/polar/Pie.tsx
+++ b/src/polar/Pie.tsx
@@ -479,6 +479,7 @@ export class Pie extends PureComponent<Props, State> {
   renderSectorsStatically(sectors: PieSectorDataItem[]) {
     const { activeShape, blendStroke, inactiveShape: inactiveShapeProp } = this.props;
     return sectors.map((entry, i) => {
+      if (entry?.startAngle === 0 && entry?.endAngle === 0 && sectors.length !== 1) return null;
       const isActive = this.isActiveIndex(i);
       const inactiveShape = inactiveShapeProp && this.hasActiveIndex() ? inactiveShapeProp : null;
       const sectorOptions = isActive ? activeShape : inactiveShape;
@@ -497,8 +498,7 @@ export class Pie extends PureComponent<Props, State> {
           tabIndex={-1}
           className="recharts-pie-sector"
           {...adaptEventsOfChild(this.props, entry, i)}
-          // eslint-disable-next-line react/no-array-index-key
-          key={`sector-${i}`}
+          key={`sector-${entry?.startAngle}-${entry?.endAngle}-${entry.midAngle}`}
         >
           <Shape option={sectorOptions} isActive={isActive} shapeType="sector" {...sectorProps} />
         </Layer>
diff --git a/test/chart/PieChart.spec.tsx b/test/chart/PieChart.spec.tsx
index 4ad3b1348a..aa0ad644e0 100644
--- a/test/chart/PieChart.spec.tsx
+++ b/test/chart/PieChart.spec.tsx
@@ -6,14 +6,32 @@ import { PieChart, Pie, Legend, Cell, Tooltip, Sector, SectorProps } from '../..
 
 describe('<PieChart />', () => {
   const data = [
-    { name: 'Group A', value: 400 },
-    { name: 'Group B', value: 300 },
-    { name: 'Group C', value: 300 },
-    { name: 'Group D', value: 200 },
-    { name: 'Group E', value: 278 },
-    { name: 'Group F', value: 189 },
+    { name: 'Group A', value: 400, v: 89 },
+    { name: 'Group B', value: 300, v: 100 },
+    { name: 'Group C', value: 200, v: 200 },
+    { name: 'Group D', value: 200, v: 20 },
+    { name: 'Group E', value: 278, v: 40 },
+    { name: 'Group F', value: 189, v: 60 },
   ];
 
+  test('Renders 1 sector with animation, simple PieChart', () => {
+    const { container } = render(
+      <PieChart width={800} height={400}>
+        <Pie
+          dataKey="value"
+          isAnimationActive
+          data={[data[0]]}
+          cx={200}
+          cy={200}
+          outerRadius={80}
+          fill="#ff7300"
+          label
+        />
+      </PieChart>,
+    );
+
+    expect(container.querySelectorAll('.recharts-pie-sector')).toHaveLength(1);
+  });
   test('Renders 6 sectors circles in simple PieChart', () => {
     const { container } = render(
       <PieChart width={800} height={400}>

From 360a697d1187913a6533456ecc747df4d21ed49e Mon Sep 17 00:00:00 2001
From: Eric Laursen <ericjlaursen@gmail.com>
Date: Sat, 2 Dec 2023 08:43:34 -0500
Subject: [PATCH 2/2] Chore: include animation in 6-sector pie test

---
 test/chart/PieChart.spec.tsx | 17 +++++------------
 1 file changed, 5 insertions(+), 12 deletions(-)

diff --git a/test/chart/PieChart.spec.tsx b/test/chart/PieChart.spec.tsx
index aa0ad644e0..adf046a516 100644
--- a/test/chart/PieChart.spec.tsx
+++ b/test/chart/PieChart.spec.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { fireEvent, render } from '@testing-library/react';
+import { fireEvent, render, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { vi, Mock } from 'vitest';
 import { PieChart, Pie, Legend, Cell, Tooltip, Sector, SectorProps } from '../../src';
@@ -35,20 +35,13 @@ describe('<PieChart />', () => {
   test('Renders 6 sectors circles in simple PieChart', () => {
     const { container } = render(
       <PieChart width={800} height={400}>
-        <Pie
-          dataKey="value"
-          isAnimationActive={false}
-          data={data}
-          cx={200}
-          cy={200}
-          outerRadius={80}
-          fill="#ff7300"
-          label
-        />
+        <Pie dataKey="value" isAnimationActive data={data} cx={200} cy={200} outerRadius={80} fill="#ff7300" label />
       </PieChart>,
     );
 
-    expect(container.querySelectorAll('.recharts-pie-sector')).toHaveLength(data.length);
+    waitFor(() => {
+      expect(container.querySelectorAll('.recharts-pie-sector')).toHaveLength(data.length);
+    });
   });
 
   test('Renders 6 sectors circles in simple PieChart with animation', () => {