@solidports/recharts 0.1.0 → 0.1.1

package/src/cartesian/getCartesianPosition.tsx

@@ -1,267 +0,0 @@
-/* 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

@@ -1,144 +0,0 @@
-/* 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

@@ -1,225 +0,0 @@
-/* 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

@@ -1,15 +0,0 @@
-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

@@ -1,54 +0,0 @@
-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
-	}
-}