@solidports/recharts 0.1.0

package/src/state/selectors/polarSelectors.ts

@@ -0,0 +1,219 @@
+/* eslint-disable import/no-cycle */
+import type { AppliedChartData, ChartData } from "../chartDataSlice"
+import { selectChartDataSliceIgnoringIndexes } from "./dataSelectors"
+import type { ChartState } from "../store"
+import type { AxisId, BaseCartesianAxis } from "../cartesianAxisSlice"
+import { selectChartDataAndAlwaysIgnoreIndexes } from "./dataSelectors"
+import {
+	type AppliedChartDataWithErrorDomain,
+	combineAppliedValues,
+	combineAxisDomain,
+	combineAxisDomainWithNiceTicks,
+	combineDisplayedData,
+	combineDomainOfAllAppliedNumericalValuesIncludingErrorValues,
+	combineGraphicalItemsData,
+	combineGraphicalItemsSettings,
+	combineNiceTicks,
+	combineNumericalDomain,
+	itemAxisPredicate,
+	selectAllErrorBarSettings,
+	selectBaseAxis,
+	selectDomainDefinition,
+	selectDomainFromUserPreference,
+	selectRealScaleType,
+	selectRenderableAxisSettings,
+} from "./axisSelectors"
+import type { PolarGraphicalItemSettings } from "../graphicalItemsSlice"
+import { readChartState } from "../chartState"
+import type { CategoricalDomain, NumberDomain } from "../../util/types"
+import { selectChartLayout } from "../../context/chartLayoutContext"
+import { getValueByDataKey } from "../../util/ChartUtils"
+import { selectStackOffsetType } from "./rootPropsSelectors"
+import { combineCheckedDomain } from "./combiners/combineCheckedDomain"
+
+export type PolarAxisType = "angleAxis" | "radiusAxis"
+
+export const selectUnfilteredPolarItems = (
+	state: ChartState,
+): ReadonlyArray<PolarGraphicalItemSettings> => {
+	const graphicalItems = readChartState(state).graphicalItems
+	const result: PolarGraphicalItemSettings[] = []
+	for (const id in graphicalItems) {
+		const item = graphicalItems[id]
+		if (
+			item != null &&
+			typeof item === "object" &&
+			(item.type === "pie" || item.type === "radar" || item.type === "radialBar")
+		) {
+			const settings = item.settings
+			if (settings !== null && typeof settings === "object") {
+				result.push(settings)
+			}
+		}
+	}
+	return result
+}
+
+export function selectPolarItemsSettings(
+	state: ChartState,
+	axisType: PolarAxisType,
+	polarAxisId: AxisId,
+): ReadonlyArray<PolarGraphicalItemSettings> {
+	const graphicalItems = selectUnfilteredPolarItems(state)
+	const axisSettings = selectBaseAxis(state, axisType, polarAxisId)
+	const axisPredicate = itemAxisPredicate(axisType, polarAxisId)
+	return combineGraphicalItemsSettings(graphicalItems, axisSettings, axisPredicate)
+}
+
+function selectPolarGraphicalItemsData(
+	state: ChartState,
+	axisType: PolarAxisType,
+	polarAxisId: AxisId,
+): ChartData {
+	return combineGraphicalItemsData(selectPolarItemsSettings(state, axisType, polarAxisId))
+}
+
+export function selectPolarDisplayedData(
+	state: ChartState,
+	axisType: PolarAxisType,
+	polarAxisId: AxisId,
+): ChartData {
+	return combineDisplayedData(
+		selectPolarGraphicalItemsData(state, axisType, polarAxisId),
+		selectChartDataAndAlwaysIgnoreIndexes(state),
+	)
+}
+
+export function selectPolarAppliedValues(
+	state: ChartState,
+	axisType: PolarAxisType,
+	axisId: AxisId,
+): AppliedChartData {
+	return combineAppliedValues(
+		selectPolarDisplayedData(state, axisType, axisId),
+		selectBaseAxis(state, axisType, axisId),
+		selectPolarItemsSettings(state, axisType, axisId),
+	)
+}
+
+export function selectAllPolarAppliedNumericalValues(
+	state: ChartState,
+	axisType: PolarAxisType,
+	axisId: AxisId,
+): ReadonlyArray<AppliedChartDataWithErrorDomain> {
+	const data = selectPolarDisplayedData(state, axisType, axisId)
+	const axisSettings: BaseCartesianAxis = selectBaseAxis(state, axisType, axisId)
+	const items = selectPolarItemsSettings(state, axisType, axisId)
+
+	if (items.length > 0) {
+		return data
+			.flatMap((entry) => {
+				return items.flatMap((item): AppliedChartDataWithErrorDomain | undefined => {
+					const valueByDataKey: unknown = getValueByDataKey(
+						entry,
+						axisSettings.dataKey ?? item.dataKey,
+					)
+					return {
+						errorDomain: [],
+						value: valueByDataKey,
+					}
+				})
+			})
+			.filter(Boolean) as ReadonlyArray<AppliedChartDataWithErrorDomain>
+	}
+	if (axisSettings?.dataKey != null) {
+		return data.map(
+			(item): AppliedChartDataWithErrorDomain => ({
+				errorDomain: [],
+				value: getValueByDataKey(item, axisSettings.dataKey),
+			}),
+		)
+	}
+	return data.map((entry): AppliedChartDataWithErrorDomain => ({ errorDomain: [], value: entry }))
+}
+
+const unsupportedInPolarChart = (): undefined => undefined
+
+function selectDomainOfAllPolarAppliedNumericalValues(
+	state: ChartState,
+	axisType: PolarAxisType,
+	axisId: AxisId,
+): NumberDomain | undefined {
+	return combineDomainOfAllAppliedNumericalValuesIncludingErrorValues(
+		selectPolarDisplayedData(state, axisType, axisId),
+		selectBaseAxis(state, axisType, axisId),
+		selectPolarItemsSettings(state, axisType, axisId),
+		selectAllErrorBarSettings(state),
+		axisType,
+		selectChartDataSliceIgnoringIndexes(state),
+	)
+}
+
+function selectPolarNumericalDomain(
+	state: ChartState,
+	axisType: PolarAxisType,
+	axisId: AxisId,
+): NumberDomain | undefined {
+	return combineNumericalDomain(
+		selectBaseAxis(state, axisType, axisId),
+		selectDomainDefinition(state, axisType, axisId),
+		selectDomainFromUserPreference(state, axisType, axisId),
+		unsupportedInPolarChart(),
+		selectDomainOfAllPolarAppliedNumericalValues(state, axisType, axisId),
+		unsupportedInPolarChart(),
+		selectChartLayout(state),
+		axisType,
+	)
+}
+
+export function selectPolarAxisDomain(
+	state: ChartState,
+	axisType: PolarAxisType,
+	polarAxisId: AxisId,
+): NumberDomain | CategoricalDomain | undefined {
+	return combineAxisDomain(
+		selectBaseAxis(state, axisType, polarAxisId),
+		selectChartLayout(state),
+		selectPolarDisplayedData(state, axisType, polarAxisId),
+		selectPolarAppliedValues(state, axisType, polarAxisId),
+		selectStackOffsetType(state),
+		axisType,
+		selectPolarNumericalDomain(state, axisType, polarAxisId),
+	)
+}
+
+export function selectPolarNiceTicks(
+	state: ChartState,
+	axisType: PolarAxisType,
+	polarAxisId: AxisId,
+): ReadonlyArray<number> | undefined {
+	return combineNiceTicks(
+		selectPolarAxisDomain(state, axisType, polarAxisId),
+		selectRenderableAxisSettings(state, axisType, polarAxisId),
+		selectRealScaleType(state, axisType, polarAxisId),
+	)
+}
+
+export function selectPolarAxisDomainIncludingNiceTicks(
+	state: ChartState,
+	axisType: PolarAxisType,
+	polarAxisId: AxisId,
+): NumberDomain | CategoricalDomain | undefined {
+	return combineAxisDomainWithNiceTicks(
+		selectBaseAxis(state, axisType, polarAxisId),
+		selectPolarAxisDomain(state, axisType, polarAxisId),
+		selectPolarNiceTicks(state, axisType, polarAxisId),
+		axisType,
+	)
+}
+
+export function selectPolarAxisCheckedDomain(
+	state: ChartState,
+	axisType: PolarAxisType,
+	polarAxisId: AxisId,
+): NumberDomain | CategoricalDomain | undefined {
+	return combineCheckedDomain(
+		selectRealScaleType(state, axisType, polarAxisId),
+		selectPolarAxisDomainIncludingNiceTicks(state, axisType, polarAxisId),
+	)
+}

package/src/state/selectors/radarSelectors.ts

@@ -0,0 +1,191 @@
+/* eslint-disable import/no-cycle */
+import type { ChartState } from "../store"
+import type { AngleAxisForRadar, RadarComposedData, RadiusAxisForRadar } from "../../polar/Radar"
+import { computeRadarPoints } from "../../polar/Radar"
+import type { BaseAxisWithScale } from "./axisSelectors"
+import { selectHasBar } from "./axisSelectors"
+import { selectPolarAxisScale, selectPolarAxisTicks } from "./polarScaleSelectors"
+import { selectAngleAxis, selectAngleAxisRangeWithReversed, selectPolarViewBox, selectRadiusAxis } from "./polarAxisSelectors"
+import type { AxisId } from "../cartesianAxisSlice"
+import { selectChartDataAndAlwaysIgnoreIndexes } from "./dataSelectors"
+import type { ChartDataState } from "../chartDataSlice"
+import type { CategoricalDomain, DataKey, LayoutType, PolarViewBoxRequired, TickItem } from "../../util/types"
+import { selectChartLayout } from "../../context/chartLayoutContext"
+import { getBandSizeOfAxis, isCategoricalAxis } from "../../util/ChartUtils"
+import type { AngleAxisSettings } from "../polarAxisSlice"
+import { selectUnfilteredPolarItems, selectPolarAxisCheckedDomain } from "./polarSelectors"
+import type { GraphicalItemId } from "../graphicalItemsSlice"
+import { type RechartsScale, rechartsScaleFactory } from "../../util/scale/RechartsScale"
+import { combineConfiguredScale } from "./combiners/combineConfiguredScale"
+import { combineRealScaleType } from "./combiners/combineRealScaleType"
+import { chartSelector } from "./chartSelector"
+import { selectChartName } from "./rootPropsSelectors"
+
+const selectRadiusAxisScale = chartSelector((
+	state: ChartState,
+	radiusAxisId: AxisId,
+): RechartsScale | undefined => selectPolarAxisScale(state, "radiusAxis", radiusAxisId))
+
+const selectRadiusAxisForRadar = chartSelector(function selectRadiusAxisForRadar(state: ChartState, radiusAxisId: AxisId): RadiusAxisForRadar | undefined {
+	const scale = selectRadiusAxisScale(state, radiusAxisId)
+	if (scale == null) {
+		return undefined
+	}
+	return { scale }
+})
+
+export const selectRadiusAxisForBandSize = chartSelector(function selectRadiusAxisForBandSize(state: ChartState, radiusAxisId: AxisId): BaseAxisWithScale | undefined {
+	const axisSettings = selectRadiusAxis(state, radiusAxisId)
+	const scale = selectRadiusAxisScale(state, radiusAxisId)
+	if (axisSettings == null || scale == null) {
+		return undefined
+	}
+	return {
+		...axisSettings,
+		scale,
+	}
+})
+
+const selectRadiusAxisTicks = chartSelector((
+	state: ChartState,
+	radiusAxisId: AxisId,
+	_angleAxisId: AxisId,
+	isPanorama: boolean,
+): ReadonlyArray<TickItem> | undefined => {
+	return selectPolarAxisTicks(state, "radiusAxis", radiusAxisId, isPanorama)
+})
+
+const selectAngleAxisForRadar = (
+	state: ChartState,
+	_radiusAxisId: AxisId,
+	angleAxisId: AxisId,
+): AngleAxisSettings => selectAngleAxis(state, angleAxisId)
+
+const selectPolarAxisScaleForRadar = chartSelector((
+	state: ChartState,
+	_radiusAxisId: AxisId,
+	angleAxisId: AxisId,
+): RechartsScale | undefined => selectPolarAxisScale(state, "angleAxis", angleAxisId))
+
+export const selectAngleAxisForBandSize = chartSelector(function selectAngleAxisForBandSize(state: ChartState, _radiusAxisId: AxisId, angleAxisId: AxisId): BaseAxisWithScale | undefined {
+	const axisSettings = selectAngleAxisForRadar(state, _radiusAxisId, angleAxisId)
+	const scale = selectPolarAxisScaleForRadar(state, _radiusAxisId, angleAxisId)
+	if (axisSettings == null || scale == null) {
+		return undefined
+	}
+	return {
+		...axisSettings,
+		scale,
+	}
+})
+
+const selectAngleAxisTicks = chartSelector((
+	state: ChartState,
+	_radiusAxisId: AxisId,
+	angleAxisId: AxisId,
+	isPanorama: boolean,
+): ReadonlyArray<TickItem> | undefined => {
+	return selectPolarAxisTicks(state, "angleAxis", angleAxisId, isPanorama)
+})
+
+export const selectAngleAxisWithScaleAndViewport = chartSelector(function selectAngleAxisWithScaleAndViewport(state: ChartState, _radiusAxisId: AxisId, angleAxisId: AxisId): AngleAxisForRadar | undefined {
+	const axisOptions = selectAngleAxisForRadar(state, _radiusAxisId, angleAxisId)
+	const scale = selectPolarAxisScaleForRadar(state, _radiusAxisId, angleAxisId)
+	const polarViewBox: PolarViewBoxRequired | undefined = selectPolarViewBox(state)
+
+	if (polarViewBox == null || scale == null) {
+		return undefined
+	}
+	return {
+		cx: polarViewBox.cx,
+		cy: polarViewBox.cy,
+		dataKey: axisOptions.dataKey,
+		scale,
+		type: axisOptions.type,
+	}
+})
+
+const selectAngleAxisWithScaleAndViewportWithOverride = chartSelector(function selectAngleAxisWithScaleAndViewportWithOverride(state: ChartState, _radiusAxisId: AxisId, angleAxisId: AxisId, override: AngleAxisSettings): AngleAxisForRadar | undefined {
+	const polarViewBox: PolarViewBoxRequired | undefined = selectPolarViewBox(state)
+	if (polarViewBox == null) {
+		return undefined
+	}
+	const axisRange = selectAngleAxisRangeWithReversed(state, angleAxisId)
+	if (axisRange == null) {
+		return undefined
+	}
+	/* When override has an explicit domain use it directly so mutations that set a
+	   numerical domain on a categorical axis actually change the scale — bypassing
+	   the data-derived categorical domain that would otherwise override it. */
+	const axisDomain = override.domain != null
+		? (override.domain as unknown as CategoricalDomain)
+		: selectPolarAxisCheckedDomain(state, "angleAxis", angleAxisId)
+	if (axisDomain == null) {
+		return undefined
+	}
+	const realScaleType = combineRealScaleType(override, selectHasBar(state), selectChartName(state))
+	const scale: RechartsScale | undefined = rechartsScaleFactory(
+		combineConfiguredScale(override, realScaleType, axisDomain, axisRange),
+	)
+	if (scale == null) {
+		return undefined
+	}
+	return {
+		cx: polarViewBox.cx,
+		cy: polarViewBox.cy,
+		dataKey: override.dataKey,
+		scale,
+		type: override.type,
+	}
+})
+
+const selectBandSizeOfAxis = chartSelector(function selectBandSizeOfAxis(state: ChartState, radiusAxisId: AxisId, angleAxisId: AxisId, isPanorama: boolean): number | undefined {
+	const layout: LayoutType = selectChartLayout(state)
+	const radiusAxis = selectRadiusAxisForBandSize(state, radiusAxisId)
+	const radiusAxisTicks = selectRadiusAxisTicks(state, radiusAxisId, angleAxisId, isPanorama)
+	const angleAxis = selectAngleAxisForBandSize(state, radiusAxisId, angleAxisId)
+	const angleAxisTicks = selectAngleAxisTicks(state, radiusAxisId, angleAxisId, isPanorama)
+
+	if (isCategoricalAxis(layout, "radiusAxis")) {
+		return getBandSizeOfAxis(radiusAxis, radiusAxisTicks, false)
+	}
+	return getBandSizeOfAxis(angleAxis, angleAxisTicks, false)
+})
+
+const selectSynchronisedRadarDataKey = chartSelector(function selectSynchronisedRadarDataKey(state: ChartState, radarId: GraphicalItemId): DataKey<unknown> | undefined {
+	const graphicalItems = selectUnfilteredPolarItems(state)
+	if (graphicalItems == null) {
+		return undefined
+	}
+	const pgis = graphicalItems.find((item) => item.type === "radar" && radarId === item.id)
+	return pgis?.dataKey
+})
+
+export const selectRadarPoints = chartSelector(function selectRadarPoints(state: ChartState, radiusAxisId: AxisId, angleAxisId: AxisId, isPanorama: boolean, radarId: GraphicalItemId, angleAxisOverride?: AngleAxisSettings): RadarComposedData | undefined {
+	const radiusAxis = selectRadiusAxisForRadar(state, radiusAxisId)
+	const angleAxis = angleAxisOverride != null
+		? selectAngleAxisWithScaleAndViewportWithOverride(state, radiusAxisId, angleAxisId, angleAxisOverride)
+		: selectAngleAxisWithScaleAndViewport(state, radiusAxisId, angleAxisId)
+	const { chartData, dataStartIndex, dataEndIndex }: ChartDataState =
+		selectChartDataAndAlwaysIgnoreIndexes(state)
+	const dataKey = selectSynchronisedRadarDataKey(state, radarId)
+	const bandSize = selectBandSizeOfAxis(state, radiusAxisId, angleAxisId, isPanorama)
+
+	if (
+		radiusAxis == null ||
+		angleAxis == null ||
+		chartData == null ||
+		bandSize == null ||
+		dataKey == null
+	) {
+		return undefined
+	}
+	const displayedData = chartData.slice(dataStartIndex, dataEndIndex + 1)
+	return computeRadarPoints({
+		angleAxis,
+		bandSize,
+		dataKey,
+		displayedData,
+		radiusAxis,
+	})
+})