@solidports/recharts 0.1.0 → 0.1.1

package/src/util/Constants.ts

@@ -1,42 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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

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

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

@@ -1,16 +0,0 @@
-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

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

@@ -1,12 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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

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

@@ -1,22 +0,0 @@
-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

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

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