@octanejs/recharts 0.1.41 → 0.1.42

package/src/state/cartesianAxisSlice.ts

@@ -0,0 +1,291 @@
+// Adapted from recharts@3.9.2, commit b3451050c027a23957ffa50a2665c9119df21e47.
+import { createSlice, PayloadAction, prepareAutoBatched } from '@reduxjs/toolkit';
+import { castDraft, type Draft } from 'immer';
+import {
+	AxisDomain,
+	AxisInterval,
+	AxisTick,
+	DataKey,
+	EvaluatedAxisDomainType,
+	ScaleType,
+	TickProp,
+} from '../util/types';
+import { TickFormatter } from '../cartesian/CartesianAxis.tsrx';
+import type { AxisRange } from './selectors/axisSelectors';
+import { CustomScaleDefinition } from '../util/scale/CustomScaleDefinition';
+
+/**
+ * @inline
+ */
+export type AxisId = string | number;
+export const defaultAxisId: AxisId = 0;
+export type XAxisPadding = { left?: number; right?: number } | 'gap' | 'no-gap';
+export type YAxisPadding = { top?: number; bottom?: number } | 'gap' | 'no-gap';
+
+export type XAxisOrientation = 'top' | 'bottom';
+export type YAxisOrientation = 'left' | 'right';
+
+/**
+ * Properties shared in X, Y, and Z axes.
+ * User defined axis settings, coming from props.
+ */
+export type BaseCartesianAxis = {
+	id: AxisId;
+	scale:
+		| ScaleType
+		| CustomScaleDefinition
+		| CustomScaleDefinition<string>
+		| CustomScaleDefinition<number>
+		| CustomScaleDefinition<Date>;
+	/**
+	 * Before creating this object, evaluate the domain type based on the chart layout so that we have the 'auto' resolved.
+	 */
+	type: EvaluatedAxisDomainType;
+	/**
+	 * The axis functionality is severely restricted without a dataKey
+	 * - but there is still something left, and the prop is optional
+	 * so this can also be undefined even in real charts.
+	 * There are no defaults.
+	 */
+	dataKey: DataKey<any> | undefined;
+	unit: string | undefined;
+	name: string | undefined;
+	allowDuplicatedCategory: boolean;
+	allowDataOverflow: boolean;
+	reversed: boolean;
+	includeHidden: boolean;
+	domain: AxisDomain | undefined;
+};
+
+/**
+ * Controls how Recharts calculates "nice" tick values for numerical axes.
+ *
+ * - `'none'`: Recharts does not apply any tick-rounding algorithm; tick positions are
+ *   determined entirely by d3, evenly spaced but not rounded to human-friendly numbers.
+ *   There is no domain-extension logic applied in this mode.
+ *
+ * - `'auto'` *(default)*: Recharts automatically decides whether and how to apply tick
+ *   niceties based on the domain definition. When the domain contains an `'auto'` keyword,
+ *   Recharts uses the `'adaptive'` algorithm and may extend the domain slightly to
+ *   produce clean tick labels. Otherwise, it applies the same algorithm while keeping
+ *   ticks within the fixed domain. This mirrors the default behavior from Recharts v2.
+ *
+ * - `'adaptive'`: Always applies the space-efficient algorithm (`getAdaptiveStep`),
+ *   which fills the available range as densely as possible while still rounding steps
+ *   to reasonable numbers (e.g. 10, 20, 25). May produce less "round-looking" labels
+ *   than `'snap125'`, but wastes less space. The domain-extension logic still applies
+ *   when the domain contains an `'auto'` keyword.
+ *
+ * - `'snap125'`: Always applies the round-numbers algorithm (`getSnap125Step`), which
+ *   snaps step sizes to values from the set {1, 2, 2.5, 5} × 10ⁿ. Produces very
+ *   human-friendly labels (e.g. 0, 5, 10, 15, 20) but may leave blank space at the
+ *   edges of the chart. The domain-extension logic still applies when the domain
+ *   contains an `'auto'` keyword.
+ *
+ * @see {@link https://recharts.github.io/guide/axisTicks/}
+ * @inline
+ */
+export type NiceTicksAlgorithm = 'none' | 'auto' | 'adaptive' | 'snap125';
+
+export type TicksSettings = {
+	allowDecimals: boolean;
+	/**
+	 * We pass the suggested number of ticks to d3 https://d3js.org/d3-scale/linear#linear_ticks
+	 * This number is a suggestion. d3 tries to accommodate it, but it might return more or less ticks than requested:
+	 * > The specified count is only a hint; the scale may return more or fewer values depending on the domain.
+	 *
+	 * If undefined, then d3 decides the number of ticks on its own. The default in d3 is 10,
+	 * but it can vary based on the domain size and other factors.
+	 */
+	tickCount: number | undefined;
+	/**
+	 * Ticks can be any type when the axis is the type of category
+	 * Ticks must be numbers when the axis is the type of number
+	 */
+	ticks: ReadonlyArray<AxisTick> | undefined;
+	tick: TickProp<any>;
+	/**
+	 * Controls how Recharts calculates "nice" tick values for this axis.
+	 * See {@link NiceTicksAlgorithm} for a full description of each option.
+	 *
+	 * @defaultValue 'auto'
+	 */
+	niceTicks: NiceTicksAlgorithm;
+};
+
+/**
+ * These are the external props, visible for users as they set them using our public API.
+ * There is all sorts of internal computed things based on these, but they will come through selectors.
+ *
+ * Properties shared between X and Y axes
+ */
+export type CartesianAxisSettings = BaseCartesianAxis &
+	TicksSettings & {
+		interval: AxisInterval;
+		mirror: boolean;
+		minTickGap: number;
+		angle: number;
+		hide: boolean;
+		tickFormatter: TickFormatter | undefined;
+	};
+
+export type XAxisSettings = CartesianAxisSettings & {
+	padding: XAxisPadding;
+	height: number;
+	orientation: XAxisOrientation;
+};
+
+export type YAxisWidth = number | 'auto';
+
+export type YAxisSettings = CartesianAxisSettings & {
+	padding: YAxisPadding;
+	width: YAxisWidth;
+	orientation: YAxisOrientation;
+	widthHistory?: number[];
+};
+
+/**
+ * Z axis is special because it's never displayed. It controls the size of Scatter dots,
+ * but it never displays ticks anywhere.
+ */
+export type ZAxisSettings = BaseCartesianAxis & {
+	range: AxisRange;
+};
+
+type AxisMapState = {
+	xAxis: Record<AxisId, XAxisSettings>;
+	yAxis: Record<AxisId, YAxisSettings>;
+	zAxis: Record<AxisId, ZAxisSettings>;
+};
+
+const initialState: AxisMapState = {
+	xAxis: {},
+	yAxis: {},
+	zAxis: {},
+};
+
+/**
+ * This is the slice where each individual Axis element pushes its own configuration.
+ * Prefer to use this one instead of axisSlice.
+ */
+// Registered props may contain native DOM refs. The private callback boundary
+// avoids RTK's prepared-action validator recursively comparing raw DOM-backed
+// settings with Draft<Settings>. Every access still uses the exact known draft;
+// the exported reducer state and action payloads remain fully typed.
+const cartesianAxisSlice = createSlice({
+	name: 'cartesianAxis',
+	initialState,
+	reducers: {
+		addXAxis: {
+			reducer(state: unknown, action: PayloadAction<XAxisSettings>) {
+				(state as Draft<AxisMapState>).xAxis[action.payload.id] = castDraft(action.payload);
+			},
+			prepare: prepareAutoBatched<XAxisSettings>(),
+		},
+		replaceXAxis: {
+			reducer(state: unknown, action: PayloadAction<{ prev: XAxisSettings; next: XAxisSettings }>) {
+				const { prev, next } = action.payload;
+				if ((state as Draft<AxisMapState>).xAxis[prev.id] !== undefined) {
+					if (prev.id !== next.id) {
+						delete (state as Draft<AxisMapState>).xAxis[prev.id];
+					}
+					(state as Draft<AxisMapState>).xAxis[next.id] = castDraft(next);
+				}
+			},
+			prepare: prepareAutoBatched<{ prev: XAxisSettings; next: XAxisSettings }>(),
+		},
+		removeXAxis: {
+			reducer(state: unknown, action: PayloadAction<XAxisSettings>) {
+				delete (state as Draft<AxisMapState>).xAxis[action.payload.id];
+			},
+			prepare: prepareAutoBatched<XAxisSettings>(),
+		},
+		addYAxis: {
+			reducer(state: unknown, action: PayloadAction<YAxisSettings>) {
+				(state as Draft<AxisMapState>).yAxis[action.payload.id] = castDraft(action.payload);
+			},
+			prepare: prepareAutoBatched<YAxisSettings>(),
+		},
+		replaceYAxis: {
+			reducer(state: unknown, action: PayloadAction<{ prev: YAxisSettings; next: YAxisSettings }>) {
+				const { prev, next } = action.payload;
+				if ((state as Draft<AxisMapState>).yAxis[prev.id] !== undefined) {
+					if (prev.id !== next.id) {
+						delete (state as Draft<AxisMapState>).yAxis[prev.id];
+					}
+					(state as Draft<AxisMapState>).yAxis[next.id] = castDraft(next);
+				}
+			},
+			prepare: prepareAutoBatched<{ prev: YAxisSettings; next: YAxisSettings }>(),
+		},
+		removeYAxis: {
+			reducer(state: unknown, action: PayloadAction<YAxisSettings>) {
+				delete (state as Draft<AxisMapState>).yAxis[action.payload.id];
+			},
+			prepare: prepareAutoBatched<YAxisSettings>(),
+		},
+		addZAxis: {
+			reducer(state: unknown, action: PayloadAction<ZAxisSettings>) {
+				(state as Draft<AxisMapState>).zAxis[action.payload.id] = castDraft(action.payload);
+			},
+			prepare: prepareAutoBatched<ZAxisSettings>(),
+		},
+		replaceZAxis: {
+			reducer(state: unknown, action: PayloadAction<{ prev: ZAxisSettings; next: ZAxisSettings }>) {
+				const { prev, next } = action.payload;
+				if ((state as Draft<AxisMapState>).zAxis[prev.id] !== undefined) {
+					if (prev.id !== next.id) {
+						delete (state as Draft<AxisMapState>).zAxis[prev.id];
+					}
+					(state as Draft<AxisMapState>).zAxis[next.id] = castDraft(next);
+				}
+			},
+			prepare: prepareAutoBatched<{ prev: ZAxisSettings; next: ZAxisSettings }>(),
+		},
+		removeZAxis: {
+			reducer(state: unknown, action: PayloadAction<ZAxisSettings>) {
+				delete (state as Draft<AxisMapState>).zAxis[action.payload.id];
+			},
+			prepare: prepareAutoBatched<ZAxisSettings>(),
+		},
+		updateYAxisWidth(state: unknown, action: PayloadAction<{ id: AxisId; width: number }>) {
+			const { id, width } = action.payload;
+			const axis = (state as Draft<AxisMapState>).yAxis[id];
+			if (axis) {
+				const history = axis.widthHistory || [];
+				// An oscillation is detected when the new width is the same as the width before the last one.
+				// This is a simple A -> B -> A pattern. If the next width is B, and the difference is less than 1 pixel, we ignore it.
+				if (
+					history.length === 3 &&
+					history[0] === history[2] &&
+					width === history[1] &&
+					width !== axis.width &&
+					Math.abs(width - (history[0] ?? 0)) <= 1
+				) {
+					return;
+				}
+				const newHistory = [...history, width].slice(-3);
+				(state as Draft<AxisMapState>).yAxis[id] = {
+					...axis,
+					width,
+					widthHistory: newHistory,
+				};
+			}
+		},
+	},
+});
+
+export const {
+	addXAxis,
+	replaceXAxis,
+	removeXAxis,
+	addYAxis,
+	replaceYAxis,
+	removeYAxis,
+	addZAxis,
+	replaceZAxis,
+	removeZAxis,
+	updateYAxisWidth,
+} = cartesianAxisSlice.actions;
+
+export const cartesianAxisReducer = cartesianAxisSlice.reducer;

package/src/state/chartDataSlice.ts

@@ -0,0 +1,87 @@
+// Adapted from recharts@3.9.2, commit b3451050c027a23957ffa50a2665c9119df21e47.
+import { PayloadAction, createSlice } from '@reduxjs/toolkit';
+import { castDraft } from 'immer';
+import { BrushStartEndIndex } from '../context/brushUpdateContext';
+
+/**
+ * This is the data that's coming through main chart `data` prop
+ * Recharts is very flexible in what it accepts so the type is very flexible too.
+ * This will typically be an object, and various components will provide various `dataKey`
+ * that dictates how to pull data from that object.
+ *
+ * TL;DR: before dataKey
+ *
+ * @inline
+ */
+export type ChartData<DataPointType = unknown> = ReadonlyArray<DataPointType>;
+
+/**
+ * So this is the same unknown type as ChartData but this is after the dataKey has been applied.
+ * We still don't know what the type is - that depends on what exactly it was before the dataKey application,
+ * and the dataKey can return whatever anyway - but let's keep it separate as a form of documentation.
+ *
+ * TL;DR: ChartData after dataKey.
+ */
+export type AppliedChartData = ReadonlyArray<{ value: unknown }>;
+
+export type ChartDataState = {
+	chartData: ChartData | undefined;
+	/**
+	 * store a copy of chart data after it has been processed by each chart's specific
+	 * compute functions. TODO: add other charts besides Sankey
+	 */
+	computedData: unknown | undefined;
+	/**
+	 * Using Brush, users can choose where they want to zoom in.
+	 * This is zero-based index of the starting data point.
+	 */
+	dataStartIndex: number;
+	/**
+	 * Using Brush, users can choose where they want to zoom in.
+	 * This is zero-based index of the last data point.
+	 */
+	dataEndIndex: number;
+};
+
+export const initialChartDataState: ChartDataState = {
+	chartData: undefined,
+	computedData: undefined,
+	dataStartIndex: 0,
+	dataEndIndex: 0,
+};
+
+type BrushStartEndIndexActionPayload = Partial<BrushStartEndIndex>;
+
+const chartDataSlice = createSlice({
+	name: 'chartData',
+	initialState: initialChartDataState,
+	reducers: {
+		setChartData(state, action: PayloadAction<ChartData | undefined>) {
+			state.chartData = castDraft(action.payload);
+			if (action.payload == null) {
+				state.dataStartIndex = 0;
+				state.dataEndIndex = 0;
+				return;
+			}
+			if (action.payload.length > 0 && state.dataEndIndex !== action.payload.length - 1) {
+				state.dataEndIndex = action.payload.length - 1;
+			}
+		},
+		setComputedData(state, action: PayloadAction<unknown | undefined>) {
+			state.computedData = action.payload;
+		},
+		setDataStartEndIndexes(state, action: PayloadAction<BrushStartEndIndexActionPayload>) {
+			const { startIndex, endIndex } = action.payload;
+			if (startIndex != null) {
+				state.dataStartIndex = startIndex;
+			}
+			if (endIndex != null) {
+				state.dataEndIndex = endIndex;
+			}
+		},
+	},
+});
+
+export const { setChartData, setDataStartEndIndexes, setComputedData } = chartDataSlice.actions;
+
+export const chartDataReducer = chartDataSlice.reducer;

package/src/state/errorBarSlice.ts

@@ -0,0 +1,78 @@
+// Adapted from recharts@3.9.2, commit b3451050c027a23957ffa50a2665c9119df21e47.
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { ErrorBarDirection } from '../cartesian/ErrorBar.tsrx';
+import { DataKey } from '../util/types';
+import { GraphicalItemId } from './graphicalItemsSlice';
+
+/**
+ * ErrorBars have lot more settings but all the others are scoped to the component itself.
+ * Only some of them required to be reported to the global store because XAxis and YAxis need to know
+ * if the error bar is contributing to extending the axis domain.
+ */
+export type ErrorBarsSettings = {
+	/**
+	 * The direction is only used in Scatter chart, and decided based on ChartLayout in other charts.
+	 */
+	direction: ErrorBarDirection;
+	/**
+	 * The dataKey decides which property from the data will each individual ErrorBar use.
+	 * If it so happens that the ErrorBar data are bigger than the axis domain,
+	 * the error bar data will stretch the axis domain.
+	 */
+	dataKey: DataKey<any>;
+	/*
+	 * ErrorBar props say that it has explicit xAxis and yAxis props,
+	 * but actually it always inherits the xAxis and yAxis defined on the parent graphical item.
+	 */
+};
+
+export type ErrorBarsState = Record<GraphicalItemId, ReadonlyArray<ErrorBarsSettings>>;
+
+const initialState: ErrorBarsState = {};
+
+const errorBarSlice = createSlice({
+	name: 'errorBars',
+	initialState,
+	reducers: {
+		addErrorBar: (
+			state,
+			action: PayloadAction<{ itemId: GraphicalItemId; errorBar: ErrorBarsSettings }>,
+		) => {
+			const { itemId, errorBar } = action.payload;
+			if (!state[itemId]) {
+				state[itemId] = [];
+			}
+			state[itemId].push(errorBar);
+		},
+		replaceErrorBar: (
+			state,
+			action: PayloadAction<{
+				itemId: GraphicalItemId;
+				prev: ErrorBarsSettings;
+				next: ErrorBarsSettings;
+			}>,
+		) => {
+			const { itemId, prev, next } = action.payload;
+			if (state[itemId]) {
+				state[itemId] = state[itemId].map((e) =>
+					e.dataKey === prev.dataKey && e.direction === prev.direction ? next : e,
+				);
+			}
+		},
+		removeErrorBar: (
+			state,
+			action: PayloadAction<{ itemId: GraphicalItemId; errorBar: ErrorBarsSettings }>,
+		) => {
+			const { itemId, errorBar } = action.payload;
+			if (state[itemId]) {
+				state[itemId] = state[itemId].filter(
+					(e) => e.dataKey !== errorBar.dataKey || e.direction !== errorBar.direction,
+				);
+			}
+		},
+	},
+});
+
+export const { addErrorBar, replaceErrorBar, removeErrorBar } = errorBarSlice.actions;
+
+export const errorBarReducer = errorBarSlice.reducer;

package/src/state/eventSettingsSlice.ts

@@ -0,0 +1,30 @@
+// Adapted from recharts@3.9.2, commit b3451050c027a23957ffa50a2665c9119df21e47.
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { castDraft } from 'immer';
+import { EventThrottlingProps } from '../util/types';
+
+export type EventSettingsState = Required<EventThrottlingProps>;
+
+export const initialEventSettingsState: EventSettingsState = {
+	throttleDelay: 'raf',
+	throttledEvents: ['mousemove', 'touchmove', 'pointermove', 'scroll', 'wheel'],
+};
+
+const eventSettingsSlice = createSlice({
+	name: 'eventSettings',
+	initialState: initialEventSettingsState,
+	reducers: {
+		setEventSettings: (state, action: PayloadAction<EventThrottlingProps>) => {
+			if (action.payload.throttleDelay != null) {
+				state.throttleDelay = action.payload.throttleDelay;
+			}
+			if (action.payload.throttledEvents != null) {
+				state.throttledEvents = castDraft(action.payload.throttledEvents);
+			}
+		},
+	},
+});
+
+export const { setEventSettings } = eventSettingsSlice.actions;
+
+export const eventSettingsReducer = eventSettingsSlice.reducer;

package/src/state/{externalEventsMiddleware.js → externalEventsMiddleware.ts}

@@ -1,6 +1,14 @@
-// Vendored verbatim from recharts@3.9.2 es6/state/externalEventsMiddleware.js (framework-agnostic).
-// Do not edit — update by re-vendoring when the recharts devDependency moves.
-import { createAction, createListenerMiddleware } from '@reduxjs/toolkit';
+// Adapted from recharts@3.9.2, commit b3451050c027a23957ffa50a2665c9119df21e47.
+import type { NativeEvent } from '../util/OctaneTypes';
+import {
+	createAction,
+	createListenerMiddleware,
+	ListenerEffectAPI,
+	PayloadAction,
+} from '@reduxjs/toolkit';
+
+import { CategoricalChartFunc } from '../chart/types';
+import { MouseHandlerDataParam } from '../synchronisation/types';
 import {
 	selectActiveLabel,
 	selectActiveTooltipCoordinate,
@@ -8,9 +16,17 @@ import {
 	selectActiveTooltipIndex,
 	selectIsTooltipActive,
 } from './selectors/tooltipSelectors';
+import { AppDispatch, RechartsRootState } from './store';
 import { createEventProxy } from '../util/createEventProxy';
-export var externalEventAction = createAction('externalEvent');
-export var externalEventsMiddleware = createListenerMiddleware();
+
+type ExternalEventActionPayload<E = NativeEvent> = {
+	reactEvent: E;
+	handler: CategoricalChartFunc<E> | undefined;
+};
+
+export const externalEventAction = createAction<ExternalEventActionPayload<any>>('externalEvent');
+
+export const externalEventsMiddleware = createListenerMiddleware<RechartsRootState>();
 
 /*
  * We need a Map keyed by event type because this middleware handles MULTIPLE different event types
@@ -19,35 +35,38 @@ export var externalEventsMiddleware = createListenerMiddleware();
  * For example, a click event and a mousemove event can happen in quick succession and both should be processed.
  * This is different from mouseMoveMiddleware which only handles one event type and uses a single rafId.
  */
-var rafIdMap = new Map();
-var timeoutIdMap = new Map();
-var latestEventMap = new Map();
+const rafIdMap = new Map<string, number>();
+const timeoutIdMap = new Map<string, ReturnType<typeof setTimeout>>();
+const latestEventMap = new Map<string, ExternalEventActionPayload>();
+
 externalEventsMiddleware.startListening({
 	actionCreator: externalEventAction,
-	effect: (action, listenerApi) => {
-		var _action$payload = action.payload,
-			handler = _action$payload.handler,
-			reactEvent = _action$payload.reactEvent;
+	effect: (
+		action: PayloadAction<ExternalEventActionPayload>,
+		listenerApi: ListenerEffectAPI<RechartsRootState, AppDispatch>,
+	) => {
+		const { handler, reactEvent } = action.payload;
 		if (handler == null) {
 			return;
 		}
-		var eventType = reactEvent.type;
-		var eventProxy = createEventProxy(reactEvent);
+
+		const eventType = reactEvent.type;
+		const eventProxy = createEventProxy(reactEvent);
+
 		latestEventMap.set(eventType, {
 			handler,
 			reactEvent: eventProxy,
 		});
 
 		// Cancel any pending execution for this event type
-		var existingRafId = rafIdMap.get(eventType);
+		const existingRafId = rafIdMap.get(eventType);
 		if (existingRafId !== undefined) {
 			cancelAnimationFrame(existingRafId);
 			rafIdMap.delete(eventType);
 		}
-		var state = listenerApi.getState();
-		var _state$eventSettings = state.eventSettings,
-			throttleDelay = _state$eventSettings.throttleDelay,
-			throttledEvents = _state$eventSettings.throttledEvents;
+
+		const state = listenerApi.getState();
+		const { throttleDelay, throttledEvents } = state.eventSettings;
 
 		/*
 		 * reactEvent.type gives us the event type as a string, e.g., 'click', 'mousemove', etc.
@@ -58,31 +77,30 @@ externalEventsMiddleware.startListening({
 		 * with a string argument.
 		 * To satisfy TypeScript, we need to explicitly typecast throttledEvents here.
 		 */
-		var eventListAsString = throttledEvents;
+		const eventListAsString: 'all' | ReadonlyArray<string> | undefined = throttledEvents;
 
 		// Check if this event type should be throttled
 		// throttledEvents can be 'all' or an array of event names
-		var isThrottled =
-			eventListAsString === 'all' ||
-			(eventListAsString === null || eventListAsString === void 0
-				? void 0
-				: eventListAsString.includes(eventType));
-		var existingTimeoutId = timeoutIdMap.get(eventType);
+		const isThrottled = eventListAsString === 'all' || eventListAsString?.includes(eventType);
+
+		const existingTimeoutId = timeoutIdMap.get(eventType);
 		if (existingTimeoutId !== undefined && (typeof throttleDelay !== 'number' || !isThrottled)) {
 			clearTimeout(existingTimeoutId);
 			timeoutIdMap.delete(eventType);
 		}
-		var callback = () => {
-			var latestAction = latestEventMap.get(eventType);
+
+		const callback = () => {
+			const latestAction = latestEventMap.get(eventType);
+
 			try {
 				if (!latestAction) {
 					// This happens if the event was consumed by the leading edge and no new event came in
 					return;
 				}
-				var latestHandler = latestAction.handler,
-					latestEvent = latestAction.reactEvent;
-				var currentState = listenerApi.getState();
-				var nextState = {
+
+				const { handler: latestHandler, reactEvent: latestEvent } = latestAction;
+				const currentState: RechartsRootState = listenerApi.getState();
+				const nextState: MouseHandlerDataParam = {
 					activeCoordinate: selectActiveTooltipCoordinate(currentState),
 					activeDataKey: selectActiveTooltipDataKey(currentState),
 					activeIndex: selectActiveTooltipIndex(currentState),
@@ -90,6 +108,7 @@ externalEventsMiddleware.startListening({
 					activeTooltipIndex: selectActiveTooltipIndex(currentState),
 					isTooltipActive: selectIsTooltipActive(currentState),
 				};
+
 				if (latestHandler) {
 					latestHandler(nextState, latestEvent);
 				}
@@ -99,13 +118,15 @@ externalEventsMiddleware.startListening({
 				latestEventMap.delete(eventType);
 			}
 		};
+
 		if (!isThrottled) {
 			// Execute immediately
 			callback();
 			return;
 		}
+
 		if (throttleDelay === 'raf') {
-			var rafId = requestAnimationFrame(callback);
+			const rafId = requestAnimationFrame(callback);
 			rafIdMap.set(eventType, rafId);
 		} else if (typeof throttleDelay === 'number') {
 			if (!timeoutIdMap.has(eventType)) {
@@ -116,7 +137,7 @@ externalEventsMiddleware.startListening({
 				callback();
 
 				// Start cooldown
-				var timeoutId = setTimeout(callback, throttleDelay);
+				const timeoutId = setTimeout(callback, throttleDelay);
 				timeoutIdMap.set(eventType, timeoutId);
 			}
 		} else {