@octanejs/recharts 0.1.0

package/src/synchronisation/syncSelectors.js

@@ -0,0 +1,5 @@
+// Vendored verbatim from recharts@3.9.2 es6/synchronisation/syncSelectors.js (framework-agnostic).
+// Do not edit — update by re-vendoring when the recharts devDependency moves.
+export function selectSynchronisedTooltipState(state) {
+	return state.tooltip.syncInteraction;
+}

package/src/synchronisation/useChartSynchronisation.tsrx

@@ -0,0 +1,285 @@
+// Port of synchronisation/useChartSynchronisation.ts — cross-chart tooltip and
+// brush synchronisation over the shared eventemitter3 event center. A `.tsrx`
+// module so the compiler slots every store read (these hooks read many
+// selectors each).
+import { useEffect } from 'octane';
+import { useAppDispatch, useAppSelector } from '../state/hooks';
+import {
+	selectEventEmitter,
+	selectSyncId,
+	selectSyncMethod,
+} from '../state/selectors/rootPropsSelectors';
+import { BRUSH_SYNC_EVENT, eventCenter, TOOLTIP_SYNC_EVENT } from '../util/Events';
+import { createEventEmitter } from '../state/optionsSlice';
+import { setSyncInteraction } from '../state/tooltipSlice';
+import { selectTooltipDataKey } from '../state/selectors/selectors';
+import {
+	selectActiveTooltipGraphicalItemId,
+	selectTooltipAxisTicks,
+} from '../state/selectors/tooltipSelectors';
+import { selectSynchronisedTooltipState } from './syncSelectors';
+import { useChartLayout, useViewBox } from '../context/chartLayoutContext.ts';
+import { setDataStartEndIndexes } from '../state/chartDataSlice';
+import { noop } from '../util/DataUtils';
+
+/**
+ * Listens for tooltip sync events from other charts and dispatches the
+ * appropriate sync interaction based on this chart's syncMethod
+ * ('index' scales coordinates between viewBoxes, 'value' matches labels
+ * against ticks, a function delegates tick resolution to the user).
+ */
+function useTooltipSyncEventsListener() {
+	const mySyncId = useAppSelector(selectSyncId);
+	const myEventEmitter = useAppSelector(selectEventEmitter);
+	const dispatch = useAppDispatch();
+	const syncMethod = useAppSelector(selectSyncMethod);
+	const tooltipTicks = useAppSelector(selectTooltipAxisTicks);
+	const layout = useChartLayout();
+	const viewBox = useViewBox();
+	const className = useAppSelector((state) => state.rootProps.className);
+	useEffect(() => {
+		if (mySyncId == null) {
+			// This chart is not synchronised with any other chart.
+			return noop;
+		}
+		const listener = (incomingSyncId, action, emitter) => {
+			if (myEventEmitter === emitter) {
+				// We don't want to dispatch actions that we sent ourselves.
+				return;
+			}
+			if (mySyncId !== incomingSyncId) {
+				// This event is not for this chart
+				return;
+			}
+			// Source chart deactivation (mouseLeave) clears sourceViewBox for ALL
+			// sync methods, letting normal emission resume.
+			if (action.payload.active === false) {
+				dispatch(
+					setSyncInteraction({
+						active: false,
+						coordinate: undefined,
+						dataKey: undefined,
+						index: null,
+						label: undefined,
+						sourceViewBox: undefined,
+						graphicalItemId: undefined,
+					}),
+				);
+				return;
+			}
+			if (syncMethod === 'index') {
+				if (viewBox && action?.payload?.coordinate && action.payload.sourceViewBox) {
+					const { x, y, ...otherCoordinateProps } = action.payload.coordinate;
+					const {
+						x: sourceX,
+						y: sourceY,
+						width: sourceWidth,
+						height: sourceHeight,
+					} = action.payload.sourceViewBox;
+					const scaledCoordinate = {
+						...otherCoordinateProps,
+						x: viewBox.x + (sourceWidth ? (x - sourceX) / sourceWidth : 0) * viewBox.width,
+						y: viewBox.y + (sourceHeight ? (y - sourceY) / sourceHeight : 0) * viewBox.height,
+					};
+					dispatch({
+						...action,
+						payload: { ...action.payload, coordinate: scaledCoordinate },
+					});
+				} else {
+					dispatch(action);
+				}
+				return;
+			}
+			if (tooltipTicks == null) {
+				// for the other two sync methods, we need the ticks to be available
+				return;
+			}
+			let activeTick;
+			if (typeof syncMethod === 'function') {
+				// The 2.x CategoricalChartState data shape, kept for compatibility.
+				const syncMethodParam = {
+					activeTooltipIndex: action.payload.index == null
+						? undefined
+						: Number(action.payload.index),
+					isTooltipActive: action.payload.active,
+					activeIndex: action.payload.index == null ? undefined : Number(action.payload.index),
+					activeLabel: action.payload.label,
+					activeDataKey: action.payload.dataKey,
+					activeCoordinate: action.payload.coordinate,
+				};
+				const activeTooltipIndex = syncMethod(tooltipTicks, syncMethodParam);
+				activeTick = tooltipTicks[activeTooltipIndex];
+			} else if (syncMethod === 'value') {
+				// labels are always strings; tick.value might be string or number
+				activeTick = tooltipTicks.find((tick) => String(tick.value) === action.payload.label);
+			}
+			const { coordinate } = action.payload;
+			if (coordinate == null || viewBox == null) {
+				dispatch(
+					setSyncInteraction({
+						active: false,
+						coordinate: undefined,
+						dataKey: undefined,
+						index: null,
+						label: undefined,
+						sourceViewBox: undefined,
+						graphicalItemId: undefined,
+					}),
+				);
+				return;
+			}
+			if (activeTick == null) {
+				// No matching tick (sparse data): hide the tooltip but KEEP
+				// sourceViewBox so this chart stays in "receiving" mode and does not
+				// emit a counter-sync that would cascade-clear other charts.
+				dispatch(
+					setSyncInteraction({
+						active: false,
+						coordinate: undefined,
+						dataKey: undefined,
+						index: null,
+						label: undefined,
+						sourceViewBox: action.payload.sourceViewBox,
+						graphicalItemId: undefined,
+					}),
+				);
+				return;
+			}
+			const { x, y } = coordinate;
+			const validateChartX = Math.min(x, viewBox.x + viewBox.width);
+			const validateChartY = Math.min(y, viewBox.y + viewBox.height);
+			const activeCoordinate = {
+				x: layout === 'horizontal' ? activeTick.coordinate : validateChartX,
+				y: layout === 'horizontal' ? validateChartY : activeTick.coordinate,
+			};
+			const syncAction = setSyncInteraction({
+				active: action.payload.active,
+				coordinate: activeCoordinate,
+				dataKey: action.payload.dataKey,
+				index: String(activeTick.index),
+				label: action.payload.label,
+				sourceViewBox: action.payload.sourceViewBox,
+				graphicalItemId: action.payload.graphicalItemId,
+			});
+			dispatch(syncAction);
+		};
+		eventCenter.on(TOOLTIP_SYNC_EVENT, listener);
+		return () => {
+			eventCenter.off(TOOLTIP_SYNC_EVENT, listener);
+		};
+	}, [className, dispatch, myEventEmitter, mySyncId, syncMethod, tooltipTicks, layout, viewBox]);
+}
+
+/**
+ * Listens for brush sync events from other charts and mirrors their data
+ * start/end indexes.
+ */
+function useBrushSyncEventsListener() {
+	const mySyncId = useAppSelector(selectSyncId);
+	const myEventEmitter = useAppSelector(selectEventEmitter);
+	const dispatch = useAppDispatch();
+	useEffect(() => {
+		if (mySyncId == null) {
+			return noop;
+		}
+		const listener = (incomingSyncId, action, emitter) => {
+			if (myEventEmitter === emitter) {
+				return;
+			}
+			if (mySyncId === incomingSyncId) {
+				dispatch(setDataStartEndIndexes(action));
+			}
+		};
+		eventCenter.on(BRUSH_SYNC_EVENT, listener);
+		return () => {
+			eventCenter.off(BRUSH_SYNC_EVENT, listener);
+		};
+	}, [dispatch, myEventEmitter, mySyncId]);
+}
+
+/** Receives synchronisation events from other charts. */
+export function useSynchronisedEventsFromOtherCharts() {
+	const dispatch = useAppDispatch();
+	useEffect(() => {
+		dispatch(createEventEmitter());
+	}, [dispatch]);
+	useTooltipSyncEventsListener();
+	useBrushSyncEventsListener();
+}
+
+/**
+ * Sends tooltip sync events to other charts. Emission is suppressed while
+ * `sourceViewBox` is present in the sync state (this chart is receiving),
+ * which prevents sparse-data charts from cascade-clearing other tooltips.
+ */
+export function useTooltipChartSynchronisation(
+	tooltipEventType,
+	trigger,
+	activeCoordinate,
+	activeLabel,
+	activeIndex,
+	isTooltipActive,
+) {
+	const activeDataKey = useAppSelector(
+		(state) => selectTooltipDataKey(state, tooltipEventType, trigger),
+	);
+	const activeGraphicalItemId = useAppSelector(selectActiveTooltipGraphicalItemId);
+	const eventEmitterSymbol = useAppSelector(selectEventEmitter);
+	const syncId = useAppSelector(selectSyncId);
+	const syncMethod = useAppSelector(selectSyncMethod);
+	const tooltipState = useAppSelector(selectSynchronisedTooltipState);
+	const isReceivingSynchronisation = tooltipState?.sourceViewBox != null;
+	const viewBox = useViewBox();
+	useEffect(() => {
+		if (isReceivingSynchronisation) {
+			return;
+		}
+		if (syncId == null) {
+			return;
+		}
+		if (eventEmitterSymbol == null) {
+			// Hooks used outside a chart context — return silently.
+			return;
+		}
+		const syncAction = setSyncInteraction({
+			active: isTooltipActive,
+			coordinate: activeCoordinate,
+			dataKey: activeDataKey,
+			index: activeIndex,
+			label: typeof activeLabel === 'number' ? String(activeLabel) : activeLabel,
+			sourceViewBox: viewBox,
+			graphicalItemId: activeGraphicalItemId,
+		});
+		eventCenter.emit(TOOLTIP_SYNC_EVENT, syncId, syncAction, eventEmitterSymbol);
+	}, [
+		isReceivingSynchronisation,
+		activeCoordinate,
+		activeDataKey,
+		activeGraphicalItemId,
+		activeIndex,
+		activeLabel,
+		eventEmitterSymbol,
+		syncId,
+		syncMethod,
+		isTooltipActive,
+		viewBox,
+	]);
+}
+
+/** Emits brush sync events when the brush start/end indexes change. */
+export function useBrushChartSynchronisation() {
+	const syncId = useAppSelector(selectSyncId);
+	const eventEmitterSymbol = useAppSelector(selectEventEmitter);
+	const brushStartIndex = useAppSelector((state) => state.chartData.dataStartIndex);
+	const brushEndIndex = useAppSelector((state) => state.chartData.dataEndIndex);
+	useEffect(() => {
+		if (
+			syncId == null || brushStartIndex == null || brushEndIndex == null ||
+				eventEmitterSymbol == null
+		) {
+			return;
+		}
+		const syncAction = { startIndex: brushStartIndex, endIndex: brushEndIndex };
+		eventCenter.emit(BRUSH_SYNC_EVENT, syncId, syncAction, eventEmitterSymbol);
+	}, [brushEndIndex, brushStartIndex, eventEmitterSymbol, syncId]);
+}

package/src/util/ActiveShapeUtils.tsrx

@@ -0,0 +1,62 @@
+// Port of util/ActiveShapeUtils.tsx — renders a user-defined `shape`/
+// `activeShape` option in all four accepted forms: an element (cloned with the
+// computed props as defaults), a render function, a props object (merged), or
+// boolean/undefined (default shape). octane cloneElement/isValidElement work
+// on element descriptors — value-position elements, which is exactly how these
+// options arrive (`shape={<Rectangle .../>}` compiles to a descriptor).
+import { cloneElement, isValidElement } from 'octane';
+import { Layer } from '../container/Layer.tsrx';
+
+function mergeShapeProps(option, props) {
+	return { ...props, ...option };
+}
+
+export function getPropsFromShapeOption(option) {
+	if (isValidElement(option)) {
+		return option.props;
+	}
+	return option;
+}
+
+function renderWithShapeElement(option, props) {
+	return cloneElement(option, mergeShapeProps(getPropsFromShapeOption(option), props));
+}
+
+function getShapeIndex(shapeProps) {
+	if (!('index' in shapeProps)) {
+		return undefined;
+	}
+	const { index } = shapeProps;
+	return typeof index === 'number' || typeof index === 'string' ? index : undefined;
+}
+
+function isActiveShape(shapeProps) {
+	return 'isActive' in shapeProps && shapeProps.isActive === true;
+}
+
+export function Shape(shapeOuterProps) {
+	const {
+		option,
+		DefaultShape,
+		shapeProps,
+		activeClassName = 'recharts-active-shape',
+		inActiveClassName = 'recharts-shape',
+	} = shapeOuterProps;
+	const index = getShapeIndex(shapeProps);
+	let shape;
+	if (isValidElement(option)) {
+		shape = renderWithShapeElement(option, shapeProps);
+	} else if (option === DefaultShape) {
+		shape = <DefaultShape {...shapeProps} />;
+	} else if (typeof option === 'function') {
+		shape = option(shapeProps, index);
+	} else if (typeof option === 'object') {
+		shape = <DefaultShape {...mergeShapeProps(option, shapeProps)} />;
+	} else {
+		shape = <DefaultShape {...shapeProps} />;
+	}
+	if (isActiveShape(shapeProps)) {
+		return <Layer className={activeClassName}>{shape}</Layer>;
+	}
+	return <Layer className={inActiveClassName}>{shape}</Layer>;
+}

package/src/util/BarUtils.tsrx

@@ -0,0 +1,35 @@
+// Port of util/BarUtils.tsx — the bar shape wrapper (Rectangle by default,
+// user overridable through the Shape helper) + the minPointSize resolver.
+import invariant from 'tiny-invariant';
+import { Rectangle } from '../shape/Rectangle.tsrx';
+import { Shape } from './ActiveShapeUtils.tsrx';
+import { isNullish, isNumber } from './DataUtils';
+
+export const defaultBarShape = Rectangle;
+
+export function BarRectangle(barRectangleProps) {
+	const { option, ...shapeProps } = barRectangleProps;
+	return <Shape
+		option={option}
+		DefaultShape={defaultBarShape}
+		shapeProps={shapeProps}
+		activeClassName="recharts-active-bar"
+		inActiveClassName="recharts-inactive-bar"
+	/>;
+}
+
+/**
+ * Safely gets minPointSize from the minPointSize prop if it is a function
+ */
+export const minPointSizeCallback = (minPointSize, defaultValue = 0) => (value, index) => {
+	if (isNumber(minPointSize)) return minPointSize;
+	const isValueNumberOrNil = isNumber(value) || isNullish(value);
+	if (isValueNumberOrNil) {
+		return minPointSize(value, index);
+	}
+	invariant(
+		isValueNumberOrNil,
+		`minPointSize callback function received a value with type of ${typeof value}. Currently only numbers or null/undefined are supported.`,
+	);
+	return defaultValue;
+};

package/src/util/CartesianUtils.js

@@ -0,0 +1,66 @@
+// Vendored verbatim from recharts@3.9.2 es6/util/CartesianUtils.js (framework-agnostic).
+// Do not edit — update by re-vendoring when the recharts devDependency moves.
+export var rectWithPoints = (_ref, _ref2) => {
+	var x1 = _ref.x,
+		y1 = _ref.y;
+	var x2 = _ref2.x,
+		y2 = _ref2.y;
+	return {
+		x: Math.min(x1, x2),
+		y: Math.min(y1, y2),
+		width: Math.abs(x2 - x1),
+		height: Math.abs(y2 - y1),
+	};
+};
+
+/**
+ * Compute the x, y, width, and height of a box from two reference points.
+ * @param  {Object} coords     x1, x2, y1, and y2
+ * @return {Object} object
+ */
+export var rectWithCoords = (_ref3) => {
+	var x1 = _ref3.x1,
+		y1 = _ref3.y1,
+		x2 = _ref3.x2,
+		y2 = _ref3.y2;
+	return rectWithPoints(
+		{
+			x: x1,
+			y: y1,
+		},
+		{
+			x: x2,
+			y: y2,
+		},
+	);
+};
+
+/** Normalizes the angle so that 0 <= angle < 180.
+ * @param {number} angle Angle in degrees.
+ * @return {number} the normalized angle with a value of at least 0 and never greater or equal to 180. */
+export function normalizeAngle(angle) {
+	return ((angle % 180) + 180) % 180;
+}
+
+/** Calculates the width of the largest horizontal line that fits inside a rectangle that is displayed at an angle.
+ * @param {Object} size Width and height of the text in a horizontal position.
+ * @param {number} angle Angle in degrees in which the text is displayed.
+ * @return {number} The width of the largest horizontal line that fits inside a rectangle that is displayed at an angle.
+ */
+export var getAngledRectangleWidth = function getAngledRectangleWidth(_ref4) {
+	var width = _ref4.width,
+		height = _ref4.height;
+	var angle = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+	// Ensure angle is >= 0 && < 180
+	var normalizedAngle = normalizeAngle(angle);
+	var angleRadians = (normalizedAngle * Math.PI) / 180;
+
+	/* Depending on the height and width of the rectangle, we may need to use different formulas to calculate the angled
+	 * width. This threshold defines when each formula should kick in. */
+	var angleThreshold = Math.atan(height / width);
+	var angledWidth =
+		angleRadians > angleThreshold && angleRadians < Math.PI - angleThreshold
+			? height / Math.sin(angleRadians)
+			: width / Math.cos(angleRadians);
+	return Math.abs(angledWidth);
+};