fix: #3073 (#3862)

<!--- Provide a general summary of your changes in the Title above -->

I have fixed the bug.

before


https://github.com/recharts/recharts/assets/34399997/6cae6da9-d761-4864-a3a5-442b0e6d3fa5


after


https://github.com/recharts/recharts/assets/34399997/6156aa9c-eeaf-4b95-bbe0-bd77c8c5dbde


<!--- Describe your changes in detail -->

## Related Issue

#3073

<!--- This project only accepts pull requests related to open issues -->
<!--- If suggesting a new feature or change, please discuss it in an
issue first -->
<!--- If fixing a bug, there should be an issue describing it with steps
to reproduce -->
<!--- Please link to the issue here: -->

## Motivation and Context

<!--- Why is this change required? What problem does it solve? -->

## How Has This Been Tested?

<!--- Please describe in detail how you tested your changes. -->
<!--- Include details of your testing environment, and the tests you ran
to -->
<!--- see how your change affects other areas of the code, etc. -->

## Screenshots (if appropriate):

## Types of changes

<!--- What types of changes does your code introduce? Put an `x` in all
the boxes that apply: -->

- [x] Bug fix (non-breaking change which fixes an issue)
- [ ] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing
functionality to change)

## Checklist:

<!--- Go over all the following points, and put an `x` in all the boxes
that apply. -->
<!--- If you're unsure about any of these, don't hesitate to ask. We're
here to help! -->

- [x] My code follows the code style of this project.
- [ ] My change requires a change to the documentation.
- [ ] I have updated the documentation accordingly.
- [ ] I have added tests to cover my changes.
- [ ] I have added a storybook story or extended an existing story to
show my changes
- [x] All new and existing tests passed.

src/chart/generateCategoricalChart.tsx

@@ -1091,8 +1091,6 @@ export const generateCategoricalChart = ({
   return class CategoricalChartWrapper extends Component<CategoricalChartProps, CategoricalChartState> {
     static displayName = chartName;
 
-    uniqueChartId: string;
-
     clipPathId: string;
 
     cancelDefer: CancelFunction | null;
@@ -1116,8 +1114,7 @@ export const generateCategoricalChart = ({
     constructor(props: CategoricalChartProps) {
       super(props);
 
-      this.uniqueChartId = _.isNil(props.id) ? uniqueId('recharts') : props.id;
-      this.clipPathId = `${this.uniqueChartId}-clip`;
+      this.clipPathId = `${props.id ?? uniqueId('recharts')}-clip`;
 
       if (props.throttleDelay) {
         this.triggeredAfterMouseMove = _.throttle(this.triggeredAfterMouseMove, props.throttleDelay);
@@ -1423,21 +1420,12 @@ export const generateCategoricalChart = ({
       };
     }
 
-    /* eslint-disable  no-underscore-dangle */
     addListener() {
       eventCenter.on(SYNC_EVENT, this.handleReceiveSyncEvent);
-
-      if (eventCenter.setMaxListeners && eventCenter._maxListeners) {
-        eventCenter.setMaxListeners(eventCenter._maxListeners + 1);
-      }
     }
 
     removeListener() {
       eventCenter.removeListener(SYNC_EVENT, this.handleReceiveSyncEvent);
-
-      if (eventCenter.setMaxListeners && eventCenter._maxListeners) {
-        eventCenter.setMaxListeners(eventCenter._maxListeners - 1);
-      }
     }
 
     clearDefer = () => {
@@ -1466,10 +1454,8 @@ export const generateCategoricalChart = ({
       }
     };
 
-    handleReceiveSyncEvent = (cId: number | string, chartId: string, data: CategoricalChartState) => {
-      const { syncId } = this.props;
-
-      if (syncId === cId && chartId !== this.uniqueChartId) {
+    handleReceiveSyncEvent = (cId: number | string, data: CategoricalChartState) => {
+      if (this.props.syncId === cId) {
         this.clearDefer();
         this.cancelDefer = deferer(this.applySyncEvent.bind(this, data));
       }
@@ -1659,10 +1645,8 @@ export const generateCategoricalChart = ({
     };
 
     triggerSyncEvent(data: CategoricalChartState) {
-      const { syncId } = this.props;
-
-      if (!_.isNil(syncId)) {
-        eventCenter.emit(SYNC_EVENT, syncId, this.uniqueChartId, data);
+      if (this.props.syncId !== undefined) {
+        eventCenter.emit(SYNC_EVENT, this.props.syncId, data);
       }
     }
 

src/util/Events.ts

@@ -2,19 +2,11 @@ import EventEmitter from 'eventemitter3';
 
 type CategoricalChartState = import('../chart/generateCategoricalChart').CategoricalChartState;
 
-interface EventCenter extends EventEmitter<EventTypes> {
-  setMaxListeners?(maxListeners: number): void;
-  _maxListeners?: number;
-}
-const eventCenter: EventCenter = new EventEmitter();
-
-if (eventCenter.setMaxListeners) {
-  eventCenter.setMaxListeners(10);
-}
+const eventCenter: EventEmitter<EventTypes> = new EventEmitter();
 
 export { eventCenter };
 export const SYNC_EVENT = 'recharts.syncMouseEvents';
 
 interface EventTypes {
-  [SYNC_EVENT](syncId: number | string, uniqueChartId: string, data: CategoricalChartState): void;
+  [SYNC_EVENT](syncId: number | string, data: CategoricalChartState): void;
 }

test/chart/LineChart.spec.tsx

@@ -1,6 +1,5 @@
 import React, { FC } from 'react';
 import { render, fireEvent, screen } from '@testing-library/react';
-import type { JSX } from '@babel/types';
 
 import { LineChart, Line, XAxis, YAxis, Tooltip, Brush, CartesianAxis, Legend } from '../../src';
 
@@ -393,9 +392,9 @@ describe('<LineChart />', () => {
 describe('<LineChart /> - Pure Rendering', () => {
   const pureElements = [Line];
 
-  const spies: Array<jest.SpyInstance<JSX.Element | null, []>> = [];
+  const spies: Array<jest.SpyInstance<React.ReactElement | null, []>> = [];
   // CartesianAxis is what is actually render for XAxis and YAxis
-  let axisSpy: jest.SpyInstance<JSX.Element | null, []>;
+  let axisSpy: jest.SpyInstance<React.ReactElement | null, []>;
 
   // spy on each pure element before each test, and restore the spy afterwards
   beforeAll(() => {
@@ -475,9 +474,9 @@ describe('<LineChart /> - Pure Rendering', () => {
 describe('<LineChart /> - Pure Rendering with legend', () => {
   const pureElements = [Line];
 
-  const spies: Array<jest.SpyInstance<JSX.Element | null, []>> = [];
+  const spies: Array<jest.SpyInstance<React.ReactElement | null, []>> = [];
   // CartesianAxis is what is actually render for XAxis and YAxis
-  let axisSpy: jest.SpyInstance<JSX.Element | null, []>;
+  let axisSpy: jest.SpyInstance<React.ReactElement | null, []>;
 
   // spy on each pure element before each test, and restore the spy afterwards
   beforeAll(() => {
@@ -751,7 +750,7 @@ describe('<LineChart /> - Rendering two line charts with syncId', () => {
     expect(container.querySelectorAll('.recharts-tooltip-cursor')).toHaveLength(2);
 
     // make sure tooltips display the correct values, synced by data value
-    expect(screen.queryByText('400')).toBeTruthy();
+    expect(screen.queryByText('300')).toBeTruthy();
     expect(screen.queryByText('550')).toBeTruthy();
 
     // Check the activeDots are highlighted