@solidports/recharts 0.1.0 → 0.1.1

package/src/theme/lightTheme.ts

@@ -1,13 +0,0 @@
-import type { RechartsTheme } from "./RechartsTheme"
-
-/**
- * Light mode theme
- *
- * @experimental - this is still in active development, assume that the API will change in a minor/patch version
- */
-export const lightTheme: RechartsTheme = {
-	grid: {
-		stroke: "#d6d3d1",
-		fill: "none",
-	},
-}

package/src/types.ts

@@ -1,54 +0,0 @@
-/**
- * Defines the blank space between the chart and the plot area.
- * This blank space is occupied by supporting elements like axes, legends, and brushes.
- * This also includes any margins that might be applied to the chart.
- */
-export type ChartOffset = {
-	/**
-	 * Distance from the top edge of the chart to the top edge of the plot area.
-	 */
-	readonly top: number
-	/**
-	 * Distance from the bottom edge of the chart to the bottom edge of the plot area.
-	 * Note that this is not a coordinate, this is a distance.
-	 * Meaning, `offset.bottom` could be 0 in a perfectly fine big chart.
-	 */
-	readonly bottom: number
-	/**
-	 * Distance from the left edge of the chart to the left edge of the plot area.
-	 */
-	readonly left: number
-	/**
-	 * Distance from the right edge of the chart to the right edge of the plot area.
-	 * Note that this is not a coordinate, this is a distance.
-	 * Meaning, `offset.right` could be 0 in a perfectly fine big chart.
-	 */
-	readonly right: number
-}
-
-/**
- * Plot area is the area where the actual chart data is rendered.
- * This means: bars, lines, scatter points, etc.
- */
-export type PlotArea = {
-	/**
-	 * The width of the plot area.
-	 * This will be the same as `chartWidth - offset.left - offset.right`
-	 */
-	readonly width: number
-	/**
-	 * The height of the plot area.
-	 * This will be the same as `chartHeight - offset.top - offset.bottom`
-	 */
-	readonly height: number
-	/**
-	 * The x coordinate of the top-left corner of the plot area.
-	 * This will be the same as `offset.left`
-	 */
-	readonly x: number
-	/**
-	 * The y coordinate of the top-left corner of the plot area.
-	 * This will be the same as `offset.top`
-	 */
-	readonly y: number
-}

package/src/util/ActiveShapeUtils.tsx

@@ -1,162 +0,0 @@
-/* eslint-disable import/no-cycle */
-import type { JSX } from '@solidjs/web';
-import { Dynamic } from '@solidjs/web';
-import { createMemo, Show } from 'solid-js';
-import isPlainObject from "es-toolkit/compat/isPlainObject"
-
-import { Rectangle } from "../shape/Rectangle"
-import { Trapezoid } from "../shape/Trapezoid"
-import { Sector } from "../shape/Sector"
-import { Layer } from "../container/Layer"
-import { Symbols, SymbolsProps } from "../shape/Symbols"
-import { Curve } from "../shape/Curve"
-import { cloneJsxNodeWithProps, isJsxNode } from "./ReactUtils"
-import {
-	armShapeElementProps,
-	createShapeElementPropsSlot,
-	disarmShapeElementProps,
-	ShapeElementPropsProvider,
-} from "./ShapeElementProps"
-
-import { splitProps } from './solid-1-compat';
-/**
- * This is an abstraction for rendering a user defined prop for a customized shape in several forms.
- *
- * <Shape /> is the root and will handle taking in:
- *  - an object of svg properties
- *  - a boolean
- *  - a render prop (inline function that returns jsx)
- *  - a JSX element
- *
- * <ShapeSelector /> is a subcomponent of <Shape /> and used to match a component
- * to the value of props.shapeType that is passed to the root.
- */
-type ShapeType = "trapezoid" | "rectangle" | "sector" | "symbols" | "curve"
-
-export type ShapeProps<OptionType, ExtraProps> = {
-	shapeType: ShapeType
-	option: OptionType
-	/**
-	 * Component rendered when `option` is empty, an object of props, or this same component.
-	 * Overrides the `shapeType` lookup, like upstream's `DefaultShape`.
-	 */
-	DefaultShape?: (props: never) => JSX.Element
-	isActive?: boolean
-	index?: string | number
-	activeClassName?: string
-	inActiveClassName?: string
-} & ExtraProps
-
-function defaultPropTransformer(
-	option: Record<string, unknown>,
-	props: Record<string, unknown>,
-): Record<string, unknown> {
-	return {
-		...props,
-		...option,
-	}
-}
-
-function isSymbolsProps(
-	shapeType: ShapeType,
-	_elementProps: unknown,
-): _elementProps is SymbolsProps {
-	return shapeType === "symbols"
-}
-
-type ShapeComponent = (props: Record<string, unknown>) => JSX.Element
-
-const SHAPE_MAP: Record<ShapeType, ShapeComponent> = {
-	curve: Curve as ShapeComponent,
-	rectangle: Rectangle as ShapeComponent,
-	sector: Sector as ShapeComponent,
-	symbols: Symbols as ShapeComponent,
-	trapezoid: Trapezoid as ShapeComponent,
-}
-
-function ShapeSelector(props: {
-	shapeType: ShapeType
-	elementProps: Record<string, unknown>
-}): JSX.Element {
-	const component = createMemo(() => SHAPE_MAP[props.shapeType])
-	const isSymbols = createMemo(
-		() => props.shapeType === "symbols" && isSymbolsProps(props.shapeType, props.elementProps),
-	)
-	return (
-		<Show when={component()}>
-			<Dynamic component={isSymbols() ? Symbols : component()} {...props.elementProps} />
-		</Show>
-	)
-}
-
-export function getPropsFromShapeOption<T>(option: T): T {
-	return option
-}
-
-export function Shape<OptionType, ExtraProps>(
-	allProps: ShapeProps<OptionType, ExtraProps>,
-): JSX.Element {
-	/* mirror upstream: keep `isActive` on the forwarded props so function-options and
-	   downstream rectangles receive it (tests assert it on the received props). */
-	const [local, props] = splitProps(allProps as Record<string, unknown>, [
-		"option",
-		"shapeType",
-		"DefaultShape",
-		"activeClassName",
-		"inActiveClassName",
-	])
-	const activeClassName = () => (local.activeClassName as string) ?? "recharts-active-shape"
-	const inActiveClassName = () => (local.inActiveClassName as string) ?? "recharts-shape"
-
-	const renderDefault = (elementProps: Record<string, unknown>): JSX.Element => {
-		const DefaultShape = local.DefaultShape as ShapeComponent | undefined
-		if (DefaultShape != null) {
-			return <Dynamic component={DefaultShape} {...elementProps} />
-		}
-		return <ShapeSelector shapeType={local.shapeType as ShapeType} elementProps={elementProps} />
-	}
-
-	/* Element options are evaluated inside the provider so built-in shapes pick up the
-	   props upstream would inject with cloneElement (see ShapeElementProps). */
-	const slot = createShapeElementPropsSlot()
-
-	const renderShape = (): JSX.Element => {
-		const token = armShapeElementProps(slot, props)
-		/* read once: an element option is a getter that mints a new shape per read */
-		const option = local.option
-		/* Only an element option may take the injected props; it already has while being
-		   read. Disarm so shapes rendered by the remaining branches (and their nested
-		   shapes) keep exactly the props they are given. */
-		disarmShapeElementProps(slot)
-
-		if (option != null && option === local.DefaultShape) {
-			return renderDefault(props)
-		}
-
-		if (typeof option === "function") {
-			return (option as (p: Record<string, unknown>, i: unknown) => JSX.Element)(props, props.index)
-		}
-
-		if (isPlainObject(option) && typeof option !== "boolean") {
-			const nextProps = defaultPropTransformer(option as Record<string, unknown>, props)
-			return renderDefault(nextProps)
-		}
-
-		/* A built-in shape passed as an element took the injected props while it was
-		   evaluated. Anything else (a custom component) is cloned with the props applied. */
-		if (isJsxNode(option)) {
-			if (token.consumed) {
-				return option as unknown as JSX.Element
-			}
-			return <>{cloneJsxNodeWithProps(option, props as Record<string, unknown>) as unknown as JSX.Element}</>
-		}
-
-		return renderDefault(props)
-	}
-
-	return (
-		<Layer class={props.isActive ? activeClassName() : inActiveClassName()}>
-			<ShapeElementPropsProvider slot={slot}>{renderShape()}</ShapeElementPropsProvider>
-		</Layer>
-	)
-}

package/src/util/BarUtils.tsx

@@ -1,62 +0,0 @@
-/* eslint-disable import/no-cycle */
-import type { JSX } from '@solidjs/web';
-import invariant from "tiny-invariant"
-import { ActiveShape, DataKey } from "./types"
-import { Rectangle, Props as RectangleProps } from "../shape/Rectangle"
-import { BarShapeProps } from "../cartesian/Bar"
-import { Shape } from "./ActiveShapeUtils"
-import { isNullish, isNumber } from "./DataUtils"
-
-export const defaultBarShape = Rectangle
-
-export type BarRectangleProps = {
-	option: ActiveShape<BarShapeProps, SVGPathElement> | undefined
-	isActive: boolean
-	onMouseEnter?: (e: MouseEvent & { currentTarget: SVGPathElement }) => void
-	onMouseLeave?: (e: MouseEvent & { currentTarget: SVGPathElement }) => void
-	onClick?: (e: MouseEvent & { currentTarget: SVGPathElement }) => void
-	width?: number
-	height?: number
-	index: number
-	dataKey: DataKey<unknown> | undefined
-	/* React-style alias forwarded through Shape to function options that read className. */
-	className?: string
-	animationElapsedTime?: number
-	isAnimating?: boolean
-	isEntrance?: boolean
-} & Omit<RectangleProps, "onAnimationStart" | "onAnimationEnd">
-
-export function BarRectangle(props: BarRectangleProps): JSX.Element {
-	return (
-		<Shape
-			shapeType="rectangle"
-			activeClassName="recharts-active-bar"
-			inActiveClassName="recharts-inactive-bar"
-			{...props}
-		/>
-	)
-}
-
-export type MinPointSize = number | ((value: number | undefined | null, index: number) => number)
-
-/**
- * Safely gets minPointSize from the minPointSize prop if it is a function
- * @param minPointSize minPointSize as passed to the Bar component
- * @param defaultValue default minPointSize
- * @returns minPointSize
- */
-export const minPointSizeCallback =
-	(minPointSize: MinPointSize, defaultValue = 0) =>
-	(value: unknown, index: number): number => {
-		if (isNumber(minPointSize)) return minPointSize
-		const isValueNumberOrNil = isNumber(value) || isNullish(value)
-		if (isValueNumberOrNil) {
-			return minPointSize(value, index)
-		}
-
-		invariant(
-			isValueNumberOrNil,
-			`minPointSize callback function received a value with type of ${typeof value}. Currently only numbers or null/undefined are supported.`,
-		)
-		return defaultValue
-	}

package/src/util/BarePortal.tsx

@@ -1,50 +0,0 @@
-import {
-  createEffect,
-  createMemo,
-  createRoot,
-  getOwner,
-  runWithOwner,
-} from 'solid-js';
-import type { JSX } from '@solidjs/web';
-import { insert } from '@solidjs/web';
-/* Wrapper-less alternative to `solid-js/web::Portal`. Solid's Portal mounts a
- * `<div>` inside `mount` and inserts children there — that extra div breaks
- * upstream tests that assert `.recharts-wrapper > .recharts-tooltip-wrapper`
- * direct-child selectors. BarePortal inserts directly on `mount` so children
- * land at the requested level. */
-export function BarePortal(props: {
-	mount: HTMLElement | undefined
-	children: JSX.Element
-}): null {
-	const owner = getOwner()
-	createEffect(
-		() => props.mount,
-		(target) => {
-			if (target == null) return
-			/* Children land between two markers so teardown can remove exactly what was inserted;
-			   disposing the root alone leaves the inserted nodes in the mount. */
-			const start = document.createTextNode("")
-			const marker = document.createTextNode("")
-			target.appendChild(start)
-			target.appendChild(marker)
-			const dispose = createRoot((d) => {
-				/* eslint-disable-next-line solid/reactivity -- createMemo inside runWithOwner must be assigned inline; owner-tree placement is the invariant */
-				const content = runWithOwner(owner, () => createMemo(() => props.children))
-				insert(target, content, marker)
-				return d
-			})
-			return () => {
-				dispose()
-				let node = start.nextSibling
-				while (node != null && node !== marker) {
-					const next = node.nextSibling
-					node.remove()
-					node = next
-				}
-				start.remove()
-				marker.remove()
-			}
-		},
-	)
-	return null
-}

package/src/util/CamelCaseSVGAttrs.ts

@@ -1,34 +0,0 @@
-/**
- * Solid uses kebab-case for SVG attributes, React uses camelCase.
- * This type adds camelCase aliases for the most commonly-used SVG presentation attributes
- * so ported React code can continue to use props.strokeWidth, props.fillOpacity, etc.
- */
-export type CamelCaseSVGAttrs = {
-	alignmentBaseline?: string
-	capHeight?: number | string
-	className?: string
-	clipPath?: string
-	clipRule?: "nonzero" | "evenodd" | "inherit"
-	dominantBaseline?: string
-	fillOpacity?: number | string
-	fillRule?: "nonzero" | "evenodd" | "inherit"
-	fontFamily?: string
-	fontSize?: number | string
-	fontStyle?: string
-	fontWeight?: number | string
-	letterSpacing?: number | string
-	pointerEvents?: string
-	stopColor?: string
-	stopOpacity?: number | string
-	strokeDasharray?: string
-	strokeDashoffset?: number | string
-	strokeLinecap?: "butt" | "round" | "square" | "inherit"
-	strokeLinejoin?: "miter" | "round" | "bevel" | "inherit"
-	strokeMiterlimit?: number | string
-	strokeOpacity?: number | string
-	strokeWidth?: number | string
-	textAnchor?: "start" | "middle" | "end" | "inherit"
-	textDecoration?: string
-	wordSpacing?: number | string
-	writingMode?: string
-}

package/src/util/CartesianUtils.ts

@@ -1,48 +0,0 @@
-/* eslint-disable import/no-cycle */
-import { Coordinate, RectangleCoordinate, RectanglePosition, Size } from "./types"
-
-export const rectWithPoints = (
-	{ x: x1, y: y1 }: Coordinate,
-	{ x: x2, y: y2 }: Coordinate,
-): RectanglePosition => ({
-	height: Math.abs(y2 - y1),
-	width: Math.abs(x2 - x1),
-	x: Math.min(x1, x2),
-	y: Math.min(y1, y2),
-})
-
-/**
- * Compute the x, y, width, and height of a box from two reference points.
- * @param  {Object} coords     x1, x2, y1, and y2
- * @return {Object} object
- */
-export const rectWithCoords = ({ x1, y1, x2, y2 }: RectangleCoordinate): RectanglePosition =>
-	rectWithPoints({ x: x1, y: y1 }, { x: x2, y: y2 })
-
-/** Normalizes the angle so that 0 <= angle < 180.
- * @param {number} angle Angle in degrees.
- * @return {number} the normalized angle with a value of at least 0 and never greater or equal to 180. */
-export function normalizeAngle(angle: number) {
-	return ((angle % 180) + 180) % 180
-}
-
-/** Calculates the width of the largest horizontal line that fits inside a rectangle that is displayed at an angle.
- * @param {Object} size Width and height of the text in a horizontal position.
- * @param {number} angle Angle in degrees in which the text is displayed.
- * @return {number} The width of the largest horizontal line that fits inside a rectangle that is displayed at an angle.
- */
-export const getAngledRectangleWidth = ({ width, height }: Size, angle: number | undefined = 0) => {
-	const normalizedAngle = normalizeAngle(angle)
-	const angleRadians = (normalizedAngle * Math.PI) / 180
-
-	/* Depending on the height and width of the rectangle, we may need to use different formulas to calculate the angled
-	 * width. This threshold defines when each formula should kick in. */
-	const angleThreshold = Math.atan(height / width)
-
-	const angledWidth =
-		angleRadians > angleThreshold && angleRadians < Math.PI - angleThreshold
-			? height / Math.sin(angleRadians)
-			: width / Math.cos(angleRadians)
-
-	return Math.abs(angledWidth)
-}