Activeshape mouseleave fix (#4527)

recharts · May 14, 2024 · 10ede6f · 10ede6f
1 parent f260ab4
commit 10ede6f
Show file tree

Hide file tree

Showing 11 changed files with 239 additions and 214 deletions.
diff --git a/src/cartesian/Bar.tsx b/src/cartesian/Bar.tsx
@@ -245,7 +245,7 @@ function BarRectangles(props: BarRectanglesProps) {
   const baseProps = filterProps(rest, false);
   const { data, shape, dataKey, activeBar } = props;
 
-  const { index: activeIndex } = useTooltipContext();
+  const { index: activeIndex, active: isTooltipActive } = useTooltipContext();
   const {
     onMouseEnter: onMouseEnterFromProps,
     onClick: onItemClickFromProps,
@@ -264,7 +264,7 @@ function BarRectangles(props: BarRectanglesProps) {
   return (
     <>
       {data.map((entry, i) => {
-        const isActive = activeBar && i === activeIndex;
+        const isActive = isTooltipActive && activeBar && i === activeIndex;
         const option = isActive ? activeBar : shape;
         const barRectangleProps = {
           ...baseProps,

diff --git a/src/cartesian/Scatter.tsx b/src/cartesian/Scatter.tsx
@@ -141,7 +141,7 @@ function ScatterSymbols(props: ScatterSymbolsProps) {
   const { shape, activeShape } = allOtherScatterProps;
   const baseProps = filterProps(allOtherScatterProps, false);
 
-  const { index: activeIndex } = useTooltipContext();
+  const { index: activeIndex, active: isTooltipActive } = useTooltipContext();
   const {
     onMouseEnter: onMouseEnterFromProps,
     onClick: onItemClickFromProps,
@@ -156,7 +156,7 @@ function ScatterSymbols(props: ScatterSymbolsProps) {
   return (
     <>
       {points.map((entry, i) => {
-        const isActive = activeShape && activeIndex === i;
+        const isActive = isTooltipActive && activeShape && activeIndex === i;
         const option = isActive ? activeShape : shape;
         const symbolProps = { key: `symbol-${i}`, ...baseProps, ...entry };
 

diff --git a/src/context/tooltipContext.tsx b/src/context/tooltipContext.tsx
@@ -14,7 +14,7 @@ export const doNotDisplayTooltip: TooltipContextValue = {
   payload: [],
   coordinate: { x: 0, y: 0 },
   active: false,
-  index: 0,
+  index: -1,
 };
 
 const TooltipContext = createContext<TooltipContextValue>(doNotDisplayTooltip);

diff --git a/src/polar/Pie.tsx b/src/polar/Pie.tsx
@@ -198,7 +198,7 @@ type PieSectorsProps = {
 function PieSectors(props: PieSectorsProps) {
   const { sectors, sectorRefs, activeShape, blendStroke, inactiveShape: inactiveShapeProp, allOtherPieProps } = props;
 
-  const { index: activeIndex } = useTooltipContext();
+  const { index: activeIndex, active: isTooltipActive } = useTooltipContext();
   const {
     onMouseEnter: onMouseEnterFromProps,
     onClick: onItemClickFromProps,
@@ -212,7 +212,7 @@ function PieSectors(props: PieSectorsProps) {
 
   return sectors.map((entry, i) => {
     if (entry?.startAngle === 0 && entry?.endAngle === 0 && sectors.length !== 1) return null;
-    const isSectorActive = activeShape && i === activeIndex;
+    const isSectorActive = isTooltipActive && activeShape && i === activeIndex;
     const inactiveShape = activeIndex === -1 ? null : inactiveShapeProp;
     const sectorOptions = isSectorActive ? activeShape : inactiveShape;
     const sectorProps = {

diff --git a/src/polar/RadialBar.tsx b/src/polar/RadialBar.tsx
@@ -64,7 +64,7 @@ function RadialBarSectors(props: RadialBarSectorsProps) {
   const { shape, activeShape, cornerRadius, ...others } = allOtherRadialBarProps;
   const baseProps = filterProps(others, false);
 
-  const { index: activeIndex } = useTooltipContext();
+  const { index: activeIndex, active: isTooltipActive } = useTooltipContext();
   const {
     onMouseEnter: onMouseEnterFromProps,
     onClick: onItemClickFromProps,
@@ -79,7 +79,7 @@ function RadialBarSectors(props: RadialBarSectorsProps) {
   return (
     <>
       {sectors.map((entry, i) => {
-        const isActive = activeShape && i === activeIndex;
+        const isActive = isTooltipActive && activeShape && i === activeIndex;
         const onMouseEnter = (e: React.MouseEvent<SVGPathElement, MouseEvent>) => {
           // @ts-expect-error the types need a bit of attention
           onMouseEnterFromContext(entry, i, e);

diff --git a/test/chart/BarChart.spec.tsx b/test/chart/BarChart.spec.tsx
@@ -13,6 +13,17 @@ type DataType = {
   pv: number;
 };
 
+function assertActiveBarInteractions(container: HTMLElement) {
+  const chart = container.querySelector('.recharts-wrapper');
+  assertNotNull(chart);
+
+  fireEvent.mouseOver(chart, { clientX: 100, clientY: 100 });
+  expect(container.querySelectorAll('.recharts-active-bar')).toHaveLength(1);
+
+  fireEvent.mouseOut(chart);
+  expect(container.querySelectorAll('.recharts-active-bar')).toHaveLength(0);
+}
+
 describe('<BarChart />', () => {
   const data: DataType[] = [
     { name: 'food', uv: 400, pv: 2400 },
@@ -169,13 +180,7 @@ describe('<BarChart />', () => {
       </div>,
     );
 
-    const chart = container.querySelector('.recharts-wrapper');
-    assertNotNull(chart);
-    fireEvent.mouseOver(chart, { clientX: 100, clientY: 100 });
-
-    vi.advanceTimersByTime(100);
-    const bar = container.querySelectorAll('.recharts-active-bar');
-    expect(bar).toHaveLength(1);
+    assertActiveBarInteractions(container);
   });
 
   test('Renders customized active bar when activeBar set to be a ReactElement', () => {
@@ -189,13 +194,7 @@ describe('<BarChart />', () => {
       </div>,
     );
 
-    const chart = container.querySelector('.recharts-wrapper');
-    assertNotNull(chart);
-    fireEvent.mouseOver(chart, { clientX: 100, clientY: 100 });
-    vi.advanceTimersByTime(100);
-
-    const bar = container.querySelectorAll('.recharts-active-bar');
-    expect(bar).toHaveLength(1);
+    assertActiveBarInteractions(container);
   });
 
   test('Renders customized active bar when activeBar is set to be a truthy boolean', () => {
@@ -209,13 +208,7 @@ describe('<BarChart />', () => {
       </div>,
     );
 
-    const chart = container.querySelector('.recharts-wrapper');
-    assertNotNull(chart);
-    fireEvent.mouseOver(chart, { clientX: 100, clientY: 100 });
-
-    vi.advanceTimersByTime(100);
-    const bar = container.querySelectorAll('.recharts-active-bar');
-    expect(bar).toHaveLength(1);
+    assertActiveBarInteractions(container);
   });
 
   test('Does not render customized active bar when activeBar set to be a falsy boolean', () => {
@@ -248,13 +241,7 @@ describe('<BarChart />', () => {
       </div>,
     );
 
-    const chart = container.querySelector('.recharts-wrapper');
-    assertNotNull(chart);
-    fireEvent.mouseOver(chart, { clientX: 100, clientY: 100 });
-
-    vi.advanceTimersByTime(100);
-    const bar = container.querySelectorAll('.recharts-active-bar');
-    expect(bar).toHaveLength(1);
+    assertActiveBarInteractions(container);
   });
 
   test('Render empty when data is empty', () => {
@@ -266,7 +253,7 @@ describe('<BarChart />', () => {
     expect(container.querySelectorAll('path')).toHaveLength(0);
   });
 
-  test('Render customized shapem when shape is set to be a react element', () => {
+  test('Render customized shape when shape is set to be a react element', () => {
     const Shape = (props: any) => {
       const { x, y } = props;
 
@@ -280,7 +267,7 @@ describe('<BarChart />', () => {
     expect(container.querySelectorAll('.customized-shape')).toHaveLength(4);
   });
 
-  test('Render customized shapem when shape is set to be a function', () => {
+  test('Render customized shape when shape is set to be a function', () => {
     const renderShape = (props: BarProps): React.ReactElement => {
       const { x, y } = props;
 

diff --git a/test/chart/PieChart.spec.tsx b/test/chart/PieChart.spec.tsx
@@ -16,6 +16,21 @@ import {
 } from '../../src';
 import { testChartLayoutContext } from '../util/context';
 
+function assertActiveShapeInteractions(container: HTMLElement, selectors: string) {
+  const sectorNodes = container.querySelectorAll('.recharts-pie-sector');
+  expect(sectorNodes.length).toBeGreaterThanOrEqual(2);
+  const [sector1, sector2] = Array.from(sectorNodes);
+
+  fireEvent.mouseOver(sector1, { pageX: 200, pageY: 200 });
+  expect(container.querySelectorAll(selectors)).toHaveLength(1);
+
+  fireEvent.mouseOver(sector2, { pageX: 200, pageY: 200 });
+  expect(container.querySelectorAll(selectors)).toHaveLength(1);
+
+  fireEvent.mouseOut(sector2);
+  expect(container.querySelectorAll(selectors)).toHaveLength(0);
+}
+
 describe('<PieChart />', () => {
   const data = [
     { name: 'Group A', value: 400, v: 89 },
@@ -102,13 +117,9 @@ describe('<PieChart />', () => {
         <Tooltip />
       </PieChart>,
     );
-    const sectorNodes = container.querySelectorAll('.recharts-pie-sector');
-    const [sector] = Array.from(sectorNodes);
-    fireEvent.mouseOver(sector, { pageX: 200, pageY: 200 });
 
-    const activeSector = container.querySelectorAll('.recharts-active-shape');
-    expect(activeSector).toHaveLength(1);
-    expect(container.querySelectorAll('.customized-active-shape')).toHaveLength(1);
+    assertActiveShapeInteractions(container, '.recharts-active-shape');
+    assertActiveShapeInteractions(container, '.customized-active-shape');
   });
 
   test('With Tooltip render customized active sector when activeShape is set to be a function', () => {
@@ -129,13 +140,8 @@ describe('<PieChart />', () => {
       </PieChart>,
     );
 
-    const sectorNodes = container.querySelectorAll('.recharts-pie-sector');
-    const [sector] = Array.from(sectorNodes);
-    fireEvent.mouseOver(sector, { pageX: 200, pageY: 200 });
-
-    const activeSector = container.querySelectorAll('.recharts-active-shape');
-    expect(activeSector).toHaveLength(1);
-    expect(container.querySelectorAll('.customized-active-shape')).toHaveLength(1);
+    assertActiveShapeInteractions(container, '.recharts-active-shape');
+    assertActiveShapeInteractions(container, '.customized-active-shape');
   });
 
   test('With Tooltip render customized active sector when activeShape is set to be an object', () => {
@@ -156,13 +162,8 @@ describe('<PieChart />', () => {
       </PieChart>,
     );
 
-    const sectorNodes = container.querySelectorAll('.recharts-pie-sector');
-    const [sector] = Array.from(sectorNodes);
-    fireEvent.mouseOver(sector, { pageX: 100, pageY: 100 });
-
-    const activeSector = container.querySelectorAll('.recharts-active-shape');
-    expect(activeSector).toHaveLength(1);
-    expect(container.querySelectorAll('.customized-active-shape')).toHaveLength(1);
+    assertActiveShapeInteractions(container, '.recharts-active-shape');
+    assertActiveShapeInteractions(container, '.customized-active-shape');
   });
 
   test('With Tooltip render customized active sector when activeShape is set to be a truthy boolean', () => {
@@ -183,12 +184,7 @@ describe('<PieChart />', () => {
       </PieChart>,
     );
 
-    const sectorNodes = container.querySelectorAll('.recharts-pie-sector');
-    const [sector] = Array.from(sectorNodes);
-    fireEvent.mouseOver(sector, { pageX: 100, pageY: 100 });
-
-    const activeSector = container.querySelectorAll('.recharts-active-shape');
-    expect(activeSector).toHaveLength(1);
+    assertActiveShapeInteractions(container, '.recharts-active-shape');
   });
 
   test('Renders 6 sectors circles when add Cell to specified props of each slice', () => {

diff --git a/test/chart/RadialBarChart.spec.tsx b/test/chart/RadialBarChart.spec.tsx
@@ -14,6 +14,21 @@ import {
 } from '../../src';
 import { testChartLayoutContext } from '../util/context';
 
+function assertActiveShapeInteractions(container: HTMLElement) {
+  const sectorNodes = container.querySelectorAll('.recharts-sector');
+  expect(sectorNodes.length).toBeGreaterThanOrEqual(2);
+  const [sector1, sector2] = Array.from(sectorNodes);
+
+  fireEvent.mouseOver(sector1, { clientX: 200, clientY: 200 });
+  expect(container.querySelectorAll('.recharts-active-shape')).toHaveLength(1);
+
+  fireEvent.mouseOver(sector2, { clientX: 200, clientY: 200 });
+  expect(container.querySelectorAll('.recharts-active-shape')).toHaveLength(1);
+
+  fireEvent.mouseOut(sector2);
+  expect(container.querySelectorAll('.recharts-active-shape')).toHaveLength(0);
+}
+
 describe('<RadialBarChart />', () => {
   const data = [
     { name: '18-24', uv: 31.47, pv: 2400, fill: '#8884d8' },
@@ -256,12 +271,7 @@ describe('<RadialBarChart />', () => {
       </RadialBarChart>,
     );
 
-    const sectorNodes = container.querySelectorAll('.recharts-sector');
-    const [sector] = Array.from(sectorNodes);
-    fireEvent.mouseOver(sector, { clientX: 200, clientY: 200 });
-
-    const activeSector = container.querySelectorAll('.recharts-active-shape');
-    expect(activeSector).toHaveLength(1);
+    assertActiveShapeInteractions(container);
   });
 
   test('Renders customized active bar when activeBar set to be a ReactElement', () => {
@@ -281,12 +291,7 @@ describe('<RadialBarChart />', () => {
       </RadialBarChart>,
     );
 
-    const sectorNodes = container.querySelectorAll('.recharts-sector');
-    const [sector] = Array.from(sectorNodes);
-    fireEvent.mouseOver(sector, { clientX: 200, clientY: 200 });
-
-    const activeSector = container.querySelectorAll('.recharts-active-shape');
-    expect(activeSector).toHaveLength(1);
+    assertActiveShapeInteractions(container);
   });
 
   test('Renders customized active bar when activeBar is set to be a truthy boolean', () => {
@@ -306,12 +311,7 @@ describe('<RadialBarChart />', () => {
       </RadialBarChart>,
     );
 
-    const sectorNodes = container.querySelectorAll('.recharts-sector');
-    const [sector] = Array.from(sectorNodes);
-    fireEvent.mouseOver(sector, { clientX: 200, clientY: 200 });
-
-    const activeSector = container.querySelectorAll('.recharts-active-shape');
-    expect(activeSector).toHaveLength(1);
+    assertActiveShapeInteractions(container);
   });
 
   test('Does not render customized active bar when activeBar set to be a falsy boolean', () => {
@@ -356,13 +356,7 @@ describe('<RadialBarChart />', () => {
       </RadialBarChart>,
     );
 
-    const sectorNodes = container.querySelectorAll('.recharts-sector');
-
-    const [sector] = Array.from(sectorNodes);
-    fireEvent.mouseOver(sector, { clientX: 200, clientY: 200 });
-
-    const activeSector = container.querySelectorAll('.recharts-active-shape');
-    expect(activeSector).toHaveLength(1);
+    assertActiveShapeInteractions(container);
   });
 
   describe('RadialBarChart layout context', () => {