@solidports/recharts 0.1.0

package/src/state/selectors/lineSelectors.ts

@@ -0,0 +1,134 @@
+/* eslint-disable import/no-cycle */
+import { computeLinePoints, type LinePointItem } from "../../cartesian/Line"
+import type { ChartState } from "../store"
+import type { AxisId, XAxisSettings, YAxisSettings } from "../cartesianAxisSlice"
+import { selectChartDataWithIndexesIfNotInPanoramaPosition4 } from "./dataSelectors"
+import { selectChartLayout } from "../../context/chartLayoutContext"
+import {
+	selectAxisWithScale,
+	selectTicksOfGraphicalItem,
+	selectUnfilteredCartesianItems,
+} from "./axisSelectors"
+import { getBandSizeOfAxis, isCategoricalAxis } from "../../util/ChartUtils"
+import type { ChartData } from "../chartDataSlice"
+import type { CartesianGraphicalItemSettings, GraphicalItemId } from "../graphicalItemsSlice"
+import { chartSelector } from "./chartSelector"
+import type { LineSettings } from "../types/LineSettings"
+
+/** Optional overrides — when supplied, bypass the axis-settings lookup on hot animation frames. */
+export type LineAxisOverrides = {
+	xAxis?: XAxisSettings
+	yAxis?: YAxisSettings
+	lineSettings?: LineSettings
+}
+
+const selectXAxisWithScale = chartSelector((
+	state: ChartState,
+	xAxisId: AxisId,
+	_yAxisId: AxisId,
+	isPanorama: boolean,
+	override?: XAxisSettings,
+) => selectAxisWithScale(state, "xAxis", xAxisId, isPanorama, override))
+
+const selectXAxisTicks = chartSelector((
+	state: ChartState,
+	xAxisId: AxisId,
+	_yAxisId: AxisId,
+	isPanorama: boolean,
+) => selectTicksOfGraphicalItem(state, "xAxis", xAxisId, isPanorama))
+
+const selectYAxisWithScale = chartSelector((
+	state: ChartState,
+	_xAxisId: AxisId,
+	yAxisId: AxisId,
+	isPanorama: boolean,
+	override?: YAxisSettings,
+) => selectAxisWithScale(state, "yAxis", yAxisId, isPanorama, override))
+
+const selectYAxisTicks = chartSelector((
+	state: ChartState,
+	_xAxisId: AxisId,
+	yAxisId: AxisId,
+	isPanorama: boolean,
+) => selectTicksOfGraphicalItem(state, "yAxis", yAxisId, isPanorama))
+
+const selectBandSize = chartSelector(function selectBandSize(state: ChartState, xAxisId: AxisId, yAxisId: AxisId, isPanorama: boolean, overrides?: LineAxisOverrides) {
+	const layout = selectChartLayout(state)
+	const xAxis = selectXAxisWithScale(state, xAxisId, yAxisId, isPanorama, overrides?.xAxis)
+	const yAxis = selectYAxisWithScale(state, xAxisId, yAxisId, isPanorama, overrides?.yAxis)
+	const xAxisTicks = selectXAxisTicks(state, xAxisId, yAxisId, isPanorama)
+	const yAxisTicks = selectYAxisTicks(state, xAxisId, yAxisId, isPanorama)
+	if (isCategoricalAxis(layout, "xAxis")) {
+		return getBandSizeOfAxis(xAxis, xAxisTicks, false)
+	}
+	return getBandSizeOfAxis(yAxis, yAxisTicks, false)
+})
+
+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 = chartSelector(function selectSynchronisedLineSettings(state: ChartState, _xAxisId: AxisId, _yAxisId: AxisId, _isPanorama: boolean, id: GraphicalItemId): LineSettings | undefined {
+	const graphicalItems = selectUnfilteredCartesianItems(state)
+	return graphicalItems.filter(isLineSettings).find((x) => x.id === id)
+})
+
+export const selectLinePoints = chartSelector(function selectLinePoints(state: ChartState, xAxisId: AxisId, yAxisId: AxisId, isPanorama: boolean, id: GraphicalItemId, overrides?: LineAxisOverrides): ReadonlyArray<LinePointItem> | undefined {
+	const layout = selectChartLayout(state)
+	const xAxis = selectXAxisWithScale(state, xAxisId, yAxisId, isPanorama, overrides?.xAxis)
+	const yAxis = selectYAxisWithScale(state, xAxisId, yAxisId, isPanorama, overrides?.yAxis)
+	const xAxisTicks = selectXAxisTicks(state, xAxisId, yAxisId, isPanorama)
+	const yAxisTicks = selectYAxisTicks(state, xAxisId, yAxisId, isPanorama)
+	const lineSettings =
+		overrides?.lineSettings ??
+		selectSynchronisedLineSettings(state, xAxisId, yAxisId, isPanorama, id)
+	const bandSize = selectBandSize(state, xAxisId, yAxisId, isPanorama, overrides)
+	const { chartData, dataStartIndex, dataEndIndex } =
+		selectChartDataWithIndexesIfNotInPanoramaPosition4(state, undefined, undefined, isPanorama)
+
+	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({
+		bandSize,
+		dataKey,
+		displayedData,
+		layout,
+		xAxis,
+		xAxisTicks,
+		yAxis,
+		yAxisTicks,
+	})
+})

package/src/state/selectors/numberDomainEqualityCheck.ts

@@ -0,0 +1,14 @@
+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,5 @@
+import { ChartState } from "../store"
+import { AxisId } from "../cartesianAxisSlice"
+
+export const pickAxisId = (_state: ChartState, _axisType: unknown, axisId: AxisId): AxisId =>
+	axisId

package/src/state/selectors/pickAxisType.ts

@@ -0,0 +1,3 @@
+import { ChartState } from "../store"
+
+export const pickAxisType = <T>(_state: ChartState, axisType: T): T => axisType

package/src/state/selectors/pieSelectors.ts

@@ -0,0 +1,97 @@
+/* eslint-disable import/no-cycle */
+import type { JSX } from '@solidjs/web';
+import { computePieSectors, type PieSectorDataItem } from "../../polar/Pie"
+import type { ChartState } from "../store"
+import { selectChartDataAndAlwaysIgnoreIndexes } from "./dataSelectors"
+import type { ChartData, ChartDataState } from "../chartDataSlice"
+import type { ChartOffsetInternal } from "../../util/types"
+import { selectChartOffsetInternal } from "./selectChartOffsetInternal"
+import type { LegendPayload } from "../../component/DefaultLegendContent"
+import { getTooltipNameProp, getValueByDataKey } from "../../util/ChartUtils"
+import { selectUnfilteredPolarItems } from "./polarSelectors"
+import type { PieSettings } from "../types/PieSettings"
+import { chartSelector } from "./chartSelector"
+import type { GraphicalItemId } from "../graphicalItemsSlice"
+
+const selectSynchronisedPieSettings = chartSelector(function selectSynchronisedPieSettings(state: ChartState, id: GraphicalItemId): PieSettings | undefined {
+	const graphicalItems = selectUnfilteredPolarItems(state)
+	return graphicalItems.filter((item) => item.type === "pie").find((item) => item.id === id) as
+		| PieSettings
+		| undefined
+})
+
+const emptyArray: ReadonlyArray<Record<string, unknown>> = []
+
+export const selectDisplayedData = chartSelector(function selectDisplayedData(state: ChartState, id: GraphicalItemId, cells: ReadonlyArray<Record<string, unknown>> | undefined, pieSettingsOverride?: PieSettings): ChartData | undefined {
+	const { chartData }: ChartDataState = selectChartDataAndAlwaysIgnoreIndexes(state)
+	const pieSettings = pieSettingsOverride ?? selectSynchronisedPieSettings(state, id)
+	const safeCells = cells?.length === 0 ? emptyArray : cells
+
+	if (pieSettings == null) {
+		return undefined
+	}
+	let displayedData: ChartData | undefined
+	if (pieSettings?.data != null && pieSettings.data.length > 0) {
+		displayedData = pieSettings.data
+	} else {
+		displayedData = chartData
+	}
+
+	if ((!displayedData || !displayedData.length) && safeCells != null) {
+		/* registered cells are `{ props }` records, like upstream's Cell elements */
+		displayedData = safeCells.map((cell: Record<string, unknown>) =>
+			Object.assign({}, pieSettings.presentationProps, (cell as { props?: Record<string, unknown> }).props ?? cell),
+		)
+	}
+
+	if (displayedData == null) {
+		return undefined
+	}
+
+	return displayedData
+})
+
+export const selectPieLegend = chartSelector(function selectPieLegend(state: ChartState, id: GraphicalItemId, cells: ReadonlyArray<Record<string, unknown>> | undefined): ReadonlyArray<LegendPayload> | undefined {
+	const displayedData = selectDisplayedData(state, id, cells)
+	const pieSettings = selectSynchronisedPieSettings(state, id)
+	const safeCells = cells?.length === 0 ? emptyArray : cells
+
+	if (displayedData == null || pieSettings == null) {
+		return undefined
+	}
+	return displayedData.map((entry, i): LegendPayload => {
+		const name = getValueByDataKey(entry, pieSettings.nameKey, pieSettings.name)
+		let color: string | undefined
+		const cellEntry = safeCells?.[i]
+		if (cellEntry != null && typeof cellEntry.fill === "string") {
+			color = cellEntry.fill
+		} else if (typeof entry === "object" && entry != null && "fill" in entry) {
+			color = (entry as Record<string, unknown>).fill as string
+		} else {
+			color = pieSettings.fill
+		}
+		return {
+			color,
+			dataKey: pieSettings.dataKey,
+			payload: entry as Record<string, unknown>,
+			type: pieSettings.legendType,
+			value: getTooltipNameProp(name, pieSettings.dataKey),
+		}
+	})
+})
+
+export const selectPieSectors = chartSelector(function selectPieSectors(state: ChartState, id: GraphicalItemId, cells: ReadonlyArray<Record<string, unknown>> | undefined, pieSettingsOverride?: PieSettings): ReadonlyArray<PieSectorDataItem> | undefined {
+	const pieSettings = pieSettingsOverride ?? selectSynchronisedPieSettings(state, id)
+	const displayedData = selectDisplayedData(state, id, cells, pieSettings)
+	const offset: ChartOffsetInternal = selectChartOffsetInternal(state)
+
+	if (pieSettings == null || displayedData == null) {
+		return undefined
+	}
+	return computePieSectors({
+		cells: (cells?.length === 0 ? emptyArray : cells) as ReadonlyArray<JSX.Element> | undefined,
+		displayedData,
+		offset,
+		pieSettings,
+	})
+})

package/src/state/selectors/polarAxisSelectors.ts

@@ -0,0 +1,201 @@
+/* eslint-disable import/no-cycle */
+import type { ChartState } from "../store"
+import type { AxisId } from "../cartesianAxisSlice"
+import type { AngleAxisSettings, RadiusAxisSettings } from "../polarAxisSlice"
+import type { PolarChartOptions } from "../polarOptionsSlice"
+import { selectChartHeight, selectChartWidth } from "./containerSelectors"
+import { selectChartOffsetInternal } from "./selectChartOffsetInternal"
+import { getMaxRadius } from "../../util/PolarUtils"
+import { getPercentValue } from "../../util/DataUtils"
+import type { AxisDomainTypeInput, LayoutType, PolarViewBoxRequired } from "../../util/types"
+import { defaultPolarAngleAxisProps } from "../../polar/defaultPolarAngleAxisProps"
+import { defaultPolarRadiusAxisProps } from "../../polar/defaultPolarRadiusAxisProps"
+import type { AxisRange } from "./axisSelectors"
+import { combineAxisRangeWithReverse } from "./combiners/combineAxisRangeWithReverse"
+import { selectChartLayout, selectPolarChartLayout } from "../../context/chartLayoutContext"
+import { getAxisTypeBasedOnLayout } from "../../util/getAxisTypeBasedOnLayout"
+import { chartSelector } from "./chartSelector"
+import { readChartState } from "../chartState"
+
+export const implicitAngleAxis: Omit<AngleAxisSettings, "type"> & { type: AxisDomainTypeInput } = {
+	allowDataOverflow: defaultPolarAngleAxisProps.allowDataOverflow,
+	allowDecimals: defaultPolarAngleAxisProps.allowDecimals,
+	allowDuplicatedCategory: false,
+	dataKey: undefined,
+	domain: undefined,
+	id: defaultPolarAngleAxisProps.angleAxisId,
+	includeHidden: false,
+	name: undefined,
+	niceTicks: defaultPolarAngleAxisProps.niceTicks,
+	reversed: defaultPolarAngleAxisProps.reversed,
+	scale: defaultPolarAngleAxisProps.scale,
+	tick: defaultPolarAngleAxisProps.tick,
+	tickCount: undefined,
+	ticks: undefined,
+	type: defaultPolarAngleAxisProps.type,
+	unit: undefined,
+}
+
+export const implicitRadiusAxis: Omit<RadiusAxisSettings, "type"> & { type: AxisDomainTypeInput } =
+	{
+		allowDataOverflow: defaultPolarRadiusAxisProps.allowDataOverflow,
+		allowDecimals: defaultPolarRadiusAxisProps.allowDecimals,
+		allowDuplicatedCategory: defaultPolarRadiusAxisProps.allowDuplicatedCategory,
+		dataKey: undefined,
+		domain: undefined,
+		id: defaultPolarRadiusAxisProps.radiusAxisId,
+		includeHidden: defaultPolarRadiusAxisProps.includeHidden,
+		name: undefined,
+		niceTicks: defaultPolarRadiusAxisProps.niceTicks,
+		reversed: defaultPolarRadiusAxisProps.reversed,
+		scale: defaultPolarRadiusAxisProps.scale,
+		tick: defaultPolarRadiusAxisProps.tick,
+		tickCount: defaultPolarRadiusAxisProps.tickCount,
+		ticks: undefined,
+		type: defaultPolarRadiusAxisProps.type,
+		unit: undefined,
+	}
+
+const selectAngleAxisNoDefaults = chartSelector((
+	state: ChartState,
+	angleAxisId: AxisId | undefined,
+): AngleAxisSettings | undefined => {
+	if (angleAxisId == null) {
+		return undefined
+	}
+	return readChartState(state).polarAxes.angleAxis?.[String(angleAxisId)]?.settings
+})
+
+export const selectAngleAxis = chartSelector(function selectAngleAxis(state: ChartState, angleAxisId: AxisId | undefined, override?: AngleAxisSettings): AngleAxisSettings {
+	if (override != null) {
+		return override
+	}
+	const angleAxisSettings = selectAngleAxisNoDefaults(state, angleAxisId)
+	const layout = selectPolarChartLayout(state)
+	if (angleAxisSettings != null) {
+		return angleAxisSettings
+	}
+	const evaluatedType =
+		getAxisTypeBasedOnLayout(layout, "angleAxis", implicitAngleAxis.type) ?? "category"
+	return {
+		...implicitAngleAxis,
+		type: evaluatedType,
+	}
+})
+
+const selectRadiusAxisNoDefaults = chartSelector((
+	state: ChartState,
+	radiusAxisId: AxisId,
+): RadiusAxisSettings | undefined => {
+	return readChartState(state).polarAxes.radiusAxis?.[String(radiusAxisId)]?.settings
+})
+
+export const selectRadiusAxis = chartSelector(function selectRadiusAxis(state: ChartState, radiusAxisId: AxisId, override?: RadiusAxisSettings): RadiusAxisSettings {
+	if (override != null) {
+		return override
+	}
+	const radiusAxisSettings = selectRadiusAxisNoDefaults(state, radiusAxisId)
+	const layout = selectPolarChartLayout(state)
+	if (radiusAxisSettings != null) {
+		return radiusAxisSettings
+	}
+	const evaluatedType =
+		getAxisTypeBasedOnLayout(layout, "radiusAxis", implicitRadiusAxis.type) ?? "category"
+	return {
+		...implicitRadiusAxis,
+		type: evaluatedType,
+	}
+})
+
+export const selectPolarOptions = (state: ChartState): PolarChartOptions | null =>
+	state.polarOptions
+
+export const selectMaxRadius = chartSelector(function selectMaxRadius(state: ChartState): number {
+	return getMaxRadius(
+		selectChartWidth(state),
+		selectChartHeight(state),
+		selectChartOffsetInternal(state),
+	)
+})
+
+const selectInnerRadius = chartSelector(function selectInnerRadius(state: ChartState): number | undefined {
+	const polarChartOptions = selectPolarOptions(state)
+	const maxRadius = selectMaxRadius(state)
+	if (polarChartOptions == null) {
+		return undefined
+	}
+	return getPercentValue(polarChartOptions.innerRadius, maxRadius, 0)
+})
+
+export const selectOuterRadius = chartSelector(function selectOuterRadius(state: ChartState): number | undefined {
+	const polarChartOptions = selectPolarOptions(state)
+	const maxRadius = selectMaxRadius(state)
+	if (polarChartOptions == null) {
+		return undefined
+	}
+	return getPercentValue(polarChartOptions.outerRadius, maxRadius, maxRadius * 0.8)
+})
+
+const combineAngleAxisRange = (polarOptions: PolarChartOptions | null): AxisRange => {
+	if (polarOptions == null) {
+		return [0, 0]
+	}
+	const { startAngle, endAngle } = polarOptions
+	return [startAngle, endAngle]
+}
+
+export const selectAngleAxisRange = chartSelector(function selectAngleAxisRange(state: ChartState): AxisRange {
+	return combineAngleAxisRange(selectPolarOptions(state))
+})
+
+export const selectAngleAxisRangeWithReversed = chartSelector(function selectAngleAxisRangeWithReversed(state: ChartState, angleAxisId: AxisId): AxisRange | undefined {
+	return combineAxisRangeWithReverse(
+		selectAngleAxis(state, angleAxisId),
+		selectAngleAxisRange(state),
+	)
+})
+
+export const selectRadiusAxisRange = chartSelector(function selectRadiusAxisRange(state: ChartState, _radiusAxisId: AxisId): AxisRange | undefined {
+	const maxRadius = selectMaxRadius(state)
+	const innerRadius = selectInnerRadius(state)
+	const outerRadius = selectOuterRadius(state)
+	if (maxRadius == null || innerRadius == null || outerRadius == null) {
+		return undefined
+	}
+	return [innerRadius, outerRadius]
+})
+
+export const selectRadiusAxisRangeWithReversed = chartSelector(function selectRadiusAxisRangeWithReversed(state: ChartState, radiusAxisId: AxisId): AxisRange | undefined {
+	return combineAxisRangeWithReverse(
+		selectRadiusAxis(state, radiusAxisId),
+		selectRadiusAxisRange(state, radiusAxisId),
+	)
+})
+
+export const selectPolarViewBox: (state: ChartState) => PolarViewBoxRequired | undefined = chartSelector(function selectPolarViewBox(state: ChartState): PolarViewBoxRequired | undefined {
+	const layout: LayoutType = selectChartLayout(state)
+	const polarOptions = selectPolarOptions(state)
+	const innerRadius = selectInnerRadius(state)
+	const outerRadius = selectOuterRadius(state)
+	const width = selectChartWidth(state)
+	const height = selectChartHeight(state)
+
+	if (
+		(layout !== "centric" && layout !== "radial") ||
+		polarOptions == null ||
+		innerRadius == null ||
+		outerRadius == null
+	) {
+		return undefined
+	}
+	const { cx, cy, startAngle, endAngle } = polarOptions
+	return {
+		clockWise: false,
+		cx: getPercentValue(cx, width, width / 2),
+		cy: getPercentValue(cy, height, height / 2),
+		endAngle,
+		innerRadius,
+		outerRadius,
+		startAngle,
+	}
+})

package/src/state/selectors/polarGridSelectors.ts

@@ -0,0 +1,28 @@
+/* eslint-disable import/no-cycle */
+import { ChartState } from "../store"
+import { AxisId } from "../cartesianAxisSlice"
+import { chartSelector } from "./chartSelector"
+import { selectPolarAxisTicks } from "./polarScaleSelectors"
+
+export type PolarAngles = Array<number>
+
+export type PolarRadius = Array<number>
+
+/* reselect's createSelector short-circuits on input-reference equality, which
+   breaks Solid's fine-grained tracking (GOTCHA-003). chartSelector memoizes per
+   chart instead, and each memo tracks its own proxy reads. */
+export const selectPolarGridAngles = chartSelector(function selectPolarGridAngles(state: ChartState, angleAxisId: AxisId): PolarAngles | undefined {
+	const ticks = selectPolarAxisTicks(state, "angleAxis", angleAxisId, false)
+	if (!ticks) {
+		return undefined
+	}
+	return ticks.map((tick) => tick.coordinate)
+})
+
+export const selectPolarGridRadii = chartSelector(function selectPolarGridRadii(state: ChartState, radiusAxisId: AxisId): PolarRadius | undefined {
+	const ticks = selectPolarAxisTicks(state, "radiusAxis", radiusAxisId, false)
+	if (!ticks) {
+		return undefined
+	}
+	return ticks.map((tick) => tick.coordinate)
+})

package/src/state/selectors/polarScaleSelectors.ts

@@ -0,0 +1,133 @@
+/* eslint-disable import/no-cycle */
+import type { ChartState } from "../store"
+import type { AxisId } from "../cartesianAxisSlice"
+import {
+	combineAxisTicks,
+	combineCategoricalDomain,
+	combineGraphicalItemTicks,
+	selectDuplicateDomain,
+	selectRealScaleType,
+	selectRenderableAxisSettings,
+} from "./axisSelectors"
+import {
+	selectAngleAxis,
+	selectAngleAxisRangeWithReversed,
+	selectRadiusAxis,
+	selectRadiusAxisRangeWithReversed,
+} from "./polarAxisSelectors"
+import type { CartesianTickItem } from "../../util/types"
+import { selectChartLayout } from "../../context/chartLayoutContext"
+import {
+	selectPolarAppliedValues,
+	selectPolarAxisCheckedDomain,
+	selectPolarNiceTicks,
+} from "./polarSelectors"
+import { type RechartsScale, rechartsScaleFactory } from "../../util/scale/RechartsScale"
+import type { CustomScaleDefinition } from "../../util/scale/CustomScaleDefinition"
+import { chartSelector } from "./chartSelector"
+import { combineConfiguredScale } from "./combiners/combineConfiguredScale"
+
+export const selectPolarAxis = chartSelector((
+	state: ChartState,
+	axisType: "angleAxis" | "radiusAxis",
+	axisId: AxisId,
+) => {
+	switch (axisType) {
+		case "angleAxis": {
+			return selectAngleAxis(state, axisId)
+		}
+		case "radiusAxis": {
+			return selectRadiusAxis(state, axisId)
+		}
+		default: {
+			throw new Error(`Unexpected axis type: ${axisType}`)
+		}
+	}
+})
+
+const selectPolarAxisRangeWithReversed = chartSelector((
+	state: ChartState,
+	axisType: "angleAxis" | "radiusAxis",
+	axisId: AxisId,
+) => {
+	switch (axisType) {
+		case "angleAxis": {
+			return selectAngleAxisRangeWithReversed(state, axisId)
+		}
+		case "radiusAxis": {
+			return selectRadiusAxisRangeWithReversed(state, axisId)
+		}
+		default: {
+			throw new Error(`Unexpected axis type: ${axisType}`)
+		}
+	}
+})
+
+const selectPolarConfiguredScale = chartSelector(function selectPolarConfiguredScale(state: ChartState, axisType: "angleAxis" | "radiusAxis", polarAxisId: AxisId): CustomScaleDefinition | undefined {
+	return combineConfiguredScale(
+		selectPolarAxis(state, axisType, polarAxisId),
+		selectRealScaleType(state, axisType, polarAxisId),
+		selectPolarAxisCheckedDomain(state, axisType, polarAxisId),
+		selectPolarAxisRangeWithReversed(state, axisType, polarAxisId),
+	)
+})
+
+export const selectPolarAxisScale = chartSelector(function selectPolarAxisScale(state: ChartState, axisType: "angleAxis" | "radiusAxis", polarAxisId: AxisId): RechartsScale | undefined {
+	return rechartsScaleFactory(selectPolarConfiguredScale(state, axisType, polarAxisId))
+})
+
+export const selectPolarCategoricalDomain = chartSelector(function selectPolarCategoricalDomain(state: ChartState, axisType: "angleAxis" | "radiusAxis", polarAxisId: AxisId): ReadonlyArray<unknown> | undefined {
+	return combineCategoricalDomain(
+		selectChartLayout(state),
+		selectPolarAppliedValues(state, axisType, polarAxisId),
+		selectRenderableAxisSettings(state, axisType, polarAxisId),
+		axisType,
+	)
+})
+
+export const selectPolarAxisTicks = chartSelector(function selectPolarAxisTicks(state: ChartState, axisType: "angleAxis" | "radiusAxis", polarAxisId: AxisId, isPanorama: boolean): ReadonlyArray<CartesianTickItem> | undefined {
+	return combineAxisTicks(
+		selectChartLayout(state),
+		selectPolarAxis(state, axisType, polarAxisId),
+		selectRealScaleType(state, axisType, polarAxisId),
+		selectPolarAxisScale(state, axisType, polarAxisId),
+		selectPolarNiceTicks(state, axisType, polarAxisId),
+		selectPolarAxisRangeWithReversed(state, axisType, polarAxisId),
+		selectDuplicateDomain(state, axisType, polarAxisId, isPanorama),
+		selectPolarCategoricalDomain(state, axisType, polarAxisId),
+		axisType,
+	)
+})
+
+export const selectPolarAngleAxisTicks = chartSelector(function selectPolarAngleAxisTicks(state: ChartState, axisType: "angleAxis", polarAxisId: AxisId, isPanorama: boolean): ReadonlyArray<CartesianTickItem> | undefined {
+	const ticks = selectPolarAxisTicks(state, axisType, polarAxisId, isPanorama)
+	/*
+	 * Angle axis is circular; so here we need to look for ticks that overlap (i.e., 0 and 360 degrees)
+	 * and remove the duplicate tick to avoid rendering issues.
+	 */
+	if (!ticks) {
+		return undefined
+	}
+
+	const uniqueTicksMap = new Map<number, CartesianTickItem>()
+	ticks.forEach((tick) => {
+		const normalizedCoordinate = (tick.coordinate + 360) % 360
+		if (!uniqueTicksMap.has(normalizedCoordinate)) {
+			uniqueTicksMap.set(normalizedCoordinate, tick)
+		}
+	})
+
+	return Array.from(uniqueTicksMap.values())
+})
+
+export const selectPolarGraphicalItemAxisTicks = chartSelector(function selectPolarGraphicalItemAxisTicks(state: ChartState, axisType: "angleAxis" | "radiusAxis", polarAxisId: AxisId, isPanorama: boolean): ReadonlyArray<CartesianTickItem> | undefined {
+	return combineGraphicalItemTicks(
+		selectChartLayout(state),
+		selectPolarAxis(state, axisType, polarAxisId),
+		selectPolarAxisScale(state, axisType, polarAxisId),
+		selectPolarAxisRangeWithReversed(state, axisType, polarAxisId),
+		selectDuplicateDomain(state, axisType, polarAxisId, isPanorama),
+		selectPolarCategoricalDomain(state, axisType, polarAxisId),
+		axisType,
+	)
+})