@solidports/recharts 0.1.0 → 0.1.1

package/src/polar/defaultPolarAngleAxisProps.tsx

@@ -1,27 +0,0 @@
-/* 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

@@ -1,25 +0,0 @@
-/* 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

@@ -1,89 +0,0 @@
-/* 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

@@ -1,343 +0,0 @@
-/* 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

@@ -1,70 +0,0 @@
-/* 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>
-	)
-}