@octanejs/recharts 0.1.41 → 0.1.43

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

@@ -1,25 +1,35 @@
-// Vendored verbatim from recharts@3.9.2 es6/state/mouseEventsMiddleware.js (framework-agnostic).
-// Do not edit — update by re-vendoring when the recharts devDependency moves.
-import { createAction, createListenerMiddleware } from '@reduxjs/toolkit';
+// Adapted from recharts@3.9.2, commit b3451050c027a23957ffa50a2665c9119df21e47.
+import {
+	createAction,
+	createListenerMiddleware,
+	ListenerEffectAPI,
+	PayloadAction,
+} from '@reduxjs/toolkit';
+import { AppDispatch, RechartsRootState } from './store';
 import { mouseLeaveChart, setMouseClickAxisIndex, setMouseOverAxisIndex } from './tooltipSlice';
 import { selectActivePropsFromChartPointer } from './selectors/selectActivePropsFromChartPointer';
 import { selectTooltipEventType } from './selectors/selectTooltipEventType';
+
 import { getRelativeCoordinate } from '../util/getRelativeCoordinate';
-export var mouseClickAction = createAction('mouseClick');
-export var mouseClickMiddleware = createListenerMiddleware();
+import { RelativePointer, HTMLMousePointer } from '../util/types';
+
+export const mouseClickAction = createAction<HTMLMousePointer>('mouseClick');
+
+export const mouseClickMiddleware = createListenerMiddleware<RechartsRootState>();
 
 // TODO: there's a bug here when you click the chart the activeIndex resets to zero
 mouseClickMiddleware.startListening({
 	actionCreator: mouseClickAction,
-	effect: (action, listenerApi) => {
-		var mousePointer = action.payload;
-		var activeProps = selectActivePropsFromChartPointer(
+	effect: (
+		action: PayloadAction<HTMLMousePointer>,
+		listenerApi: ListenerEffectAPI<RechartsRootState, AppDispatch>,
+	) => {
+		const mousePointer = action.payload;
+		const activeProps = selectActivePropsFromChartPointer(
 			listenerApi.getState(),
 			getRelativeCoordinate(mousePointer),
 		);
-		if (
-			(activeProps === null || activeProps === void 0 ? void 0 : activeProps.activeIndex) != null
-		) {
+		if (activeProps?.activeIndex != null) {
 			listenerApi.dispatch(
 				setMouseClickAxisIndex({
 					activeIndex: activeProps.activeIndex,
@@ -30,8 +40,10 @@ mouseClickMiddleware.startListening({
 		}
 	},
 });
-export var mouseMoveAction = createAction('mouseMove');
-export var mouseMoveMiddleware = createListenerMiddleware();
+
+export const mouseMoveAction = createAction<HTMLMousePointer>('mouseMove');
+
+export const mouseMoveMiddleware = createListenerMiddleware<RechartsRootState>();
 
 /*
  * This single rafId is safe because:
@@ -41,22 +53,21 @@ export var mouseMoveMiddleware = createListenerMiddleware();
  * This is different from externalEventsMiddleware which handles multiple event types
  * (click, mouseenter, mouseleave, etc.) that should NOT cancel each other.
  */
-var rafId = null;
-var timeoutId = null;
-var latestChartPointer = null;
+let rafId: number | null = null;
+let timeoutId: ReturnType<typeof setTimeout> | null = null;
+let latestChartPointer: RelativePointer | null = null;
+
 mouseMoveMiddleware.startListening({
 	actionCreator: mouseMoveAction,
-	effect: (action, listenerApi) => {
-		var mousePointer = action.payload;
-		var state = listenerApi.getState();
-		var _state$eventSettings = state.eventSettings,
-			throttleDelay = _state$eventSettings.throttleDelay,
-			throttledEvents = _state$eventSettings.throttledEvents;
-		var isThrottled =
-			throttledEvents === 'all' ||
-			(throttledEvents === null || throttledEvents === void 0
-				? void 0
-				: throttledEvents.includes('mousemove'));
+	effect: (
+		action: PayloadAction<HTMLMousePointer>,
+		listenerApi: ListenerEffectAPI<RechartsRootState, AppDispatch>,
+	) => {
+		const mousePointer = action.payload;
+
+		const state = listenerApi.getState();
+		const { throttleDelay, throttledEvents } = state.eventSettings;
+		const isThrottled = throttledEvents === 'all' || throttledEvents?.includes('mousemove');
 
 		// Cancel any pending execution
 		if (rafId !== null) {
@@ -74,13 +85,13 @@ mouseMoveMiddleware.startListening({
 		 * reference to currentTarget which getRelativeCoordinate uses.
 		 */
 		latestChartPointer = getRelativeCoordinate(mousePointer);
-		var callback = () => {
+		const callback = () => {
 			/*
 			 * Here we read a fresh state again inside the callback to ensure we have the latest state values
 			 * after any potential actions that may have been dispatched between the original event and this callback.
 			 */
-			var currentState = listenerApi.getState();
-			var tooltipEventType = selectTooltipEventType(
+			const currentState = listenerApi.getState();
+			const tooltipEventType = selectTooltipEventType(
 				currentState,
 				currentState.tooltip.settings.shared,
 			);
@@ -95,11 +106,8 @@ mouseMoveMiddleware.startListening({
 			 * Graphical items have its own mouse events handling mechanism where they attach events directly to the items.
 			 */
 			if (tooltipEventType === 'axis') {
-				var activeProps = selectActivePropsFromChartPointer(currentState, latestChartPointer);
-				if (
-					(activeProps === null || activeProps === void 0 ? void 0 : activeProps.activeIndex) !=
-					null
-				) {
+				const activeProps = selectActivePropsFromChartPointer(currentState, latestChartPointer);
+				if (activeProps?.activeIndex != null) {
 					listenerApi.dispatch(
 						setMouseOverAxisIndex({
 							activeIndex: activeProps.activeIndex,
@@ -115,10 +123,12 @@ mouseMoveMiddleware.startListening({
 			rafId = null;
 			timeoutId = null;
 		};
+
 		if (!isThrottled) {
 			callback();
 			return;
 		}
+
 		if (throttleDelay === 'raf') {
 			rafId = requestAnimationFrame(callback);
 		} else if (typeof throttleDelay === 'number') {

package/src/state/optionsSlice.ts

@@ -0,0 +1,65 @@
+// Adapted from recharts@3.9.2, commit b3451050c027a23957ffa50a2665c9119df21e47.
+import { createSlice } from '@reduxjs/toolkit';
+import { TooltipEventType } from '../util/types';
+import { TooltipIndex, TooltipPayloadSearcher } from './tooltipSlice';
+import { isNan } from '../util/DataUtils';
+
+/**
+ * These chart options are decided internally, by Recharts,
+ * and will not change during the lifetime of the chart.
+ *
+ * Changing these options can be done by swapping the root element
+ * which will make a brand-new Redux store.
+ *
+ * If you want to store options that can be changed by the user,
+ * use UpdatableChartOptions in rootPropsSlice.ts.
+ */
+export type ChartOptions = {
+	chartName: string;
+	defaultTooltipEventType: TooltipEventType;
+	validateTooltipEventTypes?: ReadonlyArray<TooltipEventType>;
+	// Should this instead be a property of a graphical item? Do we want to mix items with different data types in one chart?
+	tooltipPayloadSearcher: TooltipPayloadSearcher;
+	/**
+	 * We use this to identify which chart is sending events when synchronising.
+	 * Without it, we can't tell the difference between an action that arrived from another chart
+	 * and an action that was dispatched by the chart itself.
+	 */
+	eventEmitter: symbol | undefined;
+};
+
+export const arrayTooltipSearcher: TooltipPayloadSearcher = (
+	data: unknown,
+	strIndex: TooltipIndex,
+): unknown | undefined => {
+	if (!strIndex) return undefined;
+	if (!Array.isArray(data)) return undefined;
+	const numIndex = Number.parseInt(strIndex, 10);
+	if (isNan(numIndex)) {
+		return undefined;
+	}
+	return data[numIndex];
+};
+
+const initialState: ChartOptions = {
+	chartName: '',
+	tooltipPayloadSearcher: () => undefined,
+	eventEmitter: undefined,
+	defaultTooltipEventType: 'axis',
+};
+
+const optionsSlice = createSlice({
+	name: 'options',
+	initialState,
+	reducers: {
+		createEventEmitter: (state: ChartOptions) => {
+			if (state.eventEmitter == null) {
+				state.eventEmitter = Symbol('rechartsEventEmitter');
+			}
+		},
+	},
+});
+
+export const optionsReducer = optionsSlice.reducer;
+
+export const { createEventEmitter } = optionsSlice.actions;

package/src/state/polarAxisSlice.ts

@@ -0,0 +1,42 @@
+// Adapted from recharts@3.9.2, commit b3451050c027a23957ffa50a2665c9119df21e47.
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { castDraft } from 'immer';
+import { AxisId, BaseCartesianAxis, TicksSettings } from './cartesianAxisSlice';
+
+export type RadiusAxisSettings = BaseCartesianAxis & TicksSettings;
+
+export type AngleAxisSettings = BaseCartesianAxis & TicksSettings;
+
+type PolarAxisState = {
+	radiusAxis: Record<AxisId, RadiusAxisSettings>;
+	angleAxis: Record<AxisId, AngleAxisSettings>;
+};
+
+const initialState: PolarAxisState = {
+	radiusAxis: {},
+	angleAxis: {},
+};
+
+const polarAxisSlice = createSlice({
+	name: 'polarAxis',
+	initialState,
+	reducers: {
+		addRadiusAxis(state, action: PayloadAction<RadiusAxisSettings>) {
+			state.radiusAxis[action.payload.id] = castDraft(action.payload);
+		},
+		removeRadiusAxis(state, action: PayloadAction<RadiusAxisSettings>) {
+			delete state.radiusAxis[action.payload.id];
+		},
+		addAngleAxis(state, action: PayloadAction<AngleAxisSettings>) {
+			state.angleAxis[action.payload.id] = castDraft(action.payload);
+		},
+		removeAngleAxis(state, action: PayloadAction<AngleAxisSettings>) {
+			delete state.angleAxis[action.payload.id];
+		},
+	},
+});
+
+export const { addRadiusAxis, removeRadiusAxis, addAngleAxis, removeAngleAxis } =
+	polarAxisSlice.actions;
+
+export const polarAxisReducer = polarAxisSlice.reducer;

package/src/state/polarOptionsSlice.ts

@@ -0,0 +1,43 @@
+// Adapted from recharts@3.9.2, commit b3451050c027a23957ffa50a2665c9119df21e47.
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+
+export type PolarChartOptions = {
+	cx: number | string;
+	cy: number | string;
+	startAngle: number;
+	endAngle: number;
+	innerRadius: number | string;
+	outerRadius: number | string;
+};
+
+type PolarChartState = PolarChartOptions | null;
+
+const initialState: PolarChartState = null;
+
+const reducers = {
+	updatePolarOptions: (
+		state: PolarChartState,
+		action: PayloadAction<PolarChartOptions>,
+	): PolarChartOptions => {
+		if (state === null) {
+			return action.payload;
+		}
+		state.startAngle = action.payload.startAngle;
+		state.endAngle = action.payload.endAngle;
+		state.cx = action.payload.cx;
+		state.cy = action.payload.cy;
+		state.innerRadius = action.payload.innerRadius;
+		state.outerRadius = action.payload.outerRadius;
+		return state;
+	},
+};
+
+const polarOptionsSlice = createSlice<PolarChartState, typeof reducers, 'polarOptions', {}>({
+	name: 'polarOptions',
+	initialState,
+	reducers,
+});
+
+export const { updatePolarOptions } = polarOptionsSlice.actions;
+
+export const polarOptionsReducer = polarOptionsSlice.reducer;

package/src/state/reduxDevtoolsJsonStringifyReplacer.ts

@@ -0,0 +1,13 @@
+// Adapted from recharts@3.9.2, commit b3451050c027a23957ffa50a2665c9119df21e47.
+export function reduxDevtoolsJsonStringifyReplacer(key: string, value: unknown) {
+	if (value instanceof HTMLElement) {
+		return `HTMLElement <${value.tagName} class="${value.className}">`;
+	}
+	if (value === window) {
+		return 'global.window';
+	}
+	if (key === 'children' && typeof value === 'object' && value !== null) {
+		return '<<CHILDREN>>';
+	}
+	return value;
+}

package/src/state/referenceElementsSlice.ts

@@ -0,0 +1,100 @@
+// Adapted from recharts@3.9.2, commit b3451050c027a23957ffa50a2665c9119df21e47.
+import { createSlice, current, PayloadAction } from '@reduxjs/toolkit';
+import { castDraft, WritableDraft } from 'immer';
+import { AxisId } from './cartesianAxisSlice';
+import { IfOverflow } from '../util/IfOverflow';
+import { ReferenceLineSegment } from '../cartesian/ReferenceLine.tsrx';
+
+export type ReferenceElementSettings = {
+	yAxisId: AxisId;
+	xAxisId: AxisId;
+	ifOverflow: IfOverflow;
+};
+
+export type ReferenceDotSettings = ReferenceElementSettings & {
+	x: unknown;
+	y: unknown;
+	r: number;
+};
+
+export type ReferenceAreaSettings = ReferenceElementSettings & {
+	x1: unknown;
+	x2: unknown;
+	y1: unknown;
+	y2: unknown;
+};
+
+export type ReferenceLineSettings = ReferenceElementSettings & {
+	x: unknown;
+	y: unknown;
+	segment: ReferenceLineSegment | undefined;
+};
+
+type ReferenceElementState = {
+	dots: ReadonlyArray<ReferenceDotSettings>;
+	areas: ReadonlyArray<ReferenceAreaSettings>;
+	lines: ReadonlyArray<ReferenceLineSettings>;
+};
+
+const initialState: ReferenceElementState = {
+	dots: [],
+	areas: [],
+	lines: [],
+};
+
+export const referenceElementsSlice = createSlice({
+	name: 'referenceElements',
+	initialState,
+	reducers: {
+		addDot: (
+			state: WritableDraft<ReferenceElementState>,
+			action: PayloadAction<ReferenceDotSettings>,
+		) => {
+			state.dots.push(action.payload);
+		},
+		removeDot: (
+			state: WritableDraft<ReferenceElementState>,
+			action: PayloadAction<ReferenceDotSettings>,
+		) => {
+			const index = current(state).dots.findIndex((dot) => dot === action.payload);
+			if (index !== -1) {
+				state.dots.splice(index, 1);
+			}
+		},
+		addArea: (
+			state: WritableDraft<ReferenceElementState>,
+			action: PayloadAction<ReferenceAreaSettings>,
+		) => {
+			state.areas.push(action.payload);
+		},
+		removeArea: (
+			state: WritableDraft<ReferenceElementState>,
+			action: PayloadAction<ReferenceAreaSettings>,
+		) => {
+			const index = current(state).areas.findIndex((area) => area === action.payload);
+			if (index !== -1) {
+				state.areas.splice(index, 1);
+			}
+		},
+		addLine: (
+			state: WritableDraft<ReferenceElementState>,
+			action: PayloadAction<ReferenceLineSettings>,
+		) => {
+			state.lines.push(castDraft(action.payload));
+		},
+		removeLine: (
+			state: WritableDraft<ReferenceElementState>,
+			action: PayloadAction<ReferenceLineSettings>,
+		) => {
+			const index = current(state).lines.findIndex((line) => line === action.payload);
+			if (index !== -1) {
+				state.lines.splice(index, 1);
+			}
+		},
+	},
+});
+
+export const { addDot, removeDot, addArea, removeArea, addLine, removeLine } =
+	referenceElementsSlice.actions;
+
+export const referenceElementsReducer = referenceElementsSlice.reducer;

package/src/state/renderedTicksSlice.ts

@@ -0,0 +1,60 @@
+// Adapted from recharts@3.9.2, commit b3451050c027a23957ffa50a2665c9119df21e47.
+/**
+ * @fileOverview this stores actually rendered ticks.
+ *
+ * What we do is that we have the domain -> ticks mapping in the cartesianSlice,
+ * which is fine but the result then goes to CartesianAxis where we use DOM measurement
+ * to decide which ticks to actually render.
+ *
+ * This renderedTickSlice stores those actually rendered ticks so that we can return them from a hook later.
+ */
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { castDraft, WritableDraft } from 'immer';
+import { TickItem } from '../util/types';
+import { AxisId } from './cartesianAxisSlice';
+
+type RenderedTicksAxisState = {
+	[axisId: AxisId]: ReadonlyArray<TickItem>;
+};
+
+type RenderedTicksState = {
+	xAxis: RenderedTicksAxisState;
+	yAxis: RenderedTicksAxisState;
+};
+
+const initialState: RenderedTicksState = {
+	xAxis: {},
+	yAxis: {},
+};
+
+export const renderedTicksSlice = createSlice({
+	name: 'renderedTicks',
+	initialState,
+	reducers: {
+		setRenderedTicks: (
+			state: WritableDraft<RenderedTicksState>,
+			action: PayloadAction<{
+				axisType: 'xAxis' | 'yAxis';
+				axisId: AxisId;
+				ticks: ReadonlyArray<TickItem>;
+			}>,
+		) => {
+			const { axisType, axisId, ticks } = action.payload;
+			state[axisType][axisId] = castDraft(ticks);
+		},
+		removeRenderedTicks: (
+			state: WritableDraft<RenderedTicksState>,
+			action: PayloadAction<{
+				axisType: 'xAxis' | 'yAxis';
+				axisId: AxisId;
+			}>,
+		) => {
+			const { axisType, axisId } = action.payload;
+			delete state[axisType][axisId];
+		},
+	},
+});
+
+export const { setRenderedTicks, removeRenderedTicks } = renderedTicksSlice.actions;
+
+export const renderedTicksReducer = renderedTicksSlice.reducer;

package/src/state/rootPropsSlice.ts

@@ -0,0 +1,72 @@
+// Adapted from recharts@3.9.2, commit b3451050c027a23957ffa50a2665c9119df21e47.
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { StackOffsetType } from '../util/types';
+import { SyncMethod } from '../synchronisation/types';
+import { BaseValue } from '../cartesian/Area.tsrx';
+
+/**
+ * These are chart options that users can choose - which means they can also
+ * choose to change them which should trigger a re-render.
+ */
+export type UpdatableChartOptions = {
+	accessibilityLayer: boolean;
+	barCategoryGap: number | string;
+	barGap: number | string;
+	barSize: string | number | undefined;
+	/**
+	 * Useful for debugging which chart is which when synchronising.
+	 * The className is also passed to the root element of the chart but that's done in the JSX, not through Redux.
+	 */
+	className: string | undefined;
+	maxBarSize: number | undefined;
+	stackOffset: StackOffsetType;
+	/**
+	 * Charts that share the same syncId will have their Tooltip and Brush synchronised.
+	 */
+	syncId: number | string | undefined;
+	syncMethod: SyncMethod;
+	baseValue: BaseValue | undefined;
+	/**
+	 * If false, stacked items will be rendered left to right. If true, stacked items will be rendered right to left.
+	 * (Render direction affects SVG layering, not x position.)
+	 */
+	reverseStackOrder: boolean;
+};
+
+export const initialState: UpdatableChartOptions = {
+	accessibilityLayer: true,
+	barCategoryGap: '10%',
+	barGap: 4,
+	barSize: undefined,
+	className: undefined,
+	maxBarSize: undefined,
+	stackOffset: 'none',
+	syncId: undefined,
+	syncMethod: 'index',
+	baseValue: undefined,
+	reverseStackOrder: false,
+};
+
+const rootPropsSlice = createSlice({
+	name: 'rootProps',
+	initialState,
+	reducers: {
+		updateOptions: (state: UpdatableChartOptions, action: PayloadAction<UpdatableChartOptions>) => {
+			state.accessibilityLayer = action.payload.accessibilityLayer;
+			state.barCategoryGap = action.payload.barCategoryGap;
+			state.barGap = action.payload.barGap ?? initialState.barGap;
+			state.barSize = action.payload.barSize;
+			state.maxBarSize = action.payload.maxBarSize;
+			state.stackOffset = action.payload.stackOffset;
+			state.syncId = action.payload.syncId;
+			state.syncMethod = action.payload.syncMethod;
+			state.className = action.payload.className;
+			state.baseValue = action.payload.baseValue;
+			state.reverseStackOrder = action.payload.reverseStackOrder;
+		},
+	},
+});
+
+export const rootPropsReducer = rootPropsSlice.reducer;
+
+export const { updateOptions } = rootPropsSlice.actions;

package/src/state/selectors/areaSelectors.ts

@@ -1,8 +1,7 @@
-// @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 { computeArea } from '../../cartesian/Area.tsrx';
 import {
 	selectAxisWithScale,
 	selectStackGroups,

package/src/state/selectors/{arrayEqualityCheck.js → arrayEqualityCheck.ts}

@@ -1,12 +1,11 @@
-// Vendored verbatim from recharts@3.9.2 es6/state/selectors/arrayEqualityCheck.js (framework-agnostic).
-// Do not edit — update by re-vendoring when the recharts devDependency moves.
+// Adapted from recharts@3.9.2, commit b3451050c027a23957ffa50a2665c9119df21e47.
 /**
  * Checks if two arrays are equal, treating empty arrays as equal regardless of reference.
  * If both arrays are non-empty, it checks for reference equality.
  * @param a
  * @param b
  */
-export function emptyArraysAreEqualCheck(a, b) {
+export function emptyArraysAreEqualCheck<T>(a: ReadonlyArray<T>, b: ReadonlyArray<T>): boolean {
 	if (Array.isArray(a) && Array.isArray(b) && a.length === 0 && b.length === 0) {
 		// empty arrays are always equal, regardless of reference
 		return true;
@@ -19,9 +18,9 @@ export function emptyArraysAreEqualCheck(a, b) {
  * @param a
  * @param b
  */
-export function arrayContentsAreEqualCheck(a, b) {
+export function arrayContentsAreEqualCheck<T>(a: ReadonlyArray<T>, b: ReadonlyArray<T>): boolean {
 	if (a.length === b.length) {
-		for (var i = 0; i < a.length; i++) {
+		for (let i = 0; i < a.length; i++) {
 			if (a[i] !== b[i]) {
 				return false;
 			}