@solidports/recharts 0.1.0

package/src/util/ReactUtils.ts

@@ -0,0 +1,95 @@
+/* eslint-disable import/no-cycle, sort-keys */
+import type { Component } from 'solid-js';
+import type { ActiveDotType, DotType } from "./types"
+
+export const SCALE_TYPES = [
+	"auto",
+	"linear",
+	"pow",
+	"sqrt",
+	"log",
+	"identity",
+	"time",
+	"band",
+	"point",
+	"ordinal",
+	"quantile",
+	"quantize",
+	"utc",
+	"sequential",
+	"threshold",
+]
+
+/**
+ * Get the display name of a component.
+ * In Solid, components don't have displayName, so we fall back to .name.
+ * @param  {Object} Comp Specified Component
+ * @return {String}      Display name of Component
+ */
+export const getDisplayName = (Comp: Component | string) => {
+	if (typeof Comp === "string") {
+		return Comp
+	}
+	if (!Comp) {
+		return ""
+	}
+	return Comp.name || "Component"
+}
+
+export const isClipDot = (dot: ActiveDotType | DotType): boolean => {
+	if (dot && typeof dot === "object" && "clipDot" in dot) {
+		return Boolean(dot.clipDot)
+	}
+	return true
+}
+
+/* React `<Foo />` builds a vNode (lazy descriptor) that `cloneElement` can
+ * re-instantiate per iteration with merged props. Solid `<Foo />` evaluates
+ * eagerly to a live DOM Node — function reference + original props are gone.
+ * The closest emulation: detect a Node value and clone it, optionally applying
+ * iteration-specific attrs. Spies inside the original component fire ONCE at
+ * JSX evaluation; only the rendered DOM count and final attribute values are
+ * recoverable. Documented under Cluster C / GOTCHA-016. */
+export function isJsxNode(value: unknown): value is Node {
+	return value != null && typeof value === "object" && "cloneNode" in value
+}
+
+const SVG_CAMEL_TO_KEBAB: Record<string, string> = {
+	tabindex: "tabindex",
+	readOnly: "readonly",
+	contentEditable: "contenteditable",
+	spellCheck: "spellcheck",
+	autoFocus: "autofocus",
+	clipPath: "clip-path",
+	clipRule: "clip-rule",
+	fillOpacity: "fill-opacity",
+	strokeWidth: "stroke-width",
+	strokeOpacity: "stroke-opacity",
+	strokeLinecap: "stroke-linecap",
+	strokeLinejoin: "stroke-linejoin",
+	strokeDasharray: "stroke-dasharray",
+	strokeDashoffset: "stroke-dashoffset",
+	textAnchor: "text-anchor",
+}
+
+function attrNameFor(key: string): string {
+	return SVG_CAMEL_TO_KEBAB[key] ?? key
+}
+
+/* Apply iteration props onto a fresh clone of a user-supplied JSX Node.
+ * Skips function values, undefined, `style`, and the "key"/"children"/"className"/"class"
+ * meta-props; other objects are stringified like React does. Booleans serialize as "true"/"false" to match recharts upstream
+ * `cloneElement` behaviour where downstream `getAttribute` reads the string. */
+export function cloneJsxNodeWithProps(node: Node, props: Record<string, unknown>): Node {
+	const cloned = node.cloneNode(true)
+	if (!(cloned instanceof Element)) return cloned
+
+	for (const key in props) {
+		if (key === "key" || key === "children" || key === "className" || key === "class") continue
+		const value = props[key]
+		if (value == null || typeof value === "function" || key === "style") continue
+		/* React stringifies object values on DOM attributes (payload -> "[object Object]", arrays -> "0,300") */
+		cloned.setAttribute(attrNameFor(key), String(value))
+	}
+	return cloned
+}

package/src/util/ReduceCSSCalc.ts

@@ -0,0 +1,187 @@
+/* eslint-disable import/no-cycle */
+import { isNan } from "./DataUtils"
+
+const MULTIPLY_OR_DIVIDE_REGEX = /(-?\d+(?:\.\d+)?[a-zA-Z%]*)([*/])(-?\d+(?:\.\d+)?[a-zA-Z%]*)/
+const ADD_OR_SUBTRACT_REGEX = /(-?\d+(?:\.\d+)?[a-zA-Z%]*)([+-])(-?\d+(?:\.\d+)?[a-zA-Z%]*)/
+const CSS_LENGTH_UNIT_REGEX = /^(px|cm|vh|vw|em|rem|%|mm|in|pt|pc|ex|ch|vmin|vmax|Q)$/
+const NUM_SPLIT_REGEX = /(-?\d+(?:\.\d+)?)([a-zA-Z%]+)?/
+
+type SupportedUnits = "cm" | "mm" | "pt" | "pc" | "in" | "Q" | "px"
+
+const CONVERSION_RATES: Record<SupportedUnits, number> = {
+	Q: 96 / (2.54 * 40),
+	cm: 96 / 2.54,
+	in: 96,
+	mm: 96 / 25.4,
+	pc: 96 / 6,
+	pt: 96 / 72,
+	px: 1,
+}
+
+const FIXED_CSS_LENGTH_UNITS: ReadonlySet<SupportedUnits> = new Set([
+	"cm",
+	"mm",
+	"pt",
+	"pc",
+	"in",
+	"Q",
+	"px",
+])
+
+function isSupportedUnit(unit: string): unit is SupportedUnits {
+	return FIXED_CSS_LENGTH_UNITS.has(unit as SupportedUnits)
+}
+
+const STR_NAN = "NaN"
+
+function convertToPx(value: number, unit: SupportedUnits): number {
+	return value * CONVERSION_RATES[unit]
+}
+
+class DecimalCSS {
+	static parse(str: string) {
+		const [, numStr, unit] = NUM_SPLIT_REGEX.exec(str) ?? []
+
+		if (numStr == null) {
+			return DecimalCSS.NaN
+		}
+
+		return new DecimalCSS(parseFloat(numStr), unit ?? "")
+	}
+
+	static NaN = new DecimalCSS(NaN, "")
+
+	constructor(
+		public num: number,
+		public unit: string,
+	) {
+		this.num = num
+		this.unit = unit
+
+		if (isNan(num)) {
+			this.unit = ""
+		}
+
+		if (unit !== "" && !CSS_LENGTH_UNIT_REGEX.test(unit)) {
+			this.num = NaN
+			this.unit = ""
+		}
+
+		if (isSupportedUnit(unit)) {
+			this.num = convertToPx(num, unit)
+			this.unit = "px"
+		}
+	}
+
+	add(other: DecimalCSS) {
+		if (this.unit !== other.unit) {
+			return new DecimalCSS(NaN, "")
+		}
+
+		return new DecimalCSS(this.num + other.num, this.unit)
+	}
+
+	subtract(other: DecimalCSS) {
+		if (this.unit !== other.unit) {
+			return new DecimalCSS(NaN, "")
+		}
+
+		return new DecimalCSS(this.num - other.num, this.unit)
+	}
+
+	multiply(other: DecimalCSS) {
+		if (this.unit !== "" && other.unit !== "" && this.unit !== other.unit) {
+			return new DecimalCSS(NaN, "")
+		}
+
+		return new DecimalCSS(this.num * other.num, this.unit || other.unit)
+	}
+
+	divide(other: DecimalCSS) {
+		if (this.unit !== "" && other.unit !== "" && this.unit !== other.unit) {
+			return new DecimalCSS(NaN, "")
+		}
+
+		return new DecimalCSS(this.num / other.num, this.unit || other.unit)
+	}
+
+	toString() {
+		return `${this.num}${this.unit}`
+	}
+
+	isNaN() {
+		return isNan(this.num)
+	}
+}
+
+function calculateArithmetic(expr: string | undefined): string {
+	if (expr == null || expr.includes(STR_NAN)) {
+		return STR_NAN
+	}
+
+	let newExpr = expr
+	while (newExpr.includes("*") || newExpr.includes("/")) {
+		const [, leftOperand, operator, rightOperand] = MULTIPLY_OR_DIVIDE_REGEX.exec(newExpr) ?? []
+		const lTs = DecimalCSS.parse(leftOperand ?? "")
+		const rTs = DecimalCSS.parse(rightOperand ?? "")
+		const result = operator === "*" ? lTs.multiply(rTs) : lTs.divide(rTs)
+		if (result.isNaN()) {
+			return STR_NAN
+		}
+		newExpr = newExpr.replace(MULTIPLY_OR_DIVIDE_REGEX, () => result.toString())
+	}
+
+	while (newExpr.includes("+") || /.-\d+(?:\.\d+)?/.test(newExpr)) {
+		const [, leftOperand, operator, rightOperand] = ADD_OR_SUBTRACT_REGEX.exec(newExpr) ?? []
+		const lTs = DecimalCSS.parse(leftOperand ?? "")
+		const rTs = DecimalCSS.parse(rightOperand ?? "")
+		const result = operator === "+" ? lTs.add(rTs) : lTs.subtract(rTs)
+		if (result.isNaN()) {
+			return STR_NAN
+		}
+		newExpr = newExpr.replace(ADD_OR_SUBTRACT_REGEX, () => result.toString())
+	}
+
+	return newExpr
+}
+
+const PARENTHESES_REGEX = /\(([^()]*)\)/
+
+function calculateParentheses(expr: string): string {
+	let newExpr = expr
+	let match: ReturnType<typeof RegExp.prototype.exec> | null
+	while ((match = PARENTHESES_REGEX.exec(newExpr)) != null) {
+		const [, parentheticalExpression] = match
+		newExpr = newExpr.replace(PARENTHESES_REGEX, () =>
+			calculateArithmetic(parentheticalExpression),
+		)
+	}
+
+	return newExpr
+}
+
+function evaluateExpression(expression: string): string {
+	let newExpr = expression.replace(/\s+/g, "")
+	newExpr = calculateParentheses(newExpr)
+	newExpr = calculateArithmetic(newExpr)
+
+	return newExpr
+}
+
+export function safeEvaluateExpression(expression: string): string {
+	try {
+		return evaluateExpression(expression)
+	} catch {
+		return STR_NAN
+	}
+}
+
+export function reduceCSSCalc(expression: string): string {
+	const result = safeEvaluateExpression(expression.slice(5, -1))
+
+	if (result === STR_NAN) {
+		return ""
+	}
+
+	return result
+}

package/src/util/ScatterUtils.tsx

@@ -0,0 +1,52 @@
+/* eslint-disable import/no-cycle */
+import type { JSX } from '@solidjs/web';
+import { SymbolType } from "./types"
+import type { ShapeAnimationProps } from "./types"
+import { ScatterPointItem, ScatterCustomizedShape } from "../cartesian/Scatter"
+import { Symbols } from "../shape/Symbols"
+import { Shape } from "./ActiveShapeUtils"
+import { DATA_ITEM_GRAPHICAL_ITEM_ID_ATTRIBUTE_NAME } from "./Constants"
+import { GraphicalItemId } from "../state/graphicalItemsSlice"
+
+export type ScatterShapeProps = ScatterPointItem &
+	ShapeAnimationProps & {
+	isActive?: boolean
+	index: number
+	[DATA_ITEM_GRAPHICAL_ITEM_ID_ATTRIBUTE_NAME]: GraphicalItemId
+}
+
+export function ScatterSymbol(
+	props: {
+		option: ScatterCustomizedShape
+		isActive: boolean
+	} & ScatterShapeProps,
+): JSX.Element {
+	return <>{renderScatterSymbol(props)}</>
+}
+
+/* Runs inside ScatterSymbol's JSX expression so every reactive read is tracked. */
+function renderScatterSymbol(
+	props: {
+		option: ScatterCustomizedShape
+		isActive: boolean
+	} & ScatterShapeProps,
+): JSX.Element {
+	/* eslint-disable solid/reactivity -- option type and shapeProps are stable at mount; component re-renders via Solid's fine-grained reactivity on JSX reads below */
+	const { option: _option, isActive: _isActive, ...shapeProps } = props
+	if (typeof props.option === "string") {
+		const symbolType = props.option as SymbolType
+		return (
+			<Shape
+				option={<Symbols type={symbolType} {...shapeProps} />}
+				isActive={props.isActive}
+				shapeType="symbols"
+				{...shapeProps}
+			/>
+		)
+	}
+
+	return (
+		<Shape option={props.option} isActive={props.isActive} shapeType="symbols" {...shapeProps} />
+	)
+	/* eslint-enable solid/reactivity */
+}

package/src/util/ShapeElementProps.tsx

@@ -0,0 +1,87 @@
+import { createContext, untrack, useContext } from "solid-js"
+import type { JSX } from "@solidjs/web"
+import { mergeProps } from "./solid-1-compat"
+import { cloneJsxNodeWithProps, isJsxNode } from "./ReactUtils"
+import { camelizeSvgPropsForHandler } from "./svgPropertiesNoEvents"
+
+/**
+ * Upstream renders a shape passed as an element with
+ * `cloneElement(option, { ...props, ...option.props })`. Solid evaluates `<Sector fill="red" />`
+ * eagerly, so there is no unrendered element to clone. Instead the caller provides the props it
+ * would inject, then reads the option lazily inside the provider: the built-in shape evaluated
+ * there merges them under its own explicit props.
+ *
+ * Each evaluation arms a one-shot token: only the first shape evaluated after arming takes it,
+ * so shapes nested inside that shape (e.g. the curves of AreaRevealShape) are unaffected.
+ */
+type ShapeElementPropsToken = { props: Record<string, unknown>; consumed: boolean }
+
+export type ShapeElementPropsSlot = { token: ShapeElementPropsToken | null }
+
+const ShapeElementPropsContext = createContext<ShapeElementPropsSlot | null>(null)
+
+export function createShapeElementPropsSlot(): ShapeElementPropsSlot {
+	return { token: null }
+}
+
+/** Arm the slot with the props for the next shape evaluated inside the provider. */
+export function armShapeElementProps(slot: ShapeElementPropsSlot, props: Record<string, unknown>): ShapeElementPropsToken {
+	const token = { consumed: false, props }
+	slot.token = token
+	return token
+}
+
+/** Stop offering the injected props to shapes evaluated from now on. */
+export function disarmShapeElementProps(slot: ShapeElementPropsSlot): void {
+	slot.token = null
+}
+
+export function ShapeElementPropsProvider(props: { slot: ShapeElementPropsSlot; children: JSX.Element }) {
+	/* eslint-disable-next-line solid/reactivity -- the slot is a stable mutable container */
+	return <ShapeElementPropsContext value={props.slot}>{props.children}</ShapeElementPropsContext>
+}
+
+/**
+ * Merge props injected by an enclosing ShapeElementPropsProvider under the shape's own props.
+ * Own props win, like upstream's `{ ...props, ...option.props }`.
+ */
+export function useShapeElementProps<P extends object>(own: P): P {
+	const slot = useContext(ShapeElementPropsContext)
+	const token = slot?.token
+	if (token == null || token.consumed) {
+		return own
+	}
+	token.consumed = true
+	return untrack(() => mergeProps(token.props, own)) as unknown as P
+}
+
+/**
+ * Renders a `shape`-style option the way upstream does for element / function / default:
+ * - an element: built-in shapes take `shapeProps` while evaluated; other elements are cloned
+ *   with them applied (Solid cannot clone an unrendered element);
+ * - a function: called with the props in upstream's camelCase spelling;
+ * - anything else: `renderDefault(shapeProps)`.
+ */
+export function ShapeOption(props: {
+	option: unknown
+	shapeProps: Record<string, unknown>
+	renderDefault: (shapeProps: Record<string, unknown>) => JSX.Element
+}) {
+	const slot = createShapeElementPropsSlot()
+	const render = (): JSX.Element => {
+		const token = armShapeElementProps(slot, props.shapeProps)
+		/* read once: an element option mints a new node per read */
+		const option = props.option
+		disarmShapeElementProps(slot)
+		if (isJsxNode(option)) {
+			return token.consumed
+				? (option as unknown as JSX.Element)
+				: (cloneJsxNodeWithProps(option, props.shapeProps) as unknown as JSX.Element)
+		}
+		if (typeof option === "function") {
+			return (option as (p: Record<string, unknown>) => JSX.Element)(camelizeSvgPropsForHandler(props.shapeProps))
+		}
+		return props.renderDefault(props.shapeProps)
+	}
+	return <ShapeElementPropsProvider slot={slot}>{render()}</ShapeElementPropsProvider>
+}

package/src/util/TickUtils.ts

@@ -0,0 +1,60 @@
+/* eslint-disable import/no-cycle */
+import { getAngledRectangleWidth } from "./CartesianUtils"
+import { getEveryNth } from "./getEveryNth"
+import { Size, CartesianTickItem, CartesianViewBoxRequired } from "./types"
+
+export function getAngledTickWidth(contentSize: Size, unitSize: Size, angle: number | undefined) {
+	const size = {
+		height: contentSize.height + unitSize.height,
+		width: contentSize.width + unitSize.width,
+	}
+
+	return getAngledRectangleWidth(size, angle)
+}
+
+export function getTickBoundaries(
+	viewBox: CartesianViewBoxRequired,
+	sign: number,
+	sizeKey: string,
+) {
+	const isWidth = sizeKey === "width"
+	const { x, y, width, height } = viewBox
+	if (sign === 1) {
+		return {
+			end: isWidth ? x + width : y + height,
+			start: isWidth ? x : y,
+		}
+	}
+	return {
+		end: isWidth ? x : y,
+		start: isWidth ? x + width : y + height,
+	}
+}
+
+export function isVisible(
+	sign: number,
+	tickPosition: number,
+	getSize: () => number,
+	start: number,
+	end: number,
+): boolean {
+	/* Since getSize() is expensive (it reads the ticks' size from the DOM), we do this check first to avoid calculating
+	 * the tick's size. */
+	if (sign * tickPosition < sign * start || sign * tickPosition > sign * end) {
+		return false
+	}
+
+	const size = getSize()
+
+	return (
+		sign * (tickPosition - (sign * size) / 2 - start) >= 0 &&
+		sign * (tickPosition + (sign * size) / 2 - end) <= 0
+	)
+}
+
+export function getNumberIntervalTicks(
+	ticks: ReadonlyArray<CartesianTickItem>,
+	interval: number,
+): ReadonlyArray<CartesianTickItem> | undefined {
+	return getEveryNth(ticks, interval + 1)
+}

package/src/util/XAxisUtils.ts

@@ -0,0 +1,48 @@
+type IGetBoundingClient = Pick<Element, "getBoundingClientRect">
+
+/**
+ * Calculates the height of the X-axis based on the tick labels and the axis label.
+ * @param params - The parameters object.
+ * @param [params.ticks] - An array-like object of tick elements, each with a `getBoundingClientRect` method.
+ * @param [params.label] - The axis label element, with a `getBoundingClientRect` method.
+ * @param [params.labelGapWithTick=5] - The gap between the label and the tick.
+ * @param [params.tickSize=0] - The length of the tick line.
+ * @param [params.tickMargin=0] - The margin between the tick line and the tick text.
+ * @returns The calculated height of the X-axis.
+ */
+export const getCalculatedXAxisHeight = ({
+	ticks,
+	label,
+	labelGapWithTick = 5,
+	tickSize = 0,
+	tickMargin = 0,
+}: {
+	ticks: ArrayLike<IGetBoundingClient> | null
+	label: IGetBoundingClient | null | undefined
+	labelGapWithTick: number | undefined
+	tickSize: number | undefined
+	tickMargin: number | undefined
+}): number => {
+	let maxTickHeight = 0
+	if (ticks) {
+		Array.from(ticks).forEach((tickNode: IGetBoundingClient) => {
+			if (tickNode) {
+				const bbox = tickNode.getBoundingClientRect()
+
+				if (bbox.height > maxTickHeight) {
+					maxTickHeight = bbox.height
+				}
+			}
+		})
+
+		const labelHeight = label ? label.getBoundingClientRect().height : 0
+
+		const tickHeight = tickSize + tickMargin
+
+		const updatedXAxisHeight = maxTickHeight + tickHeight + labelHeight + (label ? labelGapWithTick : 0)
+
+		return Math.round(updatedXAxisHeight)
+	}
+
+	return 0
+}

package/src/util/YAxisUtils.ts

@@ -0,0 +1,48 @@
+type IGetBoundingClient = Pick<Element, "getBoundingClientRect">
+
+/**
+ * Calculates the width of the Y-axis based on the tick labels and the axis label.
+ * @param params - The parameters object.
+ * @param [params.ticks] - An array-like object of tick elements, each with a `getBoundingClientRect` method.
+ * @param [params.label] - The axis label element, with a `getBoundingClientRect` method.
+ * @param [params.labelGapWithTick=5] - The gap between the label and the tick.
+ * @param [params.tickSize=0] - The length of the tick line.
+ * @param [params.tickMargin=0] - The margin between the tick line and the tick text.
+ * @returns The calculated width of the Y-axis.
+ */
+export const getCalculatedYAxisWidth = ({
+	ticks,
+	label,
+	labelGapWithTick = 5,
+	tickSize = 0,
+	tickMargin = 0,
+}: {
+	ticks: ArrayLike<IGetBoundingClient> | null
+	label: IGetBoundingClient | null | undefined
+	labelGapWithTick: number | undefined
+	tickSize: number | undefined
+	tickMargin: number | undefined
+}): number => {
+	let maxTickWidth = 0
+	if (ticks) {
+		Array.from(ticks).forEach((tickNode: IGetBoundingClient) => {
+			if (tickNode) {
+				const bbox = tickNode.getBoundingClientRect()
+
+				if (bbox.width > maxTickWidth) {
+					maxTickWidth = bbox.width
+				}
+			}
+		})
+
+		const labelWidth = label ? label.getBoundingClientRect().width : 0
+
+		const tickWidth = tickSize + tickMargin
+
+		const updatedYAxisWidth = maxTickWidth + tickWidth + labelWidth + (label ? labelGapWithTick : 0)
+
+		return Math.round(updatedYAxisWidth)
+	}
+
+	return 0
+}

package/src/util/axisPropsAreEqual.ts

@@ -0,0 +1,48 @@
+import { XAxisProps, YAxisProps } from "../index"
+import { AxisDomain } from "./types"
+import { AxisRange } from "../state/selectors/axisSelectors"
+import { propsAreEqual } from "./propsAreEqual"
+
+function shortArraysAreEqual(
+	arr1: AxisDomain | AxisRange | undefined,
+	arr2: AxisDomain | AxisRange | undefined,
+): boolean {
+	if (arr1 === arr2) {
+		return true
+	}
+
+	if (Array.isArray(arr1) && arr1.length === 2 && Array.isArray(arr2) && arr2.length === 2) {
+		return arr1[0] === arr2[0] && arr1[1] === arr2[1]
+	}
+
+	return false
+}
+
+/**
+ * Usually we would not compare array props deeply for performance consideration.
+ * However, for axis props, domain is sometimes defined as a two-elements array, and range is always
+ * a two-elements array. So we can do a shallow comparison for the rest props and a shallow
+ * comparison for these two array props.
+ * @param prevProps
+ * @param nextProps
+ */
+export function axisPropsAreEqual<T extends YAxisProps | XAxisProps>(
+	prevProps: T,
+	nextProps: T,
+): boolean {
+	if (prevProps === nextProps) {
+		return true
+	}
+	const { domain: prevDomain, range: prevRange, ...prevRest } = prevProps
+	const { domain: nextDomain, range: nextRange, ...nextRest } = nextProps
+
+	if (!shortArraysAreEqual(prevDomain, nextDomain)) {
+		return false
+	}
+
+	if (!shortArraysAreEqual(prevRange, nextRange)) {
+		return false
+	}
+
+	return propsAreEqual(prevRest, nextRest)
+}