@octanejs/recharts 0.1.40 → 0.1.42

package/src/state/selectors/pieSelectors.ts

@@ -1,13 +1,13 @@
+import type { RegisteredCell } from '../../context/CellsContext';
 import { createSelector } from 'reselect';
-import { ReactElement } from 'octane';
-import { CellProps } from '../..';
-import { computePieSectors, PieSectorDataItem } from '../../polar/Pie';
+
+import { computePieSectors, PieSectorDataItem } from '../../polar/Pie.tsrx';
 import { RechartsRootState } from '../store';
 import { selectChartDataAndAlwaysIgnoreIndexes } from './dataSelectors';
 import { ChartData, ChartDataState } from '../chartDataSlice';
 import { ChartOffsetInternal } from '../../util/types';
 import { selectChartOffsetInternal } from './selectChartOffsetInternal';
-import type { LegendPayload } from '../../component/DefaultLegendContent';
+import type { LegendPayload } from '../../component/DefaultLegendContent.tsrx';
 import { getTooltipNameProp, getValueByDataKey } from '../../util/ChartUtils';
 import { selectUnfilteredPolarItems } from './polarSelectors';
 import type { PieSettings } from '../types/PieSettings';
@@ -25,12 +25,12 @@ const selectSynchronisedPieSettings: (
 );
 
 // Keep stable reference to an empty array to prevent re-renders
-const emptyArray: ReadonlyArray<ReactElement> = [];
+const emptyArray: ReadonlyArray<RegisteredCell> = [];
 const pickCells = (
 	_state: RechartsRootState,
 	_id: GraphicalItemId,
-	cells: ReadonlyArray<ReactElement> | undefined,
-): ReadonlyArray<ReactElement> | undefined => {
+	cells: ReadonlyArray<RegisteredCell> | undefined,
+): ReadonlyArray<RegisteredCell> | undefined => {
 	if (cells?.length === 0) {
 		return emptyArray;
 	}
@@ -40,7 +40,7 @@ const pickCells = (
 export const selectDisplayedData: (
 	state: RechartsRootState,
 	id: GraphicalItemId,
-	cells: ReadonlyArray<ReactElement> | undefined,
+	cells: ReadonlyArray<RegisteredCell> | undefined,
 ) => ChartData | undefined = createSelector(
 	[selectChartDataAndAlwaysIgnoreIndexes, selectSynchronisedPieSettings, pickCells],
 	(
@@ -59,7 +59,7 @@ export const selectDisplayedData: (
 		}
 
 		if ((!displayedData || !displayedData.length) && cells != null) {
-			displayedData = cells.map((cell: ReactElement<CellProps>) => ({
+			displayedData = cells.map((cell: RegisteredCell) => ({
 				...pieSettings.presentationProps,
 				...cell.props,
 			}));
@@ -76,13 +76,13 @@ export const selectDisplayedData: (
 export const selectPieLegend: (
 	state: RechartsRootState,
 	id: GraphicalItemId,
-	cells: ReadonlyArray<ReactElement> | undefined,
+	cells: ReadonlyArray<RegisteredCell> | undefined,
 ) => ReadonlyArray<LegendPayload> | undefined = createSelector(
 	[selectDisplayedData, selectSynchronisedPieSettings, pickCells],
 	(
 		displayedData: ChartData | undefined,
 		pieSettings: PieSettings | undefined,
-		cells: ReadonlyArray<ReactElement> | undefined,
+		cells: ReadonlyArray<RegisteredCell> | undefined,
 	): ReadonlyArray<LegendPayload> | undefined => {
 		if (displayedData == null || pieSettings == null) {
 			return undefined;
@@ -93,7 +93,8 @@ export const selectPieLegend: (
 			if (cells?.[i]?.props?.fill) {
 				color = cells[i].props.fill;
 			} else if (typeof entry === 'object' && entry != null && 'fill' in entry) {
-				color = entry.fill;
+				// Per-datum overrides follow the same SVG color contract as Cell/Pie.
+				color = (entry as { fill?: LegendPayload['color'] }).fill;
 			} else {
 				color = pieSettings.fill;
 			}
@@ -112,7 +113,7 @@ export const selectPieLegend: (
 export const selectPieSectors: (
 	state: RechartsRootState,
 	id: GraphicalItemId,
-	cells: ReadonlyArray<ReactElement> | undefined,
+	cells: ReadonlyArray<RegisteredCell> | undefined,
 ) => ReadonlyArray<PieSectorDataItem> | undefined = createSelector(
 	[selectDisplayedData, selectSynchronisedPieSettings, pickCells, selectChartOffsetInternal],
 	(

package/src/state/selectors/polarAxisSelectors.ts

@@ -0,0 +1,223 @@
+// Adapted from recharts@3.9.2, commit b3451050c027a23957ffa50a2665c9119df21e47.
+import { createSelector } from 'reselect';
+import { RechartsRootState } from '../store';
+import { AxisId } from '../cartesianAxisSlice';
+import { AngleAxisSettings, RadiusAxisSettings } from '../polarAxisSlice';
+import { PolarChartOptions } from '../polarOptionsSlice';
+import { selectChartHeight, selectChartWidth } from './containerSelectors';
+import { selectChartOffsetInternal } from './selectChartOffsetInternal';
+import { getMaxRadius } from '../../util/PolarUtils';
+import { getPercentValue } from '../../util/DataUtils';
+import {
+	AxisDomainTypeInput,
+	LayoutType,
+	PolarLayout,
+	PolarViewBoxRequired,
+} from '../../util/types';
+import { defaultPolarAngleAxisProps } from '../../polar/defaultPolarAngleAxisProps';
+import { defaultPolarRadiusAxisProps } from '../../polar/defaultPolarRadiusAxisProps';
+import { AxisRange } from './axisSelectors';
+import { combineAxisRangeWithReverse } from './combiners/combineAxisRangeWithReverse';
+import { selectChartLayout, selectPolarChartLayout } from '../../context/chartLayoutContext';
+import { getAxisTypeBasedOnLayout } from '../../util/getAxisTypeBasedOnLayout';
+
+export const implicitAngleAxis: Omit<AngleAxisSettings, 'type'> & { type: AxisDomainTypeInput } = {
+	allowDataOverflow: defaultPolarAngleAxisProps.allowDataOverflow,
+	allowDecimals: defaultPolarAngleAxisProps.allowDecimals,
+	allowDuplicatedCategory: false, // defaultPolarAngleAxisProps.allowDuplicatedCategory has it set to true but the actual axis rendering ignores the prop because reasons,
+	dataKey: undefined,
+	domain: undefined,
+	id: defaultPolarAngleAxisProps.angleAxisId,
+	includeHidden: false,
+	name: undefined,
+	reversed: defaultPolarAngleAxisProps.reversed,
+	scale: defaultPolarAngleAxisProps.scale,
+	tick: defaultPolarAngleAxisProps.tick,
+	tickCount: undefined,
+	ticks: undefined,
+	type: defaultPolarAngleAxisProps.type,
+	unit: undefined,
+	niceTicks: 'auto',
+};
+
+export const implicitRadiusAxis: Omit<RadiusAxisSettings, 'type'> & { type: AxisDomainTypeInput } =
+	{
+		allowDataOverflow: defaultPolarRadiusAxisProps.allowDataOverflow,
+		allowDecimals: defaultPolarRadiusAxisProps.allowDecimals,
+		allowDuplicatedCategory: defaultPolarRadiusAxisProps.allowDuplicatedCategory,
+		dataKey: undefined,
+		domain: undefined,
+		id: defaultPolarRadiusAxisProps.radiusAxisId,
+		includeHidden: defaultPolarRadiusAxisProps.includeHidden,
+		name: undefined,
+		reversed: defaultPolarRadiusAxisProps.reversed,
+		scale: defaultPolarRadiusAxisProps.scale,
+		tick: defaultPolarRadiusAxisProps.tick,
+		tickCount: defaultPolarRadiusAxisProps.tickCount,
+		ticks: undefined,
+		type: defaultPolarRadiusAxisProps.type,
+		unit: undefined,
+		niceTicks: 'auto',
+	};
+
+const selectAngleAxisNoDefaults = (
+	state: RechartsRootState,
+	angleAxisId: AxisId | undefined,
+): AngleAxisSettings | undefined => {
+	if (angleAxisId == null) {
+		return undefined;
+	}
+	return state.polarAxis.angleAxis[angleAxisId];
+};
+
+export const selectAngleAxis: (
+	state: RechartsRootState,
+	angleAxisId: AxisId | undefined,
+) => AngleAxisSettings = createSelector(
+	[selectAngleAxisNoDefaults, selectPolarChartLayout],
+	(angleAxisSettings, layout: PolarLayout | undefined): AngleAxisSettings => {
+		if (angleAxisSettings != null) {
+			return angleAxisSettings;
+		}
+		const evaluatedType =
+			getAxisTypeBasedOnLayout(layout, 'angleAxis', implicitAngleAxis.type) ?? 'category';
+		return {
+			...implicitAngleAxis,
+			type: evaluatedType,
+		};
+	},
+);
+
+const selectRadiusAxisNoDefaults = (
+	state: RechartsRootState,
+	radiusAxisId: AxisId,
+): RadiusAxisSettings | undefined => {
+	return state.polarAxis.radiusAxis[radiusAxisId];
+};
+
+export const selectRadiusAxis: (
+	state: RechartsRootState,
+	radiusAxisId: AxisId,
+) => RadiusAxisSettings = createSelector(
+	[selectRadiusAxisNoDefaults, selectPolarChartLayout],
+	(radiusAxisSettings, layout: PolarLayout | undefined): RadiusAxisSettings => {
+		if (radiusAxisSettings != null) {
+			return radiusAxisSettings;
+		}
+		const evaluatedType =
+			getAxisTypeBasedOnLayout(layout, 'radiusAxis', implicitRadiusAxis.type) ?? 'category';
+		return {
+			...implicitRadiusAxis,
+			type: evaluatedType,
+		};
+	},
+);
+
+export const selectPolarOptions = (state: RechartsRootState): PolarChartOptions | null =>
+	state.polarOptions;
+
+export const selectMaxRadius: (state: RechartsRootState) => number = createSelector(
+	[selectChartWidth, selectChartHeight, selectChartOffsetInternal],
+	getMaxRadius,
+);
+
+const selectInnerRadius: (state: RechartsRootState) => number | undefined = createSelector(
+	[selectPolarOptions, selectMaxRadius],
+	(polarChartOptions: PolarChartOptions | null, maxRadius: number) => {
+		if (polarChartOptions == null) {
+			return undefined;
+		}
+		return getPercentValue(polarChartOptions.innerRadius, maxRadius, 0);
+	},
+);
+
+export const selectOuterRadius: (state: RechartsRootState) => number | undefined = createSelector(
+	[selectPolarOptions, selectMaxRadius],
+	(polarChartOptions: PolarChartOptions | null, maxRadius: number) => {
+		if (polarChartOptions == null) {
+			return undefined;
+		}
+		return getPercentValue(polarChartOptions.outerRadius, maxRadius, maxRadius * 0.8);
+	},
+);
+
+const combineAngleAxisRange = (polarOptions: PolarChartOptions | null): AxisRange => {
+	if (polarOptions == null) {
+		return [0, 0];
+	}
+	const { startAngle, endAngle } = polarOptions;
+	return [startAngle, endAngle];
+};
+
+export const selectAngleAxisRange: (state: RechartsRootState) => AxisRange = createSelector(
+	[selectPolarOptions],
+	combineAngleAxisRange,
+);
+
+export const selectAngleAxisRangeWithReversed: (
+	state: RechartsRootState,
+	angleAxisId: AxisId,
+) => AxisRange | undefined = createSelector(
+	[selectAngleAxis, selectAngleAxisRange],
+	combineAxisRangeWithReverse,
+);
+
+export const selectRadiusAxisRange: (
+	state: RechartsRootState,
+	radiusAxisId: AxisId,
+) => AxisRange | undefined = createSelector(
+	[selectMaxRadius, selectInnerRadius, selectOuterRadius],
+	(maxRadius, innerRadius, outerRadius) => {
+		if (maxRadius == null || innerRadius == null || outerRadius == null) {
+			return undefined;
+		}
+		return [innerRadius, outerRadius];
+	},
+);
+
+export const selectRadiusAxisRangeWithReversed: (
+	state: RechartsRootState,
+	radiusAxisId: AxisId,
+) => AxisRange | undefined = createSelector(
+	[selectRadiusAxis, selectRadiusAxisRange],
+	combineAxisRangeWithReverse,
+);
+
+export const selectPolarViewBox: (state: RechartsRootState) => PolarViewBoxRequired | undefined =
+	createSelector(
+		[
+			selectChartLayout,
+			selectPolarOptions,
+			selectInnerRadius,
+			selectOuterRadius,
+			selectChartWidth,
+			selectChartHeight,
+		],
+		(
+			layout: LayoutType,
+			polarOptions: PolarChartOptions | null,
+			innerRadius,
+			outerRadius,
+			width,
+			height,
+		): PolarViewBoxRequired | undefined => {
+			if (
+				(layout !== 'centric' && layout !== 'radial') ||
+				polarOptions == null ||
+				innerRadius == null ||
+				outerRadius == null
+			) {
+				return undefined;
+			}
+			const { cx, cy, startAngle, endAngle } = polarOptions;
+			return {
+				cx: getPercentValue(cx, width, width / 2),
+				cy: getPercentValue(cy, height, height / 2),
+				innerRadius,
+				outerRadius,
+				startAngle,
+				endAngle,
+				clockWise: false, // this property look useful, why not use it?
+			};
+		},
+	);

package/src/state/selectors/polarSelectors.ts

@@ -95,7 +95,7 @@ export const selectAllPolarAppliedNumericalValues: (
 		if (items.length > 0) {
 			return data
 				.flatMap((entry) => {
-					return items.flatMap((item): AppliedChartDataWithErrorDomain | undefined => {
+					return items.flatMap((item): AppliedChartDataWithErrorDomain => {
 						const valueByDataKey: unknown = getValueByDataKey(
 							entry,
 							axisSettings.dataKey ?? item.dataKey,

package/src/state/selectors/radarSelectors.ts

@@ -5,7 +5,7 @@ import {
 	computeRadarPoints,
 	RadarComposedData,
 	RadiusAxisForRadar,
-} from '../../polar/Radar';
+} from '../../polar/Radar.tsrx';
 import { BaseAxisWithScale } from './axisSelectors';
 import { selectPolarAxisScale, selectPolarAxisTicks } from './polarScaleSelectors';
 import { selectAngleAxis, selectPolarViewBox, selectRadiusAxis } from './polarAxisSelectors';

package/src/state/selectors/radialBarSelectors.ts

@@ -1,7 +1,8 @@
+import type { RegisteredCell } from '../../context/CellsContext';
 import { createSelector } from 'reselect';
-import { ReactElement } from 'octane';
+
 import { Series } from 'victory-vendor/d3-shape';
-import { computeRadialBarDataItems, RadialBarDataItem } from '../../polar/RadialBar';
+import { computeRadialBarDataItems, RadialBarDataItem } from '../../polar/RadialBar.tsrx';
 import { selectChartDataAndAlwaysIgnoreIndexes, selectChartDataWithIndexes } from './dataSelectors';
 import { RechartsRootState } from '../store';
 import { ChartDataState } from '../chartDataSlice';
@@ -37,7 +38,7 @@ import {
 	selectUnfilteredPolarItems,
 } from './polarSelectors';
 import { AngleAxisSettings, RadiusAxisSettings } from '../polarAxisSlice';
-import { LegendPayload } from '../../component/DefaultLegendContent';
+import { LegendPayload } from '../../component/DefaultLegendContent.tsrx';
 import { isNullish } from '../../util/DataUtils';
 
 import type {
@@ -198,7 +199,7 @@ const pickCells = (
 	_radiusAxisId: AxisId,
 	_angleAxisId: AxisId,
 	_radialBarSettings: RadialBarSettings,
-	cells: ReadonlyArray<ReactElement> | undefined,
+	cells: ReadonlyArray<RegisteredCell> | undefined,
 ) => cells;
 
 const pickAngleAxisId = (
@@ -206,7 +207,7 @@ const pickAngleAxisId = (
 	_radiusAxisId: AxisId,
 	angleAxisId: AxisId,
 	_radialBarSettings: RadialBarSettings,
-	_cells: ReadonlyArray<ReactElement> | undefined,
+	_cells: ReadonlyArray<RegisteredCell> | undefined,
 ): AxisId => angleAxisId;
 
 const pickRadiusAxisId = (
@@ -214,7 +215,7 @@ const pickRadiusAxisId = (
 	radiusAxisId: AxisId,
 	_angleAxisId: AxisId,
 	_radialBarSettings: RadialBarSettings,
-	_cells: ReadonlyArray<ReactElement> | undefined,
+	_cells: ReadonlyArray<RegisteredCell> | undefined,
 ): AxisId => radiusAxisId;
 
 export const pickMaxBarSize = (
@@ -222,7 +223,7 @@ export const pickMaxBarSize = (
 	_radiusAxisId: AxisId,
 	_angleAxisId: AxisId,
 	radialBarSettings: RadialBarSettings,
-	_cells: ReadonlyArray<ReactElement> | undefined,
+	_cells: ReadonlyArray<RegisteredCell> | undefined,
 ): number | undefined => radialBarSettings.maxBarSize;
 
 const isRadialBar = (item: PolarGraphicalItemSettings): item is RadialBarSettings =>
@@ -233,7 +234,7 @@ const selectAllVisibleRadialBars: (
 	radiusAxisId: AxisId,
 	angleAxisId: AxisId,
 	radialBarSettings: RadialBarSettings,
-	cells: ReadonlyArray<ReactElement> | undefined,
+	cells: ReadonlyArray<RegisteredCell> | undefined,
 ) => ReadonlyArray<RadialBarSettings> = createSelector(
 	[selectChartLayout, selectUnfilteredPolarItems, pickAngleAxisId, pickRadiusAxisId],
 	(
@@ -266,7 +267,7 @@ export const selectPolarBarSizeList: (
 	radiusAxisId: AxisId,
 	angleAxisId: AxisId,
 	radialBarSettings: RadialBarSettings,
-	cells: ReadonlyArray<ReactElement> | undefined,
+	cells: ReadonlyArray<RegisteredCell> | undefined,
 ) => SizeList = createSelector(
 	[selectAllVisibleRadialBars, selectRootBarSize, selectPolarBarAxisSize],
 	combineBarSizeList,
@@ -277,7 +278,7 @@ export const selectPolarBarBandSize: (
 	radiusAxisId: AxisId,
 	angleAxisId: AxisId,
 	radialBarSettings: RadialBarSettings,
-	cells: ReadonlyArray<ReactElement> | undefined,
+	cells: ReadonlyArray<RegisteredCell> | undefined,
 ) => number = createSelector(
 	[
 		selectChartLayout,
@@ -312,7 +313,7 @@ export const selectAllPolarBarPositions: (
 	radiusAxisId: AxisId,
 	angleAxisId: AxisId,
 	radialBarSettings: RadialBarSettings,
-	cells: ReadonlyArray<ReactElement> | undefined,
+	cells: ReadonlyArray<RegisteredCell> | undefined,
 ) => ReadonlyArray<BarWithPosition> | undefined = createSelector(
 	[
 		selectPolarBarSizeList,
@@ -331,7 +332,7 @@ export const selectPolarBarPosition: (
 	radiusAxisId: AxisId,
 	angleAxisId: AxisId,
 	radialBarSettings: RadialBarSettings,
-	cells: ReadonlyArray<ReactElement> | undefined,
+	cells: ReadonlyArray<RegisteredCell> | undefined,
 ) => BarPositionPosition | undefined = createSelector(
 	[selectAllPolarBarPositions, selectSynchronisedRadialBarSettings],
 	combineBarPosition,
@@ -377,7 +378,7 @@ const selectRadialBarStackGroups: (
 	radiusAxisId: AxisId,
 	angleAxisId: AxisId,
 	radialBarSettings: RadialBarSettings,
-	cells: ReadonlyArray<ReactElement> | undefined,
+	cells: ReadonlyArray<RegisteredCell> | undefined,
 ) => AllStackGroups | undefined = (state, radiusAxisId, angleAxisId) => {
 	const layout = selectChartLayout(state);
 	if (layout === 'centric') {
@@ -391,7 +392,7 @@ const selectPolarStackedData: (
 	radiusAxisId: AxisId,
 	angleAxisId: AxisId,
 	radialBarSettings: RadialBarSettings,
-	cells: ReadonlyArray<ReactElement> | undefined,
+	cells: ReadonlyArray<RegisteredCell> | undefined,
 ) => StackSeries | undefined = createSelector(
 	[selectRadialBarStackGroups, selectSynchronisedRadialBarSettings],
 	combineStackedData,
@@ -402,7 +403,7 @@ export const selectRadialBarSectors: (
 	radiusAxisId: AxisId,
 	angleAxisId: AxisId,
 	radialBarSettings: RadialBarSettings,
-	cells: ReadonlyArray<ReactElement> | undefined,
+	cells: ReadonlyArray<RegisteredCell> | undefined,
 ) => ReadonlyArray<RadialBarDataItem> = createSelector(
 	[
 		selectAngleAxisWithScale,
@@ -430,7 +431,7 @@ export const selectRadialBarSectors: (
 		layout: LayoutType,
 		baseValue: number | unknown,
 		polarViewBox: PolarViewBoxRequired | undefined,
-		cells: ReadonlyArray<ReactElement> | undefined,
+		cells: ReadonlyArray<RegisteredCell> | undefined,
 		pos: BarPositionPosition | undefined,
 		stackedData: Series<StackDataPoint, StackSeriesIdentifier> | undefined,
 	): ReadonlyArray<RadialBarDataItem> => {

package/src/state/selectors/rootPropsSelectors.ts

@@ -0,0 +1,26 @@
+// Adapted from recharts@3.9.2, commit b3451050c027a23957ffa50a2665c9119df21e47.
+import { RechartsRootState } from '../store';
+import { StackOffsetType } from '../../util/types';
+import { SyncMethod } from '../../synchronisation/types';
+import { BaseValue } from '../../cartesian/Area.tsrx';
+
+export const selectRootMaxBarSize = (state: RechartsRootState): number | undefined =>
+	state.rootProps.maxBarSize;
+export const selectBarGap = (state: RechartsRootState): string | number => state.rootProps.barGap;
+export const selectBarCategoryGap = (state: RechartsRootState): string | number =>
+	state.rootProps.barCategoryGap;
+export const selectRootBarSize = (state: RechartsRootState): string | number | undefined =>
+	state.rootProps.barSize;
+export const selectStackOffsetType = (state: RechartsRootState): StackOffsetType =>
+	state.rootProps.stackOffset;
+export const selectReverseStackOrder = (state: RechartsRootState): boolean =>
+	state.rootProps.reverseStackOrder;
+export const selectChartName = (state: RechartsRootState) => state.options.chartName;
+
+export const selectSyncId = (state: RechartsRootState) => state.rootProps.syncId;
+export const selectSyncMethod = (state: RechartsRootState): SyncMethod =>
+	state.rootProps.syncMethod;
+export const selectEventEmitter = (state: RechartsRootState) => state.options.eventEmitter;
+export const selectChartBaseValue: (state: RechartsRootState) => BaseValue | undefined = (
+	state: RechartsRootState,
+) => state.rootProps.baseValue;

package/src/state/selectors/scatterSelectors.ts

@@ -1,6 +1,7 @@
+import type { RegisteredCell } from '../../context/CellsContext';
 import { createSelector } from 'reselect';
-import { ReactElement } from 'octane';
-import { computeScatterPoints, ScatterPointItem } from '../../cartesian/Scatter';
+
+import { computeScatterPoints, ScatterPointItem } from '../../cartesian/Scatter.tsrx';
 import { RechartsRootState } from '../store';
 import { AxisId } from '../cartesianAxisSlice';
 import { selectChartDataWithIndexesIfNotInPanoramaPosition4 } from './dataSelectors';
@@ -23,7 +24,7 @@ const selectXAxisWithScale = (
 	_yAxisId: AxisId,
 	_zAxisId: AxisId,
 	_id: GraphicalItemId,
-	_cells: ReadonlyArray<ReactElement> | undefined,
+	_cells: ReadonlyArray<RegisteredCell> | undefined,
 	isPanorama: boolean,
 ) => selectAxisWithScale(state, 'xAxis', xAxisId, isPanorama);
 
@@ -33,7 +34,7 @@ const selectXAxisTicks = (
 	_yAxisId: AxisId,
 	_zAxisId: AxisId,
 	_id: GraphicalItemId,
-	_cells: ReadonlyArray<ReactElement> | undefined,
+	_cells: ReadonlyArray<RegisteredCell> | undefined,
 	isPanorama: boolean,
 ) => selectTicksOfGraphicalItem(state, 'xAxis', xAxisId, isPanorama);
 
@@ -43,7 +44,7 @@ const selectYAxisWithScale = (
 	yAxisId: AxisId,
 	_zAxisId: AxisId,
 	_id: GraphicalItemId,
-	_cells: ReadonlyArray<ReactElement> | undefined,
+	_cells: ReadonlyArray<RegisteredCell> | undefined,
 	isPanorama: boolean,
 ) => selectAxisWithScale(state, 'yAxis', yAxisId, isPanorama);
 
@@ -53,7 +54,7 @@ const selectYAxisTicks = (
 	yAxisId: AxisId,
 	_zAxisId: AxisId,
 	_id: GraphicalItemId,
-	_cells: ReadonlyArray<ReactElement> | undefined,
+	_cells: ReadonlyArray<RegisteredCell> | undefined,
 	isPanorama: boolean,
 ) => selectTicksOfGraphicalItem(state, 'yAxis', yAxisId, isPanorama);
 
@@ -78,8 +79,8 @@ const pickCells = (
 	_yAxisId: AxisId,
 	_zAxisId: AxisId,
 	_id: GraphicalItemId,
-	cells: ReadonlyArray<ReactElement> | undefined,
-): ReadonlyArray<ReactElement> | undefined => cells;
+	cells: ReadonlyArray<RegisteredCell> | undefined,
+): ReadonlyArray<RegisteredCell> | undefined => cells;
 
 const scatterChartDataSelector = (
 	state: RechartsRootState,
@@ -87,7 +88,7 @@ const scatterChartDataSelector = (
 	_yAxisId: AxisId,
 	_zAxisId: AxisId,
 	_id: GraphicalItemId,
-	_cells: ReadonlyArray<ReactElement> | undefined,
+	_cells: ReadonlyArray<RegisteredCell> | undefined,
 	isPanorama: boolean,
 ): ChartDataState =>
 	selectChartDataWithIndexesIfNotInPanoramaPosition4(state, undefined, undefined, isPanorama);
@@ -111,7 +112,7 @@ export const selectScatterPoints: (
 	yAxisId: AxisId,
 	zAxisId: AxisId,
 	id: GraphicalItemId,
-	cells: ReadonlyArray<ReactElement> | undefined,
+	cells: ReadonlyArray<RegisteredCell> | undefined,
 	isPanorama: boolean,
 ) => ReadonlyArray<ScatterPointItem> | undefined = createSelector(
 	[

package/src/state/selectors/{selectActivePropsFromChartPointer.js → selectActivePropsFromChartPointer.ts}

@@ -1,14 +1,21 @@
-// Vendored verbatim from recharts@3.9.2 es6/state/selectors/selectActivePropsFromChartPointer.js (framework-agnostic).
-// Do not edit — update by re-vendoring when the recharts devDependency moves.
+// Adapted from recharts@3.9.2, commit b3451050c027a23957ffa50a2665c9119df21e47.
 import { createSelector } from 'reselect';
+import { RechartsRootState } from '../store';
+import { ActiveTooltipProps } from '../tooltipSlice';
 import { selectChartLayout } from '../../context/chartLayoutContext';
 import { selectTooltipAxisRangeWithReverse, selectTooltipAxisTicks } from './tooltipSelectors';
 import { selectChartOffsetInternal } from './selectChartOffsetInternal';
 import { combineActiveProps, selectOrderedTooltipTicks } from './selectors';
 import { selectPolarViewBox } from './polarAxisSelectors';
+import { RelativePointer } from '../../util/types';
 import { selectTooltipAxisType } from './selectTooltipAxisType';
-var pickChartPointer = (_state, chartPointer) => chartPointer;
-export var selectActivePropsFromChartPointer = createSelector(
+
+const pickChartPointer = (_state: RechartsRootState, chartPointer: RelativePointer) => chartPointer;
+
+export const selectActivePropsFromChartPointer: (
+	state: RechartsRootState,
+	chartPointer: RelativePointer,
+) => ActiveTooltipProps | undefined = createSelector(
 	[
 		pickChartPointer,
 		selectChartLayout,

package/src/state/selectors/selectAllAxes.ts

@@ -0,0 +1,20 @@
+// Adapted from recharts@3.9.2, commit b3451050c027a23957ffa50a2665c9119df21e47.
+import { createSelector } from 'reselect';
+import { RechartsRootState } from '../store';
+import { XAxisSettings, YAxisSettings } from '../cartesianAxisSlice';
+
+export const selectAllXAxes: (state: RechartsRootState) => ReadonlyArray<XAxisSettings> =
+	createSelector(
+		(state: RechartsRootState) => state.cartesianAxis.xAxis,
+		(xAxisMap): ReadonlyArray<XAxisSettings> => {
+			return Object.values(xAxisMap);
+		},
+	);
+
+export const selectAllYAxes: (state: RechartsRootState) => ReadonlyArray<YAxisSettings> =
+	createSelector(
+		(state: RechartsRootState) => state.cartesianAxis.yAxis,
+		(yAxisMap): ReadonlyArray<YAxisSettings> => {
+			return Object.values(yAxisMap);
+		},
+	);

package/src/state/selectors/selectChartOffset.ts

@@ -0,0 +1,17 @@
+// Adapted from recharts@3.9.2, commit b3451050c027a23957ffa50a2665c9119df21e47.
+import { createSelector } from 'reselect';
+import { selectChartOffsetInternal } from './selectChartOffsetInternal';
+import { ChartOffsetInternal } from '../../util/types';
+import { ChartOffset } from '../../types';
+
+export const selectChartOffset = createSelector(
+	[selectChartOffsetInternal],
+	(offsetInternal: ChartOffsetInternal): ChartOffset => {
+		return {
+			top: offsetInternal.top,
+			bottom: offsetInternal.bottom,
+			left: offsetInternal.left,
+			right: offsetInternal.right,
+		};
+	},
+);