@octanejs/recharts 0.1.41 → 0.1.43

package/src/state/graphicalItemsSlice.ts

@@ -0,0 +1,180 @@
+// Adapted from recharts@3.9.2, commit b3451050c027a23957ffa50a2665c9119df21e47.
+import { createSlice, current, PayloadAction, prepareAutoBatched } from '@reduxjs/toolkit';
+import { castDraft, type Draft } from 'immer';
+import { ChartData } from './chartDataSlice';
+import { AxisId } from './cartesianAxisSlice';
+import { DataKey } from '../util/types';
+import { LineSettings } from './types/LineSettings';
+import { ScatterSettings } from './types/ScatterSettings';
+import { AreaSettings } from './types/AreaSettings';
+import { BarSettings } from './types/BarSettings';
+import { RadialBarSettings } from './types/RadialBarSettings';
+import { PieSettings } from './types/PieSettings';
+import { RadarSettings } from './types/RadarSettings';
+
+/**
+ * Unique ID of the graphical item.
+ * This is used to identify the graphical item in the state and in the React tree.
+ * This is required for every graphical item - it's either provided by the user or generated automatically.
+ */
+export type GraphicalItemId = string;
+
+export interface GraphicalItemSettings {
+	/**
+	 * Unique ID of the graphical item.
+	 * This is used to identify the graphical item in the state and in the React tree.
+	 * This is required for every graphical item - it's either provided by the user or generated automatically.
+	 */
+	id: GraphicalItemId;
+	/**
+	 * If the given graphical item has its own data array, it will appear here.
+	 * If this is undefined, the data will be taken from the chart root prop.
+	 */
+	data: ChartData | undefined;
+	dataKey: DataKey<any> | undefined;
+	/**
+	 * Why not just stop pushing the graphical items to state when they are hidden?
+	 * Well some components decide to continue showing them anyway.
+	 * Legend for example will keep showing a record for hidden graphical items.
+	 * Stacks for example will ignore them.
+	 */
+	hide: boolean;
+}
+
+export interface BaseCartesianGraphicalItemSettings extends GraphicalItemSettings {
+	/**
+	 * Each of the graphical items explicitly says which axis it uses;
+	 * this property is optional for users but every graphical item must have a default,
+	 * and it is required here.
+	 */
+	xAxisId: AxisId;
+	yAxisId: AxisId;
+	zAxisId: AxisId;
+	/**
+	 * Graphical items that are inside Brush panorama should not interact with the main area graphical items
+	 * and vice versa.
+	 */
+	isPanorama: boolean;
+}
+
+export type CartesianGraphicalItemSettings =
+	AreaSettings | BarSettings | LineSettings | ScatterSettings;
+
+export interface BasePolarGraphicalItemSettings extends GraphicalItemSettings {
+	angleAxisId: AxisId;
+	radiusAxisId: AxisId;
+}
+
+export type PolarGraphicalItemSettings = PieSettings | RadarSettings | RadialBarSettings;
+
+export type GraphicalItemsState = {
+	/**
+	 * This is an array of all cartesian graphical items and their settings.
+	 * Graphical item is a visual representation of data on the chart.
+	 * Some examples are: Line, Bar.
+	 *
+	 * The order is arbitrary; do not expect that indexes here will be the same as indexes elsewhere.
+	 */
+	cartesianItems: ReadonlyArray<CartesianGraphicalItemSettings>;
+	/**
+	 * This is an array of all polar graphical items and their settings.
+	 * Graphical item is a visual representation of data on the chart.
+	 * Some examples are: Pie, Radar, RadialBar
+	 *
+	 * The order is arbitrary; do not expect that indexes here will be the same as indexes elsewhere.
+	 */
+	polarItems: ReadonlyArray<PolarGraphicalItemSettings>;
+};
+
+const initialState: GraphicalItemsState = {
+	cartesianItems: [],
+	polarItems: [],
+};
+
+type ReplacePayload<T> = {
+	prev: T;
+	next: T;
+};
+
+// 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 graphicalItemsSlice = createSlice({
+	name: 'graphicalItems',
+	initialState,
+	reducers: {
+		addCartesianGraphicalItem: {
+			reducer(state: unknown, action: PayloadAction<CartesianGraphicalItemSettings>) {
+				(state as Draft<GraphicalItemsState>).cartesianItems.push(castDraft(action.payload));
+			},
+			prepare: prepareAutoBatched<CartesianGraphicalItemSettings>(),
+		},
+		replaceCartesianGraphicalItem: {
+			reducer(
+				state: unknown,
+				action: PayloadAction<ReplacePayload<CartesianGraphicalItemSettings>>,
+			) {
+				const { prev, next } = action.payload;
+				const index = current(state as Draft<GraphicalItemsState>).cartesianItems.indexOf(
+					castDraft(prev),
+				);
+				if (index > -1) {
+					(state as Draft<GraphicalItemsState>).cartesianItems[index] = castDraft(next);
+				}
+			},
+			prepare: prepareAutoBatched<ReplacePayload<CartesianGraphicalItemSettings>>(),
+		},
+		removeCartesianGraphicalItem: {
+			reducer(state: unknown, action: PayloadAction<CartesianGraphicalItemSettings>) {
+				const index = current(state as Draft<GraphicalItemsState>).cartesianItems.indexOf(
+					castDraft(action.payload),
+				);
+				if (index > -1) {
+					(state as Draft<GraphicalItemsState>).cartesianItems.splice(index, 1);
+				}
+			},
+			prepare: prepareAutoBatched<CartesianGraphicalItemSettings>(),
+		},
+		addPolarGraphicalItem: {
+			reducer(state: unknown, action: PayloadAction<PolarGraphicalItemSettings>) {
+				(state as Draft<GraphicalItemsState>).polarItems.push(castDraft(action.payload));
+			},
+			prepare: prepareAutoBatched<PolarGraphicalItemSettings>(),
+		},
+		removePolarGraphicalItem: {
+			reducer(state: unknown, action: PayloadAction<PolarGraphicalItemSettings>) {
+				const index = current(state as Draft<GraphicalItemsState>).polarItems.indexOf(
+					castDraft(action.payload),
+				);
+				if (index > -1) {
+					(state as Draft<GraphicalItemsState>).polarItems.splice(index, 1);
+				}
+			},
+			prepare: prepareAutoBatched<PolarGraphicalItemSettings>(),
+		},
+		replacePolarGraphicalItem: {
+			reducer(state: unknown, action: PayloadAction<ReplacePayload<PolarGraphicalItemSettings>>) {
+				const { prev, next } = action.payload;
+				const index = current(state as Draft<GraphicalItemsState>).polarItems.indexOf(
+					castDraft(prev),
+				);
+				if (index > -1) {
+					(state as Draft<GraphicalItemsState>).polarItems[index] = castDraft(next);
+				}
+			},
+			prepare: prepareAutoBatched<ReplacePayload<PolarGraphicalItemSettings>>(),
+		},
+	},
+});
+
+export const {
+	addCartesianGraphicalItem,
+	replaceCartesianGraphicalItem,
+	removeCartesianGraphicalItem,
+	addPolarGraphicalItem,
+	removePolarGraphicalItem,
+	replacePolarGraphicalItem,
+} = graphicalItemsSlice.actions;
+
+export const graphicalItemsReducer = graphicalItemsSlice.reducer;

package/src/state/{keyboardEventsMiddleware.js → keyboardEventsMiddleware.ts}

@@ -1,7 +1,7 @@
-// Vendored verbatim from recharts@3.9.2 es6/state/keyboardEventsMiddleware.js (framework-agnostic).
-// Do not edit — update by re-vendoring when the recharts devDependency moves.
-import { createAction, createListenerMiddleware } from '@reduxjs/toolkit';
-import { setKeyboardInteraction } from './tooltipSlice';
+// Adapted from recharts@3.9.2, commit b3451050c027a23957ffa50a2665c9119df21e47.
+import { createAction, createListenerMiddleware, ListenerEffectAPI } from '@reduxjs/toolkit';
+import { setKeyboardInteraction, TooltipInteractionState } from './tooltipSlice';
+import { AppDispatch, RechartsRootState } from './store';
 import {
 	selectTooltipAxisDomain,
 	selectTooltipAxisTicks,
@@ -11,55 +11,64 @@ import { selectCoordinateForDefaultIndex } from './selectors/selectors';
 import { selectChartDirection, selectTooltipAxisDataKey } from './selectors/axisSelectors';
 import { combineActiveTooltipIndex } from './selectors/combiners/combineActiveTooltipIndex';
 import { selectTooltipEventType } from './selectors/selectTooltipEventType';
-export var keyDownAction = createAction('keyDown');
-export var focusAction = createAction('focus');
-export var blurAction = createAction('blur');
-export var keyboardEventsMiddleware = createListenerMiddleware();
-var rafId = null;
-var timeoutId = null;
-var latestKeyboardActionPayload = null;
+
+export const keyDownAction = createAction<KeyboardEvent['key']>('keyDown');
+export const focusAction = createAction('focus');
+export const blurAction = createAction('blur');
+
+export const keyboardEventsMiddleware = createListenerMiddleware<RechartsRootState>();
+
+let rafId: number | null = null;
+let timeoutId: ReturnType<typeof setTimeout> | null = null;
+let latestKeyboardActionPayload: KeyboardEvent['key'] | null = null;
+
 keyboardEventsMiddleware.startListening({
 	actionCreator: keyDownAction,
-	effect: (action, listenerApi) => {
+	effect: (
+		action: ReturnType<typeof keyDownAction>,
+		listenerApi: ListenerEffectAPI<RechartsRootState, AppDispatch>,
+	) => {
 		latestKeyboardActionPayload = action.payload;
+
 		if (rafId !== null) {
 			cancelAnimationFrame(rafId);
 			rafId = null;
 		}
-		var state = listenerApi.getState();
-		var _state$eventSettings = state.eventSettings,
-			throttleDelay = _state$eventSettings.throttleDelay,
-			throttledEvents = _state$eventSettings.throttledEvents;
-		var isThrottled = throttledEvents === 'all' || throttledEvents.includes('keydown');
+
+		const state: RechartsRootState = listenerApi.getState();
+		const { throttleDelay, throttledEvents } = state.eventSettings;
+		const isThrottled = throttledEvents === 'all' || throttledEvents.includes('keydown');
+
 		if (timeoutId !== null && (typeof throttleDelay !== 'number' || !isThrottled)) {
 			clearTimeout(timeoutId);
 			timeoutId = null;
 		}
-		var callback = () => {
+
+		const callback = () => {
 			try {
-				var currentState = listenerApi.getState();
-				var accessibilityLayerIsActive = currentState.rootProps.accessibilityLayer !== false;
+				const currentState = listenerApi.getState();
+				const accessibilityLayerIsActive = currentState.rootProps.accessibilityLayer !== false;
 				if (!accessibilityLayerIsActive) {
 					return;
 				}
-				var keyboardInteraction = currentState.tooltip.keyboardInteraction;
-				var key = latestKeyboardActionPayload;
+				const { keyboardInteraction } = currentState.tooltip;
+				const key = latestKeyboardActionPayload;
 				if (key !== 'ArrowRight' && key !== 'ArrowLeft' && key !== 'Enter') {
 					return;
 				}
 
 				// TODO this is lacking index for charts that do not support numeric indexes
-				var resolvedIndex = combineActiveTooltipIndex(
+				const resolvedIndex = combineActiveTooltipIndex(
 					keyboardInteraction,
 					selectTooltipDisplayedData(currentState),
 					selectTooltipAxisDataKey(currentState),
 					selectTooltipAxisDomain(currentState),
 				);
-				var currentIndex = resolvedIndex == null ? -1 : Number(resolvedIndex);
-				var isOutsideDomain = !Number.isFinite(currentIndex) || currentIndex < 0;
-				var tooltipTicks = selectTooltipAxisTicks(currentState);
-				var displayedData = selectTooltipDisplayedData(currentState);
-				var tooltipEventType = selectTooltipEventType(
+				const currentIndex = resolvedIndex == null ? -1 : Number(resolvedIndex);
+				const isOutsideDomain = !Number.isFinite(currentIndex) || currentIndex < 0;
+				const tooltipTicks = selectTooltipAxisTicks(currentState);
+				const displayedData = selectTooltipDisplayedData(currentState);
+				const tooltipEventType = selectTooltipEventType(
 					currentState,
 					currentState.tooltip.settings.shared,
 				);
@@ -67,7 +76,7 @@ keyboardEventsMiddleware.startListening({
 					if (isOutsideDomain) {
 						return;
 					}
-					var _coordinate = selectCoordinateForDefaultIndex(
+					const coordinate = selectCoordinateForDefaultIndex(
 						currentState,
 						tooltipEventType,
 						'hover',
@@ -77,31 +86,33 @@ keyboardEventsMiddleware.startListening({
 						setKeyboardInteraction({
 							active: !keyboardInteraction.active,
 							activeIndex: keyboardInteraction.index,
-							activeCoordinate: _coordinate,
+							activeCoordinate: coordinate,
 						}),
 					);
 					return;
 				}
-				var direction = selectChartDirection(currentState);
-				var directionMultiplier = direction === 'left-to-right' ? 1 : -1;
-				var movement = key === 'ArrowRight' ? 1 : -1;
-				var nextIndex;
+
+				const direction = selectChartDirection(currentState);
+				const directionMultiplier = direction === 'left-to-right' ? 1 : -1;
+				const movement = key === 'ArrowRight' ? 1 : -1;
+				let nextIndex: number;
 				if (isOutsideDomain) {
-					var axisDataKey = selectTooltipAxisDataKey(currentState);
-					var domain = selectTooltipAxisDomain(currentState);
-					var effectiveMovement = movement * directionMultiplier;
+					const axisDataKey = selectTooltipAxisDataKey(currentState);
+					const domain = selectTooltipAxisDomain(currentState);
+					const effectiveMovement = movement * directionMultiplier;
 
 					// Build a minimal TooltipInteractionState for the candidate-index check.
-					var mkInteraction = (i) => ({
+					const mkInteraction = (i: number): TooltipInteractionState => ({
 						active: false,
 						index: String(i),
 						dataKey: undefined,
 						graphicalItemId: undefined,
 						coordinate: undefined,
 					});
+
 					nextIndex = -1;
 					if (effectiveMovement > 0) {
-						for (var i = 0; i < displayedData.length; i++) {
+						for (let i = 0; i < displayedData.length; i++) {
 							if (
 								combineActiveTooltipIndex(mkInteraction(i), displayedData, axisDataKey, domain) !=
 								null
@@ -111,29 +122,28 @@ keyboardEventsMiddleware.startListening({
 							}
 						}
 					} else {
-						for (var _i = displayedData.length - 1; _i >= 0; _i--) {
+						for (let i = displayedData.length - 1; i >= 0; i--) {
 							if (
-								combineActiveTooltipIndex(mkInteraction(_i), displayedData, axisDataKey, domain) !=
+								combineActiveTooltipIndex(mkInteraction(i), displayedData, axisDataKey, domain) !=
 								null
 							) {
-								nextIndex = _i;
+								nextIndex = i;
 								break;
 							}
 						}
 					}
+
 					if (nextIndex < 0) {
 						return;
 					}
 				} else {
 					nextIndex = currentIndex + movement * directionMultiplier;
-					var dataLength =
-						(tooltipTicks === null || tooltipTicks === void 0 ? void 0 : tooltipTicks.length) ||
-						displayedData.length;
+					const dataLength = tooltipTicks?.length || displayedData.length;
 					if (dataLength === 0 || nextIndex >= dataLength || nextIndex < 0) {
 						return;
 					}
 				}
-				var coordinate = selectCoordinateForDefaultIndex(
+				const coordinate = selectCoordinateForDefaultIndex(
 					currentState,
 					tooltipEventType,
 					'hover',
@@ -151,16 +161,19 @@ keyboardEventsMiddleware.startListening({
 				timeoutId = null;
 			}
 		};
+
 		if (!isThrottled) {
 			callback();
 			return;
 		}
+
 		if (throttleDelay === 'raf') {
 			rafId = requestAnimationFrame(callback);
 		} else if (typeof throttleDelay === 'number') {
 			if (timeoutId === null) {
 				callback();
 				latestKeyboardActionPayload = null;
+
 				timeoutId = setTimeout(() => {
 					if (latestKeyboardActionPayload) {
 						callback();
@@ -173,22 +186,23 @@ keyboardEventsMiddleware.startListening({
 		}
 	},
 });
+
 keyboardEventsMiddleware.startListening({
 	actionCreator: focusAction,
-	effect: (_action, listenerApi) => {
-		var state = listenerApi.getState();
-		var accessibilityLayerIsActive = state.rootProps.accessibilityLayer !== false;
+	effect: (_action, listenerApi: ListenerEffectAPI<RechartsRootState, AppDispatch>) => {
+		const state: RechartsRootState = listenerApi.getState();
+		const accessibilityLayerIsActive = state.rootProps.accessibilityLayer !== false;
 		if (!accessibilityLayerIsActive) {
 			return;
 		}
-		var keyboardInteraction = state.tooltip.keyboardInteraction;
+		const { keyboardInteraction } = state.tooltip;
 		if (keyboardInteraction.active) {
 			return;
 		}
 		if (keyboardInteraction.index == null) {
-			var nextIndex = '0';
-			var tooltipEventType = selectTooltipEventType(state, state.tooltip.settings.shared);
-			var coordinate = selectCoordinateForDefaultIndex(
+			const nextIndex = '0';
+			const tooltipEventType = selectTooltipEventType(state, state.tooltip.settings.shared);
+			const coordinate = selectCoordinateForDefaultIndex(
 				state,
 				tooltipEventType,
 				'hover',
@@ -204,15 +218,16 @@ keyboardEventsMiddleware.startListening({
 		}
 	},
 });
+
 keyboardEventsMiddleware.startListening({
 	actionCreator: blurAction,
-	effect: (_action, listenerApi) => {
-		var state = listenerApi.getState();
-		var accessibilityLayerIsActive = state.rootProps.accessibilityLayer !== false;
+	effect: (_action, listenerApi: ListenerEffectAPI<RechartsRootState, AppDispatch>) => {
+		const state: RechartsRootState = listenerApi.getState();
+		const accessibilityLayerIsActive = state.rootProps.accessibilityLayer !== false;
 		if (!accessibilityLayerIsActive) {
 			return;
 		}
-		var keyboardInteraction = state.tooltip.keyboardInteraction;
+		const { keyboardInteraction } = state.tooltip;
 		if (keyboardInteraction.active) {
 			listenerApi.dispatch(
 				setKeyboardInteraction({

package/src/state/layoutSlice.ts

@@ -0,0 +1,50 @@
+// Adapted from recharts@3.9.2, commit b3451050c027a23957ffa50a2665c9119df21e47.
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { LayoutType, Margin, Size } from '../util/types';
+
+type ChartLayoutState = {
+	layoutType: LayoutType;
+	width: number;
+	height: number;
+	margin: Margin;
+	/**
+	 * How much is the chart zoomed in.
+	 * Used for scaling the mouse coordinates to the chart coordinates.
+	 */
+	scale: number;
+};
+
+const initialState: ChartLayoutState = {
+	layoutType: 'horizontal',
+	width: 0,
+	height: 0,
+	margin: { top: 5, right: 5, bottom: 5, left: 5 },
+	scale: 1,
+};
+
+const chartLayoutSlice = createSlice({
+	name: 'chartLayout',
+	initialState,
+	reducers: {
+		setLayout(state, action: PayloadAction<LayoutType>) {
+			state.layoutType = action.payload;
+		},
+		setChartSize(state, action: PayloadAction<Size>) {
+			state.width = action.payload.width;
+			state.height = action.payload.height;
+		},
+		setMargin(state, action: PayloadAction<Partial<Margin>>) {
+			state.margin.top = action.payload.top ?? 0;
+			state.margin.right = action.payload.right ?? 0;
+			state.margin.bottom = action.payload.bottom ?? 0;
+			state.margin.left = action.payload.left ?? 0;
+		},
+		setScale(state, action: PayloadAction<number>) {
+			state.scale = action.payload;
+		},
+	},
+});
+
+export const { setMargin, setLayout, setChartSize, setScale } = chartLayoutSlice.actions;
+
+export const chartLayoutReducer = chartLayoutSlice.reducer;

package/src/state/legendSlice.ts

@@ -0,0 +1,109 @@
+// Adapted from recharts@3.9.2, commit b3451050c027a23957ffa50a2665c9119df21e47.
+import { createSlice, current, PayloadAction, prepareAutoBatched } from '@reduxjs/toolkit';
+import { castDraft } from 'immer';
+import { LayoutType, Size } from '../util/types';
+import {
+	HorizontalAlignmentType,
+	LegendPayload,
+	VerticalAlignmentType,
+} from '../component/DefaultLegendContent.tsrx';
+import type { LegendItemSorter } from '../component/Legend.tsrx';
+
+export type LegendSettings = {
+	layout: LayoutType;
+	align: HorizontalAlignmentType;
+	verticalAlign: VerticalAlignmentType;
+	itemSorter: LegendItemSorter | null;
+};
+
+/**
+ * The properties inside this state update independently of each other and quite often.
+ * When selecting, never select the whole state because you are going to get
+ * unnecessary re-renders. Select only the properties you need.
+ *
+ * This is why this state type is not exported - don't use it directly.
+ */
+type LegendState = {
+	settings: LegendSettings;
+	size: Size;
+	/**
+	 * This is a 2D array of LegendPayloads. The first dimension is for each graphical item.
+	 * Some items may have multiple legend items, so the second dimension is for each legend item.
+	 */
+	payload: ReadonlyArray<ReadonlyArray<LegendPayload>>;
+};
+
+const initialState: LegendState = {
+	settings: {
+		layout: 'horizontal',
+		align: 'center',
+		verticalAlign: 'bottom',
+		itemSorter: 'value',
+	},
+	size: {
+		width: 0,
+		height: 0,
+	},
+	payload: [],
+};
+
+const legendSlice = createSlice({
+	name: 'legend',
+	initialState,
+	reducers: {
+		setLegendSize(state, action: PayloadAction<Size>) {
+			state.size.width = action.payload.width;
+			state.size.height = action.payload.height;
+		},
+		setLegendSettings(state, action: PayloadAction<LegendSettings>) {
+			state.settings.align = action.payload.align;
+			state.settings.layout = action.payload.layout;
+			state.settings.verticalAlign = action.payload.verticalAlign;
+			state.settings.itemSorter = action.payload.itemSorter;
+		},
+		addLegendPayload: {
+			reducer(state, action: PayloadAction<ReadonlyArray<LegendPayload>>) {
+				state.payload.push(castDraft(action.payload));
+			},
+			prepare: prepareAutoBatched<ReadonlyArray<LegendPayload>>(),
+		},
+		replaceLegendPayload: {
+			reducer(
+				state,
+				action: PayloadAction<{
+					prev: ReadonlyArray<LegendPayload>;
+					next: ReadonlyArray<LegendPayload>;
+				}>,
+			) {
+				const { prev, next } = action.payload;
+				const index = current(state).payload.indexOf(castDraft(prev));
+				if (index > -1) {
+					state.payload[index] = castDraft(next);
+				}
+			},
+			prepare: prepareAutoBatched<{
+				prev: ReadonlyArray<LegendPayload>;
+				next: ReadonlyArray<LegendPayload>;
+			}>(),
+		},
+		removeLegendPayload: {
+			reducer(state, action: PayloadAction<ReadonlyArray<LegendPayload>>) {
+				const index = current(state).payload.indexOf(castDraft(action.payload));
+				if (index > -1) {
+					state.payload.splice(index, 1);
+				}
+			},
+			prepare: prepareAutoBatched<ReadonlyArray<LegendPayload>>(),
+		},
+	},
+});
+
+export const {
+	setLegendSize,
+	setLegendSettings,
+	addLegendPayload,
+	replaceLegendPayload,
+	removeLegendPayload,
+} = legendSlice.actions;
+
+export const legendReducer = legendSlice.reducer;