@octanejs/recharts 0.1.16 → 0.1.18

package/src/polar/RadialBar.tsrx.d.ts

@@ -0,0 +1,340 @@
+import * as React from 'octane';
+import { ReactElement } from 'octane';
+import { Series } from 'victory-vendor/d3-shape';
+import { RadialBarSectorProps } from '../util/RadialBarUtils';
+import { Props as SectorProps } from '../shape/Sector';
+import { ImplicitLabelListType } from '../component/LabelList';
+import { BarPositionPosition } from '../util/ChartUtils';
+import {
+	ActiveShape,
+	AnimationDuration,
+	EasingInput,
+	DataConsumer,
+	DataKey,
+	LayoutType,
+	LegendType,
+	PolarViewBoxRequired,
+	PresentationAttributesAdaptChildEvent,
+	TickItem,
+	TooltipType,
+	PolarLayout,
+} from '../util/types';
+import { TooltipTriggerInfo } from '../context/tooltipContext';
+import { Formatter } from '../component/DefaultTooltipContent';
+import { BaseAxisWithScale } from '../state/selectors/axisSelectors';
+import { ChartData } from '../state/chartDataSlice';
+import { AnimationInterpolateFn } from '../animation/AnimatedItems';
+import { AnimationMatchByProp } from '../animation/matchBy';
+import { AxisId } from '../state/cartesianAxisSlice';
+import { ZIndexable } from '../zIndex/ZIndexLayer';
+export type RadialBarDataItem = SectorProps &
+	PolarViewBoxRequired &
+	TooltipTriggerInfo & {
+		value?: any;
+		payload?: any;
+		background?: SectorProps;
+	};
+type RadialBarBackground = boolean | (ActiveShape<SectorProps> & ZIndexable);
+interface InternalRadialBarProps<DataPointType = any, DataValueType = any>
+	extends DataConsumer<DataPointType, DataValueType>, ZIndexable {
+	activeShape?: ActiveShape<RadialBarSectorProps, SVGPathElement>;
+	/**
+	 * @defaultValue 0
+	 */
+	angleAxisId?: AxisId;
+	/**
+	 * Specifies when the animation should begin, the unit of this option is ms.
+	 * @defaultValue 0
+	 */
+	animationBegin?: number;
+	/**
+	 * Specifies the duration of animation, the unit of this option is ms.
+	 * @defaultValue 1500
+	 */
+	animationDuration?: AnimationDuration;
+	/**
+	 * The type of easing function.
+	 * @defaultValue ease
+	 */
+	animationEasing?: EasingInput;
+	/**
+	 * Custom animation function for interpolating data items.
+	 * When provided, this replaces the default animation interpolation.
+	 *
+	 * @param prevItems The items from the previous animation frame, or null on first render
+	 * @param nextItems The target items to animate towards
+	 * @param animationElapsedTime A normalized time value (0 = start, 1 = end)
+	 * @returns The interpolated items at time animationElapsedTime
+	 *
+	 * @since 3.9
+	 * @see {@link https://recharts.github.io/en-US/guide/animations/ Animations guide}
+	 */
+	animationInterpolateFn?: AnimationInterpolateFn<RadialBarDataItem, PolarLayout>;
+	/**
+	 * Strategy for matching previous items to next items during animation.
+	 * Determines how Recharts pairs old data points with new data points
+	 * to create smooth transitions.
+	 *
+	 * - `matchAppend` (default): match sequentially by index and treat newly appended items as new
+	 * - `matchByIndex`: match by array position with proportional stretching
+	 * - `matchByDataKey('someKey')`: match by a data key from the payload
+	 * - Custom function `(item, index) => key`: match by the returned key
+	 *
+	 * @defaultValue append
+	 * @see matchByIndex
+	 * @see matchByDataKey
+	 * @see matchAppend
+	 */
+	animationMatchBy?: AnimationMatchByProp<RadialBarDataItem>;
+	/**
+	 * Renders a background for each bar. Options:
+	 *  - `false`: no background;
+	 *  - `true`: renders default background;
+	 *  - `object`: the props of background rectangle;
+	 *  - `ReactElement`: a custom background element;
+	 *  - `function`: a render function of custom background.
+	 *
+	 * @defaultValue false
+	 */
+	background?: RadialBarBackground;
+	/**
+	 * The width or height of each bar. If the barSize is not specified, the size of the bar will be calculated by the barCategoryGap, barGap and the quantity of bar groups.
+	 */
+	barSize?: number;
+	className?: string;
+	/**
+	 * @defaultValue false
+	 */
+	cornerIsExternal?: boolean;
+	/**
+	 * @defaultValue 0
+	 */
+	cornerRadius?: string | number;
+	/**
+	 * Calculated radial bar sectors
+	 */
+	sectors: ReadonlyArray<RadialBarDataItem>;
+	/**
+	 * @defaultValue false
+	 */
+	forceCornerRadius?: boolean;
+	/**
+	 * @defaultValue false
+	 */
+	hide?: boolean;
+	/**
+	 * If set false, animation of radial bars will be disabled.
+	 * If set "auto", the animation will be disabled in SSR and will respect the user's prefers-reduced-motion system preference for accessibility.
+	 * @defaultValue auto
+	 */
+	isAnimationActive?: boolean | 'auto';
+	/**
+	 * Renders one label for each data point. Options:
+	 * - `true`: renders default labels;
+	 * - `false`: no labels are rendered;
+	 * - `object`: the props of LabelList component;
+	 * - `ReactElement`: a custom SVG label element, such as `<text>` or `<g>`.
+	 *   HTML elements such as `<div>` are not valid inside the chart SVG and may trigger React DOM warnings.
+	 * - `function`: a render function of custom label.
+	 *
+	 * @defaultValue false
+	 */
+	label?: ImplicitLabelListType;
+	/**
+	 * The type of icon in legend.  If set to 'none', no legend item will be rendered.
+	 * @defaultValue rect
+	 */
+	legendType?: LegendType;
+	maxBarSize?: number;
+	/**
+	 * @defaultValue 0
+	 */
+	minPointSize?: number;
+	/**
+	 * The customized event handler of animation end
+	 */
+	onAnimationEnd?: () => void;
+	/**
+	 * The customized event handler of animation start
+	 */
+	onAnimationStart?: () => void;
+	/**
+	 * The customized event handler of click in this chart.
+	 */
+	onClick?: (
+		data: RadialBarDataItem,
+		index: number,
+		e: React.MouseEvent<SVGGraphicsElement>,
+	) => void;
+	/**
+	 * The customized event handler of mousedown in this chart.
+	 */
+	onMouseDown?: (
+		data: RadialBarDataItem,
+		index: number,
+		e: React.MouseEvent<SVGGraphicsElement>,
+	) => void;
+	/**
+	 * The customized event handler of mouseup in this chart.
+	 */
+	onMouseUp?: (
+		data: RadialBarDataItem,
+		index: number,
+		e: React.MouseEvent<SVGGraphicsElement>,
+	) => void;
+	/**
+	 * The customized event handler of mousemove in this chart.
+	 */
+	onMouseMove?: (
+		data: RadialBarDataItem,
+		index: number,
+		e: React.MouseEvent<SVGGraphicsElement>,
+	) => void;
+	/**
+	 * The customized event handler of mouseover in this chart.
+	 */
+	onMouseOver?: (
+		data: RadialBarDataItem,
+		index: number,
+		e: React.MouseEvent<SVGGraphicsElement>,
+	) => void;
+	/**
+	 * The customized event handler of mouseout in this chart.
+	 */
+	onMouseOut?: (
+		data: RadialBarDataItem,
+		index: number,
+		e: React.MouseEvent<SVGGraphicsElement>,
+	) => void;
+	/**
+	 * The customized event handler of mouseenter in this chart.
+	 */
+	onMouseEnter?: (
+		data: RadialBarDataItem,
+		index: number,
+		e: React.MouseEvent<SVGGraphicsElement>,
+	) => void;
+	/**
+	 * The customized event handler of mouseleave in this chart.
+	 */
+	onMouseLeave?: (
+		data: RadialBarDataItem,
+		index: number,
+		e: React.MouseEvent<SVGGraphicsElement>,
+	) => void;
+	onTouchStart?: (
+		data: RadialBarDataItem,
+		index: number,
+		e: React.TouchEvent<SVGGraphicsElement>,
+	) => void;
+	onTouchMove?: (
+		data: RadialBarDataItem,
+		index: number,
+		e: React.TouchEvent<SVGGraphicsElement>,
+	) => void;
+	onTouchEnd?: (
+		data: RadialBarDataItem,
+		index: number,
+		e: React.TouchEvent<SVGGraphicsElement>,
+	) => void;
+	/**
+	 * @defaultValue 0
+	 */
+	radiusAxisId?: AxisId;
+	/**
+	 * If set a ReactElement, the shape of radial bar sectors can be customized.
+	 * If set a function, the function will be called to render customized shape.
+	 * During animations, the function shape also receives `animationElapsedTime`, `isAnimating`, and `isEntrance`.
+	 * By default, renders a sector.
+	 */
+	shape?: ActiveShape<RadialBarSectorProps, SVGPathElement>;
+	stackId?: string | number;
+	tooltipType?: TooltipType;
+	/**
+	 * Formats the value displayed in the tooltip for this RadialBar.
+	 * When set, takes precedence over the `formatter` prop on the Tooltip component.
+	 */
+	formatter?: Formatter;
+	/**
+	 * @defaultValue 300
+	 */
+	zIndex?: number;
+}
+export type RadialBarProps<DataPointType = any, DataValueType = any> = Omit<
+	PresentationAttributesAdaptChildEvent<RadialBarDataItem, SVGElement>,
+	'ref' | keyof InternalRadialBarProps<DataPointType, DataValueType>
+> &
+	Omit<InternalRadialBarProps<DataPointType, DataValueType>, 'sectors'>;
+export declare const defaultRadialBarProps: {
+	readonly angleAxisId: 0;
+	readonly animationBegin: 0;
+	readonly animationDuration: 1500;
+	readonly animationEasing: 'ease';
+	readonly animationMatchBy: 'append';
+	readonly animationInterpolateFn: AnimationInterpolateFn<RadialBarDataItem, PolarLayout>;
+	readonly background: false;
+	readonly cornerIsExternal: false;
+	readonly cornerRadius: 0;
+	readonly forceCornerRadius: false;
+	readonly hide: false;
+	readonly isAnimationActive: 'auto';
+	readonly label: false;
+	readonly legendType: 'rect';
+	readonly minPointSize: 0;
+	readonly radiusAxisId: 0;
+	readonly shape: React.FC<SectorProps>;
+	readonly zIndex: 300;
+};
+export declare function computeRadialBarDataItems({
+	displayedData,
+	stackedData,
+	dataStartIndex,
+	stackedDomain,
+	dataKey,
+	baseValue,
+	layout,
+	radiusAxis,
+	radiusAxisTicks,
+	bandSize,
+	pos,
+	angleAxis,
+	minPointSize,
+	cx,
+	cy,
+	angleAxisTicks,
+	cells,
+	startAngle: rootStartAngle,
+	endAngle: rootEndAngle,
+}: {
+	displayedData: ChartData;
+	stackedData: Series<Record<number, number>, DataKey<any>> | undefined;
+	dataStartIndex: number;
+	stackedDomain: ReadonlyArray<unknown> | null;
+	dataKey: DataKey<any> | undefined;
+	baseValue: number | unknown;
+	layout: LayoutType;
+	radiusAxis: BaseAxisWithScale;
+	radiusAxisTicks: ReadonlyArray<TickItem> | undefined;
+	bandSize: number;
+	pos: BarPositionPosition;
+	angleAxis: BaseAxisWithScale;
+	minPointSize: number;
+	cx: number;
+	cy: number;
+	angleAxisTicks: ReadonlyArray<TickItem> | undefined;
+	cells: ReadonlyArray<ReactElement> | undefined;
+	startAngle: number;
+	endAngle: number;
+}): ReadonlyArray<RadialBarDataItem>;
+/**
+ * @consumes PolarChartContext
+ * @provides LabelListContext
+ * @provides CellReader
+ */
+export declare function RadialBar<DataPointType = any, DataValueType = any>(
+	outsideProps: RadialBarProps<DataPointType, DataValueType>,
+): React.JSX.Element;
+export declare namespace RadialBar {
+	var displayName: string;
+}
+export {};

package/src/state/ReportPolarOptions.tsrx

@@ -0,0 +1,11 @@
+import { useEffect } from 'octane';
+import { useAppDispatch } from './hooks';
+import { PolarChartOptions, updatePolarOptions } from './polarOptionsSlice';
+
+export function ReportPolarOptions(props: PolarChartOptions): null {
+	const dispatch = useAppDispatch();
+	useEffect(() => {
+		dispatch(updatePolarOptions(props));
+	}, [dispatch, props]);
+	return null;
+}

package/src/state/selectors/areaSelectors.ts

@@ -0,0 +1,257 @@
+// @ts-nocheck -- retained upstream selector typing is outside the initial Area runtime port.
+import { createSelector } from 'reselect';
+import { SeriesPoint } from 'victory-vendor/d3-shape';
+import { NullableCoordinate } from '../../util/types';
+import { computeArea } from '../../cartesian/Area';
+import {
+	selectAxisWithScale,
+	selectStackGroups,
+	selectTicksOfGraphicalItem,
+	selectUnfilteredCartesianItems,
+} from './axisSelectors';
+import { RechartsRootState } from '../store';
+import { AxisId } from '../cartesianAxisSlice';
+import { selectChartLayout } from '../../context/chartLayoutContext';
+import { selectChartDataWithIndexesIfNotInPanoramaPosition3 } from './dataSelectors';
+import { getBandSizeOfAxis, isCategoricalAxis, StackId } from '../../util/ChartUtils';
+import { ChartData } from '../chartDataSlice';
+import { getStackSeriesIdentifier } from '../../util/stacks/getStackSeriesIdentifier';
+import type {
+	StackDataPoint,
+	StackGroup,
+	StackSeries,
+	StackSeriesIdentifier,
+} from '../../util/stacks/stackTypes';
+import type { AreaSettings } from '../types/AreaSettings';
+import { GraphicalItemId } from '../graphicalItemsSlice';
+import { selectChartBaseValue } from './rootPropsSelectors';
+import {
+	selectXAxisIdFromGraphicalItemId,
+	selectYAxisIdFromGraphicalItemId,
+} from './graphicalItemSelectors';
+
+export interface AreaPointItem extends NullableCoordinate {
+	x: number | null;
+	y: number | null;
+	value?: ReadonlyArray<unknown>;
+	payload?: any;
+}
+
+export type ComputedArea = {
+	points: ReadonlyArray<AreaPointItem>;
+	baseLine: number | ReadonlyArray<AreaPointItem>;
+	isRange: boolean;
+};
+
+const selectXAxisWithScale = (
+	state: RechartsRootState,
+	graphicalItemId: GraphicalItemId,
+	isPanorama: boolean,
+) =>
+	selectAxisWithScale(
+		state,
+		'xAxis',
+		selectXAxisIdFromGraphicalItemId(state, graphicalItemId),
+		isPanorama,
+	);
+
+const selectXAxisTicks = (
+	state: RechartsRootState,
+	graphicalItemId: GraphicalItemId,
+	isPanorama: boolean,
+) =>
+	selectTicksOfGraphicalItem(
+		state,
+		'xAxis',
+		selectXAxisIdFromGraphicalItemId(state, graphicalItemId),
+		isPanorama,
+	);
+
+const selectYAxisWithScale = (
+	state: RechartsRootState,
+	graphicalItemId: GraphicalItemId,
+	isPanorama: boolean,
+) =>
+	selectAxisWithScale(
+		state,
+		'yAxis',
+		selectYAxisIdFromGraphicalItemId(state, graphicalItemId),
+		isPanorama,
+	);
+
+const selectYAxisTicks = (
+	state: RechartsRootState,
+	graphicalItemId: GraphicalItemId,
+	isPanorama: boolean,
+) =>
+	selectTicksOfGraphicalItem(
+		state,
+		'yAxis',
+		selectYAxisIdFromGraphicalItemId(state, graphicalItemId),
+		isPanorama,
+	);
+
+const selectBandSize = createSelector(
+	[
+		selectChartLayout,
+		selectXAxisWithScale,
+		selectYAxisWithScale,
+		selectXAxisTicks,
+		selectYAxisTicks,
+	],
+	(layout, xAxis, yAxis, xAxisTicks, yAxisTicks) => {
+		if (isCategoricalAxis(layout, 'xAxis')) {
+			return getBandSizeOfAxis(xAxis, xAxisTicks, false);
+		}
+		return getBandSizeOfAxis(yAxis, yAxisTicks, false);
+	},
+);
+
+const pickAreaId = (_state: RechartsRootState, id: GraphicalItemId): GraphicalItemId => id;
+
+/*
+ * 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.
+ *
+ * A proper fix is to either move everything into the state, or read the dataKey always from props
+ * - but this is a smaller change.
+ */
+const selectSynchronisedAreaSettings: (
+	state: RechartsRootState,
+	id: GraphicalItemId,
+	isPanorama: boolean,
+) => AreaSettings | undefined = createSelector(
+	[selectUnfilteredCartesianItems, pickAreaId],
+	(graphicalItems, id: GraphicalItemId) =>
+		graphicalItems.filter((item) => item.type === 'area').find((item) => item.id === id),
+);
+
+const selectNumericalAxisType = (state: RechartsRootState): 'xAxis' | 'yAxis' => {
+	const layout = selectChartLayout(state);
+	const isXAxisCategorical = isCategoricalAxis(layout, 'xAxis');
+	return isXAxisCategorical ? 'yAxis' : 'xAxis';
+};
+
+const selectNumericalAxisIdFromGraphicalItemId = (
+	state: RechartsRootState,
+	graphicalItemId: GraphicalItemId,
+): AxisId => {
+	const axisType = selectNumericalAxisType(state);
+	if (axisType === 'yAxis') {
+		return selectYAxisIdFromGraphicalItemId(state, graphicalItemId);
+	}
+	return selectXAxisIdFromGraphicalItemId(state, graphicalItemId);
+};
+
+const selectNumericalAxisStackGroups = (
+	state: RechartsRootState,
+	graphicalItemId: GraphicalItemId,
+	isPanorama: boolean,
+): Record<StackId, StackGroup> | undefined =>
+	selectStackGroups(
+		state,
+		selectNumericalAxisType(state),
+		selectNumericalAxisIdFromGraphicalItemId(state, graphicalItemId),
+		isPanorama,
+	);
+
+export const selectGraphicalItemStackedData: (
+	state: RechartsRootState,
+	id: GraphicalItemId,
+	isPanorama: boolean,
+) => ReadonlyArray<StackDataPoint> | undefined = createSelector(
+	[selectSynchronisedAreaSettings, selectNumericalAxisStackGroups],
+	(
+		areaSettings: AreaSettings | undefined,
+		stackGroups: Record<StackId, StackGroup> | undefined,
+	) => {
+		if (areaSettings == null || stackGroups == null) {
+			return undefined;
+		}
+		const { stackId } = areaSettings;
+		const stackSeriesIdentifier: StackSeriesIdentifier | undefined =
+			getStackSeriesIdentifier(areaSettings);
+		if (stackId == null || stackSeriesIdentifier == null) {
+			return undefined;
+		}
+		const groups: ReadonlyArray<StackSeries> | undefined = stackGroups[stackId]?.stackedData;
+		const found: StackSeries | undefined = groups?.find((v) => v.key === stackSeriesIdentifier);
+		if (found == null) {
+			return undefined;
+		}
+		return found.map((item: SeriesPoint<StackDataPoint>): StackDataPoint => [item[0], item[1]]);
+	},
+);
+
+export const selectArea: (
+	state: RechartsRootState,
+	id: GraphicalItemId,
+	isPanorama: boolean,
+) => ComputedArea | undefined = createSelector(
+	[
+		selectChartLayout,
+		selectXAxisWithScale,
+		selectYAxisWithScale,
+		selectXAxisTicks,
+		selectYAxisTicks,
+		selectGraphicalItemStackedData,
+		selectChartDataWithIndexesIfNotInPanoramaPosition3,
+		selectBandSize,
+		selectSynchronisedAreaSettings,
+		selectChartBaseValue,
+	],
+	(
+		layout,
+		xAxis,
+		yAxis,
+		xAxisTicks,
+		yAxisTicks,
+		stackedData: ReadonlyArray<StackDataPoint> | undefined,
+		{ chartData, dataStartIndex, dataEndIndex },
+		bandSize,
+		areaSettings,
+		chartBaseValue,
+	) => {
+		if (
+			areaSettings == null ||
+			(layout !== 'horizontal' && layout !== 'vertical') ||
+			xAxis == null ||
+			yAxis == null ||
+			xAxisTicks == null ||
+			yAxisTicks == null ||
+			xAxisTicks.length === 0 ||
+			yAxisTicks.length === 0 ||
+			bandSize == null
+		) {
+			return undefined;
+		}
+		const { data } = areaSettings;
+
+		let displayedData: ChartData | undefined;
+		if (data && data.length > 0) {
+			displayedData = data;
+		} else {
+			displayedData = chartData?.slice(dataStartIndex, dataEndIndex + 1);
+		}
+
+		if (displayedData == null) {
+			return undefined;
+		}
+
+		return computeArea({
+			layout,
+			xAxis,
+			yAxis,
+			xAxisTicks,
+			yAxisTicks,
+			dataStartIndex,
+			areaSettings,
+			stackedData,
+			displayedData,
+			chartBaseValue,
+			bandSize,
+		});
+	},
+);

package/src/state/selectors/funnelSelectors.ts

@@ -0,0 +1,86 @@
+import { createSelector } from 'reselect';
+import { ReactElement } from 'octane';
+import { computeFunnelTrapezoids, FunnelTrapezoidItem } from '../../cartesian/Funnel';
+import { ChartData } from '../chartDataSlice';
+import { RechartsRootState } from '../store';
+import { selectChartOffsetInternal } from './selectChartOffsetInternal';
+import { selectChartDataAndAlwaysIgnoreIndexes } from './dataSelectors';
+import { ChartOffsetInternal, DataKey, TooltipType } from '../../util/types';
+import { CellProps } from '../..';
+import { GraphicalItemId } from '../graphicalItemsSlice';
+
+export type ResolvedFunnelSettings = {
+	dataKey: DataKey<any>;
+	data: ChartData | undefined;
+	nameKey: DataKey<any>;
+	tooltipType?: TooltipType;
+	lastShapeType?: 'triangle' | 'rectangle';
+	reversed?: boolean;
+	customWidth?: string | number;
+	cells: ReadonlyArray<ReactElement>;
+	presentationProps: Record<string, any> | null;
+	id: GraphicalItemId;
+};
+
+const pickFunnelSettings = (
+	_state: RechartsRootState,
+	funnelSettings: ResolvedFunnelSettings,
+): ResolvedFunnelSettings => funnelSettings;
+
+export const selectFunnelTrapezoids: (
+	state: RechartsRootState,
+	funnelSettings: ResolvedFunnelSettings,
+) => ReadonlyArray<FunnelTrapezoidItem> = createSelector(
+	[selectChartOffsetInternal, pickFunnelSettings, selectChartDataAndAlwaysIgnoreIndexes],
+	(
+		offset: ChartOffsetInternal,
+		{
+			data,
+			dataKey,
+			nameKey,
+			tooltipType,
+			lastShapeType,
+			reversed,
+			customWidth,
+			cells,
+			presentationProps,
+			id: graphicalItemId,
+		},
+		{ chartData },
+	): ReadonlyArray<FunnelTrapezoidItem> => {
+		let displayedData: ChartData | undefined;
+		if (data != null && data.length > 0) {
+			displayedData = data;
+		} else if (chartData != null && chartData.length > 0) {
+			displayedData = chartData;
+		}
+
+		if (displayedData && displayedData.length) {
+			displayedData = displayedData.map((entry: any, index: number) => ({
+				payload: entry,
+				...presentationProps,
+				...entry,
+				...(cells && cells[index] && cells[index].props),
+			}));
+		} else if (cells && cells.length) {
+			displayedData = cells.map((cell: ReactElement<CellProps>) => ({
+				...presentationProps,
+				...cell.props,
+			}));
+		} else {
+			return [];
+		}
+
+		return computeFunnelTrapezoids({
+			dataKey,
+			nameKey,
+			displayedData,
+			tooltipType,
+			lastShapeType,
+			reversed,
+			offset,
+			customWidth,
+			graphicalItemId,
+		});
+	},
+);