@solidports/recharts 0.1.0 → 0.1.1

package/src/cartesian/Line.tsx

@@ -1,863 +0,0 @@
-/* eslint-disable import/no-cycle */
-import type { Formatter } from "../component/DefaultTooltipContent"
-import { createMemo, createSignal, Show } from 'solid-js';
-import type { JSX } from '@solidjs/web';
-import { clsx } from "clsx"
-import type { CurveType, Props as CurveProps } from "../shape/Curve"
-import { Layer } from "../container/Layer"
-import {
-	LabelListContextBridge,
-	CartesianLabelListContextProvider,
-	type CartesianLabelListEntry,
-	type ImplicitLabelListType,
-	LabelListFromLabelProp,
-} from "../component/LabelList"
-import { Dots } from "../component/Dots"
-import type { ErrorBarDataItem, ErrorBarDataPointFormatter } from "./ErrorBar"
-import { interpolate, isNullish, noop } from "../util/DataUtils"
-import { isClipDot } from "../util/ReactUtils"
-import { getCateCoordinateOfLine, getTooltipNameProp, getValueByDataKey } from "../util/ChartUtils"
-import type {
-	ActiveDotType,
-	ActiveShape,
-	AnimationDuration,
-	AnimationTiming,
-	CartesianLayout,
-	DataConsumer,
-	DataKey,
-	DataProvider,
-	DotType,
-	LegendType,
-	TickItem,
-	TooltipType,
-	TrapezoidViewBox,
-} from "../util/types"
-import type { LegendPayload } from "../component/DefaultLegendContent"
-import { ActivePoints } from "../component/ActivePoints"
-import type { TooltipPayloadConfiguration } from "../state/tooltipSlice"
-import { SetTooltipEntrySettings } from "../state/SetTooltipEntrySettings"
-import { SetErrorBarContext } from "../context/ErrorBarContext"
-import { GraphicalItemChildrenScope } from "../context/GraphicalItemChildrenScope"
-import { GraphicalItemClipPath, useNeedsClip } from "./GraphicalItemClipPath"
-import { useChartLayout } from "../context/chartLayoutContext"
-import type { BaseAxisWithScale } from "../state/selectors/axisSelectors"
-import { useIsPanorama } from "../context/PanoramaContext"
-import { selectLinePoints } from "../state/selectors/lineSelectors"
-import { useChartStore } from "../state/RechartsStoreContext"
-import type { AxisId } from "../state/cartesianAxisSlice"
-import { SetLegendPayload } from "../state/SetLegendPayload"
-import { useAnimationId } from "../util/useAnimationId"
-import { useAnimatedLineLength } from "./useAnimatedLineLength"
-import { LineDrawShape } from "./LineDrawShape"
-import { pathTotalLength } from "../util/pathTotalLength"
-import type { LineDrawShapeProps } from "./LineDrawShape"
-import { resolveDefaultProps } from "../util/resolveDefaultProps"
-import { usePlotArea } from "../hooks"
-import type { WithIdRequired } from "../util/useUniqueId"
-import { RegisterGraphicalItemId } from "../context/RegisterGraphicalItemId"
-import { SetCartesianGraphicalItem } from "../state/SetGraphicalItem"
-import { svgPropertiesNoEvents } from "../util/svgPropertiesNoEvents"
-import { AnimatedItems, useAnimationCallbacks } from "../animation/AnimatedItems"
-import type { AnimationInterpolateFn } from "../animation/AnimatedItems"
-import { matchByIndex } from "../animation/matchBy"
-import type { AnimationItem, AnimationMatchByProp } from "../animation/matchBy"
-import { svgPropertiesAndEvents } from "../util/svgPropertiesAndEvents"
-import { getRadiusAndStrokeWidthFromDot } from "../util/getRadiusAndStrokeWidthFromDot"
-import { Shape } from "../util/ActiveShapeUtils"
-import type { ZIndexable } from "../zIndex/ZIndexLayer"
-import { ZIndexLayer } from "../zIndex/ZIndexLayer"
-import { DefaultZIndexes } from "../zIndex/DefaultZIndexes"
-import type { GraphicalItemId } from "../state/graphicalItemsSlice"
-import type { ChartData } from "../state/chartDataSlice"
-
-import { mergeProps, splitProps } from '../util/solid-1-compat';
-export interface LinePointItem {
-	readonly value: number
-	readonly payload?: unknown
-	/**
-	 * Line coordinates can have gaps in them. We have `connectNulls` prop that allows to connect those gaps anyway.
-	 * What it means is that some points can have `null` x or y coordinates.
-	 */
-	x: number | null
-	y: number | null
-}
-
-/**
- * Internal props, combination of external props + defaultProps + private Recharts state
- */
-interface InternalLineProps extends ZIndexable {
-	activeDot: ActiveDotType
-	animateNewValues: boolean
-	animationBegin: number
-	animationDuration: AnimationDuration
-	animationEasing: AnimationTiming
-	animationInterpolateFn: AnimationInterpolateFn<LinePointItem, CartesianLayout>
-	animationMatchBy: AnimationMatchByProp<LinePointItem>
-
-	className?: string
-	connectNulls: boolean
-	data?: unknown
-	dataKey?: DataKey<unknown>
-	dot: DotType
-	height: number
-	hide: boolean
-	id: GraphicalItemId
-	isAnimationActive: boolean | "auto"
-	label: ImplicitLabelListType
-	layout: "horizontal" | "vertical"
-	left: number
-	legendType: LegendType
-	shape: ActiveShape<LineDrawShapeProps, SVGPathElement>
-
-	name?: string | number
-	needClip?: boolean
-
-	onAnimationEnd?: () => void
-	onAnimationStart?: () => void
-
-	points: ReadonlyArray<LinePointItem>
-	tooltipType?: TooltipType
-	formatter?: Formatter
-	top: number
-	type?: CurveType
-	unit?: string | number | null
-	width: number
-	xAxisId: AxisId
-	yAxisId: AxisId
-	children?: JSX.Element
-}
-
-/**
- * External props, intended for end users to fill in
- */
-interface LineProps<DataPointType = unknown, DataValueType = unknown>
-	extends DataProvider<DataPointType>, DataConsumer<DataPointType, DataValueType>, ZIndexable {
-	/**
-	 * The active dot is rendered on the closest data point when user interacts with the chart.
-	 * @defaultValue true
-	 */
-	activeDot?: ActiveDotType
-	/** @defaultValue true */
-	animateNewValues?: boolean
-	/** @defaultValue 0 */
-	animationBegin?: number
-	/** @defaultValue 1500 */
-	animationDuration?: AnimationDuration
-	/** @defaultValue ease */
-	animationEasing?: AnimationTiming
-	/**
-	 * Custom animation function for interpolating data items.
-	 * When provided, this replaces the default animation interpolation.
-	 *
-	 * @since 3.9
-	 * @see {@link https://recharts.github.io/en-US/guide/animations/ Animations guide}
-	 */
-	animationInterpolateFn?: AnimationInterpolateFn<LinePointItem, CartesianLayout>
-	/**
-	 * Strategy for matching previous items to next items during animation.
-	 *
-	 * - `matchByIndex` (default): match by array position with proportional stretching
-	 * - `matchAppend`: match sequentially by index and treat newly appended items as new
-	 * - `matchByDataKey('someKey')`: match by a data key from the payload
-	 * - Custom function `(item, index) => key`: match by the returned key
-	 *
-	 * @defaultValue index
-	 */
-	animationMatchBy?: AnimationMatchByProp<LinePointItem>
-	className?: string
-	/** @defaultValue false */
-	connectNulls?: boolean
-	/** @defaultValue true */
-	dot?: DotType
-	/** @defaultValue false */
-	hide?: boolean
-	id?: string
-	/** @defaultValue auto */
-	isAnimationActive?: boolean | "auto"
-	/** @defaultValue false */
-	label?: ImplicitLabelListType
-	/** @defaultValue line */
-	legendType?: LegendType
-	/**
-	 * The shape of the line. Defaults to `LineDrawShape`, which reveals the path via
-	 * stroke-dasharray during the entrance animation.
-	 * During animations, a function shape also receives `animationElapsedTime`,
-	 * `isAnimating`, `isEntrance`, and `visibleLength`.
-	 */
-	shape?: ActiveShape<LineDrawShapeProps, SVGPathElement>
-	name?: string | number
-	onAnimationEnd?: () => void
-	onAnimationStart?: () => void
-	tooltipType?: TooltipType
-	/**
-	 * Formats the value displayed in the tooltip for this Line.
-	 * When set, takes precedence over the `formatter` prop on the Tooltip component.
-	 */
-	formatter?: Formatter
-	/** @defaultValue linear */
-	type?: CurveType
-	unit?: string | number | null
-	/** @defaultValue 0 */
-	xAxisId?: AxisId
-	/** @defaultValue 0 */
-	yAxisId?: AxisId
-	/** @defaultValue 400 */
-	zIndex?: number
-	/** @defaultValue #3182bd */
-	stroke?: string
-	/** @defaultValue 1 */
-	strokeWidth?: string | number
-	strokeDasharray?: string | number
-	children?: JSX.Element
-}
-
-/**
- * Because of naming conflict, we are forced to ignore certain (valid) SVG attributes.
- */
-type LineSvgProps = Omit<CurveProps, "points" | "pathRef" | "ref" | "layout" | "baseLine">
-
-type InternalProps = LineSvgProps & InternalLineProps
-
-/* eslint-disable-next-line typescript-eslint/no-explicit-any -- upstream contract: untyped items accept any data */
-export type Props<DataPointType = any, DataValueType = any> = LineSvgProps & LineProps<DataPointType, DataValueType>
-
-/* eslint-disable solid/reactivity -- plain utility fn; Props parameter is not a Solid reactive proxy at this call site */
-const computeLegendPayloadFromAreaData = (props: Props): ReadonlyArray<LegendPayload> => {
-	return [
-		{
-			color: props.stroke,
-			dataKey: props.dataKey,
-			inactive: props.hide,
-			payload: props,
-			type: props.legendType,
-			value: getTooltipNameProp(props.name, props.dataKey),
-		},
-	]
-}
-/* eslint-enable solid/reactivity */
-
-function SetLineTooltipEntrySettings(
-	props: Pick<
-		InternalProps,
-		| "dataKey"
-		| "data"
-		| "stroke"
-		| "strokeWidth"
-		| "fill"
-		| "name"
-		| "hide"
-		| "unit"
-		| "tooltipType"
-		| "formatter"
-		| "id"
-	>,
-) {
-	/* GOTCHA-005 (session 38): wrap in createMemo so reactive props flow into the
-	   settings object — setup-time literal would freeze defaults at first render. */
-	const tooltipEntrySettings = createMemo<TooltipPayloadConfiguration>(() => ({
-		dataDefinedOnItem: props.data,
-		getPosition: noop,
-		settings: {
-			color: props.stroke,
-			dataKey: props.dataKey,
-			fill: props.fill,
-			formatter: props.formatter,
-			graphicalItemId: props.id,
-			hide: props.hide,
-			name: getTooltipNameProp(props.name, props.dataKey),
-			nameKey: undefined,
-			stroke: props.stroke,
-			strokeWidth: props.strokeWidth,
-			type: props.tooltipType,
-			unit: props.unit,
-		},
-	}))
-	return <SetTooltipEntrySettings tooltipEntrySettings={tooltipEntrySettings()} />
-}
-
-function LineDotsWrapper(props: {
-	points: ReadonlyArray<LinePointItem>
-	clipPathId: string
-	allProps: InternalProps
-}) {
-	const lineProps = createMemo(() => svgPropertiesNoEvents(props.allProps, "id"))
-
-	return (
-		<Dots
-			points={props.points}
-			dot={props.allProps.dot}
-			className="recharts-line-dots"
-			dotClassName="recharts-line-dot"
-			dataKey={props.allProps.dataKey}
-			baseProps={lineProps()}
-			needClip={props.allProps.needClip}
-			clipPathId={props.clipPathId}
-		/>
-	)
-}
-
-function LineLabelListProvider(props: {
-	showLabels: boolean
-	children: JSX.Element
-	points: ReadonlyArray<LinePointItem>
-}) {
-	const labelListEntries = createMemo((): ReadonlyArray<CartesianLabelListEntry> => {
-		return props.points?.map((point): CartesianLabelListEntry => {
-			const viewBox: TrapezoidViewBox = {
-				height: 0,
-				lowerWidth: 0,
-				upperWidth: 0,
-				width: 0,
-				x: point.x ?? 0,
-				y: point.y ?? 0,
-			}
-			return {
-				...viewBox,
-				fill: undefined,
-				parentViewBox: undefined,
-				payload: point.payload,
-				value: point.value,
-				viewBox,
-			}
-		})
-	})
-	/* eslint-disable solid/reactivity -- showLabels and labelListEntries() are reactive inside JSX; linter can't trace through Context.Provider value prop */
-	return (
-		<CartesianLabelListContextProvider value={props.showLabels ? labelListEntries() : undefined}>
-			{props.children}
-		</CartesianLabelListContextProvider>
-	)
-	/* eslint-enable solid/reactivity */
-}
-
-function StaticCurve(props: {
-	clipPathId: string
-	pathRef: { current: SVGPathElement | null } | undefined
-	points: ReadonlyArray<LinePointItem>
-	allProps: InternalProps
-	animationElapsedTime?: number
-	isAnimating?: boolean
-	isEntrance?: boolean
-	visibleLength?: number | null
-}) {
-	/* GOTCHA-014: spreads + reactive attrs go through mergeProps lazy memos. If the first
-	   property read happens inside an event handler (no owner), Solid warns. Hoist
-	   derived attrs into setup-scope createMemos so the memo's owner is the component. */
-	/* eslint-disable-next-line solid/reactivity -- splitProps keeps lazy getters; reads happen in the memo below */
-	const [, others] = splitProps(props.allProps, [
-		"type",
-		"layout",
-		"connectNulls",
-		"needClip",
-		"shape",
-		"strokeDasharray",
-	])
-	const eventProps = createMemo(() => svgPropertiesAndEvents(others))
-	const clipPath = createMemo(() =>
-		props.allProps.needClip ? `url(#clipPath-${props.clipPathId})` : undefined,
-	)
-
-	return (
-		<>
-			<Show when={props.points?.length > 1}>
-				<Shape
-					{...eventProps()}
-					shapeType="curve"
-					option={props.allProps.shape}
-					DefaultShape={LineDrawShape}
-					class="recharts-line-curve"
-					clip-path={clipPath()}
-					connectNulls={props.allProps.connectNulls}
-					fill="none"
-					layout={props.allProps.layout}
-					points={props.points}
-					strokeDasharray={props.allProps.strokeDasharray}
-					type={props.allProps.type}
-					pathRef={props.pathRef}
-					animationElapsedTime={props.animationElapsedTime}
-					isAnimating={props.isAnimating}
-					isEntrance={props.allProps.animateNewValues ? props.isEntrance : false}
-					visibleLength={props.visibleLength}
-				/>
-			</Show>
-			<LineDotsWrapper
-				points={props.points}
-				clipPathId={props.clipPathId}
-				allProps={props.allProps}
-			/>
-		</>
-	)
-}
-
-function averageShift(items: ReadonlyArray<AnimationItem<LinePointItem>>): number {
-	let total = 0
-	let count = 0
-	for (const item of items) {
-		if (item.status === "matched" && item.prev.x != null && item.next.x != null) {
-			total += item.next.x - item.prev.x
-			count++
-		}
-	}
-	return count > 0 ? total / count : 0
-}
-
-const defaultLineAnimateItems: AnimationInterpolateFn<LinePointItem, CartesianLayout> = (
-	items,
-	animationElapsedTime,
-) => {
-	if (items == null) {
-		// First render: return empty, stroke-dasharray handles the reveal
-		return []
-	}
-	// At animationElapsedTime=1 return only the non-removed items
-	if (animationElapsedTime === 1) return items.flatMap((item) => (item.status === "removed" ? [] : [item.next]))
-
-	const shift = averageShift(items)
-
-	const result: LinePointItem[] = []
-
-	for (const item of items) {
-		if (item.status === "matched") {
-			result.push({
-				...item.next,
-				x: interpolate(item.prev.x, item.next.x, animationElapsedTime),
-				y: interpolate(item.prev.y, item.next.y, animationElapsedTime),
-			})
-		} else if (item.status === "added") {
-			if (item.next.x != null) {
-				// Extrapolate entry position: the point starts where it "would have been"
-				const entryX = item.next.x - shift
-				result.push({
-					...item.next,
-					x: interpolate(entryX, item.next.x, animationElapsedTime),
-					y: item.next.y,
-				})
-			} else {
-				result.push(item.next)
-			}
-		} else if (item.status === "removed") {
-			if (item.prev.x != null) {
-				const exitX = item.prev.x + shift
-				result.push({
-					...item.prev,
-					x: interpolate(item.prev.x, exitX, animationElapsedTime),
-					y: item.prev.y,
-				})
-			}
-			// else: removed items are simply dropped
-		}
-	}
-
-	return result
-}
-
-function CurveWithAnimation(props: {
-	clipPathId: string
-	allProps: InternalProps
-	previousPointsRef: { current: ReadonlyArray<LinePointItem> | null }
-}) {
-	/* GOTCHA-014-J: ref-object shape `{ current }` matches upstream React `useRef`.
-	   Tests assert `pathRef: { current: <SVGPathElement> }` on the props payload
-	   passed to user click/mouse handlers. Curve's `<path>` writes via callback
-	   into `pathRef.current`. */
-	/* Signal-backed so the dasharray memos re-run once the <path> ref attaches; React
-	   gets the same re-measure from the re-render after onAnimationStart. */
-	const [pathElement, setPathElement] = createSignal<SVGPathElement | null>(null, { ownedWrite: true })
-	const pathRef: { current: SVGPathElement | null } = {
-		get current() {
-			return pathElement()
-		},
-		set current(element: SVGPathElement | null) {
-			setPathElement(() => element)
-		},
-	}
-
-	const { isAnimating, handleAnimationStart, handleAnimationEnd } = useAnimationCallbacks(
-		() => props.allProps.onAnimationStart,
-		() => props.allProps.onAnimationEnd,
-	)
-	/* Same content-compared identity AnimatedItems uses for its animation id. */
-	const lengthAnimationId = useAnimationId(() => props.allProps.points, "recharts-line-length-")
-	const getVisibleLength = useAnimatedLineLength(lengthAnimationId)
-
-	/* Measured once per path `d` (see pathTotalLength), and only for animating lines. */
-	const totalLength = (): number => pathTotalLength(pathRef.current)
-
-	// Guard for totalLength: don't update previousPointsRef before SVG path is measured.
-	// A line that never animates has nothing to reveal, so a mounted path is enough.
-	const shouldUpdatePreviousRef = (animationElapsedTime: number) =>
-		animationElapsedTime > 0 &&
-		(props.allProps.isAnimationActive === false ? pathRef.current != null : totalLength() > 0)
-
-	return (
-		<LineLabelListProvider points={props.allProps.points} showLabels={!isAnimating()}>
-			{/* GOTCHA-017: user JSX (ErrorBar) memoized via children() helper inside
-			   SetErrorBarContext.Provider scope so createComponent(ErrorBar) captures
-			   live ctx Accessor, not initial-default. Single read site. */}
-			<GraphicalItemChildrenScope>{props.allProps.children}</GraphicalItemChildrenScope>
-			<AnimatedItems
-				animationInput={props.allProps.points}
-				animationIdPrefix="recharts-line-"
-				items={props.allProps.points}
-				previousItemsRef={props.previousPointsRef}
-				isAnimationActive={props.allProps.isAnimationActive}
-				animationBegin={props.allProps.animationBegin}
-				animationDuration={props.allProps.animationDuration}
-				animationEasing={props.allProps.animationEasing}
-				onAnimationStart={handleAnimationStart}
-				onAnimationEnd={handleAnimationEnd}
-				animationInterpolateFn={props.allProps.animationInterpolateFn}
-				animationMatchBy={props.allProps.animationMatchBy}
-				shouldUpdatePreviousRef={shouldUpdatePreviousRef}
-				layout={props.allProps.layout}
-			>
-				{(stepData, animationElapsedTime, isEntrance) => {
-					const animationActive = () => isAnimating() || animationElapsedTime() < 1
-					const visibleLength = createMemo(() =>
-						animationActive()
-							? getVisibleLength(animationElapsedTime(), totalLength())
-							: null,
-					)
-					return (
-						<StaticCurve
-							allProps={props.allProps}
-							points={stepData()}
-							clipPathId={props.clipPathId}
-							pathRef={pathRef}
-							animationElapsedTime={animationElapsedTime()}
-							isAnimating={animationActive()}
-							isEntrance={isEntrance()}
-							visibleLength={visibleLength()}
-						/>
-					)
-				}}
-			</AnimatedItems>
-			<LabelListFromLabelProp label={props.allProps.label} />
-		</LineLabelListProvider>
-	)
-}
-
-function RenderCurve(props: { clipPathId: string; allProps: InternalProps }) {
-	const previousPointsRef: { current: ReadonlyArray<LinePointItem> | null } = { current: null }
-	return (
-		<CurveWithAnimation
-			clipPathId={props.clipPathId}
-			allProps={props.allProps}
-			previousPointsRef={previousPointsRef}
-		/>
-	)
-}
-
-const errorBarDataPointFormatter: ErrorBarDataPointFormatter<LinePointItem> = (
-	dataPoint: LinePointItem,
-	dataKey,
-): ErrorBarDataItem => {
-	return {
-		errorVal: getValueByDataKey(dataPoint.payload as LinePointItem, dataKey),
-		value: dataPoint.value,
-		x: dataPoint.x ?? undefined,
-		y: dataPoint.y ?? undefined,
-	}
-}
-
-function LineWithState(props: InternalProps) {
-	return (
-		<Show when={!props.hide}>
-			{(() => {
-				const layerClass = () => clsx("recharts-line", props.className)
-				const clipPathId = () => props.id
-				const dotMeta = () => getRadiusAndStrokeWidthFromDot(props.dot)
-				const clipDot = () => isClipDot(props.dot)
-				const dotSize = () => dotMeta().r * 2 + dotMeta().strokeWidth
-				const activePointsClipPath = () =>
-					props.needClip ? `url(#clipPath-${clipDot() ? "" : "dots-"}${clipPathId()})` : undefined
-
-				return (
-					<ZIndexLayer zIndex={props.zIndex}>
-						<Layer class={layerClass()}>
-							<Show when={props.needClip}>
-								<defs>
-									<GraphicalItemClipPath
-										clipPathId={clipPathId()}
-										xAxisId={props.xAxisId}
-										yAxisId={props.yAxisId}
-									/>
-									<Show when={!clipDot()}>
-										<clipPath id={`clipPath-dots-${clipPathId()}`}>
-											<rect
-												x={props.left - dotSize() / 2}
-												y={props.top - dotSize() / 2}
-												width={props.width + dotSize()}
-												height={props.height + dotSize()}
-											/>
-										</clipPath>
-									</Show>
-								</defs>
-							</Show>
-							{/* GOTCHA-017 (session 34): SetErrorBarContext hoisted to Line()
-							   outer scope. RenderCurve is now inside the Provider scope via
-							   the outer wrapper. */}
-							<RenderCurve allProps={props} clipPathId={clipPathId()} />
-						</Layer>
-						<ActivePoints
-							activeDot={props.activeDot}
-							points={props.points}
-							mainColor={props.stroke}
-							itemDataKey={props.dataKey}
-							clipPath={activePointsClipPath()}
-						/>
-					</ZIndexLayer>
-				)
-			})()}
-		</Show>
-	)
-}
-
-export const defaultLineProps = {
-	activeDot: true,
-	animateNewValues: true,
-	animationBegin: 0,
-	animationDuration: 1500,
-	animationEasing: "ease",
-	animationInterpolateFn: defaultLineAnimateItems,
-	animationMatchBy: matchByIndex,
-	connectNulls: false,
-	dot: true,
-	fill: "#fff",
-	hide: false,
-	isAnimationActive: "auto",
-	label: false,
-	legendType: "line",
-	shape: LineDrawShape,
-	stroke: "#3182bd",
-	strokeWidth: 1,
-	type: "linear",
-	xAxisId: 0,
-	yAxisId: 0,
-	zIndex: DefaultZIndexes.line,
-} as const satisfies Partial<Props>
-
-function LineImpl(props: WithIdRequired<Props>) {
-	const resolved = resolveDefaultProps(props, defaultLineProps)
-
-	const needClipResult = createMemo(() => useNeedsClip(resolved.xAxisId, resolved.yAxisId))
-	/* arrow thunks: bare hooks, but callsites repeatedly read inside Show predicate
-	   and render-fn — thunk preserves callsite shape and reactivity. See GOTCHA-011. */
-	const plotArea = createMemo(() => usePlotArea())
-	const layout = createMemo(() => useChartLayout())
-	const isPanorama = useIsPanorama()
-	const ctx = useChartStore()
-	/* selectLinePoints is a per-chart chartSelector memo keyed by these ids. It resolves the
-	   item's settings from the store itself, so a dataKey or data change re-derives the points
-	   once for every reader, and an all-primitive key never pins a replaced settings node. */
-	const points = createMemo(() =>
-		ctx
-			? selectLinePoints(ctx.store, resolved.xAxisId, resolved.yAxisId, isPanorama, resolved.id)
-			: undefined,
-	)
-
-	return (
-		<Show
-			when={
-				(layout() === "horizontal" || layout() === "vertical") &&
-				points() != null &&
-				plotArea() != null
-			}
-		>
-			{(() => {
-				const viewBox = plotArea()
-				const {
-					height,
-					width,
-					x: left,
-					y: top,
-				} = viewBox as { height: number; width: number; x: number; y: number }
-
-				return (
-					<LineWithState
-						{...resolved}
-						id={resolved.id}
-						connectNulls={resolved.connectNulls}
-						dot={resolved.dot}
-						activeDot={resolved.activeDot}
-						animateNewValues={resolved.animateNewValues}
-						animationBegin={resolved.animationBegin}
-						animationDuration={resolved.animationDuration}
-						animationEasing={resolved.animationEasing}
-						isAnimationActive={resolved.isAnimationActive}
-						hide={resolved.hide}
-						label={resolved.label}
-						legendType={resolved.legendType}
-						xAxisId={resolved.xAxisId}
-						yAxisId={resolved.yAxisId}
-						points={points() as ReadonlyArray<LinePointItem>}
-						layout={layout() as "horizontal" | "vertical"}
-						height={height}
-						width={width}
-						left={left}
-						top={top}
-						needClip={needClipResult()?.needClip()}
-					/>
-				)
-			})()}
-		</Show>
-	)
-}
-
-export function computeLinePoints({
-	layout,
-	xAxis,
-	yAxis,
-	xAxisTicks,
-	yAxisTicks,
-	dataKey,
-	bandSize,
-	displayedData,
-}: {
-	layout: CartesianLayout
-	xAxis: BaseAxisWithScale
-	yAxis: BaseAxisWithScale
-	xAxisTicks: TickItem[]
-	yAxisTicks: TickItem[]
-	dataKey: Props["dataKey"]
-	bandSize: number
-	displayedData: ChartData
-}): ReadonlyArray<LinePointItem> {
-	return displayedData
-		.map((entry, index): LinePointItem | null => {
-			const entryRecord =
-				entry != null && typeof entry === "object"
-					? (entry as Record<string, unknown>)
-					: ({} as Record<string, unknown>)
-			const value = getValueByDataKey(entry, dataKey) as number
-
-			if (layout === "horizontal") {
-				const x = getCateCoordinateOfLine({
-					axis: xAxis,
-					bandSize,
-					entry: entryRecord,
-					index,
-					ticks: xAxisTicks,
-				})
-				const y = isNullish(value) ? null : yAxis.scale.map(value)
-				return {
-					payload: entry,
-					value,
-					x,
-					y: y ?? null,
-				}
-			}
-
-			const x = isNullish(value) ? null : xAxis.scale.map(value)
-			const y = getCateCoordinateOfLine({
-				axis: yAxis,
-				bandSize,
-				entry: entryRecord,
-				index,
-				ticks: yAxisTicks,
-			})
-			if (x == null || y == null) {
-				return null
-			}
-			return {
-				payload: entry,
-				value,
-				x,
-				y,
-			}
-		})
-		.filter(Boolean) as ReadonlyArray<LinePointItem>
-}
-
-/**
- * @provides LabelListContext
- * @provides ErrorBarContext
- * @consumes CartesianChartContext
- */
-function LineFn(outsideProps: Props) {
-	/* GOTCHA-013 + GOTCHA-014: split children, then mergeProps for the defaults
-	   layer. resolveDefaultProps `{...realProps}` snapshots the props proxy at
-	   first render — animationEasing, isAnimationActive and every other prop
-	   freeze. mergeProps preserves the lazy proxy so reactive parents (e.g.
-	   tests changing dataKey at runtime) keep flowing values into LineImpl. */
-	const [childrenProps, restProps] = splitProps(outsideProps, ["children"])
-	const props = mergeProps(defaultLineProps, restProps) as ReturnType<
-		typeof resolveDefaultProps<typeof restProps, typeof defaultLineProps>
-	>
-	const isPanorama = useIsPanorama()
-	const ctx = useChartStore()
-	return (
-		<RegisterGraphicalItemId id={props.id} type="line">
-			{(id) => {
-				/* GOTCHA-017 (session 34): SetErrorBarContext hoisted from LineWithState
-				   to here so user JSX <ErrorBar/> in props.children evaluates inside the
-				   Provider owner. Points come from the same selector LineImpl uses. */
-				const linePoints = () =>
-					ctx
-						? selectLinePoints(ctx.store, props.xAxisId, props.yAxisId, isPanorama, id)
-						: undefined
-				return (
-					<>
-						<SetLegendPayload legendPayload={computeLegendPayloadFromAreaData(props)} />
-						<SetLineTooltipEntrySettings
-							dataKey={props.dataKey}
-							data={props.data}
-							stroke={props.stroke}
-							strokeWidth={props.strokeWidth}
-							fill={props.fill}
-							name={props.name}
-							hide={props.hide}
-							unit={props.unit}
-							tooltipType={props.tooltipType}
-							formatter={props.formatter}
-							id={id}
-						/>
-						<SetCartesianGraphicalItem
-							type="line"
-							id={id}
-							data={props.data}
-							xAxisId={props.xAxisId}
-							yAxisId={props.yAxisId}
-							zAxisId={0}
-							dataKey={props.dataKey}
-							hide={props.hide}
-							isPanorama={isPanorama}
-						/>
-						<SetErrorBarContext
-							xAxisId={props.xAxisId}
-							yAxisId={props.yAxisId}
-							data={linePoints()}
-							dataPointFormatter={errorBarDataPointFormatter}
-							errorBarOffset={0}
-						>
-							<LabelListContextBridge>
-								{(() => {
-									/* GOTCHA-017 (session 34): memoize children INSIDE SetErrorBarContext
-									   so ErrorBar JSX createComponent captures the live Provider. */
-									const memoizedChildren = createMemo(() => childrenProps.children)
-									return (
-										<LineImpl {...props} id={id}>
-											{memoizedChildren()}
-										</LineImpl>
-									)
-								})()}
-							</LabelListContextBridge>
-						</SetErrorBarContext>
-					</>
-				)
-			}}
-		</RegisterGraphicalItemId>
-	)
-}
-
-/**
- * Typed entry point: the generics constrain `data`/`dataKey` at the call site, like upstream.
- */
-/* eslint-disable-next-line typescript-eslint/no-explicit-any -- upstream contract: untyped items accept any data */
-export const Line = LineFn as {
-	<DataPointType = any, DataValueType = any>(props: Props<DataPointType, DataValueType>): JSX.Element
-	/* eslint-disable-next-line typescript-eslint/no-explicit-any -- upstream fallback overload for mismatched data/dataKey */
-	(props: Props<any, any>): JSX.Element
-	displayName?: string
-}
-Line.displayName = "Line"