@octanejs/recharts 0.1.40 → 0.1.42

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

@@ -1,8 +1,16 @@
-// Vendored verbatim from recharts@3.9.2 es6/state/touchEventsMiddleware.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 { NativeTouchEvent } from '../util/OctaneTypes';
+import {
+	createAction,
+	createListenerMiddleware,
+	ListenerEffectAPI,
+	PayloadAction,
+} from '@reduxjs/toolkit';
+
+import { AppDispatch, RechartsRootState } from './store';
 import { setActiveMouseOverItemIndex, setMouseOverAxisIndex } from './tooltipSlice';
 import { selectActivePropsFromChartPointer } from './selectors/selectActivePropsFromChartPointer';
+
 import { getRelativeCoordinate } from '../util/getRelativeCoordinate';
 import { selectTooltipEventType } from './selectors/selectTooltipEventType';
 import {
@@ -11,26 +19,35 @@ import {
 } from '../util/Constants';
 import { selectTooltipCoordinate } from './selectors/touchSelectors';
 import { selectAllGraphicalItemsSettings } from './selectors/tooltipSelectors';
+import { RelativePointer } from '../util/types';
 import { createEventProxy } from '../util/createEventProxy';
-export var touchEventAction = createAction('touchMove');
-export var touchEventMiddleware = createListenerMiddleware();
-var rafId = null;
-var timeoutId = null;
-var latestChartPointers = null;
-var latestTouchEvent = null;
+
+export const touchEventAction = createAction<NativeTouchEvent<HTMLDivElement>>('touchMove');
+
+export const touchEventMiddleware = createListenerMiddleware<RechartsRootState>();
+
+let rafId: number | null = null;
+let timeoutId: ReturnType<typeof setTimeout> | null = null;
+let latestChartPointers: ReadonlyArray<RelativePointer> | null = null;
+let latestTouchEvent: NativeTouchEvent<HTMLDivElement> | null = null;
+
 touchEventMiddleware.startListening({
 	actionCreator: touchEventAction,
-	effect: (action, listenerApi) => {
-		var touchEvent = action.payload;
+	effect: (
+		action: PayloadAction<NativeTouchEvent<HTMLDivElement>>,
+		listenerApi: ListenerEffectAPI<RechartsRootState, AppDispatch>,
+	) => {
+		const touchEvent = action.payload;
 		if (touchEvent.touches == null || touchEvent.touches.length === 0) {
 			return;
 		}
+
 		latestTouchEvent = createEventProxy(touchEvent);
-		var state = listenerApi.getState();
-		var _state$eventSettings = state.eventSettings,
-			throttleDelay = _state$eventSettings.throttleDelay,
-			throttledEvents = _state$eventSettings.throttledEvents;
-		var isThrottled = throttledEvents === 'all' || throttledEvents.includes('touchmove');
+
+		const state = listenerApi.getState();
+		const { throttleDelay, throttledEvents } = state.eventSettings;
+		const isThrottled = throttledEvents === 'all' || throttledEvents.includes('touchmove');
+
 		if (rafId !== null) {
 			cancelAnimationFrame(rafId);
 			rafId = null;
@@ -39,6 +56,7 @@ touchEventMiddleware.startListening({
 			clearTimeout(timeoutId);
 			timeoutId = null;
 		}
+
 		latestChartPointers = Array.from(touchEvent.touches).map((touch) =>
 			getRelativeCoordinate({
 				clientX: touch.clientX,
@@ -46,31 +64,26 @@ touchEventMiddleware.startListening({
 				currentTarget: touchEvent.currentTarget,
 			}),
 		);
-		var callback = () => {
+
+		const callback = () => {
 			if (latestTouchEvent == null) {
 				return;
 			}
-			var currentState = listenerApi.getState();
-			var tooltipEventType = selectTooltipEventType(
+
+			const currentState = listenerApi.getState();
+			const tooltipEventType = selectTooltipEventType(
 				currentState,
 				currentState.tooltip.settings.shared,
 			);
 			if (tooltipEventType === 'axis') {
-				var _latestChartPointers;
-				var latestTouchPointer =
-					(_latestChartPointers = latestChartPointers) === null || _latestChartPointers === void 0
-						? void 0
-						: _latestChartPointers[0];
+				const latestTouchPointer = latestChartPointers?.[0];
 				if (latestTouchPointer == null) {
 					rafId = null;
 					timeoutId = null;
 					return;
 				}
-				var activeProps = selectActivePropsFromChartPointer(currentState, latestTouchPointer);
-				if (
-					(activeProps === null || activeProps === void 0 ? void 0 : activeProps.activeIndex) !=
-					null
-				) {
+				const activeProps = selectActivePropsFromChartPointer(currentState, latestTouchPointer);
+				if (activeProps?.activeIndex != null) {
 					listenerApi.dispatch(
 						setMouseOverAxisIndex({
 							activeIndex: activeProps.activeIndex,
@@ -80,30 +93,26 @@ touchEventMiddleware.startListening({
 					);
 				}
 			} else if (tooltipEventType === 'item') {
-				var _target$getAttribute;
-				var touch = latestTouchEvent.touches[0];
+				const touch = latestTouchEvent.touches[0];
 				if (document.elementFromPoint == null || touch == null) {
 					return;
 				}
-				var target = document.elementFromPoint(touch.clientX, touch.clientY);
+				const target = document.elementFromPoint(touch.clientX, touch.clientY);
 				if (!target || !target.getAttribute) {
 					return;
 				}
-				var itemIndex = target.getAttribute(DATA_ITEM_INDEX_ATTRIBUTE_NAME);
-				var graphicalItemId =
-					(_target$getAttribute = target.getAttribute(
-						DATA_ITEM_GRAPHICAL_ITEM_ID_ATTRIBUTE_NAME,
-					)) !== null && _target$getAttribute !== void 0
-						? _target$getAttribute
-						: undefined;
-				var settings = selectAllGraphicalItemsSettings(currentState).find(
+				const itemIndex = target.getAttribute(DATA_ITEM_INDEX_ATTRIBUTE_NAME);
+				const graphicalItemId =
+					target.getAttribute(DATA_ITEM_GRAPHICAL_ITEM_ID_ATTRIBUTE_NAME) ?? undefined;
+				const settings = selectAllGraphicalItemsSettings(currentState).find(
 					(item) => item.id === graphicalItemId,
 				);
 				if (itemIndex == null || settings == null || graphicalItemId == null) {
 					return;
 				}
-				var dataKey = settings.dataKey;
-				var coordinate = selectTooltipCoordinate(currentState, itemIndex, graphicalItemId);
+				const { dataKey } = settings;
+				const coordinate = selectTooltipCoordinate(currentState, itemIndex, graphicalItemId);
+
 				listenerApi.dispatch(
 					setActiveMouseOverItemIndex({
 						activeDataKey: dataKey,
@@ -116,16 +125,19 @@ touchEventMiddleware.startListening({
 			rafId = null;
 			timeoutId = null;
 		};
+
 		if (!isThrottled) {
 			callback();
 			return;
 		}
+
 		if (throttleDelay === 'raf') {
 			rafId = requestAnimationFrame(callback);
 		} else if (typeof throttleDelay === 'number') {
 			if (timeoutId === null) {
 				callback();
 				latestTouchEvent = null;
+
 				timeoutId = setTimeout(() => {
 					if (latestTouchEvent) {
 						callback();

package/src/state/types/AreaSettings.ts

@@ -0,0 +1,15 @@
+// Adapted from recharts@3.9.2, commit b3451050c027a23957ffa50a2665c9119df21e47.
+import { BaseValue } from '../../cartesian/Area.tsrx';
+import { DataKey } from '../../util/types';
+import { ChartData } from '../chartDataSlice';
+import { MaybeStackedGraphicalItem } from './StackedGraphicalItem';
+import { BaseCartesianGraphicalItemSettings } from '../graphicalItemsSlice';
+
+export type AreaSettings = BaseCartesianGraphicalItemSettings &
+	MaybeStackedGraphicalItem & {
+		type: 'area';
+		connectNulls: boolean;
+		baseValue: BaseValue | undefined;
+		dataKey: DataKey<any>;
+		data: ChartData | undefined;
+	};

package/src/state/types/BarSettings.ts

@@ -0,0 +1,15 @@
+// Adapted from recharts@3.9.2, commit b3451050c027a23957ffa50a2665c9119df21e47.
+import { MinPointSize } from '../../util/BarUtils.tsrx';
+import { MaybeStackedGraphicalItem } from './StackedGraphicalItem';
+import { BaseCartesianGraphicalItemSettings } from '../graphicalItemsSlice';
+
+export type BarSettings = BaseCartesianGraphicalItemSettings &
+	MaybeStackedGraphicalItem & {
+		type: 'bar';
+		maxBarSize: number | undefined;
+		minPointSize: MinPointSize;
+		/**
+		 * When true, zero-dimension bars are not filtered out because the custom shape may still render something visible.
+		 */
+		hasCustomShape: boolean;
+	};

package/src/state/types/LineSettings.ts

@@ -0,0 +1,10 @@
+// Adapted from recharts@3.9.2, commit b3451050c027a23957ffa50a2665c9119df21e47.
+import { ChartData } from '../chartDataSlice';
+import { DataKey } from '../../util/types';
+import { BaseCartesianGraphicalItemSettings } from '../graphicalItemsSlice';
+
+export type LineSettings = BaseCartesianGraphicalItemSettings & {
+	type: 'line';
+	data: ChartData | undefined;
+	dataKey: DataKey<any> | undefined;
+};

package/src/state/types/PieSettings.ts

@@ -0,0 +1,32 @@
+// Adapted from recharts@3.9.2, commit b3451050c027a23957ffa50a2665c9119df21e47.
+import type { SVGProps } from '../../util/OctaneTypes';
+
+import { BasePolarGraphicalItemSettings } from '../graphicalItemsSlice';
+import { DataKey, LegendType } from '../../util/types';
+import { TooltipType } from '../../component/DefaultTooltipContent.tsrx';
+import { SVGPropsNoEvents } from '../../util/svgPropertiesNoEvents';
+import { WithoutId } from '../../util/useUniqueId';
+
+export type PiePresentationProps = SVGPropsNoEvents<WithoutId<SVGProps<SVGPathElement>>>;
+
+export interface PieSettings extends BasePolarGraphicalItemSettings {
+	type: 'pie';
+	name: string | number | undefined;
+	nameKey: DataKey<any>;
+	tooltipType: TooltipType | undefined;
+
+	legendType: LegendType;
+	fill: string;
+
+	cx: number | string;
+	cy: number | string;
+	startAngle: number;
+	endAngle: number;
+	paddingAngle: number;
+	minAngle: number;
+	innerRadius: number | string;
+	outerRadius: number | string | ((element: any) => number | string);
+	maxRadius: number | undefined;
+	cornerRadius: number | string | undefined;
+	presentationProps: PiePresentationProps | null;
+}

package/src/state/types/RadarSettings.ts

@@ -0,0 +1,6 @@
+// Adapted from recharts@3.9.2, commit b3451050c027a23957ffa50a2665c9119df21e47.
+import { BasePolarGraphicalItemSettings } from '../graphicalItemsSlice';
+
+export interface RadarSettings extends BasePolarGraphicalItemSettings {
+	type: 'radar';
+}

package/src/state/types/RadialBarSettings.ts

@@ -0,0 +1,10 @@
+// Adapted from recharts@3.9.2, commit b3451050c027a23957ffa50a2665c9119df21e47.
+import { MaybeStackedGraphicalItem } from './StackedGraphicalItem';
+import { BasePolarGraphicalItemSettings } from '../graphicalItemsSlice';
+
+export interface RadialBarSettings
+	extends BasePolarGraphicalItemSettings, MaybeStackedGraphicalItem {
+	type: 'radialBar';
+	minPointSize: number;
+	maxBarSize: number | undefined;
+}

package/src/state/types/ScatterSettings.ts

@@ -0,0 +1,13 @@
+// Adapted from recharts@3.9.2, commit b3451050c027a23957ffa50a2665c9119df21e47.
+import { ChartData } from '../chartDataSlice';
+import { DataKey } from '../../util/types';
+import { TooltipType } from '../../component/DefaultTooltipContent.tsrx';
+import { BaseCartesianGraphicalItemSettings } from '../graphicalItemsSlice';
+
+export type ScatterSettings = BaseCartesianGraphicalItemSettings & {
+	type: 'scatter';
+	data: ChartData | undefined;
+	dataKey: DataKey<any> | undefined;
+	tooltipType: TooltipType | undefined;
+	name: string | number | undefined;
+};

package/src/state/types/StackedGraphicalItem.ts

@@ -0,0 +1,34 @@
+// Adapted from recharts@3.9.2, commit b3451050c027a23957ffa50a2665c9119df21e47.
+import { GraphicalItemSettings } from '../graphicalItemsSlice';
+import { NormalizedStackId } from '../../util/ChartUtils';
+import { DataKey } from '../../util/types';
+
+/**
+ * Some graphical items allow data stacking. The stacks are optional,
+ * so all props here are optional too.
+ */
+export interface MaybeStackedGraphicalItem extends GraphicalItemSettings {
+	stackId: NormalizedStackId | undefined;
+	/**
+	 * Bars have a size but Area does not.
+	 */
+	barSize: number | string | undefined;
+}
+
+/**
+ * Some graphical items allow data stacking.
+ * This interface is used to represent the items that are stacked
+ * because the user has provided the stackId and dataKey properties.
+ */
+export interface DefinitelyStackedGraphicalItem extends MaybeStackedGraphicalItem {
+	stackId: NormalizedStackId;
+	dataKey: DataKey<any>;
+}
+
+export function isStacked<T extends GraphicalItemSettings>(
+	graphicalItem: T,
+): graphicalItem is T & DefinitelyStackedGraphicalItem {
+	return (
+		'stackId' in graphicalItem && graphicalItem.stackId != null && graphicalItem.dataKey != null
+	);
+}

package/src/state/zIndexSlice.ts

@@ -0,0 +1,137 @@
+// Adapted from recharts@3.9.2, commit b3451050c027a23957ffa50a2665c9119df21e47.
+/**
+ * This slice contains a registry of z-index values for various components.
+ * The state is a map from z-index numbers to element references.
+ */
+import { createSlice, PayloadAction, prepareAutoBatched } from '@reduxjs/toolkit';
+import { castDraft } from 'immer';
+
+import { DefaultZIndexes } from '../zIndex/DefaultZIndexes';
+
+type ZIndexEntry = {
+	/**
+	 * Reference to the DOM element that corresponds to this z-index.
+	 * This element is used to create a React portal for rendering components at this z-index.
+	 *
+	 * If undefined, it means no element is currently registered for this z-index,
+	 * and registration is in progress. If that happens, wait for the next render cycle.
+	 */
+	element: Element | undefined;
+	/**
+	 * Panorama items can't mix with normal items in the same z-index layer,
+	 * because they are rendered in a different SVG element.
+	 * So we need to have a separate element reference for panorama z-index portals.
+	 */
+	panoramaElement: Element | undefined;
+	consumers: number;
+};
+
+type ZIndexState = {
+	zIndexMap: Record<number, ZIndexEntry>;
+};
+
+const seed: ZIndexState['zIndexMap'] = {};
+
+const initialState: ZIndexState = {
+	zIndexMap: Object.values(DefaultZIndexes).reduce(
+		(acc: ZIndexState['zIndexMap'], current: number): ZIndexState['zIndexMap'] => ({
+			...acc,
+			[current]: {
+				element: undefined,
+				panoramaElement: undefined,
+				consumers: 0,
+			},
+		}),
+		seed,
+	),
+};
+
+const defaultZIndexSet = new Set<number>(Object.values(DefaultZIndexes));
+function isDefaultZIndex(zIndex: number): boolean {
+	return defaultZIndexSet.has(zIndex);
+}
+
+const zIndexSlice = createSlice({
+	name: 'zIndex',
+	initialState,
+	reducers: {
+		registerZIndexPortal: {
+			reducer: (state, action: PayloadAction<{ zIndex: number }>) => {
+				const { zIndex } = action.payload;
+				if (state.zIndexMap[zIndex]) {
+					state.zIndexMap[zIndex].consumers += 1;
+				} else {
+					state.zIndexMap[zIndex] = {
+						consumers: 1,
+						element: undefined,
+						panoramaElement: undefined,
+					};
+				}
+			},
+			prepare: prepareAutoBatched<{ zIndex: number }>(),
+		},
+		unregisterZIndexPortal: {
+			reducer: (state, action: PayloadAction<{ zIndex: number }>) => {
+				const { zIndex } = action.payload;
+				if (state.zIndexMap[zIndex]) {
+					state.zIndexMap[zIndex].consumers -= 1;
+					/*
+					 * Garbage collect unused z-index entries, except for default z-indexes.
+					 * Default z-indexes are always rendered, regardless of whether there are consumers or not.
+					 * And because of that, even if we delete this entry, the ZIndexPortal provider will still be rendered
+					 * and React is not going to re-create it, and it won't re-register the element ID.
+					 * So let's not delete default z-index entries.
+					 */
+					if (state.zIndexMap[zIndex].consumers <= 0 && !isDefaultZIndex(zIndex)) {
+						delete state.zIndexMap[zIndex];
+					}
+				}
+			},
+			prepare: prepareAutoBatched<{ zIndex: number }>(),
+		},
+		registerZIndexPortalElement: {
+			reducer: (
+				state,
+				action: PayloadAction<{ zIndex: number; element: Element; isPanorama: boolean }>,
+			) => {
+				const { zIndex, element, isPanorama } = action.payload;
+				if (state.zIndexMap[zIndex]) {
+					if (isPanorama) {
+						state.zIndexMap[zIndex].panoramaElement = castDraft(element);
+					} else {
+						state.zIndexMap[zIndex].element = castDraft(element);
+					}
+				} else {
+					state.zIndexMap[zIndex] = {
+						consumers: 0,
+						element: isPanorama ? undefined : castDraft(element),
+						panoramaElement: isPanorama ? castDraft(element) : undefined,
+					};
+				}
+			},
+			prepare: prepareAutoBatched<{ zIndex: number; element: Element; isPanorama: boolean }>(),
+		},
+		unregisterZIndexPortalElement: {
+			reducer: (state, action: PayloadAction<{ zIndex: number; isPanorama: boolean }>) => {
+				const { zIndex } = action.payload;
+				if (state.zIndexMap[zIndex]) {
+					if (action.payload.isPanorama) {
+						state.zIndexMap[zIndex].panoramaElement = undefined;
+					} else {
+						state.zIndexMap[zIndex].element = undefined;
+					}
+				}
+			},
+			prepare: prepareAutoBatched<{ zIndex: number; isPanorama: boolean }>(),
+		},
+	},
+});
+
+export const {
+	registerZIndexPortal,
+	unregisterZIndexPortal,
+	registerZIndexPortalElement,
+	unregisterZIndexPortalElement,
+} = zIndexSlice.actions;
+
+export const zIndexReducer = zIndexSlice.reducer;

package/src/synchronisation/syncSelectors.ts

@@ -0,0 +1,7 @@
+// Adapted from recharts@3.9.2, commit b3451050c027a23957ffa50a2665c9119df21e47.
+import { RechartsRootState } from '../state/store';
+import { TooltipSyncState } from '../state/tooltipSlice';
+
+export function selectSynchronisedTooltipState(state: RechartsRootState): TooltipSyncState {
+	return state.tooltip.syncInteraction;
+}

package/src/synchronisation/types.ts

@@ -0,0 +1,42 @@
+// Adapted from recharts@3.9.2, commit b3451050c027a23957ffa50a2665c9119df21e47.
+import { Coordinate, DataKey, TickItem } from '../util/types';
+import { TooltipIndex } from '../state/tooltipSlice';
+
+export type ActiveLabel = string | number | undefined;
+
+/**
+ * Despite the name, this type is used for all event types, not just mouse events.
+ */
+export type MouseHandlerDataParam = {
+	/**
+	 * Index of the active tick in the current chart. Only works with number-indexed one-dimensional data charts,
+	 * like Line, Area, Bar, Pie, etc.
+	 *
+	 * Doesn't work with two-dimensional data charts like Treemap, Sankey. But one day it will which is why the TooltipIndex type is here.
+	 */
+	activeTooltipIndex: number | TooltipIndex | undefined;
+	isTooltipActive: boolean;
+	/**
+	 * Exactly the same as activeTooltipIndex - this was also duplicated in recharts@2 so let's keep both properties for better backwards compatibility.
+	 */
+	activeIndex: number | TooltipIndex | undefined;
+	/**
+	 * The category or domain value of the active tooltip entry.
+	 */
+	activeLabel: ActiveLabel;
+	activeDataKey: DataKey<any> | undefined;
+	activeCoordinate: Coordinate | undefined;
+};
+
+/**
+ * Allows customisation of how the charts will synchronize tooltips and brushes.
+ * Default: index
+ *
+ * 'index': other charts will reuse current datum's index within the data array. In cases where data does not have the same length, this might yield unexpected results.
+ * 'value': will try to match other charts values
+ * custom function: will receive two arguments and should return an index of the active tick in the current chart:
+ * argument 1: ticks from the current chart
+ * argument 2: active tooltip state from the other chart
+ */
+export type SyncMethod =
+	'index' | 'value' | ((ticks: ReadonlyArray<TickItem>, data: MouseHandlerDataParam) => number);

package/src/synchronisation/useChartSynchronisation.tsrx

@@ -1,3 +1,10 @@
+import type { PayloadAction } from '@reduxjs/toolkit';
+import type { BrushStartEndIndex } from '../context/brushUpdateContext';
+import type { TooltipIndex, TooltipSyncState } from '../state/tooltipSlice';
+import type { Coordinate, TickItem, TooltipEventType } from '../util/types';
+import type { TooltipTrigger } from '../chart/types';
+import type { ActiveLabel, MouseHandlerDataParam } from './types';
+
 // Port of synchronisation/useChartSynchronisation.ts — cross-chart tooltip and
 // brush synchronisation over the shared eventemitter3 event center. A `.tsrx`
 // module so the compiler slots every store read (these hooks read many
@@ -42,7 +49,11 @@ function useTooltipSyncEventsListener() {
 			// This chart is not synchronised with any other chart.
 			return noop;
 		}
-		const listener = (incomingSyncId, action, emitter) => {
+		const listener = (
+			incomingSyncId: number | string,
+			action: PayloadAction<TooltipSyncState>,
+			emitter: symbol,
+		) => {
 			if (myEventEmitter === emitter) {
 				// We don't want to dispatch actions that we sent ourselves.
 				return;
@@ -94,10 +105,10 @@ function useTooltipSyncEventsListener() {
 				// for the other two sync methods, we need the ticks to be available
 				return;
 			}
-			let activeTick;
+			let activeTick: TickItem | undefined;
 			if (typeof syncMethod === 'function') {
 				// The 2.x CategoricalChartState data shape, kept for compatibility.
-				const syncMethodParam = {
+				const syncMethodParam: MouseHandlerDataParam = {
 					activeTooltipIndex: action.payload.index == null
 						? undefined
 						: Number(action.payload.index),
@@ -148,7 +159,7 @@ function useTooltipSyncEventsListener() {
 			const { x, y } = coordinate;
 			const validateChartX = Math.min(x, viewBox.x + viewBox.width);
 			const validateChartY = Math.min(y, viewBox.y + viewBox.height);
-			const activeCoordinate = {
+			const activeCoordinate: Coordinate = {
 				x: layout === 'horizontal' ? activeTick.coordinate : validateChartX,
 				y: layout === 'horizontal' ? validateChartY : activeTick.coordinate,
 			};
@@ -182,7 +193,11 @@ function useBrushSyncEventsListener() {
 		if (mySyncId == null) {
 			return noop;
 		}
-		const listener = (incomingSyncId, action, emitter) => {
+		const listener = (
+			incomingSyncId: number | string,
+			action: BrushStartEndIndex,
+			emitter: symbol,
+		) => {
 			if (myEventEmitter === emitter) {
 				return;
 			}
@@ -213,12 +228,12 @@ export function useSynchronisedEventsFromOtherCharts() {
  * which prevents sparse-data charts from cascade-clearing other tooltips.
  */
 export function useTooltipChartSynchronisation(
-	tooltipEventType,
-	trigger,
-	activeCoordinate,
-	activeLabel,
-	activeIndex,
-	isTooltipActive,
+	tooltipEventType: TooltipEventType | undefined,
+	trigger: TooltipTrigger,
+	activeCoordinate: Coordinate | undefined,
+	activeLabel: ActiveLabel,
+	activeIndex: TooltipIndex | undefined,
+	isTooltipActive: boolean,
 ) {
 	const activeDataKey = useAppSelector(
 		(state) => selectTooltipDataKey(state, tooltipEventType, trigger),

package/src/types.ts

@@ -0,0 +1,55 @@
+// Adapted from recharts@3.9.2, commit b3451050c027a23957ffa50a2665c9119df21e47.
+/**
+ * Defines the blank space between the chart and the plot area.
+ * This blank space is occupied by supporting elements like axes, legends, and brushes.
+ * This also includes any margins that might be applied to the chart.
+ */
+export type ChartOffset = {
+	/**
+	 * Distance from the top edge of the chart to the top edge of the plot area.
+	 */
+	readonly top: number;
+	/**
+	 * Distance from the bottom edge of the chart to the bottom edge of the plot area.
+	 * Note that this is not a coordinate, this is a distance.
+	 * Meaning, `offset.bottom` could be 0 in a perfectly fine big chart.
+	 */
+	readonly bottom: number;
+	/**
+	 * Distance from the left edge of the chart to the left edge of the plot area.
+	 */
+	readonly left: number;
+	/**
+	 * Distance from the right edge of the chart to the right edge of the plot area.
+	 * Note that this is not a coordinate, this is a distance.
+	 * Meaning, `offset.right` could be 0 in a perfectly fine big chart.
+	 */
+	readonly right: number;
+};
+
+/**
+ * Plot area is the area where the actual chart data is rendered.
+ * This means: bars, lines, scatter points, etc.
+ */
+export type PlotArea = {
+	/**
+	 * The width of the plot area.
+	 * This will be the same as `chartWidth - offset.left - offset.right`
+	 */
+	readonly width: number;
+	/**
+	 * The height of the plot area.
+	 * This will be the same as `chartHeight - offset.top - offset.bottom`
+	 */
+	readonly height: number;
+	/**
+	 * The x coordinate of the top-left corner of the plot area.
+	 * This will be the same as `offset.left`
+	 */
+	readonly x: number;
+	/**
+	 * The y coordinate of the top-left corner of the plot area.
+	 * This will be the same as `offset.top`
+	 */
+	readonly y: number;
+};