@octanejs/recharts 0.1.0

package/src/chart/RechartsWrapper.tsrx

@@ -0,0 +1,294 @@
+// Port of chart/RechartsWrapper.tsx — the outer <div class="recharts-wrapper">:
+// hosts the tooltip/legend portals, reports container size (static, read-once,
+// or ResizeObserver-driven), measures CSS scale, and feeds every user
+// interaction into the store's event middlewares. Events are NATIVE delegated
+// DOM events (octane has no synthetic layer); the middlewares read coordinates
+// off the real event, and octane shadows `currentTarget` during delegated
+// dispatch so `getRelativeCoordinate` sees the wrapper node as React would.
+import { useCallback, useEffect, useRef, useState } from 'octane';
+import { clsx } from 'clsx';
+import { mouseLeaveChart } from '../state/tooltipSlice';
+import { useAppDispatch } from '../state/hooks';
+import { mouseClickAction, mouseMoveAction } from '../state/mouseEventsMiddleware';
+import {
+	useSynchronisedEventsFromOtherCharts,
+} from '../synchronisation/useChartSynchronisation.tsrx';
+import { focusAction, keyDownAction, blurAction } from '../state/keyboardEventsMiddleware';
+import { useReportScale } from '../util/useReportScale.ts';
+import { externalEventAction } from '../state/externalEventsMiddleware';
+import { touchEventAction } from '../state/touchEventsMiddleware';
+import { TooltipPortalContext } from '../context/tooltipPortalContext.ts';
+import { LegendPortalContext } from '../context/legendPortalContext.ts';
+import { ReportChartSize } from '../context/chartLayoutContext.ts';
+import { useResponsiveContainerContext } from '../component/ResponsiveContainer.ts';
+
+function EventSynchronizer() {
+	useSynchronisedEventsFromOtherCharts();
+	return null;
+}
+
+function getNumberOrZero(value) {
+	if (typeof value === 'number') {
+		return value;
+	}
+	if (typeof value === 'string') {
+		const parsed = parseFloat(value);
+		if (!Number.isNaN(parsed)) {
+			return parsed;
+		}
+	}
+	return 0;
+}
+
+function ResponsiveDiv(props) {
+	const { ref, ...divProps } = props;
+	const observerRef = useRef(null);
+	const [sizes, setSizes] = useState({
+		containerWidth: getNumberOrZero(props.style?.width),
+		containerHeight: getNumberOrZero(props.style?.height),
+	});
+	const setContainerSize = useCallback((newWidth, newHeight) => {
+		setSizes((prevState) => {
+			const roundedWidth = Math.round(newWidth);
+			const roundedHeight = Math.round(newHeight);
+			if (
+				prevState.containerWidth === roundedWidth && prevState.containerHeight === roundedHeight
+			) {
+				return prevState;
+			}
+			return { containerWidth: roundedWidth, containerHeight: roundedHeight };
+		});
+	}, []);
+	const innerRef = useCallback((node) => {
+		// 1. First, call the external ref if it was provided
+		if (typeof ref === 'function') {
+			ref(node);
+		}
+		// 2. Disconnect any previously active ResizeObserver
+		if (observerRef.current != null) {
+			observerRef.current.disconnect();
+			observerRef.current = null;
+		}
+		// 3. Observe the new node
+		if (node != null && typeof ResizeObserver !== 'undefined') {
+			const { width: containerWidth, height: containerHeight } = node.getBoundingClientRect();
+			setContainerSize(containerWidth, containerHeight);
+			const callback = (entries) => {
+				const entry = entries[0];
+				if (entry == null) {
+					return;
+				}
+				const { width, height } = entry.contentRect;
+				setContainerSize(width, height);
+			};
+			const observer = new ResizeObserver(callback);
+			observer.observe(node);
+			observerRef.current = observer;
+		}
+	}, [ref, setContainerSize]);
+	useEffect(() => {
+		return () => {
+			const observer = observerRef.current;
+			if (observer != null) {
+				observer.disconnect();
+			}
+		};
+	}, [setContainerSize]);
+	return <>
+		<ReportChartSize width={sizes.containerWidth} height={sizes.containerHeight} />
+		<div ref={innerRef} {...divProps} />
+	</>;
+}
+
+function ReadSizeOnceDiv(props) {
+	// Upstream spreads the FULL props onto the div — width/height included
+	// (they pass through as plain attributes).
+	const { ref, width, height, ...rest } = props;
+	const divProps = { width, height, ...rest };
+	const [sizes, setSizes] = useState({
+		containerWidth: getNumberOrZero(width),
+		containerHeight: getNumberOrZero(height),
+	});
+	const setContainerSize = useCallback((newWidth, newHeight) => {
+		setSizes((prevState) => {
+			const roundedWidth = Math.round(newWidth);
+			const roundedHeight = Math.round(newHeight);
+			if (
+				prevState.containerWidth === roundedWidth && prevState.containerHeight === roundedHeight
+			) {
+				return prevState;
+			}
+			return { containerWidth: roundedWidth, containerHeight: roundedHeight };
+		});
+	}, []);
+	const innerRef = useCallback((node) => {
+		if (typeof ref === 'function') {
+			ref(node);
+		}
+		if (node != null) {
+			const { width: containerWidth, height: containerHeight } = node.getBoundingClientRect();
+			setContainerSize(containerWidth, containerHeight);
+		}
+	}, [ref, setContainerSize]);
+	return <>
+		<ReportChartSize width={sizes.containerWidth} height={sizes.containerHeight} />
+		<div ref={innerRef} {...divProps} />
+	</>;
+}
+
+function StaticDiv(props) {
+	const { ref, width, height, ...rest } = props;
+	const divProps = { width, height, ...rest };
+	return <>
+		<ReportChartSize width={width} height={height} />
+		<div ref={ref} {...divProps} />
+	</>;
+}
+
+function NonResponsiveDiv(props) {
+	const { width, height } = props;
+	// Percentage/CSS-string sizes: read the real size from the DOM once.
+	if (typeof width === 'string' || typeof height === 'string') {
+		return <ReadSizeOnceDiv {...props} />;
+	}
+	// Both numbers: use directly.
+	if (typeof width === 'number' && typeof height === 'number') {
+		return <StaticDiv {...props} width={width} height={height} />;
+	}
+	// Undefined sizes: report as-is (renders no SVG — intentional back-compat).
+	const { ref, ...divProps } = props;
+	// (width/height are undefined here, so nothing extra lands on the div.)
+	return <>
+		<ReportChartSize width={width} height={height} />
+		<div ref={ref} {...divProps} />
+	</>;
+}
+
+export function RechartsWrapper(props) {
+	const {
+		children,
+		className,
+		height: heightFromProps,
+		onClick,
+		onContextMenu,
+		onDoubleClick,
+		onMouseDown,
+		onMouseEnter,
+		onMouseLeave,
+		onMouseMove,
+		onMouseUp,
+		onTouchEnd,
+		onTouchMove,
+		onTouchStart,
+		style,
+		width: widthFromProps,
+		responsive,
+		dispatchTouchEvents = true,
+		ref,
+	} = props;
+	const containerRef = useRef(null);
+	const dispatch = useAppDispatch();
+	const [tooltipPortal, setTooltipPortal] = useState(null);
+	const [legendPortal, setLegendPortal] = useState(null);
+	const setScaleRef = useReportScale();
+	const responsiveContainerCalculations = useResponsiveContainerContext();
+	const width =
+		responsiveContainerCalculations?.width > 0
+			? responsiveContainerCalculations.width
+			: widthFromProps;
+	const height =
+		responsiveContainerCalculations?.height > 0
+			? responsiveContainerCalculations.height
+			: heightFromProps;
+	const innerRef = useCallback((node) => {
+		setScaleRef(node);
+		if (typeof ref === 'function') {
+			ref(node);
+		}
+		setTooltipPortal(node);
+		setLegendPortal(node);
+		if (node != null) {
+			containerRef.current = node;
+		}
+	}, [setScaleRef, ref, setTooltipPortal, setLegendPortal]);
+	const myOnClick = useCallback((e) => {
+		dispatch(mouseClickAction(e));
+		dispatch(externalEventAction({ handler: onClick, reactEvent: e }));
+	}, [dispatch, onClick]);
+	const myOnMouseEnter = useCallback((e) => {
+		dispatch(mouseMoveAction(e));
+		dispatch(externalEventAction({ handler: onMouseEnter, reactEvent: e }));
+	}, [dispatch, onMouseEnter]);
+	const myOnMouseLeave = useCallback((e) => {
+		dispatch(mouseLeaveChart());
+		dispatch(externalEventAction({ handler: onMouseLeave, reactEvent: e }));
+	}, [dispatch, onMouseLeave]);
+	const myOnMouseMove = useCallback((e) => {
+		dispatch(mouseMoveAction(e));
+		dispatch(externalEventAction({ handler: onMouseMove, reactEvent: e }));
+	}, [dispatch, onMouseMove]);
+	const onFocus = useCallback(() => {
+		dispatch(focusAction());
+	}, [dispatch]);
+	const onBlur = useCallback(() => {
+		dispatch(blurAction());
+	}, [dispatch]);
+	const onKeyDown = useCallback((e) => {
+		dispatch(keyDownAction(e.key));
+	}, [dispatch]);
+	const myOnContextMenu = useCallback((e) => {
+		dispatch(externalEventAction({ handler: onContextMenu, reactEvent: e }));
+	}, [dispatch, onContextMenu]);
+	const myOnDoubleClick = useCallback((e) => {
+		dispatch(externalEventAction({ handler: onDoubleClick, reactEvent: e }));
+	}, [dispatch, onDoubleClick]);
+	const myOnMouseDown = useCallback((e) => {
+		dispatch(externalEventAction({ handler: onMouseDown, reactEvent: e }));
+	}, [dispatch, onMouseDown]);
+	const myOnMouseUp = useCallback((e) => {
+		dispatch(externalEventAction({ handler: onMouseUp, reactEvent: e }));
+	}, [dispatch, onMouseUp]);
+	const myOnTouchStart = useCallback((e) => {
+		dispatch(externalEventAction({ handler: onTouchStart, reactEvent: e }));
+	}, [dispatch, onTouchStart]);
+	// Touch has no enter/leave; the middleware resolves the touched element via
+	// document.elementFromPoint.
+	const myOnTouchMove = useCallback((e) => {
+		if (dispatchTouchEvents) {
+			dispatch(touchEventAction(e));
+		}
+		dispatch(externalEventAction({ handler: onTouchMove, reactEvent: e }));
+	}, [dispatch, dispatchTouchEvents, onTouchMove]);
+	const myOnTouchEnd = useCallback((e) => {
+		dispatch(externalEventAction({ handler: onTouchEnd, reactEvent: e }));
+	}, [dispatch, onTouchEnd]);
+	const WrapperDiv = responsive ? ResponsiveDiv : NonResponsiveDiv;
+	return <TooltipPortalContext.Provider value={tooltipPortal}>
+		<LegendPortalContext.Provider value={legendPortal}>
+			<WrapperDiv
+				width={width ?? style?.width}
+				height={height ?? style?.height}
+				className={clsx('recharts-wrapper', className)}
+				style={{ position: 'relative', cursor: 'default', width, height, ...style }}
+				onClick={myOnClick}
+				onContextMenu={myOnContextMenu}
+				onDoubleClick={myOnDoubleClick}
+				onFocus={onFocus}
+				onBlur={onBlur}
+				onKeyDown={onKeyDown}
+				onMouseDown={myOnMouseDown}
+				onMouseEnter={myOnMouseEnter}
+				onMouseLeave={myOnMouseLeave}
+				onMouseMove={myOnMouseMove}
+				onMouseUp={myOnMouseUp}
+				onTouchEnd={myOnTouchEnd}
+				onTouchMove={myOnTouchMove}
+				onTouchStart={myOnTouchStart}
+				ref={innerRef}
+			>
+				<EventSynchronizer />
+				{children}
+			</WrapperDiv>
+		</LegendPortalContext.Provider>
+	</TooltipPortalContext.Provider>;
+}

package/src/component/ActivePoints.tsrx

@@ -0,0 +1,76 @@
+// Port of component/ActivePoints.tsx — the highlighted dot on the active
+// tooltip data point (Line/Area/Scatter).
+import { cloneElement, isValidElement } from 'octane';
+import { adaptEventHandlers } from '../util/types.ts';
+import { Dot } from '../shape/Dot.tsrx';
+import { Layer } from '../container/Layer.tsrx';
+import { useAppSelector } from '../state/hooks';
+import { selectActiveTooltipIndex } from '../state/selectors/tooltipSelectors';
+import { useActiveTooltipDataPoints } from '../hooks';
+import { isNullish } from '../util/DataUtils';
+import { svgPropertiesNoEventsFromUnknown } from '../util/svgPropertiesNoEvents';
+import { ZIndexLayer } from '../zIndex/ZIndexLayer.tsrx';
+import { DefaultZIndexes } from '../zIndex/DefaultZIndexes';
+
+function ActivePoint(activePointProps) {
+	const { point, childIndex, mainColor, activeDot, dataKey, clipPath } = activePointProps;
+	if (activeDot === false || point.x == null || point.y == null) {
+		return null;
+	}
+	const dotPropsTyped = {
+		index: childIndex,
+		dataKey,
+		cx: point.x,
+		cy: point.y,
+		r: 4,
+		fill: mainColor ?? 'none',
+		strokeWidth: 2,
+		stroke: '#fff',
+		payload: point.payload,
+		value: point.value,
+	};
+	const dotProps = {
+		...dotPropsTyped,
+		...svgPropertiesNoEventsFromUnknown(activeDot),
+		...adaptEventHandlers(activeDot),
+	};
+	let dot;
+	if (isValidElement(activeDot)) {
+		dot = cloneElement(activeDot, dotProps);
+	} else if (typeof activeDot === 'function') {
+		dot = activeDot(dotProps);
+	} else {
+		dot = <Dot {...dotProps} />;
+	}
+	return <Layer className="recharts-active-dot" clipPath={clipPath}>{dot}</Layer>;
+}
+
+export function ActivePoints(props) {
+	const {
+		points,
+		mainColor,
+		activeDot,
+		itemDataKey,
+		clipPath,
+		zIndex = DefaultZIndexes.activeDot,
+	} = props;
+	const activeTooltipIndex = useAppSelector(selectActiveTooltipIndex);
+	const activeDataPoints = useActiveTooltipDataPoints();
+	if (points == null || activeDataPoints == null) {
+		return null;
+	}
+	const activePoint = points.find((p) => activeDataPoints.includes(p.payload));
+	if (isNullish(activePoint)) {
+		return null;
+	}
+	return <ZIndexLayer zIndex={zIndex}>
+		<ActivePoint
+			point={activePoint}
+			childIndex={Number(activeTooltipIndex)}
+			mainColor={mainColor}
+			dataKey={itemDataKey}
+			activeDot={activeDot}
+			clipPath={clipPath}
+		/>
+	</ZIndexLayer>;
+}

package/src/component/Cell.ts

@@ -0,0 +1,37 @@
+// Port of component/Cell.tsx — the null-rendering per-datum props carrier.
+// Upstream reads Cells out of `children` via findAllByType; octane children
+// are opaque compiled blocks, so the octane Cell REGISTERS its props into the
+// ambient CellsContext instead (provided by Bar/Pie/…), preserving mount
+// order == data-index order. Rendering output is identical: nothing.
+/**
+ * Cell component used to define colors and styles of chart elements.
+ *
+ * This component is now deprecated and will be removed in Recharts 4.0.
+ * Please use the `shape` or `content` prop on the chart components instead.
+ *
+ * @deprecated
+ * @consumes CellReader
+ */
+import { useLayoutEffect, useRef } from 'octane';
+import { useCellsRegistry } from '../context/CellsContext';
+
+export function Cell(props: Record<string, unknown>): null {
+	const registry = useCellsRegistry();
+	const token = useRef({});
+	useLayoutEffect(() => {
+		if (registry == null) {
+			return;
+		}
+		registry.register(token.current, props);
+	}, [registry, props]);
+	useLayoutEffect(() => {
+		return () => {
+			if (registry != null) {
+				registry.unregister(token.current);
+			}
+		};
+	}, [registry]);
+	return null;
+}
+
+Cell.displayName = 'Cell';

package/src/component/Dots.tsrx

@@ -0,0 +1,74 @@
+// Port of component/Dots.tsx — the dot layer Line/Area/Radar render per data
+// point; `dot` accepts boolean | props object | element | render function.
+import { cloneElement, isValidElement } from 'octane';
+import { clsx } from 'clsx';
+import { Dot } from '../shape/Dot.tsrx';
+import { Layer } from '../container/Layer.tsrx';
+import { isClipDot } from '../util/ReactUtils';
+import { svgPropertiesAndEventsFromUnknown } from '../util/svgPropertiesAndEvents.ts';
+import { ZIndexLayer } from '../zIndex/ZIndexLayer.tsrx';
+import { DefaultZIndexes } from '../zIndex/DefaultZIndexes';
+
+function DotItem(props) {
+	const { option, dotProps, className } = props;
+	if (isValidElement(option)) {
+		return cloneElement(option, dotProps);
+	}
+	if (typeof option === 'function') {
+		return option(dotProps);
+	}
+	const finalClassName = clsx(className, typeof option !== 'boolean' ? option.className : '');
+	const { points, ...rest } = dotProps ?? {};
+	return <Dot {...rest} className={finalClassName} />;
+}
+
+function shouldRenderDots(points, dot) {
+	if (points == null) {
+		return false;
+	}
+	if (dot) {
+		return true;
+	}
+	return points.length === 1;
+}
+
+export function Dots(dotsProps) {
+	const {
+		points,
+		dot,
+		className,
+		dotClassName,
+		dataKey,
+		baseProps,
+		needClip,
+		clipPathId,
+		zIndex = DefaultZIndexes.scatter,
+	} = dotsProps;
+	if (!shouldRenderDots(points, dot)) {
+		return null;
+	}
+	const clipDot = isClipDot(dot);
+	const customDotProps = svgPropertiesAndEventsFromUnknown(dot);
+	const dots = points.map((entry, i) => {
+		const dotProps = {
+			r: 3,
+			...baseProps,
+			...customDotProps,
+			index: i,
+			cx: entry.x ?? undefined,
+			cy: entry.y ?? undefined,
+			dataKey,
+			value: entry.value,
+			payload: entry.payload,
+			points,
+		};
+		return <DotItem key={'dot-' + i} option={dot} dotProps={dotProps} className={dotClassName} />;
+	});
+	const layerProps = {};
+	if (needClip && clipPathId != null) {
+		layerProps.clipPath = 'url(#clipPath-' + (clipDot ? '' : 'dots-') + clipPathId + ')';
+	}
+	return <ZIndexLayer zIndex={zIndex}>
+		<Layer className={className} {...layerProps}>{dots}</Layer>
+	</ZIndexLayer>;
+}