@octanejs/recharts 0.1.16 → 0.1.18

package/src/state/selectors/radialBarSelectors.ts

@@ -0,0 +1,511 @@
+import { createSelector } from 'reselect';
+import { ReactElement } from 'octane';
+import { Series } from 'victory-vendor/d3-shape';
+import { computeRadialBarDataItems, RadialBarDataItem } from '../../polar/RadialBar';
+import { selectChartDataAndAlwaysIgnoreIndexes, selectChartDataWithIndexes } from './dataSelectors';
+import { RechartsRootState } from '../store';
+import { ChartDataState } from '../chartDataSlice';
+import { AxisId } from '../cartesianAxisSlice';
+import { LayoutType, LegendType, PolarViewBoxRequired, TickItem } from '../../util/types';
+import {
+	selectPolarAxisScale,
+	selectPolarAxisTicks,
+	selectPolarGraphicalItemAxisTicks,
+} from './polarScaleSelectors';
+import { BaseAxisWithScale, combineStackGroups, selectTooltipAxis } from './axisSelectors';
+import { selectAngleAxis, selectPolarViewBox, selectRadiusAxis } from './polarAxisSelectors';
+import { selectChartLayout } from '../../context/chartLayoutContext';
+import {
+	BarPositionPosition,
+	getBandSizeOfAxis,
+	getBaseValueOfBar,
+	isCategoricalAxis,
+} from '../../util/ChartUtils';
+import { BarWithPosition, SizeList } from './barSelectors';
+import {
+	selectBarCategoryGap,
+	selectBarGap,
+	selectReverseStackOrder,
+	selectRootBarSize,
+	selectRootMaxBarSize,
+	selectStackOffsetType,
+} from './rootPropsSelectors';
+import { PolarGraphicalItemSettings } from '../graphicalItemsSlice';
+import {
+	PolarAxisType,
+	selectPolarItemsSettings,
+	selectUnfilteredPolarItems,
+} from './polarSelectors';
+import { AngleAxisSettings, RadiusAxisSettings } from '../polarAxisSlice';
+import { LegendPayload } from '../../component/DefaultLegendContent';
+import { isNullish } from '../../util/DataUtils';
+
+import type {
+	AllStackGroups,
+	StackDataPoint,
+	StackSeries,
+	StackSeriesIdentifier,
+} from '../../util/stacks/stackTypes';
+import {
+	combineDisplayedStackedData,
+	DisplayedStackedData,
+} from './combiners/combineDisplayedStackedData';
+import type { RadialBarSettings } from '../types/RadialBarSettings';
+import { DefinitelyStackedGraphicalItem, isStacked } from '../types/StackedGraphicalItem';
+import { combineBarSizeList } from './combiners/combineBarSizeList';
+import { combineAllBarPositions } from './combiners/combineAllBarPositions';
+import { combineStackedData } from './combiners/combineStackedData';
+import { RechartsScale } from '../../util/scale/RechartsScale';
+import { combineBarPosition } from './combiners/combineBarPosition';
+
+const selectRadiusAxisForRadialBar = (
+	state: RechartsRootState,
+	radiusAxisId: AxisId,
+): RadiusAxisSettings => selectRadiusAxis(state, radiusAxisId);
+
+const selectRadiusAxisScaleForRadar = (
+	state: RechartsRootState,
+	radiusAxisId: AxisId,
+): RechartsScale | undefined => selectPolarAxisScale(state, 'radiusAxis', radiusAxisId);
+
+export const selectRadiusAxisWithScale: (
+	state: RechartsRootState,
+	radiusAxisId: AxisId,
+) => BaseAxisWithScale | undefined = createSelector(
+	[selectRadiusAxisForRadialBar, selectRadiusAxisScaleForRadar],
+	(axis: RadiusAxisSettings, scale: RechartsScale | undefined): BaseAxisWithScale | undefined => {
+		if (axis == null || scale == null) {
+			return undefined;
+		}
+		return { ...axis, scale };
+	},
+);
+
+export const selectRadiusAxisTicks = (
+	state: RechartsRootState,
+	radiusAxisId: AxisId,
+): ReadonlyArray<TickItem> | undefined => {
+	return selectPolarGraphicalItemAxisTicks(state, 'radiusAxis', radiusAxisId, false);
+};
+
+const selectAngleAxisForRadialBar = (
+	state: RechartsRootState,
+	_radiusAxisId: AxisId,
+	angleAxisId: AxisId,
+): AngleAxisSettings => selectAngleAxis(state, angleAxisId);
+
+const selectAngleAxisScaleForRadialBar = (
+	state: RechartsRootState,
+	_radiusAxisId: AxisId,
+	angleAxisId: AxisId,
+): RechartsScale | undefined => selectPolarAxisScale(state, 'angleAxis', angleAxisId);
+
+export const selectAngleAxisWithScale: (
+	state: RechartsRootState,
+	_radiusAxisId: AxisId,
+	angleAxisId: AxisId,
+) => BaseAxisWithScale | undefined = createSelector(
+	[selectAngleAxisForRadialBar, selectAngleAxisScaleForRadialBar],
+	(axis: AngleAxisSettings, scale: RechartsScale | undefined): BaseAxisWithScale | undefined => {
+		if (axis == null || scale == null) {
+			return undefined;
+		}
+		return { ...axis, scale };
+	},
+);
+
+const selectAngleAxisTicks = (
+	state: RechartsRootState,
+	_radiusAxisId: AxisId,
+	angleAxisId: AxisId,
+): ReadonlyArray<TickItem> | undefined => {
+	// here we can hardcode isPanorama to false because radialBar does not support panorama mode
+	return selectPolarAxisTicks(state, 'angleAxis', angleAxisId, false);
+};
+
+const pickRadialBarSettings = (
+	_state: RechartsRootState,
+	_radiusAxisId: AxisId,
+	_angleAxisId: AxisId,
+	radialBarSettings: RadialBarSettings,
+): RadialBarSettings => radialBarSettings;
+
+const selectSynchronisedRadialBarSettings: (
+	state: RechartsRootState,
+	_radiusAxisId: AxisId,
+	_angleAxisId: AxisId,
+	radialBarSettings: RadialBarSettings,
+) => RadialBarSettings | undefined = createSelector(
+	[selectUnfilteredPolarItems, pickRadialBarSettings],
+	(graphicalItems, radialBarSettingsFromProps) => {
+		if (
+			graphicalItems.some(
+				(pgis) =>
+					pgis.type === 'radialBar' &&
+					radialBarSettingsFromProps.dataKey === pgis.dataKey &&
+					radialBarSettingsFromProps.stackId === pgis.stackId,
+			)
+		) {
+			return radialBarSettingsFromProps;
+		}
+		return undefined;
+	},
+);
+
+export const selectBandSizeOfPolarAxis: (
+	state: RechartsRootState,
+	radiusAxisId: AxisId,
+	angleAxisId: AxisId,
+) => number | undefined = createSelector(
+	[
+		selectChartLayout,
+		selectRadiusAxisWithScale,
+		selectRadiusAxisTicks,
+		selectAngleAxisWithScale,
+		selectAngleAxisTicks,
+	],
+	(
+		layout: LayoutType,
+		radiusAxis: BaseAxisWithScale | undefined,
+		radiusAxisTicks: ReadonlyArray<TickItem> | undefined,
+		angleAxis: BaseAxisWithScale | undefined,
+		angleAxisTicks: ReadonlyArray<TickItem> | undefined,
+	) => {
+		if (isCategoricalAxis(layout, 'radiusAxis')) {
+			return getBandSizeOfAxis(radiusAxis, radiusAxisTicks, false);
+		}
+		return getBandSizeOfAxis(angleAxis, angleAxisTicks, false);
+	},
+);
+
+export const selectBaseValue: (
+	state: RechartsRootState,
+	radiusAxisId: AxisId,
+	angleAxisId: AxisId,
+) => number | unknown = createSelector(
+	[selectAngleAxisWithScale, selectRadiusAxisWithScale, selectChartLayout],
+	(angleAxis, radiusAxis, layout) => {
+		const numericAxis = layout === 'radial' ? angleAxis : radiusAxis;
+		if (numericAxis == null || numericAxis.scale == null) {
+			return undefined;
+		}
+		return getBaseValueOfBar({ numericAxis });
+	},
+);
+
+const pickCells = (
+	_state: RechartsRootState,
+	_radiusAxisId: AxisId,
+	_angleAxisId: AxisId,
+	_radialBarSettings: RadialBarSettings,
+	cells: ReadonlyArray<ReactElement> | undefined,
+) => cells;
+
+const pickAngleAxisId = (
+	_state: RechartsRootState,
+	_radiusAxisId: AxisId,
+	angleAxisId: AxisId,
+	_radialBarSettings: RadialBarSettings,
+	_cells: ReadonlyArray<ReactElement> | undefined,
+): AxisId => angleAxisId;
+
+const pickRadiusAxisId = (
+	_state: RechartsRootState,
+	radiusAxisId: AxisId,
+	_angleAxisId: AxisId,
+	_radialBarSettings: RadialBarSettings,
+	_cells: ReadonlyArray<ReactElement> | undefined,
+): AxisId => radiusAxisId;
+
+export const pickMaxBarSize = (
+	_state: RechartsRootState,
+	_radiusAxisId: AxisId,
+	_angleAxisId: AxisId,
+	radialBarSettings: RadialBarSettings,
+	_cells: ReadonlyArray<ReactElement> | undefined,
+): number | undefined => radialBarSettings.maxBarSize;
+
+const isRadialBar = (item: PolarGraphicalItemSettings): item is RadialBarSettings =>
+	item.type === 'radialBar';
+
+const selectAllVisibleRadialBars: (
+	state: RechartsRootState,
+	radiusAxisId: AxisId,
+	angleAxisId: AxisId,
+	radialBarSettings: RadialBarSettings,
+	cells: ReadonlyArray<ReactElement> | undefined,
+) => ReadonlyArray<RadialBarSettings> = createSelector(
+	[selectChartLayout, selectUnfilteredPolarItems, pickAngleAxisId, pickRadiusAxisId],
+	(
+		layout: LayoutType,
+		allItems: ReadonlyArray<PolarGraphicalItemSettings>,
+		angleAxisId: AxisId,
+		radiusAxisId: AxisId,
+	): ReadonlyArray<RadialBarSettings> => {
+		return allItems
+			.filter((i) => {
+				if (layout === 'centric') {
+					return i.angleAxisId === angleAxisId;
+				}
+				return i.radiusAxisId === radiusAxisId;
+			})
+			.filter((i) => i.hide === false)
+			.filter(isRadialBar);
+	},
+);
+
+/**
+ * The generator never returned the totalSize which means that barSize in polar chart can not support percent values.
+ * We can add that if we want to I suppose.
+ * @returns undefined - but it should be a total size of numerical axis in polar chart
+ */
+const selectPolarBarAxisSize = (): undefined => undefined;
+
+export const selectPolarBarSizeList: (
+	state: RechartsRootState,
+	radiusAxisId: AxisId,
+	angleAxisId: AxisId,
+	radialBarSettings: RadialBarSettings,
+	cells: ReadonlyArray<ReactElement> | undefined,
+) => SizeList = createSelector(
+	[selectAllVisibleRadialBars, selectRootBarSize, selectPolarBarAxisSize],
+	combineBarSizeList,
+);
+
+export const selectPolarBarBandSize: (
+	state: RechartsRootState,
+	radiusAxisId: AxisId,
+	angleAxisId: AxisId,
+	radialBarSettings: RadialBarSettings,
+	cells: ReadonlyArray<ReactElement> | undefined,
+) => number = createSelector(
+	[
+		selectChartLayout,
+		selectRootMaxBarSize,
+		selectAngleAxisWithScale,
+		selectAngleAxisTicks,
+		selectRadiusAxisWithScale,
+		selectRadiusAxisTicks,
+		pickMaxBarSize,
+	],
+	(
+		layout: LayoutType,
+		globalMaxBarSize: number | undefined,
+		angleAxis: BaseAxisWithScale | undefined,
+		angleAxisTicks: ReadonlyArray<TickItem> | undefined,
+		radiusAxis: BaseAxisWithScale | undefined,
+		radiusAxisTicks: ReadonlyArray<TickItem> | undefined,
+		childMaxBarSize: number | undefined,
+	): number => {
+		const maxBarSize: number | undefined = isNullish(childMaxBarSize)
+			? globalMaxBarSize
+			: childMaxBarSize;
+		if (layout === 'centric') {
+			return getBandSizeOfAxis(angleAxis, angleAxisTicks, true) ?? maxBarSize ?? 0;
+		}
+		return getBandSizeOfAxis(radiusAxis, radiusAxisTicks, true) ?? maxBarSize ?? 0;
+	},
+);
+
+export const selectAllPolarBarPositions: (
+	state: RechartsRootState,
+	radiusAxisId: AxisId,
+	angleAxisId: AxisId,
+	radialBarSettings: RadialBarSettings,
+	cells: ReadonlyArray<ReactElement> | undefined,
+) => ReadonlyArray<BarWithPosition> | undefined = createSelector(
+	[
+		selectPolarBarSizeList,
+		selectRootMaxBarSize,
+		selectBarGap,
+		selectBarCategoryGap,
+		selectPolarBarBandSize,
+		selectBandSizeOfPolarAxis,
+		pickMaxBarSize,
+	],
+	combineAllBarPositions,
+);
+
+export const selectPolarBarPosition: (
+	state: RechartsRootState,
+	radiusAxisId: AxisId,
+	angleAxisId: AxisId,
+	radialBarSettings: RadialBarSettings,
+	cells: ReadonlyArray<ReactElement> | undefined,
+) => BarPositionPosition | undefined = createSelector(
+	[selectAllPolarBarPositions, selectSynchronisedRadialBarSettings],
+	combineBarPosition,
+);
+
+const selectStackedRadialBars: (
+	state: RechartsRootState,
+	axisType: PolarAxisType,
+	polarAxisId: AxisId,
+) => ReadonlyArray<DefinitelyStackedGraphicalItem> = createSelector(
+	[selectPolarItemsSettings],
+	(
+		allPolarItems: ReadonlyArray<PolarGraphicalItemSettings>,
+	): ReadonlyArray<DefinitelyStackedGraphicalItem> =>
+		allPolarItems.filter(isRadialBar).filter(isStacked),
+);
+
+const selectPolarCombinedStackedData: (
+	state: RechartsRootState,
+	axisType: PolarAxisType,
+	polarAxisId: AxisId,
+) => DisplayedStackedData = createSelector(
+	[selectStackedRadialBars, selectChartDataAndAlwaysIgnoreIndexes, selectTooltipAxis],
+	combineDisplayedStackedData,
+);
+
+const selectStackGroups: (
+	state: RechartsRootState,
+	axisType: PolarAxisType,
+	polarAxisId: AxisId,
+) => AllStackGroups | undefined = createSelector(
+	[
+		selectPolarCombinedStackedData,
+		selectStackedRadialBars,
+		selectStackOffsetType,
+		selectReverseStackOrder,
+	],
+	combineStackGroups,
+);
+
+const selectRadialBarStackGroups: (
+	state: RechartsRootState,
+	radiusAxisId: AxisId,
+	angleAxisId: AxisId,
+	radialBarSettings: RadialBarSettings,
+	cells: ReadonlyArray<ReactElement> | undefined,
+) => AllStackGroups | undefined = (state, radiusAxisId, angleAxisId) => {
+	const layout = selectChartLayout(state);
+	if (layout === 'centric') {
+		return selectStackGroups(state, 'radiusAxis', radiusAxisId);
+	}
+	return selectStackGroups(state, 'angleAxis', angleAxisId);
+};
+
+const selectPolarStackedData: (
+	state: RechartsRootState,
+	radiusAxisId: AxisId,
+	angleAxisId: AxisId,
+	radialBarSettings: RadialBarSettings,
+	cells: ReadonlyArray<ReactElement> | undefined,
+) => StackSeries | undefined = createSelector(
+	[selectRadialBarStackGroups, selectSynchronisedRadialBarSettings],
+	combineStackedData,
+);
+
+export const selectRadialBarSectors: (
+	state: RechartsRootState,
+	radiusAxisId: AxisId,
+	angleAxisId: AxisId,
+	radialBarSettings: RadialBarSettings,
+	cells: ReadonlyArray<ReactElement> | undefined,
+) => ReadonlyArray<RadialBarDataItem> = createSelector(
+	[
+		selectAngleAxisWithScale,
+		selectAngleAxisTicks,
+		selectRadiusAxisWithScale,
+		selectRadiusAxisTicks,
+		selectChartDataWithIndexes,
+		selectSynchronisedRadialBarSettings,
+		selectBandSizeOfPolarAxis,
+		selectChartLayout,
+		selectBaseValue,
+		selectPolarViewBox,
+		pickCells,
+		selectPolarBarPosition,
+		selectPolarStackedData,
+	],
+	(
+		angleAxis: BaseAxisWithScale | undefined,
+		angleAxisTicks: ReadonlyArray<TickItem> | undefined,
+		radiusAxis: BaseAxisWithScale | undefined,
+		radiusAxisTicks: ReadonlyArray<TickItem> | undefined,
+		{ chartData, dataStartIndex, dataEndIndex }: ChartDataState,
+		radialBarSettings: RadialBarSettings | undefined,
+		bandSize: number | undefined,
+		layout: LayoutType,
+		baseValue: number | unknown,
+		polarViewBox: PolarViewBoxRequired | undefined,
+		cells: ReadonlyArray<ReactElement> | undefined,
+		pos: BarPositionPosition | undefined,
+		stackedData: Series<StackDataPoint, StackSeriesIdentifier> | undefined,
+	): ReadonlyArray<RadialBarDataItem> => {
+		if (
+			radialBarSettings == null ||
+			radiusAxis == null ||
+			angleAxis == null ||
+			chartData == null ||
+			bandSize == null ||
+			pos == null ||
+			(layout !== 'centric' && layout !== 'radial') ||
+			radiusAxisTicks == null ||
+			polarViewBox == null
+		) {
+			return [];
+		}
+		const { dataKey, minPointSize } = radialBarSettings;
+		const { cx, cy, startAngle, endAngle } = polarViewBox;
+		const displayedData = chartData.slice(dataStartIndex, dataEndIndex + 1);
+		const numericAxis = layout === 'centric' ? radiusAxis : angleAxis;
+		const stackedDomain: ReadonlyArray<unknown> | null = stackedData
+			? numericAxis.scale.domain()
+			: null;
+		return computeRadialBarDataItems({
+			angleAxis,
+			angleAxisTicks,
+			bandSize,
+			baseValue,
+			cells,
+			cx,
+			cy,
+			dataKey,
+			dataStartIndex,
+			displayedData,
+			endAngle,
+			layout,
+			minPointSize,
+			pos,
+			radiusAxis,
+			radiusAxisTicks,
+			stackedData,
+			stackedDomain,
+			startAngle,
+		});
+	},
+);
+
+export const selectRadialBarLegendPayload: (
+	state: RechartsRootState,
+	legendType: LegendType | undefined,
+) => ReadonlyArray<LegendPayload> = createSelector(
+	[selectChartDataAndAlwaysIgnoreIndexes, (_s: RechartsRootState, l: LegendType | undefined) => l],
+	(
+		{ chartData, dataStartIndex, dataEndIndex }: ChartDataState,
+		legendType: LegendType | undefined,
+	): ReadonlyArray<LegendPayload> => {
+		if (chartData == null) {
+			return [];
+		}
+		const displayedData = chartData.slice(dataStartIndex, dataEndIndex + 1);
+
+		if (displayedData.length === 0) {
+			return [];
+		}
+
+		return displayedData.map((entry): LegendPayload => {
+			return {
+				type: legendType,
+				// @ts-expect-error we need a better typing for our data inputs
+				value: entry.name,
+				// @ts-expect-error we need a better typing for our data inputs
+				color: entry.fill,
+				// @ts-expect-error Legend payload.payload says it wants objects but our data can be unknown
+				payload: entry,
+			};
+		});
+	},
+);

package/src/state/selectors/scatterSelectors.ts

@@ -0,0 +1,168 @@
+import { createSelector } from 'reselect';
+import { ReactElement } from 'octane';
+import { computeScatterPoints, ScatterPointItem } from '../../cartesian/Scatter';
+import { RechartsRootState } from '../store';
+import { AxisId } from '../cartesianAxisSlice';
+import { selectChartDataWithIndexesIfNotInPanoramaPosition4 } from './dataSelectors';
+import { ChartData, ChartDataState } from '../chartDataSlice';
+import {
+	BaseAxisWithScale,
+	selectAxisWithScale,
+	selectTicksOfGraphicalItem,
+	selectUnfilteredCartesianItems,
+	selectZAxisWithScale,
+	ZAxisWithScale,
+} from './axisSelectors';
+import type { ScatterSettings } from '../types/ScatterSettings';
+import { GraphicalItemId } from '../graphicalItemsSlice';
+import { TickItem } from '../../util/types';
+
+const selectXAxisWithScale = (
+	state: RechartsRootState,
+	xAxisId: AxisId,
+	_yAxisId: AxisId,
+	_zAxisId: AxisId,
+	_id: GraphicalItemId,
+	_cells: ReadonlyArray<ReactElement> | undefined,
+	isPanorama: boolean,
+) => selectAxisWithScale(state, 'xAxis', xAxisId, isPanorama);
+
+const selectXAxisTicks = (
+	state: RechartsRootState,
+	xAxisId: AxisId,
+	_yAxisId: AxisId,
+	_zAxisId: AxisId,
+	_id: GraphicalItemId,
+	_cells: ReadonlyArray<ReactElement> | undefined,
+	isPanorama: boolean,
+) => selectTicksOfGraphicalItem(state, 'xAxis', xAxisId, isPanorama);
+
+const selectYAxisWithScale = (
+	state: RechartsRootState,
+	_xAxisId: AxisId,
+	yAxisId: AxisId,
+	_zAxisId: AxisId,
+	_id: GraphicalItemId,
+	_cells: ReadonlyArray<ReactElement> | undefined,
+	isPanorama: boolean,
+) => selectAxisWithScale(state, 'yAxis', yAxisId, isPanorama);
+
+const selectYAxisTicks = (
+	state: RechartsRootState,
+	_xAxisId: AxisId,
+	yAxisId: AxisId,
+	_zAxisId: AxisId,
+	_id: GraphicalItemId,
+	_cells: ReadonlyArray<ReactElement> | undefined,
+	isPanorama: boolean,
+) => selectTicksOfGraphicalItem(state, 'yAxis', yAxisId, isPanorama);
+
+const selectZAxis = (
+	state: RechartsRootState,
+	_xAxisId: AxisId,
+	_yAxisId: AxisId,
+	zAxisId: AxisId,
+): ZAxisWithScale | undefined => selectZAxisWithScale(state, 'zAxis', zAxisId, false);
+
+const pickScatterId = (
+	_state: RechartsRootState,
+	_xAxisId: AxisId,
+	_yAxisId: AxisId,
+	_zAxisId: AxisId,
+	id: GraphicalItemId,
+) => id;
+
+const pickCells = (
+	_state: RechartsRootState,
+	_xAxisId: AxisId,
+	_yAxisId: AxisId,
+	_zAxisId: AxisId,
+	_id: GraphicalItemId,
+	cells: ReadonlyArray<ReactElement> | undefined,
+): ReadonlyArray<ReactElement> | undefined => cells;
+
+const scatterChartDataSelector = (
+	state: RechartsRootState,
+	_xAxisId: AxisId,
+	_yAxisId: AxisId,
+	_zAxisId: AxisId,
+	_id: GraphicalItemId,
+	_cells: ReadonlyArray<ReactElement> | undefined,
+	isPanorama: boolean,
+): ChartDataState =>
+	selectChartDataWithIndexesIfNotInPanoramaPosition4(state, undefined, undefined, isPanorama);
+
+const selectSynchronisedScatterSettings: (
+	state: RechartsRootState,
+	xAxisId: AxisId,
+	yAxisId: AxisId,
+	_zAxisId: AxisId,
+	id: GraphicalItemId,
+) => ScatterSettings | undefined = createSelector(
+	[selectUnfilteredCartesianItems, pickScatterId],
+	(graphicalItems, id) => {
+		return graphicalItems.filter((item) => item.type === 'scatter').find((item) => item.id === id);
+	},
+);
+
+export const selectScatterPoints: (
+	state: RechartsRootState,
+	xAxisId: AxisId,
+	yAxisId: AxisId,
+	zAxisId: AxisId,
+	id: GraphicalItemId,
+	cells: ReadonlyArray<ReactElement> | undefined,
+	isPanorama: boolean,
+) => ReadonlyArray<ScatterPointItem> | undefined = createSelector(
+	[
+		scatterChartDataSelector,
+		selectXAxisWithScale,
+		selectXAxisTicks,
+		selectYAxisWithScale,
+		selectYAxisTicks,
+		selectZAxis,
+		selectSynchronisedScatterSettings,
+		pickCells,
+	],
+	(
+		{ chartData, dataStartIndex, dataEndIndex }: ChartDataState,
+		xAxis: BaseAxisWithScale | undefined,
+		xAxisTicks: ReadonlyArray<TickItem> | undefined,
+		yAxis: BaseAxisWithScale | undefined,
+		yAxisTicks: ReadonlyArray<TickItem> | undefined,
+		zAxis: ZAxisWithScale | undefined,
+		scatterSettings: ScatterSettings | undefined,
+		cells,
+	): ReadonlyArray<ScatterPointItem> | undefined => {
+		if (scatterSettings == null) {
+			return undefined;
+		}
+		let displayedData: ChartData | undefined;
+		if (scatterSettings?.data != null && scatterSettings.data.length > 0) {
+			displayedData = scatterSettings.data;
+		} else {
+			displayedData = chartData?.slice(dataStartIndex, dataEndIndex + 1);
+		}
+		if (
+			displayedData == null ||
+			xAxis == null ||
+			yAxis == null ||
+			xAxisTicks == null ||
+			yAxisTicks == null ||
+			xAxisTicks?.length === 0 ||
+			yAxisTicks?.length === 0
+		) {
+			return undefined;
+		}
+		return computeScatterPoints({
+			displayedData,
+			xAxis,
+			yAxis,
+			zAxis,
+			scatterSettings,
+			xAxisTicks,
+			yAxisTicks,
+			cells,
+		});
+	},
+);

package/src/util/FunnelUtils.tsrx

@@ -0,0 +1,19 @@
+import * as React from 'octane';
+import { Props as FunnelProps, FunnelTrapezoidItem } from '../cartesian/Funnel';
+import { Trapezoid } from '../shape/Trapezoid';
+import { ShapeAnimationProps } from './types';
+import { Shape } from './ActiveShapeUtils';
+
+export const defaultFunnelShape = Trapezoid;
+
+export type FunnelTrapezoidProps =
+	{
+		option: Exclude<FunnelProps['shape'], undefined> | FunnelProps['activeShape'];
+		isActive: boolean;
+	} & ShapeAnimationProps & FunnelTrapezoidItem;
+
+type FunnelTrapezoidShapeProps = Omit<FunnelTrapezoidProps, 'option'>;
+
+export function FunnelTrapezoid({ option, ...shapeProps }: FunnelTrapezoidProps) {
+	return <Shape option={option} DefaultShape={defaultFunnelShape} shapeProps={shapeProps} />;
+}