@octanejs/recharts 0.1.40 → 0.1.42

package/src/state/SetLegendPayload.ts

@@ -5,12 +5,13 @@ import { useIsPanorama } from '../context/PanoramaContext';
 import { selectChartLayout } from '../context/chartLayoutContext';
 import { useAppDispatch, useAppSelector } from './hooks';
 import { addLegendPayload, replaceLegendPayload, removeLegendPayload } from './legendSlice';
+import type { LegendPayload } from '../component/DefaultLegendContent.tsrx';
 
-export function SetLegendPayload(props: { legendPayload: unknown }): null {
+export function SetLegendPayload(props: { legendPayload: ReadonlyArray<LegendPayload> }): null {
 	const { legendPayload } = props;
 	const dispatch = useAppDispatch();
 	const isPanorama = useIsPanorama();
-	const prevPayloadRef = useRef<unknown>(null);
+	const prevPayloadRef = useRef<ReadonlyArray<LegendPayload> | null>(null);
 	useLayoutEffect(() => {
 		if (isPanorama) {
 			return;
@@ -33,11 +34,13 @@ export function SetLegendPayload(props: { legendPayload: unknown }): null {
 	return null;
 }
 
-export function SetPolarLegendPayload(props: { legendPayload: unknown }): null {
+export function SetPolarLegendPayload(props: {
+	legendPayload: ReadonlyArray<LegendPayload>;
+}): null {
 	const { legendPayload } = props;
 	const dispatch = useAppDispatch();
 	const layout = useAppSelector(selectChartLayout);
-	const prevPayloadRef = useRef<unknown>(null);
+	const prevPayloadRef = useRef<ReadonlyArray<LegendPayload> | null>(null);
 	useLayoutEffect(() => {
 		if (layout !== 'centric' && layout !== 'radial') {
 			return;

package/src/state/SetTooltipEntrySettings.ts

@@ -6,14 +6,17 @@ import {
 	addTooltipEntrySettings,
 	removeTooltipEntrySettings,
 	replaceTooltipEntrySettings,
+	type TooltipPayloadConfiguration,
 } from './tooltipSlice';
 import { useIsPanorama } from '../context/PanoramaContext';
 
-export function SetTooltipEntrySettings(props: { tooltipEntrySettings: unknown }): null {
+export function SetTooltipEntrySettings(props: {
+	tooltipEntrySettings: TooltipPayloadConfiguration;
+}): null {
 	const { tooltipEntrySettings } = props;
 	const dispatch = useAppDispatch();
 	const isPanorama = useIsPanorama();
-	const prevSettingsRef = useRef<unknown>(null);
+	const prevSettingsRef = useRef<TooltipPayloadConfiguration | null>(null);
 	useLayoutEffect(() => {
 		if (isPanorama) {
 			// Panorama graphical items should never contribute to Tooltip payload.

package/src/state/brushSlice.ts

@@ -0,0 +1,40 @@
+// Adapted from recharts@3.9.2, commit b3451050c027a23957ffa50a2665c9119df21e47.
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { Padding } from '../util/types';
+
+/**
+ * From all Brush properties, only height has a default value and will always be defined.
+ * Other properties are nullable and will be computed from offsets and margins if they are not set.
+ */
+export type BrushSettings = {
+	x: number | undefined;
+	y: number | undefined;
+	width: number | undefined;
+	height: number;
+	padding: Padding;
+};
+
+const initialState: BrushSettings = {
+	x: 0,
+	y: 0,
+	width: 0,
+	height: 0,
+	padding: { top: 0, right: 0, bottom: 0, left: 0 },
+};
+
+export const brushSlice = createSlice({
+	name: 'brush',
+	initialState,
+	reducers: {
+		setBrushSettings(_state: BrushSettings, action: PayloadAction<BrushSettings | null>) {
+			if (action.payload == null) {
+				return initialState;
+			}
+			return action.payload;
+		},
+	},
+});
+
+export const { setBrushSettings } = brushSlice.actions;
+
+export const brushReducer = brushSlice.reducer;

package/src/state/cartesianAxisSlice.ts

@@ -0,0 +1,291 @@
+// Adapted from recharts@3.9.2, commit b3451050c027a23957ffa50a2665c9119df21e47.
+import { createSlice, PayloadAction, prepareAutoBatched } from '@reduxjs/toolkit';
+import { castDraft, type Draft } from 'immer';
+import {
+	AxisDomain,
+	AxisInterval,
+	AxisTick,
+	DataKey,
+	EvaluatedAxisDomainType,
+	ScaleType,
+	TickProp,
+} from '../util/types';
+import { TickFormatter } from '../cartesian/CartesianAxis.tsrx';
+import type { AxisRange } from './selectors/axisSelectors';
+import { CustomScaleDefinition } from '../util/scale/CustomScaleDefinition';
+
+/**
+ * @inline
+ */
+export type AxisId = string | number;
+export const defaultAxisId: AxisId = 0;
+export type XAxisPadding = { left?: number; right?: number } | 'gap' | 'no-gap';
+export type YAxisPadding = { top?: number; bottom?: number } | 'gap' | 'no-gap';
+
+export type XAxisOrientation = 'top' | 'bottom';
+export type YAxisOrientation = 'left' | 'right';
+
+/**
+ * Properties shared in X, Y, and Z axes.
+ * User defined axis settings, coming from props.
+ */
+export type BaseCartesianAxis = {
+	id: AxisId;
+	scale:
+		| ScaleType
+		| CustomScaleDefinition
+		| CustomScaleDefinition<string>
+		| CustomScaleDefinition<number>
+		| CustomScaleDefinition<Date>;
+	/**
+	 * Before creating this object, evaluate the domain type based on the chart layout so that we have the 'auto' resolved.
+	 */
+	type: EvaluatedAxisDomainType;
+	/**
+	 * The axis functionality is severely restricted without a dataKey
+	 * - but there is still something left, and the prop is optional
+	 * so this can also be undefined even in real charts.
+	 * There are no defaults.
+	 */
+	dataKey: DataKey<any> | undefined;
+	unit: string | undefined;
+	name: string | undefined;
+	allowDuplicatedCategory: boolean;
+	allowDataOverflow: boolean;
+	reversed: boolean;
+	includeHidden: boolean;
+	domain: AxisDomain | undefined;
+};
+
+/**
+ * Controls how Recharts calculates "nice" tick values for numerical axes.
+ *
+ * - `'none'`: Recharts does not apply any tick-rounding algorithm; tick positions are
+ *   determined entirely by d3, evenly spaced but not rounded to human-friendly numbers.
+ *   There is no domain-extension logic applied in this mode.
+ *
+ * - `'auto'` *(default)*: Recharts automatically decides whether and how to apply tick
+ *   niceties based on the domain definition. When the domain contains an `'auto'` keyword,
+ *   Recharts uses the `'adaptive'` algorithm and may extend the domain slightly to
+ *   produce clean tick labels. Otherwise, it applies the same algorithm while keeping
+ *   ticks within the fixed domain. This mirrors the default behavior from Recharts v2.
+ *
+ * - `'adaptive'`: Always applies the space-efficient algorithm (`getAdaptiveStep`),
+ *   which fills the available range as densely as possible while still rounding steps
+ *   to reasonable numbers (e.g. 10, 20, 25). May produce less "round-looking" labels
+ *   than `'snap125'`, but wastes less space. The domain-extension logic still applies
+ *   when the domain contains an `'auto'` keyword.
+ *
+ * - `'snap125'`: Always applies the round-numbers algorithm (`getSnap125Step`), which
+ *   snaps step sizes to values from the set {1, 2, 2.5, 5} × 10ⁿ. Produces very
+ *   human-friendly labels (e.g. 0, 5, 10, 15, 20) but may leave blank space at the
+ *   edges of the chart. The domain-extension logic still applies when the domain
+ *   contains an `'auto'` keyword.
+ *
+ * @see {@link https://recharts.github.io/guide/axisTicks/}
+ * @inline
+ */
+export type NiceTicksAlgorithm = 'none' | 'auto' | 'adaptive' | 'snap125';
+
+export type TicksSettings = {
+	allowDecimals: boolean;
+	/**
+	 * We pass the suggested number of ticks to d3 https://d3js.org/d3-scale/linear#linear_ticks
+	 * This number is a suggestion. d3 tries to accommodate it, but it might return more or less ticks than requested:
+	 * > The specified count is only a hint; the scale may return more or fewer values depending on the domain.
+	 *
+	 * If undefined, then d3 decides the number of ticks on its own. The default in d3 is 10,
+	 * but it can vary based on the domain size and other factors.
+	 */
+	tickCount: number | undefined;
+	/**
+	 * Ticks can be any type when the axis is the type of category
+	 * Ticks must be numbers when the axis is the type of number
+	 */
+	ticks: ReadonlyArray<AxisTick> | undefined;
+	tick: TickProp<any>;
+	/**
+	 * Controls how Recharts calculates "nice" tick values for this axis.
+	 * See {@link NiceTicksAlgorithm} for a full description of each option.
+	 *
+	 * @defaultValue 'auto'
+	 */
+	niceTicks: NiceTicksAlgorithm;
+};
+
+/**
+ * These are the external props, visible for users as they set them using our public API.
+ * There is all sorts of internal computed things based on these, but they will come through selectors.
+ *
+ * Properties shared between X and Y axes
+ */
+export type CartesianAxisSettings = BaseCartesianAxis &
+	TicksSettings & {
+		interval: AxisInterval;
+		mirror: boolean;
+		minTickGap: number;
+		angle: number;
+		hide: boolean;
+		tickFormatter: TickFormatter | undefined;
+	};
+
+export type XAxisSettings = CartesianAxisSettings & {
+	padding: XAxisPadding;
+	height: number;
+	orientation: XAxisOrientation;
+};
+
+export type YAxisWidth = number | 'auto';
+
+export type YAxisSettings = CartesianAxisSettings & {
+	padding: YAxisPadding;
+	width: YAxisWidth;
+	orientation: YAxisOrientation;
+	widthHistory?: number[];
+};
+
+/**
+ * Z axis is special because it's never displayed. It controls the size of Scatter dots,
+ * but it never displays ticks anywhere.
+ */
+export type ZAxisSettings = BaseCartesianAxis & {
+	range: AxisRange;
+};
+
+type AxisMapState = {
+	xAxis: Record<AxisId, XAxisSettings>;
+	yAxis: Record<AxisId, YAxisSettings>;
+	zAxis: Record<AxisId, ZAxisSettings>;
+};
+
+const initialState: AxisMapState = {
+	xAxis: {},
+	yAxis: {},
+	zAxis: {},
+};
+
+/**
+ * This is the slice where each individual Axis element pushes its own configuration.
+ * Prefer to use this one instead of axisSlice.
+ */
+// Registered props may contain native DOM refs. The private callback boundary
+// avoids RTK's prepared-action validator recursively comparing raw DOM-backed
+// settings with Draft<Settings>. Every access still uses the exact known draft;
+// the exported reducer state and action payloads remain fully typed.
+const cartesianAxisSlice = createSlice({
+	name: 'cartesianAxis',
+	initialState,
+	reducers: {
+		addXAxis: {
+			reducer(state: unknown, action: PayloadAction<XAxisSettings>) {
+				(state as Draft<AxisMapState>).xAxis[action.payload.id] = castDraft(action.payload);
+			},
+			prepare: prepareAutoBatched<XAxisSettings>(),
+		},
+		replaceXAxis: {
+			reducer(state: unknown, action: PayloadAction<{ prev: XAxisSettings; next: XAxisSettings }>) {
+				const { prev, next } = action.payload;
+				if ((state as Draft<AxisMapState>).xAxis[prev.id] !== undefined) {
+					if (prev.id !== next.id) {
+						delete (state as Draft<AxisMapState>).xAxis[prev.id];
+					}
+					(state as Draft<AxisMapState>).xAxis[next.id] = castDraft(next);
+				}
+			},
+			prepare: prepareAutoBatched<{ prev: XAxisSettings; next: XAxisSettings }>(),
+		},
+		removeXAxis: {
+			reducer(state: unknown, action: PayloadAction<XAxisSettings>) {
+				delete (state as Draft<AxisMapState>).xAxis[action.payload.id];
+			},
+			prepare: prepareAutoBatched<XAxisSettings>(),
+		},
+		addYAxis: {
+			reducer(state: unknown, action: PayloadAction<YAxisSettings>) {
+				(state as Draft<AxisMapState>).yAxis[action.payload.id] = castDraft(action.payload);
+			},
+			prepare: prepareAutoBatched<YAxisSettings>(),
+		},
+		replaceYAxis: {
+			reducer(state: unknown, action: PayloadAction<{ prev: YAxisSettings; next: YAxisSettings }>) {
+				const { prev, next } = action.payload;
+				if ((state as Draft<AxisMapState>).yAxis[prev.id] !== undefined) {
+					if (prev.id !== next.id) {
+						delete (state as Draft<AxisMapState>).yAxis[prev.id];
+					}
+					(state as Draft<AxisMapState>).yAxis[next.id] = castDraft(next);
+				}
+			},
+			prepare: prepareAutoBatched<{ prev: YAxisSettings; next: YAxisSettings }>(),
+		},
+		removeYAxis: {
+			reducer(state: unknown, action: PayloadAction<YAxisSettings>) {
+				delete (state as Draft<AxisMapState>).yAxis[action.payload.id];
+			},
+			prepare: prepareAutoBatched<YAxisSettings>(),
+		},
+		addZAxis: {
+			reducer(state: unknown, action: PayloadAction<ZAxisSettings>) {
+				(state as Draft<AxisMapState>).zAxis[action.payload.id] = castDraft(action.payload);
+			},
+			prepare: prepareAutoBatched<ZAxisSettings>(),
+		},
+		replaceZAxis: {
+			reducer(state: unknown, action: PayloadAction<{ prev: ZAxisSettings; next: ZAxisSettings }>) {
+				const { prev, next } = action.payload;
+				if ((state as Draft<AxisMapState>).zAxis[prev.id] !== undefined) {
+					if (prev.id !== next.id) {
+						delete (state as Draft<AxisMapState>).zAxis[prev.id];
+					}
+					(state as Draft<AxisMapState>).zAxis[next.id] = castDraft(next);
+				}
+			},
+			prepare: prepareAutoBatched<{ prev: ZAxisSettings; next: ZAxisSettings }>(),
+		},
+		removeZAxis: {
+			reducer(state: unknown, action: PayloadAction<ZAxisSettings>) {
+				delete (state as Draft<AxisMapState>).zAxis[action.payload.id];
+			},
+			prepare: prepareAutoBatched<ZAxisSettings>(),
+		},
+		updateYAxisWidth(state: unknown, action: PayloadAction<{ id: AxisId; width: number }>) {
+			const { id, width } = action.payload;
+			const axis = (state as Draft<AxisMapState>).yAxis[id];
+			if (axis) {
+				const history = axis.widthHistory || [];
+				// An oscillation is detected when the new width is the same as the width before the last one.
+				// This is a simple A -> B -> A pattern. If the next width is B, and the difference is less than 1 pixel, we ignore it.
+				if (
+					history.length === 3 &&
+					history[0] === history[2] &&
+					width === history[1] &&
+					width !== axis.width &&
+					Math.abs(width - (history[0] ?? 0)) <= 1
+				) {
+					return;
+				}
+				const newHistory = [...history, width].slice(-3);
+				(state as Draft<AxisMapState>).yAxis[id] = {
+					...axis,
+					width,
+					widthHistory: newHistory,
+				};
+			}
+		},
+	},
+});
+
+export const {
+	addXAxis,
+	replaceXAxis,
+	removeXAxis,
+	addYAxis,
+	replaceYAxis,
+	removeYAxis,
+	addZAxis,
+	replaceZAxis,
+	removeZAxis,
+	updateYAxisWidth,
+} = cartesianAxisSlice.actions;
+
+export const cartesianAxisReducer = cartesianAxisSlice.reducer;

package/src/state/chartDataSlice.ts

@@ -0,0 +1,87 @@
+// Adapted from recharts@3.9.2, commit b3451050c027a23957ffa50a2665c9119df21e47.
+import { PayloadAction, createSlice } from '@reduxjs/toolkit';
+import { castDraft } from 'immer';
+import { BrushStartEndIndex } from '../context/brushUpdateContext';
+
+/**
+ * This is the data that's coming through main chart `data` prop
+ * Recharts is very flexible in what it accepts so the type is very flexible too.
+ * This will typically be an object, and various components will provide various `dataKey`
+ * that dictates how to pull data from that object.
+ *
+ * TL;DR: before dataKey
+ *
+ * @inline
+ */
+export type ChartData<DataPointType = unknown> = ReadonlyArray<DataPointType>;
+
+/**
+ * So this is the same unknown type as ChartData but this is after the dataKey has been applied.
+ * We still don't know what the type is - that depends on what exactly it was before the dataKey application,
+ * and the dataKey can return whatever anyway - but let's keep it separate as a form of documentation.
+ *
+ * TL;DR: ChartData after dataKey.
+ */
+export type AppliedChartData = ReadonlyArray<{ value: unknown }>;
+
+export type ChartDataState = {
+	chartData: ChartData | undefined;
+	/**
+	 * store a copy of chart data after it has been processed by each chart's specific
+	 * compute functions. TODO: add other charts besides Sankey
+	 */
+	computedData: unknown | undefined;
+	/**
+	 * Using Brush, users can choose where they want to zoom in.
+	 * This is zero-based index of the starting data point.
+	 */
+	dataStartIndex: number;
+	/**
+	 * Using Brush, users can choose where they want to zoom in.
+	 * This is zero-based index of the last data point.
+	 */
+	dataEndIndex: number;
+};
+
+export const initialChartDataState: ChartDataState = {
+	chartData: undefined,
+	computedData: undefined,
+	dataStartIndex: 0,
+	dataEndIndex: 0,
+};
+
+type BrushStartEndIndexActionPayload = Partial<BrushStartEndIndex>;
+
+const chartDataSlice = createSlice({
+	name: 'chartData',
+	initialState: initialChartDataState,
+	reducers: {
+		setChartData(state, action: PayloadAction<ChartData | undefined>) {
+			state.chartData = castDraft(action.payload);
+			if (action.payload == null) {
+				state.dataStartIndex = 0;
+				state.dataEndIndex = 0;
+				return;
+			}
+			if (action.payload.length > 0 && state.dataEndIndex !== action.payload.length - 1) {
+				state.dataEndIndex = action.payload.length - 1;
+			}
+		},
+		setComputedData(state, action: PayloadAction<unknown | undefined>) {
+			state.computedData = action.payload;
+		},
+		setDataStartEndIndexes(state, action: PayloadAction<BrushStartEndIndexActionPayload>) {
+			const { startIndex, endIndex } = action.payload;
+			if (startIndex != null) {
+				state.dataStartIndex = startIndex;
+			}
+			if (endIndex != null) {
+				state.dataEndIndex = endIndex;
+			}
+		},
+	},
+});
+
+export const { setChartData, setDataStartEndIndexes, setComputedData } = chartDataSlice.actions;
+
+export const chartDataReducer = chartDataSlice.reducer;

package/src/state/errorBarSlice.ts

@@ -0,0 +1,78 @@
+// Adapted from recharts@3.9.2, commit b3451050c027a23957ffa50a2665c9119df21e47.
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { ErrorBarDirection } from '../cartesian/ErrorBar.tsrx';
+import { DataKey } from '../util/types';
+import { GraphicalItemId } from './graphicalItemsSlice';
+
+/**
+ * ErrorBars have lot more settings but all the others are scoped to the component itself.
+ * Only some of them required to be reported to the global store because XAxis and YAxis need to know
+ * if the error bar is contributing to extending the axis domain.
+ */
+export type ErrorBarsSettings = {
+	/**
+	 * The direction is only used in Scatter chart, and decided based on ChartLayout in other charts.
+	 */
+	direction: ErrorBarDirection;
+	/**
+	 * The dataKey decides which property from the data will each individual ErrorBar use.
+	 * If it so happens that the ErrorBar data are bigger than the axis domain,
+	 * the error bar data will stretch the axis domain.
+	 */
+	dataKey: DataKey<any>;
+	/*
+	 * ErrorBar props say that it has explicit xAxis and yAxis props,
+	 * but actually it always inherits the xAxis and yAxis defined on the parent graphical item.
+	 */
+};
+
+export type ErrorBarsState = Record<GraphicalItemId, ReadonlyArray<ErrorBarsSettings>>;
+
+const initialState: ErrorBarsState = {};
+
+const errorBarSlice = createSlice({
+	name: 'errorBars',
+	initialState,
+	reducers: {
+		addErrorBar: (
+			state,
+			action: PayloadAction<{ itemId: GraphicalItemId; errorBar: ErrorBarsSettings }>,
+		) => {
+			const { itemId, errorBar } = action.payload;
+			if (!state[itemId]) {
+				state[itemId] = [];
+			}
+			state[itemId].push(errorBar);
+		},
+		replaceErrorBar: (
+			state,
+			action: PayloadAction<{
+				itemId: GraphicalItemId;
+				prev: ErrorBarsSettings;
+				next: ErrorBarsSettings;
+			}>,
+		) => {
+			const { itemId, prev, next } = action.payload;
+			if (state[itemId]) {
+				state[itemId] = state[itemId].map((e) =>
+					e.dataKey === prev.dataKey && e.direction === prev.direction ? next : e,
+				);
+			}
+		},
+		removeErrorBar: (
+			state,
+			action: PayloadAction<{ itemId: GraphicalItemId; errorBar: ErrorBarsSettings }>,
+		) => {
+			const { itemId, errorBar } = action.payload;
+			if (state[itemId]) {
+				state[itemId] = state[itemId].filter(
+					(e) => e.dataKey !== errorBar.dataKey || e.direction !== errorBar.direction,
+				);
+			}
+		},
+	},
+});
+
+export const { addErrorBar, replaceErrorBar, removeErrorBar } = errorBarSlice.actions;
+
+export const errorBarReducer = errorBarSlice.reducer;

package/src/state/eventSettingsSlice.ts

@@ -0,0 +1,30 @@
+// Adapted from recharts@3.9.2, commit b3451050c027a23957ffa50a2665c9119df21e47.
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { castDraft } from 'immer';
+import { EventThrottlingProps } from '../util/types';
+
+export type EventSettingsState = Required<EventThrottlingProps>;
+
+export const initialEventSettingsState: EventSettingsState = {
+	throttleDelay: 'raf',
+	throttledEvents: ['mousemove', 'touchmove', 'pointermove', 'scroll', 'wheel'],
+};
+
+const eventSettingsSlice = createSlice({
+	name: 'eventSettings',
+	initialState: initialEventSettingsState,
+	reducers: {
+		setEventSettings: (state, action: PayloadAction<EventThrottlingProps>) => {
+			if (action.payload.throttleDelay != null) {
+				state.throttleDelay = action.payload.throttleDelay;
+			}
+			if (action.payload.throttledEvents != null) {
+				state.throttledEvents = castDraft(action.payload.throttledEvents);
+			}
+		},
+	},
+});
+
+export const { setEventSettings } = eventSettingsSlice.actions;
+
+export const eventSettingsReducer = eventSettingsSlice.reducer;