@solidports/recharts 0.1.0

package/src/cartesian/getCartesianPosition.tsx

@@ -0,0 +1,267 @@
+/* eslint-disable import/no-cycle */
+import { getPercentValue, isNumber, isPercent } from "../util/DataUtils"
+import { CartesianViewBoxRequired, TrapezoidViewBox } from "../util/types"
+import { TextAnchor, TextVerticalAnchor } from "../component/Text"
+import { cartesianViewBoxToTrapezoid } from "./cartesianViewBoxToTrapezoid"
+
+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
+}
+
+export { isOutsidePosition } from "./isOutsidePosition"
+
+/**
+ * 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 = {
+			horizontalAnchor: "middle",
+			verticalAnchor: verticalEnd,
+			x: upperX + upperWidth / 2,
+			y: y - verticalOffset,
+		}
+
+		if (clamp && parentViewBox) {
+			result.height = Math.max(y - parentViewBox.y, 0)
+			result.width = upperWidth
+		}
+		return result
+	}
+
+	if (position === "bottom") {
+		const result: CartesianPosition = {
+			horizontalAnchor: "middle",
+			verticalAnchor: verticalStart,
+			x: lowerX + lowerWidth / 2,
+			y: y + height + verticalOffset,
+		}
+		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 = {
+			horizontalAnchor: horizontalEnd,
+			verticalAnchor: "middle",
+			x: middleX - horizontalOffset,
+			y: y + height / 2,
+		}
+		if (clamp && parentViewBox) {
+			result.width = Math.max(result.x - parentViewBox.x, 0)
+			result.height = height
+		}
+		return result
+	}
+
+	if (position === "right") {
+		const result: CartesianPosition = {
+			horizontalAnchor: horizontalStart,
+			verticalAnchor: "middle",
+			x: middleX + midHeightWidth + horizontalOffset,
+			y: y + height / 2,
+		}
+		if (clamp && parentViewBox) {
+			result.width = Math.max(parentViewBox.x + parentViewBox.width - result.x, 0)
+			result.height = height
+		}
+		return result
+	}
+
+	const sizeAttrs = clamp && parentViewBox ? { height, width: midHeightWidth } : {}
+
+	if (position === "insideLeft") {
+		return {
+			horizontalAnchor: horizontalStart,
+			verticalAnchor: "middle",
+			x: middleX + horizontalOffset,
+			y: y + height / 2,
+			...sizeAttrs,
+		}
+	}
+
+	if (position === "insideRight") {
+		return {
+			horizontalAnchor: horizontalEnd,
+			verticalAnchor: "middle",
+			x: middleX + midHeightWidth - horizontalOffset,
+			y: y + height / 2,
+			...sizeAttrs,
+		}
+	}
+
+	if (position === "insideTop") {
+		return {
+			horizontalAnchor: "middle",
+			verticalAnchor: verticalStart,
+			x: upperX + upperWidth / 2,
+			y: y + verticalOffset,
+			...sizeAttrs,
+		}
+	}
+
+	if (position === "insideBottom") {
+		return {
+			horizontalAnchor: "middle",
+			verticalAnchor: verticalEnd,
+			x: lowerX + lowerWidth / 2,
+			y: y + height - verticalOffset,
+			...sizeAttrs,
+		}
+	}
+
+	if (position === "insideTopLeft") {
+		return {
+			horizontalAnchor: horizontalStart,
+			verticalAnchor: verticalStart,
+			x: upperX + horizontalOffset,
+			y: y + verticalOffset,
+			...sizeAttrs,
+		}
+	}
+
+	if (position === "insideTopRight") {
+		return {
+			horizontalAnchor: horizontalEnd,
+			verticalAnchor: verticalStart,
+			x: upperX + upperWidth - horizontalOffset,
+			y: y + verticalOffset,
+			...sizeAttrs,
+		}
+	}
+
+	if (position === "insideBottomLeft") {
+		return {
+			horizontalAnchor: horizontalStart,
+			verticalAnchor: verticalEnd,
+			x: lowerX + horizontalOffset,
+			y: y + height - verticalOffset,
+			...sizeAttrs,
+		}
+	}
+
+	if (position === "insideBottomRight") {
+		return {
+			horizontalAnchor: horizontalEnd,
+			verticalAnchor: verticalEnd,
+			x: lowerX + lowerWidth - horizontalOffset,
+			y: y + height - verticalOffset,
+			...sizeAttrs,
+		}
+	}
+
+	if (
+		position != null &&
+		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 {
+			horizontalAnchor: "end",
+			verticalAnchor: "end",
+			x: x + getPercentValue(position.x, midHeightWidth),
+			y: y + getPercentValue(position.y, height),
+			...sizeAttrs,
+		}
+	}
+
+	return {
+		horizontalAnchor: "middle",
+		verticalAnchor: "middle",
+		x: centerX,
+		y: y + height / 2,
+		...sizeAttrs,
+	}
+}

package/src/cartesian/getEquidistantTicks.ts

@@ -0,0 +1,144 @@
+/* eslint-disable import/no-cycle */
+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
+		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,225 @@
+/* eslint-disable import/no-cycle */
+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?: CartesianAxisSettings["unit"]
+	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, { "font-size": fontSize, "letter-spacing": letterSpacing })
+			: { height: 0, width: 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, { "font-size": fontSize, "letter-spacing": letterSpacing }),
+					unitSize,
+					angle,
+				)
+			: getStringSize(value, { "font-size": fontSize, "letter-spacing": 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/cartesian/isOutsidePosition.ts

@@ -0,0 +1,15 @@
+const absolutePositions: ReadonlyArray<string> = ["top", "left", "right", "bottom"]
+
+/**
+ * True when the legend (or label) sits outside the plot: `top`/`left`/`right`/`bottom`,
+ * or a coordinate object. Inside keywords (`insideTop`, …) return false.
+ */
+export function isOutsidePosition(position: unknown): boolean {
+	if (position == null) {
+		return false
+	}
+	if (typeof position === "object") {
+		return true
+	}
+	return typeof position === "string" && absolutePositions.includes(position)
+}

package/src/cartesian/useAnimatedLineLength.ts

@@ -0,0 +1,54 @@
+import { untrack } from "solid-js"
+import type { Accessor } from "solid-js"
+import { round } from "../util/round"
+
+/**
+ * Tracks the animated visible length of a Line's SVG path across data changes.
+ *
+ * Invariants:
+ * 1. The visible length only grows (monotonically non-decreasing with animationElapsedTime).
+ * 2. The visible length changes continuously — no jumps when data changes mid-animation.
+ *    This is achieved by tracking the maximum animated length in pixels and using it
+ *    as the starting point for the next animation.
+ * 3. Once the line reaches 100% visibility, it never becomes partially visible again.
+ *    In that case the callback returns `null`, meaning no animation stroke-dasharray is needed.
+ *
+ * @param animationInput Identity of the current data. When it changes, the next call
+ *   starts a new animation from the current visible length.
+ * @returns A callback `(animationElapsedTime, totalLength) => number | null` where:
+ *   - `animationElapsedTime` is the animation progress (0 to 1)
+ *   - `totalLength` is the current total length of the SVG path in pixels
+ *   - returns the visible length in pixels, or `null` if the line is fully visible
+ */
+export function useAnimatedLineLength(
+	animationInput: Accessor<unknown>,
+): (animationElapsedTime: number, totalLength: number) => number | null {
+	let startingLength = 0
+	let maxAnimatedLength = 0
+	let reachedFull = false
+	let prevInput = untrack(animationInput)
+
+	return (animationElapsedTime: number, totalLength: number): number | null => {
+		const input = animationInput()
+		if (input !== prevInput) {
+			startingLength = maxAnimatedLength
+			prevInput = input
+		}
+
+		if (reachedFull) {
+			return null
+		}
+
+		const visibleLength = Math.min(round(startingLength + animationElapsedTime * totalLength), totalLength)
+
+		if (animationElapsedTime > 0 && totalLength > 0) {
+			maxAnimatedLength = Math.max(maxAnimatedLength, visibleLength)
+			if (visibleLength >= totalLength) {
+				reachedFull = true
+				return null
+			}
+		}
+
+		return visibleLength
+	}
+}