From 0171b05eada445bf60df2ea77a7fd9f9fa8c62bb Mon Sep 17 00:00:00 2001 From: Seungwoo Hong Date: Mon, 16 Oct 2023 00:49:28 +0900 Subject: [PATCH 1/2] fix: #3073 --- src/chart/generateCategoricalChart.tsx | 26 ++++---------------------- src/util/Events.ts | 12 ++---------- test/chart/LineChart.spec.tsx | 11 +++++------ 3 files changed, 11 insertions(+), 38 deletions(-) diff --git a/src/chart/generateCategoricalChart.tsx b/src/chart/generateCategoricalChart.tsx index 77804a9cd2..e4eed67ad8 100644 --- a/src/chart/generateCategoricalChart.tsx +++ b/src/chart/generateCategoricalChart.tsx @@ -1091,8 +1091,6 @@ export const generateCategoricalChart = ({ return class CategoricalChartWrapper extends Component { 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,11 +1645,7 @@ export const generateCategoricalChart = ({ }; triggerSyncEvent(data: CategoricalChartState) { - const { syncId } = this.props; - - if (!_.isNil(syncId)) { - eventCenter.emit(SYNC_EVENT, syncId, this.uniqueChartId, data); - } + eventCenter.emit(SYNC_EVENT, this.props.syncId, data); } applySyncEvent(data: CategoricalChartState) { diff --git a/src/util/Events.ts b/src/util/Events.ts index 5460186567..74bafaccf4 100644 --- a/src/util/Events.ts +++ b/src/util/Events.ts @@ -2,19 +2,11 @@ import EventEmitter from 'eventemitter3'; type CategoricalChartState = import('../chart/generateCategoricalChart').CategoricalChartState; -interface EventCenter extends EventEmitter { - setMaxListeners?(maxListeners: number): void; - _maxListeners?: number; -} -const eventCenter: EventCenter = new EventEmitter(); - -if (eventCenter.setMaxListeners) { - eventCenter.setMaxListeners(10); -} +const eventCenter: EventEmitter = 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; } diff --git a/test/chart/LineChart.spec.tsx b/test/chart/LineChart.spec.tsx index 35e2cc44e9..5e92ebd172 100644 --- a/test/chart/LineChart.spec.tsx +++ b/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('', () => { describe(' - Pure Rendering', () => { const pureElements = [Line]; - const spies: Array> = []; + const spies: Array> = []; // CartesianAxis is what is actually render for XAxis and YAxis - let axisSpy: jest.SpyInstance; + let axisSpy: jest.SpyInstance; // spy on each pure element before each test, and restore the spy afterwards beforeAll(() => { @@ -475,9 +474,9 @@ describe(' - Pure Rendering', () => { describe(' - Pure Rendering with legend', () => { const pureElements = [Line]; - const spies: Array> = []; + const spies: Array> = []; // CartesianAxis is what is actually render for XAxis and YAxis - let axisSpy: jest.SpyInstance; + let axisSpy: jest.SpyInstance; // spy on each pure element before each test, and restore the spy afterwards beforeAll(() => { @@ -751,7 +750,7 @@ describe(' - 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 From 4226f32d64fdfb2c7b81ea7ce964c7ae05bda3b1 Mon Sep 17 00:00:00 2001 From: Seungwoo Hong Date: Mon, 16 Oct 2023 10:33:51 +0900 Subject: [PATCH 2/2] filtering for undefined syncId --- src/chart/generateCategoricalChart.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/chart/generateCategoricalChart.tsx b/src/chart/generateCategoricalChart.tsx index e4eed67ad8..225a49c3a9 100644 --- a/src/chart/generateCategoricalChart.tsx +++ b/src/chart/generateCategoricalChart.tsx @@ -1645,7 +1645,9 @@ export const generateCategoricalChart = ({ }; triggerSyncEvent(data: CategoricalChartState) { - eventCenter.emit(SYNC_EVENT, this.props.syncId, data); + if (this.props.syncId !== undefined) { + eventCenter.emit(SYNC_EVENT, this.props.syncId, data); + } } applySyncEvent(data: CategoricalChartState) {