@solidports/recharts 0.1.0

package/src/shape/Sector.tsx

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

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