@solidports/recharts 0.1.0 → 0.1.1

package/src/shape/Sector.tsx

@@ -1,347 +0,0 @@
-/* eslint-disable import/no-cycle */
-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 type { GeometrySector, GeometrySectorWithCornerRadius } from "../util/types"
-import { polarToCartesian, RADIAN } from "../util/PolarUtils"
-import { getPercentValue, mathSign } from "../util/DataUtils"
-import { resolveDefaultProps } from "../util/resolveDefaultProps"
-import { svgPropertiesAndEvents } from "../util/svgPropertiesAndEvents"
-import { roundTemplateLiteral } from "../util/round"
-
-const getDeltaAngle = (startAngle: number, endAngle: number) => {
-	const sign = mathSign(endAngle - startAngle)
-	const deltaAngle = Math.min(Math.abs(endAngle - startAngle), 359.999)
-
-	return sign * deltaAngle
-}
-
-interface TangentCircleDef {
-	cx: number
-	cy: number
-	radius: number
-	angle: number
-	sign: number
-	isExternal?: boolean
-	cornerRadius: number
-	cornerIsExternal?: boolean
-}
-
-const getTangentCircle = ({
-	cx,
-	cy,
-	radius,
-	angle,
-	sign,
-	isExternal,
-	cornerRadius,
-	cornerIsExternal,
-}: TangentCircleDef) => {
-	const centerRadius = cornerRadius * (isExternal ? 1 : -1) + radius
-	const theta = Math.asin(cornerRadius / centerRadius) / RADIAN
-	const centerAngle = cornerIsExternal ? angle : angle + sign * theta
-	const center = polarToCartesian(cx, cy, centerRadius, centerAngle)
-	/* The coordinate of point which is tangent to the circle */
-	const circleTangency = polarToCartesian(cx, cy, radius, centerAngle)
-	/* The coordinate of point which is tangent to the radius line */
-	const lineTangencyAngle = cornerIsExternal ? angle - sign * theta : angle
-	const lineTangency = polarToCartesian(
-		cx,
-		cy,
-		centerRadius * Math.cos(theta * RADIAN),
-		lineTangencyAngle,
-	)
-	return { center, circleTangency, lineTangency, theta }
-}
-
-const getSectorPath = ({
-	cx,
-	cy,
-	innerRadius,
-	outerRadius,
-	startAngle,
-	endAngle,
-}: GeometrySector) => {
-	const angle = getDeltaAngle(startAngle, endAngle)
-
-	/* When the angle of sector equals to 360, star point and end point coincide */
-	const tempEndAngle = startAngle + angle
-	const outerStartPoint = polarToCartesian(cx, cy, outerRadius, startAngle)
-	const outerEndPoint = polarToCartesian(cx, cy, outerRadius, tempEndAngle)
-
-	let path = roundTemplateLiteral`M ${outerStartPoint.x},${outerStartPoint.y}
-    A ${outerRadius},${outerRadius},0,
-    ${+(Math.abs(angle) > 180)},${+(startAngle > tempEndAngle)},
-    ${outerEndPoint.x},${outerEndPoint.y}
-  `
-
-	if (innerRadius > 0) {
-		const innerStartPoint = polarToCartesian(cx, cy, innerRadius, startAngle)
-		const innerEndPoint = polarToCartesian(cx, cy, innerRadius, tempEndAngle)
-		path += roundTemplateLiteral`L ${innerEndPoint.x},${innerEndPoint.y}
-            A ${innerRadius},${innerRadius},0,
-            ${+(Math.abs(angle) > 180)},${+(startAngle <= tempEndAngle)},
-            ${innerStartPoint.x},${innerStartPoint.y} Z`
-	} else {
-		path += roundTemplateLiteral`L ${cx},${cy} Z`
-	}
-
-	return path
-}
-
-const getSectorWithCorner = ({
-	cx,
-	cy,
-	innerRadius,
-	outerRadius,
-	cornerRadius,
-	forceCornerRadius,
-	cornerIsExternal,
-	startAngle,
-	endAngle,
-}: GeometrySectorWithCornerRadius) => {
-	const sign = mathSign(endAngle - startAngle)
-	const {
-		circleTangency: soct,
-		lineTangency: solt,
-		theta: sot,
-	} = getTangentCircle({
-		angle: startAngle,
-		cornerIsExternal,
-		cornerRadius,
-		cx,
-		cy,
-		radius: outerRadius,
-		sign,
-	})
-	const {
-		circleTangency: eoct,
-		lineTangency: eolt,
-		theta: eot,
-	} = getTangentCircle({
-		angle: endAngle,
-		cornerIsExternal,
-		cornerRadius,
-		cx,
-		cy,
-		radius: outerRadius,
-		sign: -sign,
-	})
-	const outerArcAngle = cornerIsExternal
-		? Math.abs(startAngle - endAngle)
-		: Math.abs(startAngle - endAngle) - sot - eot
-
-	if (outerArcAngle < 0) {
-		if (forceCornerRadius) {
-			return roundTemplateLiteral`M ${solt.x},${solt.y}
-        a${cornerRadius},${cornerRadius},0,0,1,${cornerRadius * 2},0
-        a${cornerRadius},${cornerRadius},0,0,1,${-cornerRadius * 2},0
-      `
-		}
-		return getSectorPath({
-			cx,
-			cy,
-			endAngle,
-			innerRadius,
-			outerRadius,
-			startAngle,
-		})
-	}
-
-	let path = roundTemplateLiteral`M ${solt.x},${solt.y}
-    A${cornerRadius},${cornerRadius},0,0,${+(sign < 0)},${soct.x},${soct.y}
-    A${outerRadius},${outerRadius},0,${+(outerArcAngle > 180)},${+(sign < 0)},${eoct.x},${eoct.y}
-    A${cornerRadius},${cornerRadius},0,0,${+(sign < 0)},${eolt.x},${eolt.y}
-  `
-
-	if (innerRadius > 0) {
-		const {
-			circleTangency: sict,
-			lineTangency: silt,
-			theta: sit,
-		} = getTangentCircle({
-			angle: startAngle,
-			cornerIsExternal,
-			cornerRadius,
-			cx,
-			cy,
-			isExternal: true,
-			radius: innerRadius,
-			sign,
-		})
-		const {
-			circleTangency: eict,
-			lineTangency: eilt,
-			theta: eit,
-		} = getTangentCircle({
-			angle: endAngle,
-			cornerIsExternal,
-			cornerRadius,
-			cx,
-			cy,
-			isExternal: true,
-			radius: innerRadius,
-			sign: -sign,
-		})
-		const innerArcAngle = cornerIsExternal
-			? Math.abs(startAngle - endAngle)
-			: Math.abs(startAngle - endAngle) - sit - eit
-
-		if (innerArcAngle < 0 && cornerRadius === 0) {
-			return `${path}L${cx},${cy}Z`
-		}
-
-		path += roundTemplateLiteral`L${eilt.x},${eilt.y}
-      A${cornerRadius},${cornerRadius},0,0,${+(sign < 0)},${eict.x},${eict.y}
-      A${innerRadius},${innerRadius},0,${+(innerArcAngle > 180)},${+(sign > 0)},${sict.x},${sict.y}
-      A${cornerRadius},${cornerRadius},0,0,${+(sign < 0)},${silt.x},${silt.y}Z`
-	} else {
-		path += roundTemplateLiteral`L${cx},${cy}Z`
-	}
-
-	return path
-}
-
-interface SectorProps {
-	class?: string
-	className?: string
-	/**
-	 * The x-coordinate of center.
-	 * @default 0
-	 */
-	cx?: number
-	/**
-	 * The y-coordinate of center.
-	 * @default 0
-	 */
-	cy?: number
-	/**
-	 * The inner radius of the sector.
-	 * @default 0
-	 */
-	innerRadius?: number
-	/**
-	 * The outer radius of the sector.
-	 * @default 0
-	 */
-	outerRadius?: number
-	/**
-	 * The start angle of the sector.
-	 * @default 0
-	 */
-	startAngle?: number
-	/**
-	 * The end angle of the sector.
-	 * @default 0
-	 */
-	endAngle?: number
-	/**
-	 * The radius of corners.
-	 * @default 0
-	 */
-	cornerRadius?: number
-	/**
-	 * Whether force to render round corner when the angle of sector is very small
-	 * @default false
-	 */
-	forceCornerRadius?: boolean
-	cornerIsExternal?: boolean
-	/**
-	 * The customized event handler of click on the sector
-	 */
-	onClick?: (e: MouseEvent & { currentTarget: SVGPathElement }) => void
-	/**
-	 * The customized event handler of mousedown on the sector
-	 */
-	onMouseDown?: (e: MouseEvent & { currentTarget: SVGPathElement }) => void
-	/**
-	 * The customized event handler of mouseup on the sector
-	 */
-	onMouseUp?: (e: MouseEvent & { currentTarget: SVGPathElement }) => void
-	/**
-	 * The customized event handler of mousemove on the sector
-	 */
-	onMouseMove?: (e: MouseEvent & { currentTarget: SVGPathElement }) => void
-	/**
-	 * The customized event handler of mouseover on the sector
-	 */
-	onMouseOver?: (e: MouseEvent & { currentTarget: SVGPathElement }) => void
-	/**
-	 * The customized event handler of mouseout on the sector
-	 */
-	onMouseOut?: (e: MouseEvent & { currentTarget: SVGPathElement }) => void
-	/**
-	 * The customized event handler of mouseenter on the sector
-	 */
-	onMouseEnter?: (e: MouseEvent & { currentTarget: SVGPathElement }) => void
-	/**
-	 * The customized event handler of mouseleave on the sector
-	 */
-	onMouseLeave?: (e: MouseEvent & { currentTarget: SVGPathElement }) => void
-}
-
-/**
- * SVG cx, cy are `string | number | undefined`, but internally we use `number` so let's
- * override the types here.
- */
-export type Props = WithoutRemoveFalse<Omit<JSX.PathSVGAttributes<SVGPathElement>, "cx" | "cy" | keyof SectorProps>> & Partial<SectorProps>
-
-export const defaultSectorProps = {
-	cornerIsExternal: false,
-	cornerRadius: 0,
-	cx: 0,
-	cy: 0,
-	endAngle: 0,
-	forceCornerRadius: false,
-	innerRadius: 0,
-	outerRadius: 0,
-	startAngle: 0,
-} as const satisfies Partial<Props>
-
-export function Sector(ownProps: Props) {
-	/* Props injected for a shape passed as an element (see ShapeElementProps). */
-	const sectorProps = useShapeElementProps(ownProps)
-	const props = resolveDefaultProps(sectorProps, defaultSectorProps)
-
-	const isValid = () =>
-		props.outerRadius >= props.innerRadius && props.startAngle !== props.endAngle
-
-	const sectorPath = () => {
-		const deltaRadius = props.outerRadius - props.innerRadius
-		const cr = getPercentValue(props.cornerRadius, deltaRadius, 0, true)
-
-		if (cr > 0 && Math.abs(props.startAngle - props.endAngle) < 360) {
-			return getSectorWithCorner({
-				cornerIsExternal: props.cornerIsExternal,
-				cornerRadius: Math.min(cr, deltaRadius / 2),
-				cx: props.cx,
-				cy: props.cy,
-				endAngle: props.endAngle,
-				forceCornerRadius: props.forceCornerRadius,
-				innerRadius: props.innerRadius,
-				outerRadius: props.outerRadius,
-				startAngle: props.startAngle,
-			})
-		}
-		return getSectorPath({
-			cx: props.cx,
-			cy: props.cy,
-			endAngle: props.endAngle,
-			innerRadius: props.innerRadius,
-			outerRadius: props.outerRadius,
-			startAngle: props.startAngle,
-		})
-	}
-
-	return (
-		<Show when={isValid()}>
-			<path
-				{...svgPropertiesAndEvents(props)}
-				class={clsx("recharts-sector", props.class, (props as { className?: string }).className)}
-				d={sectorPath()}
-			/>
-		</Show>
-	)
-}

package/src/shape/Symbols.tsx

@@ -1,139 +0,0 @@
-/* eslint-disable import/no-cycle */
-import type { JSX } from '@solidjs/web';
-import { useShapeElementProps } from "../util/ShapeElementProps"
-import { Show } from 'solid-js';
-import {
-	symbol as shapeSymbol,
-	symbolCircle,
-	symbolCross,
-	symbolDiamond,
-	symbolSquare,
-	symbolStar,
-	symbolTriangle,
-	symbolWye,
-	type SymbolType as D3SymbolType,
-} from "victory-vendor/d3-shape"
-import { clsx } from "clsx"
-import type { SymbolType } from "../util/types"
-import { isNumber, upperFirst } from "../util/DataUtils"
-import { svgPropertiesAndEvents } from "../util/svgPropertiesAndEvents"
-
-type SizeType = "area" | "diameter"
-
-interface SymbolFactory {
-	[type: string]: D3SymbolType
-}
-
-const symbolFactories: SymbolFactory = {
-	symbolCircle,
-	symbolCross,
-	symbolDiamond,
-	symbolSquare,
-	symbolStar,
-	symbolTriangle,
-	symbolWye,
-}
-const RADIAN = Math.PI / 180
-
-const getSymbolFactory = (type: SymbolType) => {
-	const name = `symbol${upperFirst(type)}`
-
-	return symbolFactories[name] || symbolCircle
-}
-
-const calculateAreaSize = (size: number, sizeType: SizeType, type: SymbolType) => {
-	if (sizeType === "area") {
-		return size
-	}
-
-	switch (type) {
-		case "cross":
-			return (5 * size * size) / 9
-		case "diamond":
-			return (0.5 * size * size) / Math.sqrt(3)
-		case "square":
-			return size * size
-		case "star": {
-			const angle = 18 * RADIAN
-
-			return 1.25 * size * size * (Math.tan(angle) - Math.tan(angle * 2) * Math.tan(angle) ** 2)
-		}
-		case "triangle":
-			return (Math.sqrt(3) * size * size) / 4
-		case "wye":
-			return ((21 - 10 * Math.sqrt(3)) * size * size) / 8
-		default:
-			return (Math.PI * size * size) / 4
-	}
-}
-
-export interface InnerSymbolsProp {
-	class?: string
-	type?: SymbolType
-	cx?: number
-	cy?: number
-	size?: number
-	sizeType?: SizeType
-}
-
-export type SymbolsProps = Omit<JSX.PathSVGAttributes<SVGPathElement>, "type"> & InnerSymbolsProp
-
-const registerSymbol = (key: string, factory: D3SymbolType) => {
-	symbolFactories[`symbol${upperFirst(key)}`] = factory
-}
-
-/**
- * Calculate the path of curve
- * @return path
- */
-const getSymbolPath = (type: SymbolType, size: number, sizeType: SizeType): string | undefined => {
-	const symbolFactory = getSymbolFactory(type)
-	const symbol = shapeSymbol()
-		.type(symbolFactory)
-		.size(calculateAreaSize(size, sizeType, type))
-
-	const s = symbol()
-	if (s === null) {
-		return undefined
-	}
-	return s
-}
-
-/**
- * Renders a symbol from a set of predefined shapes.
- */
-export function Symbols(ownProps: SymbolsProps) {
-	/* Props injected for a shape passed as an element (see ShapeElementProps). */
-	const props = useShapeElementProps(ownProps)
-	const type = () => {
-		const t = props.type ?? "circle"
-		if (typeof t === "string") {
-			/*
-			 * Our type guard is not as strong as it could be (i.e. non-existent),
-			 * and so despite the typescript type saying that `type` is a `SymbolType`,
-			 * we can get numbers or really anything, so let's have a runtime check here to fix the exception.
-			 *
-			 * https://github.com/recharts/recharts/issues/6197
-			 */
-			return t
-		}
-		return "circle" as SymbolType
-	}
-	const size = () => props.size ?? 64
-	const sizeType = () => props.sizeType ?? "area"
-
-	const isValid = () => isNumber(props.cx) && isNumber(props.cy) && isNumber(size())
-
-	return (
-		<Show when={isValid()}>
-			<path
-				{...svgPropertiesAndEvents(props)}
-				class={clsx("recharts-symbols", props.class)}
-				transform={`translate(${props.cx}, ${props.cy})`}
-				d={getSymbolPath(type(), size(), sizeType())}
-			/>
-		</Show>
-	)
-}
-
-Symbols.registerSymbol = registerSymbol