@octanejs/recharts 0.1.0

package/src/cartesian/XAxis.tsrx

@@ -0,0 +1,156 @@
+// Port of cartesian/XAxis.tsx — registers x-axis settings in the store and
+// renders through CartesianAxis with store-synchronized settings.
+import { useLayoutEffect, useMemo, useRef, memo } from 'octane';
+import { clsx } from 'clsx';
+import { CartesianAxis, defaultCartesianAxisProps } from './CartesianAxis.tsrx';
+import { useAppDispatch, useAppSelector } from '../state/hooks';
+import { addXAxis, replaceXAxis, removeXAxis } from '../state/cartesianAxisSlice';
+import {
+	implicitXAxis,
+	selectTicksOfAxis,
+	selectXAxisPosition,
+	selectXAxisSettingsNoDefaults,
+	selectXAxisSize,
+} from '../state/selectors/axisSelectors';
+import { selectAxisViewBox } from '../state/selectors/selectChartOffsetInternal';
+import { useIsPanorama } from '../context/PanoramaContext.ts';
+import { resolveDefaultProps } from '../util/resolveDefaultProps';
+import { axisPropsAreEqual } from '../util/axisPropsAreEqual';
+import { useCartesianChartLayout } from '../context/chartLayoutContext.ts';
+import { getAxisTypeBasedOnLayout } from '../util/getAxisTypeBasedOnLayout';
+
+function SetXAxisSettings(props) {
+	const dispatch = useAppDispatch();
+	const prevSettingsRef = useRef(null);
+	const layout = useCartesianChartLayout();
+	const { type: typeFromProps, ...restProps } = props;
+	const evaluatedType = getAxisTypeBasedOnLayout(layout, 'xAxis', typeFromProps);
+	const settings = useMemo(() => {
+		if (evaluatedType == null) {
+			return undefined;
+		}
+		return { ...restProps, type: evaluatedType };
+	}, [restProps, evaluatedType]);
+	useLayoutEffect(() => {
+		if (settings == null) {
+			return;
+		}
+		if (prevSettingsRef.current === null) {
+			dispatch(addXAxis(settings));
+		} else if (prevSettingsRef.current !== settings) {
+			dispatch(replaceXAxis({ prev: prevSettingsRef.current, next: settings }));
+		}
+		prevSettingsRef.current = settings;
+	}, [settings, dispatch]);
+	useLayoutEffect(() => {
+		return () => {
+			if (prevSettingsRef.current) {
+				dispatch(removeXAxis(prevSettingsRef.current));
+				prevSettingsRef.current = null;
+			}
+		};
+	}, [dispatch]);
+	return null;
+}
+
+function XAxisImpl(props) {
+	const { xAxisId, className } = props;
+	const viewBox = useAppSelector(selectAxisViewBox);
+	const isPanorama = useIsPanorama();
+	const axisType = 'xAxis';
+	const cartesianTickItems = useAppSelector(
+		(state) => selectTicksOfAxis(state, axisType, xAxisId, isPanorama),
+	);
+	const axisSize = useAppSelector((state) => selectXAxisSize(state, xAxisId));
+	const position = useAppSelector((state) => selectXAxisPosition(state, xAxisId));
+	// Settings come back from the store (not props) so every component renders
+	// one consistent view of the axis (recharts#6257).
+	const synchronizedSettings = useAppSelector(
+		(state) => selectXAxisSettingsNoDefaults(state, xAxisId),
+	);
+	if (axisSize == null || position == null || synchronizedSettings == null) {
+		return null;
+	}
+	const { dangerouslySetInnerHTML, ticks, scale: _del, ...allOtherProps } = props;
+	const { id, scale: _del2, ...restSynchronizedSettings } = synchronizedSettings;
+	return <CartesianAxis
+		{...allOtherProps}
+		{...restSynchronizedSettings}
+		x={position.x}
+		y={position.y}
+		width={axisSize.width}
+		height={axisSize.height}
+		className={clsx('recharts-' + axisType + ' ' + axisType, className)}
+		viewBox={viewBox}
+		ticks={cartesianTickItems}
+		axisType={axisType}
+		axisId={xAxisId}
+	/>;
+}
+
+export const xAxisDefaultProps = {
+	allowDataOverflow: implicitXAxis.allowDataOverflow,
+	allowDecimals: implicitXAxis.allowDecimals,
+	allowDuplicatedCategory: implicitXAxis.allowDuplicatedCategory,
+	angle: implicitXAxis.angle,
+	axisLine: defaultCartesianAxisProps.axisLine,
+	height: implicitXAxis.height,
+	hide: false,
+	includeHidden: implicitXAxis.includeHidden,
+	interval: implicitXAxis.interval,
+	label: false,
+	minTickGap: implicitXAxis.minTickGap,
+	mirror: implicitXAxis.mirror,
+	orientation: implicitXAxis.orientation,
+	padding: implicitXAxis.padding,
+	reversed: implicitXAxis.reversed,
+	scale: implicitXAxis.scale,
+	tick: implicitXAxis.tick,
+	tickCount: implicitXAxis.tickCount,
+	tickLine: defaultCartesianAxisProps.tickLine,
+	tickSize: defaultCartesianAxisProps.tickSize,
+	type: implicitXAxis.type,
+	niceTicks: implicitXAxis.niceTicks,
+	xAxisId: 0,
+};
+
+function XAxisSettingsDispatcher(outsideProps) @{
+	const props = resolveDefaultProps(outsideProps, xAxisDefaultProps);
+	<>
+		<SetXAxisSettings
+			allowDataOverflow={props.allowDataOverflow}
+			allowDecimals={props.allowDecimals}
+			allowDuplicatedCategory={props.allowDuplicatedCategory}
+			angle={props.angle}
+			dataKey={props.dataKey}
+			domain={props.domain}
+			height={props.height}
+			hide={props.hide}
+			id={props.xAxisId}
+			includeHidden={props.includeHidden}
+			interval={props.interval}
+			minTickGap={props.minTickGap}
+			mirror={props.mirror}
+			name={props.name}
+			orientation={props.orientation}
+			padding={props.padding}
+			reversed={props.reversed}
+			scale={props.scale}
+			tick={props.tick}
+			tickCount={props.tickCount}
+			tickFormatter={props.tickFormatter}
+			ticks={props.ticks}
+			type={props.type}
+			unit={props.unit}
+			niceTicks={props.niceTicks}
+		/>
+		<XAxisImpl {...props} />
+	</>
+}
+
+/**
+ * @consumes CartesianViewBoxContext
+ * @provides CartesianLabelContext
+ */
+export const XAxis = memo(XAxisSettingsDispatcher, axisPropsAreEqual);
+XAxis.displayName = 'XAxis';

package/src/cartesian/XAxis.tsrx.d.ts

@@ -0,0 +1,3 @@
+// Type declaration for the .tsrx component (resolved by relative path).
+export declare const xAxisDefaultProps: Record<string, unknown>;
+export declare const XAxis: (props: Record<string, unknown>) => unknown;

package/src/cartesian/YAxis.tsrx

@@ -0,0 +1,183 @@
+// Port of cartesian/YAxis.tsx — registers y-axis settings in the store,
+// renders through CartesianAxis, and drives width="auto" via the axis
+// component's imperative getCalculatedWidth handle.
+import { isValidElement, useLayoutEffect, useMemo, useRef, memo } from 'octane';
+import { clsx } from 'clsx';
+import { CartesianAxis, defaultCartesianAxisProps } from './CartesianAxis.tsrx';
+import { addYAxis, replaceYAxis, removeYAxis, updateYAxisWidth } from '../state/cartesianAxisSlice';
+import { useAppDispatch, useAppSelector } from '../state/hooks';
+import {
+	implicitYAxis,
+	selectTicksOfAxis,
+	selectYAxisPosition,
+	selectYAxisSettingsNoDefaults,
+	selectYAxisSize,
+} from '../state/selectors/axisSelectors';
+import { selectAxisViewBox } from '../state/selectors/selectChartOffsetInternal';
+import { useIsPanorama } from '../context/PanoramaContext.ts';
+import { isLabelContentAFunction } from '../component/Label.tsrx';
+import { resolveDefaultProps } from '../util/resolveDefaultProps';
+import { axisPropsAreEqual } from '../util/axisPropsAreEqual';
+import { useCartesianChartLayout } from '../context/chartLayoutContext.ts';
+import { getAxisTypeBasedOnLayout } from '../util/getAxisTypeBasedOnLayout';
+
+function SetYAxisSettings(props) {
+	const dispatch = useAppDispatch();
+	const prevSettingsRef = useRef(null);
+	const layout = useCartesianChartLayout();
+	const { type: typeFromProps, ...restProps } = props;
+	const evaluatedType = getAxisTypeBasedOnLayout(layout, 'yAxis', typeFromProps);
+	const settings = useMemo(() => {
+		if (evaluatedType == null) {
+			return undefined;
+		}
+		return { ...restProps, type: evaluatedType };
+	}, [evaluatedType, restProps]);
+	useLayoutEffect(() => {
+		if (settings == null) {
+			return;
+		}
+		if (prevSettingsRef.current === null) {
+			dispatch(addYAxis(settings));
+		} else if (prevSettingsRef.current !== settings) {
+			dispatch(replaceYAxis({ prev: prevSettingsRef.current, next: settings }));
+		}
+		prevSettingsRef.current = settings;
+	}, [settings, dispatch]);
+	useLayoutEffect(() => {
+		return () => {
+			if (prevSettingsRef.current) {
+				dispatch(removeYAxis(prevSettingsRef.current));
+				prevSettingsRef.current = null;
+			}
+		};
+	}, [dispatch]);
+	return null;
+}
+
+function YAxisImpl(props) {
+	const { yAxisId, className, width, label } = props;
+	const cartesianAxisRef = useRef(null);
+	const labelRef = useRef(null);
+	const viewBox = useAppSelector(selectAxisViewBox);
+	const isPanorama = useIsPanorama();
+	const dispatch = useAppDispatch();
+	const axisType = 'yAxis';
+	const axisSize = useAppSelector((state) => selectYAxisSize(state, yAxisId));
+	const position = useAppSelector((state) => selectYAxisPosition(state, yAxisId));
+	const cartesianTickItems = useAppSelector(
+		(state) => selectTicksOfAxis(state, axisType, yAxisId, isPanorama),
+	);
+	// Settings come back from the store (not props) so every component renders
+	// one consistent view of the axis (recharts#6257).
+	const synchronizedSettings = useAppSelector(
+		(state) => selectYAxisSettingsNoDefaults(state, yAxisId),
+	);
+	useLayoutEffect(() => {
+		// No dynamic width calculation when width !== 'auto', or when a
+		// function/element label is used.
+		if (
+			width !== 'auto' || !axisSize || isLabelContentAFunction(label) || isValidElement(label) ||
+				synchronizedSettings == null
+		) {
+			return;
+		}
+		const axisComponent = cartesianAxisRef.current;
+		if (!axisComponent) {
+			return;
+		}
+		const updatedYAxisWidth = axisComponent.getCalculatedWidth();
+		// if the width has changed, dispatch an action to update the width
+		if (Math.round(axisSize.width) !== Math.round(updatedYAxisWidth)) {
+			dispatch(updateYAxisWidth({ id: yAxisId, width: updatedYAxisWidth }));
+		}
+	}, [cartesianTickItems, axisSize, dispatch, label, yAxisId, width, synchronizedSettings]);
+	if (axisSize == null || position == null || synchronizedSettings == null) {
+		return null;
+	}
+	const { dangerouslySetInnerHTML, ticks, scale: _del, ...allOtherProps } = props;
+	const { id, scale: _del2, ...restSynchronizedSettings } = synchronizedSettings;
+	return <CartesianAxis
+		{...allOtherProps}
+		{...restSynchronizedSettings}
+		ref={cartesianAxisRef}
+		labelRef={labelRef}
+		x={position.x}
+		y={position.y}
+		tickTextProps={width === 'auto' ? { width: undefined } : { width }}
+		width={axisSize.width}
+		height={axisSize.height}
+		className={clsx('recharts-' + axisType + ' ' + axisType, className)}
+		viewBox={viewBox}
+		ticks={cartesianTickItems}
+		axisType={axisType}
+		axisId={yAxisId}
+	/>;
+}
+
+export const yAxisDefaultProps = {
+	allowDataOverflow: implicitYAxis.allowDataOverflow,
+	allowDecimals: implicitYAxis.allowDecimals,
+	allowDuplicatedCategory: implicitYAxis.allowDuplicatedCategory,
+	angle: implicitYAxis.angle,
+	axisLine: defaultCartesianAxisProps.axisLine,
+	hide: false,
+	includeHidden: implicitYAxis.includeHidden,
+	interval: implicitYAxis.interval,
+	label: false,
+	minTickGap: implicitYAxis.minTickGap,
+	mirror: implicitYAxis.mirror,
+	orientation: implicitYAxis.orientation,
+	padding: implicitYAxis.padding,
+	reversed: implicitYAxis.reversed,
+	scale: implicitYAxis.scale,
+	tick: implicitYAxis.tick,
+	tickCount: implicitYAxis.tickCount,
+	tickLine: defaultCartesianAxisProps.tickLine,
+	tickSize: defaultCartesianAxisProps.tickSize,
+	type: implicitYAxis.type,
+	niceTicks: implicitYAxis.niceTicks,
+	width: implicitYAxis.width,
+	yAxisId: 0,
+};
+
+function YAxisSettingsDispatcher(outsideProps) @{
+	const props = resolveDefaultProps(outsideProps, yAxisDefaultProps);
+	<>
+		<SetYAxisSettings
+			interval={props.interval}
+			id={props.yAxisId}
+			scale={props.scale}
+			type={props.type}
+			domain={props.domain}
+			allowDataOverflow={props.allowDataOverflow}
+			dataKey={props.dataKey}
+			allowDuplicatedCategory={props.allowDuplicatedCategory}
+			allowDecimals={props.allowDecimals}
+			tickCount={props.tickCount}
+			padding={props.padding}
+			includeHidden={props.includeHidden}
+			reversed={props.reversed}
+			ticks={props.ticks}
+			width={props.width}
+			orientation={props.orientation}
+			mirror={props.mirror}
+			hide={props.hide}
+			unit={props.unit}
+			name={props.name}
+			angle={props.angle}
+			minTickGap={props.minTickGap}
+			tick={props.tick}
+			tickFormatter={props.tickFormatter}
+			niceTicks={props.niceTicks}
+		/>
+		<YAxisImpl {...props} />
+	</>
+}
+
+/**
+ * @consumes CartesianViewBoxContext
+ * @provides CartesianLabelContext
+ */
+export const YAxis = memo(YAxisSettingsDispatcher, axisPropsAreEqual);
+YAxis.displayName = 'YAxis';

package/src/cartesian/YAxis.tsrx.d.ts

@@ -0,0 +1,3 @@
+// Type declaration for the .tsrx component (resolved by relative path).
+export declare const yAxisDefaultProps: Record<string, unknown>;
+export declare const YAxis: (props: Record<string, unknown>) => unknown;

package/src/cartesian/getCartesianPosition.js

@@ -0,0 +1,277 @@
+// Vendored verbatim from recharts@3.9.2 es6/cartesian/getCartesianPosition.js (framework-agnostic).
+// Do not edit — update by re-vendoring when the recharts devDependency moves.
+function ownKeys(e, r) {
+	var t = Object.keys(e);
+	if (Object.getOwnPropertySymbols) {
+		var o = Object.getOwnPropertySymbols(e);
+		(r &&
+			(o = o.filter(function (r) {
+				return Object.getOwnPropertyDescriptor(e, r).enumerable;
+			})),
+			t.push.apply(t, o));
+	}
+	return t;
+}
+function _objectSpread(e) {
+	for (var r = 1; r < arguments.length; r++) {
+		var t = null != arguments[r] ? arguments[r] : {};
+		r % 2
+			? ownKeys(Object(t), !0).forEach(function (r) {
+					_defineProperty(e, r, t[r]);
+				})
+			: Object.getOwnPropertyDescriptors
+				? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t))
+				: ownKeys(Object(t)).forEach(function (r) {
+						Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
+					});
+	}
+	return e;
+}
+function _defineProperty(e, r, t) {
+	return (
+		(r = _toPropertyKey(r)) in e
+			? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 })
+			: (e[r] = t),
+		e
+	);
+}
+function _toPropertyKey(t) {
+	var i = _toPrimitive(t, 'string');
+	return 'symbol' == typeof i ? i : i + '';
+}
+function _toPrimitive(t, r) {
+	if ('object' != typeof t || !t) return t;
+	var e = t[Symbol.toPrimitive];
+	if (void 0 !== e) {
+		var i = e.call(t, r || 'default');
+		if ('object' != typeof i) return i;
+		throw new TypeError('@@toPrimitive must return a primitive value.');
+	}
+	return ('string' === r ? String : Number)(t);
+}
+import { getPercentValue, isNumber, isPercent } from '../util/DataUtils';
+import { cartesianViewBoxToTrapezoid } from '../context/chartLayoutContext';
+/**
+ * Calculates the position and alignment for a generic element in a Cartesian coordinate system.
+ *
+ * @param options - The options including viewBox, position, and offset.
+ * @returns The calculated x, y, alignment and size.
+ */
+export var getCartesianPosition = (options) => {
+	var viewBox = options.viewBox,
+		position = options.position,
+		_options$offset = options.offset,
+		offset = _options$offset === void 0 ? 0 : _options$offset,
+		parentViewBoxFromOptions = options.parentViewBox,
+		clamp = options.clamp;
+	var _cartesianViewBoxToTr = cartesianViewBoxToTrapezoid(viewBox),
+		x = _cartesianViewBoxToTr.x,
+		y = _cartesianViewBoxToTr.y,
+		height = _cartesianViewBoxToTr.height,
+		upperWidth = _cartesianViewBoxToTr.upperWidth,
+		lowerWidth = _cartesianViewBoxToTr.lowerWidth;
+
+	// Funnel.tsx provides a viewBox where `x` is the top-left of the trapezoid shape.
+	var upperX = x;
+	// The trapezoid is centered, so we can calculate the other corners from the top-left.
+	var lowerX = x + (upperWidth - lowerWidth) / 2;
+	// middleX is the x-coordinate of the left edge at the vertical midpoint of the trapezoid.
+	var middleX = (upperX + lowerX) / 2;
+	// The width of the trapezoid at its vertical midpoint.
+	var midHeightWidth = (upperWidth + lowerWidth) / 2;
+	// The center x-coordinate is constant for the entire height of the trapezoid.
+	var centerX = upperX + upperWidth / 2;
+
+	// Define vertical offsets and position inverts based on the value being positive or negative.
+	// This allows labels to be positioned correctly for bars with negative height.
+	var verticalSign = height >= 0 ? 1 : -1;
+	var verticalOffset = verticalSign * offset;
+	var verticalEnd = verticalSign > 0 ? 'end' : 'start';
+	var verticalStart = verticalSign > 0 ? 'start' : 'end';
+
+	// Define horizontal offsets and position inverts based on the value being positive or negative.
+	// This allows labels to be positioned correctly for bars with negative width.
+	var horizontalSign = upperWidth >= 0 ? 1 : -1;
+	var horizontalOffset = horizontalSign * offset;
+	var horizontalEnd = horizontalSign > 0 ? 'end' : 'start';
+	var horizontalStart = horizontalSign > 0 ? 'start' : 'end';
+
+	// We assume parentViewBox is generic if provided.
+	// The user has asserted that parentViewBox will be CartesianViewBoxRequired if present.
+	var parentViewBox = parentViewBoxFromOptions;
+	if (position === 'top') {
+		var result = {
+			x: upperX + upperWidth / 2,
+			y: y - verticalOffset,
+			horizontalAnchor: 'middle',
+			verticalAnchor: verticalEnd,
+		};
+		if (clamp && parentViewBox) {
+			result.height = Math.max(y - parentViewBox.y, 0);
+			result.width = upperWidth;
+		}
+		return result;
+	}
+	if (position === 'bottom') {
+		var _result = {
+			x: lowerX + lowerWidth / 2,
+			y: y + height + verticalOffset,
+			horizontalAnchor: 'middle',
+			verticalAnchor: verticalStart,
+		};
+		if (clamp && parentViewBox) {
+			_result.height = Math.max(parentViewBox.y + parentViewBox.height - (y + height), 0);
+			_result.width = lowerWidth;
+		}
+		return _result;
+	}
+	if (position === 'left') {
+		var _result2 = {
+			x: middleX - horizontalOffset,
+			y: y + height / 2,
+			horizontalAnchor: horizontalEnd,
+			verticalAnchor: 'middle',
+		};
+		if (clamp && parentViewBox) {
+			_result2.width = Math.max(_result2.x - parentViewBox.x, 0);
+			_result2.height = height;
+		}
+		return _result2;
+	}
+	if (position === 'right') {
+		var _result3 = {
+			x: middleX + midHeightWidth + horizontalOffset,
+			y: y + height / 2,
+			horizontalAnchor: horizontalStart,
+			verticalAnchor: 'middle',
+		};
+		if (clamp && parentViewBox) {
+			_result3.width = Math.max(parentViewBox.x + parentViewBox.width - _result3.x, 0);
+			_result3.height = height;
+		}
+		return _result3;
+	}
+	var sizeAttrs =
+		clamp && parentViewBox
+			? {
+					width: midHeightWidth,
+					height,
+				}
+			: {};
+	if (position === 'insideLeft') {
+		return _objectSpread(
+			{
+				x: middleX + horizontalOffset,
+				y: y + height / 2,
+				horizontalAnchor: horizontalStart,
+				verticalAnchor: 'middle',
+			},
+			sizeAttrs,
+		);
+	}
+	if (position === 'insideRight') {
+		return _objectSpread(
+			{
+				x: middleX + midHeightWidth - horizontalOffset,
+				y: y + height / 2,
+				horizontalAnchor: horizontalEnd,
+				verticalAnchor: 'middle',
+			},
+			sizeAttrs,
+		);
+	}
+	if (position === 'insideTop') {
+		return _objectSpread(
+			{
+				x: upperX + upperWidth / 2,
+				y: y + verticalOffset,
+				horizontalAnchor: 'middle',
+				verticalAnchor: verticalStart,
+			},
+			sizeAttrs,
+		);
+	}
+	if (position === 'insideBottom') {
+		return _objectSpread(
+			{
+				x: lowerX + lowerWidth / 2,
+				y: y + height - verticalOffset,
+				horizontalAnchor: 'middle',
+				verticalAnchor: verticalEnd,
+			},
+			sizeAttrs,
+		);
+	}
+	if (position === 'insideTopLeft') {
+		return _objectSpread(
+			{
+				x: upperX + horizontalOffset,
+				y: y + verticalOffset,
+				horizontalAnchor: horizontalStart,
+				verticalAnchor: verticalStart,
+			},
+			sizeAttrs,
+		);
+	}
+	if (position === 'insideTopRight') {
+		return _objectSpread(
+			{
+				x: upperX + upperWidth - horizontalOffset,
+				y: y + verticalOffset,
+				horizontalAnchor: horizontalEnd,
+				verticalAnchor: verticalStart,
+			},
+			sizeAttrs,
+		);
+	}
+	if (position === 'insideBottomLeft') {
+		return _objectSpread(
+			{
+				x: lowerX + horizontalOffset,
+				y: y + height - verticalOffset,
+				horizontalAnchor: horizontalStart,
+				verticalAnchor: verticalEnd,
+			},
+			sizeAttrs,
+		);
+	}
+	if (position === 'insideBottomRight') {
+		return _objectSpread(
+			{
+				x: lowerX + lowerWidth - horizontalOffset,
+				y: y + height - verticalOffset,
+				horizontalAnchor: horizontalEnd,
+				verticalAnchor: verticalEnd,
+			},
+			sizeAttrs,
+		);
+	}
+	if (
+		!!position &&
+		typeof position === 'object' &&
+		(isNumber(position.x) || isPercent(position.x)) &&
+		(isNumber(position.y) || isPercent(position.y))
+	) {
+		// TODO: This is not quite right. The width of the trapezoid changes with y.
+		// A percentage-based x should be relative to the width at that y.
+		// For now, we use the mid-height width as a reasonable approximation.
+		return _objectSpread(
+			{
+				x: x + getPercentValue(position.x, midHeightWidth),
+				y: y + getPercentValue(position.y, height),
+				horizontalAnchor: 'end',
+				verticalAnchor: 'end',
+			},
+			sizeAttrs,
+		);
+	}
+	return _objectSpread(
+		{
+			x: centerX,
+			y: y + height / 2,
+			horizontalAnchor: 'middle',
+			verticalAnchor: 'middle',
+		},
+		sizeAttrs,
+	);
+};