@solidports/recharts 0.1.0

package/src/util/solid-1-compat.ts

@@ -0,0 +1,310 @@
+import {
+	createStore as createStore2,
+	omit,
+	untrack,
+	type Accessor,
+	type Store,
+	type StoreSetter,
+} from "solid-js"
+import { storePath } from "@solidjs/signals"
+
+type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (
+	k: infer I,
+) => void
+	? I
+	: never
+
+type MergePropsResult<T extends unknown[]> = UnionToIntersection<
+	Exclude<T[number], null | undefined>
+>
+
+/**
+ * Solid 2 compiles `ref={props.ref}` to `props.ref = el` when the value is not a
+ * function. Getter-only merge/split views throw; keep a local override bag.
+ */
+function defineWritableProp(
+	target: object,
+	key: PropertyKey,
+	getValue: () => unknown,
+	overrides: Record<PropertyKey, unknown>,
+) {
+	Object.defineProperty(target, key, {
+		enumerable: true,
+		configurable: true,
+		get() {
+			return Object.prototype.hasOwnProperty.call(overrides, key)
+				? overrides[key]
+				: getValue()
+		},
+		set(value: unknown) {
+			overrides[key] = value
+		},
+	})
+}
+
+/**
+ * Call a Solid 2 ref without assigning onto getter-only merge/split props.
+ */
+export function bindRef<T>(ref: unknown, el: T): void {
+	if (typeof ref === "function") {
+		;(ref as (node: T) => void)(el)
+		return
+	}
+	if (Array.isArray(ref)) {
+		for (const item of ref) bindRef(item, el)
+	}
+}
+
+/**
+ * Solid 1.x mergeProps: later sources win, `undefined` is skipped.
+ * Solid 2 `merge` treats `undefined` as a real override.
+ */
+export function mergeProps<T extends (object | null | undefined)[]>(
+	...sources: T
+): MergePropsResult<T> {
+	const keys = new Set<string>()
+	untrack(() => {
+		for (const source of sources) {
+			if (!source) continue
+			/* Reflect.ownKeys: Object.keys on a props/merge proxy pays a descriptor trap per
+			   key, and this runs per element for every shape. Props views expose only
+			   enumerable string keys, so the key set is the same. */
+			for (const key of Reflect.ownKeys(source)) {
+				if (typeof key === "string") keys.add(key)
+			}
+		}
+	})
+	const overrides: Record<PropertyKey, unknown> = {}
+	const target: Record<string, unknown> = {}
+	for (const key of keys) {
+		defineWritableProp(
+			target,
+			key,
+			() => {
+				for (let i = sources.length - 1; i >= 0; i--) {
+					const source = sources[i]
+					if (!source) continue
+					const value = (source as Record<string, unknown>)[key]
+					if (value !== undefined) return value
+				}
+			},
+			overrides,
+		)
+	}
+	return target as MergePropsResult<T>
+}
+
+function pickProps<T extends object>(props: T, keys: readonly (keyof T)[]) {
+	const picked: Partial<T> = {}
+	const overrides: Record<PropertyKey, unknown> = {}
+	for (const key of keys) {
+		defineWritableProp(picked, key, () => props[key], overrides)
+	}
+	return picked as Pick<T, (typeof keys)[number]>
+}
+
+export type SplitProps<T, K extends (readonly (keyof T)[])[]> = [
+	...{
+		[P in keyof K]: P extends `${number}`
+			? Pick<T, Extract<K[P], readonly (keyof T)[]>[number]>
+			: never
+	},
+	Omit<T, K[number][number]>,
+]
+
+/**
+ * Solid 1.x splitProps: returns `[...pickedGroups, rest]`.
+ */
+export function splitProps<T extends object, const K extends (readonly (keyof T)[])[]>(
+	props: T,
+	...groups: K
+): SplitProps<T, K> {
+	return untrack(() => {
+		const claimed = new Set<PropertyKey>()
+		const result: unknown[] = []
+		for (const group of groups) {
+			const owned = group.filter((key) => {
+				if (claimed.has(key)) return false
+				claimed.add(key)
+				return true
+			})
+			result.push(pickProps(props, owned))
+		}
+		result.push(omit(props, ...(claimed as unknown as (keyof T)[])))
+		return result as SplitProps<T, K>
+	})
+}
+
+type AccessorValue<A> = A extends () => infer V ? V : A
+type OnDepsValue<D> = D extends readonly unknown[]
+	? { [K in keyof D]: AccessorValue<D[K]> }
+	: AccessorValue<D>
+
+type EffectApply<T> = (value: T, prev?: T) => void | (() => void)
+
+/**
+ * Solid 1.x `on()` as a 2.0 `createEffect(...on(deps, fn))` spread.
+ */
+export function on<const D extends Accessor<unknown> | readonly Accessor<unknown>[]>(
+	deps: D,
+	fn: EffectApply<OnDepsValue<D>>,
+	options: { defer?: boolean },
+): [() => OnDepsValue<D>, EffectApply<OnDepsValue<D>>, { defer?: boolean }]
+export function on<const D extends Accessor<unknown> | readonly Accessor<unknown>[]>(
+	deps: D,
+	fn: EffectApply<OnDepsValue<D>>,
+): [() => OnDepsValue<D>, EffectApply<OnDepsValue<D>>]
+export function on(
+	deps: Accessor<unknown> | readonly Accessor<unknown>[],
+	fn: EffectApply<any>,
+	options?: { defer?: boolean },
+): [() => any, EffectApply<any>, { defer?: boolean }?] {
+	const compute = () => {
+		if (Array.isArray(deps)) {
+			return (deps as readonly Accessor<unknown>[]).map(dep =>
+				typeof dep === "function" ? dep() : dep,
+			)
+		}
+		return (deps as Accessor<unknown>)()
+	}
+	return options ? [compute, fn, options] : [compute, fn]
+}
+
+/** Solid 1.x createSelector. Fine-grained key isolation is not preserved. */
+export function createSelector<T, U>(
+	source: Accessor<T>,
+	fn: (a: T, b: U) => boolean = (a, b) => a === (b as unknown as T),
+): (key: U) => boolean {
+	return (key: U) => fn(source(), key)
+}
+
+type PathValue<T> = T | Partial<T> | ((prev: T) => T | Partial<T> | void)
+type At<T, K> = K extends keyof NonNullable<T> ? NonNullable<T>[K] : never
+
+/** 1.x path-style store setter. Solid 2 `StoreSetter` is draft-only. */
+export interface SetStoreFunction<T> {
+	(setter: (draft: T) => void): void
+	<K1 extends keyof T>(k1: K1, value: PathValue<T[K1]>): void
+	<K1 extends keyof T, K2 extends keyof NonNullable<T[K1]>>(
+		k1: K1,
+		k2: K2,
+		value: PathValue<At<T[K1], K2>>,
+	): void
+	<K1 extends keyof T, K2 extends keyof NonNullable<T[K1]>, K3 extends keyof NonNullable<At<T[K1], K2>>>(
+		k1: K1,
+		k2: K2,
+		k3: K3,
+		value: PathValue<At<At<T[K1], K2>, K3>>,
+	): void
+	<
+		K1 extends keyof T,
+		K2 extends keyof NonNullable<T[K1]>,
+		K3 extends keyof NonNullable<At<T[K1], K2>>,
+		K4 extends keyof NonNullable<At<At<T[K1], K2>, K3>>,
+	>(
+		k1: K1,
+		k2: K2,
+		k3: K3,
+		k4: K4,
+		value: PathValue<At<At<At<T[K1], K2>, K3>, K4>>,
+	): void
+	<
+		K1 extends keyof T,
+		K2 extends keyof NonNullable<T[K1]>,
+		K3 extends keyof NonNullable<At<T[K1], K2>>,
+		K4 extends keyof NonNullable<At<At<T[K1], K2>, K3>>,
+		K5 extends keyof NonNullable<At<At<At<T[K1], K2>, K3>, K4>>,
+	>(
+		k1: K1,
+		k2: K2,
+		k3: K3,
+		k4: K4,
+		k5: K5,
+		value: PathValue<At<At<At<At<T[K1], K2>, K3>, K4>, K5>>,
+	): void
+	<
+		K1 extends keyof T,
+		K2 extends keyof NonNullable<T[K1]>,
+		K3 extends keyof NonNullable<At<T[K1], K2>>,
+		K4 extends keyof NonNullable<At<At<T[K1], K2>, K3>>,
+		K5 extends keyof NonNullable<At<At<At<T[K1], K2>, K3>, K4>>,
+		K6 extends keyof NonNullable<At<At<At<At<T[K1], K2>, K3>, K4>, K5>>,
+	>(
+		k1: K1,
+		k2: K2,
+		k3: K3,
+		k4: K4,
+		k5: K5,
+		k6: K6,
+		value: PathValue<At<At<At<At<At<T[K1], K2>, K3>, K4>, K5>, K6>>,
+	): void
+}
+
+function pathHasFilter(args: unknown[]): boolean {
+	return args.some(
+		arg =>
+			typeof arg === "function" ||
+			(arg !== null &&
+				typeof arg === "object" &&
+				!Array.isArray(arg) &&
+				("from" in (arg as object) ||
+					"to" in (arg as object) ||
+					"by" in (arg as object))),
+	)
+}
+
+function applyPath(set: StoreSetter<any>, args: any[]) {
+	if (args.length === 0) return
+	if (args.length === 1) {
+		const arg = args[0]
+		if (typeof arg === "function") {
+			set(arg)
+			return
+		}
+		if (arg && typeof arg === "object" && !Array.isArray(arg)) {
+			set((draft: any) => {
+				Object.assign(draft, arg)
+			})
+			return
+		}
+		set(storePath(arg as never) as never)
+		return
+	}
+
+	const last = args[args.length - 1]
+	const path = args.slice(0, -1)
+
+	if (typeof last === "function" && !pathHasFilter(path)) {
+		set((draft: any) => {
+			let parent = draft
+			for (let i = 0; i < path.length; i++) {
+				const key = path[i]
+				if (i === path.length - 1) {
+					const current = parent[key]
+					const result = last(current)
+					if (result !== undefined) parent[key] = result
+					return
+				}
+				parent = parent[key]
+			}
+		})
+		return
+	}
+
+	set((storePath as any)(...args))
+}
+
+/**
+ * Solid 1.x `createStore` with path setters (`set("a", "b", value)`).
+ * Native Solid 2 setters only accept a draft function.
+ */
+export function createStore<T extends object>(
+	initialValue: T,
+	options?: { name?: string; shallow?: boolean },
+): [Store<T>, SetStoreFunction<T>] {
+	const [store, set] = createStore2(initialValue as any, options)
+	const setCompat = ((...args: any[]) => {
+		applyPath(set as unknown as StoreSetter<any>, args)
+	}) as SetStoreFunction<T>
+	return [store, setCompat]
+}

package/src/util/solidJsxCamelAugment.d.ts

@@ -0,0 +1,84 @@
+/*
+ * 1:1 React parity — upstream recharts API uses camelCase SVG attrs
+ * (`fillOpacity`, `strokeWidth`, ...). Solid's `JSX.SvgSVGAttributes` and
+ * the per-element interfaces (`PathSVGAttributes`, `LineSVGAttributes`,
+ * `GSVGAttributes`, etc.) only declare kebab-case. Module-augment the
+ * shared base interfaces so every SVG element shape accepts both forms
+ * at the type level. Runtime rekeys camel → kebab via `SVG_CAMEL_TO_KEBAB`
+ * in `svgPropertiesNoEvents.ts`.
+ *
+ * Augmenting `ShapeElementSVGAttributes` covers Path/Line/Rect/Circle/Ellipse/Polygon/Polyline.
+ * Augmenting `TextContentElementSVGAttributes` covers `<text>`/`<tspan>`.
+ * Augmenting `StylableSVGAttributes` covers `class` → `className`.
+ * Augmenting `ContainerElementSVGAttributes` covers `<g>` (and any container).
+ */
+
+import type { JSX as SolidJSX } from '@solidjs/web';
+declare module "solid-js" {
+	namespace JSX {
+		interface StylableSVGAttributes {
+			className?: string
+		}
+
+		interface ShapeElementSVGAttributes<T> {
+			fillOpacity?: number | string
+			fillRule?: "nonzero" | "evenodd" | "inherit"
+			strokeDasharray?: string
+			strokeDashoffset?: number | string
+			strokeLinecap?: "butt" | "round" | "square" | "inherit"
+			strokeLinejoin?: "miter" | "round" | "bevel" | "inherit"
+			strokeMiterlimit?: number | string
+			strokeOpacity?: number | string
+			strokeWidth?: number | string
+		}
+
+		interface TextContentElementSVGAttributes<T> {
+			dominantBaseline?: string
+			fillOpacity?: number | string
+			fillRule?: "nonzero" | "evenodd" | "inherit"
+			fontFamily?: string
+			fontSize?: number | string
+			fontStyle?: string
+			fontWeight?: number | string
+			letterSpacing?: number | string
+			strokeDasharray?: string
+			strokeDashoffset?: number | string
+			strokeLinecap?: "butt" | "round" | "square" | "inherit"
+			strokeLinejoin?: "miter" | "round" | "bevel" | "inherit"
+			strokeMiterlimit?: number | string
+			strokeOpacity?: number | string
+			strokeWidth?: number | string
+			textAnchor?: "start" | "middle" | "end" | "inherit"
+			textDecoration?: string
+			wordSpacing?: number | string
+			writingMode?: string
+		}
+
+		interface ContainerElementSVGAttributes<T> {
+			clipPath?: string
+			pointerEvents?: string
+		}
+
+		/* `<svg>` element — inherits via SvgSVGAttributes; covers root chart Surface. */
+		interface SvgSVGAttributes<T> {
+			clipPath?: string
+			fillOpacity?: number | string
+			fillRule?: "nonzero" | "evenodd" | "inherit"
+			pointerEvents?: string
+			strokeDasharray?: string
+			strokeDashoffset?: number | string
+			strokeLinecap?: "butt" | "round" | "square" | "inherit"
+			strokeLinejoin?: "miter" | "round" | "bevel" | "inherit"
+			strokeMiterlimit?: number | string
+			strokeOpacity?: number | string
+			strokeWidth?: number | string
+		}
+	}
+}
+
+/*
+ * Re-export to keep the file referenced when imported solely for side-effect
+ * type augmentation; consumers do `import "@solidports/recharts"` and the
+ * augmentation flows transitively through `src/index.ts`'s reference.
+ */
+export type _SolidJSXCamelAugmentMarker = SolidJSX.Element

package/src/util/stacks/getStackSeriesIdentifier.ts

@@ -0,0 +1,21 @@
+/* eslint-disable import/no-cycle */
+import { StackSeriesIdentifier } from "./stackTypes"
+import { MaybeStackedGraphicalItem } from "../../state/types/StackedGraphicalItem"
+
+export function getStackSeriesIdentifier(
+	graphicalItem: MaybeStackedGraphicalItem,
+): StackSeriesIdentifier
+export function getStackSeriesIdentifier(graphicalItem: undefined): undefined
+export function getStackSeriesIdentifier(
+	graphicalItem: MaybeStackedGraphicalItem | undefined,
+): StackSeriesIdentifier | undefined
+/**
+ * Returns identifier for stack series which is one individual graphical item in the stack.
+ * @param graphicalItem - The graphical item representing the series in the stack.
+ * @return The identifier for the series in the stack
+ */
+export function getStackSeriesIdentifier(
+	graphicalItem: MaybeStackedGraphicalItem | undefined,
+): StackSeriesIdentifier | undefined {
+	return graphicalItem?.id
+}

package/src/util/stacks/stackTypes.ts

@@ -0,0 +1,60 @@
+import type { Series } from "victory-vendor/d3-shape"
+import type { StackId } from "../ChartUtils"
+import type { GraphicalItemId } from "../../state/graphicalItemsSlice"
+import type { MaybeStackedGraphicalItem } from "../../state/types/StackedGraphicalItem"
+
+/*
+ * So chart stacks come in layers:
+ *
+ * - The top layer is the stack itself, which is a collection of series. The stack is identified by the `StackId` of the stack.
+ *   The StackId is defined by the `stackId` prop of the graphical items.
+ *   A typical stacked chart will have a single stack, but Recharts allows for multiple stacks.
+ *
+ * - One stack will have multiple series, which are the individual data series that make up the stack.
+ *   This is the second layer of the stack.
+ *   One series is represented by a single `GraphicalItem` in the stack.
+ *   This function returns the identifier for the series.
+ *
+ * - Finally the third layer is the data point itself, which is a tuple of two numbers.
+ */
+
+/**
+ * Collection of all stacks in the chart.
+ * A simple stacked chart will have a single stack. Recharts allows for multiple stacks.
+ * In a chart without stacks, this will be an empty object.
+ */
+export type AllStackGroups = Record<StackId, StackGroup>
+
+/**
+ * One stack group is a collection of series that are stacked together.
+ * The stack series and graphical items are joined by the StackSeriesIdentifier.
+ */
+export type StackGroup = {
+	readonly graphicalItems: ReadonlyArray<MaybeStackedGraphicalItem>
+	readonly stackedData: ReadonlyArray<StackSeries>
+}
+
+/**
+ * Stack series is a collection of data points. This represents one individual graphical item in the stack.
+ * There are presumably other series in the stack, which are represented by other `StackSeries` objects
+ * that this object will not know about.
+ * The coordinates of the data points in the series already include the baseline of the previous series in the stack.
+ *
+ * The Datum generic is `Record<string, unknown>` because d3 keeps a reference to the original input data
+ * in each SeriesPoint.data property.
+ */
+export type StackSeries = Series<Record<string, unknown>, StackSeriesIdentifier>
+
+/**
+ * Stack data point is a tuple of two numbers:
+ * first, where the previous stack series ended,
+ * and second, where the current stack series ends.
+ * This allows for setting the baseline of the next series in the stack.
+ */
+export type StackDataPoint = [number, number]
+
+/**
+ * Identifier for a series in the stack.
+ * Used to join the stack series with the graphical items in the stack.
+ */
+export type StackSeriesIdentifier = GraphicalItemId

package/src/util/structurallyEqual.ts

@@ -0,0 +1,31 @@
+function isPlainContainer(value: unknown): value is Record<string, unknown> | unknown[] {
+	if (Array.isArray(value)) return true
+	if (value == null || typeof value !== "object") return false
+	const proto = Object.getPrototypeOf(value)
+	return proto === Object.prototype || proto === null
+}
+
+/* Structural equality over plain objects and arrays; anything else (functions, DOM nodes,
+   class instances, Dates) compares by identity. Selectors rebuild nested objects such as
+   `payload` / `tooltipPayload` on every recompute, where upstream's memoized selectors keep
+   the references stable, so identity alone would restart animations needlessly. */
+export function structurallyEqual(a: unknown, b: unknown, depth: number = 0): boolean {
+	if (Object.is(a, b)) return true
+	if (depth > 6 || !isPlainContainer(a) || !isPlainContainer(b)) return false
+	if (Array.isArray(a) !== Array.isArray(b)) return false
+	if (Array.isArray(a) && Array.isArray(b)) {
+		if (a.length !== b.length) return false
+		for (let i = 0; i < a.length; i++) {
+			if (!structurallyEqual(a[i], b[i], depth + 1)) return false
+		}
+		return true
+	}
+	const aRecord = a as Record<string, unknown>
+	const bRecord = b as Record<string, unknown>
+	const aKeys = Object.keys(aRecord)
+	if (aKeys.length !== Object.keys(bRecord).length) return false
+	for (const key of aKeys) {
+		if (!structurallyEqual(aRecord[key], bRecord[key], depth + 1)) return false
+	}
+	return true
+}

package/src/util/svgPropertiesAndEvents.ts

@@ -0,0 +1,53 @@
+import { isEventKey } from "./excludeEventProps"
+import { ownStringKeys, svgPropCanonicalKey } from "./svgPropertiesNoEvents"
+import type { DataAttributeKeyType, SVGElementPropKeysType } from "./svgPropertiesNoEvents"
+import type { EventKeysType } from "./excludeEventProps"
+
+type SVGElementPropsAndEventsType = SVGElementPropKeysType | EventKeysType | DataAttributeKeyType
+
+export type SVGPropsAndEvents<T> = Pick<T, Extract<keyof T, SVGElementPropsAndEventsType>>
+
+/**
+ * Filters an object to only include SVG properties, data attributes, and event handlers.
+ * @param obj - The object to filter.
+ * @returns A new object containing only valid SVG properties, data attributes, and event handlers.
+ */
+export function svgPropertiesAndEvents<T extends object>(obj: T): SVGPropsAndEvents<T> {
+	const result: Record<PropertyKey, unknown> = {}
+	for (const key of ownStringKeys(obj)) {
+		const canonical = svgPropCanonicalKey(key)
+		if (canonical !== undefined) {
+			result[canonical] = (obj as Record<string, unknown>)[key]
+		} else if (isEventKey(key)) {
+			/* Event handler keys (onClick etc.) keep their camelCase — Solid uses
+			 * delegation via the original prop name. */
+			result[key] = (obj as Record<string, unknown>)[key]
+		}
+	}
+	return result as SVGPropsAndEvents<T>
+}
+
+/**
+ * Function to filter SVG properties from various input types.
+ * The input types can be:
+ * - A record of string keys to any values, in which case it returns a record of only SVG properties
+ * - Anything else, in which case it returns null
+ *
+ * This function has a wide-open return type, because it will read and filter the props of an arbitrary element.
+ *
+ * If you wish to have a type-safe version, use svgPropertiesNoEvents directly with a typed object.
+ *
+ * @param input - The input to filter, which can be a record or other types.
+ * @returns A record of SVG properties if the input is a record, otherwise null.
+ */
+export function svgPropertiesAndEventsFromUnknown(input: unknown): Record<string, unknown> | null {
+	if (input == null) {
+		return null
+	}
+
+	if (typeof input === "object" && !Array.isArray(input)) {
+		return svgPropertiesAndEvents(input as Record<PropertyKey, unknown>)
+	}
+
+	return null
+}