@octanejs/recharts 0.1.16 → 0.1.18

package/src/state/selectors/pieSelectors.ts

@@ -0,0 +1,134 @@
+import { createSelector } from 'reselect';
+import { ReactElement } from 'octane';
+import { CellProps } from '../..';
+import { computePieSectors, PieSectorDataItem } from '../../polar/Pie';
+import { RechartsRootState } from '../store';
+import { selectChartDataAndAlwaysIgnoreIndexes } from './dataSelectors';
+import { ChartData, ChartDataState } from '../chartDataSlice';
+import { ChartOffsetInternal } from '../../util/types';
+import { selectChartOffsetInternal } from './selectChartOffsetInternal';
+import type { LegendPayload } from '../../component/DefaultLegendContent';
+import { getTooltipNameProp, getValueByDataKey } from '../../util/ChartUtils';
+import { selectUnfilteredPolarItems } from './polarSelectors';
+import type { PieSettings } from '../types/PieSettings';
+import { GraphicalItemId } from '../graphicalItemsSlice';
+
+const pickId = (_state: RechartsRootState, id: GraphicalItemId): GraphicalItemId => id;
+
+const selectSynchronisedPieSettings: (
+	state: RechartsRootState,
+	id: GraphicalItemId,
+) => PieSettings | undefined = createSelector(
+	[selectUnfilteredPolarItems, pickId],
+	(graphicalItems, id) =>
+		graphicalItems.filter((item) => item.type === 'pie').find((item) => item.id === id),
+);
+
+// Keep stable reference to an empty array to prevent re-renders
+const emptyArray: ReadonlyArray<ReactElement> = [];
+const pickCells = (
+	_state: RechartsRootState,
+	_id: GraphicalItemId,
+	cells: ReadonlyArray<ReactElement> | undefined,
+): ReadonlyArray<ReactElement> | undefined => {
+	if (cells?.length === 0) {
+		return emptyArray;
+	}
+	return cells;
+};
+
+export const selectDisplayedData: (
+	state: RechartsRootState,
+	id: GraphicalItemId,
+	cells: ReadonlyArray<ReactElement> | undefined,
+) => ChartData | undefined = createSelector(
+	[selectChartDataAndAlwaysIgnoreIndexes, selectSynchronisedPieSettings, pickCells],
+	(
+		{ chartData }: ChartDataState,
+		pieSettings: PieSettings | undefined,
+		cells,
+	): ChartData | undefined => {
+		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) && cells != null) {
+			displayedData = cells.map((cell: ReactElement<CellProps>) => ({
+				...pieSettings.presentationProps,
+				...cell.props,
+			}));
+		}
+
+		if (displayedData == null) {
+			return undefined;
+		}
+
+		return displayedData;
+	},
+);
+
+export const selectPieLegend: (
+	state: RechartsRootState,
+	id: GraphicalItemId,
+	cells: ReadonlyArray<ReactElement> | undefined,
+) => ReadonlyArray<LegendPayload> | undefined = createSelector(
+	[selectDisplayedData, selectSynchronisedPieSettings, pickCells],
+	(
+		displayedData: ChartData | undefined,
+		pieSettings: PieSettings | undefined,
+		cells: ReadonlyArray<ReactElement> | undefined,
+	): ReadonlyArray<LegendPayload> | undefined => {
+		if (displayedData == null || pieSettings == null) {
+			return undefined;
+		}
+		return displayedData.map((entry, i): LegendPayload => {
+			const name = getValueByDataKey(entry, pieSettings.nameKey, pieSettings.name);
+			let color;
+			if (cells?.[i]?.props?.fill) {
+				color = cells[i].props.fill;
+			} else if (typeof entry === 'object' && entry != null && 'fill' in entry) {
+				color = entry.fill;
+			} else {
+				color = pieSettings.fill;
+			}
+			return {
+				value: getTooltipNameProp(name, pieSettings.dataKey),
+				dataKey: pieSettings.dataKey,
+				color,
+				// @ts-expect-error Legend payload.payload says it wants objects but our data can be unknown
+				payload: entry,
+				type: pieSettings.legendType,
+			};
+		});
+	},
+);
+
+export const selectPieSectors: (
+	state: RechartsRootState,
+	id: GraphicalItemId,
+	cells: ReadonlyArray<ReactElement> | undefined,
+) => ReadonlyArray<PieSectorDataItem> | undefined = createSelector(
+	[selectDisplayedData, selectSynchronisedPieSettings, pickCells, selectChartOffsetInternal],
+	(
+		displayedData: ChartData | undefined,
+		pieSettings: PieSettings | undefined,
+		cells,
+		offset: ChartOffsetInternal,
+	): ReadonlyArray<PieSectorDataItem> | undefined => {
+		if (pieSettings == null || displayedData == null) {
+			return undefined;
+		}
+		return computePieSectors({
+			offset,
+			pieSettings,
+			displayedData,
+			cells,
+		});
+	},
+);

package/src/state/selectors/polarGridSelectors.ts

@@ -0,0 +1,43 @@
+import { createSelector } from 'reselect';
+import { RechartsRootState } from '../store';
+import { AxisId } from '../cartesianAxisSlice';
+import { selectPolarAxisTicks } from './polarScaleSelectors';
+import { CartesianTickItem } from '../../util/types';
+
+export type PolarAngles = Array<number>;
+
+export type PolarRadius = Array<number>;
+
+const selectAngleAxisTicks = (state: RechartsRootState, anglexisId: AxisId) =>
+	selectPolarAxisTicks(state, 'angleAxis', anglexisId, false);
+
+export const selectPolarGridAngles: (
+	state: RechartsRootState,
+	angleAxisId: AxisId,
+) => PolarAngles | undefined = createSelector(
+	[selectAngleAxisTicks],
+	(ticks: ReadonlyArray<CartesianTickItem> | undefined): PolarAngles | undefined => {
+		if (!ticks) {
+			return undefined;
+		}
+
+		return ticks.map((tick) => tick.coordinate);
+	},
+);
+
+const selectRadiusAxisTicks = (state: RechartsRootState, radiusAxisId: AxisId) =>
+	selectPolarAxisTicks(state, 'radiusAxis', radiusAxisId, false);
+
+export const selectPolarGridRadii: (
+	state: RechartsRootState,
+	radiusAxisId: AxisId,
+) => PolarRadius | undefined = createSelector(
+	[selectRadiusAxisTicks],
+	(ticks: ReadonlyArray<CartesianTickItem> | undefined): PolarRadius | undefined => {
+		if (!ticks) {
+			return undefined;
+		}
+
+		return ticks.map((tick) => tick.coordinate);
+	},
+);

package/src/state/selectors/polarScaleSelectors.ts

@@ -0,0 +1,159 @@
+import { createSelector } from 'reselect';
+import { RechartsRootState } from '../store';
+import { AxisId } from '../cartesianAxisSlice';
+import {
+	combineAxisTicks,
+	combineCategoricalDomain,
+	combineGraphicalItemTicks,
+	selectDuplicateDomain,
+	selectRealScaleType,
+	selectRenderableAxisSettings,
+} from './axisSelectors';
+import {
+	selectAngleAxis,
+	selectAngleAxisRangeWithReversed,
+	selectRadiusAxis,
+	selectRadiusAxisRangeWithReversed,
+} from './polarAxisSelectors';
+import { CartesianTickItem } from '../../util/types';
+import { selectChartLayout } from '../../context/chartLayoutContext';
+import {
+	selectPolarAppliedValues,
+	selectPolarAxisCheckedDomain,
+	selectPolarNiceTicks,
+} from './polarSelectors';
+import { pickAxisType } from './pickAxisType';
+import { RechartsScale, rechartsScaleFactory } from '../../util/scale/RechartsScale';
+import type { CustomScaleDefinition } from '../../util/scale/CustomScaleDefinition';
+import { combineConfiguredScale } from './combiners/combineConfiguredScale';
+
+export const selectPolarAxis = (
+	state: RechartsRootState,
+	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 = (
+	state: RechartsRootState,
+	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: (
+	state: RechartsRootState,
+	axisType: 'angleAxis' | 'radiusAxis',
+	polarAxisId: AxisId,
+) => CustomScaleDefinition | undefined = createSelector(
+	[
+		selectPolarAxis,
+		selectRealScaleType,
+		selectPolarAxisCheckedDomain,
+		selectPolarAxisRangeWithReversed,
+	],
+	combineConfiguredScale,
+);
+
+export const selectPolarAxisScale: (
+	state: RechartsRootState,
+	axisType: 'angleAxis' | 'radiusAxis',
+	polarAxisId: AxisId,
+) => RechartsScale | undefined = createSelector([selectPolarConfiguredScale], rechartsScaleFactory);
+
+export const selectPolarCategoricalDomain: (
+	state: RechartsRootState,
+	axisType: 'angleAxis' | 'radiusAxis',
+	polarAxisId: AxisId,
+) => ReadonlyArray<unknown> | undefined = createSelector(
+	[selectChartLayout, selectPolarAppliedValues, selectRenderableAxisSettings, pickAxisType],
+	combineCategoricalDomain,
+);
+
+export const selectPolarAxisTicks: (
+	state: RechartsRootState,
+	axisType: 'angleAxis' | 'radiusAxis',
+	polarAxisId: AxisId,
+	isPanorama: boolean,
+) => ReadonlyArray<CartesianTickItem> | undefined = createSelector(
+	[
+		selectChartLayout,
+		selectPolarAxis,
+		selectRealScaleType,
+		selectPolarAxisScale,
+		selectPolarNiceTicks,
+		selectPolarAxisRangeWithReversed,
+		selectDuplicateDomain,
+		selectPolarCategoricalDomain,
+		pickAxisType,
+	],
+	combineAxisTicks,
+);
+
+export const selectPolarAngleAxisTicks: (
+	state: RechartsRootState,
+	axisType: 'angleAxis',
+	polarAxisId: AxisId,
+	isPanorama: boolean,
+) => ReadonlyArray<CartesianTickItem> | undefined = createSelector(
+	[selectPolarAxisTicks],
+	(ticks) => {
+		/*
+		 * 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: (
+	state: RechartsRootState,
+	axisType: 'angleAxis' | 'radiusAxis',
+	polarAxisId: AxisId,
+	isPanorama: boolean,
+) => ReadonlyArray<CartesianTickItem> | undefined = createSelector(
+	[
+		selectChartLayout,
+		selectPolarAxis,
+		selectPolarAxisScale,
+		selectPolarAxisRangeWithReversed,
+		selectDuplicateDomain,
+		selectPolarCategoricalDomain,
+		pickAxisType,
+	],
+	combineGraphicalItemTicks,
+);

package/src/state/selectors/polarSelectors.ts

@@ -0,0 +1,198 @@
+import { createSelector } from 'reselect';
+import { AppliedChartData, ChartData } from '../chartDataSlice';
+import { RechartsRootState } from '../store';
+import { AxisId, BaseCartesianAxis } from '../cartesianAxisSlice';
+import {
+	selectChartDataAndAlwaysIgnoreIndexes,
+	selectChartDataSliceIgnoringIndexes,
+} from './dataSelectors';
+import {
+	AppliedChartDataWithErrorDomain,
+	combineAppliedValues,
+	combineAxisDomain,
+	combineAxisDomainWithNiceTicks,
+	combineDisplayedData,
+	combineDomainOfAllAppliedNumericalValuesIncludingErrorValues,
+	combineGraphicalItemsData,
+	combineGraphicalItemsSettings,
+	combineNiceTicks,
+	combineNumericalDomain,
+	itemAxisPredicate,
+	selectAllErrorBarSettings,
+	selectBaseAxis,
+	selectDomainDefinition,
+	selectDomainFromUserPreference,
+	selectRealScaleType,
+	selectRenderableAxisSettings,
+} from './axisSelectors';
+import { PolarGraphicalItemSettings } from '../graphicalItemsSlice';
+import { CategoricalDomain, NumberDomain } from '../../util/types';
+import { selectChartLayout } from '../../context/chartLayoutContext';
+import { getValueByDataKey } from '../../util/ChartUtils';
+import { pickAxisType } from './pickAxisType';
+import { pickAxisId } from './pickAxisId';
+import { selectStackOffsetType } from './rootPropsSelectors';
+import { combineCheckedDomain } from './combiners/combineCheckedDomain';
+
+export type PolarAxisType = 'angleAxis' | 'radiusAxis';
+
+export const selectUnfilteredPolarItems = (state: RechartsRootState) =>
+	state.graphicalItems.polarItems;
+
+const selectAxisPredicate: (
+	_state: RechartsRootState,
+	axisType: PolarAxisType,
+	axisId: AxisId,
+) => (item: PolarGraphicalItemSettings) => boolean = createSelector(
+	[pickAxisType, pickAxisId],
+	itemAxisPredicate,
+);
+
+export const selectPolarItemsSettings: (
+	state: RechartsRootState,
+	axisType: PolarAxisType,
+	polarAxisId: AxisId,
+) => ReadonlyArray<PolarGraphicalItemSettings> = createSelector(
+	[selectUnfilteredPolarItems, selectBaseAxis, selectAxisPredicate],
+	combineGraphicalItemsSettings,
+);
+
+const selectPolarGraphicalItemsData: (
+	state: RechartsRootState,
+	axisType: PolarAxisType,
+	polarAxisId: AxisId,
+) => ChartData = createSelector([selectPolarItemsSettings], combineGraphicalItemsData);
+
+export const selectPolarDisplayedData: (
+	state: RechartsRootState,
+	axisType: PolarAxisType,
+	polarAxisId: AxisId,
+) => ChartData = createSelector(
+	[selectPolarGraphicalItemsData, selectChartDataAndAlwaysIgnoreIndexes],
+	combineDisplayedData,
+);
+
+export const selectPolarAppliedValues: (
+	state: RechartsRootState,
+	axisType: PolarAxisType,
+	axisId: AxisId,
+) => AppliedChartData = createSelector(
+	[selectPolarDisplayedData, selectBaseAxis, selectPolarItemsSettings],
+	combineAppliedValues,
+);
+
+export const selectAllPolarAppliedNumericalValues: (
+	state: RechartsRootState,
+	axisType: PolarAxisType,
+	axisId: AxisId,
+) => ReadonlyArray<AppliedChartDataWithErrorDomain> = createSelector(
+	[selectPolarDisplayedData, selectBaseAxis, selectPolarItemsSettings],
+	(
+		data: ChartData,
+		axisSettings: BaseCartesianAxis,
+		items: ReadonlyArray<PolarGraphicalItemSettings>,
+	): ReadonlyArray<AppliedChartDataWithErrorDomain> => {
+		if (items.length > 0) {
+			return data
+				.flatMap((entry) => {
+					return items.flatMap((item): AppliedChartDataWithErrorDomain | undefined => {
+						const valueByDataKey: unknown = getValueByDataKey(
+							entry,
+							axisSettings.dataKey ?? item.dataKey,
+						);
+						return {
+							value: valueByDataKey,
+							errorDomain: [], // polar charts do not have error bars
+						};
+					});
+				})
+				.filter(Boolean);
+		}
+		if (axisSettings?.dataKey != null) {
+			return data.map((item): AppliedChartDataWithErrorDomain => ({
+				value: getValueByDataKey(item, axisSettings.dataKey),
+				errorDomain: [],
+			}));
+		}
+		return data.map((entry): AppliedChartDataWithErrorDomain => ({
+			value: entry,
+			errorDomain: [],
+		}));
+	},
+);
+
+const unsupportedInPolarChart = (): undefined => undefined;
+
+const selectDomainOfAllPolarAppliedNumericalValues: (
+	state: RechartsRootState,
+	axisType: PolarAxisType,
+	axisId: AxisId,
+) => NumberDomain | undefined = createSelector(
+	[
+		selectPolarDisplayedData,
+		selectBaseAxis,
+		selectPolarItemsSettings,
+		selectAllErrorBarSettings,
+		pickAxisType,
+		selectChartDataSliceIgnoringIndexes,
+	],
+	combineDomainOfAllAppliedNumericalValuesIncludingErrorValues,
+);
+
+const selectPolarNumericalDomain: (
+	state: RechartsRootState,
+	axisType: PolarAxisType,
+	axisId: AxisId,
+) => NumberDomain | undefined = createSelector(
+	[
+		selectBaseAxis,
+		selectDomainDefinition,
+		selectDomainFromUserPreference,
+		unsupportedInPolarChart,
+		selectDomainOfAllPolarAppliedNumericalValues,
+		unsupportedInPolarChart,
+		selectChartLayout,
+		pickAxisType,
+	],
+	combineNumericalDomain,
+);
+
+export const selectPolarAxisDomain: (
+	state: RechartsRootState,
+	axisType: PolarAxisType,
+	polarAxisId: AxisId,
+) => NumberDomain | CategoricalDomain | undefined = createSelector(
+	[
+		selectBaseAxis,
+		selectChartLayout,
+		selectPolarDisplayedData,
+		selectPolarAppliedValues,
+		selectStackOffsetType,
+		pickAxisType,
+		selectPolarNumericalDomain,
+	],
+	combineAxisDomain,
+);
+
+export const selectPolarNiceTicks = createSelector(
+	[selectPolarAxisDomain, selectRenderableAxisSettings, selectRealScaleType],
+	combineNiceTicks,
+);
+
+export const selectPolarAxisDomainIncludingNiceTicks: (
+	state: RechartsRootState,
+	axisType: PolarAxisType,
+	polarAxisId: AxisId,
+) => NumberDomain | CategoricalDomain | undefined = createSelector(
+	[selectBaseAxis, selectPolarAxisDomain, selectPolarNiceTicks, pickAxisType],
+	combineAxisDomainWithNiceTicks,
+);
+
+export const selectPolarAxisCheckedDomain: (
+	state: RechartsRootState,
+	axisType: PolarAxisType,
+	polarAxisId: AxisId,
+) => NumberDomain | CategoricalDomain | undefined = createSelector(
+	[selectRealScaleType, selectPolarAxisDomainIncludingNiceTicks],
+	combineCheckedDomain,
+);