@solidports/recharts 0.1.0

package/src/util/Constants.ts

@@ -0,0 +1,42 @@
+export const COLOR_PANEL = [
+	"#1890FF",
+	"#66B5FF",
+	"#41D9C7",
+	"#2FC25B",
+	"#6EDB8F",
+	"#9AE65C",
+	"#FACC14",
+	"#E6965C",
+	"#57AD71",
+	"#223273",
+	"#738AE6",
+	"#7564CC",
+	"#8543E0",
+	"#A877ED",
+	"#5C8EE6",
+	"#13C2C2",
+	"#70E0E0",
+	"#5CA3E6",
+	"#3436C7",
+	"#8082FF",
+	"#DD81E6",
+	"#F04864",
+	"#FA7D92",
+	"#D598D9",
+]
+
+/**
+ * We use this attribute to identify which element is the one that the user is touching.
+ * The index is the position of the element in the data array.
+ * This can be either a number (for array-based charts) or a string (for the charts that have a matrix-shaped data).
+ */
+export const DATA_ITEM_INDEX_ATTRIBUTE_NAME = "data-recharts-item-index"
+
+/**
+ * We use this attribute to identify which element is the one that the user is touching.
+ * Unlike dataKey, or name, it is always unique.
+ */
+export const DATA_ITEM_GRAPHICAL_ITEM_ID_ATTRIBUTE_NAME = "data-recharts-item-id"
+
+export const DEFAULT_Y_AXIS_WIDTH = 60
+export const DEFAULT_X_AXIS_HEIGHT = 30

package/src/util/CssPrefixUtils.ts

@@ -0,0 +1,20 @@
+const PREFIX_LIST = ["Webkit", "Moz", "O", "ms"]
+
+export const generatePrefixStyle = (name: string, value: string) => {
+	if (!name) {
+		return undefined
+	}
+
+	const camelName = name.replace(/(\w)/, (v) => v.toUpperCase())
+	const result: Record<string, string> = PREFIX_LIST.reduce(
+		(res: Record<string, string>, entry) => {
+			res[entry + camelName] = value
+			return res
+		},
+		{},
+	)
+
+	result[name] = value
+
+	return result
+}

package/src/util/DOMUtils.ts

@@ -0,0 +1,129 @@
+/* eslint-disable import/no-cycle */
+import type { JSX } from '@solidjs/web';
+import { Global } from "./Global"
+import { Size } from "./types"
+import { LRUCache } from "./LRUCache"
+
+export interface TextMeasurementConfig {
+	/** Maximum number of items to cache */
+	cacheSize: number
+	/** Whether to enable caching */
+	enableCache: boolean
+}
+
+const defaultConfig: TextMeasurementConfig = {
+	cacheSize: 2000,
+	enableCache: true,
+}
+
+let currentConfig = { ...defaultConfig }
+
+let stringCache = new LRUCache<string, Size>(currentConfig.cacheSize)
+const SPAN_STYLE = {
+	border: "none",
+	left: 0,
+	margin: 0,
+	padding: 0,
+	position: "absolute",
+	top: "-20000px",
+	whiteSpace: "pre",
+}
+const MEASUREMENT_SPAN_ID = "recharts_measurement_span"
+
+function createCacheKey(text: string | number, style: JSX.CSSProperties): string {
+	const fontSize = style["font-size"] || ""
+	const fontFamily = style["font-family"] || ""
+	const fontWeight = style["font-weight"] || ""
+	const fontStyle = style["font-style"] || ""
+	const letterSpacing = style["letter-spacing"] || ""
+	const textTransform = style["text-transform"] || ""
+
+	return `${text}|${fontSize}|${fontFamily}|${fontWeight}|${fontStyle}|${letterSpacing}|${textTransform}`
+}
+
+/**
+ * Measure text using DOM (accurate but slower)
+ * @param text - The text to measure
+ * @param style - CSS style properties to apply
+ * @returns The size of the text
+ */
+const measureTextWithDOM = (text: string | number, style: JSX.CSSProperties): Size => {
+	try {
+		let measurementSpan = document.getElementById(MEASUREMENT_SPAN_ID)
+		if (!measurementSpan) {
+			measurementSpan = document.createElement("span")
+			measurementSpan.setAttribute("id", MEASUREMENT_SPAN_ID)
+			measurementSpan.setAttribute("aria-hidden", "true")
+			document.body.appendChild(measurementSpan)
+		}
+
+		Object.assign(measurementSpan.style, SPAN_STYLE, style)
+		measurementSpan.textContent = `${text}`
+
+		const rect = measurementSpan.getBoundingClientRect()
+		return { height: rect.height, width: rect.width }
+	} catch {
+		return { height: 0, width: 0 }
+	}
+}
+
+export const getStringSize = (text: string | number, style: JSX.CSSProperties = {}): Size => {
+	if (text === undefined || text === null || Global.isSsr) {
+		return { height: 0, width: 0 }
+	}
+
+	if (!currentConfig.enableCache) {
+		return measureTextWithDOM(text, style)
+	}
+
+	const cacheKey = createCacheKey(text, style)
+	const cachedResult = stringCache.get(cacheKey)
+
+	if (cachedResult) {
+		return cachedResult
+	}
+
+	const result = measureTextWithDOM(text, style)
+
+	stringCache.set(cacheKey, result)
+
+	return result
+}
+
+/**
+ * Configure text measurement behavior
+ * @param config - Partial configuration to apply
+ * @returns void
+ */
+export const configureTextMeasurement = (config: Partial<TextMeasurementConfig>): void => {
+	const newConfig = { ...currentConfig, ...config }
+
+	if (newConfig.cacheSize !== currentConfig.cacheSize) {
+		stringCache = new LRUCache<string, Size>(newConfig.cacheSize)
+	}
+
+	currentConfig = newConfig
+}
+
+/**
+ * Get current text measurement configuration
+ * @returns Current configuration
+ */
+export const getTextMeasurementConfig = (): TextMeasurementConfig => ({ ...currentConfig })
+
+/**
+ * Clear the string size cache. Useful for testing or memory management.
+ * @returns void
+ */
+export const clearStringCache = (): void => {
+	stringCache.clear()
+}
+
+/**
+ * Get cache statistics for debugging purposes.
+ * @returns Cache statistics including size and max size
+ */
+export const getStringCacheStats = () => ({
+	maxSize: currentConfig.cacheSize,
+	size: stringCache.size(),
+})

package/src/util/DataUtils.ts

@@ -0,0 +1,216 @@
+/* eslint-disable import/no-cycle */
+import get from "es-toolkit/compat/get"
+import { NonEmptyArray, Percent } from "./types"
+import { round } from "./round"
+
+export const mathSign = (value: number) => {
+	if (value === 0) {
+		return 0
+	}
+	if (value > 0) {
+		return 1
+	}
+
+	return -1
+}
+
+export const isNan = (value: unknown): value is number => {
+	return typeof value === "number" && value !== +value
+}
+
+export const isPercent = (value: string | number | undefined): value is Percent =>
+	typeof value === "string" && value.indexOf("%") === value.length - 1
+
+export const isNumber = (value: unknown): value is number =>
+	(typeof value === "number" || (typeof value === "object" && value !== null && Object.prototype.toString.call(value) === "[object Number]")) && !isNan(value)
+
+export const isNumOrStr = (value: unknown): value is number | string =>
+	isNumber(value) || typeof value === "string"
+
+let idCounter = 0
+export const uniqueId = (prefix?: string) => {
+	const id = ++idCounter
+
+	return `${prefix || ""}${id}`
+}
+
+/**
+ * Calculates the numeric value represented by a percent string or number, based on a total value.
+ *
+ * - If `percent` is not a number or string, returns `defaultValue`.
+ * - If `percent` is a percent string but `totalValue` is null/undefined, returns `defaultValue`.
+ * - If the result is NaN, returns `defaultValue`.
+ * - If `validate` is true and the result exceeds `totalValue`, returns `totalValue`.
+ *
+ * @param percent - The percent value to convert. Can be a number (e.g. 25) or a string ending with '%' (e.g. '25%').
+ *                  If a string, it must end with '%' to be treated as a percent; otherwise, it is parsed as a number.
+ * @param totalValue - The total value to calculate the percent of. Required if `percent` is a percent string.
+ * @param defaultValue - The value returned if `percent` is undefined, invalid, or cannot be converted to a number.
+ * @param validate - If true, ensures the result does not exceed `totalValue` (when provided).
+ * @returns The calculated value, or `defaultValue` for invalid input.
+ */
+export const getPercentValue = (
+	percent: number | string | undefined,
+	totalValue: number | undefined,
+	defaultValue = 0,
+	validate = false,
+) => {
+	if (!isNumber(percent) && typeof percent !== "string") {
+		return defaultValue
+	}
+
+	let value: number
+
+	if (isPercent(percent)) {
+		if (totalValue == null) {
+			return defaultValue
+		}
+		const index = percent.indexOf("%")
+		value = (totalValue * parseFloat((percent as string).slice(0, index))) / 100
+	} else {
+		value = +percent
+	}
+
+	if (isNan(value)) {
+		value = defaultValue
+	}
+
+	if (validate && totalValue != null && value > totalValue) {
+		value = totalValue
+	}
+
+	return value
+}
+
+export const hasDuplicate = (ary: ReadonlyArray<unknown>): boolean => {
+	if (!Array.isArray(ary)) {
+		return false
+	}
+
+	const len = ary.length
+	const cache: Record<string, boolean> = {}
+
+	for (let i = 0; i < len; i++) {
+		if (!cache[String(ary[i])]) {
+			cache[String(ary[i])] = true
+		} else {
+			return true
+		}
+	}
+
+	return false
+}
+
+export function interpolate(start: unknown, end: number, t: number): number
+export function interpolate(start: unknown, end: null, t: number): null
+export function interpolate(start: unknown, end: number | null, t: number): number | null
+export function interpolate(start: unknown, end: number | null, t: number): number | null {
+	if (isNumber(start) && isNumber(end)) {
+		return round(start + t * (end - start))
+	}
+	return end
+}
+
+export function findEntryInArray<T>(
+	ary: ReadonlyArray<T>,
+	specifiedKey: number | string | ((entry: T) => unknown),
+	specifiedValue: unknown,
+): T | undefined {
+	if (!ary || !ary.length) {
+		return undefined
+	}
+
+	return ary.find(
+		(entry) =>
+			entry &&
+			(typeof specifiedKey === "function" ? specifiedKey(entry) : get(entry, specifiedKey)) ===
+				specifiedValue,
+	)
+}
+
+type LinearRegressionResult = {
+	xmin: number
+	xmax: number
+	a: number
+	b: number
+}
+
+/**
+ * The least square linear regression
+ * @param {Array} data The array of points
+ * @returns {Object} The domain of x, and the parameter of linear function
+ */
+export const getLinearRegression = (
+	data: NonEmptyArray<{ cx?: number; cy?: number }>,
+): LinearRegressionResult => {
+	const len = data.length
+	let xsum = 0
+	let ysum = 0
+	let xysum = 0
+	let xxsum = 0
+	let xmin = Infinity
+	let xmax = -Infinity
+	let xcurrent = 0
+	let ycurrent = 0
+
+	for (let i = 0; i < len; i++) {
+		xcurrent = data[i]?.cx || 0
+		ycurrent = data[i]?.cy || 0
+
+		xsum += xcurrent
+		ysum += ycurrent
+		xysum += xcurrent * ycurrent
+		xxsum += xcurrent * xcurrent
+		xmin = Math.min(xmin, xcurrent)
+		xmax = Math.max(xmax, xcurrent)
+	}
+
+	const a =
+		len * xxsum !== xsum * xsum ? (len * xysum - xsum * ysum) / (len * xxsum - xsum * xsum) : 0
+
+	return {
+		a,
+		b: (ysum - a * xsum) / len,
+		xmax,
+		xmin,
+	}
+}
+
+type Nullish = null | undefined
+
+/**
+ * Checks if the value is null or undefined
+ * @param value The value to check
+ * @returns true if the value is null or undefined
+ */
+export const isNullish = (value: unknown): value is Nullish => {
+	return value === null || typeof value === "undefined"
+}
+
+/**
+ * Uppercase the first letter of a string
+ * @param {string} value The string to uppercase
+ * @returns {string} The uppercased string
+ */
+export const upperFirst = (value: string): string => {
+	if (isNullish(value)) {
+		return value
+	}
+
+	return `${value.charAt(0).toUpperCase()}${value.slice(1)}`
+}
+
+/**
+ * Checks if the value is not null nor undefined.
+ * @param value The value to check
+ * @returns true if the value is not null nor undefined
+ */
+export function isNotNil<T>(value: T): value is NonNullable<T> {
+	return value != null
+}
+
+/**
+ * No-operation function that does nothing.
+ * Useful as a placeholder or default callback function.
+ */
+export function noop(): undefined {}

package/src/util/Events.ts

@@ -0,0 +1,16 @@
+import EventEmitter from "eventemitter3"
+import type { BrushStartEndIndex } from "../context/brushUpdateContext"
+import type { TooltipSyncState } from "../state/tooltipSlice"
+
+const eventCenter: EventEmitter<EventTypes> = new EventEmitter()
+
+export { eventCenter }
+
+export const TOOLTIP_SYNC_EVENT = "recharts.syncEvent.tooltip"
+
+export const BRUSH_SYNC_EVENT = "recharts.syncEvent.brush"
+
+interface EventTypes {
+	[TOOLTIP_SYNC_EVENT](syncId: number | string, data: TooltipSyncState, emitter: symbol): void
+	[BRUSH_SYNC_EVENT](syncId: number | string, data: BrushStartEndIndex, emitter: symbol): void
+}

package/src/util/FunnelUtils.tsx

@@ -0,0 +1,15 @@
+/* eslint-disable import/no-cycle */
+import type { JSX } from '@solidjs/web';
+import { Props as FunnelProps, FunnelTrapezoidItem } from "../cartesian/Funnel"
+import { Shape } from "./ActiveShapeUtils"
+import type { ShapeAnimationProps } from "./types"
+
+export type FunnelTrapezoidProps = {
+	option: FunnelProps["activeShape"]
+	isActive: boolean
+} & ShapeAnimationProps &
+	FunnelTrapezoidItem
+
+export function FunnelTrapezoid(props: FunnelTrapezoidProps): JSX.Element {
+	return <Shape shapeType="trapezoid" {...props} />
+}

package/src/util/Global.ts

@@ -0,0 +1,12 @@
+const parseIsSsrByDefault = (): boolean =>
+	!(
+		typeof window !== "undefined" &&
+		window.document &&
+		Boolean(window.document.createElement) &&
+		window.setTimeout
+	)
+
+export const Global = {
+	devToolsEnabled: process.env.NODE_ENV !== "production",
+	isSsr: parseIsSsrByDefault(),
+}

package/src/util/IfOverflow.ts

@@ -0,0 +1,15 @@
+export type IfOverflow = "hidden" | "visible" | "discard" | "extendDomain"
+
+export interface Overflowable {
+	/**
+	 * Defines how to draw this component if it falls partly outside the canvas:
+	 *
+	 * - `discard`: the whole component will not be drawn at all
+	 * - `hidden`: the component will be clipped to the chart plot area
+	 * - `visible`: the component will be drawn completely
+	 * - `extendDomain`: the domain of the overflown axis will be extended such that the whole component fits into the plot area
+	 *
+	 * @defaultValue discard
+	 */
+	ifOverflow?: IfOverflow
+}

package/src/util/LRUCache.ts

@@ -0,0 +1,41 @@
+/**
+ * Simple LRU (Least Recently Used) cache implementation
+ */
+export class LRUCache<K, V> {
+	private cache = new Map<K, V>()
+
+	private maxSize: number
+
+	constructor(maxSize: number) {
+		this.maxSize = maxSize
+	}
+
+	get(key: K): V | undefined {
+		const value = this.cache.get(key)
+		if (value !== undefined) {
+			this.cache.delete(key)
+			this.cache.set(key, value)
+		}
+		return value
+	}
+
+	set(key: K, value: V): void {
+		if (this.cache.has(key)) {
+			this.cache.delete(key)
+		} else if (this.cache.size >= this.maxSize) {
+			const firstKey = this.cache.keys().next().value
+			if (firstKey != null) {
+				this.cache.delete(firstKey)
+			}
+		}
+		this.cache.set(key, value)
+	}
+
+	clear(): void {
+		this.cache.clear()
+	}
+
+	size(): number {
+		return this.cache.size
+	}
+}

package/src/util/LogUtils.ts

@@ -0,0 +1,22 @@
+const isDev = process.env.NODE_ENV !== "production"
+
+export const warn = (condition: boolean, format: string, ...args: Array<unknown>) => {
+	if (isDev && typeof console !== "undefined" && console.warn) {
+		if (format === undefined) {
+			console.warn("LogUtils requires an error message argument")
+		}
+
+		if (!condition) {
+			if (format === undefined) {
+				console.warn(
+					"Minified exception occurred; use the non-minified dev environment " +
+						"for the full error message and additional helpful warnings.",
+				)
+			} else {
+				let argIndex = 0
+
+				console.warn(format.replace(/%s/g, () => String(args[argIndex++])))
+			}
+		}
+	}
+}

package/src/util/PolarUtils.ts

@@ -0,0 +1,132 @@
+/* eslint-disable import/no-cycle */
+import {
+	ChartOffsetInternal,
+	RelativePointer,
+	Coordinate,
+	PolarViewBoxRequired,
+	RangeObj,
+} from "./types"
+
+export const RADIAN = Math.PI / 180
+
+export const degreeToRadian = (angle: number) => (angle * Math.PI) / 180
+
+export const radianToDegree = (angleInRadian: number) => (angleInRadian * 180) / Math.PI
+
+export const polarToCartesian = (
+	cx: number,
+	cy: number,
+	radius: number,
+	angle: number,
+): Coordinate => ({
+	x: cx + Math.cos(-RADIAN * angle) * radius,
+	y: cy + Math.sin(-RADIAN * angle) * radius,
+})
+
+export const getMaxRadius = (
+	width: number,
+	height: number,
+	offset: ChartOffsetInternal = {
+		bottom: 0,
+		brushBottom: 0,
+		height: 0,
+		left: 0,
+		right: 0,
+		top: 0,
+		width: 0,
+	},
+) =>
+	Math.min(
+		Math.abs(width - (offset.left || 0) - (offset.right || 0)),
+		Math.abs(height - (offset.top || 0) - (offset.bottom || 0)),
+	) / 2
+
+const distanceBetweenPoints = (point: Coordinate, anotherPoint: Coordinate) => {
+	const { x: x1, y: y1 } = point
+	const { x: x2, y: y2 } = anotherPoint
+
+	return Math.sqrt((x1 - x2) ** 2 + (y1 - y2) ** 2)
+}
+
+const getAngleOfPoint = ({ x, y }: Coordinate, { cx, cy }: PolarViewBoxRequired) => {
+	const radius = distanceBetweenPoints({ x, y }, { x: cx, y: cy })
+
+	if (radius <= 0) {
+		return { angle: 0, radius }
+	}
+
+	const cos = (x - cx) / radius
+	let angleInRadian = Math.acos(cos)
+
+	if (y > cy) {
+		angleInRadian = 2 * Math.PI - angleInRadian
+	}
+
+	return { angle: radianToDegree(angleInRadian), angleInRadian, radius }
+}
+
+const formatAngleOfSector = ({ startAngle, endAngle }: PolarViewBoxRequired) => {
+	const startCnt = Math.floor(startAngle / 360)
+	const endCnt = Math.floor(endAngle / 360)
+	const min = Math.min(startCnt, endCnt)
+
+	return {
+		endAngle: endAngle - min * 360,
+		startAngle: startAngle - min * 360,
+	}
+}
+
+const reverseFormatAngleOfSector = (
+	angle: number,
+	{ startAngle, endAngle }: PolarViewBoxRequired,
+): number => {
+	const startCnt = Math.floor(startAngle / 360)
+	const endCnt = Math.floor(endAngle / 360)
+	const min = Math.min(startCnt, endCnt)
+
+	return angle + min * 360
+}
+
+export const inRangeOfSector = (
+	{ relativeX: x, relativeY: y }: RelativePointer,
+	viewBox: PolarViewBoxRequired,
+): RangeObj | null => {
+	const { radius, angle } = getAngleOfPoint({ x, y }, viewBox)
+	const { innerRadius, outerRadius } = viewBox
+
+	if (radius < innerRadius || radius > outerRadius) {
+		return null
+	}
+
+	if (radius === 0) {
+		return null
+	}
+
+	const { startAngle, endAngle } = formatAngleOfSector(viewBox)
+	let formatAngle = angle
+	let inRange
+
+	if (startAngle <= endAngle) {
+		while (formatAngle > endAngle) {
+			formatAngle -= 360
+		}
+		while (formatAngle < startAngle) {
+			formatAngle += 360
+		}
+		inRange = formatAngle >= startAngle && formatAngle <= endAngle
+	} else {
+		while (formatAngle > startAngle) {
+			formatAngle -= 360
+		}
+		while (formatAngle < endAngle) {
+			formatAngle += 360
+		}
+		inRange = formatAngle >= endAngle && formatAngle <= startAngle
+	}
+
+	if (inRange) {
+		return { ...viewBox, angle: reverseFormatAngleOfSector(formatAngle, viewBox), radius }
+	}
+
+	return null
+}

package/src/util/RadialBarUtils.tsx

@@ -0,0 +1,24 @@
+/* eslint-disable import/no-cycle */
+import type { JSX } from '@solidjs/web';
+import { RadialBarDataItem, RadialBarProps } from "../polar/RadialBar"
+import { Shape } from "./ActiveShapeUtils"
+import type { ShapeAnimationProps } from "./types"
+
+export function parseCornerRadius(cornerRadius: string | number | undefined): number | undefined {
+	if (typeof cornerRadius === "string") {
+		return parseInt(cornerRadius, 10)
+	}
+
+	return cornerRadius
+}
+
+export interface RadialBarSectorProps extends RadialBarDataItem, ShapeAnimationProps {
+	index: number
+	option: RadialBarProps["activeShape"]
+	isActive: boolean
+	className?: string
+}
+
+export function RadialBarSector(props: RadialBarSectorProps): JSX.Element {
+	return <Shape shapeType="sector" {...props} />
+}