@solidports/recharts 0.1.0 → 0.1.1

package/src/util/payload/getUniqPayload.ts

@@ -1,28 +0,0 @@
-import uniqBy from "es-toolkit/compat/uniqBy"
-
-type UniqueFunc<T> = (entry: T) => unknown
-
-/**
- * This is configuration option that decides how to filter for unique values only:
- *
- * - `false` means "no filter"
- * - `true` means "use recharts default filter"
- * - function means "use return of this function as the default key"
- */
-export type UniqueOption<T> = boolean | UniqueFunc<T>
-
-export function getUniqPayload<T>(
-	payload: ReadonlyArray<T>,
-	option: UniqueOption<T> | undefined,
-	defaultUniqBy: UniqueFunc<T>,
-): ReadonlyArray<T> {
-	if (option === true) {
-		return uniqBy(payload, defaultUniqBy)
-	}
-
-	if (typeof option === "function") {
-		return uniqBy(payload, option)
-	}
-
-	return payload
-}

package/src/util/propsAreEqual.ts

@@ -1,121 +0,0 @@
-const propsToShallowCompare = new Set<string>([
-	"axisLine",
-	"tickLine",
-	"activeBar",
-	"activeDot",
-	"activeLabel",
-	"activeShape",
-	"allowEscapeViewBox",
-	"background",
-	"cursor",
-	"dot",
-	"label",
-	"line",
-	"margin",
-	"padding",
-	"position",
-	"shape",
-	"style",
-	"tick",
-	"wrapperStyle",
-	/* radius can be an array of 4 numbers, easy to compare shallowly */
-	"radius",
-	"throttledEvents",
-])
-
-/**
- * Shallow equality check for objects (one level deep).
- * Replacement for react-redux shallowEqual.
- */
-export function shallowEqual(a: unknown, b: unknown): boolean {
-	if (Object.is(a, b)) {
-		return true
-	}
-	if (typeof a !== "object" || a === null || typeof b !== "object" || b === null) {
-		return false
-	}
-	const keysA = Object.keys(a)
-	const keysB = Object.keys(b)
-	if (keysA.length !== keysB.length) {
-		return false
-	}
-	for (const key of keysA) {
-		if (
-			!Object.prototype.hasOwnProperty.call(b, key) ||
-			!Object.is((a as Record<string, unknown>)[key], (b as Record<string, unknown>)[key])
-		) {
-			return false
-		}
-	}
-	return true
-}
-
-/**
- * When comparing two values, returns true if they are the same value or
- * are both NaN.
- *
- * If we used just a simple triple equals, we would get false negatives for two NaNs
- * which could cause extra re-renders so let's have this instead.
- *
- * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Equality_comparisons_and_sameness#same-value-zero_equality
- *
- * @param x first value to compare
- * @param y second value to compare
- * return true if the same, false if different
- */
-function sameValueZero(x: unknown, y: unknown): boolean {
-	if (x == null && y == null) {
-		/*
-		 * treat null and undefined as equal. Internally in Recharts we make no difference between these two
-		 * so there is no need to re-render.
-		 */
-		return true
-	}
-	if (typeof x === "number" && typeof y === "number") {
-		/* x and y are equal (this is true for -0 and 0) or they are both NaN */
-		return x === y || (x !== x && y !== y)
-	}
-	return x === y
-}
-
-/**
- * So usually React would compare only the first level of props using Object.is.
- * However, in our case many props are objects or arrays, and our own docs recommend to do that!
- * Therefore, we need a custom comparison function that does a shallow comparison of each prop value.
- *
- * Because charts can and do receive large props (typically the data array),
- * we only limit this to a subset of known props that are likely to be objects/arrays.
- *
- * @param prevProps
- * @param nextProps
- */
-export function propsAreEqual<T extends Record<string, unknown>>(
-	prevProps: T,
-	nextProps: T,
-): boolean {
-	const allKeys = new Set<string>([...Object.keys(prevProps), ...Object.keys(nextProps)])
-	for (const key of allKeys) {
-		/*
-		 * If a key is on a special allowlist, go one level deeper
-		 * and do a shallow comparison of the values.
-		 */
-		if (propsToShallowCompare.has(key)) {
-			if (prevProps[key] == null && nextProps[key] == null) {
-				/*
-				 * treat null and undefined as equal. Internally in Recharts we make no difference between these two
-				 * so there is no need to re-render.
-				 */
-				continue
-			}
-			if (!shallowEqual(prevProps[key], nextProps[key])) {
-				return false
-			}
-			/*
-			 * Otherwise do a simple same-value comparison (with NaN support).
-			 */
-		} else if (!sameValueZero(prevProps[key], nextProps[key])) {
-			return false
-		}
-	}
-	return true
-}

package/src/util/resolveDefaultProps.ts

@@ -1,161 +0,0 @@
-import type { JSX } from '@solidjs/web';
-import { untrack } from 'solid-js';
-import { mergeProps } from './solid-1-compat';
-import { ownStringKeys } from './svgPropertiesNoEvents';
-/**
- * Solid-aware analogue of upstream React's defaultProps + spread pattern.
- *
- * Upstream React re-runs the component on every parent re-render, so a plain
- * `{...realProps}` spread is fine — a new resolved object is built each pass.
- * In Solid the component body runs ONCE and `realProps` is a lazy proxy whose
- * field getters back-propagate to upstream signals. A naive `{...realProps}`
- * spread eagerly invokes every getter and freezes the values at mount; downstream
- * computations never re-fire when upstream changes (verified: chart-offset legend
- * reflow lands but axis-line `<line>` y attrs stayed stale at the pre-reflow value).
- *
- * The visual debug fix moved to `mergeProps(defaults, realProps)` to restore that
- * reactivity, but a lazy proxy hits two further hazards in this codebase:
- *
- *   1. `children` re-evaluation. The Solid JSX `<Label/>` lives behind a getter on
- *      the parent's props proxy. Reading `realProps.children` re-invokes the getter
- *      and produces a NEW Label instance every read; downstream `{...props}`
- *      spreads enumerate keys and each spread re-reads children, ballooning into
- *      orphan DOM (regressed YAxis label test: 15× duplicate `<text>`).
- *
- *   2. Iteration order. `mergeProps` enumerates default keys first, so a downstream
- *      `{...resolved}` spread emits user-supplied keys AFTER defaults — flipping
- *      attribute order on `<path>` (regressed Pie inactive-shape test asserts on
- *      `getAttributeNames()` order).
- *
- * Strategy: build a plain object whose own-keys list mirrors realProps first then
- * defaults (matches upstream React `{...realProps}` order), back every key with a
- * getter that re-reads realProps lazily so reactivity is preserved, and snapshot
- * `children` ONCE up front so JSX-as-child doesn't multiply.
- */
-export function resolveDefaultProps<T, D extends Partial<T>>(
-	realProps: T,
-	defaultProps: D & DisallowExtraKeys<T, D>,
-): RequiresDefaultProps<T, D> {
-	/* Key enumeration is structural (which props were passed). Solid 2 treats
-	   Object.keys / `in` on a props or store proxy as a reactive read, and this
-	   helper runs in the component body. Snapshot once; value getters stay live. */
-	const realKeys: ReadonlyArray<string> = untrack(() =>
-		/* ownStringKeys: Object.keys on a props proxy pays a descriptor trap per key. */
-		isNonNullObject(realProps) ? ownStringKeys(realProps as object) : [],
-	)
-	const realKeySet = new Set(realKeys)
-	const defaultKeys = Object.keys(defaultProps as object).filter((k) => !realKeySet.has(k))
-	const orderedKeys = [...realKeys, ...defaultKeys]
-
-	/* Element children (`<Label/>` lives behind a Solid getter that mints a fresh component
-	   on each read) are read once, lazily, so they stay stable across downstream
-	   `{...props}` spreads and are instantiated where the children are placed, under that
-	   position's context providers. Primitive children (text from an expression such as
-	   `{format(props.index)}`) carry no component and stay live: every read re-runs the
-	   getter so the text tracks its inputs. */
-	const realPropsHasChildren = untrack(
-		() =>
-			realProps != null && typeof realProps === "object" && "children" in (realProps as object),
-	)
-	let childrenMode: "unknown" | "primitive" | "element" = "unknown"
-	let childrenSnapshot: JSX.Element | undefined
-	const readChildren = (): JSX.Element | undefined => {
-		if (childrenMode === "element") {
-			return childrenSnapshot
-		}
-		const value = (realProps as unknown as { children: JSX.Element }).children
-		if (childrenMode === "unknown") {
-			childrenMode = isPrimitiveChild(value) ? "primitive" : "element"
-			childrenSnapshot = value
-		}
-		return value
-	}
-
-	const target: Record<string, unknown> = {}
-	const overrides: Record<string, unknown> = {}
-	let hasOverride = false
-	for (const key of orderedKeys) {
-		Object.defineProperty(target, key, {
-			configurable: true,
-			enumerable: true,
-			get() {
-				if (hasOverride && key in overrides) {
-					return overrides[key]
-				}
-				if (key === "children" && realPropsHasChildren) {
-					return readChildren()
-				}
-				if (isNonNullObject(realProps)) {
-					const v = (realProps as Record<string, unknown>)[key]
-					if (v !== undefined) {
-						return v
-					}
-				}
-				return (defaultProps as Record<string, unknown>)[key]
-			},
-			/* Solid's ref assignment + downstream local-prop mutation paths write through
-			   to the resolved object. Capture writes in an overrides bag so the getters
-			   keep their reactive read paths but writers can stash refs/event handlers. */
-			set(value: unknown) {
-				hasOverride = true
-				overrides[key] = value
-			},
-		})
-	}
-	return target as RequiresDefaultProps<T, D>
-}
-
-function isPrimitiveChild(value: unknown): boolean {
-	return value == null || typeof value === "string" || typeof value === "number" || typeof value === "boolean"
-}
-
-function isNonNullObject(value: unknown): value is Record<string, unknown> {
-	return value != null && typeof value === "object"
-}
-
-/* Re-export so callers that need a $PROXY-bearing proxy (e.g. `<Dynamic>` spreads)
-   can opt in. Default consumers prefer the ordered target above. */
-export { mergeProps }
-
-/**
- * Helper type to extract the keys of T that are required.
- * It iterates through each key K in T. If Pick<T, K> cannot be assigned an empty object {},
- * it means K is required, so we keep K; otherwise, we discard it (never).
- * [keyof T] at the end creates a union of the kept keys.
- */
-export type RequiredKeys<T> = {
-	[K in keyof T]-?: object extends Pick<T, K> ? never : K
-}[keyof T]
-
-/**
- * Helper type to extract the keys of T that are optional.
- * It iterates through each key K in T. If Pick<T, K> can be assigned an empty object {},
- * it means K is optional (or potentially missing), so we keep K; otherwise, we discard it (never).
- * [keyof T] at the end creates a union of the kept keys.
- */
-export type OptionalKeys<T> = {
-	[K in keyof T]-?: object extends Pick<T, K> ? K : never
-}[keyof T]
-
-/**
- * Helper type to ensure keys of D exist in T.
- * For each key K in D, if K is also a key of T, keep the type D[K].
- * If K is NOT a key of T, map it to type `never`.
- * An object cannot have a property of type `never`, effectively disallowing extra keys.
- */
-export type DisallowExtraKeys<T, D> = { [K in keyof D]: K extends keyof T ? D[K] : never }
-
-/**
- * This type will take a source type `Props` and a default type `Defaults` and will return a new type
- * where all properties that are optional in `Props` but required in `Defaults` are made required in the result.
- * Properties that are required in `Props` and optional in `Defaults` will remain required.
- * Properties that are optional in both `Props` and `Defaults` will remain optional.
- *
- * This is useful for creating a type that represents the resolved props of a component with default props.
- */
-export type RequiresDefaultProps<Props, Defaults extends Partial<Props>> = Pick<
-	Props,
-	RequiredKeys<Props>
-> &
-	Required<Pick<Props, Extract<OptionalKeys<Props>, RequiredKeys<Defaults>>>> &
-	Pick<Props, Exclude<OptionalKeys<Props>, keyof Defaults>>

package/src/util/round.ts

@@ -1,32 +0,0 @@
-/* if you go lower than 3, wild wild things happen during rendering */
-const defaultRoundPrecision = 4
-
-export function round(num: number, roundPrecision: number = defaultRoundPrecision): number {
-	const factor = 10 ** roundPrecision
-	const rounded = Math.round(num * factor) / factor
-	if (Object.is(rounded, -0)) {
-		return 0
-	}
-	return rounded
-}
-
-/**
- * This function will accept a string template literal and for each
- * variable placeholder, it will round the value to avoid long float numbers in
- * the SVG path which might cause rendering issues in some browsers.
- */
-export function roundTemplateLiteral(
-	strings: TemplateStringsArray,
-	...values: ReadonlyArray<number | string>
-) {
-	return strings.reduce((result, string, i) => {
-		const value = values[i - 1]
-		if (typeof value === "string") {
-			return result + value + string
-		}
-		if (value !== undefined) {
-			return result + round(value) + string
-		}
-		return result + string
-	}, "")
-}

package/src/util/scale/CartesianScaleHelper.ts

@@ -1,72 +0,0 @@
-/* eslint-disable import/no-cycle */
-import { BandPosition, RechartsScale } from "./RechartsScale"
-import { CategoricalDomainItem, Coordinate, NullableCoordinate } from "../types"
-
-export interface CartesianScaleHelper<
-	XDomain extends CategoricalDomainItem = CategoricalDomainItem,
-	YDomain extends CategoricalDomainItem = CategoricalDomainItem,
-> {
-	map(value: { x: XDomain; y: YDomain }, { position }: { position: BandPosition }): Coordinate
-
-	mapWithFallback(
-		value: { x?: XDomain | null | undefined; y?: YDomain | null | undefined },
-		{ position, fallback }: { position?: BandPosition; fallback: "rangeMin" | "rangeMax" },
-	): Coordinate
-
-	isInRange({ x, y }: Partial<NullableCoordinate>): boolean
-}
-
-/**
- * Groups X and Y scale functions together and provides helper methods.
- */
-export class CartesianScaleHelperImpl<
-	XDomain extends CategoricalDomainItem = CategoricalDomainItem,
-	YDomain extends CategoricalDomainItem = CategoricalDomainItem,
-> implements CartesianScaleHelper<XDomain, YDomain> {
-	private xAxisScale: RechartsScale<XDomain>
-
-	private yAxisScale: RechartsScale<YDomain>
-
-	constructor({ x, y }: { x: RechartsScale<XDomain>; y: RechartsScale<YDomain> }) {
-		this.xAxisScale = x
-		this.yAxisScale = y
-	}
-
-	map(value: { x: XDomain; y: YDomain }, { position }: { position: BandPosition }): Coordinate {
-		return {
-			x: this.xAxisScale.map(value.x, { position }) ?? 0,
-			y: this.yAxisScale.map(value.y, { position }) ?? 0,
-		}
-	}
-
-	mapWithFallback(
-		value: { x?: XDomain | null | undefined; y?: YDomain | null | undefined },
-		{ position, fallback }: { position?: BandPosition; fallback: "rangeMin" | "rangeMax" },
-	): Coordinate {
-		let fallbackY: number, fallbackX: number
-		if (fallback === "rangeMin") {
-			fallbackY = this.yAxisScale.rangeMin()
-		} else if (fallback === "rangeMax") {
-			fallbackY = this.yAxisScale.rangeMax()
-		} else {
-			fallbackY = 0
-		}
-		if (fallback === "rangeMin") {
-			fallbackX = this.xAxisScale.rangeMin()
-		} else if (fallback === "rangeMax") {
-			fallbackX = this.xAxisScale.rangeMax()
-		} else {
-			fallbackX = 0
-		}
-		return {
-			x: this.xAxisScale.map(value.x, { position }) ?? fallbackX,
-			y: this.yAxisScale.map(value.y, { position }) ?? fallbackY,
-		}
-	}
-
-	isInRange({ x, y }: Partial<NullableCoordinate>): boolean {
-		const xInRange = x == null || this.xAxisScale.isInRange(x)
-		const yInRange = y == null || this.yAxisScale.isInRange(y)
-		return xInRange && yInRange
-	}
-}

package/src/util/scale/CustomScaleDefinition.ts

@@ -1,81 +0,0 @@
-import type { CategoricalDomainItem } from "../types"
-
-/**
- * A subset of d3-scale. This is the external representation;
- * This is the type that we expect from `axis.scale` props, if users want to provide custom scales.
- *
- * The actual d3 scales have many more methods, but we don't need them all.
- * Specifically we want to avoid all the setters
- * - immutable API is preferred in Recharts and mutating state will lead to hard-to-debug issues.
- *
- * @see {@link ScaleType} and {@link D3ScaleType} for string shortcuts that you can use instead of this interface.
- */
-export interface CustomScaleDefinition<
-	Domain extends CategoricalDomainItem = CategoricalDomainItem,
-> {
-	/**
-	 * Returns the scale's current domain.
-	 * The domain could be:
-	 * - in categorical scales: an array of strings or categories
-	 * - in continuous scales: tuple of two numbers: [min, max]
-	 */
-	domain(): ReadonlyArray<Domain>
-
-	/**
-	 * Sets the domain of the scale.
-	 */
-	domain(newDomain: ReadonlyArray<Domain>): this
-
-	/**
-	 * Returns the scale's current range.
-	 */
-	range(): ReadonlyArray<number>
-
-	/**
-	 * Sets the range of the scale.
-	 */
-	range(newRange: ReadonlyArray<number>): this
-
-	/**
-	 * Returns an exact copy of this scale. Changes to this scale will not affect the returned scale, and vice versa.
-	 * We use this method in Recharts to ensure immutability - changes to the scale outside should not affect the internal state,
-	 * as they won't trigger re-renders in React.
-	 */
-	copy(): CustomScaleDefinition<Domain>
-
-	/**
-	 * Returns width of each band.
-	 * Most scales are not banded, so this method is optional.
-	 * Banded scales (like scaleBand from d3-scale) will implement this method.
-	 */
-	bandwidth?: () => number
-	/**
-	 * Quantitative (continuous) scales provide a ticks method that returns representative values from the scale's domain.
-	 * Ordinal and band scales do not have this method.
-	 *
-	 * An optional count argument requests more or fewer ticks.
-	 * The number of ticks returned, however, is not necessarily equal to the requested count.
-	 *
-	 * @see {@link https://d3js.org/d3-scale/linear#linear_ticks}
-	 * @see {@link https://observablehq.com/@d3/scale-ticks}
-	 *
-	 * @param count number of ticks
-	 */
-	ticks?: (count: number | undefined) => ReadonlyArray<number>
-
-	/**
-	 * Given an arbitrary input, returns the corresponding point derived from the output range if the input is in the scale's domain.
-	 * If the input is not included in the domain, returns undefined.
-	 *
-	 * @param input
-	 */
-	(input: Domain): number | undefined
-
-	/**
-	 * Given a value from the range, returns the corresponding value from the domain.
-	 *
-	 * This method is optional, as not all scales provide an inverse mapping.
-	 * Linear and time scales typically do, while band and ordinal scales may not.
-	 */
-	invert?(value: number): Domain | undefined
-}

package/src/util/scale/RechartsScale.ts

@@ -1,130 +0,0 @@
-/* eslint-disable import/no-cycle */
-import { CustomScaleDefinition } from "./CustomScaleDefinition"
-import { CategoricalDomainItem } from "../types"
-
-/**
- * This is internal representation of scale used in Recharts.
- * Users will provide CustomScaleDefinition or a string, which we will parse into RechartsScale.
- * Most importantly, RechartsScale is fully immutable - there are no setters that mutate the scale in place.
- * This is important for Solid integration - if the scale changes, we want to trigger re-renders.
- * Mutating the scale in place would not trigger re-renders, leading to stale UI.
- */
-export interface RechartsScale<Domain extends CategoricalDomainItem = CategoricalDomainItem> {
-	/**
-	 * Returns the scale's current domain.
-	 * The domain could be:
-	 * - in categorical scales: an array of strings or categories
-	 * - in continuous scales: tuple of two numbers: [min, max]
-	 */
-	domain(): ReadonlyArray<Domain>
-
-	/**
-	 * Returns the scale's current range.
-	 *
-	 * This should be a readonly tuple of two numbers: [min, max]
-	 * and so a better type would be `readonly [number, number]` but again - breaking changes,
-	 * so let's keep that for 4.0.
-	 */
-	range(): ReadonlyArray<number>
-
-	/**
-	 * Returns the minimum value from the range.
-	 */
-	rangeMin(): number
-
-	/**
-	 * Returns the maximum value from the range.
-	 */
-	rangeMax(): number
-
-	/**
-	 * Returns true if the given value is within the scale's range.
-	 * @param value
-	 */
-	isInRange(value: number): boolean
-
-	/**
-	 * Returns width of each band.
-	 * Most scales are not banded, so this method is optional.
-	 * Banded scales (like scaleBand from d3-scale) will implement this method.
-	 */
-	bandwidth?: () => number
-	/**
-	 * Quantitative (continuous) scales provide a ticks method that returns representative values from the scale's domain.
-	 * Ordinal and band scales do not have this method.
-	 *
-	 * An optional count argument requests more or fewer ticks.
-	 * The number of ticks returned, however, is not necessarily equal to the requested count.
-	 *
-	 * @see {@link https://d3js.org/d3-scale/linear#linear_ticks}
-	 * @see {@link https://observablehq.com/@d3/scale-ticks}
-	 *
-	 * @param count number of ticks
-	 */
-	ticks?: (count: number | undefined) => ReadonlyArray<number>
-
-	/**
-	 * Given an arbitrary input, returns the corresponding point derived from the output range if the input is in the scale's domain.
-	 * If the input is not included in the domain, returns undefined.
-	 */
-	map(input: unknown, options?: { position?: BandPosition }): number | undefined
-}
-
-/**
- * Position within a band for banded scales.
- * In scales that are not banded, this parameter is ignored.
- *
- * @inline
- */
-export type BandPosition = "start" | "middle" | "end"
-
-export function rechartsScaleFactory<Domain extends CategoricalDomainItem = CategoricalDomainItem>(
-	d3Scale: CustomScaleDefinition<Domain>,
-): RechartsScale<Domain>
-export function rechartsScaleFactory<Domain extends CategoricalDomainItem = CategoricalDomainItem>(
-	d3Scale: CustomScaleDefinition<Domain> | undefined,
-): RechartsScale<Domain> | undefined
-export function rechartsScaleFactory<Domain extends CategoricalDomainItem = CategoricalDomainItem>(
-	d3Scale: CustomScaleDefinition<Domain> | undefined,
-): RechartsScale<Domain> | undefined {
-	if (d3Scale == null) {
-		return undefined
-	}
-	const ticksFn = d3Scale.ticks
-	const bandwidthFn = d3Scale.bandwidth
-	const d3Range: ReadonlyArray<number> = d3Scale.range()
-	const range: [number, number] = [Math.min(...d3Range), Math.max(...d3Range)]
-	return {
-		bandwidth: bandwidthFn ? () => bandwidthFn.call(d3Scale) : undefined,
-		domain: () => d3Scale.domain(),
-		isInRange(value: number): boolean {
-			const first = range[0]
-			const last = range[1]
-			return first <= last ? value >= first && value <= last : value >= last && value <= first
-		},
-		map: (input: Domain, options?: { position?: BandPosition }) => {
-			let baseValue = d3Scale(input)
-			if (baseValue == null) {
-				return undefined
-			}
-			if (d3Scale.bandwidth && options?.position) {
-				const bandWidth = d3Scale.bandwidth()
-				switch (options.position) {
-					case "middle":
-						baseValue += bandWidth / 2
-						break
-					case "end":
-						baseValue += bandWidth
-						break
-					default:
-						break
-				}
-			}
-			return baseValue
-		},
-		range: () => range,
-		rangeMax: () => range[1],
-		rangeMin: () => range[0],
-		ticks: ticksFn ? (count: number | undefined) => ticksFn.call(d3Scale, count) : undefined,
-	}
-}