@octanejs/recharts 0.1.40 → 0.1.42

package/src/state/selectors/combiners/combineTooltipPayload.ts

@@ -0,0 +1,201 @@
+// Adapted from recharts@3.9.2, commit b3451050c027a23957ffa50a2665c9119df21e47.
+import {
+	TooltipEntrySettings,
+	TooltipIndex,
+	TooltipPayload,
+	TooltipPayloadConfiguration,
+	TooltipPayloadEntry,
+	TooltipPayloadSearcher,
+} from '../../tooltipSlice';
+import { ChartData, ChartDataState } from '../../chartDataSlice';
+import { DataKey, TooltipEventType } from '../../../util/types';
+import { findEntryInArray } from '../../../util/DataUtils';
+import { getTooltipEntry, getValueByDataKey } from '../../../util/ChartUtils';
+import { getSliced } from '../../../util/getSliced';
+import { ActiveLabel } from '../../../synchronisation/types';
+
+type TooltipPayloadItemLike = {
+	name: TooltipEntrySettings['name'];
+	unit: TooltipEntrySettings['unit'];
+	dataKey: DataKey<any> | undefined;
+	payload: unknown;
+	color: string | undefined;
+	fill: string | undefined;
+};
+
+function parseName(value: unknown): TooltipEntrySettings['name'] {
+	if (typeof value === 'string' || typeof value === 'number') {
+		return value;
+	}
+	return undefined;
+}
+
+function parseUnit(value: unknown): TooltipEntrySettings['unit'] {
+	if (typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean') {
+		return value;
+	}
+	return undefined;
+}
+
+function parseDataKey(value: unknown): DataKey<any> | undefined {
+	if (typeof value === 'string' || typeof value === 'number') {
+		return value;
+	}
+	if (typeof value === 'function') {
+		return (obj) => value(obj);
+	}
+	return undefined;
+}
+
+function parseColor(value: unknown): string | undefined {
+	if (typeof value === 'string') {
+		return value;
+	}
+	return undefined;
+}
+
+function parseTooltipPayloadItem(item: unknown): TooltipPayloadItemLike | undefined {
+	if (item == null || typeof item !== 'object') {
+		return undefined;
+	}
+
+	const name = 'name' in item ? parseName(item.name) : undefined;
+	const unit = 'unit' in item ? parseUnit(item.unit) : undefined;
+	const dataKey = 'dataKey' in item ? parseDataKey(item.dataKey) : undefined;
+	const payload = 'payload' in item ? item.payload : undefined;
+	const color = 'color' in item ? parseColor(item.color) : undefined;
+	const fill = 'fill' in item ? parseColor(item.fill) : undefined;
+
+	return {
+		name,
+		unit,
+		dataKey,
+		payload,
+		color,
+		fill,
+	};
+}
+
+function selectFinalData(
+	dataDefinedOnItem: unknown,
+	dataDefinedOnChart: ChartData | undefined,
+): unknown {
+	/*
+	 * If a payload has data specified directly from the graphical item, prefer that.
+	 * Otherwise, fill in data from the chart level, using the same index.
+	 */
+	if (dataDefinedOnItem != null) {
+		return dataDefinedOnItem;
+	}
+	return dataDefinedOnChart;
+}
+
+export const combineTooltipPayload = (
+	tooltipPayloadConfigurations: ReadonlyArray<TooltipPayloadConfiguration>,
+	activeIndex: TooltipIndex,
+	chartDataState: ChartDataState,
+	tooltipAxisDataKey: DataKey<any> | undefined,
+	activeLabel: ActiveLabel,
+	tooltipPayloadSearcher: TooltipPayloadSearcher | undefined,
+	tooltipEventType: TooltipEventType | undefined,
+): TooltipPayload | undefined => {
+	if (activeIndex == null || tooltipPayloadSearcher == null) {
+		return undefined;
+	}
+	const { chartData, computedData, dataStartIndex, dataEndIndex } = chartDataState;
+
+	const init: Array<TooltipPayloadEntry> = [];
+
+	return tooltipPayloadConfigurations.reduce(
+		(agg, { dataDefinedOnItem, settings }): Array<TooltipPayloadEntry> => {
+			const finalData = selectFinalData(dataDefinedOnItem, chartData);
+
+			const sliced = Array.isArray(finalData)
+				? getSliced(finalData, dataStartIndex, dataEndIndex)
+				: finalData;
+
+			const finalDataKey: DataKey<any> | undefined = settings?.dataKey ?? tooltipAxisDataKey;
+			// BaseAxisProps does not support nameKey but it could!
+			const finalNameKey: DataKey<any> | undefined = settings?.nameKey; // ?? tooltipAxis?.nameKey;
+			let tooltipPayload: unknown;
+			if (
+				tooltipAxisDataKey &&
+				Array.isArray(sliced) &&
+				/*
+				 * findEntryInArray won't work for Scatter because Scatter provides an array of arrays
+				 * as tooltip payloads and findEntryInArray is not prepared to handle that.
+				 * Sad but also ScatterChart only allows 'item' tooltipEventType
+				 * and also this is only a problem if there are multiple Scatters and each has its own data array
+				 * so let's fix that some other time.
+				 */
+				!Array.isArray(sliced[0]) &&
+				/*
+				 * If the tooltipEventType is 'axis', we should search for the dataKey in the sliced data
+				 * because thanks to allowDuplicatedCategory=false, the order of elements in the array
+				 * no longer matches the order of elements in the original data
+				 * and so we need to search by the active dataKey + label rather than by index.
+				 *
+				 * The same happens if multiple graphical items are present in the chart
+				 * and each of them has its own data array. Those arrays get concatenated
+				 * and again the tooltip index no longer matches the original data.
+				 *
+				 * On the other hand the tooltipEventType 'item' should always search by index
+				 * because we get the index from interacting over the individual elements
+				 * which is always accurate, irrespective of the allowDuplicatedCategory setting.
+				 */
+				tooltipEventType === 'axis'
+			) {
+				tooltipPayload = findEntryInArray(sliced, tooltipAxisDataKey, activeLabel);
+			} else {
+				/*
+				 * This is a problem because it assumes that the index is pointing to the displayed data
+				 * which it isn't because the index is pointing to the tooltip ticks array.
+				 * The above approach (with findEntryInArray) is the correct one, but it only works
+				 * if the axis dataKey is defined explicitly, and if the data is an array of objects.
+				 */
+				tooltipPayload = tooltipPayloadSearcher(sliced, activeIndex, computedData, finalNameKey);
+			}
+
+			if (Array.isArray(tooltipPayload)) {
+				tooltipPayload.forEach((item) => {
+					const parsedItem = parseTooltipPayloadItem(item);
+					const itemName = parsedItem?.name;
+					const itemDataKey = parsedItem?.dataKey;
+					const itemPayload = parsedItem?.payload;
+					const newSettings: TooltipEntrySettings = {
+						...settings,
+						name: itemName,
+						unit: parsedItem?.unit,
+						// Preserve item-level color/fill from graphical items.
+						color: parsedItem?.color ?? settings?.color,
+						fill: parsedItem?.fill ?? settings?.fill,
+					};
+					agg.push(
+						getTooltipEntry({
+							tooltipEntrySettings: newSettings,
+							dataKey: itemDataKey,
+							payload: itemPayload,
+							value: getValueByDataKey(itemPayload, itemDataKey),
+							name: itemName == null ? undefined : String(itemName),
+						}),
+					);
+				});
+			} else {
+				// I am not quite sure why these two branches (Array vs Array of Arrays) have to behave differently - I imagine we should unify these. 3.x breaking change?
+				agg.push(
+					getTooltipEntry({
+						tooltipEntrySettings: settings,
+						dataKey: finalDataKey,
+						payload: tooltipPayload,
+						// getValueByDataKey does not validate the output type
+						value: getValueByDataKey(tooltipPayload, finalDataKey),
+						// getValueByDataKey does not validate the output type
+						name: getValueByDataKey(tooltipPayload, finalNameKey) ?? settings?.name,
+					}),
+				);
+			}
+			return agg;
+		},
+		init,
+	);
+};

package/src/state/selectors/combiners/{combineTooltipPayloadConfigurations.js → combineTooltipPayloadConfigurations.ts}

@@ -1,11 +1,15 @@
-// Vendored verbatim from recharts@3.9.2 es6/state/selectors/combiners/combineTooltipPayloadConfigurations.js (framework-agnostic).
-// Do not edit — update by re-vendoring when the recharts devDependency moves.
-export var combineTooltipPayloadConfigurations = (
-	tooltipState,
-	tooltipEventType,
-	trigger,
-	defaultIndex,
-) => {
+// Adapted from recharts@3.9.2, commit b3451050c027a23957ffa50a2665c9119df21e47.
+import { TooltipIndex, TooltipPayloadConfiguration, TooltipState } from '../../tooltipSlice';
+import { TooltipEventType } from '../../../util/types';
+import { TooltipTrigger } from '../../../chart/types';
+import { GraphicalItemId } from '../../graphicalItemsSlice';
+
+export const combineTooltipPayloadConfigurations = (
+	tooltipState: TooltipState,
+	tooltipEventType: TooltipEventType | undefined,
+	trigger: TooltipTrigger,
+	defaultIndex: TooltipIndex | undefined,
+): ReadonlyArray<TooltipPayloadConfiguration> => {
 	// if tooltip reacts to axis interaction, then we display all items at the same time.
 	if (tooltipEventType === 'axis') {
 		return tooltipState.tooltipItemPayloads;
@@ -18,7 +22,7 @@ export var combineTooltipPayloadConfigurations = (
 		// No point filtering if the payload is empty
 		return [];
 	}
-	var filterByGraphicalItemId;
+	let filterByGraphicalItemId: GraphicalItemId | undefined;
 	if (trigger === 'hover') {
 		filterByGraphicalItemId = tooltipState.itemInteraction.hover.graphicalItemId;
 	} else {
@@ -42,18 +46,13 @@ export var combineTooltipPayloadConfigurations = (
 		 * In that case let's display the first item in the tooltip; after all, this is `item` interaction case,
 		 * so we should display only one item at a time instead of all.
 		 */
-		var firstItemPayload = tooltipState.tooltipItemPayloads[0];
+		const firstItemPayload = tooltipState.tooltipItemPayloads[0];
 		if (firstItemPayload != null) {
 			return [firstItemPayload];
 		}
 		return [];
 	}
-	return tooltipState.tooltipItemPayloads.filter((tpc) => {
-		var _tpc$settings;
-		return (
-			((_tpc$settings = tpc.settings) === null || _tpc$settings === void 0
-				? void 0
-				: _tpc$settings.graphicalItemId) === filterByGraphicalItemId
-		);
-	});
+	return tooltipState.tooltipItemPayloads.filter(
+		(tpc) => tpc.settings?.graphicalItemId === filterByGraphicalItemId,
+	);
 };

package/src/state/selectors/containerSelectors.ts

@@ -0,0 +1,12 @@
+// Adapted from recharts@3.9.2, commit b3451050c027a23957ffa50a2665c9119df21e47.
+import { RechartsRootState } from '../store';
+import { Margin } from '../../util/types';
+
+export const selectChartWidth = (state: RechartsRootState): number => state.layout.width;
+
+export const selectChartHeight = (state: RechartsRootState): number => state.layout.height;
+
+export const selectContainerScale: (state: RechartsRootState) => number = (state) =>
+	state.layout.scale;
+
+export const selectMargin = (state: RechartsRootState): Margin => state.layout.margin;

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

@@ -1,6 +1,8 @@
-// Vendored verbatim from recharts@3.9.2 es6/state/selectors/dataSelectors.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 { ChartData, ChartDataState } from '../chartDataSlice';
+
 /**
  * This selector always returns the data with the indexes set by a Brush.
  * Trouble is, that might or might not be what you want.
@@ -13,37 +15,42 @@ import { createSelector } from 'reselect';
  * @param state RechartsRootState
  * @returns data defined on the chart root element, such as BarChart or ScatterChart
  */
-export var selectChartDataWithIndexes = (state) => state.chartData;
+export const selectChartDataWithIndexes = (state: RechartsRootState): ChartDataState =>
+	state.chartData;
 
 /**
  * This selector will always return the full range of data, ignoring the indexes set by a Brush.
  * Useful for when you want to render the full range of data, even if a Brush is active.
  * For example: in the Brush panorama, in Legend, in Tooltip.
  */
-export var selectChartDataAndAlwaysIgnoreIndexes = createSelector(
-	[selectChartDataWithIndexes],
-	(dataState) => {
-		var dataEndIndex = dataState.chartData != null ? dataState.chartData.length - 1 : 0;
+export const selectChartDataAndAlwaysIgnoreIndexes: (state: RechartsRootState) => ChartDataState =
+	createSelector([selectChartDataWithIndexes], (dataState: ChartDataState) => {
+		const dataEndIndex = dataState.chartData != null ? dataState.chartData.length - 1 : 0;
 		return {
 			chartData: dataState.chartData,
 			computedData: dataState.computedData,
 			dataEndIndex,
 			dataStartIndex: 0,
 		};
-	},
-);
-export var selectChartDataWithIndexesIfNotInPanoramaPosition4 = (
-	state,
-	_unused1,
-	_unused2,
-	isPanorama,
-) => {
+	});
+
+export const selectChartDataWithIndexesIfNotInPanoramaPosition4 = (
+	state: RechartsRootState,
+	_unused1: unknown,
+	_unused2: unknown,
+	isPanorama: boolean,
+): ChartDataState => {
 	if (isPanorama) {
 		return selectChartDataAndAlwaysIgnoreIndexes(state);
 	}
 	return selectChartDataWithIndexes(state);
 };
-export var selectChartDataWithIndexesIfNotInPanoramaPosition3 = (state, _unused1, isPanorama) => {
+
+export const selectChartDataWithIndexesIfNotInPanoramaPosition3 = (
+	state: RechartsRootState,
+	_unused1: unknown,
+	isPanorama: boolean,
+): ChartDataState => {
 	if (isPanorama) {
 		return selectChartDataAndAlwaysIgnoreIndexes(state);
 	}
@@ -58,40 +65,35 @@ export var selectChartDataWithIndexesIfNotInPanoramaPosition3 = (state, _unused1
  * Used when a selector needs chart-level data but must avoid extra recomputes when the
  * data content has not actually changed.
  */
-export var selectChartDataSliceIfNotInPanorama = createSelector(
+export const selectChartDataSliceIfNotInPanorama: (
+	state: RechartsRootState,
+	_unused1: unknown,
+	_unused2: unknown,
+	isPanorama: boolean,
+) => ChartData = createSelector(
 	[selectChartDataWithIndexesIfNotInPanoramaPosition4],
-	(_ref) => {
-		var chartData = _ref.chartData,
-			dataStartIndex = _ref.dataStartIndex,
-			dataEndIndex = _ref.dataEndIndex;
-		return chartData != null ? chartData.slice(dataStartIndex, dataEndIndex + 1) : [];
-	},
+	({ chartData, dataStartIndex, dataEndIndex }: ChartDataState): ChartData =>
+		chartData != null ? chartData.slice(dataStartIndex, dataEndIndex + 1) : [],
 );
 
 /**
  * Returns the chart-level data slice (ignoring Brush indexes), memoized by content.
  * Used in tooltip and polar selectors that always need the full data range.
  */
-export var selectChartDataSliceIgnoringIndexes = createSelector(
-	[selectChartDataAndAlwaysIgnoreIndexes],
-	(_ref2) => {
-		var chartData = _ref2.chartData,
-			dataStartIndex = _ref2.dataStartIndex,
-			dataEndIndex = _ref2.dataEndIndex;
-		return chartData != null ? chartData.slice(dataStartIndex, dataEndIndex + 1) : [];
-	},
-);
+export const selectChartDataSliceIgnoringIndexes: (state: RechartsRootState) => ChartData =
+	createSelector(
+		[selectChartDataAndAlwaysIgnoreIndexes],
+		({ chartData, dataStartIndex, dataEndIndex }: ChartDataState): ChartData =>
+			chartData != null ? chartData.slice(dataStartIndex, dataEndIndex + 1) : [],
+	);
 
 /**
  * Returns the chart-level data slice (with Brush indexes applied), memoized by content.
  * Used in tooltip selectors.
  */
-export var selectChartDataSliceWithIndexes = createSelector(
-	[selectChartDataWithIndexes],
-	(_ref3) => {
-		var chartData = _ref3.chartData,
-			dataStartIndex = _ref3.dataStartIndex,
-			dataEndIndex = _ref3.dataEndIndex;
-		return chartData != null ? chartData.slice(dataStartIndex, dataEndIndex + 1) : [];
-	},
-);
+export const selectChartDataSliceWithIndexes: (state: RechartsRootState) => ChartData =
+	createSelector(
+		[selectChartDataWithIndexes],
+		({ chartData, dataStartIndex, dataEndIndex }: ChartDataState): ChartData =>
+			chartData != null ? chartData.slice(dataStartIndex, dataEndIndex + 1) : [],
+	);

package/src/state/selectors/funnelSelectors.ts

@@ -1,12 +1,12 @@
+import type { RegisteredCell } from '../../context/CellsContext';
 import { createSelector } from 'reselect';
-import { ReactElement } from 'octane';
-import { computeFunnelTrapezoids, FunnelTrapezoidItem } from '../../cartesian/Funnel';
+
+import { computeFunnelTrapezoids, FunnelTrapezoidItem } from '../../cartesian/Funnel.tsrx';
 import { ChartData } from '../chartDataSlice';
 import { RechartsRootState } from '../store';
 import { selectChartOffsetInternal } from './selectChartOffsetInternal';
 import { selectChartDataAndAlwaysIgnoreIndexes } from './dataSelectors';
 import { ChartOffsetInternal, DataKey, TooltipType } from '../../util/types';
-import { CellProps } from '../..';
 import { GraphicalItemId } from '../graphicalItemsSlice';
 
 export type ResolvedFunnelSettings = {
@@ -17,7 +17,7 @@ export type ResolvedFunnelSettings = {
 	lastShapeType?: 'triangle' | 'rectangle';
 	reversed?: boolean;
 	customWidth?: string | number;
-	cells: ReadonlyArray<ReactElement>;
+	cells: ReadonlyArray<RegisteredCell> | undefined;
 	presentationProps: Record<string, any> | null;
 	id: GraphicalItemId;
 };
@@ -63,7 +63,7 @@ export const selectFunnelTrapezoids: (
 				...(cells && cells[index] && cells[index].props),
 			}));
 		} else if (cells && cells.length) {
-			displayedData = cells.map((cell: ReactElement<CellProps>) => ({
+			displayedData = cells.map((cell: RegisteredCell) => ({
 				...presentationProps,
 				...cell.props,
 			}));

package/src/state/selectors/graphicalItemSelectors.ts

@@ -0,0 +1,22 @@
+// Adapted from recharts@3.9.2, commit b3451050c027a23957ffa50a2665c9119df21e47.
+import { RechartsRootState } from '../store';
+import { GraphicalItemId } from '../graphicalItemsSlice';
+import { AxisId, defaultAxisId } from '../cartesianAxisSlice';
+
+export function selectXAxisIdFromGraphicalItemId(
+	state: RechartsRootState,
+	id: GraphicalItemId,
+): AxisId {
+	return (
+		state.graphicalItems.cartesianItems.find((item) => item.id === id)?.xAxisId ?? defaultAxisId
+	);
+}
+
+export function selectYAxisIdFromGraphicalItemId(
+	state: RechartsRootState,
+	id: GraphicalItemId,
+): AxisId {
+	return (
+		state.graphicalItems.cartesianItems.find((item) => item.id === id)?.yAxisId ?? defaultAxisId
+	);
+}

package/src/state/selectors/legendSelectors.ts

@@ -0,0 +1,25 @@
+// Adapted from recharts@3.9.2, commit b3451050c027a23957ffa50a2665c9119df21e47.
+import { createSelector } from 'reselect';
+import { sortBy } from 'es-toolkit/compat';
+import { RechartsRootState } from '../store';
+import { LegendSettings } from '../legendSlice';
+import { LegendPayload } from '../../component/DefaultLegendContent.tsrx';
+import { Size } from '../../util/types';
+
+export const selectLegendSettings = (state: RechartsRootState): LegendSettings =>
+	state.legend.settings;
+
+export const selectLegendSize = (state: RechartsRootState): Size => state.legend.size;
+
+const selectAllLegendPayload2DArray = (
+	state: RechartsRootState,
+): ReadonlyArray<ReadonlyArray<LegendPayload>> => state.legend.payload;
+
+export const selectLegendPayload: (state: RechartsRootState) => ReadonlyArray<LegendPayload> =
+	createSelector(
+		[selectAllLegendPayload2DArray, selectLegendSettings],
+		(payloads, { itemSorter }) => {
+			const flat = payloads.flat(1);
+			return itemSorter ? sortBy(flat, itemSorter) : flat;
+		},
+	);

package/src/state/selectors/lineSelectors.ts

@@ -0,0 +1,159 @@
+// Adapted from recharts@3.9.2, commit b3451050c027a23957ffa50a2665c9119df21e47.
+import { createSelector } from 'reselect';
+import { computeLinePoints, LinePointItem } from '../../cartesian/Line.tsrx';
+import { RechartsRootState } from '../store';
+import { AxisId } from '../cartesianAxisSlice';
+import { selectChartDataWithIndexesIfNotInPanoramaPosition4 } from './dataSelectors';
+import { selectChartLayout } from '../../context/chartLayoutContext';
+import {
+	selectAxisWithScale,
+	selectTicksOfGraphicalItem,
+	selectUnfilteredCartesianItems,
+} from './axisSelectors';
+import { getBandSizeOfAxis, isCategoricalAxis } from '../../util/ChartUtils';
+import { ChartData } from '../chartDataSlice';
+import { CartesianGraphicalItemSettings, GraphicalItemId } from '../graphicalItemsSlice';
+import { LineSettings } from '../types/LineSettings';
+
+const selectXAxisWithScale = (
+	state: RechartsRootState,
+	xAxisId: AxisId,
+	_yAxisId: AxisId,
+	isPanorama: boolean,
+) => selectAxisWithScale(state, 'xAxis', xAxisId, isPanorama);
+
+const selectXAxisTicks = (
+	state: RechartsRootState,
+	xAxisId: AxisId,
+	_yAxisId: AxisId,
+	isPanorama: boolean,
+) => selectTicksOfGraphicalItem(state, 'xAxis', xAxisId, isPanorama);
+
+const selectYAxisWithScale = (
+	state: RechartsRootState,
+	_xAxisId: AxisId,
+	yAxisId: AxisId,
+	isPanorama: boolean,
+) => selectAxisWithScale(state, 'yAxis', yAxisId, isPanorama);
+
+const selectYAxisTicks = (
+	state: RechartsRootState,
+	_xAxisId: AxisId,
+	yAxisId: AxisId,
+	isPanorama: boolean,
+) => selectTicksOfGraphicalItem(state, 'yAxis', yAxisId, isPanorama);
+
+const selectBandSize = createSelector(
+	[
+		selectChartLayout,
+		selectXAxisWithScale,
+		selectYAxisWithScale,
+		selectXAxisTicks,
+		selectYAxisTicks,
+	],
+	(layout, xAxis, yAxis, xAxisTicks, yAxisTicks) => {
+		if (isCategoricalAxis(layout, 'xAxis')) {
+			return getBandSizeOfAxis(xAxis, xAxisTicks, false);
+		}
+		return getBandSizeOfAxis(yAxis, yAxisTicks, false);
+	},
+);
+
+const pickLineId = (
+	_state: RechartsRootState,
+	_xAxisId: AxisId,
+	_yAxisId: AxisId,
+	_isPanorama: boolean,
+	id: GraphicalItemId,
+) => id;
+
+function isLineSettings(item: CartesianGraphicalItemSettings): item is LineSettings {
+	return item.type === 'line';
+}
+
+/*
+ * There is a race condition problem because we read some data from props and some from the state.
+ * The state is updated through a dispatch and is one render behind,
+ * and so we have this weird one tick render where the displayedData in one selector have the old dataKey
+ * but the new dataKey in another selector.
+ *
+ * So here instead of reading the dataKey from the props, we always read it from the state.
+ */
+const selectSynchronisedLineSettings: (
+	state: RechartsRootState,
+	xAxisId: AxisId,
+	yAxisId: AxisId,
+	isPanorama: boolean,
+	id: GraphicalItemId,
+) => LineSettings | undefined = createSelector(
+	[selectUnfilteredCartesianItems, pickLineId],
+	(graphicalItems, id: GraphicalItemId): LineSettings | undefined =>
+		graphicalItems.filter(isLineSettings).find((x) => x.id === id),
+);
+
+export const selectLinePoints: (
+	state: RechartsRootState,
+	xAxisId: AxisId,
+	yAxisId: AxisId,
+	isPanorama: boolean,
+	id: GraphicalItemId,
+) => ReadonlyArray<LinePointItem> | undefined = createSelector(
+	[
+		selectChartLayout,
+		selectXAxisWithScale,
+		selectYAxisWithScale,
+		selectXAxisTicks,
+		selectYAxisTicks,
+		selectSynchronisedLineSettings,
+		selectBandSize,
+		selectChartDataWithIndexesIfNotInPanoramaPosition4,
+	],
+	(
+		layout,
+		xAxis,
+		yAxis,
+		xAxisTicks,
+		yAxisTicks,
+		lineSettings,
+		bandSize,
+		{ chartData, dataStartIndex, dataEndIndex },
+	): ReadonlyArray<LinePointItem> | undefined => {
+		if (
+			lineSettings == null ||
+			xAxis == null ||
+			yAxis == null ||
+			xAxisTicks == null ||
+			yAxisTicks == null ||
+			xAxisTicks.length === 0 ||
+			yAxisTicks.length === 0 ||
+			bandSize == null ||
+			(layout !== 'horizontal' && layout !== 'vertical')
+		) {
+			return undefined;
+		}
+
+		const { dataKey, data } = lineSettings;
+		let displayedData: ChartData | undefined;
+
+		if (data != null && data.length > 0) {
+			displayedData = data;
+		} else {
+			displayedData = chartData?.slice(dataStartIndex, dataEndIndex + 1);
+		}
+
+		if (displayedData == null) {
+			return undefined;
+		}
+
+		return computeLinePoints({
+			layout,
+			xAxis,
+			yAxis,
+			xAxisTicks,
+			yAxisTicks,
+			dataKey,
+			bandSize,
+			displayedData,
+		});
+	},
+);

package/src/state/selectors/numberDomainEqualityCheck.ts

@@ -0,0 +1,15 @@
+// Adapted from recharts@3.9.2, commit b3451050c027a23957ffa50a2665c9119df21e47.
+import { NumberDomain } from '../../util/types';
+
+export const numberDomainEqualityCheck = (
+	a: NumberDomain | undefined,
+	b: NumberDomain | undefined,
+): boolean => {
+	if (a === b) {
+		return true;
+	}
+	if (a == null || b == null) {
+		return false;
+	}
+	return a[0] === b[0] && a[1] === b[1];
+};

package/src/state/selectors/pickAxisId.ts

@@ -0,0 +1,6 @@
+// Adapted from recharts@3.9.2, commit b3451050c027a23957ffa50a2665c9119df21e47.
+import { RechartsRootState } from '../store';
+import { AxisId } from '../cartesianAxisSlice';
+
+export const pickAxisId = (_state: RechartsRootState, _axisType: unknown, axisId: AxisId): AxisId =>
+	axisId;

package/src/state/selectors/pickAxisType.ts

@@ -0,0 +1,4 @@
+// Adapted from recharts@3.9.2, commit b3451050c027a23957ffa50a2665c9119df21e47.
+import { RechartsRootState } from '../store';
+
+export const pickAxisType = <T>(_state: RechartsRootState, axisType: T): T => axisType;