@solidports/recharts 0.1.0 → 0.1.1

package/src/cartesian/LineDrawShape.tsx

@@ -1,89 +0,0 @@
-import type { JSX } from '@solidjs/web';
-import { createMemo } from "solid-js"
-import { splitProps } from "../util/solid-1-compat"
-import { Curve, type Props as CurveProps } from "../shape/Curve"
-import type { ShapeAnimationProps } from "../util/types"
-import { pathTotalLength } from "../util/pathTotalLength"
-
-function generateSimpleStrokeDasharray(totalLength: number, length: number): string {
-	return `${length}px ${totalLength}px`
-}
-
-function normalizeDashPattern(lines: number[]): number[] {
-	return lines.length % 2 !== 0 ? [...lines, ...lines] : lines
-}
-
-function repeat(lines: number[], count: number): number[] {
-	const result: number[] = []
-	for (let i = 0; i < count; ++i) {
-		result.push(...lines)
-	}
-	return result
-}
-
-function getStrokeDasharray(length: number, totalLength: number, lines: number[]): string {
-	const normalizedLines = normalizeDashPattern(lines)
-	const lineLength = normalizedLines.reduce((pre, next) => pre + next, 0)
-	if (!lineLength) {
-		return generateSimpleStrokeDasharray(totalLength, length)
-	}
-	const count = Math.floor(length / lineLength)
-	const remainLength = length % lineLength
-	let remainLines: number[] = []
-	for (let i = 0, sum = 0; i < normalizedLines.length; sum += normalizedLines[i] ?? 0, ++i) {
-		const lineValue = normalizedLines[i]
-		if (lineValue != null && sum + lineValue > remainLength) {
-			remainLines = [...normalizedLines.slice(0, i), remainLength - sum]
-			break
-		}
-	}
-	const emptyLines = remainLines.length % 2 === 0 ? [0, totalLength] : [totalLength]
-	return [...repeat(normalizedLines, count), ...remainLines, ...emptyLines]
-		.map((line) => `${line}px`)
-		.join(", ")
-}
-
-function computeAnimatedStrokeDasharray(
-	userStrokeDasharray: string | number | undefined,
-	totalLength: number,
-	visibleLength: number,
-): string {
-	if (userStrokeDasharray) {
-		const lines = `${userStrokeDasharray}`.split(/[,\s]+/gim).map((num) => parseFloat(num))
-		return getStrokeDasharray(visibleLength, totalLength, lines)
-	}
-	return generateSimpleStrokeDasharray(totalLength, visibleLength)
-}
-
-export type LineDrawShapeProps = Omit<CurveProps, "pathRef"> &
-	ShapeAnimationProps & {
-		pathRef?: { current: SVGPathElement | null }
-		visibleLength?: number | null
-	}
-
-/**
- * Default Line shape. During entrance animation the path is revealed via stroke-dasharray.
- *
- * @since 3.9
- */
-export function LineDrawShape(props: LineDrawShapeProps): JSX.Element {
-	/* Animation state is consumed here and never forwarded to the <path>. */
-	const [local, curveProps] = splitProps(props, [
-		"animationElapsedTime",
-		"isAnimating",
-		"isEntrance",
-		"visibleLength",
-		"strokeDasharray",
-		"connectNulls",
-	])
-
-	const strokeDasharray = createMemo((): string | undefined => {
-		if (local.visibleLength != null) {
-			const totalLength = pathTotalLength(curveProps.pathRef?.current)
-			return computeAnimatedStrokeDasharray(local.strokeDasharray, totalLength, local.visibleLength)
-		}
-		return local.strokeDasharray == null ? undefined : String(local.strokeDasharray)
-	})
-
-	return <Curve {...curveProps} connectNulls={local.connectNulls ?? false} strokeDasharray={strokeDasharray()} />
-}

package/src/cartesian/ReferenceArea.tsx

@@ -1,331 +0,0 @@
-/* eslint-disable import/no-cycle */
-import { Show, createEffect } from 'solid-js';
-import type { CamelCaseSVGAttrs } from "../util/CamelCaseSVGAttrs"
-import { ShapeOption } from "../util/ShapeElementProps"
-import type { JSX } from '@solidjs/web';
-import { clsx } from "clsx"
-import { Layer } from "../container/Layer"
-import {
-	CartesianLabelContextProvider,
-	CartesianLabelFromLabelProp,
-	type ImplicitLabelType,
-} from "../component/Label"
-import { rectWithPoints } from "../util/CartesianUtils"
-import type { Overflowable } from "../util/IfOverflow"
-import { isNumOrStr } from "../util/DataUtils"
-import type { Props as RectangleProps } from "../shape/Rectangle"
-import { Rectangle } from "../shape/Rectangle"
-
-import type { ReferenceAreaSettings } from "../state/referenceElementsSlice"
-import { useChartStore } from "../state/RechartsStoreContext"
-import { selectAxisScale } from "../state/selectors/axisSelectors"
-import { useIsPanorama } from "../context/PanoramaContext"
-
-import { useClipPathId } from "../container/ClipPathProvider"
-import type { NullableCoordinate, RectanglePosition } from "../util/types"
-import type { SVGPropsAndEvents } from "../util/svgPropertiesAndEvents"
-import { svgPropertiesAndEvents } from "../util/svgPropertiesAndEvents"
-import type { RequiresDefaultProps } from "../util/resolveDefaultProps"
-import { resolveDefaultProps } from "../util/resolveDefaultProps"
-import type { ZIndexable } from "../zIndex/ZIndexLayer"
-import { ZIndexLayer } from "../zIndex/ZIndexLayer"
-import { DefaultZIndexes } from "../zIndex/DefaultZIndexes"
-import type { RechartsScale } from "../util/scale/RechartsScale"
-import { CartesianScaleHelperImpl } from "../util/scale/CartesianScaleHelper"
-import { isSameStoreEntry } from "../state/storeIdentity"
-import { teardownWrite } from "../state/teardownWrite"
-
-type ReferenceCoordinateValue = number | string
-
-interface ReferenceAreaProps<
-	/* eslint-disable-next-line typescript-eslint/no-explicit-any -- upstream contract */
-	XValueType extends ReferenceCoordinateValue = any,
-	/* eslint-disable-next-line typescript-eslint/no-explicit-any -- upstream contract */
-	YValueType extends ReferenceCoordinateValue = any,
-> extends Overflowable, ZIndexable {
-	/**
-	 * Starting X-coordinate of the area.
-	 * This value is using your chart's domain, so you will provide a data value instead of a pixel value.
-	 * ReferenceArea will internally calculate the correct pixel position.
-	 *
-	 * If undefined then the area will extend to the left edge of the chart plot area.
-	 *
-	 * @example <ReferenceArea x1="Monday" x2="Friday" />
-	 * @example <ReferenceArea x1={10} x2={50} />
-	 * @example <ReferenceArea x1="Page C" />
-	 */
-	x1?: XValueType
-	/**
-	 * Ending X-coordinate of the area.
-	 * This value is using your chart's domain, so you will provide a data value instead of a pixel value.
-	 * ReferenceArea will internally calculate the correct pixel position.
-	 *
-	 * If undefined then the area will extend to the right edge of the chart plot area.
-	 *
-	 * @example <ReferenceArea x1="Monday" x2="Friday" />
-	 * @example <ReferenceArea x1={10} x2={50} />
-	 * @example <ReferenceArea x2="Page C" />
-	 */
-	x2?: XValueType
-	/**
-	 * Starting Y-coordinate of the area.
-	 * This value is using your chart's domain, so you will provide a data value instead of a pixel value.
-	 * ReferenceArea will internally calculate the correct pixel position.
-	 *
-	 * If undefined then the area will extend to the top edge of the chart plot area.
-	 *
-	 * @example <ReferenceArea y1={100} y2={500} />
-	 * @example <ReferenceArea y1="low" y2="high" />
-	 * @example <ReferenceArea y1={200} />
-	 */
-	y1?: YValueType
-	/**
-	 * Ending Y-coordinate of the area.
-	 * This value is using your chart's domain, so you will provide a data value instead of a pixel value.
-	 * ReferenceArea will internally calculate the correct pixel position.
-	 *
-	 * If undefined then the area will extend to the bottom edge of the chart plot area.
-	 *
-	 * @example <ReferenceArea y1={100} y2={500} />
-	 * @example <ReferenceArea y1="low" y2="high" />
-	 * @example <ReferenceArea y2={400} />
-	 */
-	y2?: YValueType
-
-	className?: number | string
-	/**
-	 * The id of YAxis which is corresponding to the data. Required when there are multiple YAxes.
-	 * @defaultValue 0
-	 */
-	yAxisId?: number | string
-	/**
-	 * The id of XAxis which is corresponding to the data. Required when there are multiple XAxes.
-	 * @defaultValue 0
-	 */
-	xAxisId?: number | string
-	/**
-	 * If set a function, the function will be called to render customized shape.
-	 */
-	shape?: JSX.Element | ((props: Record<string, unknown>) => JSX.Element)
-	/**
-	 * Renders a single label.
-	 *
-	 * - `false`: no labels are rendered
-	 * - `string` | `number`: the content of the label
-	 * - `object`: the props of LabelList component
-	 * - `ReactElement`: a custom label element
-	 * - `function`: a render function of custom label
-	 *
-	 * @defaultValue false
-	 *
-	 * @see {@link https://recharts.github.io/en-US/examples/LineChartWithReferenceLines/ Reference elements with a label}
-	 */
-	label?: ImplicitLabelType
-
-	/**
-	 * Z-Index of this component and its children. The higher the value,
-	 * the more on top it will be rendered.
-	 * Components with higher zIndex will appear in front of components with lower zIndex.
-	 * If undefined or 0, the content is rendered in the default layer without portals.
-	 *
-	 * @since 3.4
-	 * @defaultValue 100
-	 * @see {@link https://recharts.github.io/en-US/guide/zIndex/ Z-Index and layers guide}
-	 */
-	zIndex?: number
-	children?: JSX.Element
-}
-
-/*
- * Omit width, height, x, y from SVGPropsAndEvents because ReferenceArea receives x1, x2, y1, y2 instead.
- * The position is calculated internally instead.
- */
-export type Props<
-	/* eslint-disable-next-line typescript-eslint/no-explicit-any -- upstream contract */
-	XValueType extends ReferenceCoordinateValue = any,
-	/* eslint-disable-next-line typescript-eslint/no-explicit-any -- upstream contract */
-	YValueType extends ReferenceCoordinateValue = any,
-> = Omit<SVGPropsAndEvents<RectangleProps>, "width" | "height" | "x" | "y"> &
-	CamelCaseSVGAttrs &
-	ReferenceAreaProps<XValueType, YValueType>
-
-const getRect = (
-	hasX1: boolean,
-	hasX2: boolean,
-	hasY1: boolean,
-	hasY2: boolean,
-	xAxisScale: RechartsScale | undefined,
-	yAxisScale: RechartsScale | undefined,
-	areaProps: Props,
-): RectanglePosition | null => {
-	const { x1: xValue1, x2: xValue2, y1: yValue1, y2: yValue2 } = areaProps
-
-	if (xAxisScale == null || yAxisScale == null) {
-		return null
-	}
-
-	const scales = new CartesianScaleHelperImpl({ x: xAxisScale, y: yAxisScale })
-
-	const p1: NullableCoordinate = {
-		x: hasX1 ? (xAxisScale.map(xValue1, { position: "start" }) ?? null) : xAxisScale.rangeMin(),
-		y: hasY1 ? (yAxisScale.map(yValue1, { position: "start" }) ?? null) : yAxisScale.rangeMin(),
-	}
-
-	const p2: NullableCoordinate = {
-		x: hasX2 ? (xAxisScale.map(xValue2, { position: "end" }) ?? null) : xAxisScale.rangeMax(),
-		y: hasY2 ? (yAxisScale.map(yValue2, { position: "end" }) ?? null) : yAxisScale.rangeMax(),
-	}
-
-	if (areaProps.ifOverflow === "discard" && (!scales.isInRange(p1) || !scales.isInRange(p2))) {
-		return null
-	}
-
-	return rectWithPoints(p1 as { x: number; y: number }, p2 as { x: number; y: number })
-}
-
-function ReportReferenceArea(props: ReferenceAreaSettings): null {
-	const ctx = useChartStore()
-	/* The props proxy is registered once; selectors read its fields lazily. */
-	createEffect(
-		() => props,
-		(element) => {
-			ctx?.setStore("referenceElements", "areas", (prev) => [...prev, element])
-			return () => {
-				teardownWrite(() => {
-					ctx?.setStore("referenceElements", "areas", (prev) => prev.filter((a) => !isSameStoreEntry(a, element)))
-				})
-			}
-		},
-	)
-	return null
-}
-
-function ReferenceAreaImpl(props: PropsWithDefaults) {
-	const clipPathId = useClipPathId()
-	const isPanorama = useIsPanorama()
-	const ctx = useChartStore()
-	const xAxisScale = () =>
-		ctx ? selectAxisScale(ctx.store, "xAxis", props.xAxisId, isPanorama) : undefined
-	const yAxisScale = () =>
-		ctx ? selectAxisScale(ctx.store, "yAxis", props.yAxisId, isPanorama) : undefined
-
-	const hasX1 = () => isNumOrStr(props.x1)
-	const hasX2 = () => isNumOrStr(props.x2)
-	const hasY1 = () => isNumOrStr(props.y1)
-	const hasY2 = () => isNumOrStr(props.y2)
-
-	const shouldRender = () => {
-		if (xAxisScale() == null || yAxisScale() == null) {
-			return false
-		}
-		if (!hasX1() && !hasX2() && !hasY1() && !hasY2() && !props.shape) {
-			return false
-		}
-		return true
-	}
-
-	const rect = () => {
-		if (!shouldRender()) return null
-		return getRect(hasX1(), hasX2(), hasY1(), hasY2(), xAxisScale(), yAxisScale(), props)
-	}
-
-	return (
-		<Show when={shouldRender() && (rect() != null || props.shape)}>
-			{(() => {
-				const isOverflowHidden = () => props.ifOverflow === "hidden"
-				const clipPath = () => (isOverflowHidden() ? `url(#${clipPathId})` : undefined)
-
-				return (
-					<ZIndexLayer zIndex={props.zIndex}>
-						<Layer class={clsx("recharts-reference-area", props.className)}>
-							<ShapeOption
-								option={props.shape}
-								shapeProps={{
-									...svgPropertiesAndEvents(props),
-									...rect(),
-									"clip-path": clipPath(),
-								}}
-								renderDefault={(rectProps) => (
-									<Rectangle {...rectProps} class="recharts-reference-area-rect" />
-								)}
-							/>
-							<Show when={rect()}>
-								{(r) => (
-									<CartesianLabelContextProvider
-										x={r().x}
-										y={r().y}
-										width={r().width}
-										height={r().height}
-										lowerWidth={r().width}
-										upperWidth={r().width}
-									>
-										<>
-											<CartesianLabelFromLabelProp label={props.label} />
-											{props.children}
-										</>
-									</CartesianLabelContextProvider>
-								)}
-							</Show>
-						</Layer>
-					</ZIndexLayer>
-				)
-			})()}
-		</Show>
-	)
-}
-
-export const referenceAreaDefaultProps = {
-	fill: "#ccc",
-	fillOpacity: 0.5,
-	ifOverflow: "discard",
-	label: false,
-	radius: 0,
-	stroke: "none",
-	strokeWidth: 1,
-	xAxisId: 0,
-	yAxisId: 0,
-	zIndex: DefaultZIndexes.area,
-} as const satisfies Partial<Props>
-
-type PropsWithDefaults = RequiresDefaultProps<Props, typeof referenceAreaDefaultProps>
-
-/**
- * Draws a rectangular area on the chart to highlight a specific range.
- *
- * This component, unlike {@link Rectangle} or {@link https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/rect rect}, is aware of the cartesian coordinate system,
- * so you specify the area by using data coordinates instead of pixels.
- *
- * ReferenceArea will calculate the pixels based on the provided data coordinates.
- *
- * If you prefer to render rectangles using pixels rather than data coordinates,
- * consider using the {@link Rectangle} component instead.
- *
- * @provides CartesianLabelContext
- * @consumes CartesianChartContext
- */
-function ReferenceAreaFn(outsideProps: Props): JSX.Element {
-	const props = resolveDefaultProps(outsideProps, referenceAreaDefaultProps)
-	return (
-		<>
-			<ReportReferenceArea
-				yAxisId={props.yAxisId}
-				xAxisId={props.xAxisId}
-				ifOverflow={props.ifOverflow}
-				x1={props.x1}
-				x2={props.x2}
-				y1={props.y1}
-				y2={props.y2}
-			/>
-			<ReferenceAreaImpl {...props} />
-		</>
-	)
-}
-
-/**
- * Typed entry point: the generics constrain props at the call site, like upstream.
- */
-/* eslint-disable-next-line typescript-eslint/no-explicit-any -- upstream contract: untyped usage accepts any data */
-export const ReferenceArea = ReferenceAreaFn as (<XValueType extends number | string = any, YValueType extends number | string = any>(
-	props: Props<XValueType, YValueType>,
-) => JSX.Element) & { displayName?: string }
-ReferenceArea.displayName = "ReferenceArea"