@solidports/recharts 0.1.0 → 0.1.1

package/src/cartesian/CartesianGrid.tsx

@@ -1,711 +0,0 @@
-/* eslint-disable import/no-cycle */
-import type { JSX } from '@solidjs/web';
-import type { CamelCaseSVGAttrs } from "../util/CamelCaseSVGAttrs"
-import type { WithoutRemoveFalse } from "../util/types"
-import { createMemo, For, Show } from 'solid-js';
-import { warn } from "../util/LogUtils"
-import { isNumber } from "../util/DataUtils"
-import { ChartOffsetInternal } from "../util/types"
-
-import {
-	AxisPropsNeededForTicksGenerator,
-	getCoordinatesOfGrid,
-	getTicksOfAxis,
-} from "../util/ChartUtils"
-import { getTicks, GetTicksInput } from "./getTicks"
-import { defaultCartesianAxisProps } from "./CartesianAxis"
-import { useChartHeight, useChartWidth, useOffsetInternal } from "../context/chartLayoutContext"
-import { AxisId } from "../state/cartesianAxisSlice"
-import { selectAxisPropsNeededForCartesianGridTicksGenerator } from "../state/selectors/axisSelectors"
-import { useChartStore } from "../state/RechartsStoreContext"
-import { useIsPanorama } from "../context/PanoramaContext"
-import { RequiresDefaultProps, resolveDefaultProps } from "../util/resolveDefaultProps"
-import { svgPropertiesNoEvents } from "../util/svgPropertiesNoEvents"
-import { isPositiveNumber } from "../util/isWellBehavedNumber"
-import { ZIndexable, ZIndexLayer } from "../zIndex/ZIndexLayer"
-import { DefaultZIndexes } from "../zIndex/DefaultZIndexes"
-
-import { splitProps } from '../util/solid-1-compat';
-import { useRechartsTheme } from "../theme/RechartsThemeContext"
-/**
- * The <CartesianGrid horizontal
- */
-export type GridLineTypeFunctionProps = Omit<LineItemProps, "key"> & {
-	key: LineItemProps["key"] | undefined
-	offset: ChartOffsetInternal
-}
-
-export type AxisPropsForCartesianGridTicksGeneration = AxisPropsNeededForTicksGenerator &
-	Omit<GetTicksInput, "ticks" | "viewBox">
-
-type GridLineType =
-	| JSX.LineSVGAttributes<SVGLineElement>
-	| JSX.Element
-	| ((props: GridLineTypeFunctionProps) => JSX.Element)
-	| boolean
-
-export type HorizontalCoordinatesGenerator = (
-	props: {
-		yAxis: AxisPropsForCartesianGridTicksGeneration | undefined
-		width: number
-		height: number
-		offset: ChartOffsetInternal
-	},
-	syncWithTicks: boolean,
-) => number[]
-
-export type VerticalCoordinatesGenerator = (
-	props: {
-		xAxis: AxisPropsForCartesianGridTicksGeneration | undefined
-		width: number
-		height: number
-		offset: ChartOffsetInternal
-	},
-	syncWithTicks: boolean,
-) => number[]
-
-interface CartesianGridProps extends ZIndexable {
-	/**
-	 * The width of grid. If undefined, covers the full width of the chart plot area.
-	 */
-	width?: number
-	/**
-	 * The height of grid. If undefined, covers the full height of the chart plot area.
-	 */
-	height?: number
-	/**
-	 * A function that generates the y-coordinates of all horizontal lines.
-	 *
-	 * @see {@link https://codesandbox.io/p/sandbox/cartesian-grid-with-coordinate-generators-my38cg?file=%2Fsrc%2FApp.tsx Cartesian grid with coordinate generators}
-	 */
-	horizontalCoordinatesGenerator?: HorizontalCoordinatesGenerator
-	/**
-	 * A function that generates the x-coordinates of all vertical lines.
-	 *
-	 * @see {@link https://codesandbox.io/p/sandbox/cartesian-grid-with-coordinate-generators-my38cg?file=%2Fsrc%2FApp.tsx Cartesian grid with coordinate generators}
-	 */
-	verticalCoordinatesGenerator?: VerticalCoordinatesGenerator
-	/**
-	 * The x-coordinate of grid.
-	 * If left undefined, it will be computed from the chart's offset and margins.
-	 */
-	x?: number
-	/**
-	 * The y-coordinate of grid.
-	 * If left undefined, it will be computed from the chart's offset and margins.
-	 */
-	y?: number
-	/**
-	 * If set false, no horizontal grid lines will be drawn.
-	 *
-	 * @defaultValue true
-	 */
-	horizontal?: GridLineType
-	/**
-	 * If set false, no vertical grid lines will be drawn.
-	 *
-	 * @defaultValue true
-	 */
-	vertical?: GridLineType
-	/**
-	 * Array of coordinates in pixels where to draw horizontal grid lines.
-	 * Has priority over syncWithTicks and horizontalValues.
-	 *
-	 * @defaultValue []
-	 */
-	horizontalPoints?: number[]
-	/**
-	 * Array of coordinates in pixels where to draw vertical grid lines.
-	 * Has priority over syncWithTicks and verticalValues.
-	 *
-	 * @defaultValue []
-	 */
-	verticalPoints?: number[]
-	/**
-	 * The background color used to fill the space between grid lines
-	 *
-	 * @defaultValue none
-	 * @example <CartesianGrid fill="red" />
-	 * @example <CartesianGrid fill="#ccc" />
-	 */
-	fill?: string
-	/**
-	 * The opacity of the background used to fill the space between grid lines
-	 *
-	 * @example <CartesianGrid fill="red" fillOpacity={0.6} />
-	 */
-	fillOpacity?: number | string
-	/**
-	 * Defines background color of stripes.
-	 *
-	 * The values from this array will be passed in as the `fill` property in a `rect` SVG element.
-	 * For possible values see: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill#rect
-	 *
-	 * In case there are more stripes than colors, the colors will start from beginning.
-	 * So for example: verticalFill['yellow', 'black'] produces a pattern of yellow|black|yellow|black
-	 *
-	 * If this is undefined, or an empty array, then there is no background fill.
-	 * Note: Grid lines will be rendered above these background stripes.
-	 *
-	 * @defaultValue []
-	 */
-	verticalFill?: string[]
-	/**
-	 * Defines background color of stripes.
-	 *
-	 * The values from this array will be passed in as the `fill` property in a `rect` SVG element.
-	 * For possible values see: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill#rect
-	 *
-	 * In case there are more stripes than colors, the colors will start from beginning.
-	 * So for example: horizontalFill['yellow', 'black'] produces a pattern of yellow|black|yellow|black
-	 *
-	 * If this is undefined, or an empty array, then there is no background fill.
-	 * Note: Grid lines will be rendered above these background stripes.
-	 *
-	 * @defaultValue []
-	 */
-	horizontalFill?: string[]
-	/**
-	 * If true, only the lines that correspond to the axes ticks values will be drawn.
-	 * If false, extra lines could be added for each axis (at min and max coordinates), if there will not such ticks.
-	 * horizontalPoints, verticalPoints, horizontalValues, verticalValues have priority over syncWithTicks.
-	 *
-	 * @defaultValue false
-	 */
-	syncWithTicks?: boolean
-	/**
-	 * Array of values, where horizontal lines will be drawn. Numbers or strings, in dependence on axis type.
-	 * Has priority over syncWithTicks but not over horizontalPoints.
-	 */
-	horizontalValues?: number[] | string[]
-	/**
-	 * Array of values, where vertical lines will be drawn. Numbers or strings, in dependence on axis type.
-	 * Has priority over syncWithTicks but not over verticalPoints.
-	 */
-	verticalValues?: number[] | string[]
-	/**
-	 * The pattern of dashes and gaps used to paint the lines of the grid
-	 *
-	 * @example <CartesianGrid strokeDasharray="3 3" />
-	 * @example <CartesianGrid strokeDasharray={[5, 5, 1, 5]} />
-	 * @example <CartesianGrid strokeDasharray="5 5 1 5" />
-	 * @see {@link https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray stroke-dasharray on MDN}
-	 */
-	strokeDasharray?: string | number | ReadonlyArray<number>
-	/**
-	 * The id of XAxis which is corresponding to the data. Required when there are multiple XAxes.
-	 * @defaultValue 0
-	 */
-	xAxisId?: AxisId
-	/**
-	 * The id of YAxis which is corresponding to the data. Required when there are multiple YAxes.
-	 * @defaultValue 0
-	 */
-	yAxisId?: AxisId
-	/**
-	 * @defaultValue -100
-	 */
-	zIndex?: number
-}
-
-type AcceptedSvgProps = WithoutRemoveFalse<Omit<JSX.LineSVGAttributes<SVGLineElement>, "offset" | "stroke-dasharray">> &
-	Omit<CamelCaseSVGAttrs, "strokeDasharray">
-
-export type Props = AcceptedSvgProps & CartesianGridProps
-
-type CartesianGridInternalProps = AcceptedSvgProps &
-	RequiresDefaultProps<CartesianGridProps, typeof defaultCartesianGridProps> & {
-		x: number
-		y: number
-		width: number
-		height: number
-	}
-
-function Background(props: {
-	fill?: string | number
-	fillOpacity?: string | number
-	x?: string | number
-	y?: string | number
-	width?: string | number
-	height?: string | number
-	ry?: string | number
-}) {
-	return (
-		<Show when={props.fill && props.fill !== "none"}>
-			<rect
-				x={props.x}
-				y={props.y}
-				ry={props.ry}
-				width={props.width}
-				height={props.height}
-				stroke="none"
-				fill={String(props.fill)}
-				fill-opacity={props.fillOpacity}
-				class="recharts-cartesian-grid-bg"
-			/>
-		</Show>
-	)
-}
-
-type LineItemProps = Props & {
-	offset: ChartOffsetInternal
-	xAxis: undefined | AxisPropsForCartesianGridTicksGeneration
-	yAxis: undefined | AxisPropsForCartesianGridTicksGeneration
-	x1: number
-	y1: number
-	x2: number
-	y2: number
-	key: string
-	index: number
-}
-
-/* eslint-disable solid/reactivity -- plain utility fn; lineItemProps is not a Solid reactive proxy at this call site */
-function renderDefaultLine(lineItemProps: LineItemProps) {
-	const { x1, y1, x2, y2, key: _key, ...others } = lineItemProps
-	const { offset: __, ...restOfFilteredProps } = svgPropertiesNoEvents(others) ?? {}
-	return <line {...restOfFilteredProps} x1={x1} y1={y1} x2={x2} y2={y2} fill="none" />
-}
-/* eslint-enable solid/reactivity */
-
-/* React `cloneElement(option, props)` produces a fresh vNode per call; Solid
- * JSX evaluates eagerly to a Node, so the same returned reference cannot be
- * inserted twice (DOM moves it). When the option is a function whose return
- * is a stable Node ref (e.g. `vi.fn().mockReturnValue(<g />)`, or a JSX literal
- * passed as `horizontal={<X />}`), clone the resulting node so each iteration
- * gets its own subtree. Returns from real component fns are usually fresh per
- * call and clone is a cheap no-op shape on those. */
-function cloneIfNode(value: unknown): unknown {
-	if (value != null && typeof value === "object" && "cloneNode" in value) {
-		return (value as Node).cloneNode(true)
-	}
-	return value
-}
-
-/* eslint-disable solid/reactivity -- itemProps reads are structural type checks at component setup; LineItem is called once per grid line, not in a reactive context */
-function LineItem(itemProps: { option: GridLineType; lineItemProps: LineItemProps }): JSX.Element {
-	return <>{renderLineItem(itemProps)}</>
-}
-
-/* Runs inside LineItem's JSX expression so every reactive read is tracked. */
-function renderLineItem(itemProps: { option: GridLineType; lineItemProps: LineItemProps }) {
-	if (typeof itemProps.option === "function") {
-		const fn = itemProps.option
-		const fnProps: GridLineTypeFunctionProps = {
-			...itemProps.lineItemProps,
-			key: itemProps.lineItemProps.key,
-			offset: itemProps.lineItemProps.offset,
-		}
-		return <>{cloneIfNode(fn(fnProps)) as JSX.Element}</>
-	}
-	if (itemProps.option != null && typeof itemProps.option === "object" && "cloneNode" in (itemProps.option as object)) {
-		return <>{(itemProps.option as Node).cloneNode(true) as unknown as JSX.Element}</>
-	}
-
-	return renderDefaultLine(itemProps.lineItemProps)
-}
-/* eslint-enable solid/reactivity */
-
-type GridLinesProps = CartesianGridInternalProps & {
-	offset: GridLineTypeFunctionProps["offset"]
-	xAxis: GridLineTypeFunctionProps["xAxis"]
-	yAxis: GridLineTypeFunctionProps["yAxis"]
-}
-
-function HorizontalGridLines(props: GridLinesProps) {
-	const horizontal = () => props.horizontal ?? true
-	const horizontalPoints = () => props.horizontalPoints
-	/* Mirrors upstream: `const { xAxisId, yAxisId, ...otherLineItemProps } = props`.
-	 * The internal `LineItemProps` shape consumed by user-supplied vertical/horizontal
-	 * render functions does not carry axis ids — those live in CartesianGrid's own
-	 * default-resolved props and are stripped before forwarding. */
-	const [, otherProps] = splitProps(props, ["xAxisId", "yAxisId"])
-
-	return (
-		<Show when={horizontal() && horizontalPoints() && horizontalPoints()?.length}>
-			<g class="recharts-cartesian-grid-horizontal">
-				<For each={horizontalPoints()}>
-					{(entry, i) => {
-						const lineItemProps = (): LineItemProps => ({
-							...otherProps,
-							index: i(),
-							key: `line-${i()}`,
-							x1: props.x,
-							x2: props.x + props.width,
-							y1: entry,
-							y2: entry,
-						})
-
-						return <LineItem option={horizontal()} lineItemProps={lineItemProps()} />
-					}}
-				</For>
-			</g>
-		</Show>
-	)
-}
-
-function VerticalGridLines(props: GridLinesProps) {
-	const vertical = () => props.vertical ?? true
-	const verticalPoints = () => props.verticalPoints
-	const [, otherProps] = splitProps(props, ["xAxisId", "yAxisId"])
-
-	return (
-		<Show when={vertical() && verticalPoints() && verticalPoints()?.length}>
-			<g class="recharts-cartesian-grid-vertical">
-				<For each={verticalPoints()}>
-					{(entry, i) => {
-						const lineItemProps = (): LineItemProps => ({
-							...otherProps,
-							index: i(),
-							key: `line-${i()}`,
-							x1: entry,
-							x2: entry,
-							y1: props.y,
-							y2: props.y + props.height,
-						})
-
-						return <LineItem option={vertical()} lineItemProps={lineItemProps()} />
-					}}
-				</For>
-			</g>
-		</Show>
-	)
-}
-
-function HorizontalStripes(props: CartesianGridInternalProps) {
-	const horizontal = () => props.horizontal ?? true
-
-	const sortedPoints = () => {
-		if (
-			!horizontal() ||
-			!props.horizontalFill ||
-			!props.horizontalFill.length ||
-			props.horizontalPoints == null
-		) {
-			return null
-		}
-		const rounded = props.horizontalPoints
-			.map((e) => Math.round(e + props.y - props.y))
-			.sort((a, b) => a - b)
-		if (props.y !== rounded[0]) {
-			rounded.unshift(0)
-		}
-		return rounded
-	}
-
-	/* eslint-disable solid/reactivity -- i() is the <For> index accessor; reads inside the For callback ARE tracked */
-	/* Runs inside a JSX expression so prop and store reads are tracked. */
-	const renderHorizontalStripe = (entry: number, i: number): JSX.Element => {
-		const pts = sortedPoints()
-		if (pts == null) return null
-		const nextPoint = pts[i + 1]
-		const lastStripe = nextPoint == null
-		const lineHeight = lastStripe ? props.y + props.height - entry : nextPoint - entry
-		if (lineHeight <= 0) {
-			return null
-		}
-		const colorIndex = i % (props.horizontalFill?.length ?? 1)
-		return (
-			<rect
-				y={entry}
-				x={props.x}
-				height={lineHeight}
-				width={props.width}
-				stroke="none"
-				fill={props.horizontalFill?.[colorIndex]}
-				fill-opacity={props.fillOpacity}
-				class="recharts-cartesian-grid-bg"
-			/>
-		)
-	}
-
-	return (
-		<Show when={sortedPoints()}>
-			<g class="recharts-cartesian-gridstripes-horizontal">
-				<For each={sortedPoints()}>
-					{(entry, i) => <>{renderHorizontalStripe(entry, i())}</>}
-				</For>
-			</g>
-		</Show>
-	)
-	/* eslint-enable solid/reactivity */
-}
-
-function VerticalStripes(props: CartesianGridInternalProps) {
-	const vertical = () => props.vertical ?? true
-
-	const sortedPoints = () => {
-		if (!vertical() || !props.verticalFill || !props.verticalFill.length) {
-			return null
-		}
-		const rounded = props.verticalPoints
-			.map((e) => Math.round(e + props.x - props.x))
-			.sort((a, b) => a - b)
-		if (props.x !== rounded[0]) {
-			rounded.unshift(0)
-		}
-		return rounded
-	}
-
-	/* eslint-disable solid/reactivity -- i() is the <For> index accessor; reads inside the For callback ARE tracked */
-	/* Runs inside a JSX expression so prop and store reads are tracked. */
-	const renderVerticalStripe = (entry: number, i: number): JSX.Element => {
-		const pts = sortedPoints()
-		if (pts == null) return null
-		const nextPoint = pts[i + 1]
-		const lastStripe = nextPoint == null
-		const lineWidth = lastStripe ? props.x + props.width - entry : nextPoint - entry
-		if (lineWidth <= 0) {
-			return null
-		}
-		const colorIndex = i % (props.verticalFill?.length ?? 1)
-		return (
-			<rect
-				x={entry}
-				y={props.y}
-				width={lineWidth}
-				height={props.height}
-				stroke="none"
-				fill={props.verticalFill?.[colorIndex]}
-				fill-opacity={props.fillOpacity}
-				class="recharts-cartesian-grid-bg"
-			/>
-		)
-	}
-
-	return (
-		<Show when={sortedPoints()}>
-			<g class="recharts-cartesian-gridstripes-vertical">
-				<For each={sortedPoints()}>
-					{(entry, i) => <>{renderVerticalStripe(entry, i())}</>}
-				</For>
-			</g>
-		</Show>
-	)
-	/* eslint-enable solid/reactivity */
-}
-
-const defaultVerticalCoordinatesGenerator: VerticalCoordinatesGenerator = (
-	{ xAxis, width, height, offset },
-	syncWithTicks,
-) =>
-	getCoordinatesOfGrid(
-		getTicks({
-			...defaultCartesianAxisProps,
-			...xAxis,
-			ticks: getTicksOfAxis(xAxis, true),
-			viewBox: { height, width, x: 0, y: 0 },
-		}),
-		offset.left,
-		offset.left + offset.width,
-		syncWithTicks,
-	)
-
-const defaultHorizontalCoordinatesGenerator: HorizontalCoordinatesGenerator = (
-	{ yAxis, width, height, offset },
-	syncWithTicks,
-) =>
-	getCoordinatesOfGrid(
-		getTicks({
-			...defaultCartesianAxisProps,
-			...yAxis,
-			ticks: getTicksOfAxis(yAxis, true),
-			viewBox: { height, width, x: 0, y: 0 },
-		}),
-		offset.top,
-		offset.top + offset.height,
-		syncWithTicks,
-	)
-
-export const defaultCartesianGridProps = {
-	horizontal: true,
-	horizontalFill: [],
-	horizontalPoints: [],
-	syncWithTicks: false,
-	vertical: true,
-	verticalFill: [],
-	verticalPoints: [],
-	xAxisId: 0,
-	yAxisId: 0,
-	zIndex: DefaultZIndexes.grid,
-} as const satisfies Partial<Props>
-
-/**
- * Renders background grid with lines and fill colors in a Cartesian chart.
- *
- * @consumes CartesianChartContext
- */
-export function CartesianGrid(outsideProps: Props) {
-	/* All hooks now bare T (GOTCHA-011). Arrow-thunk pattern keeps existing
-	   `()` callsites valid and re-runs the selector under each reactive scope. */
-	const chartWidth = createMemo(() => useChartWidth())
-	const chartHeight = createMemo(() => useChartHeight())
-	const offset = createMemo(() => useOffsetInternal())
-	const theme = useRechartsTheme()
-	const propsIncludingDefaults = createMemo((): CartesianGridInternalProps => ({
-		...resolveDefaultProps(outsideProps, defaultCartesianGridProps),
-		/* Grid colors fall back to the active theme (legacyTheme matches the 3.x defaults). */
-		fill: outsideProps.fill ?? theme.grid.fill,
-		fillOpacity: outsideProps.fillOpacity ?? theme.grid.fillOpacity,
-		stroke: outsideProps.stroke ?? theme.grid.stroke,
-		strokeDasharray: outsideProps.strokeDasharray ?? theme.grid.strokeDasharray,
-		strokeOpacity: outsideProps.strokeOpacity ?? theme.grid.strokeOpacity,
-		strokeWidth: outsideProps.strokeWidth ?? theme.grid.strokeWidth,
-		height: isNumber(outsideProps.height) ? outsideProps.height : offset().height,
-		width: isNumber(outsideProps.width) ? outsideProps.width : offset().width,
-		x: isNumber(outsideProps.x) ? outsideProps.x : offset().left,
-		y: isNumber(outsideProps.y) ? outsideProps.y : offset().top,
-	}))
-
-	const isPanorama = useIsPanorama()
-	const ctx = useChartStore()
-	const xAxis = (): AxisPropsForCartesianGridTicksGeneration | undefined =>
-		ctx
-			? selectAxisPropsNeededForCartesianGridTicksGenerator(
-					ctx.store,
-					"xAxis",
-					propsIncludingDefaults().xAxisId,
-					isPanorama,
-				)
-			: undefined
-	const yAxis = (): AxisPropsForCartesianGridTicksGeneration | undefined =>
-		ctx
-			? selectAxisPropsNeededForCartesianGridTicksGenerator(
-					ctx.store,
-					"yAxis",
-					propsIncludingDefaults().yAxisId,
-					isPanorama,
-				)
-			: undefined
-
-	const computedPoints = createMemo(() => {
-		const p = propsIncludingDefaults()
-		const { x, y, width, height, syncWithTicks, horizontalValues, verticalValues } = p
-
-		if (!isPositiveNumber(width) || !isPositiveNumber(height) || !isNumber(x) || !isNumber(y)) {
-			return null
-		}
-
-		const verticalCoordinatesGenerator =
-			p.verticalCoordinatesGenerator || defaultVerticalCoordinatesGenerator
-		const horizontalCoordinatesGenerator =
-			p.horizontalCoordinatesGenerator || defaultHorizontalCoordinatesGenerator
-
-		let horizontalPoints = p.horizontalPoints
-		let verticalPoints = p.verticalPoints
-
-		if (
-			(!horizontalPoints || !horizontalPoints.length) &&
-			typeof horizontalCoordinatesGenerator === "function"
-		) {
-			const isHorizontalValues = horizontalValues && horizontalValues.length
-
-			const generatorResult = horizontalCoordinatesGenerator(
-				{
-					height: chartHeight() ?? height,
-					offset: offset(),
-					width: chartWidth() ?? width,
-					yAxis: yAxis()
-						? ({
-								...yAxis(),
-								scale: yAxis()?.scale ?? undefined,
-								ticks: isHorizontalValues ? horizontalValues : yAxis()?.ticks,
-							} as AxisPropsForCartesianGridTicksGeneration)
-						: undefined,
-				},
-				isHorizontalValues ? true : syncWithTicks,
-			)
-
-			warn(
-				Array.isArray(generatorResult),
-				`horizontalCoordinatesGenerator should return Array but instead it returned [${typeof generatorResult}]`,
-			)
-			if (Array.isArray(generatorResult)) {
-				horizontalPoints = generatorResult
-			}
-		}
-
-		if (
-			(!verticalPoints || !verticalPoints.length) &&
-			typeof verticalCoordinatesGenerator === "function"
-		) {
-			const isVerticalValues = verticalValues && verticalValues.length
-			const generatorResult = verticalCoordinatesGenerator(
-				{
-					height: chartHeight() ?? height,
-					offset: offset(),
-					width: chartWidth() ?? width,
-					xAxis: xAxis()
-						? ({
-								...xAxis(),
-								scale: xAxis()?.scale ?? undefined,
-								ticks: isVerticalValues ? verticalValues : xAxis()?.ticks,
-							} as AxisPropsForCartesianGridTicksGeneration)
-						: undefined,
-				},
-				isVerticalValues ? true : syncWithTicks,
-			)
-			warn(
-				Array.isArray(generatorResult),
-				`verticalCoordinatesGenerator should return Array but instead it returned [${typeof generatorResult}]`,
-			)
-			if (Array.isArray(generatorResult)) {
-				verticalPoints = generatorResult
-			}
-		}
-
-		return { horizontalPoints, verticalPoints }
-	})
-
-	const horizontalPointsReactive = (): number[] => computedPoints()?.horizontalPoints ?? []
-	const verticalPointsReactive = (): number[] => computedPoints()?.verticalPoints ?? []
-
-	return (
-		<Show when={computedPoints() != null}>
-			<ZIndexLayer zIndex={propsIncludingDefaults().zIndex}>
-				<g class="recharts-cartesian-grid">
-					<Background
-						fill={propsIncludingDefaults().fill}
-						fillOpacity={propsIncludingDefaults().fillOpacity}
-						x={propsIncludingDefaults().x}
-						y={propsIncludingDefaults().y}
-						width={propsIncludingDefaults().width}
-						height={propsIncludingDefaults().height}
-						ry={
-							(propsIncludingDefaults() as Record<string, unknown>).ry as
-								| string
-								| number
-								| undefined
-						}
-					/>
-
-					<HorizontalStripes
-						{...propsIncludingDefaults()}
-						horizontalPoints={horizontalPointsReactive()}
-					/>
-					<VerticalStripes
-						{...propsIncludingDefaults()}
-						verticalPoints={verticalPointsReactive()}
-					/>
-
-					<HorizontalGridLines
-						{...propsIncludingDefaults()}
-						offset={offset()}
-						horizontalPoints={horizontalPointsReactive()}
-						xAxis={xAxis()}
-						yAxis={yAxis()}
-					/>
-
-					<VerticalGridLines
-						{...propsIncludingDefaults()}
-						offset={offset()}
-						verticalPoints={verticalPointsReactive()}
-						xAxis={xAxis()}
-						yAxis={yAxis()}
-					/>
-				</g>
-			</ZIndexLayer>
-		</Show>
-	)
-}
-
-CartesianGrid.displayName = "CartesianGrid"