@solidports/recharts 0.1.0

package/src/polar/defaultPolarAngleAxisProps.tsx

@@ -0,0 +1,27 @@
+/* eslint-disable import/no-cycle */
+import { Props } from "./PolarAngleAxis"
+import { DefaultZIndexes } from "../zIndex/DefaultZIndexes"
+
+export const defaultPolarAngleAxisProps = {
+	allowDataOverflow: false,
+	allowDecimals: false,
+	allowDuplicatedCategory: true,
+	angle: 0,
+	angleAxisId: 0,
+	axisLine: true,
+	axisLineType: "polygon",
+	cx: 0,
+	cy: 0,
+	hide: false,
+	includeHidden: false,
+	label: false,
+	orientation: "outer",
+	reversed: false,
+	scale: "auto",
+	niceTicks: "auto",
+	tick: true,
+	tickLine: true,
+	tickSize: 8,
+	type: "auto",
+	zIndex: DefaultZIndexes.axis,
+} as const satisfies Props

package/src/polar/defaultPolarRadiusAxisProps.tsx

@@ -0,0 +1,25 @@
+/* eslint-disable import/no-cycle */
+import { Props } from "./PolarRadiusAxis"
+import { DefaultZIndexes } from "../zIndex/DefaultZIndexes"
+
+export const defaultPolarRadiusAxisProps = {
+	allowDataOverflow: false,
+	allowDecimals: false,
+	allowDuplicatedCategory: true,
+	angle: 0,
+	axisLine: true,
+	hide: false,
+	includeHidden: false,
+	label: false,
+	orientation: "right",
+	radiusAxisId: 0,
+	reversed: false,
+	scale: "auto",
+	stroke: "#ccc",
+	niceTicks: "auto",
+	tick: true,
+	tickCount: 5,
+	tickLine: true,
+	type: "auto",
+	zIndex: DefaultZIndexes.axis,
+} as const satisfies Props

package/src/shape/Cross.tsx

@@ -0,0 +1,89 @@
+/* eslint-disable import/no-cycle */
+/**
+ * @fileOverview Cross
+ */
+import type { JSX } from '@solidjs/web';
+import { useShapeElementProps } from "../util/ShapeElementProps"
+import type { WithoutRemoveFalse } from "../util/types"
+import { Show } from 'solid-js';
+import { clsx } from "clsx"
+import { isNumber } from "../util/DataUtils"
+import { svgPropertiesAndEvents } from "../util/svgPropertiesAndEvents"
+
+interface CrossProps {
+	/**
+	 * The x-coordinate of the vertical line of the cross in pixels.
+	 */
+	x?: number
+	/**
+	 * The y-coordinate of the horizontal line of the cross in pixels.
+	 */
+	y?: number
+	/**
+	 * Width of the cross in pixels.
+	 */
+	width?: number
+	/**
+	 * Height of the cross in pixels.
+	 */
+	height?: number
+	/**
+	 * The y-coordinate of the top left point in the boundary box of the cross.
+	 */
+	top?: number
+	/**
+	 * The x-coordinate of the top left point in the boundary box of the cross.
+	 */
+	left?: number
+	class?: string
+}
+
+export type Props = WithoutRemoveFalse<JSX.PathSVGAttributes<SVGPathElement>> & CrossProps
+
+const getPath = (
+	x: number,
+	y: number,
+	width: number,
+	height: number,
+	top: number,
+	left: number,
+) => {
+	return `M${x},${top}v${height}M${left},${y}h${width}`
+}
+
+export function Cross(ownProps: Props) {
+	/* Props injected for a shape passed as an element (see ShapeElementProps). */
+	const props = useShapeElementProps(ownProps)
+	const x = () => props.x ?? 0
+	const y = () => props.y ?? 0
+	const top = () => props.top ?? 0
+	const left = () => props.left ?? 0
+	const width = () => props.width ?? 0
+	const height = () => props.height ?? 0
+
+	const isValid = () =>
+		isNumber(x()) &&
+		isNumber(y()) &&
+		isNumber(width()) &&
+		isNumber(height()) &&
+		isNumber(top()) &&
+		isNumber(left())
+
+	return (
+		<Show when={isValid()}>
+			<path
+				{...svgPropertiesAndEvents({
+					...props,
+					height: height(),
+					left: left(),
+					top: top(),
+					width: width(),
+					x: x(),
+					y: y(),
+				})}
+				class={clsx("recharts-cross", props.class)}
+				d={getPath(x(), y(), width(), height(), top(), left())}
+			/>
+		</Show>
+	)
+}

package/src/shape/Curve.tsx

@@ -0,0 +1,343 @@
+/* eslint-disable import/no-cycle */
+/**
+ * @fileOverview Curve
+ */
+import { Show, createMemo } from 'solid-js';
+import { useShapeElementProps } from "../util/ShapeElementProps"
+import {
+	area as shapeArea,
+	type Area as D3AreaCurve,
+	curveBasis,
+	curveBasisClosed,
+	curveBasisOpen,
+	curveBumpX,
+	curveBumpY,
+	type CurveFactory,
+	curveLinear,
+	curveLinearClosed,
+	curveMonotoneX,
+	curveMonotoneY,
+	curveNatural,
+	curveStep,
+	curveStepAfter,
+	curveStepBefore,
+	line as shapeLine,
+	type Line as D3LineCurve,
+} from "victory-vendor/d3-shape"
+
+import { clsx } from "clsx"
+import type {
+	RechartsMouseEventHandler,
+	Coordinate,
+	LayoutType,
+	NullableCoordinate,
+	PresentationAttributesWithProps,
+} from "../util/types"
+import { adaptEventHandlers } from "../util/types"
+import { isNumber, upperFirst } from "../util/DataUtils"
+import { isWellBehavedNumber } from "../util/isWellBehavedNumber"
+import { svgPropertiesNoEvents } from "../util/svgPropertiesNoEvents"
+import { useChartLayout } from "../context/chartLayoutContext"
+
+interface CurveFactories {
+	[index: string]: CurveFactory
+}
+
+const CURVE_FACTORIES: CurveFactories = {
+	curveBasis,
+	curveBasisClosed,
+	curveBasisOpen,
+	curveBumpX,
+	curveBumpY,
+	curveLinear,
+	curveLinearClosed,
+	curveMonotoneX,
+	curveMonotoneY,
+	curveNatural,
+	curveStep,
+	curveStepAfter,
+	curveStepBefore,
+}
+
+/**
+ * @inline
+ */
+export type CurveType =
+	| "basis"
+	| "basisClosed"
+	| "basisOpen"
+	| "bumpX"
+	| "bumpY"
+	| "bump"
+	| "linear"
+	| "linearClosed"
+	| "natural"
+	| "monotoneX"
+	| "monotoneY"
+	| "monotone"
+	| "step"
+	| "stepBefore"
+	| "stepAfter"
+	| CurveFactory
+
+type AreaPoint = Coordinate & { base: Coordinate }
+
+type NullableAreaPoint = NullableCoordinate & { base?: NullableCoordinate }
+
+/**
+ * @inline
+ */
+export type BaseLineType = number | ReadonlyArray<NullableCoordinate>
+
+const defined = (p: NullableCoordinate): p is Coordinate =>
+	isWellBehavedNumber(p.x) && isWellBehavedNumber(p.y)
+const areaDefined = (d: NullableAreaPoint): d is AreaPoint =>
+	d.base != null && defined(d.base) && defined(d)
+const getX = (p: Coordinate) => p.x
+const getY = (p: Coordinate) => p.y
+
+const getCurveFactory = (type: CurveType, layout: LayoutType | undefined): CurveFactory => {
+	if (typeof type === "function") {
+		return type
+	}
+
+	const name = `curve${upperFirst(type)}`
+
+	if ((name === "curveMonotone" || name === "curveBump") && layout) {
+		const factory = CURVE_FACTORIES[`${name}${layout === "vertical" ? "Y" : "X"}`]
+		if (factory) {
+			return factory
+		}
+	}
+	return CURVE_FACTORIES[name] || curveLinear
+}
+
+interface CurveProps {
+	class?: string
+	/**
+	 * The interpolation type of curve. Allows custom interpolation function.
+	 *
+	 * @defaultValue linear
+	 * @link https://d3js.org/d3-shape/curve
+	 * @see {@link https://recharts.github.io/en-US/examples/CardinalAreaChart/ An AreaChart which has two area with different interpolation.}
+	 */
+	type?: CurveType
+	/**
+	 * This option affects the interpolation algorithm when the `type` prop is set to 'monotone'.
+	 * It also specifies the type of baseline when the curve is closed.
+	 */
+	layout?: LayoutType
+	/**
+	 * Baseline of the area:
+	 * - number: uses the corresponding axis value as a flat baseline;
+	 * - an array of coordinates: describes a custom baseline path.
+	 */
+	baseLine?: BaseLineType
+	/**
+	 * The coordinates of all the points in the curve, like an array of objects with x and y coordinates.
+	 */
+	points?: ReadonlyArray<NullableCoordinate>
+	/**
+	 * Whether to connect the curve across null points.
+	 *
+	 * @defaultValue false
+	 *
+	 * @see {@link https://recharts.github.io/en-US/examples/LineChartConnectNulls/ LineChart with connectNull true and false}
+	 * @see {@link https://recharts.github.io/en-US/examples/AreaChartConnectNulls/ AreaChart with connectNull true and false}
+	 */
+	connectNulls?: boolean
+	path?: string
+	/* GOTCHA-014-J: ref-object shape for upstream React parity. Tests assert
+	   `pathRef: { current: <SVGPathElement> }` on the props payload received by
+	   user event handlers — Solid's natural callback-ref `(el) => ref = el` shape
+	   diverges. Always use `{ current: el | null }`; Curve's <path ref={...}>
+	   assigns into the slot via callback. */
+	pathRef?: { current: SVGPathElement | null }
+	/**
+	 * The pattern of dashes and gaps used to paint the line.
+	 *
+	 * @example strokeDasharray="5 5"
+	 * @example strokeDasharray={10}
+	 * @see {@link https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray}
+	 */
+	strokeDasharray?: string | number
+}
+
+export type CurveMouseEventHandler = RechartsMouseEventHandler<Props, SVGPathElement>
+
+type CurveMouseEvents = {
+	/**
+	 * The customized event handler of click on the curve
+	 */
+	onClick?: CurveMouseEventHandler
+	/**
+	 * The customized event handler of mouseenter on the curve
+	 */
+	onMouseEnter?: CurveMouseEventHandler
+	/**
+	 * The customized event handler of mouseleave on the curve
+	 */
+	onMouseLeave?: CurveMouseEventHandler
+	/**
+	 * The customized event handler of mousedown on the curve
+	 */
+	onMouseDown?: CurveMouseEventHandler
+	/**
+	 * The customized event handler of mouseup on the curve
+	 */
+	onMouseUp?: CurveMouseEventHandler
+	/**
+	 * The customized event handler of mousemove on the curve
+	 */
+	onMouseMove?: CurveMouseEventHandler
+	/**
+	 * The customized event handler of mouseover on the curve
+	 */
+	onMouseOver?: CurveMouseEventHandler
+	/**
+	 * The customized event handler of mouseout on the curve
+	 */
+	onMouseOut?: CurveMouseEventHandler
+}
+
+export type Props = Omit<
+	PresentationAttributesWithProps<CurveProps, SVGPathElement>,
+	| "type"
+	| "points"
+	| "onClick"
+	| "onMouseEnter"
+	| "onMouseLeave"
+	| "onMouseDown"
+	| "onMouseUp"
+	| "onMouseMove"
+	| "onMouseOver"
+	| "onMouseOut"
+> &
+	CurveMouseEvents &
+	CurveProps
+
+type GetPathProps = Pick<Props, "type" | "points" | "baseLine" | "layout" | "connectNulls">
+
+export const defaultCurveProps = {
+	connectNulls: false,
+	type: "linear",
+} as const satisfies Partial<Props>
+
+/**
+ * Calculate the path of curve. Returns null if points is an empty array.
+ * @return path or null
+ */
+export const getPath = ({
+	type = defaultCurveProps.type,
+	points = [],
+	baseLine,
+	layout,
+	connectNulls = defaultCurveProps.connectNulls,
+}: GetPathProps): string | null => {
+	const curveFactory = getCurveFactory(type, layout)
+	const formatPoints: ReadonlyArray<NullableCoordinate> = connectNulls
+		? points.filter(defined)
+		: points
+
+	/*
+	 * When dealing with an area chart (where `baseLine` is an array),
+	 * we need to pair points with their corresponding `baseLine` points first.
+	 * This is to ensure that we filter points and their baseline counterparts together,
+	 * preventing errors from mismatched array lengths and ensuring `defined` checks both.
+	 */
+	if (Array.isArray(baseLine)) {
+		let lineFunction: D3AreaCurve<AreaPoint>
+
+		const areaPoints: ReadonlyArray<NullableAreaPoint> = points.map((entry, index) => ({
+			...entry,
+			base: baseLine[index],
+		}))
+
+		if (layout === "vertical") {
+			lineFunction = shapeArea<AreaPoint>()
+				.y(getY)
+				.x1(getX)
+				.x0((d) => d.base.x)
+		} else {
+			lineFunction = shapeArea<AreaPoint>()
+				.x(getX)
+				.y1(getY)
+				.y0((d) => d.base.y)
+		}
+		/*
+		 * What happens here is that the `.defined()` call will make it so that this function can accept
+		 * nullable points, and internally it will filter them out and skip when generating the path.
+		 * So on the input it accepts NullableCoordinate, but it never calls getX/getY on null points because of the defined() filter.
+		 *
+		 * The d3 type definition has only one generic so it doesn't allow to describe this properly.
+		 * However. d3 types are mutable, but we can pretend that they are not, and we can pretend
+		 * that calling defined() returns a new function with a different generic type.
+		 */
+		const withDefined = lineFunction.defined(
+			areaDefined as (d: AreaPoint, i: number, data: readonly AreaPoint[]) => boolean,
+		)
+		const nullableLineFunction: D3AreaCurve<NullableAreaPoint> = withDefined.curve(
+			curveFactory,
+		) as D3AreaCurve<NullableAreaPoint>
+
+		const finalPoints: ReadonlyArray<NullableAreaPoint> = connectNulls
+			? areaPoints.filter(areaDefined)
+			: areaPoints
+
+		return nullableLineFunction(finalPoints)
+	}
+
+	let lineFunction: D3LineCurve<Coordinate> | D3AreaCurve<Coordinate>
+	if (layout === "vertical" && isNumber(baseLine)) {
+		lineFunction = shapeArea<Coordinate>().y(getY).x1(getX).x0(baseLine)
+	} else if (isNumber(baseLine)) {
+		lineFunction = shapeArea<Coordinate>().x(getX).y1(getY).y0(baseLine)
+	} else {
+		lineFunction = shapeLine<Coordinate>().x(getX).y(getY)
+	}
+
+	const withDefined = (lineFunction as D3LineCurve<Coordinate>).defined(
+		defined as (d: Coordinate, i: number, data: readonly Coordinate[]) => boolean,
+	)
+	const nullableLineFunction: D3LineCurve<NullableCoordinate> = withDefined.curve(
+		curveFactory,
+	) as D3LineCurve<NullableCoordinate>
+
+	return nullableLineFunction(formatPoints)
+}
+
+export function Curve(ownProps: Props) {
+	/* Props injected for a shape passed as an element (see ShapeElementProps). */
+	const props = useShapeElementProps(ownProps)
+	const layout = createMemo(() => useChartLayout())
+
+	const hasData = () => (props.points && props.points.length > 0) || props.path
+
+	const realPath = (): string | null | undefined => {
+		if (props.points && props.points.length > 0) {
+			const getPathInput: GetPathProps = {
+				baseLine: props.baseLine,
+				connectNulls: props.connectNulls,
+				layout: props.layout || layout(),
+				points: props.points,
+				type: props.type,
+			}
+			return getPath(getPathInput)
+		}
+		return props.path
+	}
+
+	return (
+		<Show when={hasData()}>
+			<path
+				{...svgPropertiesNoEvents(props)}
+				{...adaptEventHandlers(props)}
+				class={clsx("recharts-curve", props.class)}
+				d={realPath() ?? undefined}
+				ref={(el: SVGPathElement) => {
+					if (props.pathRef) props.pathRef.current = el
+				}}
+			/>
+		</Show>
+	)
+}

package/src/shape/Dot.tsx

@@ -0,0 +1,70 @@
+/* eslint-disable import/no-cycle */
+import { Show } from 'solid-js';
+import { useShapeElementProps } from "../util/ShapeElementProps"
+import { clsx } from "clsx"
+import type { PresentationAttributesWithProps } from "../util/types"
+import { adaptEventHandlers } from "../util/types"
+import { ownStringKeys, svgPropCanonicalKey } from "../util/svgPropertiesNoEvents"
+import { isEventKey } from "../util/excludeEventProps"
+import { isNumber } from "../util/DataUtils"
+
+interface DotProps {
+	class?: string
+	/**
+	 * The x-coordinate of center in pixels.
+	 */
+	cx?: number
+	/**
+	 * The y-coordinate of center in pixels.
+	 */
+	cy?: number
+	/**
+	 * The radius of dot.
+	 */
+	r?: number | string
+	clipDot?: boolean
+}
+
+export type Props = PresentationAttributesWithProps<DotProps, SVGCircleElement> & DotProps
+
+/**
+ * Renders a dot in the chart.
+ *
+ * This component accepts X and Y coordinates in pixels.
+ * If you need to position the rectangle based on your chart's data,
+ * consider using the {@link ReferenceDot} component instead.
+ */
+export function Dot(ownProps: Props) {
+	/* Props injected for a shape passed as an element (see ShapeElementProps). */
+	const props = useShapeElementProps(ownProps)
+	/* React-style `className` (e.g. from an activeDot object) merges into `class`. */
+	const layerClass = () =>
+		clsx("recharts-dot", props.class, (props as { className?: string }).className)
+	/* One pass over the props per dot: SVG attributes (minus className, merged into class above),
+	   then event handlers only when the dot actually has one. Same result as spreading
+	   svgPropertiesNoEvents(props) and adaptEventHandlers(props). */
+	const attributes = () => {
+		const source = props as Record<string, unknown>
+		const result: Record<string, unknown> = {}
+		let hasHandler = false
+		for (const key of ownStringKeys(source)) {
+			const canonical = key === "className" ? undefined : svgPropCanonicalKey(key)
+			if (canonical !== undefined) {
+				result[canonical] = source[key]
+			} else if (!hasHandler && isEventKey(key) && typeof source[key] === "function") {
+				hasHandler = true
+			}
+		}
+		return hasHandler ? Object.assign(result, adaptEventHandlers(props)) : result
+	}
+
+	return (
+		<Show when={isNumber(props.cx) && isNumber(props.cy) && isNumber(props.r)}>
+			<circle
+				{...attributes()}
+				/* cx/cy/r come from the spread in prop order, matching upstream's attribute order */
+				class={layerClass()}
+			/>
+		</Show>
+	)
+}