@octanejs/recharts 0.1.40 → 0.1.42

package/src/cartesian/getCartesianPosition.ts

@@ -0,0 +1,265 @@
+// Adapted from recharts@3.9.2, commit b3451050c027a23957ffa50a2665c9119df21e47.
+import { getPercentValue, isNumber, isPercent } from '../util/DataUtils';
+import { CartesianViewBoxRequired, TrapezoidViewBox } from '../util/types';
+import { TextAnchor, TextVerticalAnchor } from '../component/Text.tsrx';
+import { cartesianViewBoxToTrapezoid } from '../context/chartLayoutContext';
+
+export type CartesianLabelPosition =
+	| 'top'
+	| 'left'
+	| 'right'
+	| 'bottom'
+	| 'inside'
+	| 'outside'
+	| 'insideLeft'
+	| 'insideRight'
+	| 'insideTop'
+	| 'insideBottom'
+	| 'insideTopLeft'
+	| 'insideBottomLeft'
+	| 'insideTopRight'
+	| 'insideBottomRight'
+	| 'insideStart'
+	| 'insideEnd'
+	| 'end'
+	| 'center'
+	| 'centerTop'
+	| 'centerBottom'
+	| 'middle'
+	| {
+			x?: number | string;
+			y?: number | string;
+	  };
+
+export type GetCartesianPositionOptions = {
+	viewBox: TrapezoidViewBox | CartesianViewBoxRequired;
+	parentViewBox?: CartesianViewBoxRequired;
+	/**
+	 * The offset to the specified "position". Direction of the offset depends on the position.
+	 */
+	offset?: number;
+	/**
+	 * The position of the element relative to the view box.
+	 */
+	position?: CartesianLabelPosition;
+	/**
+	 * If true, the returned width and height will be clamped to keep the element within the parentViewBox.
+	 * This is useful for preventing labels from overflowing the chart area.
+	 */
+	clamp?: boolean;
+};
+
+export type CartesianPosition = {
+	x: number;
+	y: number;
+	horizontalAnchor: TextAnchor;
+	verticalAnchor: TextVerticalAnchor;
+	width?: number;
+	height?: number;
+};
+
+/**
+ * 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 const getCartesianPosition = (options: GetCartesianPositionOptions): CartesianPosition => {
+	const { viewBox, position, offset = 0, parentViewBox: parentViewBoxFromOptions, clamp } = options;
+
+	const { x, y, height, upperWidth, lowerWidth } = cartesianViewBoxToTrapezoid(viewBox);
+
+	// Funnel.tsx provides a viewBox where `x` is the top-left of the trapezoid shape.
+	const upperX = x;
+	// The trapezoid is centered, so we can calculate the other corners from the top-left.
+	const lowerX = x + (upperWidth - lowerWidth) / 2;
+	// middleX is the x-coordinate of the left edge at the vertical midpoint of the trapezoid.
+	const middleX = (upperX + lowerX) / 2;
+	// The width of the trapezoid at its vertical midpoint.
+	const midHeightWidth = (upperWidth + lowerWidth) / 2;
+	// The center x-coordinate is constant for the entire height of the trapezoid.
+	const 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.
+	const verticalSign = height >= 0 ? 1 : -1;
+	const verticalOffset = verticalSign * offset;
+	const verticalEnd = verticalSign > 0 ? 'end' : 'start';
+	const 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.
+	const horizontalSign = upperWidth >= 0 ? 1 : -1;
+	const horizontalOffset = horizontalSign * offset;
+	const horizontalEnd = horizontalSign > 0 ? 'end' : 'start';
+	const horizontalStart = horizontalSign > 0 ? 'start' : 'end';
+
+	// We assume parentViewBox is generic if provided.
+	// The user has asserted that parentViewBox will be CartesianViewBoxRequired if present.
+	const parentViewBox = parentViewBoxFromOptions;
+
+	if (position === 'top') {
+		const result: CartesianPosition = {
+			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') {
+		const result: CartesianPosition = {
+			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') {
+		const result: CartesianPosition = {
+			x: middleX - horizontalOffset,
+			y: y + height / 2,
+			horizontalAnchor: horizontalEnd,
+			verticalAnchor: 'middle',
+		};
+		if (clamp && parentViewBox) {
+			result.width = Math.max(result.x - parentViewBox.x, 0);
+			result.height = height;
+		}
+		return result;
+	}
+
+	if (position === 'right') {
+		const result: CartesianPosition = {
+			x: middleX + midHeightWidth + horizontalOffset,
+			y: y + height / 2,
+			horizontalAnchor: horizontalStart,
+			verticalAnchor: 'middle',
+		};
+		if (clamp && parentViewBox) {
+			result.width = Math.max(parentViewBox.x + parentViewBox.width - result.x, 0);
+			result.height = height;
+		}
+		return result;
+	}
+
+	const sizeAttrs = clamp && parentViewBox ? { width: midHeightWidth, height } : {};
+
+	if (position === 'insideLeft') {
+		return {
+			x: middleX + horizontalOffset,
+			y: y + height / 2,
+			horizontalAnchor: horizontalStart,
+			verticalAnchor: 'middle',
+			...sizeAttrs,
+		};
+	}
+
+	if (position === 'insideRight') {
+		return {
+			x: middleX + midHeightWidth - horizontalOffset,
+			y: y + height / 2,
+			horizontalAnchor: horizontalEnd,
+			verticalAnchor: 'middle',
+			...sizeAttrs,
+		};
+	}
+
+	if (position === 'insideTop') {
+		return {
+			x: upperX + upperWidth / 2,
+			y: y + verticalOffset,
+			horizontalAnchor: 'middle',
+			verticalAnchor: verticalStart,
+			...sizeAttrs,
+		};
+	}
+
+	if (position === 'insideBottom') {
+		return {
+			x: lowerX + lowerWidth / 2,
+			y: y + height - verticalOffset,
+			horizontalAnchor: 'middle',
+			verticalAnchor: verticalEnd,
+			...sizeAttrs,
+		};
+	}
+
+	if (position === 'insideTopLeft') {
+		return {
+			x: upperX + horizontalOffset,
+			y: y + verticalOffset,
+			horizontalAnchor: horizontalStart,
+			verticalAnchor: verticalStart,
+			...sizeAttrs,
+		};
+	}
+
+	if (position === 'insideTopRight') {
+		return {
+			x: upperX + upperWidth - horizontalOffset,
+			y: y + verticalOffset,
+			horizontalAnchor: horizontalEnd,
+			verticalAnchor: verticalStart,
+			...sizeAttrs,
+		};
+	}
+
+	if (position === 'insideBottomLeft') {
+		return {
+			x: lowerX + horizontalOffset,
+			y: y + height - verticalOffset,
+			horizontalAnchor: horizontalStart,
+			verticalAnchor: verticalEnd,
+			...sizeAttrs,
+		};
+	}
+
+	if (position === 'insideBottomRight') {
+		return {
+			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 {
+			x: x + getPercentValue(position.x, midHeightWidth),
+			y: y + getPercentValue(position.y, height),
+			horizontalAnchor: 'end',
+			verticalAnchor: 'end',
+			...sizeAttrs,
+		};
+	}
+
+	return {
+		x: centerX,
+		y: y + height / 2,
+		horizontalAnchor: 'middle',
+		verticalAnchor: 'middle',
+		...sizeAttrs,
+	};
+};

package/src/cartesian/getEquidistantTicks.ts

@@ -0,0 +1,144 @@
+// Adapted from recharts@3.9.2, commit b3451050c027a23957ffa50a2665c9119df21e47.
+import { isVisible } from '../util/TickUtils';
+import { CartesianTickItem } from '../util/types';
+import { getEveryNth } from '../util/getEveryNth';
+import { Sign } from './getTicks';
+
+export function getEquidistantTicks(
+	sign: Sign,
+	boundaries: { start: number; end: number },
+	getTickSize: (tick: CartesianTickItem, index: number) => number,
+	ticks: ReadonlyArray<CartesianTickItem>,
+	minTickGap: number,
+): ReadonlyArray<CartesianTickItem> {
+	// If the ticks are readonly, then the slice might not be necessary
+	const result = (ticks || []).slice();
+
+	const { start: initialStart, end } = boundaries;
+	let index = 0;
+	// Premature optimisation idea 1: Estimate a lower bound, and start from there.
+	// For now, start from every tick
+	let stepsize = 1;
+	let start = initialStart;
+
+	while (stepsize <= result.length) {
+		// Given stepsize, evaluate whether every stepsize-th tick can be shown.
+		// If it can not, then increase the stepsize by 1, and try again.
+
+		const entry = ticks?.[index];
+
+		// Break condition - If we have evaluated all the ticks, then we are done.
+		if (entry === undefined) {
+			return getEveryNth(ticks, stepsize);
+		}
+
+		// Check if the element collides with the next element
+		const i = index;
+		let size: number | undefined;
+		const getSize = () => {
+			if (size === undefined) {
+				size = getTickSize(entry, i);
+			}
+
+			return size;
+		};
+
+		const tickCoord = entry.coordinate;
+		// We will always show the first tick.
+		const isShow = index === 0 || isVisible(sign, tickCoord, getSize, start, end);
+
+		if (!isShow) {
+			// Start all over with a larger stepsize
+			index = 0;
+			start = initialStart;
+			stepsize += 1;
+		}
+
+		if (isShow) {
+			// If it can be shown, update the start
+			start = tickCoord + sign * (getSize() / 2 + minTickGap);
+			index += stepsize;
+		}
+	}
+
+	return [];
+}
+
+export function getEquidistantPreserveEndTicks(
+	sign: Sign,
+	boundaries: { start: number; end: number },
+	getTickSize: (tick: CartesianTickItem, index: number) => number,
+	ticks: ReadonlyArray<CartesianTickItem>,
+	minTickGap: number,
+): ReadonlyArray<CartesianTickItem> {
+	// If the ticks are readonly, then the slice might not be necessary
+	// Reworked logic for getEquidistantPreserveEndTicks
+	const result = (ticks || []).slice();
+	const len = result.length;
+
+	if (len === 0) {
+		return [];
+	}
+
+	const { start: initialStart, end } = boundaries;
+
+	// Start with stepsize = 1 (every tick) up to the maximum possible stepsize (len)
+	for (let stepsize = 1; stepsize <= len; stepsize++) {
+		// 1. Calculate the offset so the last tick (index len - 1) is always included in the sequence.
+		const offset = (len - 1) % stepsize;
+		let start = initialStart; // `start` tracks the coordinate of the last successfully drawn tick + gap
+		let ok = true;
+
+		// 2. Iterate through the end-anchored sequence: offset, offset + stepsize, ..., len - 1
+		for (let index = offset; index < len; index += stepsize) {
+			const entry = ticks[index];
+			if (entry == null) {
+				continue;
+			}
+			const i = index;
+			let size: number | undefined;
+
+			// Use a function to get size, as in the original code
+			const getSize = () => {
+				if (size === undefined) {
+					size = getTickSize(entry, i);
+				}
+				return size;
+			};
+
+			const tickCoord = entry.coordinate;
+
+			// 3. Apply visibility logic (including the first tick special case)
+			// The reviewer says *not* to unconditionally bypass checks for the last tick.
+			const isShow = index === offset || isVisible(sign, tickCoord, getSize, start, end);
+
+			if (!isShow) {
+				// If any tick in this end-anchored sequence fails visibility/collision,
+				// reject this stepsize and move to the next iteration (larger stepsize).
+				ok = false;
+				break;
+			}
+
+			// 4. If showable, update the 'start' coordinate for the next collision check
+			if (isShow) {
+				start = tickCoord + sign * (getSize() / 2 + minTickGap);
+			}
+		}
+
+		// 5. If the entire sequence for this stepsize passed the visibility check, return the result
+		if (ok) {
+			// Build the final result array explicitly using the validated stepsize and offset.
+			const finalTicks: CartesianTickItem[] = [];
+			for (let index = offset; index < len; index += stepsize) {
+				const tick = ticks[index];
+				if (tick != null) {
+					finalTicks.push(tick);
+				}
+			}
+			return finalTicks;
+		}
+	}
+
+	// If no stepsize works (this shouldn't happen unless minTickGap is huge), return an empty array.
+	return [];
+}

package/src/cartesian/getTicks.ts

@@ -0,0 +1,221 @@
+// Adapted from recharts@3.9.2, commit b3451050c027a23957ffa50a2665c9119df21e47.
+import { CartesianTickItem, CartesianViewBoxRequired, Size } from '../util/types';
+import { mathSign, isNumber } from '../util/DataUtils';
+import { getStringSize } from '../util/DOMUtils';
+import { Global } from '../util/Global';
+import {
+	isVisible,
+	getTickBoundaries,
+	getNumberIntervalTicks,
+	getAngledTickWidth,
+} from '../util/TickUtils';
+import { getEquidistantTicks, getEquidistantPreserveEndTicks } from './getEquidistantTicks';
+import {
+	CartesianAxisSettings,
+	XAxisOrientation,
+	YAxisOrientation,
+} from '../state/cartesianAxisSlice';
+
+export type Sign = 0 | 1 | -1;
+
+function getTicksEnd(
+	sign: Sign,
+	boundaries: { start: number; end: number },
+	getTickSize: (tick: CartesianTickItem, index: number) => number,
+	ticks: ReadonlyArray<CartesianTickItem>,
+	minTickGap: number,
+): ReadonlyArray<CartesianTickItem> {
+	const result = (ticks || []).slice();
+	const len = result.length;
+
+	const { start } = boundaries;
+	let { end } = boundaries;
+
+	for (let i = len - 1; i >= 0; i--) {
+		const initialEntry = result[i];
+		if (initialEntry == null) {
+			continue;
+		}
+		let entry = initialEntry;
+		let size: number | undefined;
+		const getSize = () => {
+			if (size === undefined) {
+				size = getTickSize(initialEntry, i);
+			}
+
+			return size;
+		};
+
+		if (i === len - 1) {
+			const gap = sign * (entry.coordinate + (sign * getSize()) / 2 - end);
+			result[i] = entry = {
+				...entry,
+				tickCoord: gap > 0 ? entry.coordinate - gap * sign : entry.coordinate,
+			};
+		} else {
+			result[i] = entry = { ...entry, tickCoord: entry.coordinate };
+		}
+
+		if (entry.tickCoord != null) {
+			const isShow = isVisible(sign, entry.tickCoord, getSize, start, end);
+
+			if (isShow) {
+				end = entry.tickCoord - sign * (getSize() / 2 + minTickGap);
+				result[i] = { ...entry, isShow: true };
+			}
+		}
+	}
+
+	return result;
+}
+
+function getTicksStart(
+	sign: Sign,
+	boundaries: { start: number; end: number },
+	getTickSize: (tick: CartesianTickItem, index: number) => number,
+	ticks: ReadonlyArray<CartesianTickItem>,
+	minTickGap: number,
+	preserveEnd?: boolean,
+): ReadonlyArray<CartesianTickItem> {
+	// This method is mutating the array so clone is indeed necessary here
+	const result: Array<CartesianTickItem> = (ticks || []).slice();
+	const len = result.length;
+
+	let { start, end } = boundaries;
+
+	if (preserveEnd) {
+		// Try to guarantee the tail to be displayed
+		let tail = ticks[len - 1];
+		if (tail != null) {
+			const tailSize = getTickSize(tail, len - 1);
+			const tailGap = sign * (tail.coordinate + (sign * tailSize) / 2 - end);
+			result[len - 1] = tail = {
+				...tail,
+				tickCoord: tailGap > 0 ? tail.coordinate - tailGap * sign : tail.coordinate,
+			};
+
+			if (tail.tickCoord != null) {
+				const isTailShow = isVisible(sign, tail.tickCoord, () => tailSize, start, end);
+
+				if (isTailShow) {
+					end = tail.tickCoord - sign * (tailSize / 2 + minTickGap);
+					result[len - 1] = { ...tail, isShow: true };
+				}
+			}
+		}
+	}
+
+	const count = preserveEnd ? len - 1 : len;
+	for (let i = 0; i < count; i++) {
+		const initialEntry = result[i];
+		if (initialEntry == null) {
+			continue;
+		}
+		let entry = initialEntry;
+		let size: number | undefined;
+		const getSize = () => {
+			if (size === undefined) {
+				size = getTickSize(initialEntry, i);
+			}
+
+			return size;
+		};
+
+		if (i === 0) {
+			const gap = sign * (entry.coordinate - (sign * getSize()) / 2 - start);
+			result[i] = entry = {
+				...entry,
+				tickCoord: gap < 0 ? entry.coordinate - gap * sign : entry.coordinate,
+			};
+		} else {
+			result[i] = entry = { ...entry, tickCoord: entry.coordinate };
+		}
+
+		if (entry.tickCoord != null) {
+			const isShow = isVisible(sign, entry.tickCoord, getSize, start, end);
+
+			if (isShow) {
+				start = entry.tickCoord + sign * (getSize() / 2 + minTickGap);
+				result[i] = { ...entry, isShow: true };
+			}
+		}
+	}
+
+	return result;
+}
+
+export type GetTicksInput = {
+	angle?: number;
+	interval: CartesianAxisSettings['interval'] | undefined;
+	minTickGap: number;
+	orientation: XAxisOrientation | YAxisOrientation;
+	tick: CartesianAxisSettings['tick'];
+	tickFormatter?: CartesianAxisSettings['tickFormatter'];
+	ticks: ReadonlyArray<CartesianTickItem> | null;
+	unit?: string | number;
+	viewBox: CartesianViewBoxRequired;
+};
+
+export function getTicks(
+	props: GetTicksInput,
+	fontSize?: string,
+	letterSpacing?: string,
+): ReadonlyArray<CartesianTickItem> {
+	const { tick, ticks, viewBox, minTickGap, orientation, interval, tickFormatter, unit, angle } =
+		props;
+
+	if (!ticks || !ticks.length || !tick) {
+		return [];
+	}
+
+	if (isNumber(interval) || Global.isSsr) {
+		return getNumberIntervalTicks(ticks, isNumber(interval) ? interval : 0) ?? [];
+	}
+
+	let candidates: ReadonlyArray<CartesianTickItem> = [];
+
+	const sizeKey = orientation === 'top' || orientation === 'bottom' ? 'width' : 'height';
+	const unitSize: Size =
+		unit && sizeKey === 'width'
+			? getStringSize(unit, { fontSize, letterSpacing })
+			: { width: 0, height: 0 };
+
+	const getTickSize = (content: CartesianTickItem, index: number) => {
+		const value =
+			typeof tickFormatter === 'function' ? tickFormatter(content.value, index) : content.value;
+		// Recharts only supports angles when sizeKey === 'width'
+		return sizeKey === 'width'
+			? getAngledTickWidth(getStringSize(value, { fontSize, letterSpacing }), unitSize, angle)
+			: getStringSize(value, { fontSize, letterSpacing })[sizeKey];
+	};
+
+	const tick0 = ticks[0];
+	const tick1 = ticks[1];
+	const sign =
+		ticks.length >= 2 && tick0 != null && tick1 != null
+			? mathSign(tick1.coordinate - tick0.coordinate)
+			: 1;
+	const boundaries = getTickBoundaries(viewBox, sign, sizeKey);
+
+	if (interval === 'equidistantPreserveStart') {
+		return getEquidistantTicks(sign, boundaries, getTickSize, ticks, minTickGap);
+	}
+	if (interval === 'equidistantPreserveEnd') {
+		return getEquidistantPreserveEndTicks(sign, boundaries, getTickSize, ticks, minTickGap);
+	}
+
+	if (interval === 'preserveStart' || interval === 'preserveStartEnd') {
+		candidates = getTicksStart(
+			sign,
+			boundaries,
+			getTickSize,
+			ticks,
+			minTickGap,
+			interval === 'preserveStartEnd',
+		);
+	} else {
+		candidates = getTicksEnd(sign, boundaries, getTickSize, ticks, minTickGap);
+	}
+
+	return candidates.filter((entry) => entry.isShow);
+}

package/src/chart/AreaChart.tsrx

@@ -1,3 +1,5 @@
+import type { Ref } from '../util/OctaneTypes.ts';
+
 import { arrayTooltipSearcher } from '../state/optionsSlice';
 import { CartesianChart } from './CartesianChart.tsrx';
 import { CartesianChartProps, TooltipEventType } from '../util/types';
@@ -9,7 +11,9 @@ const allowedTooltipTypes: ReadonlyArray<TooltipEventType> = ['axis'];
  * @provides CartesianViewBoxContext
  * @provides CartesianChartContext
  */
-export function AreaChart(props: CartesianChartProps<unknown>) {
+export function AreaChart<DataPointType = unknown>(props: CartesianChartProps<DataPointType> & {
+	ref?: Ref<SVGSVGElement>;
+}) {
 	const { ref, ...rest } = props;
 	return <CartesianChart
 		chartName="AreaChart"

package/src/chart/BarChart.tsrx

@@ -1,15 +1,21 @@
+import type { CartesianChartProps } from '../util/types';
+import type { Ref } from '../util/OctaneTypes.ts';
+import type { TooltipEventType } from '../util/types';
+
 // Port of chart/BarChart.tsx.
 import { arrayTooltipSearcher } from '../state/optionsSlice';
 import { CartesianChart } from './CartesianChart.tsrx';
 
-const allowedTooltipTypes = ['axis', 'item'];
+const allowedTooltipTypes: ReadonlyArray<TooltipEventType> = ['axis', 'item'];
 
 /**
  * @consumes ResponsiveContainerContext
  * @provides CartesianViewBoxContext
  * @provides CartesianChartContext
  */
-export function BarChart(props) {
+export function BarChart<DataPointType = unknown>(props: CartesianChartProps<DataPointType> & {
+	ref?: Ref<SVGSVGElement>;
+}) {
 	const { ref, ...rest } = props;
 	return <CartesianChart
 		chartName="BarChart"