@solidports/recharts 0.1.0

package/src/util/createCartesianCharts.tsx

@@ -0,0 +1,150 @@
+import type { Component } from "solid-js"
+
+import { AreaChart as OriginalAreaChart } from "../chart/AreaChart"
+import { BarChart as OriginalBarChart } from "../chart/BarChart"
+import { LineChart as OriginalLineChart } from "../chart/LineChart"
+import { ComposedChart as OriginalComposedChart } from "../chart/ComposedChart"
+import { ScatterChart as OriginalScatterChart } from "../chart/ScatterChart"
+import { FunnelChart as OriginalFunnelChart } from "../chart/FunnelChart"
+
+import type { Props as XAxisProps } from "../cartesian/XAxis"
+import type { Props as YAxisProps } from "../cartesian/YAxis"
+import type { Props as ZAxisProps } from "../cartesian/ZAxis"
+import type { Props as AreaProps } from "../cartesian/Area"
+import type { Props as BarProps } from "../cartesian/Bar"
+import type { Props as LineProps } from "../cartesian/Line"
+import type { Props as ScatterProps } from "../cartesian/Scatter"
+import type { Props as FunnelProps } from "../cartesian/Funnel"
+import type { CartesianChartProps } from "./types"
+import type { TooltipProps } from "../component/Tooltip"
+import type { NameType, ValueType } from "../component/DefaultTooltipContent"
+
+type ChartWithoutLayout<TData> = Component<Omit<CartesianChartProps<TData>, "layout">>
+
+export type TypedHorizontalChartContext<TData, TCategorical, TNumerical, TComponents> = {
+	AreaChart: ChartWithoutLayout<TData>
+	BarChart: ChartWithoutLayout<TData>
+	LineChart: ChartWithoutLayout<TData>
+	ComposedChart: ChartWithoutLayout<TData>
+	ScatterChart: ChartWithoutLayout<TData>
+} & Omit<
+	{
+		[K in keyof TComponents]: K extends "XAxis"
+			? Component<XAxisProps<TData, TCategorical>>
+			: K extends "YAxis"
+				? Component<YAxisProps<TData, TNumerical>>
+				: K extends "ZAxis"
+					? Component<ZAxisProps<TData, TNumerical>>
+					: K extends "Area"
+						? Component<AreaProps<TData, TNumerical>>
+						: K extends "Bar"
+							? Component<BarProps>
+							: K extends "Line"
+								? Component<LineProps<TData, TNumerical>>
+								: K extends "Scatter"
+									? Component<ScatterProps<TData, TNumerical>>
+									: K extends "Tooltip"
+										? Component<TooltipProps<Extract<TNumerical, ValueType>, Extract<keyof TData, NameType>>>
+										: TComponents[K]
+	},
+	"Funnel" | "FunnelChart"
+>
+
+export type TypedVerticalChartContext<TData, TCategorical, TNumerical, TComponents> = {
+	AreaChart: ChartWithoutLayout<TData>
+	BarChart: ChartWithoutLayout<TData>
+	LineChart: ChartWithoutLayout<TData>
+	ComposedChart: ChartWithoutLayout<TData>
+	ScatterChart: ChartWithoutLayout<TData>
+	FunnelChart: ChartWithoutLayout<TData>
+} & {
+	[K in keyof TComponents]: K extends "XAxis"
+		? Component<XAxisProps<TData, TNumerical>>
+		: K extends "YAxis"
+			? Component<YAxisProps<TData, TCategorical>>
+			: K extends "ZAxis"
+				? Component<ZAxisProps<TData, TNumerical>>
+				: K extends "Area"
+					? Component<AreaProps<TData, TNumerical>>
+					: K extends "Bar"
+						? Component<BarProps>
+						: K extends "Line"
+							? Component<LineProps<TData, TNumerical>>
+							: K extends "Scatter"
+								? Component<ScatterProps<TData, TNumerical>>
+								: K extends "Funnel"
+									? Component<FunnelProps<TData, TNumerical>>
+									: K extends "Tooltip"
+										? Component<TooltipProps<Extract<TNumerical, ValueType>, Extract<keyof TData, NameType>>>
+										: TComponents[K]
+}
+
+const createCartesianCharts = <TData,>(layout: "horizontal" | "vertical") => ({
+	AreaChart: (props: Omit<CartesianChartProps<TData>, "layout">) => (
+		<OriginalAreaChart {...props} layout={layout} />
+	),
+	BarChart: (props: Omit<CartesianChartProps<TData>, "layout">) => (
+		<OriginalBarChart {...props} layout={layout} />
+	),
+	LineChart: (props: Omit<CartesianChartProps<TData>, "layout">) => (
+		<OriginalLineChart {...props} layout={layout} />
+	),
+	ComposedChart: (props: Omit<CartesianChartProps<TData>, "layout">) => (
+		<OriginalComposedChart {...props} layout={layout} />
+	),
+	ScatterChart: (props: Omit<CartesianChartProps<TData>, "layout">) => (
+		<OriginalScatterChart {...props} layout={layout} />
+	),
+})
+
+export type NoFunnel<T> = "Funnel" extends keyof T ? never : "FunnelChart" extends keyof T ? never : T
+
+/**
+ * Creates a typed context for horizontal Cartesian charts.
+ *
+ * The returned chart components bind `layout="horizontal"` and drop the `layout` prop, so a chart
+ * cannot be flipped by accident. Strictly vertical components (`Funnel`, `FunnelChart`) are rejected
+ * at compile time.
+ *
+ * @example
+ * ```tsx
+ * const TypedCharts = createHorizontalChart<MyData, string, number>()({ AreaChart, Area, XAxis, YAxis })
+ * ```
+ *
+ * @since 3.8
+ */
+export function createHorizontalChart<TData, TCategorical = string, TNumerical = number>() {
+	return function withComponents<TComponents extends Record<string, unknown>>(
+		components: NoFunnel<TComponents>,
+	) {
+		return {
+			...createCartesianCharts<TData>("horizontal"),
+			...components,
+		} as unknown as TypedHorizontalChartContext<TData, TCategorical, TNumerical, TComponents>
+	}
+}
+
+/**
+ * Creates a typed context for vertical Cartesian charts.
+ *
+ * The returned chart components bind `layout="vertical"` and drop the `layout` prop. Strictly
+ * vertical components like `Funnel` and `FunnelChart` are supported.
+ *
+ * @example
+ * ```tsx
+ * const TypedCharts = createVerticalChart<MyData, number, string>()({ BarChart, Bar, Funnel, XAxis, YAxis })
+ * ```
+ *
+ * @since 3.8
+ */
+export function createVerticalChart<TData, TCategorical = string, TNumerical = number>() {
+	return function withComponents<TComponents extends Record<string, unknown>>(components: TComponents) {
+		return {
+			...createCartesianCharts<TData>("vertical"),
+			FunnelChart: (props: Omit<CartesianChartProps<TData>, "layout">) => (
+				<OriginalFunnelChart {...props} layout="vertical" />
+			),
+			...components,
+		} as unknown as TypedVerticalChartContext<TData, TCategorical, TNumerical, TComponents>
+	}
+}

package/src/util/createEventProxy.ts

@@ -0,0 +1,20 @@
+/**
+ * Creates a proxy around a native DOM event that preserves the currentTarget
+ * at the time of creation, since currentTarget is nullified after the event
+ * finishes propagating in native DOM events.
+ */
+export function createEventProxy<T extends Event>(event: T): T {
+	const { currentTarget } = event
+	return new Proxy(event, {
+		get: (target, prop) => {
+			if (prop === "currentTarget") {
+				return currentTarget
+			}
+			const value = Reflect.get(target, prop)
+			if (typeof value === "function") {
+				return value.bind(target)
+			}
+			return value
+		},
+	})
+}

package/src/util/createPolarCharts.tsx

@@ -0,0 +1,112 @@
+import type { Component } from "solid-js"
+
+import { RadialBarChart as OriginalRadialBarChart } from "../chart/RadialBarChart"
+import { RadarChart as OriginalRadarChart } from "../chart/RadarChart"
+import { PieChart as OriginalPieChart } from "../chart/PieChart"
+import type { RadialBarProps } from "../polar/RadialBar"
+import type { Props as PolarAngleAxisProps } from "../polar/PolarAngleAxis"
+import type { Props as PolarRadiusAxisProps } from "../polar/PolarRadiusAxis"
+import type { Props as RadarProps } from "../polar/Radar"
+import type { Props as PieProps } from "../polar/Pie"
+import type { PolarChartProps } from "./types"
+import type { TooltipProps } from "../component/Tooltip"
+import type { NameType, ValueType } from "../component/DefaultTooltipContent"
+
+type PolarChartWithoutLayout<TData> = Component<Omit<PolarChartProps<TData>, "layout">>
+
+type TypedPolarComponents<TData, TAngle, TRadius, TNumerical, TComponents> = {
+	[K in keyof TComponents]: K extends "PolarAngleAxis"
+		? Component<PolarAngleAxisProps<TData, TAngle>>
+		: K extends "PolarRadiusAxis"
+			? Component<PolarRadiusAxisProps<TData, TRadius>>
+			: K extends "RadialBar"
+				? Component<RadialBarProps<TData, TNumerical>>
+				: K extends "Radar"
+					? Component<RadarProps<TData, TNumerical>>
+					: K extends "Pie"
+						? Component<PieProps<TData, TNumerical>>
+						: K extends "Tooltip"
+							? Component<TooltipProps<Extract<TNumerical, ValueType>, Extract<keyof TData, NameType>>>
+							: TComponents[K]
+}
+
+/* Centric: angle axis is categorical, radius axis numerical. */
+export type TypedCentricChartContext<TData, TCategorical, TNumerical, TComponents> = {
+	RadarChart: PolarChartWithoutLayout<TData>
+} & Omit<
+	TypedPolarComponents<TData, TCategorical, TNumerical, TNumerical, TComponents>,
+	"RadialBar" | "RadialBarChart" | "Pie" | "PieChart"
+>
+
+/* Radial: angle axis is numerical, radius axis categorical. */
+export type TypedRadialChartContext<TData, TCategorical, TNumerical, TComponents> = {
+	RadialBarChart: PolarChartWithoutLayout<TData>
+	PieChart: PolarChartWithoutLayout<TData>
+} & Omit<TypedPolarComponents<TData, TNumerical, TCategorical, TNumerical, TComponents>, "Radar" | "RadarChart">
+
+export type NoRadial<T> = "RadialBar" extends keyof T
+	? never
+	: "RadialBarChart" extends keyof T
+		? never
+		: "Pie" extends keyof T
+			? never
+			: "PieChart" extends keyof T
+				? never
+				: T
+
+export type NoCentric<T> = "Radar" extends keyof T ? never : "RadarChart" extends keyof T ? never : T
+
+/**
+ * Creates a typed context for centric Polar charts.
+ *
+ * The returned `RadarChart` binds `layout="centric"` and drops the `layout` prop. Radial-only
+ * components (`RadialBar`, `Pie`, and their charts) are rejected at compile time.
+ *
+ * @example
+ * ```tsx
+ * const TypedCentric = createCentricChart<MyData, string, number>()({ RadarChart, Radar })
+ * ```
+ *
+ * @since 3.8
+ */
+export function createCentricChart<TData, TCategorical = string, TNumerical = number>() {
+	return function withComponents<TComponents extends Record<string, unknown>>(
+		components: NoRadial<TComponents>,
+	) {
+		return {
+			RadarChart: (props: Omit<PolarChartProps<TData>, "layout">) => (
+				<OriginalRadarChart {...props} layout="centric" />
+			),
+			...components,
+		} as unknown as TypedCentricChartContext<TData, TCategorical, TNumerical, TComponents>
+	}
+}
+
+/**
+ * Creates a typed context for radial Polar charts.
+ *
+ * The returned `RadialBarChart` and `PieChart` bind `layout="radial"` and drop the `layout` prop.
+ * Centric-only components (`Radar`, `RadarChart`) are rejected at compile time.
+ *
+ * @example
+ * ```tsx
+ * const TypedRadial = createRadialChart<MyData, string, number>()({ RadialBarChart, RadialBar })
+ * ```
+ *
+ * @since 3.8
+ */
+export function createRadialChart<TData, TCategorical = string, TNumerical = number>() {
+	return function withComponents<TComponents extends Record<string, unknown>>(
+		components: NoCentric<TComponents>,
+	) {
+		return {
+			RadialBarChart: (props: Omit<PolarChartProps<TData>, "layout">) => (
+				<OriginalRadialBarChart {...props} layout="radial" />
+			),
+			PieChart: (props: Omit<PolarChartProps<TData>, "layout">) => (
+				<OriginalPieChart {...props} layout="radial" />
+			),
+			...components,
+		} as unknown as TypedRadialChartContext<TData, TCategorical, TNumerical, TComponents>
+	}
+}

package/src/util/cursor/getCursorPoints.ts

@@ -0,0 +1,46 @@
+/* eslint-disable import/no-cycle */
+import { polarToCartesian } from "../PolarUtils"
+import {
+	Coordinate,
+	ChartOffsetInternal,
+	PolarCoordinate,
+	isPolarCoordinate,
+	CartesianLayout,
+	PolarLayout,
+} from "../types"
+import { RadialCursorPoints, getRadialCursorPoints } from "./getRadialCursorPoints"
+
+export function getCursorPoints(
+	layout: CartesianLayout | PolarLayout,
+	activeCoordinate: Coordinate | PolarCoordinate,
+	offset: ChartOffsetInternal,
+): [Coordinate, Coordinate] | RadialCursorPoints | undefined {
+	if (layout === "horizontal") {
+		return [
+			{ x: activeCoordinate.x, y: offset.top },
+			{ x: activeCoordinate.x, y: offset.top + offset.height },
+		]
+	}
+
+	if (layout === "vertical") {
+		return [
+			{ x: offset.left, y: activeCoordinate.y },
+			{ x: offset.left + offset.width, y: activeCoordinate.y },
+		]
+	}
+
+	if (isPolarCoordinate(activeCoordinate)) {
+		if (layout === "centric") {
+			const { cx, cy, innerRadius, outerRadius, angle } = activeCoordinate
+			const innerPoint = polarToCartesian(cx, cy, innerRadius, angle)
+			const outerPoint = polarToCartesian(cx, cy, outerRadius, angle)
+			return [
+				{ x: innerPoint.x, y: innerPoint.y },
+				{ x: outerPoint.x, y: outerPoint.y },
+			]
+		}
+		return getRadialCursorPoints(activeCoordinate)
+	}
+
+	return undefined
+}

package/src/util/cursor/getCursorRectangle.ts

@@ -0,0 +1,28 @@
+import type { ChartCoordinate, ChartOffsetInternal, LayoutType } from "../types"
+
+export type CursorRectangle = {
+	fill: string
+	height: number
+	stroke: string
+	width: number
+	x: number
+	y: number
+}
+
+export function getCursorRectangle(
+	layout: LayoutType,
+	activeCoordinate: ChartCoordinate,
+	offset: ChartOffsetInternal,
+	tooltipAxisBandSize: number,
+): CursorRectangle {
+	const halfSize = tooltipAxisBandSize / 2
+
+	return {
+		fill: "#ccc",
+		height: layout === "horizontal" ? offset.height - 1 : tooltipAxisBandSize,
+		stroke: "none",
+		width: layout === "horizontal" ? tooltipAxisBandSize : offset.width - 1,
+		x: layout === "horizontal" ? activeCoordinate.x - halfSize : offset.left + 0.5,
+		y: layout === "horizontal" ? offset.top + 0.5 : activeCoordinate.y - halfSize,
+	}
+}

package/src/util/cursor/getRadialCursorPoints.ts

@@ -0,0 +1,32 @@
+/* eslint-disable import/no-cycle */
+import { polarToCartesian } from "../PolarUtils"
+import { Coordinate, PolarCoordinate } from "../types"
+
+export type RadialCursorPoints = {
+	points: [startPoint: Coordinate, endPoint: Coordinate]
+	cx?: number
+	cy?: number
+	radius?: number
+	startAngle?: number
+	endAngle?: number
+}
+
+/**
+ * Only applicable for radial layouts
+ * @param {Object} activeCoordinate ChartCoordinate
+ * @returns {Object} RadialCursorPoints
+ */
+export function getRadialCursorPoints(activeCoordinate: PolarCoordinate): RadialCursorPoints {
+	const { cx, cy, radius, startAngle, endAngle } = activeCoordinate
+	const startPoint = polarToCartesian(cx, cy, radius, startAngle)
+	const endPoint = polarToCartesian(cx, cy, radius, endAngle)
+
+	return {
+		cx,
+		cy,
+		endAngle,
+		points: [startPoint, endPoint],
+		radius,
+		startAngle,
+	}
+}

package/src/util/excludeEventProps.ts

@@ -0,0 +1,171 @@
+const EventKeys = [
+	"dangerouslySetInnerHTML",
+	"onCopy",
+	"onCopyCapture",
+	"onCut",
+	"onCutCapture",
+	"onPaste",
+	"onPasteCapture",
+	"onCompositionEnd",
+	"onCompositionEndCapture",
+	"onCompositionStart",
+	"onCompositionStartCapture",
+	"onCompositionUpdate",
+	"onCompositionUpdateCapture",
+	"onFocus",
+	"onFocusCapture",
+	"onBlur",
+	"onBlurCapture",
+	"onChange",
+	"onChangeCapture",
+	"onBeforeInput",
+	"onBeforeInputCapture",
+	"onInput",
+	"onInputCapture",
+	"onReset",
+	"onResetCapture",
+	"onSubmit",
+	"onSubmitCapture",
+	"onInvalid",
+	"onInvalidCapture",
+	"onLoad",
+	"onLoadCapture",
+	"onError",
+	"onErrorCapture",
+	"onKeyDown",
+	"onKeyDownCapture",
+	"onKeyPress",
+	"onKeyPressCapture",
+	"onKeyUp",
+	"onKeyUpCapture",
+	"onAbort",
+	"onAbortCapture",
+	"onCanPlay",
+	"onCanPlayCapture",
+	"onCanPlayThrough",
+	"onCanPlayThroughCapture",
+	"onDurationChange",
+	"onDurationChangeCapture",
+	"onEmptied",
+	"onEmptiedCapture",
+	"onEncrypted",
+	"onEncryptedCapture",
+	"onEnded",
+	"onEndedCapture",
+	"onLoadedData",
+	"onLoadedDataCapture",
+	"onLoadedMetadata",
+	"onLoadedMetadataCapture",
+	"onLoadStart",
+	"onLoadStartCapture",
+	"onPause",
+	"onPauseCapture",
+	"onPlay",
+	"onPlayCapture",
+	"onPlaying",
+	"onPlayingCapture",
+	"onProgress",
+	"onProgressCapture",
+	"onRateChange",
+	"onRateChangeCapture",
+	"onSeeked",
+	"onSeekedCapture",
+	"onSeeking",
+	"onSeekingCapture",
+	"onStalled",
+	"onStalledCapture",
+	"onSuspend",
+	"onSuspendCapture",
+	"onTimeUpdate",
+	"onTimeUpdateCapture",
+	"onVolumeChange",
+	"onVolumeChangeCapture",
+	"onWaiting",
+	"onWaitingCapture",
+	"onAuxClick",
+	"onAuxClickCapture",
+	"onClick",
+	"onClickCapture",
+	"onContextMenu",
+	"onContextMenuCapture",
+	"onDoubleClick",
+	"onDoubleClickCapture",
+	"onDrag",
+	"onDragCapture",
+	"onDragEnd",
+	"onDragEndCapture",
+	"onDragEnter",
+	"onDragEnterCapture",
+	"onDragExit",
+	"onDragExitCapture",
+	"onDragLeave",
+	"onDragLeaveCapture",
+	"onDragOver",
+	"onDragOverCapture",
+	"onDragStart",
+	"onDragStartCapture",
+	"onDrop",
+	"onDropCapture",
+	"onMouseDown",
+	"onMouseDownCapture",
+	"onMouseEnter",
+	"onMouseLeave",
+	"onMouseMove",
+	"onMouseMoveCapture",
+	"onMouseOut",
+	"onMouseOutCapture",
+	"onMouseOver",
+	"onMouseOverCapture",
+	"onMouseUp",
+	"onMouseUpCapture",
+	"onSelect",
+	"onSelectCapture",
+	"onTouchCancel",
+	"onTouchCancelCapture",
+	"onTouchEnd",
+	"onTouchEndCapture",
+	"onTouchMove",
+	"onTouchMoveCapture",
+	"onTouchStart",
+	"onTouchStartCapture",
+	"onPointerDown",
+	"onPointerDownCapture",
+	"onPointerMove",
+	"onPointerMoveCapture",
+	"onPointerUp",
+	"onPointerUpCapture",
+	"onPointerCancel",
+	"onPointerCancelCapture",
+	"onPointerEnter",
+	"onPointerEnterCapture",
+	"onPointerLeave",
+	"onPointerLeaveCapture",
+	"onPointerOver",
+	"onPointerOverCapture",
+	"onPointerOut",
+	"onPointerOutCapture",
+	"onGotPointerCapture",
+	"onGotPointerCaptureCapture",
+	"onLostPointerCapture",
+	"onLostPointerCaptureCapture",
+	"onScroll",
+	"onScrollCapture",
+	"onWheel",
+	"onWheelCapture",
+	"onAnimationStart",
+	"onAnimationStartCapture",
+	"onAnimationEnd",
+	"onAnimationEndCapture",
+	"onAnimationIteration",
+	"onAnimationIterationCapture",
+	"onTransitionEnd",
+	"onTransitionEndCapture",
+] as const
+
+export type EventKeysType = (typeof EventKeys)[number]
+
+const EventKeySet: ReadonlySet<string> = new Set<string>(EventKeys)
+
+export function isEventKey(key: PropertyKey): key is EventKeysType {
+	return typeof key === "string" && EventKeySet.has(key)
+}