@solidports/recharts 0.1.0 → 0.1.1

package/src/util/ReactUtils.ts

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

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

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

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

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

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

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

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