@solidports/recharts 0.1.0

package/src/chart/createInitialRootProps.ts

@@ -0,0 +1,24 @@
+/* eslint-disable import/no-cycle */
+import type { UpdatableChartOptions } from "../state/rootPropsSlice"
+import { initialRootPropsState } from "../state/rootPropsSlice"
+
+const rootPropKeys = Object.keys(initialRootPropsState) as ReadonlyArray<keyof UpdatableChartOptions>
+
+/**
+ * Seeds `rootProps` at store creation so the first render already sees the chart's options
+ * (ReportChartProps keeps them in sync afterwards). Call untracked; reads only option keys,
+ * never `children`.
+ */
+export function createInitialRootProps(
+	chartProps: Partial<Record<keyof UpdatableChartOptions, unknown>>,
+): UpdatableChartOptions {
+	const result: Record<string, unknown> = { ...initialRootPropsState }
+	for (const key of rootPropKeys) {
+		/* eslint-disable-next-line solid/reactivity -- seed snapshot, called untracked at store creation */
+		const value = chartProps[key]
+		if (value !== undefined) {
+			result[key] = value
+		}
+	}
+	return result as UpdatableChartOptions
+}

package/src/chart/types.ts

@@ -0,0 +1,53 @@
+/* eslint-disable import/no-cycle */
+import { MouseHandlerDataParam } from "../synchronisation/types"
+
+export type TooltipTrigger = "hover" | "click"
+
+export type CategoricalChartFunc<E = Event> = (nextState: MouseHandlerDataParam, event: E) => void
+
+export interface ExternalMouseEvents {
+	/**
+	 * The customized event handler of click in this chart.
+	 */
+	onClick?: CategoricalChartFunc<MouseEvent>
+	/**
+	 * The customized event handler of mouseleave in this chart.
+	 */
+	onMouseLeave?: CategoricalChartFunc<MouseEvent>
+	/**
+	 * The customized event handler of mouseenter in this chart.
+	 */
+	onMouseEnter?: CategoricalChartFunc<MouseEvent>
+	/**
+	 * The customized event handler of mousemove in this chart.
+	 */
+	onMouseMove?: CategoricalChartFunc<MouseEvent>
+	/**
+	 * The customized event handler of mousedown in this chart.
+	 */
+	onMouseDown?: CategoricalChartFunc<MouseEvent>
+	/**
+	 * The customized event handler of mouseup in this chart.
+	 */
+	onMouseUp?: CategoricalChartFunc<MouseEvent>
+	/**
+	 * The customized event handler of contextmenu in this chart.
+	 */
+	onContextMenu?: CategoricalChartFunc<MouseEvent>
+	/**
+	 * The customized event handler of dblclick in this chart.
+	 */
+	onDoubleClick?: CategoricalChartFunc<MouseEvent>
+	/**
+	 * The customized event handler of touchstart in this chart.
+	 */
+	onTouchStart?: CategoricalChartFunc<TouchEvent>
+	/**
+	 * The customized event handler of touchmove in this chart.
+	 */
+	onTouchMove?: CategoricalChartFunc<TouchEvent>
+	/**
+	 * The customized event handler of touchend in this chart.
+	 */
+	onTouchEnd?: CategoricalChartFunc<TouchEvent>
+}

package/src/component/ActivePoints.tsx

@@ -0,0 +1,144 @@
+/* eslint-disable import/no-cycle */
+import { createMemo, Show } from 'solid-js';
+import type { JSX } from '@solidjs/web';
+import type { ActiveDotProps, ActiveDotType, DataKey } from "../util/types"
+import { adaptEventHandlers } from "../util/types"
+import { Dot } from "../shape/Dot"
+import { Layer } from "../container/Layer"
+import { useChartStore } from "../state/RechartsStoreContext"
+import { selectActiveTooltipIndex } from "../state/selectors/tooltipSelectors"
+import { useActiveTooltipDataPoints } from "../hooks"
+import { isNullish } from "../util/DataUtils"
+import { svgPropertiesNoEventsFromUnknown } from "../util/svgPropertiesNoEvents"
+import type { ZIndexable } from "../zIndex/ZIndexLayer"
+import { ZIndexLayer } from "../zIndex/ZIndexLayer"
+import { DefaultZIndexes } from "../zIndex/DefaultZIndexes"
+import { cloneJsxNodeWithProps, isJsxNode } from "../util/ReactUtils"
+
+export interface PointType {
+	readonly x: number | null
+	readonly y: number | null
+	readonly value?: unknown
+	readonly payload?: unknown
+}
+
+function ActivePoint(props: {
+	point: PointType
+	activeDot: ActiveDotType
+	childIndex: number
+	dataKey: DataKey<unknown> | undefined
+	/**
+	 * Different graphical elements have different opinion on what is their main color.
+	 * Sometimes stroke, sometimes fill, sometimes combination.
+	 */
+	mainColor: string | undefined
+	clipPath?: string
+}): JSX.Element {
+	return <>{renderActivePoint(props)}</>
+}
+
+/* Runs inside ActivePoint's JSX expression so every reactive read is tracked. */
+function renderActivePoint(props: {
+	point: PointType
+	activeDot: ActiveDotType
+	childIndex: number
+	dataKey: DataKey<unknown> | undefined
+	/**
+	 * Different graphical elements have different opinion on what is their main color.
+	 * Sometimes stroke, sometimes fill, sometimes combination.
+	 */
+	mainColor: string | undefined
+	clipPath?: string
+}) {
+	/* eslint-disable solid/reactivity -- activeDot/point checks are structural guards; dotProps is a reactive accessor that re-reads props on each call */
+	if (props.activeDot === false || props.point.x == null || props.point.y == null) {
+		return null
+	}
+
+	const dotProps = createMemo(
+		(): ActiveDotProps =>
+			/* eslint-disable sort-keys -- upstream key order becomes the DOM attribute order */
+			({
+				index: props.childIndex,
+				dataKey: props.dataKey,
+				cx: props.point.x,
+				cy: props.point.y,
+				r: 4,
+				fill: props.mainColor ?? "none",
+				strokeWidth: 2,
+				stroke: "#fff",
+				payload: props.point.payload,
+				value: props.point.value,
+				/* eslint-enable sort-keys */
+				...svgPropertiesNoEventsFromUnknown(props.activeDot),
+				...(typeof props.activeDot === "object" && props.activeDot !== null
+					? adaptEventHandlers(props.activeDot as Record<string, unknown>)
+					: {}),
+			}) as ActiveDotProps,
+	)
+	/* eslint-enable solid/reactivity */
+
+	const renderDot = (): JSX.Element => {
+		if (typeof props.activeDot === "function") {
+			return (props.activeDot as (p: ActiveDotProps) => JSX.Element)(dotProps())
+		}
+		if (isJsxNode(props.activeDot)) {
+			return cloneJsxNodeWithProps(
+				props.activeDot,
+				dotProps() as unknown as Record<string, unknown>,
+			) as unknown as JSX.Element
+		}
+		return <Dot {...dotProps()} />
+	}
+
+	return (
+		<Layer class="recharts-active-dot" clip-path={props.clipPath}>
+			{renderDot()}
+		</Layer>
+	)
+}
+
+interface ActivePointsProps extends ZIndexable {
+	points: ReadonlyArray<PointType>
+	/**
+	 * Different graphical elements have different opinion on what is their main color.
+	 * Sometimes stroke, sometimes fill, sometimes combination.
+	 * `undefined` means that the color is not set, and the point will be transparent.
+	 */
+	mainColor: string | undefined
+	itemDataKey: DataKey<unknown> | undefined
+	activeDot: ActiveDotType
+	clipPath?: string
+}
+
+export function ActivePoints(props: ActivePointsProps) {
+	const ctx = useChartStore()
+	const zIndex = () => props.zIndex ?? DefaultZIndexes.activeDot
+	const activeTooltipIndex = createMemo(() =>
+		ctx ? selectActiveTooltipIndex(ctx.store) : undefined,
+	)
+	const activeDataPoints = createMemo(() => useActiveTooltipDataPoints())
+
+	const activePoint = (): PointType | undefined => {
+		const dataPoints = activeDataPoints()
+		if (props.points == null || dataPoints == null) {
+			return undefined
+		}
+		return props.points.find((p) => dataPoints.includes(p.payload))
+	}
+
+	return (
+		<Show when={!isNullish(activePoint())}>
+			<ZIndexLayer zIndex={zIndex()}>
+				<ActivePoint
+					point={activePoint() as PointType}
+					childIndex={Number(activeTooltipIndex())}
+					mainColor={props.mainColor}
+					dataKey={props.itemDataKey}
+					activeDot={props.activeDot}
+					clipPath={props.clipPath}
+				/>
+			</ZIndexLayer>
+		</Show>
+	)
+}

package/src/component/Cell.tsx

@@ -0,0 +1,37 @@
+import type { JSX } from '@solidjs/web';
+import { useCellsRegistry } from "../context/CellsContext"
+
+export interface Props {
+	/** The fill color. */
+	fill?: string
+	/** The stroke color. */
+	stroke?: string
+	[key: string]: unknown
+}
+
+/**
+ * Cell component used to define colors and styles of chart elements.
+ *
+ * This component is now deprecated and will be removed in Recharts 4.0.
+ *
+ * Please use the `shape` prop or `content` prop on the respective chart components
+ * to customize the rendering of chart elements instead of using `Cell`.
+ *
+ * @see {@link https://recharts.github.io/en-US/guide/cell/ Guide: Migrate from Cell component to shape prop}
+ *
+ * @deprecated
+ * @consumes CellReader
+ */
+export const Cell = (props: Props): JSX.Element | null => {
+	/* Solid cannot introspect JSX (no findAllByType parity). Cell instead opts
+	 * into the closest CellsRegistry — Bar/Pie/Scatter/... mount one above their
+	 * children scope. Outside any registry the call is a no-op so standalone
+	 * usage (e.g. unit tests) keeps the empty-DOM contract. */
+	const registry = useCellsRegistry()
+	if (registry) {
+		registry.register(() => ({ ...props }))
+	}
+	return null
+}
+
+Cell.displayName = "Cell"

package/src/component/Cursor.tsx

@@ -0,0 +1,185 @@
+/* eslint-disable import/no-cycle, sort-keys */
+import { createMemo, Show } from 'solid-js';
+import type { Component } from 'solid-js';
+import type { JSX } from '@solidjs/web';
+import { Dynamic } from '@solidjs/web';
+import { clsx } from "clsx"
+import type {
+	ChartOffsetInternal,
+	Coordinate,
+	LayoutType,
+	PolarCoordinate,
+	TooltipEventType,
+} from "../util/types"
+import { isPolarCoordinate } from "../util/types"
+import { Curve } from "../shape/Curve"
+import { Cross } from "../shape/Cross"
+import { getCursorRectangle } from "../util/cursor/getCursorRectangle"
+import { Rectangle } from "../shape/Rectangle"
+import { getRadialCursorPoints } from "../util/cursor/getRadialCursorPoints"
+import { Sector } from "../shape/Sector"
+import { getCursorPoints } from "../util/cursor/getCursorPoints"
+import { useChartLayout, useOffsetInternal } from "../context/chartLayoutContext"
+import { useTooltipAxisBandSize } from "../context/useTooltipAxis"
+import { useChartName } from "../state/selectors/selectors"
+import type { TooltipIndex, TooltipPayload } from "../state/tooltipSlice"
+import { useChartStore } from "../state/RechartsStoreContext"
+import { svgPropertiesNoEventsFromUnknown } from "../util/svgPropertiesNoEvents"
+import type { ZIndexable } from "../zIndex/ZIndexLayer"
+import { ZIndexLayer } from "../zIndex/ZIndexLayer"
+import { DefaultZIndexes } from "../zIndex/DefaultZIndexes"
+
+/**
+ * If set false, no cursor will be drawn when tooltip is active.
+ * If set an object, the option is the configuration of cursor.
+ * If set a JSX element, the option is the custom element of drawing cursor
+ */
+export type CursorDefinition = boolean | JSX.Element | Record<string, unknown>
+
+export interface CursorProps extends ZIndexable {
+	cursor: CursorDefinition
+	tooltipEventType: TooltipEventType
+	coordinate: Coordinate | PolarCoordinate | undefined
+	payload: TooltipPayload
+	index: TooltipIndex | undefined
+}
+
+export type CursorConnectedProps = CursorProps & {
+	tooltipAxisBandSize: number
+	layout: LayoutType
+	offset: ChartOffsetInternal
+	chartName: string
+}
+
+function RenderCursor(props: {
+	cursor: CursorDefinition
+	cursorComp: Component<Record<string, unknown>>
+	cursorProps: Record<string, unknown>
+}) {
+	/* eslint-disable solid/reactivity -- cursor type is structural (stable at mount); nodeType check runs once */
+	if (typeof props.cursor === "object" && props.cursor != null && "nodeType" in props.cursor) {
+		/* JSX element passed directly -- not common in Solid, but handle gracefully */
+		return props.cursor as JSX.Element
+	}
+	/* eslint-enable solid/reactivity */
+	/* Spread props.cursorProps via Dynamic — props is a Solid props proxy, so each
+	   property read flows through reactively. The plain-literal returned by the
+	   parent's accessor is wrapped in the proxy via parent's `cursorProps={...}`
+	   getter compiled by Solid. */
+	return <Dynamic component={props.cursorComp} {...props.cursorProps} />
+}
+
+export function CursorInternal(props: CursorConnectedProps) {
+	/* GOTCHA-017 (cursor reactivity): each piece is a SEPARATE reactive accessor.
+	   The previous version used a single createMemo returning a fresh object literal —
+	   plain object spread on Dynamic enumerates keys once and freezes points/d.
+	   Per-key accessors via mergeProps make Dynamic's spread track each value live. */
+	const isVisible = (): boolean =>
+		Boolean(
+			props.cursor &&
+				props.coordinate != null &&
+				(props.chartName === "ScatterChart" || props.tooltipEventType === "axis"),
+		)
+	const cursorComp = (): Component<Record<string, unknown>> => {
+		if (props.chartName === "ScatterChart") return Cross as Component<Record<string, unknown>>
+		if (props.chartName === "BarChart") return Rectangle as Component<Record<string, unknown>>
+		if (
+			props.layout === "radial" &&
+			props.coordinate != null &&
+			isPolarCoordinate(props.coordinate as Coordinate | PolarCoordinate)
+		) {
+			return Sector as Component<Record<string, unknown>>
+		}
+		return Curve as Component<Record<string, unknown>>
+	}
+	const preferredZIndex = (): number => {
+		if (props.chartName === "BarChart") return DefaultZIndexes.cursorRectangle
+		return DefaultZIndexes.cursorLine
+	}
+	const restPropsObj = (): Record<string, unknown> => {
+		const coord = props.coordinate
+		if (coord == null) return {}
+		if (props.chartName === "ScatterChart") {
+			return coord as unknown as Record<string, unknown>
+		}
+		if (props.chartName === "BarChart") {
+			return getCursorRectangle(
+				props.layout,
+				coord as Coordinate,
+				props.offset,
+				props.tooltipAxisBandSize,
+			) as unknown as Record<string, unknown>
+		}
+		if (props.layout === "radial" && isPolarCoordinate(coord as Coordinate | PolarCoordinate)) {
+			const { cx, cy, radius, startAngle, endAngle } = getRadialCursorPoints(
+				coord as PolarCoordinate,
+			)
+			return { cx, cy, endAngle, innerRadius: radius, outerRadius: radius, startAngle }
+		}
+		return { points: getCursorPoints(props.layout, coord as Coordinate, props.offset) }
+	}
+	const extraClassName = (): string | undefined => {
+		const cursorObj =
+			typeof props.cursor === "object" && props.cursor != null ? props.cursor : undefined
+		return cursorObj && "className" in cursorObj ? String(cursorObj.className) : undefined
+	}
+	const cursorProps = (): Record<string, unknown> => ({
+		stroke: "#ccc",
+		"pointer-events": "none",
+		...props.offset,
+		...restPropsObj(),
+		...svgPropertiesNoEventsFromUnknown(props.cursor),
+		payload: props.payload,
+		payloadIndex: props.index,
+		class: clsx("recharts-tooltip-cursor", extraClassName()),
+	})
+
+	return (
+		<Show when={isVisible()}>
+			<ZIndexLayer zIndex={props.zIndex ?? preferredZIndex()}>
+				<RenderCursor
+					cursor={props.cursor}
+					cursorComp={cursorComp()}
+					cursorProps={cursorProps()}
+				/>
+			</ZIndexLayer>
+		</Show>
+	)
+}
+
+/*
+ * Cursor is the background, or a highlight,
+ * that shows when user mouses over or activates
+ * an area.
+ *
+ * It usually shows together with a tooltip
+ * to emphasise which part of the chart does the tooltip refer to.
+ */
+export function Cursor(props: CursorProps) {
+	const ctx = useChartStore()
+	/* All public/internal hooks bare T (GOTCHA-011). Arrow-thunk pattern
+	   preserves callsite shape and re-runs the selector on each reactive read. */
+	const tooltipAxisBandSize = createMemo(() => useTooltipAxisBandSize())
+	const offset = createMemo(() => useOffsetInternal())
+	const layout = createMemo(() => useChartLayout())
+	const chartName = createMemo(() => (ctx ? useChartName(ctx.store) : undefined))
+
+	return (
+		<Show
+			when={
+				tooltipAxisBandSize() != null &&
+				offset() != null &&
+				layout() != null &&
+				chartName() != null
+			}
+		>
+			<CursorInternal
+				{...props}
+				offset={offset()}
+				layout={layout() as NonNullable<ReturnType<typeof layout>>}
+				tooltipAxisBandSize={tooltipAxisBandSize() as NonNullable<ReturnType<typeof tooltipAxisBandSize>>}
+				chartName={chartName() as NonNullable<ReturnType<typeof chartName>>}
+			/>
+		</Show>
+	)
+}

package/src/component/Customized.tsx

@@ -0,0 +1,50 @@
+/**
+ * @fileOverview Customized
+ */
+import { untrack } from 'solid-js';
+import { splitProps } from '../util/solid-1-compat';
+import type { Component } from 'solid-js';
+import type { JSX } from '@solidjs/web';
+import { Dynamic } from '@solidjs/web';
+import { Layer } from "../container/Layer"
+
+type Comp<P extends Record<string, unknown>> = Component<P> | JSX.Element
+export type Props<P extends Record<string, unknown>, C extends Comp<P>> = P & {
+	/**
+	 * Render your components directly, without Customized wrapper. Will be removed in 4.0
+	 * @deprecated
+	 * @example Before: `<Customized component={<MyCustomComponent />} />`
+	 * @example After: `<MyCustomComponent />`
+	 */
+	component: C
+}
+
+/**
+ * Customized component used to be necessary to render custom elements in Recharts 2.x.
+ * Starting from Recharts 3.x, all charts are able to render arbitrary elements anywhere,
+ * and Customized is no longer needed.
+ *
+ * @example Before: `<Customized component={<MyCustomComponent />} />`
+ * @example After: `<MyCustomComponent />`
+ *
+ * @deprecated Just render your components directly. Will be removed in 4.0
+ */
+export function Customized<P extends Record<string, unknown>, C extends Comp<P>>(
+	allProps: Props<P, C>,
+) {
+	const [local, rest] = splitProps(allProps, ["component"])
+	/* Read once: a JSX.Element getter would create the element again on each read.
+	   The component prop is structural (deprecated wrapper), not reactive. */
+	const component = untrack(() => local.component)
+	const child: JSX.Element =
+		typeof component === "function" ? (
+			<Dynamic component={component as Component<Record<string, unknown>>} {...rest} />
+		) : (
+			/* Solid evaluates <Comp /> eagerly; components returning null yield null. */
+			(component as JSX.Element)
+		)
+
+	return <Layer class="recharts-customized-wrapper">{child}</Layer>
+}
+
+Customized.displayName = "Customized"