@solidports/recharts 0.1.0 → 0.1.1

package/src/cartesian/Brush.tsx

@@ -1,951 +0,0 @@
-/* eslint-disable import/no-cycle, sort-keys */
-import { createMemo, createSignal, onCleanup, Show, createEffect, untrack } from 'solid-js';
-import type { WithoutRemoveFalse } from "../util/types"
-import type { JSX } from '@solidjs/web';
-import { clsx } from "clsx"
-import { scalePoint } from "victory-vendor/d3-scale"
-import range from "es-toolkit/compat/range"
-import { Layer } from "../container/Layer"
-import { Text } from "../component/Text"
-import { getValueByDataKey } from "../util/ChartUtils"
-import { isNumber, isNotNil } from "../util/DataUtils"
-import { generatePrefixStyle } from "../util/CssPrefixUtils"
-import type { DataConsumer, DataKey, Padding } from "../util/types"
-import { useChartData, useDataIndex } from "../context/chartDataContext"
-import type { BrushStartEndIndex, OnBrushUpdate } from "../context/brushUpdateContext"
-import { useChartStore } from "../state/RechartsStoreContext"
-import { useOptionalChartState } from "../state/useChartState"
-import type { ChartData } from "../state/chartDataSlice"
-import type { BrushSettings } from "../state/brushSlice"
-import { PanoramaContextProvider } from "../context/PanoramaContext"
-import { selectBrushDimensions } from "../state/selectors/brushSelectors"
-import { useBrushChartSynchronisation } from "../synchronisation/useChartSynchronisation"
-import type { RequiresDefaultProps } from "../util/resolveDefaultProps"
-import { resolveDefaultProps } from "../util/resolveDefaultProps"
-import { svgPropertiesNoEvents } from "../util/svgPropertiesNoEvents"
-import { cloneJsxNodeWithProps, isJsxNode } from "../util/ReactUtils"
-import { teardownWrite } from "../state/teardownWrite"
-
-type BrushTravellerType = JSX.Element | ((travellerProps: TravellerProps) => JSX.Element)
-
-type BrushTickFormatter = (value: unknown, index: number) => number | string
-
-interface BrushProps<DataPointType = unknown, DataValueType = unknown> extends DataConsumer<
-	DataPointType,
-	DataValueType
-> {
-	x?: number
-	y?: number
-	dy?: number
-	width?: number
-	className?: string
-	ariaLabel?: string
-	/** @defaultValue 40 */
-	height?: number
-	/** @defaultValue 5 */
-	travellerWidth?: number
-	traveller?: BrushTravellerType
-	/** @defaultValue 1 */
-	gap?: number
-	padding?: Padding
-	startIndex?: number
-	endIndex?: number
-	tickFormatter?: BrushTickFormatter
-	children?: JSX.Element
-	onChange?: OnBrushUpdate
-	onDragEnd?: OnBrushUpdate
-	/** @defaultValue 1000 */
-	leaveTimeOut?: number
-	/** @defaultValue false */
-	alwaysShowText?: boolean
-}
-
-export type Props = WithoutRemoveFalse<Omit<JSX.GSVGAttributes<SVGGElement>, "onChange" | "onDragEnd" | "ref">> &
-	BrushProps
-
-type InternalProps = WithoutRemoveFalse<Omit<JSX.GSVGAttributes<SVGGElement>, "onChange" | "onDragEnd" | "ref">> &
-	RequiresDefaultProps<BrushProps, typeof defaultBrushProps>
-
-type BrushTravellerId = "startX" | "endX"
-
-type TravellerProps = {
-	x: number
-	y: number
-	width: number
-	height: number
-	stroke?: string
-}
-
-function DefaultTraveller(props: TravellerProps) {
-	const lineY = () => Math.floor(props.y + props.height / 2) - 1
-
-	return (
-		<>
-			<rect
-				x={props.x}
-				y={props.y}
-				width={props.width}
-				height={props.height}
-				fill={props.stroke}
-				stroke="none"
-			/>
-			<line
-				x1={props.x + 1}
-				y1={lineY()}
-				x2={props.x + props.width - 1}
-				y2={lineY()}
-				fill="none"
-				stroke="#fff"
-			/>
-			<line
-				x1={props.x + 1}
-				y1={lineY() + 2}
-				x2={props.x + props.width - 1}
-				y2={lineY() + 2}
-				fill="none"
-				stroke="#fff"
-			/>
-		</>
-	)
-}
-
-/* eslint-disable solid/reactivity -- travellerType/travellerProps reads are structural type checks at component setup; Traveller is called once per mount, not in a reactive context */
-function Traveller(props: {
-	travellerType: BrushTravellerType | undefined
-	travellerProps: TravellerProps
-}): JSX.Element {
-	return <>{renderTraveller(props)}</>
-}
-
-/* Runs inside Traveller's JSX expression so every reactive read is tracked. */
-function renderTraveller(props: {
-	travellerType: BrushTravellerType | undefined
-	travellerProps: TravellerProps
-}) {
-	if (typeof props.travellerType === "function") {
-		return (props.travellerType as (p: TravellerProps) => JSX.Element)(props.travellerProps)
-	}
-	if (isJsxNode(props.travellerType)) {
-		return <>{cloneJsxNodeWithProps(props.travellerType, props.travellerProps as unknown as Record<string, unknown>) as unknown as JSX.Element}</>
-	}
-	return <DefaultTraveller {...props.travellerProps} />
-}
-/* eslint-enable solid/reactivity */
-
-function getNameFromUnknown(value: unknown): string | undefined {
-	if (
-		isNotNil(value) &&
-		typeof value === "object" &&
-		"name" in (value as Record<string, unknown>) &&
-		typeof (value as Record<string, unknown>).name === "string"
-	) {
-		return (value as Record<string, unknown>).name as string
-	}
-	return undefined
-}
-
-function getAriaLabel(data: ReadonlyArray<unknown>, startIndex: number, endIndex: number) {
-	const start = getNameFromUnknown(data[startIndex])
-	const end = getNameFromUnknown(data[endIndex])
-	return `Min value: ${start}, Max value: ${end}`
-}
-
-/* eslint-disable solid/reactivity -- plain utility fn; props parameter is not a Solid reactive proxy at this call site */
-function getTextOfTick(props: {
-	index: number
-	data: ChartData
-	dataKey: DataKey<unknown, string | number> | undefined
-	tickFormatter: BrushTickFormatter | undefined
-}): number | string {
-	const text: string | number = getValueByDataKey(
-		props.data[props.index],
-		props.dataKey,
-		props.index,
-	)
-	return typeof props.tickFormatter === "function" ? props.tickFormatter(text, props.index) : text
-}
-/* eslint-enable solid/reactivity */
-
-function getIndexInRange(valueRange: number[], x: number) {
-	const len = valueRange.length
-	let start = 0
-	let end = len - 1
-
-	while (end - start > 1) {
-		const middle = Math.floor((start + end) / 2)
-		const middleValue = valueRange[middle]
-
-		if (middleValue != null && middleValue > x) {
-			end = middle
-		} else {
-			start = middle
-		}
-	}
-
-	const endValue = valueRange[end]
-	return endValue != null && x >= endValue ? end : start
-}
-
-function getIndex({
-	startX,
-	endX,
-	scaleValues,
-	gap,
-	data,
-}: {
-	startX: number
-	endX: number
-	scaleValues: number[]
-	gap: number
-	data: ChartData
-}): BrushStartEndIndex {
-	const lastIndex = data.length - 1
-	const min = Math.min(startX, endX)
-	const max = Math.max(startX, endX)
-	const minIndex = getIndexInRange(scaleValues, min)
-	const maxIndex = getIndexInRange(scaleValues, max)
-	return {
-		endIndex: maxIndex === lastIndex ? lastIndex : maxIndex - (maxIndex % gap),
-		startIndex: minIndex - (minIndex % gap),
-	}
-}
-
-function Background(props: {
-	x: number
-	y: number
-	width: number
-	height: number
-	fill: string | undefined
-	stroke: string | undefined
-}) {
-	return (
-		<rect
-			stroke={props.stroke}
-			fill={props.fill}
-			x={props.x}
-			y={props.y}
-			width={props.width}
-			height={props.height}
-		/>
-	)
-}
-
-function BrushText(props: {
-	startIndex: number
-	endIndex: number
-	y: number
-	height: number
-	travellerWidth: number
-	stroke: string | undefined
-	tickFormatter: BrushTickFormatter | undefined
-	dataKey: DataKey<unknown> | undefined
-	data: ChartData
-	startX: number
-	endX: number
-}) {
-	const offset = 5
-	const attrs = () => ({
-		fill: props.stroke,
-		pointerEvents: "none" as const,
-	})
-
-	return (
-		<Layer class="recharts-brush-texts">
-			<Text
-				textAnchor="end"
-				verticalAnchor="middle"
-				x={Math.min(props.startX, props.endX) - offset}
-				y={props.y + props.height / 2}
-				{...attrs()}
-			>
-				{getTextOfTick({
-					data: props.data,
-					dataKey: props.dataKey,
-					index: props.startIndex,
-					tickFormatter: props.tickFormatter,
-				})}
-			</Text>
-			<Text
-				textAnchor="start"
-				verticalAnchor="middle"
-				x={Math.max(props.startX, props.endX) + props.travellerWidth + offset}
-				y={props.y + props.height / 2}
-				{...attrs()}
-			>
-				{getTextOfTick({
-					data: props.data,
-					dataKey: props.dataKey,
-					index: props.endIndex,
-					tickFormatter: props.tickFormatter,
-				})}
-			</Text>
-		</Layer>
-	)
-}
-
-function Slide(props: {
-	y: number
-	height: number
-	stroke: string | undefined
-	travellerWidth: number
-	startX: number
-	endX: number
-	onMouseEnter: (e: MouseEvent | TouchEvent) => void
-	onMouseLeave: (e: MouseEvent | TouchEvent) => void
-	onMouseDown: (e: MouseEvent | TouchEvent) => void
-	onTouchStart: (e: MouseEvent | TouchEvent) => void
-}) {
-	const x = () => Math.min(props.startX, props.endX) + props.travellerWidth
-	const width = () => Math.max(Math.abs(props.endX - props.startX) - props.travellerWidth, 0)
-
-	return (
-		<rect
-			class="recharts-brush-slide"
-			onMouseEnter={(e) => props.onMouseEnter(e)}
-			onMouseOver={(e) => props.onMouseEnter(e)}
-			onMouseLeave={(e) => props.onMouseLeave(e)}
-			onMouseOut={(e) => props.onMouseLeave(e)}
-			onMouseDown={(e) => props.onMouseDown(e)}
-			onTouchStart={(e) => props.onTouchStart(e)}
-			style={{ cursor: "move" }}
-			stroke="none"
-			fill={props.stroke}
-			fill-opacity={0.2}
-			x={x()}
-			y={props.y}
-			width={width()}
-			height={props.height}
-		/>
-	)
-}
-
-function Panorama(props: {
-	x: number
-	y: number
-	width: number
-	height: number
-	data: ChartData
-	children: JSX.Element | undefined
-	padding: Padding
-}) {
-	/* In Solid, we cannot use Children.count/Children.only. Instead we pass children directly. */
-	return <Show when={props.children != null}>{props.children}</Show>
-}
-
-const createScale = ({
-	data,
-	startIndex,
-	endIndex,
-	x,
-	width,
-	travellerWidth,
-}: {
-	data: ChartData | undefined
-	startIndex: number
-	endIndex: number
-	x: number
-	width: number
-	travellerWidth: number
-}) => {
-	if (!data || !data.length) {
-		return {}
-	}
-
-	const len = data.length
-	const scale = scalePoint<number>()
-		.domain(range(0, len))
-		.range([x, x + width - travellerWidth])
-	const scaleValues = scale
-		.domain()
-		.map((entry) => scale(entry))
-		.filter(isNotNil)
-
-	return {
-		endX: scale(endIndex),
-		scale,
-		scaleValues,
-		startX: scale(startIndex),
-	}
-}
-
-/**
- * Brush implemented with Solid signals instead of React class component state.
- */
-function BrushWithState(
-	props: InternalProps & {
-		data: ChartData
-		x: number
-		y: number
-		width: number
-		startIndex: number
-		endIndex: number
-		onChange: OnBrushUpdate
-		startIndexControlledFromProps?: number
-		endIndexControlledFromProps?: number
-	},
-) {
-	const scaleData = () =>
-		createScale({
-			data: props.data,
-			endIndex: props.endIndex,
-			startIndex: props.startIndex,
-			travellerWidth: props.travellerWidth,
-			width: props.width,
-			x: props.x,
-		})
-
-	/* Seed traveller positions before first render, like upstream's derived state. */
-	const initialScale = untrack(scaleData)
-	const [startX, setStartX] = createSignal(initialScale.startX ?? 0)
-	const [endX, setEndX] = createSignal(initialScale.endX ?? 0)
-	const [isTextActive, setIsTextActive] = createSignal(false)
-	const [isSlideMoving, setIsSlideMoving] = createSignal(false)
-	const [isTravellerMoving, setIsTravellerMoving] = createSignal(false)
-	const [isTravellerFocused, setIsTravellerFocused] = createSignal(false)
-
-	let slideMoveStartX = 0
-	let brushMoveStartX = 0
-	let movingTravellerId: BrushTravellerId | undefined
-	let leaveTimer: number | null = null
-	let prevData: ChartData | undefined
-	let prevWidth: number | undefined
-	let prevX: number | undefined
-	let prevTravellerWidth: number | undefined
-	let prevStartIndexControlledFromProps: number | undefined
-	let prevEndIndexControlledFromProps: number | undefined
-
-	createEffect(
-		() => ({
-			data: props.data,
-			endControlled: props.endIndexControlledFromProps,
-			endIndex: props.endIndex,
-			interacting: isSlideMoving() || isTravellerMoving() || isTravellerFocused() || isTextActive(),
-			startControlled: props.startIndexControlledFromProps,
-			startIndex: props.startIndex,
-			travellerWidth: props.travellerWidth,
-			width: props.width,
-			x: props.x,
-		}),
-		(input) => untrack(() => {
-		const { data, endControlled, endIndex, interacting, startControlled, startIndex, travellerWidth, width, x } = input
-		const sd = createScale({
-			data,
-			endIndex,
-			startIndex,
-			travellerWidth,
-			width,
-			x,
-		})
-
-		if (data !== prevData) {
-			prevData = data
-			prevWidth = width
-			prevX = x
-			prevTravellerWidth = travellerWidth
-			prevStartIndexControlledFromProps = startControlled
-			prevEndIndexControlledFromProps = endControlled
-			if (sd.startX != null) setStartX(sd.startX)
-			if (sd.endX != null) setEndX(sd.endX)
-			return
-		}
-
-		if (width !== prevWidth || x !== prevX || travellerWidth !== prevTravellerWidth) {
-			prevWidth = width
-			prevX = x
-			prevTravellerWidth = travellerWidth
-			if (sd.startX != null) setStartX(sd.startX)
-			if (sd.endX != null) setEndX(sd.endX)
-			return
-		}
-
-		if (interacting) {
-			return
-		}
-
-		if (startControlled != null && prevStartIndexControlledFromProps !== startControlled) {
-			prevStartIndexControlledFromProps = startControlled
-			const next = createScale({
-				data,
-				endIndex,
-				startIndex: startControlled,
-				travellerWidth,
-				width,
-				x,
-			})
-			if (next.startX != null) setStartX(next.startX)
-		}
-		if (endControlled != null && prevEndIndexControlledFromProps !== endControlled) {
-			prevEndIndexControlledFromProps = endControlled
-			const next = createScale({
-				data,
-				endIndex: endControlled,
-				startIndex,
-				travellerWidth,
-				width,
-				x,
-			})
-			if (next.endX != null) setEndX(next.endX)
-		}
-		}),
-	)
-
-	const detachDragEndListener = () => {
-		window.removeEventListener("mouseup", handleDragEnd, true)
-		window.removeEventListener("touchend", handleDragEnd, true)
-		window.removeEventListener("mousemove", handleDrag, true)
-	}
-
-	const attachDragEndListener = () => {
-		window.addEventListener("mouseup", handleDragEnd, true)
-		window.addEventListener("touchend", handleDragEnd, true)
-		window.addEventListener("mousemove", handleDrag, true)
-	}
-
-	onCleanup(() => {
-		if (leaveTimer) {
-			clearTimeout(leaveTimer)
-			leaveTimer = null
-		}
-		detachDragEndListener()
-	})
-
-	const handleDragEnd = () => {
-		setIsTravellerMoving(false)
-		setIsSlideMoving(false)
-		props.onDragEnd?.({ endIndex: props.endIndex, startIndex: props.startIndex })
-		detachDragEndListener()
-	}
-
-	const handleDrag = (e: MouseEvent | TouchEvent) => {
-		if (leaveTimer) {
-			clearTimeout(leaveTimer)
-			leaveTimer = null
-		}
-		const pageX = "changedTouches" in e ? (e.changedTouches[0]?.pageX ?? 0) : e.pageX
-		if (isTravellerMoving()) {
-			handleTravellerMove(pageX)
-		} else if (isSlideMoving()) {
-			handleSlideDrag(pageX)
-		}
-	}
-
-	const handleSlideDrag = (pageX: number) => {
-		const sv = scaleData().scaleValues
-		if (sv == null) return
-		let delta = pageX - slideMoveStartX
-
-		if (delta > 0) {
-			delta = Math.min(
-				delta,
-				props.x + props.width - props.travellerWidth - endX(),
-				props.x + props.width - props.travellerWidth - startX(),
-			)
-		} else if (delta < 0) {
-			delta = Math.max(delta, props.x - startX(), props.x - endX())
-		}
-		const newIndex = getIndex({
-			data: props.data,
-			endX: endX() + delta,
-			gap: props.gap,
-			scaleValues: sv,
-			startX: startX() + delta,
-		})
-
-		if (newIndex.startIndex !== props.startIndex || newIndex.endIndex !== props.endIndex) {
-			props.onChange(newIndex)
-		}
-
-		setStartX((prev) => prev + delta)
-		setEndX((prev) => prev + delta)
-		slideMoveStartX = pageX
-	}
-
-	const handleTravellerMove = (pageX: number) => {
-		const sv = scaleData().scaleValues
-		if (movingTravellerId == null || sv == null) return
-		const prevValue = movingTravellerId === "startX" ? startX() : endX()
-
-		let delta = pageX - brushMoveStartX
-		if (delta > 0) {
-			delta = Math.min(delta, props.x + props.width - props.travellerWidth - prevValue)
-		} else if (delta < 0) {
-			delta = Math.max(delta, props.x - prevValue)
-		}
-
-		const params = {
-			data: props.data,
-			endX: endX(),
-			gap: props.gap,
-			scaleValues: sv,
-			startX: startX(),
-		}
-		if (movingTravellerId === "startX") {
-			params.startX = prevValue + delta
-		} else {
-			params.endX = prevValue + delta
-		}
-
-		const newIndex = getIndex(params)
-
-		if (movingTravellerId === "startX") {
-			setStartX(prevValue + delta)
-		} else {
-			setEndX(prevValue + delta)
-		}
-		brushMoveStartX = pageX
-
-		props.onChange(newIndex)
-	}
-
-	const handleSlideDragStart = (e: MouseEvent | TouchEvent) => {
-		const pageX =
-			"changedTouches" in e ? (e.changedTouches[0]?.pageX ?? 0) : (e as MouseEvent).pageX
-		setIsTravellerMoving(false)
-		setIsSlideMoving(true)
-		slideMoveStartX = pageX
-		attachDragEndListener()
-	}
-
-	const handleTravellerDragStart = (id: BrushTravellerId, e: MouseEvent | TouchEvent) => {
-		const pageX =
-			"changedTouches" in e ? (e.changedTouches[0]?.pageX ?? 0) : (e as MouseEvent).pageX
-		setIsSlideMoving(false)
-		setIsTravellerMoving(true)
-		movingTravellerId = id
-		brushMoveStartX = pageX
-		attachDragEndListener()
-	}
-
-	const handleTravellerMoveKeyboard = (direction: 1 | -1, id: BrushTravellerId) => {
-		const sv = scaleData().scaleValues
-		if (sv == null) return
-
-		let currentIndex = -1
-		if (id === "startX") currentIndex = props.startIndex
-		else if (id === "endX") currentIndex = props.endIndex
-
-		if (currentIndex < 0 || currentIndex >= props.data.length) return
-
-		const newIndex = currentIndex + direction
-		if (newIndex === -1 || newIndex >= sv.length) return
-
-		const newScaleValue = sv[newIndex]
-		if (newScaleValue == null) return
-
-		if (
-			(id === "startX" && newScaleValue >= endX()) ||
-			(id === "endX" && newScaleValue <= startX())
-		)
-			return
-
-		if (id === "startX") setStartX(newScaleValue)
-		else setEndX(newScaleValue)
-
-		props.onChange(
-			getIndex({
-				data: props.data,
-				endX: id === "endX" ? newScaleValue : endX(),
-				gap: props.gap,
-				scaleValues: sv,
-				startX: id === "startX" ? newScaleValue : startX(),
-			}),
-		)
-	}
-
-	const handleLeaveWrapper = () => {
-		if (isTravellerMoving() || isSlideMoving()) {
-			leaveTimer = window.setTimeout(handleDragEnd, props.leaveTimeOut)
-		}
-	}
-
-	const handleEnterSlideOrTraveller = () => setIsTextActive(true)
-	const handleLeaveSlideOrTraveller = () => setIsTextActive(false)
-	/* React's onMouseEnter/Leave derive from mouseover/mouseout; a mouseout into one of the
-	   traveller's own children is not a leave. */
-	const handleOutSlideOrTraveller = (e: MouseEvent) => {
-		const next = e.relatedTarget as Node | null
-		if (next != null && (e.currentTarget as Element).contains(next)) {
-			return
-		}
-		handleLeaveSlideOrTraveller()
-	}
-
-	const calculatedY = () => props.y + (props.dy ?? 0)
-
-	const shouldRender = () =>
-		props.data &&
-		props.data.length &&
-		isNumber(props.x) &&
-		isNumber(props.y) &&
-		isNumber(props.width) &&
-		isNumber(props.height) &&
-		props.width > 0 &&
-		props.height > 0
-
-	const layerClass = () => clsx("recharts-brush", props.className)
-	const style = generatePrefixStyle("userSelect", "none")
-	const ariaLabelBrush = () =>
-		props.ariaLabel || getAriaLabel(props.data, props.startIndex, props.endIndex)
-
-	const travellerProps = (travellerX: number): TravellerProps => {
-		const filteredSvg = svgPropertiesNoEvents(props) as Record<string, unknown>
-		const { x: _x, y: _y, width: _w, height: _h, ...rest } = filteredSvg
-		return {
-			x: Math.max(travellerX, props.x),
-			y: calculatedY(),
-			width: props.travellerWidth,
-			height: props.height,
-			...(rest as Record<string, unknown>),
-		} as TravellerProps
-	}
-
-	return (
-		<Show when={shouldRender()}>
-			<Layer
-				class={layerClass()}
-				onMouseLeave={handleLeaveWrapper}
-				onTouchMove={(e: TouchEvent) => {
-					const touch = e.changedTouches?.[0]
-					if (touch != null) handleDrag(e)
-				}}
-				style={style}
-			>
-				<Background
-					x={props.x}
-					y={calculatedY()}
-					width={props.width}
-					height={props.height}
-					fill={props.fill}
-					stroke={props.stroke}
-				/>
-				<PanoramaContextProvider>
-					<Panorama
-						x={props.x}
-						y={calculatedY()}
-						width={props.width}
-						height={props.height}
-						data={props.data}
-						padding={props.padding}
-					>
-						{props.children}
-					</Panorama>
-				</PanoramaContextProvider>
-				<Slide
-					y={calculatedY()}
-					height={props.height}
-					stroke={props.stroke}
-					travellerWidth={props.travellerWidth}
-					startX={startX()}
-					endX={endX()}
-					onMouseEnter={handleEnterSlideOrTraveller}
-					onMouseLeave={handleLeaveSlideOrTraveller}
-					onMouseDown={handleSlideDragStart}
-					onTouchStart={handleSlideDragStart}
-				/>
-				{/* Start traveller */}
-				<Layer
-					tabindex={0}
-					/* eslint-disable-next-line jsx-a11y/prefer-tag-over-role -- SVG has no <input>; upstream uses role="slider" on the traveller group */
-					role="slider"
-					aria-label={ariaLabelBrush()}
-					aria-valuemin={0}
-					aria-valuemax={props.data.length - 1}
-					aria-valuenow={startX()}
-					class="recharts-brush-traveller"
-					onMouseEnter={handleEnterSlideOrTraveller}
-					onMouseOver={handleEnterSlideOrTraveller}
-					onMouseLeave={handleLeaveSlideOrTraveller}
-					onMouseOut={handleOutSlideOrTraveller}
-					onMouseDown={(e: MouseEvent) => handleTravellerDragStart("startX", e)}
-					onTouchStart={(e: TouchEvent) => handleTravellerDragStart("startX", e)}
-					onKeyDown={(e: KeyboardEvent) => {
-						if (!["ArrowLeft", "ArrowRight"].includes(e.key)) return
-						e.preventDefault()
-						e.stopPropagation()
-						handleTravellerMoveKeyboard(e.key === "ArrowRight" ? 1 : -1, "startX")
-					}}
-					onFocus={() => setIsTravellerFocused(true)}
-					onBlur={() => setIsTravellerFocused(false)}
-					style={{ cursor: "col-resize" }}
-				>
-					<Traveller travellerType={props.traveller} travellerProps={travellerProps(startX())} />
-				</Layer>
-				{/* End traveller */}
-				<Layer
-					tabindex={0}
-					/* eslint-disable-next-line jsx-a11y/prefer-tag-over-role -- SVG has no <input>; upstream uses role="slider" on the traveller group */
-					role="slider"
-					aria-label={ariaLabelBrush()}
-					aria-valuemin={0}
-					aria-valuemax={props.data.length - 1}
-					aria-valuenow={endX()}
-					class="recharts-brush-traveller"
-					onMouseEnter={handleEnterSlideOrTraveller}
-					onMouseOver={handleEnterSlideOrTraveller}
-					onMouseLeave={handleLeaveSlideOrTraveller}
-					onMouseOut={handleOutSlideOrTraveller}
-					onMouseDown={(e: MouseEvent) => handleTravellerDragStart("endX", e)}
-					onTouchStart={(e: TouchEvent) => handleTravellerDragStart("endX", e)}
-					onKeyDown={(e: KeyboardEvent) => {
-						if (!["ArrowLeft", "ArrowRight"].includes(e.key)) return
-						e.preventDefault()
-						e.stopPropagation()
-						handleTravellerMoveKeyboard(e.key === "ArrowRight" ? 1 : -1, "endX")
-					}}
-					onFocus={() => setIsTravellerFocused(true)}
-					onBlur={() => setIsTravellerFocused(false)}
-					style={{ cursor: "col-resize" }}
-				>
-					<Traveller travellerType={props.traveller} travellerProps={travellerProps(endX())} />
-				</Layer>
-				<Show
-					when={
-						isTextActive() ||
-						isSlideMoving() ||
-						isTravellerMoving() ||
-						isTravellerFocused() ||
-						props.alwaysShowText
-					}
-				>
-					<BrushText
-						startIndex={props.startIndex}
-						endIndex={props.endIndex}
-						y={calculatedY()}
-						height={props.height}
-						travellerWidth={props.travellerWidth}
-						stroke={props.stroke}
-						tickFormatter={props.tickFormatter}
-						dataKey={props.dataKey}
-						data={props.data}
-						startX={startX()}
-						endX={endX()}
-					/>
-				</Show>
-			</Layer>
-		</Show>
-	)
-}
-
-function BrushInternal(props: InternalProps) {
-	const ctx = useChartStore()
-	const newCtx = useOptionalChartState()
-	/* Memos resolve context at setup, so event handlers can read them later. */
-	const chartData = createMemo(() => useChartData())
-	const dataIndexes = createMemo(() => useDataIndex())
-	const onChangeFromProps = () => props.onChange
-
-	createEffect(
-		() => {
-			chartData()
-			return { endIndex: props.endIndex, startIndex: props.startIndex }
-		},
-		({ endIndex, startIndex }) => {
-			if (startIndex !== undefined) {
-				newCtx?.setState("chartData", "dataStartIndex", startIndex)
-			}
-			if (endIndex !== undefined) {
-				newCtx?.setState("chartData", "dataEndIndex", endIndex)
-			}
-		},
-	)
-
-	useBrushChartSynchronisation()
-
-	const onChange = (nextState: BrushStartEndIndex) => {
-		const idx = dataIndexes()
-		if (idx == null) return
-		if (nextState.startIndex !== idx.startIndex || nextState.endIndex !== idx.endIndex) {
-			onChangeFromProps()?.(nextState)
-			if (nextState.startIndex !== undefined) {
-				newCtx?.setState("chartData", "dataStartIndex", nextState.startIndex)
-			}
-			if (nextState.endIndex !== undefined) {
-				newCtx?.setState("chartData", "dataEndIndex", nextState.endIndex)
-			}
-		}
-	}
-
-	/* perf: cache selector result; without memo every consumer read triggers full chain. */
-	const brushDimensions = createMemo(() => (ctx ? selectBrushDimensions(ctx.store) : undefined))
-
-	return (
-		<Show
-			when={
-				brushDimensions() != null &&
-				dataIndexes() != null &&
-				chartData() != null &&
-				chartData()?.length
-			}
-		>
-			<BrushWithState
-				{...props}
-				data={chartData() as ChartData}
-				x={brushDimensions()?.x ?? 0}
-				y={brushDimensions()?.y ?? 0}
-				width={brushDimensions()?.width ?? 0}
-				startIndex={dataIndexes()?.startIndex ?? 0}
-				endIndex={dataIndexes()?.endIndex ?? 0}
-				onChange={onChange}
-				startIndexControlledFromProps={props.startIndex ?? undefined}
-				endIndexControlledFromProps={props.endIndex ?? undefined}
-			/>
-		</Show>
-	)
-}
-
-function BrushSettingsDispatcher(props: BrushSettings): null {
-	const newCtx = useOptionalChartState()
-	createEffect(
-		() => ({ height: props.height, padding: props.padding, width: props.width, x: props.x, y: props.y }),
-		(settings) => {
-			newCtx?.setState("brush", settings)
-			return () => {
-				teardownWrite(() => {
-					newCtx?.setState("brush", { height: 0, padding: { bottom: 0, left: 0, right: 0, top: 0 }, width: 0, x: 0, y: 0 })
-				})
-			}
-		},
-	)
-	return null
-}
-
-export const defaultBrushProps = {
-	alwaysShowText: false,
-	fill: "#fff",
-	gap: 1,
-	height: 40,
-	leaveTimeOut: 1000,
-	padding: { bottom: 1, left: 1, right: 1, top: 1 },
-	stroke: "#666",
-	travellerWidth: 5,
-} as const satisfies Partial<Props>
-
-/**
- * Renders a scrollbar that allows the user to zoom and pan in the chart along its XAxis.
- * It also allows you to render a small overview of the chart inside the brush that is always visible
- * and shows the full data set so that the user can see where they are zoomed in.
- *
- * If a chart is synchronized with other charts using the `syncId` prop on the chart,
- * the brush will also synchronize the zooming and panning between all synchronized charts.
- *
- * @see {@link https://recharts.github.io/en-US/examples/BrushBarChart/ BarChart with Brush}
- * @see {@link https://recharts.github.io/en-US/examples/SynchronizedLineChart/ Synchronized Brush}
- *
- * @consumes CartesianChartContext
- */
-export function Brush(outsideProps: Props) {
-	const props = resolveDefaultProps(outsideProps, defaultBrushProps)
-	return (
-		<>
-			<BrushSettingsDispatcher
-				height={props.height}
-				x={props.x}
-				y={props.y}
-				width={props.width}
-				padding={props.padding}
-			/>
-			<BrushInternal {...props} />
-		</>
-	)
-}
-Brush.displayName = "Brush"