@solidports/recharts 0.1.0

package/src/state/selectors/axisSelectors.ts

@@ -0,0 +1,2157 @@
+/* eslint-disable import/no-cycle */
+import range from "es-toolkit/compat/range"
+import { markRawData } from "../rawData"
+import { selectChartLayout } from "../../context/chartLayoutContext"
+import {
+	getDomainOfStackGroups,
+	getStackedData,
+	getValueByDataKey,
+	isCategoricalAxis,
+	type StackId,
+} from "../../util/ChartUtils"
+import type {
+	AxisDomain,
+	AxisTick,
+	CartesianTickItem,
+	CategoricalDomain,
+	CategoricalDomainItem,
+	ChartOffsetInternal,
+	Coordinate,
+	D3ScaleType,
+	DataKey,
+	LayoutType,
+	NumberDomain,
+	Size,
+	StackOffsetType,
+	TickItem,
+} from "../../util/types"
+import type {
+	AxisId,
+	BaseCartesianAxis,
+	CartesianAxisSettings,
+	XAxisOrientation,
+	XAxisSettings,
+	YAxisOrientation,
+	YAxisSettings,
+	ZAxisSettings,
+} from "../cartesianAxisSlice"
+import type { ChartState } from "../store"
+import {
+	selectChartDataWithIndexes,
+	selectChartDataWithIndexesIfNotInPanoramaPosition4,
+	selectChartDataSliceIfNotInPanorama,
+} from "./dataSelectors"
+import {
+	isWellFormedNumberDomain,
+	numericalDomainSpecifiedWithoutRequiringData,
+	parseNumericalUserDomain,
+} from "../../util/isDomainSpecifiedByUser"
+import type { AppliedChartData, ChartData, ChartDataState } from "../chartDataSlice"
+import {
+	getPercentValue,
+	hasDuplicate,
+	isNan,
+	isNotNil,
+	isNumOrStr,
+	mathSign,
+} from "../../util/DataUtils"
+import type {
+	BaseCartesianGraphicalItemSettings,
+	BasePolarGraphicalItemSettings,
+	CartesianGraphicalItemSettings,
+	GraphicalItemSettings,
+} from "../graphicalItemsSlice"
+import { readChartState } from "../chartState"
+import { isWellBehavedNumber } from "../../util/isWellBehavedNumber"
+import { getNiceTickValues, getTickValuesFixedDomain } from "../../util/scale"
+import type {
+	ReferenceAreaSettings,
+	ReferenceDotSettings,
+	ReferenceElementSettings,
+	ReferenceLineSettings,
+} from "../referenceElementsSlice"
+import { selectChartHeight, selectChartWidth } from "./containerSelectors"
+import { selectAllXAxes, selectAllYAxes } from "./selectAllAxes"
+import { selectChartOffsetInternal } from "./selectChartOffsetInternal"
+import type { AxisPropsForCartesianGridTicksGeneration } from "../../cartesian/CartesianGrid"
+import { selectBrushDimensions, selectBrushSettings } from "./brushSelectors"
+import {
+	selectBarCategoryGap,
+	selectChartName,
+	selectReverseStackOrder,
+	selectStackOffsetType,
+} from "./rootPropsSelectors"
+import {
+	selectAngleAxis,
+	selectAngleAxisRange,
+	selectRadiusAxis,
+	selectRadiusAxisRange,
+} from "./polarAxisSelectors"
+import type { AngleAxisSettings, RadiusAxisSettings } from "../polarAxisSlice"
+import { combineAxisRangeWithReverse } from "./combiners/combineAxisRangeWithReverse"
+import { DEFAULT_X_AXIS_HEIGHT, DEFAULT_Y_AXIS_WIDTH } from "../../util/Constants"
+import { getStackSeriesIdentifier } from "../../util/stacks/getStackSeriesIdentifier"
+import type { AllStackGroups, StackGroup } from "../../util/stacks/stackTypes"
+import {
+	combineDisplayedStackedData,
+	type DisplayedStackedData,
+} from "./combiners/combineDisplayedStackedData"
+import { type DefinitelyStackedGraphicalItem, isStacked } from "../types/StackedGraphicalItem"
+import type { ErrorBarsSettings, ErrorBarsState } from "../errorBarSlice"
+import type { AllAxisTypes, RenderableAxisType } from "./selectTooltipAxisType"
+import { selectTooltipAxisType } from "./selectTooltipAxisType"
+import { selectTooltipAxisId } from "./selectTooltipAxisId"
+import { type RechartsScale, rechartsScaleFactory } from "../../util/scale/RechartsScale"
+import { combineCheckedDomain } from "./combiners/combineCheckedDomain"
+import type { CustomScaleDefinition } from "../../util/scale/CustomScaleDefinition"
+import { combineConfiguredScale } from "./combiners/combineConfiguredScale"
+import { combineRealScaleType } from "./combiners/combineRealScaleType"
+import type { InverseScaleFunction } from "../../hooks"
+import { createCategoricalInverse } from "../../util/scale/createCategoricalInverse"
+import { chartSelector } from "./chartSelector"
+import { combineInverseScaleFunction } from "./combiners/combineInverseScaleFunction"
+
+export const defaultNumericDomain: AxisDomain = [0, "auto"]
+
+export type RenderableAxisSettings =
+	| XAxisSettings
+	| YAxisSettings
+	| AngleAxisSettings
+	| RadiusAxisSettings
+
+export type AllAxisSettings =
+	| XAxisSettings
+	| YAxisSettings
+	| ZAxisSettings
+	| AngleAxisSettings
+	| RadiusAxisSettings
+
+/**
+ * If an axis is not explicitly defined as an element,
+ * we still need to render something in the chart and we need
+ * some object to hold the domain and default settings.
+ */
+export const implicitXAxis: XAxisSettings = {
+	allowDataOverflow: false,
+	allowDecimals: true,
+	allowDuplicatedCategory: true,
+	angle: 0,
+	dataKey: undefined,
+	domain: undefined,
+	height: 30,
+	hide: true,
+	id: 0,
+	includeHidden: false,
+	interval: "preserveEnd",
+	minTickGap: 5,
+	mirror: false,
+	name: undefined,
+	niceTicks: "auto",
+	orientation: "bottom",
+	/* Shared default: served raw so it never ties a chart store to this module (see markRawData). */
+	padding: markRawData({ left: 0, right: 0 }),
+	reversed: false,
+	scale: "auto",
+	tick: true,
+	tickCount: 5,
+	tickFormatter: undefined,
+	ticks: undefined,
+	type: "category",
+	unit: undefined,
+}
+
+export const selectXAxisSettingsNoDefaults = chartSelector((
+	state: ChartState,
+	axisId: AxisId,
+	override?: XAxisSettings,
+): XAxisSettings | undefined => {
+	if (override !== undefined) return override
+	return readChartState(state).cartesianAxes.xAxis?.[String(axisId)]?.settings
+})
+
+export const selectXAxisSettings = chartSelector((
+	state: ChartState,
+	axisId: AxisId,
+	override?: XAxisSettings,
+): XAxisSettings => {
+	const axis = selectXAxisSettingsNoDefaults(state, axisId, override)
+	if (axis == null) {
+		return implicitXAxis
+	}
+	return axis
+})
+
+/**
+ * If an axis is not explicitly defined as an element,
+ * we still need to render something in the chart and we need
+ * some object to hold the domain and default settings.
+ */
+export const implicitYAxis: YAxisSettings = {
+	allowDataOverflow: false,
+	allowDecimals: true,
+	allowDuplicatedCategory: true,
+	angle: 0,
+	dataKey: undefined,
+	domain: defaultNumericDomain,
+	hide: true,
+	id: 0,
+	includeHidden: false,
+	interval: "preserveEnd",
+	minTickGap: 5,
+	mirror: false,
+	name: undefined,
+	niceTicks: "auto",
+	orientation: "left",
+	/* Shared default: served raw so it never ties a chart store to this module (see markRawData). */
+	padding: markRawData({ bottom: 0, top: 0 }),
+	reversed: false,
+	scale: "auto",
+	tick: true,
+	tickCount: 5,
+	tickFormatter: undefined,
+	ticks: undefined,
+	type: "number",
+	unit: undefined,
+	width: DEFAULT_Y_AXIS_WIDTH,
+}
+
+export const selectYAxisSettingsNoDefaults = chartSelector((
+	state: ChartState,
+	axisId: AxisId,
+	override?: YAxisSettings,
+): YAxisSettings | undefined => {
+	if (override !== undefined) return override
+	return readChartState(state).cartesianAxes.yAxis?.[String(axisId)]?.settings
+})
+
+export const selectYAxisSettings = chartSelector((
+	state: ChartState,
+	axisId: AxisId,
+	override?: YAxisSettings,
+): YAxisSettings => {
+	const axis = selectYAxisSettingsNoDefaults(state, axisId, override)
+	if (axis == null) {
+		return implicitYAxis
+	}
+	return axis
+})
+
+export const implicitZAxis: ZAxisSettings = {
+	allowDataOverflow: false,
+	allowDuplicatedCategory: false,
+	dataKey: undefined,
+	domain: [0, "auto"],
+	id: 0,
+	includeHidden: false,
+	name: "",
+	range: [64, 64],
+	reversed: false,
+	scale: "auto",
+	type: "number",
+	unit: "",
+}
+
+export const selectZAxisSettings = chartSelector((
+	state: ChartState,
+	axisId: AxisId,
+	override?: ZAxisSettings,
+): ZAxisSettings => {
+	if (override !== undefined) return override
+	const solidEntry = readChartState(state).cartesianAxes.zAxis?.[String(axisId)]?.settings
+	if (solidEntry != null) return solidEntry
+	return implicitZAxis
+})
+
+export const selectBaseAxis = chartSelector((
+	state: ChartState,
+	axisType: AllAxisTypes,
+	axisId: AxisId,
+): AllAxisSettings => {
+	switch (axisType) {
+		case "xAxis": {
+			return selectXAxisSettings(state, axisId)
+		}
+		case "yAxis": {
+			return selectYAxisSettings(state, axisId)
+		}
+		case "zAxis": {
+			return selectZAxisSettings(state, axisId)
+		}
+		case "angleAxis": {
+			return selectAngleAxis(state, axisId)
+		}
+		case "radiusAxis": {
+			return selectRadiusAxis(state, axisId)
+		}
+		default:
+			throw new Error(`Unexpected axis type: ${axisType}`)
+	}
+})
+
+const selectCartesianAxisSettings = chartSelector((
+	state: ChartState,
+	axisType: "xAxis" | "yAxis",
+	axisId: AxisId,
+): XAxisSettings | YAxisSettings => {
+	switch (axisType) {
+		case "xAxis": {
+			return selectXAxisSettings(state, axisId)
+		}
+		case "yAxis": {
+			return selectYAxisSettings(state, axisId)
+		}
+		default:
+			throw new Error(`Unexpected axis type: ${axisType}`)
+	}
+})
+
+/**
+ * Selects either an X or Y axis. Doesn't work with Z axis - for that, instead use selectBaseAxis.
+ * @param state Root state
+ * @param axisType xAxis | yAxis
+ * @param axisId xAxisId | yAxisId
+ * @returns axis settings object
+ */
+export const selectRenderableAxisSettings = chartSelector((
+	state: ChartState,
+	axisType: RenderableAxisType,
+	axisId: AxisId,
+): RenderableAxisSettings => {
+	switch (axisType) {
+		case "xAxis": {
+			return selectXAxisSettings(state, axisId)
+		}
+		case "yAxis": {
+			return selectYAxisSettings(state, axisId)
+		}
+		case "angleAxis": {
+			return selectAngleAxis(state, axisId)
+		}
+		case "radiusAxis": {
+			return selectRadiusAxis(state, axisId)
+		}
+		default:
+			throw new Error(`Unexpected axis type: ${axisType}`)
+	}
+})
+
+/**
+ * @param state ChartState
+ * @return boolean true if there is at least one Bar or RadialBar
+ */
+export const selectHasBar = chartSelector((state: ChartState): boolean => {
+	return Object.values(readChartState(state).graphicalItems).some(
+		(item) =>
+			item != null &&
+			typeof item === "object" &&
+			"type" in item &&
+			(item.type === "bar" || item.type === "radialBar"),
+	)
+})
+
+/**
+ * Filters CartesianGraphicalItemSettings by the relevant axis ID
+ * @param axisType 'xAxis' | 'yAxis' | 'zAxis' | 'radiusAxis' | 'angleAxis'
+ * @param axisId from props, defaults to 0
+ *
+ * @returns Predicate function that return true for CartesianGraphicalItemSettings that are relevant to the specified axis
+ */
+export function itemAxisPredicate(axisType: AllAxisTypes, axisId: AxisId) {
+	return (item: BaseCartesianGraphicalItemSettings | BasePolarGraphicalItemSettings) => {
+		switch (axisType) {
+			case "xAxis":
+				return "xAxisId" in item && item.xAxisId === axisId
+			case "yAxis":
+				return "yAxisId" in item && item.yAxisId === axisId
+			case "zAxis":
+				return "zAxisId" in item && item.zAxisId === axisId
+			case "angleAxis":
+				return "angleAxisId" in item && item.angleAxisId === axisId
+			case "radiusAxis":
+				return "radiusAxisId" in item && item.radiusAxisId === axisId
+			default:
+				return false
+		}
+	}
+}
+
+export const selectUnfilteredCartesianItems = chartSelector((
+	state: ChartState,
+): ReadonlyArray<CartesianGraphicalItemSettings> => {
+	const graphicalItems = readChartState(state).graphicalItems
+	const result: CartesianGraphicalItemSettings[] = []
+	for (const id in graphicalItems) {
+		const item = graphicalItems[id]
+		if (
+			item != null &&
+			typeof item === "object" &&
+			(item.type === "line" || item.type === "area" || item.type === "bar" || item.type === "scatter")
+		) {
+			result.push(item.settings)
+		}
+	}
+	return result
+})
+
+export const combineGraphicalItemsSettings = <T extends GraphicalItemSettings>(
+	graphicalItems: ReadonlyArray<T>,
+	axisSettings: BaseCartesianAxis,
+	axisPredicate: (item: T) => boolean,
+) =>
+	graphicalItems.filter(axisPredicate).filter((item) => {
+		if (axisSettings?.includeHidden === true) {
+			return true
+		}
+		return !item.hide
+	})
+
+export const selectCartesianItemsSettings = chartSelector(function selectCartesianItemsSettings(state: ChartState, axisType: AllAxisTypes, axisId: AxisId): ReadonlyArray<CartesianGraphicalItemSettings> {
+	const graphicalItems = selectUnfilteredCartesianItems(state)
+	const axisSettings = selectBaseAxis(state, axisType, axisId)
+	const axisPredicate = itemAxisPredicate(axisType, axisId)
+	return combineGraphicalItemsSettings(graphicalItems, axisSettings, axisPredicate)
+})
+
+export const selectStackedCartesianItemsSettings = chartSelector(function selectStackedCartesianItemsSettings(state: ChartState, axisType: AllAxisTypes, axisId: AxisId): ReadonlyArray<DefinitelyStackedGraphicalItem> {
+	const cartesianItems = selectCartesianItemsSettings(state, axisType, axisId)
+	return cartesianItems
+		.filter((item) => item.type === "area" || item.type === "bar")
+		.filter(isStacked)
+})
+
+export const filterGraphicalNotStackedItems = (
+	cartesianItems: ReadonlyArray<GraphicalItemSettings>,
+): ReadonlyArray<GraphicalItemSettings> =>
+	cartesianItems.filter((item) => !("stackId" in item) || item.stackId === undefined)
+
+const selectCartesianItemsSettingsExceptStacked = chartSelector(function selectCartesianItemsSettingsExceptStacked(state: ChartState, axisType: AllAxisTypes, axisId: AxisId): ReadonlyArray<GraphicalItemSettings> {
+	return filterGraphicalNotStackedItems(selectCartesianItemsSettings(state, axisType, axisId))
+})
+
+export const combineGraphicalItemsData = (cartesianItems: ReadonlyArray<GraphicalItemSettings>) =>
+	cartesianItems
+		.map((item) => item.data)
+		.filter(Boolean)
+		.flat(1)
+
+/**
+ * This is a "cheap" selector - it returns the data but doesn't iterate them, so it is not sensitive on the array length.
+ * Also does not apply dataKey yet.
+ * @param state ChartState
+ * @returns data defined on the chart graphical items, such as Line or Scatter or Pie, and filtered with appropriate dataKey
+ */
+export const selectCartesianGraphicalItemsData = chartSelector(function selectCartesianGraphicalItemsData(state: ChartState, axisType: AllAxisTypes, axisId: AxisId): ChartData {
+	return combineGraphicalItemsData(selectCartesianItemsSettings(state, axisType, axisId))
+})
+
+export const combineDisplayedData = (
+	graphicalItemsData: ChartData,
+	{ chartData = [], dataStartIndex, dataEndIndex }: ChartDataState,
+): ChartData => {
+	if (graphicalItemsData.length > 0) {
+		return graphicalItemsData
+	}
+	return chartData.slice(dataStartIndex, dataEndIndex + 1)
+}
+
+/**
+ * This selector will return all data there is in the chart: graphical items, chart root, all together.
+ * Useful for figuring out an axis domain (because that needs to know of everything),
+ * not useful for rendering individual graphical elements (because they need to know which data is theirs and which is not).
+ *
+ * This function will discard the original indexes, so it is also not useful for anything that depends on ordering.
+ */
+export const selectDisplayedData = chartSelector(function selectDisplayedData(state: ChartState, axisType: AllAxisTypes, axisId: AxisId, isPanorama: boolean): ChartData {
+	return combineDisplayedData(
+		selectCartesianGraphicalItemsData(state, axisType, axisId),
+		selectChartDataWithIndexesIfNotInPanoramaPosition4(state, undefined, undefined, isPanorama),
+	)
+})
+
+export const combineAppliedValues = (
+	data: ChartData,
+	axisSettings: BaseCartesianAxis,
+	items: ReadonlyArray<GraphicalItemSettings>,
+): AppliedChartData => {
+	if (axisSettings?.dataKey != null) {
+		return data.map((item) => ({ value: getValueByDataKey(item, axisSettings.dataKey) }))
+	}
+	if (items.length > 0) {
+		return items
+			.map((item) => item.dataKey)
+			.flatMap((dataKey) => data.map((entry) => ({ value: getValueByDataKey(entry, dataKey) })))
+	}
+	return data.map((entry) => ({ value: entry }))
+}
+
+/**
+ * This selector will return all values with the appropriate dataKey applied on them.
+ * Which dataKey is appropriate depends on where it is defined.
+ *
+ * This is an expensive selector - it will iterate all data and compute their value using the provided dataKey.
+ */
+/**
+ * Computes applied values from graphical items data plus, when needed, chart-level data.
+ *
+ * When at least one graphical item has no own `data` (it relies on chart root data) AND the axis has a `dataKey`,
+ * AND there are other items that do have their own data (meaning `displayedData` only contains graphical items data,
+ * not chart root data), we also include chart root data values so the axis domain covers all categories,
+ * including those only present in the chart root data but not in any graphical item's own data.
+ *
+ * Values from chart root data that don't match the axis dataKey (undefined) are excluded.
+ */
+export const combineAllAppliedValues = (
+	displayedData: ChartData,
+	axisSettings: BaseCartesianAxis,
+	items: ReadonlyArray<GraphicalItemSettings>,
+	chartDataState: ChartDataState,
+	anyItemUsesChartData: boolean,
+	graphicalItemsData: ChartData,
+): AppliedChartData => {
+	const appliedValues = combineAppliedValues(displayedData, axisSettings, items)
+	if (anyItemUsesChartData && axisSettings?.dataKey != null && graphicalItemsData.length > 0) {
+		const { chartData = [], dataStartIndex, dataEndIndex } = chartDataState
+		const chartDataSlice = chartData.slice(dataStartIndex, dataEndIndex + 1)
+		const chartAppliedValues: AppliedChartData = chartDataSlice
+			.map((item) => ({ value: getValueByDataKey(item, axisSettings.dataKey) }))
+			.filter((av) => av.value != null)
+		return [...chartAppliedValues, ...appliedValues]
+	}
+	return appliedValues
+}
+
+export const selectAnyCartesianItemsUsesChartData = chartSelector(function selectAnyCartesianItemsUsesChartData(state: ChartState, axisType: AllAxisTypes, axisId: AxisId): boolean {
+	return selectCartesianItemsSettings(state, axisType, axisId).some(
+		(item) => !(item as { data?: unknown }).data,
+	)
+})
+
+export const selectAllAppliedValues = chartSelector(function selectAllAppliedValues(state: ChartState, axisType: AllAxisTypes, axisId: AxisId, isPanorama: boolean): AppliedChartData {
+	return combineAllAppliedValues(
+		selectDisplayedData(state, axisType, axisId, isPanorama),
+		selectBaseAxis(state, axisType, axisId),
+		selectCartesianItemsSettings(state, axisType, axisId),
+		selectChartDataWithIndexesIfNotInPanoramaPosition4(state, undefined, undefined, isPanorama),
+		selectAnyCartesianItemsUsesChartData(state, axisType, axisId),
+		selectCartesianGraphicalItemsData(state, axisType, axisId),
+	)
+})
+
+function makeNumber(val: unknown): number | undefined {
+	if (isNumOrStr(val) || val instanceof Date) {
+		const n = Number(val)
+		if (isWellBehavedNumber(n)) {
+			return n
+		}
+	}
+	return undefined
+}
+
+function makeDomain(val: unknown): NumberDomain | undefined {
+	if (Array.isArray(val)) {
+		const attempt = [makeNumber(val[0]), makeNumber(val[1])]
+		if (isWellFormedNumberDomain(attempt)) {
+			return attempt
+		}
+		return undefined
+	}
+	const n = makeNumber(val)
+	if (n == null) {
+		return undefined
+	}
+	return [n, n]
+}
+
+function onlyAllowNumbers(data: ReadonlyArray<unknown>): ReadonlyArray<number> {
+	return data.map(makeNumber).filter(isNotNil)
+}
+
+function sortBy(a: unknown, b: unknown): number {
+	const aNum = makeNumber(a)
+	const bNum = makeNumber(b)
+	if (aNum == null && bNum == null) {
+		return 0
+	}
+	if (aNum == null) {
+		return -1
+	}
+	if (bNum == null) {
+		return 1
+	}
+	return aNum - bNum
+}
+
+export const selectSortedDataPoints = chartSelector(function selectSortedDataPoints(state: ChartState, axisType: AllAxisTypes, axisId: AxisId, isPanorama: boolean): ReadonlyArray<unknown> | undefined {
+	const appliedData = selectAllAppliedValues(state, axisType, axisId, isPanorama)
+	return appliedData?.map((item) => item.value).sort(sortBy)
+})
+
+export function isErrorBarRelevantForAxisType(
+	axisType: AllAxisTypes,
+	errorBar: ErrorBarsSettings,
+): boolean {
+	switch (axisType) {
+		case "xAxis":
+			return errorBar.direction === "x"
+		case "yAxis":
+			return errorBar.direction === "y"
+		default:
+			return false
+	}
+}
+
+export type AppliedChartDataWithErrorDomain = {
+	/**
+	 * This is the value after the dataKey has been applied. Presumably a number? But no guarantees.
+	 */
+	value: unknown
+	/**
+	 * This is the error domain, if any, for the current value.
+	 * This may be either x or y direction, whatever is applicable.
+	 * Assumption is that we're looking at this data from the point of view of a single axis,
+	 * and that axis dictates the relevant direction.
+	 */
+	errorDomain: ReadonlyArray<number> | undefined
+}
+
+/**
+ * @param entry One item in the 'data' array. Could be anything really - this is defined externally. This is the raw, before dataKey application
+ * @param appliedValue This is the result of applying the 'main' dataKey on the `entry`.
+ * @param relevantErrorBars Error bars that are relevant for the current axis and layout and all that.
+ * @return either undefined or an array of ErrorValue
+ */
+export function getErrorDomainByDataKey(
+	entry: unknown,
+	appliedValue: unknown,
+	relevantErrorBars: ReadonlyArray<ErrorBarsSettings> | undefined,
+): ReadonlyArray<number> {
+	if (!relevantErrorBars) {
+		return []
+	}
+
+	if (!relevantErrorBars.length) {
+		return []
+	}
+
+	/* Ranged values (e.g. a [low, high] bar) anchor the error bar at their upper end. */
+	let appliedNumericValue: number | undefined
+	if (typeof appliedValue === "number" && !isNan(appliedValue)) {
+		appliedNumericValue = appliedValue
+	} else if (Array.isArray(appliedValue)) {
+		const numericRangeValues = onlyAllowNumbers(appliedValue)
+		if (numericRangeValues.length > 0) {
+			appliedNumericValue = Math.max(...numericRangeValues)
+		}
+	}
+
+	if (appliedNumericValue == null) {
+		return []
+	}
+	const anchor = appliedNumericValue
+
+	return onlyAllowNumbers(
+		relevantErrorBars.flatMap((eb) => {
+			const errorValue = getValueByDataKey(entry, eb.dataKey)
+			let lowBound: unknown
+			let highBound: unknown
+
+			if (Array.isArray(errorValue)) {
+				;[lowBound, highBound] = errorValue
+			} else {
+				lowBound = errorValue
+				highBound = errorValue
+			}
+			if (!isWellBehavedNumber(lowBound) || !isWellBehavedNumber(highBound)) {
+				return undefined
+			}
+			return [anchor - lowBound, anchor + highBound]
+		}),
+	)
+}
+
+export const selectTooltipAxis = chartSelector((state: ChartState): RenderableAxisSettings => {
+	const axisType = selectTooltipAxisType(state)
+	const axisId = selectTooltipAxisId(state)
+	return selectRenderableAxisSettings(state, axisType, axisId)
+})
+
+export const selectTooltipAxisDataKey = chartSelector(function selectTooltipAxisDataKey(state: ChartState): DataKey<unknown> | undefined {
+	const axis = selectTooltipAxis(state)
+	return axis?.dataKey
+})
+
+export const selectDisplayedStackedData = chartSelector(function selectDisplayedStackedData(state: ChartState, axisType: AllAxisTypes, axisId: AxisId, isPanorama: boolean): DisplayedStackedData {
+	return combineDisplayedStackedData(
+		selectStackedCartesianItemsSettings(state, axisType, axisId),
+		selectChartDataWithIndexesIfNotInPanoramaPosition4(state, undefined, undefined, isPanorama),
+		selectTooltipAxis(state),
+	)
+})
+
+export const combineStackGroups = (
+	displayedData: DisplayedStackedData,
+	items: ReadonlyArray<DefinitelyStackedGraphicalItem>,
+	stackOffsetType: StackOffsetType,
+	reverseStackOrder: boolean,
+): AllStackGroups => {
+	const initialItemsGroups: Record<StackId, Array<DefinitelyStackedGraphicalItem>> = {}
+	const itemsGroup: Record<StackId, ReadonlyArray<DefinitelyStackedGraphicalItem>> = items.reduce(
+		(
+			acc: Record<StackId, Array<DefinitelyStackedGraphicalItem>>,
+			item: DefinitelyStackedGraphicalItem,
+		) => {
+			if (item.stackId == null) {
+				return acc
+			}
+			let stack = acc[item.stackId]
+			if (stack == null) {
+				stack = []
+			}
+			stack.push(item)
+			acc[item.stackId] = stack
+			return acc
+		},
+		initialItemsGroups,
+	)
+
+	return Object.fromEntries(
+		Object.entries(itemsGroup).map(([stackId, graphicalItems]): [StackId, StackGroup] => {
+			const orderedGraphicalItems = reverseStackOrder
+				? [...graphicalItems].reverse()
+				: graphicalItems
+			const dataKeys = orderedGraphicalItems
+				.map((item) => getStackSeriesIdentifier(item))
+				.filter((k): k is string => k != null)
+			return [
+				stackId,
+				{
+					graphicalItems: orderedGraphicalItems,
+					stackedData: getStackedData(
+						displayedData as unknown as Array<Record<string, unknown>>,
+						dataKeys,
+						stackOffsetType,
+					),
+				},
+			]
+		}),
+	)
+}
+
+/**
+ * Stack groups are groups of graphical items that stack on each other.
+ * Stack is a function of axis type (X, Y), axis ID, and stack ID.
+ * Graphical items that do not have a stack ID are not going to be present in stack groups.
+ */
+export const selectStackGroups = chartSelector(function selectStackGroups(state: ChartState, axisType: AllAxisTypes, axisId: AxisId, isPanorama: boolean): AllStackGroups | undefined {
+	return combineStackGroups(
+		selectDisplayedStackedData(state, axisType, axisId, isPanorama),
+		selectStackedCartesianItemsSettings(state, axisType, axisId),
+		selectStackOffsetType(state),
+		selectReverseStackOrder(state),
+	)
+})
+
+export const combineDomainOfStackGroups = (
+	stackGroups: AllStackGroups | undefined,
+	{ dataStartIndex, dataEndIndex }: ChartDataState,
+	axisType: AllAxisTypes,
+	domainFromUserPreference: NumberDomain | undefined,
+): NumberDomain | undefined => {
+	if (domainFromUserPreference != null) {
+		return undefined
+	}
+	if (axisType === "zAxis") {
+		return undefined
+	}
+	return getDomainOfStackGroups(stackGroups, dataStartIndex, dataEndIndex)
+}
+
+function selectAllowsDataOverflow(
+	state: ChartState,
+	axisType: AllAxisTypes,
+	axisId: AxisId,
+): boolean {
+	return selectBaseAxis(state, axisType, axisId).allowDataOverflow
+}
+
+export const getDomainDefinition = (axisSettings: AllAxisSettings): AxisDomain => {
+	if (axisSettings == null || !("domain" in axisSettings)) {
+		return defaultNumericDomain
+	}
+
+	if (axisSettings.domain != null) {
+		return axisSettings.domain
+	}
+	if ("ticks" in axisSettings && axisSettings.ticks != null) {
+		if (axisSettings.type === "number") {
+			const allValues = onlyAllowNumbers(axisSettings.ticks)
+			return [Math.min(...allValues), Math.max(...allValues)]
+		}
+		if (axisSettings.type === "category") {
+			return axisSettings.ticks.map(String)
+		}
+	}
+	return axisSettings?.domain ?? defaultNumericDomain
+}
+
+export const selectDomainDefinition = chartSelector(function selectDomainDefinition(state: ChartState, axisType: AllAxisTypes, axisId: AxisId): AxisDomain {
+	return getDomainDefinition(selectBaseAxis(state, axisType, axisId))
+})
+
+/**
+ * Under certain circumstances, we can determine the domain without looking at the data at all.
+ * This is the case when the domain is explicitly specified as numbers, or when it is specified
+ * as 'auto' or 'dataMin'/'dataMax' and data overflow is not allowed.
+ *
+ * In that case, this function will return the domain, otherwise it returns undefined.
+ *
+ * This is an optimization to avoid unnecessary data processing.
+ */
+export const selectDomainFromUserPreference = chartSelector(function selectDomainFromUserPreference(state: ChartState, axisType: AllAxisTypes, axisId: AxisId): NumberDomain | undefined {
+	return numericalDomainSpecifiedWithoutRequiringData(
+		selectDomainDefinition(state, axisType, axisId),
+		selectAllowsDataOverflow(state, axisType, axisId),
+	)
+})
+
+export const selectDomainOfStackGroups = chartSelector(function selectDomainOfStackGroups(state: ChartState, axisType: AllAxisTypes, axisId: AxisId, isPanorama: boolean): NumberDomain | undefined {
+	return combineDomainOfStackGroups(
+		selectStackGroups(state, axisType, axisId, isPanorama),
+		selectChartDataWithIndexes(state),
+		axisType,
+		selectDomainFromUserPreference(state, axisType, axisId),
+	)
+})
+
+export const selectAllErrorBarSettings = (state: ChartState): ErrorBarsState =>
+	state.errorBars
+
+const combineRelevantErrorBarSettings = (
+	cartesianItemsSettings: ReadonlyArray<CartesianGraphicalItemSettings>,
+	allErrorBarSettings: ErrorBarsState,
+	axisType: RenderableAxisType,
+): ReadonlyArray<ErrorBarsSettings> => {
+	return cartesianItemsSettings
+		.flatMap((item) => {
+			return allErrorBarSettings[item.id]
+		})
+		.filter((e): e is ErrorBarsSettings => e != null)
+		.filter((e) => {
+			return isErrorBarRelevantForAxisType(axisType, e)
+		})
+}
+
+export const mergeDomains = (
+	...domains: ReadonlyArray<ReadonlyArray<number> | undefined>
+): NumberDomain | undefined => {
+	const allDomains = domains.filter((d): d is ReadonlyArray<number> => d != null)
+	if (allDomains.length === 0) {
+		return undefined
+	}
+	const allValues = allDomains.flat()
+	const min = Math.min(...allValues)
+	const max = Math.max(...allValues)
+	return [min, max]
+}
+
+export const combineDomainOfAllAppliedNumericalValuesIncludingErrorValues = (
+	displayedData: ChartData,
+	axisSettings: BaseCartesianAxis,
+	items: ReadonlyArray<GraphicalItemSettings>,
+	errorBars: ErrorBarsState,
+	axisType: AllAxisTypes,
+	chartDataSlice: ChartData = [],
+): NumberDomain | undefined => {
+	let lowerEnd: number | undefined
+	let upperEnd: number | undefined
+	if (items.length > 0) {
+		/*
+		 * Iterate item-first so each item can use its own `data` prop when present,
+		 * falling back to the chart-level data slice for items that rely on it.
+		 * This ensures that mixing items with and without own data (e.g. Bar reading
+		 * chart-level data alongside a Scatter with its own outlier data) produces a
+		 * domain that covers all values from all sources.
+		 */
+		items.forEach((item) => {
+			const ownData = (item as { data?: ChartData }).data
+			const itemData: ChartData = ownData != null ? [...ownData] : chartDataSlice
+			const relevantErrorBars = errorBars[item.id]?.filter((errorBar) =>
+				isErrorBarRelevantForAxisType(axisType, errorBar),
+			)
+			itemData.forEach((entry) => {
+				const valueByDataKey = getValueByDataKey(entry, axisSettings.dataKey ?? item.dataKey)
+				const errorDomain = getErrorDomainByDataKey(entry, valueByDataKey, relevantErrorBars)
+				if (errorDomain.length >= 2) {
+					const localLower = Math.min(...errorDomain)
+					const localUpper = Math.max(...errorDomain)
+					if (lowerEnd == null || localLower < lowerEnd) {
+						lowerEnd = localLower
+					}
+					if (upperEnd == null || localUpper > upperEnd) {
+						upperEnd = localUpper
+					}
+				}
+				const dataValueDomain: NumberDomain | undefined = makeDomain(valueByDataKey)
+				if (dataValueDomain != null) {
+					lowerEnd = lowerEnd == null ? dataValueDomain[0] : Math.min(lowerEnd, dataValueDomain[0])
+					upperEnd = upperEnd == null ? dataValueDomain[1] : Math.max(upperEnd, dataValueDomain[1])
+				}
+			})
+		})
+	}
+	if (axisSettings?.dataKey != null && items.length === 0) {
+		// When there are no items, fall back to the displayed data (chart-level or graphical item data).
+		displayedData.forEach((item) => {
+			const dataValueDomain: NumberDomain | undefined = makeDomain(
+				getValueByDataKey(item, axisSettings.dataKey),
+			)
+			if (dataValueDomain != null) {
+				lowerEnd = lowerEnd == null ? dataValueDomain[0] : Math.min(lowerEnd, dataValueDomain[0])
+				upperEnd = upperEnd == null ? dataValueDomain[1] : Math.max(upperEnd, dataValueDomain[1])
+			}
+		})
+	}
+
+	if (isWellBehavedNumber(lowerEnd) && isWellBehavedNumber(upperEnd)) {
+		return [lowerEnd, upperEnd]
+	}
+	return undefined
+}
+
+const selectDomainOfAllAppliedNumericalValuesIncludingErrorValues = chartSelector(function selectDomainOfAllAppliedNumericalValuesIncludingErrorValues(state: ChartState, axisType: AllAxisTypes, axisId: AxisId, isPanorama: boolean): NumberDomain | undefined {
+	return combineDomainOfAllAppliedNumericalValuesIncludingErrorValues(
+		selectDisplayedData(state, axisType, axisId, isPanorama),
+		selectBaseAxis(state, axisType, axisId),
+		selectCartesianItemsSettingsExceptStacked(state, axisType, axisId),
+		selectAllErrorBarSettings(state),
+		axisType,
+		selectChartDataSliceIfNotInPanorama(state, undefined, undefined, isPanorama),
+	)
+})
+
+function onlyAllowNumbersAndStringsAndDates(item: {
+	value: unknown
+}): string | number | Date | undefined {
+	const { value } = item
+	if (isNumOrStr(value) || value instanceof Date) {
+		return value
+	}
+	return undefined
+}
+
+const computeDomainOfTypeCategory = (
+	allDataSquished: AppliedChartData,
+	axisSettings: BaseCartesianAxis,
+	isCategorical: boolean,
+): CategoricalDomain => {
+	const categoricalDomain = allDataSquished
+		.map(onlyAllowNumbersAndStringsAndDates)
+		.filter((v) => v != null)
+	if (
+		isCategorical &&
+		(axisSettings.dataKey == null ||
+			(axisSettings.allowDuplicatedCategory && hasDuplicate(categoricalDomain)))
+	) {
+		return range(0, allDataSquished.length)
+	}
+	if (axisSettings.allowDuplicatedCategory) {
+		return categoricalDomain
+	}
+	return Array.from(new Set(categoricalDomain))
+}
+
+export const selectReferenceDots = (
+	state: ChartState,
+): ReadonlyArray<ReferenceDotSettings> => state.referenceElements.dots
+
+export const filterReferenceElements = <T extends ReferenceElementSettings>(
+	elements: ReadonlyArray<T>,
+	axisType: AllAxisTypes,
+	axisId: AxisId,
+): ReadonlyArray<T> => {
+	return elements
+		.filter((el) => el.ifOverflow === "extendDomain")
+		.filter((el) => {
+			if (axisType === "xAxis") {
+				return el.xAxisId === axisId
+			}
+			return el.yAxisId === axisId
+		})
+}
+
+export const selectReferenceDotsByAxis = chartSelector(function selectReferenceDotsByAxis(state: ChartState, axisType: AllAxisTypes, axisId: AxisId): ReadonlyArray<ReferenceDotSettings> {
+	return filterReferenceElements(selectReferenceDots(state), axisType, axisId)
+})
+
+export const selectReferenceAreas = (
+	state: ChartState,
+): ReadonlyArray<ReferenceAreaSettings> => state.referenceElements.areas
+
+export const selectReferenceAreasByAxis = chartSelector(function selectReferenceAreasByAxis(state: ChartState, axisType: AllAxisTypes, axisId: AxisId): ReadonlyArray<ReferenceAreaSettings> {
+	return filterReferenceElements(selectReferenceAreas(state), axisType, axisId)
+})
+
+export const selectReferenceLines = (
+	state: ChartState,
+): ReadonlyArray<ReferenceLineSettings> => state.referenceElements.lines
+
+export const selectReferenceLinesByAxis = chartSelector(function selectReferenceLinesByAxis(state: ChartState, axisType: AllAxisTypes, axisId: AxisId): ReadonlyArray<ReferenceLineSettings> {
+	return filterReferenceElements(selectReferenceLines(state), axisType, axisId)
+})
+
+export const combineDotsDomain = (
+	dots: ReadonlyArray<ReferenceDotSettings> | undefined,
+	axisType: RenderableAxisType,
+): NumberDomain | undefined => {
+	if (dots == null) {
+		return undefined
+	}
+	const allCoords = onlyAllowNumbers(dots.map((dot) => (axisType === "xAxis" ? dot.x : dot.y)))
+	if (allCoords.length === 0) {
+		return undefined
+	}
+	return [Math.min(...allCoords), Math.max(...allCoords)]
+}
+
+const selectReferenceDotsDomain = chartSelector(function selectReferenceDotsDomain(state: ChartState, axisType: AllAxisTypes, axisId: AxisId): NumberDomain | undefined {
+	return combineDotsDomain(
+		selectReferenceDotsByAxis(state, axisType, axisId),
+		axisType as RenderableAxisType,
+	)
+})
+
+export const combineAreasDomain = (
+	areas: ReadonlyArray<ReferenceAreaSettings> | undefined,
+	axisType: RenderableAxisType,
+): NumberDomain | undefined => {
+	if (areas == null) {
+		return undefined
+	}
+	const allCoords = onlyAllowNumbers(
+		areas.flatMap((area) => [
+			axisType === "xAxis" ? area.x1 : area.y1,
+			axisType === "xAxis" ? area.x2 : area.y2,
+		]),
+	)
+	if (allCoords.length === 0) {
+		return undefined
+	}
+	return [Math.min(...allCoords), Math.max(...allCoords)]
+}
+
+const selectReferenceAreasDomain = chartSelector(function selectReferenceAreasDomain(state: ChartState, axisType: AllAxisTypes, axisId: AxisId): NumberDomain | undefined {
+	return combineAreasDomain(
+		selectReferenceAreasByAxis(state, axisType, axisId),
+		axisType as RenderableAxisType,
+	)
+})
+
+function extractXCoordinates(line: ReferenceLineSettings): ReadonlyArray<number> {
+	if (line.x != null) {
+		return onlyAllowNumbers([line.x])
+	}
+	const segmentCoordinates: ReadonlyArray<string | number | undefined> | undefined =
+		line.segment?.map((s) => s.x)
+	if (segmentCoordinates == null || segmentCoordinates.length === 0) {
+		return []
+	}
+	return onlyAllowNumbers(segmentCoordinates)
+}
+
+function extractYCoordinates(line: ReferenceLineSettings): ReadonlyArray<number> {
+	if (line.y != null) {
+		return onlyAllowNumbers([line.y])
+	}
+	const segmentCoordinates: ReadonlyArray<string | number | undefined> | undefined =
+		line.segment?.map((s) => s.y)
+	if (segmentCoordinates == null || segmentCoordinates.length === 0) {
+		return []
+	}
+	return onlyAllowNumbers(segmentCoordinates)
+}
+
+export const combineLinesDomain = (
+	lines: ReadonlyArray<ReferenceLineSettings> | undefined,
+	axisType: RenderableAxisType,
+): NumberDomain | undefined => {
+	if (lines == null) {
+		return undefined
+	}
+	const allCoords: ReadonlyArray<number> = lines.flatMap((line) =>
+		axisType === "xAxis" ? extractXCoordinates(line) : extractYCoordinates(line),
+	)
+	if (allCoords.length === 0) {
+		return undefined
+	}
+	return [Math.min(...allCoords), Math.max(...allCoords)]
+}
+
+const selectReferenceLinesDomain = chartSelector(function selectReferenceLinesDomain(state: ChartState, axisType: AllAxisTypes, axisId: AxisId): NumberDomain | undefined {
+	return combineLinesDomain(
+		selectReferenceLinesByAxis(state, axisType, axisId),
+		axisType as RenderableAxisType,
+	)
+})
+
+const selectReferenceElementsDomain = chartSelector(function selectReferenceElementsDomain(state: ChartState, axisType: AllAxisTypes, axisId: AxisId): NumberDomain | undefined {
+	const dotsDomain = selectReferenceDotsDomain(state, axisType, axisId)
+	const linesDomain = selectReferenceLinesDomain(state, axisType, axisId)
+	const areasDomain = selectReferenceAreasDomain(state, axisType, axisId)
+	return mergeDomains(dotsDomain, areasDomain, linesDomain)
+})
+
+export const combineNumericalDomain = (
+	axisSettings: BaseCartesianAxis,
+	domainDefinition: AxisDomain | undefined,
+	domainFromUserPreference: NumberDomain | undefined,
+	domainOfStackGroups: NumberDomain | undefined,
+	dataAndErrorBarsDomain: NumberDomain | undefined,
+	referenceElementsDomain: NumberDomain | undefined,
+	layout: LayoutType,
+	axisType: AllAxisTypes,
+	numericTicksDomain?: NumberDomain | undefined,
+): NumberDomain | undefined => {
+	if (domainFromUserPreference != null) {
+		return domainFromUserPreference
+	}
+
+	const shouldIncludeDomainOfStackGroups =
+		(layout === "vertical" && axisType === "xAxis") ||
+		(layout === "horizontal" && axisType === "yAxis")
+
+	const mergedDomains = shouldIncludeDomainOfStackGroups
+		? mergeDomains(domainOfStackGroups, referenceElementsDomain, dataAndErrorBarsDomain)
+		: mergeDomains(referenceElementsDomain, dataAndErrorBarsDomain)
+
+	const parsedDomain = parseNumericalUserDomain(domainDefinition, mergedDomains, axisSettings.allowDataOverflow)
+	if (parsedDomain != null) {
+		return parsedDomain
+	}
+
+	/*
+	 * https://github.com/recharts/recharts/issues/7362
+	 * The user-provided domain could not be resolved without data - it's a function
+	 * bound or one of 'auto'/'dataMin'/'dataMax' - and there is no data domain to
+	 * resolve it from: empty or all-null data, and no domain-extending reference
+	 * elements. If the axis opted into data overflow and supplied an explicit numeric
+	 * `ticks` array, fall back to the ticks' [min, max] extent so the explicit tick
+	 * ladder still renders, mirroring what a literal numeric domain already does.
+	 */
+	if (axisSettings.allowDataOverflow && mergedDomains == null && numericTicksDomain != null) {
+		return numericTicksDomain
+	}
+
+	return parsedDomain
+}
+
+/**
+ * https://github.com/recharts/recharts/issues/7362
+ * Derives the [min, max] extent of an axis's explicit numeric `ticks`. Used by
+ * {@link combineNumericalDomain} as a last-resort domain when a non-literal domain
+ * cannot be resolved without data. Returns undefined for non-number axes, or when
+ * no numeric ticks were supplied.
+ */
+export const combineNumericTicksDomain = (
+	axisSettings: BaseCartesianAxis | undefined,
+): NumberDomain | undefined => {
+	if (axisSettings == null || axisSettings.type !== "number" || !("ticks" in axisSettings)) {
+		return undefined
+	}
+	const ticks = (axisSettings as { ticks?: ReadonlyArray<unknown> }).ticks
+	if (ticks == null) {
+		return undefined
+	}
+	const numericTicks = onlyAllowNumbers(ticks)
+	if (numericTicks.length === 0) {
+		return undefined
+	}
+	return [Math.min(...numericTicks), Math.max(...numericTicks)]
+}
+
+export const selectNumericTicksDomain = chartSelector(function selectNumericTicksDomain(state: ChartState, axisType: AllAxisTypes, axisId: AxisId): NumberDomain | undefined {
+	return combineNumericTicksDomain(selectBaseAxis(state, axisType, axisId))
+})
+
+export const selectNumericalDomain = chartSelector(function selectNumericalDomain(state: ChartState, axisType: AllAxisTypes, axisId: AxisId, isPanorama: boolean): NumberDomain | undefined {
+	return combineNumericalDomain(
+		selectBaseAxis(state, axisType, axisId),
+		selectDomainDefinition(state, axisType, axisId),
+		selectDomainFromUserPreference(state, axisType, axisId),
+		selectDomainOfStackGroups(state, axisType, axisId, isPanorama),
+		selectDomainOfAllAppliedNumericalValuesIncludingErrorValues(
+			state,
+			axisType,
+			axisId,
+			isPanorama,
+		),
+		selectReferenceElementsDomain(state, axisType, axisId),
+		selectChartLayout(state),
+		axisType,
+		selectNumericTicksDomain(state, axisType, axisId),
+	)
+})
+
+/**
+ * Expand by design maps everything between 0 and 1,
+ * there is nothing to compute.
+ * See https://d3js.org/d3-shape/stack#stack-offsets
+ */
+const expandDomain: NumberDomain = [0, 1]
+
+export const combineAxisDomain = (
+	axisSettings: BaseCartesianAxis,
+	layout: LayoutType,
+	displayedData: ChartData | undefined,
+	allAppliedValues: AppliedChartData,
+	stackOffsetType: StackOffsetType,
+	axisType: AllAxisTypes,
+	numericalDomain: NumberDomain | undefined,
+): NumberDomain | CategoricalDomain | undefined => {
+	if (
+		(axisSettings == null || displayedData == null || displayedData.length === 0) &&
+		numericalDomain === undefined
+	) {
+		return undefined
+	}
+	const { dataKey, type } = axisSettings
+	const isCategorical = isCategoricalAxis(layout, axisType)
+
+	if (isCategorical && dataKey == null) {
+		return range(0, displayedData?.length ?? 0)
+	}
+
+	if (type === "category") {
+		return computeDomainOfTypeCategory(allAppliedValues, axisSettings, isCategorical)
+	}
+
+	if (stackOffsetType === "expand" && !isCategorical) {
+		return expandDomain
+	}
+	return numericalDomain
+}
+
+export const selectAxisDomain = chartSelector(function selectAxisDomain(state: ChartState, axisType: AllAxisTypes, axisId: AxisId, isPanorama: boolean): NumberDomain | CategoricalDomain | undefined {
+	return combineAxisDomain(
+		selectBaseAxis(state, axisType, axisId),
+		selectChartLayout(state),
+		selectDisplayedData(state, axisType, axisId, isPanorama),
+		selectAllAppliedValues(state, axisType, axisId, isPanorama),
+		selectStackOffsetType(state),
+		axisType,
+		selectNumericalDomain(state, axisType, axisId, isPanorama),
+	)
+})
+
+export const selectRealScaleType = chartSelector(function selectRealScaleType(state: ChartState, axisType: AllAxisTypes, axisId: AxisId): D3ScaleType | undefined {
+	return combineRealScaleType(
+		selectBaseAxis(state, axisType, axisId),
+		selectHasBar(state),
+		selectChartName(state),
+	)
+})
+
+export const combineNiceTicks = (
+	axisDomain: NumberDomain | CategoricalDomain | undefined,
+	axisSettings: RenderableAxisSettings,
+	realScaleType: string | undefined,
+): ReadonlyArray<number> | undefined => {
+	const niceTicks = axisSettings?.niceTicks
+
+	if (niceTicks === "none") {
+		return undefined
+	}
+
+	const domainDefinition: AxisDomain = getDomainDefinition(axisSettings)
+	const hasDomainAutoKeyword =
+		Array.isArray(domainDefinition) && (domainDefinition[0] === "auto" || domainDefinition[1] === "auto")
+
+	if (
+		(niceTicks === "snap125" || niceTicks === "adaptive") &&
+		axisSettings != null &&
+		axisSettings.tickCount &&
+		isWellFormedNumberDomain(axisDomain)
+	) {
+		if (hasDomainAutoKeyword) {
+			return getNiceTickValues(axisDomain, axisSettings.tickCount, axisSettings.allowDecimals, niceTicks)
+		}
+		if (axisSettings.type === "number") {
+			return getTickValuesFixedDomain(
+				axisDomain as NumberDomain,
+				axisSettings.tickCount,
+				axisSettings.allowDecimals,
+				niceTicks,
+			)
+		}
+	}
+
+	if (niceTicks === "auto" && realScaleType === "linear" && axisSettings != null && axisSettings.tickCount) {
+		/* Apply nice ticks when the domain contains an 'auto' keyword (may extend the domain),
+		   or for any fixed number-type axis. Always the space-efficient (adaptive) algorithm. */
+		if (hasDomainAutoKeyword && isWellFormedNumberDomain(axisDomain)) {
+			return getNiceTickValues(axisDomain, axisSettings.tickCount, axisSettings.allowDecimals, "adaptive")
+		}
+
+		if (axisSettings.type === "number" && isWellFormedNumberDomain(axisDomain)) {
+			return getTickValuesFixedDomain(
+				axisDomain as NumberDomain,
+				axisSettings.tickCount,
+				axisSettings.allowDecimals,
+				"adaptive",
+			)
+		}
+	}
+
+	return undefined
+}
+
+export const selectNiceTicks = chartSelector(function selectNiceTicks(state: ChartState, axisType: RenderableAxisType, axisId: AxisId, isPanorama: boolean): ReadonlyArray<number> | undefined {
+	return combineNiceTicks(
+		selectAxisDomain(state, axisType, axisId, isPanorama),
+		selectRenderableAxisSettings(state, axisType, axisId),
+		selectRealScaleType(state, axisType, axisId),
+	)
+})
+
+export const combineAxisDomainWithNiceTicks = (
+	axisSettings: BaseCartesianAxis,
+	domain: NumberDomain | CategoricalDomain | undefined,
+	niceTicks: ReadonlyArray<number> | undefined,
+	axisType: RenderableAxisType,
+): NumberDomain | CategoricalDomain | undefined => {
+	if (
+		axisType !== "angleAxis" &&
+		axisSettings?.type === "number" &&
+		isWellFormedNumberDomain(domain) &&
+		Array.isArray(niceTicks) &&
+		niceTicks.length > 0
+	) {
+		const minFromDomain = domain[0]
+		const minFromTicks = niceTicks[0] ?? 0
+		const maxFromDomain = domain[1]
+		const maxFromTicks = niceTicks[niceTicks.length - 1] ?? 0
+		return [Math.min(minFromDomain, minFromTicks), Math.max(maxFromDomain, maxFromTicks)]
+	}
+	return domain
+}
+
+export const selectAxisDomainIncludingNiceTicks = chartSelector(function selectAxisDomainIncludingNiceTicks(state: ChartState, axisType: RenderableAxisType, axisId: AxisId, isPanorama: boolean): NumberDomain | CategoricalDomain | undefined {
+	return combineAxisDomainWithNiceTicks(
+		selectBaseAxis(state, axisType, axisId),
+		selectAxisDomain(state, axisType, axisId, isPanorama),
+		selectNiceTicks(state, axisType, axisId, isPanorama),
+		axisType,
+	)
+})
+
+/**
+ * Returns the smallest gap, between two numbers in the data, as a ratio of the whole range (max - min).
+ * Ignores domain provided by user and only considers domain from data.
+ *
+ * The result is a number between 0 and 1.
+ */
+export const selectSmallestDistanceBetweenValues = chartSelector(function selectSmallestDistanceBetweenValues(state: ChartState, axisType: RenderableAxisType, axisId: AxisId, isPanorama: boolean): number | undefined {
+	const allDataSquished = selectAllAppliedValues(state, axisType, axisId, isPanorama)
+	const axisSettings = selectBaseAxis(state, axisType, axisId)
+	if (!axisSettings || axisSettings.type !== "number") {
+		return undefined
+	}
+	let smallestDistanceBetweenValues = Infinity
+	const sortedValues = Array.from(onlyAllowNumbers(allDataSquished.map((d) => d.value))).sort(
+		(a, b) => a - b,
+	)
+	const first = sortedValues[0]
+	const last = sortedValues[sortedValues.length - 1]
+	if (first == null || last == null) {
+		return Infinity
+	}
+	const diff = last - first
+	if (diff === 0) {
+		return Infinity
+	}
+	for (let i = 0; i < sortedValues.length - 1; i++) {
+		const curr = sortedValues[i]
+		const next = sortedValues[i + 1]
+		if (curr == null || next == null) {
+			continue
+		}
+		const distance = next - curr
+		smallestDistanceBetweenValues = Math.min(smallestDistanceBetweenValues, distance)
+	}
+	return smallestDistanceBetweenValues / diff
+})
+
+const selectCalculatedPadding = chartSelector(function selectCalculatedPadding(state: ChartState, axisType: RenderableAxisType, axisId: AxisId, isPanorama: boolean, padding: string): number {
+	const smallestDistanceInPercent = selectSmallestDistanceBetweenValues(
+		state,
+		axisType,
+		axisId,
+		isPanorama,
+	)
+	const layout = selectChartLayout(state)
+	const barCategoryGap = selectBarCategoryGap(state)
+	const offset = selectChartOffsetInternal(state)
+
+	if (!isWellBehavedNumber(smallestDistanceInPercent)) {
+		return 0
+	}
+	const rangeWidth = layout === "vertical" ? offset.height : offset.width
+
+	if (padding === "gap") {
+		return (smallestDistanceInPercent * rangeWidth) / 2
+	}
+
+	if (padding === "no-gap") {
+		const gap = getPercentValue(barCategoryGap, smallestDistanceInPercent * rangeWidth)
+		const halfBand = (smallestDistanceInPercent * rangeWidth) / 2
+		return halfBand - gap - ((halfBand - gap) / rangeWidth) * gap
+	}
+
+	return 0
+})
+
+export const selectCalculatedXAxisPadding = chartSelector((
+	state: ChartState,
+	axisId: AxisId,
+	isPanorama: boolean,
+): number => {
+	const xAxisSettings = selectXAxisSettings(state, axisId)
+	if (xAxisSettings == null || typeof xAxisSettings.padding !== "string") {
+		return 0
+	}
+	return selectCalculatedPadding(state, "xAxis", axisId, isPanorama, xAxisSettings.padding)
+})
+
+export const selectCalculatedYAxisPadding = chartSelector((
+	state: ChartState,
+	axisId: AxisId,
+	isPanorama: boolean,
+): number => {
+	const yAxisSettings = selectYAxisSettings(state, axisId)
+	if (yAxisSettings == null || typeof yAxisSettings.padding !== "string") {
+		return 0
+	}
+	return selectCalculatedPadding(state, "yAxis", axisId, isPanorama, yAxisSettings.padding)
+})
+
+const selectXAxisPadding = chartSelector(function selectXAxisPadding(state: ChartState, axisId: AxisId, isPanorama: boolean): { left: number; right: number } {
+	const xAxisSettings = selectXAxisSettings(state, axisId)
+	const calculated = selectCalculatedXAxisPadding(state, axisId, isPanorama)
+	if (xAxisSettings == null) {
+		return { left: 0, right: 0 }
+	}
+	const { padding } = xAxisSettings
+	if (typeof padding === "string") {
+		return { left: calculated, right: calculated }
+	}
+	return {
+		left: (padding.left ?? 0) + calculated,
+		right: (padding.right ?? 0) + calculated,
+	}
+})
+
+const selectYAxisPadding = chartSelector(function selectYAxisPadding(state: ChartState, axisId: AxisId, isPanorama: boolean): { top: number; bottom: number } {
+	const yAxisSettings = selectYAxisSettings(state, axisId)
+	const calculated = selectCalculatedYAxisPadding(state, axisId, isPanorama)
+	if (yAxisSettings == null) {
+		return { bottom: 0, top: 0 }
+	}
+	const { padding } = yAxisSettings
+	if (typeof padding === "string") {
+		return { bottom: calculated, top: calculated }
+	}
+	return {
+		bottom: (padding.bottom ?? 0) + calculated,
+		top: (padding.top ?? 0) + calculated,
+	}
+})
+
+export type AxisRange = readonly [number, number]
+
+export const selectXAxisRange = chartSelector(function selectXAxisRange(state: ChartState, axisId: AxisId, isPanorama: boolean): AxisRange | undefined {
+	const offset = selectChartOffsetInternal(state)
+	const padding = selectXAxisPadding(state, axisId, isPanorama)
+	const brushDimensions = selectBrushDimensions(state)
+	const { padding: brushPadding } = selectBrushSettings(state)
+	if (isPanorama) {
+		return [brushPadding.left, brushDimensions.width - brushPadding.right]
+	}
+	return [offset.left + padding.left, offset.left + offset.width - padding.right]
+})
+
+export const selectYAxisRange = chartSelector(function selectYAxisRange(state: ChartState, axisId: AxisId, isPanorama: boolean): AxisRange | undefined {
+	const offset = selectChartOffsetInternal(state)
+	const layout = selectChartLayout(state)
+	const padding = selectYAxisPadding(state, axisId, isPanorama)
+	const brushDimensions = selectBrushDimensions(state)
+	const { padding: brushPadding } = selectBrushSettings(state)
+	if (isPanorama) {
+		return [brushDimensions.height - brushPadding.bottom, brushPadding.top]
+	}
+	if (layout === "horizontal") {
+		return [offset.top + offset.height - padding.bottom, offset.top + padding.top]
+	}
+	return [offset.top + padding.top, offset.top + offset.height - padding.bottom]
+})
+
+export const selectAxisRange = chartSelector((
+	state: ChartState,
+	axisType: AllAxisTypes,
+	axisId: AxisId,
+	isPanorama: boolean,
+): AxisRange | undefined => {
+	switch (axisType) {
+		case "xAxis":
+			return selectXAxisRange(state, axisId, isPanorama)
+		case "yAxis":
+			return selectYAxisRange(state, axisId, isPanorama)
+		case "zAxis":
+			return selectZAxisSettings(state, axisId)?.range
+		case "angleAxis":
+			return selectAngleAxisRange(state)
+		case "radiusAxis":
+			return selectRadiusAxisRange(state, axisId)
+		default:
+			return undefined
+	}
+})
+
+export const selectAxisRangeWithReverse = chartSelector(function selectAxisRangeWithReverse(state: ChartState, axisType: AllAxisTypes, axisId: AxisId, isPanorama: boolean): AxisRange | undefined {
+	return combineAxisRangeWithReverse(
+		selectBaseAxis(state, axisType, axisId),
+		selectAxisRange(state, axisType, axisId, isPanorama),
+	)
+})
+
+export const selectCheckedAxisDomain = chartSelector(function selectCheckedAxisDomain(state: ChartState, axisType: RenderableAxisType, axisId: AxisId, isPanorama: boolean): NumberDomain | CategoricalDomain | undefined {
+	return combineCheckedDomain(
+		selectRealScaleType(state, axisType, axisId),
+		selectAxisDomainIncludingNiceTicks(state, axisType, axisId, isPanorama),
+	)
+})
+
+const selectConfiguredScale = chartSelector(function selectConfiguredScale(state: ChartState, axisType: RenderableAxisType, axisId: AxisId, isPanorama: boolean): CustomScaleDefinition | undefined {
+	return combineConfiguredScale(
+		selectBaseAxis(state, axisType, axisId),
+		selectRealScaleType(state, axisType, axisId),
+		selectCheckedAxisDomain(state, axisType, axisId, isPanorama),
+		selectAxisRangeWithReverse(state, axisType, axisId, isPanorama),
+	)
+})
+
+export const combineCategoricalDomain = (
+	layout: LayoutType,
+	appliedValues: AppliedChartData,
+	axis: RenderableAxisSettings,
+	axisType: RenderableAxisType,
+): ReadonlyArray<unknown> | undefined => {
+	if (axis == null || axis.dataKey == null) {
+		return undefined
+	}
+	const { type, scale } = axis
+	const isCategorical = isCategoricalAxis(layout, axisType)
+	if (isCategorical && (type === "number" || scale !== "auto")) {
+		return appliedValues.map((d) => d.value)
+	}
+	return undefined
+}
+
+export const selectCategoricalDomain = chartSelector(function selectCategoricalDomain(state: ChartState, axisType: RenderableAxisType, axisId: AxisId, isPanorama: boolean): ReadonlyArray<unknown> | undefined {
+	return combineCategoricalDomain(
+		selectChartLayout(state),
+		selectAllAppliedValues(state, axisType, axisId, isPanorama),
+		selectRenderableAxisSettings(state, axisType, axisId),
+		axisType,
+	)
+})
+
+export const selectAxisScale = chartSelector(function selectAxisScale(state: ChartState, axisType: RenderableAxisType, axisId: AxisId, isPanorama: boolean): RechartsScale | undefined {
+	return rechartsScaleFactory(selectConfiguredScale(state, axisType, axisId, isPanorama))
+})
+
+export const selectAxisInverseScale = chartSelector(function selectAxisInverseScale(state: ChartState, axisType: RenderableAxisType, axisId: AxisId, isPanorama: boolean): InverseScaleFunction | undefined {
+	return combineInverseScaleFunction(selectConfiguredScale(state, axisType, axisId, isPanorama))
+})
+
+export const selectAxisInverseDataSnapScale = chartSelector(function selectAxisInverseDataSnapScale(state: ChartState, axisType: RenderableAxisType, axisId: AxisId, isPanorama: boolean): InverseScaleFunction | undefined {
+	return createCategoricalInverse(
+		selectConfiguredScale(state, axisType, axisId, isPanorama),
+		selectSortedDataPoints(state, axisType, axisId, isPanorama),
+	)
+})
+
+export const selectErrorBarsSettings = chartSelector(function selectErrorBarsSettings(state: ChartState, axisType: AllAxisTypes, axisId: AxisId): ReadonlyArray<ErrorBarsSettings> {
+	return combineRelevantErrorBarSettings(
+		selectCartesianItemsSettings(state, axisType, axisId),
+		selectAllErrorBarSettings(state),
+		axisType as RenderableAxisType,
+	)
+})
+
+function compareIds(a: CartesianAxisSettings, b: CartesianAxisSettings) {
+	if (a.id < b.id) {
+		return -1
+	}
+	if (a.id > b.id) {
+		return 1
+	}
+	return 0
+}
+
+const selectAllXAxesWithOffsetType = chartSelector(function selectAllXAxesWithOffsetType(state: ChartState, orientation: XAxisOrientation, mirror: boolean): ReadonlyArray<XAxisSettings> {
+	return selectAllXAxes(state)
+		.filter((axis) => axis.orientation === orientation)
+		.filter((axis) => axis.mirror === mirror)
+		.sort(compareIds)
+})
+
+const selectAllYAxesWithOffsetType = chartSelector(function selectAllYAxesWithOffsetType(state: ChartState, orientation: YAxisOrientation, mirror: boolean): ReadonlyArray<YAxisSettings> {
+	return selectAllYAxes(state)
+		.filter((axis) => axis.orientation === orientation)
+		.filter((axis) => axis.mirror === mirror)
+		.sort(compareIds)
+})
+
+const getXAxisSize = (offset: ChartOffsetInternal, axisSettings: XAxisSettings): Size => {
+	const height = typeof axisSettings.height === "number" ? axisSettings.height : DEFAULT_X_AXIS_HEIGHT
+	return {
+		height,
+		width: offset.width,
+	}
+}
+
+const getYAxisSize = (offset: ChartOffsetInternal, axisSettings: YAxisSettings): Size => {
+	const width = typeof axisSettings.width === "number" ? axisSettings.width : DEFAULT_Y_AXIS_WIDTH
+	return {
+		height: offset.height,
+		width,
+	}
+}
+
+export const selectXAxisSize = chartSelector(function selectXAxisSize(state: ChartState, xAxisId: AxisId): Size {
+	return getXAxisSize(selectChartOffsetInternal(state), selectXAxisSettings(state, xAxisId))
+})
+
+type AxisOffsetSteps = Record<AxisId, number>
+
+const combineXAxisPositionStartingPoint = (
+	offset: ChartOffsetInternal,
+	orientation: XAxisOrientation,
+	chartHeight: number,
+) => {
+	switch (orientation) {
+		case "top":
+			return offset.top
+		case "bottom":
+			return chartHeight - offset.bottom
+		default:
+			return 0
+	}
+}
+
+const combineYAxisPositionStartingPoint = (
+	offset: ChartOffsetInternal,
+	orientation: YAxisOrientation,
+	chartWidth: number,
+) => {
+	switch (orientation) {
+		case "left":
+			return offset.left
+		case "right":
+			return chartWidth - offset.right
+		default:
+			return 0
+	}
+}
+
+export const selectAllXAxesOffsetSteps = chartSelector(function selectAllXAxesOffsetSteps(state: ChartState, orientation: XAxisOrientation, mirror: boolean): AxisOffsetSteps {
+	const chartHeight = selectChartHeight(state)
+	const offset = selectChartOffsetInternal(state)
+	const allAxesWithSameOffsetType = selectAllXAxesWithOffsetType(state, orientation, mirror)
+
+	const steps: AxisOffsetSteps = {}
+	let position: number | undefined
+	allAxesWithSameOffsetType.forEach((axis) => {
+		const axisSize = getXAxisSize(offset, axis)
+		if (position == null) {
+			position = combineXAxisPositionStartingPoint(offset, orientation, chartHeight)
+		}
+		const needSpace = (orientation === "top" && !mirror) || (orientation === "bottom" && mirror)
+		steps[axis.id] = position - Number(needSpace) * axisSize.height
+		position += (needSpace ? -1 : 1) * axisSize.height
+	})
+	return steps
+})
+
+export const selectAllYAxesOffsetSteps = chartSelector(function selectAllYAxesOffsetSteps(state: ChartState, orientation: YAxisOrientation, mirror: boolean): AxisOffsetSteps {
+	const chartWidth = selectChartWidth(state)
+	const offset = selectChartOffsetInternal(state)
+	const allAxesWithSameOffsetType = selectAllYAxesWithOffsetType(state, orientation, mirror)
+
+	const steps: AxisOffsetSteps = {}
+	let position: number | undefined
+	allAxesWithSameOffsetType.forEach((axis) => {
+		const axisSize = getYAxisSize(offset, axis)
+		if (position == null) {
+			position = combineYAxisPositionStartingPoint(offset, orientation, chartWidth)
+		}
+		const needSpace = (orientation === "left" && !mirror) || (orientation === "right" && mirror)
+		steps[axis.id] = position - Number(needSpace) * axisSize.width
+		position += (needSpace ? -1 : 1) * axisSize.width
+	})
+	return steps
+})
+
+const selectXAxisOffsetSteps = chartSelector((state: ChartState, axisId: AxisId) => {
+	const axisSettings = selectXAxisSettings(state, axisId)
+	if (axisSettings == null) {
+		return undefined
+	}
+	return selectAllXAxesOffsetSteps(state, axisSettings.orientation, axisSettings.mirror)
+})
+
+export const selectXAxisPosition = chartSelector(function selectXAxisPosition(state: ChartState, axisId: AxisId): Coordinate | undefined {
+	const offset = selectChartOffsetInternal(state)
+	const axisSettings = selectXAxisSettings(state, axisId)
+	const allSteps = selectXAxisOffsetSteps(state, axisId)
+	if (axisSettings == null) {
+		return undefined
+	}
+	const stepOfThisAxis = allSteps?.[axisId]
+	if (stepOfThisAxis == null) {
+		return { x: offset.left, y: 0 }
+	}
+	return { x: offset.left, y: stepOfThisAxis }
+})
+
+const selectYAxisOffsetSteps = chartSelector((state: ChartState, axisId: AxisId) => {
+	const axisSettings = selectYAxisSettings(state, axisId)
+	if (axisSettings == null) {
+		return undefined
+	}
+	return selectAllYAxesOffsetSteps(state, axisSettings.orientation, axisSettings.mirror)
+})
+
+export const selectYAxisPosition = chartSelector(function selectYAxisPosition(state: ChartState, axisId: AxisId): Coordinate | undefined {
+	const offset = selectChartOffsetInternal(state)
+	const axisSettings = selectYAxisSettings(state, axisId)
+	const allSteps = selectYAxisOffsetSteps(state, axisId)
+	if (axisSettings == null) {
+		return undefined
+	}
+	const stepOfThisAxis = allSteps?.[axisId]
+	if (stepOfThisAxis == null) {
+		return { x: 0, y: offset.top }
+	}
+	return { x: stepOfThisAxis, y: offset.top }
+})
+
+export const selectYAxisSize = chartSelector(function selectYAxisSize(state: ChartState, yAxisId: AxisId): Size {
+	const offset = selectChartOffsetInternal(state)
+	const axisSettings = selectYAxisSettings(state, yAxisId)
+	const width = typeof axisSettings.width === "number" ? axisSettings.width : DEFAULT_Y_AXIS_WIDTH
+	return {
+		height: offset.height,
+		width,
+	}
+})
+
+export const selectCartesianAxisSize = chartSelector((
+	state: ChartState,
+	axisType: RenderableAxisType,
+	axisId: AxisId,
+): number | undefined => {
+	switch (axisType) {
+		case "xAxis": {
+			return selectXAxisSize(state, axisId).width
+		}
+		case "yAxis": {
+			return selectYAxisSize(state, axisId).height
+		}
+		default: {
+			return undefined
+		}
+	}
+})
+
+export const combineDuplicateDomain = (
+	chartLayout: LayoutType,
+	appliedValues: AppliedChartData,
+	axis: BaseCartesianAxis,
+	axisType: AllAxisTypes,
+): ReadonlyArray<unknown> | undefined => {
+	if (axis == null) {
+		return undefined
+	}
+	const { allowDuplicatedCategory, type, dataKey } = axis
+	const isCategorical = isCategoricalAxis(chartLayout, axisType)
+	const allData = appliedValues.map((av) => av.value)
+	if (
+		dataKey &&
+		isCategorical &&
+		type === "category" &&
+		allowDuplicatedCategory &&
+		hasDuplicate(allData)
+	) {
+		return allData
+	}
+	return undefined
+}
+
+export const selectDuplicateDomain = chartSelector(function selectDuplicateDomain(state: ChartState, axisType: AllAxisTypes, axisId: AxisId, isPanorama: boolean): ReadonlyArray<unknown> | undefined {
+	return combineDuplicateDomain(
+		selectChartLayout(state),
+		selectAllAppliedValues(state, axisType, axisId, isPanorama),
+		selectBaseAxis(state, axisType, axisId),
+		axisType,
+	)
+})
+
+export const selectAxisPropsNeededForCartesianGridTicksGenerator = chartSelector(function selectAxisPropsNeededForCartesianGridTicksGenerator(state: ChartState, axisType: "xAxis" | "yAxis", axisId: AxisId, isPanorama: boolean): AxisPropsForCartesianGridTicksGeneration | undefined {
+	const layout = selectChartLayout(state)
+	const axis = selectCartesianAxisSettings(state, axisType, axisId)
+	const realScaleType = selectRealScaleType(state, axisType, axisId)
+	const scale = selectAxisScale(state, axisType, axisId, isPanorama)
+	const duplicateDomain = selectDuplicateDomain(state, axisType, axisId, isPanorama)
+	const categoricalDomain = selectCategoricalDomain(state, axisType, axisId, isPanorama)
+	const axisRange = selectAxisRange(state, axisType, axisId, isPanorama)
+	const niceTicks = selectNiceTicks(state, axisType, axisId, isPanorama)
+
+	if (axis == null) {
+		return undefined
+	}
+	const isCategorical = isCategoricalAxis(layout, axisType)
+	return {
+		angle: axis.angle,
+		axisType,
+		categoricalDomain,
+		duplicateDomain,
+		interval: axis.interval,
+		isCategorical,
+		minTickGap: axis.minTickGap,
+		niceTicks,
+		orientation: axis.orientation,
+		range: axisRange,
+		realScaleType,
+		scale,
+		tick: axis.tick,
+		tickCount: axis.tickCount,
+		tickFormatter: axis.tickFormatter,
+		ticks: axis.ticks,
+		type: axis.type,
+		unit: axis.unit,
+	}
+})
+
+/**
+ * Of on four almost identical implementations of tick generation.
+ * The four horsemen of tick generation are:
+ * - {@link selectTooltipAxisTicks}
+ * - {@link combineAxisTicks}
+ * - {@link getTicksOfAxis}.
+ * - {@link combineGraphicalItemTicks}
+ */
+export const combineAxisTicks = (
+	layout: LayoutType,
+	axis: RenderableAxisSettings,
+	realScaleType: D3ScaleType | undefined,
+	scale: RechartsScale | undefined,
+	niceTicks: ReadonlyArray<number> | undefined,
+	axisRange: AxisRange | undefined,
+	duplicateDomain: ReadonlyArray<unknown> | undefined,
+	categoricalDomain: ReadonlyArray<unknown> | undefined,
+	axisType: RenderableAxisType,
+): ReadonlyArray<TickItem> | undefined => {
+	if (axis == null || scale == null) {
+		return undefined
+	}
+
+	const isCategorical = isCategoricalAxis(layout, axisType)
+
+	const { type, ticks, tickCount } = axis
+
+	/* mirror upstream dead-code: comparison against "scaleBand" never matches
+	   (combineRealScaleType returns "band" instead). Branch is intentionally
+	   always-false, so offsetForBand resolves to 2 and the final offset becomes
+	   bandwidth/2 — the centered-tick coordinate. Do not "fix" the literal to
+	   "band" — that inverts the offset and breaks every band axis. */
+	const offsetForBand =
+		// @ts-expect-error see comment above — intentional always-false comparison
+		realScaleType === "scaleBand" && typeof scale.bandwidth === "function"
+			? scale.bandwidth() / 2
+			: 2
+
+	let offset = type === "category" && scale.bandwidth ? scale.bandwidth() / offsetForBand : 0
+
+	offset =
+		axisType === "angleAxis" && axisRange != null && axisRange.length >= 2
+			? mathSign(axisRange[0] - axisRange[1]) * 2 * offset
+			: offset
+
+	const ticksOrNiceTicks = ticks || niceTicks
+	if (ticksOrNiceTicks) {
+		return ticksOrNiceTicks
+			.map((entry: AxisTick, index: number): TickItem | null => {
+				const scaleContent = duplicateDomain ? duplicateDomain.indexOf(entry) : entry
+
+				const scaled = scale.map(scaleContent)
+				if (!isWellBehavedNumber(scaled)) {
+					return null
+				}
+				return {
+					coordinate: scaled + offset,
+					index,
+					offset,
+					value: entry,
+				}
+			})
+			.filter(isNotNil)
+	}
+
+	if (isCategorical && categoricalDomain) {
+		return categoricalDomain
+			.map((entry: unknown, index: number): TickItem | null => {
+				const scaled = scale.map(entry)
+				if (!isWellBehavedNumber(scaled)) {
+					return null
+				}
+				return {
+					coordinate: scaled + offset,
+					index,
+					offset,
+					value: entry,
+				}
+			})
+			.filter(isNotNil)
+	}
+
+	if (scale.ticks) {
+		return scale
+			.ticks(tickCount)
+			.map((entry: number, index: number): TickItem | null => {
+				const scaled = scale.map(entry)
+				if (!isWellBehavedNumber(scaled)) {
+					return null
+				}
+				return { coordinate: scaled + offset, index, offset, value: entry }
+			})
+			.filter(isNotNil)
+	}
+
+	return scale
+		.domain()
+		.map((entry: CategoricalDomainItem, index: number): TickItem | null => {
+			const scaled = scale.map(entry)
+			if (!isWellBehavedNumber(scaled)) {
+				return null
+			}
+			return {
+				coordinate: scaled + offset,
+				index,
+				offset,
+				value: duplicateDomain ? duplicateDomain[entry as unknown as number] : entry,
+			}
+		})
+		.filter(isNotNil)
+}
+
+export const selectTicksOfAxis = chartSelector(function selectTicksOfAxis(state: ChartState, axisType: RenderableAxisType, axisId: AxisId, isPanorama: boolean): ReadonlyArray<CartesianTickItem> | undefined {
+	return combineAxisTicks(
+		selectChartLayout(state),
+		selectRenderableAxisSettings(state, axisType, axisId),
+		selectRealScaleType(state, axisType, axisId),
+		selectAxisScale(state, axisType, axisId, isPanorama),
+		selectNiceTicks(state, axisType, axisId, isPanorama),
+		selectAxisRange(state, axisType, axisId, isPanorama),
+		selectDuplicateDomain(state, axisType, axisId, isPanorama),
+		selectCategoricalDomain(state, axisType, axisId, isPanorama),
+		axisType,
+	)
+})
+
+/**
+ * Of on four almost identical implementations of tick generation.
+ * The four horsemen of tick generation are:
+ * - {@link selectTooltipAxisTicks}
+ * - {@link combineAxisTicks}
+ * - {@link getTicksOfAxis}.
+ * - {@link combineGraphicalItemTicks}
+ */
+export const combineGraphicalItemTicks = (
+	layout: LayoutType,
+	axis: RenderableAxisSettings,
+	scale: RechartsScale | undefined,
+	axisRange: AxisRange | undefined,
+	duplicateDomain: ReadonlyArray<unknown> | undefined,
+	categoricalDomain: ReadonlyArray<unknown> | undefined,
+	axisType: RenderableAxisType,
+): TickItem[] | undefined => {
+	if (axis == null || scale == null || axisRange == null || axisRange[0] === axisRange[1]) {
+		return undefined
+	}
+	const isCategorical = isCategoricalAxis(layout, axisType)
+
+	const { tickCount } = axis
+
+	let offset = 0
+
+	offset =
+		axisType === "angleAxis" && axisRange?.length >= 2
+			? mathSign(axisRange[0] - axisRange[1]) * 2 * offset
+			: offset
+
+	if (isCategorical && categoricalDomain) {
+		return categoricalDomain
+			.map((entry: unknown, index: number): TickItem | null => {
+				const scaled = scale.map(entry)
+				if (!isWellBehavedNumber(scaled)) {
+					return null
+				}
+				return {
+					coordinate: scaled + offset,
+					index,
+					offset,
+					value: entry,
+				}
+			})
+			.filter(isNotNil)
+	}
+
+	if (scale.ticks) {
+		return scale
+			.ticks(tickCount)
+			.map((entry: number, index: number): TickItem | null => {
+				const scaled = scale.map(entry)
+				if (!isWellBehavedNumber(scaled)) {
+					return null
+				}
+				return { coordinate: scaled + offset, index, offset, value: entry }
+			})
+			.filter(isNotNil)
+	}
+
+	return scale
+		.domain()
+		.map((entry: CategoricalDomainItem, index: number): TickItem | null => {
+			const scaled = scale.map(entry)
+			if (!isWellBehavedNumber(scaled)) {
+				return null
+			}
+			return {
+				coordinate: scaled + offset,
+				index,
+				offset,
+				value: duplicateDomain ? duplicateDomain[entry as unknown as number] : entry,
+			}
+		})
+		.filter(isNotNil)
+}
+
+export const selectTicksOfGraphicalItem = chartSelector(function selectTicksOfGraphicalItem(state: ChartState, axisType: RenderableAxisType, axisId: AxisId, isPanorama: boolean): TickItem[] | undefined {
+	return combineGraphicalItemTicks(
+		selectChartLayout(state),
+		selectRenderableAxisSettings(state, axisType, axisId),
+		selectAxisScale(state, axisType, axisId, isPanorama),
+		selectAxisRange(state, axisType, axisId, isPanorama),
+		selectDuplicateDomain(state, axisType, axisId, isPanorama),
+		selectCategoricalDomain(state, axisType, axisId, isPanorama),
+		axisType,
+	)
+})
+
+/**
+ * This is the internal representation of an axis along with its scale function.
+ * Here we have already computed the scale function for the axis,
+ * and replaced the union type of scale (string | function) with just the function type.
+ */
+export type BaseAxisWithScale = Omit<BaseCartesianAxis, "scale"> & { scale: RechartsScale }
+
+export const selectAxisWithScale = chartSelector(function selectAxisWithScale(state: ChartState, axisType: RenderableAxisType, axisId: AxisId, isPanorama: boolean, override?: XAxisSettings | YAxisSettings): BaseAxisWithScale | undefined {
+	const axis = override !== undefined ? override : selectBaseAxis(state, axisType, axisId)
+	const scale = selectAxisScale(state, axisType, axisId, isPanorama)
+	if (axis == null || scale == null) {
+		return undefined
+	}
+	return {
+		...axis,
+		scale,
+	}
+})
+
+const selectZAxisConfiguredScale = chartSelector(function selectZAxisConfiguredScale(state: ChartState, axisType: "zAxis", axisId: AxisId, isPanorama: false): CustomScaleDefinition | undefined {
+	return combineConfiguredScale(
+		selectBaseAxis(state, axisType, axisId),
+		selectRealScaleType(state, axisType, axisId),
+		selectAxisDomain(state, axisType, axisId, isPanorama),
+		selectAxisRangeWithReverse(state, axisType, axisId, isPanorama),
+	)
+})
+
+const selectZAxisScale = chartSelector(function selectZAxisScale(state: ChartState, axisType: "zAxis", axisId: AxisId, isPanorama: false): RechartsScale | undefined {
+	return rechartsScaleFactory(selectZAxisConfiguredScale(state, axisType, axisId, isPanorama))
+})
+
+export type ZAxisWithScale = Omit<ZAxisSettings, "scale"> & { scale: RechartsScale }
+
+export const selectZAxisWithScale = chartSelector(function selectZAxisWithScale(state: ChartState, _axisType: "zAxis", axisId: AxisId, isPanorama: false): ZAxisWithScale | undefined {
+	const axis = selectZAxisSettings(state, axisId)
+	const scale = selectZAxisScale(state, "zAxis", axisId, isPanorama)
+	if (axis == null || scale == null) {
+		return undefined
+	}
+	return {
+		...axis,
+		scale,
+	}
+})
+
+/**
+ * We are also going to need to implement polar chart directions if we want to support keyboard controls for those.
+ */
+export type AxisDirection = "left-to-right" | "right-to-left" | "top-to-bottom" | "bottom-to-top"
+
+export const selectChartDirection = chartSelector(function selectChartDirection(state: ChartState): AxisDirection | undefined {
+	const layout = selectChartLayout(state)
+	const allXAxes = selectAllXAxes(state)
+	const allYAxes = selectAllYAxes(state)
+
+	switch (layout) {
+		case "horizontal": {
+			return allXAxes.some((axis) => axis.reversed) ? "right-to-left" : "left-to-right"
+		}
+		case "vertical": {
+			return allYAxes.some((axis) => axis.reversed) ? "bottom-to-top" : "top-to-bottom"
+		}
+		case "centric":
+		case "radial": {
+			return "left-to-right"
+		}
+		default: {
+			return undefined
+		}
+	}
+})
+
+export const selectAxisInverseTickSnapScale = chartSelector(function selectAxisInverseTickSnapScale(state: ChartState, axisType: RenderableAxisType, axisId: AxisId, isPanorama: boolean): InverseScaleFunction | undefined {
+	const ticks = selectTicksOfAxis(state, axisType, axisId, isPanorama)
+	if (!ticks || ticks.length === 0) {
+		return undefined
+	}
+
+	return (pixelValue: number) => {
+		let minDistance = Infinity
+		let closestTick = ticks[0]
+
+		for (const tick of ticks) {
+			const distance = Math.abs(tick.coordinate - pixelValue)
+			if (distance < minDistance) {
+				minDistance = distance
+				closestTick = tick
+			}
+		}
+		return closestTick?.value
+	}
+})
+
+export const selectRenderedTicksOfAxis = chartSelector(function selectRenderedTicksOfAxis(state: ChartState, axisType: "xAxis" | "yAxis", axisId: AxisId): ReadonlyArray<TickItem> | undefined {
+	return readChartState(state).renderedTicks[axisType]?.[String(axisId)]
+})