@octanejs/recharts 0.1.41 → 0.1.42

package/src/util/{Constants.js → Constants.ts}

@@ -1,6 +1,5 @@
-// Vendored verbatim from recharts@3.9.2 es6/util/Constants.js (framework-agnostic).
-// Do not edit — update by re-vendoring when the recharts devDependency moves.
-export var COLOR_PANEL = [
+// Adapted from recharts@3.9.2, commit b3451050c027a23957ffa50a2665c9119df21e47.
+export const COLOR_PANEL = [
 	'#1890FF',
 	'#66B5FF',
 	'#41D9C7',
@@ -32,11 +31,12 @@ export var COLOR_PANEL = [
  * 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 var DATA_ITEM_INDEX_ATTRIBUTE_NAME = 'data-recharts-item-index';
+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 var DATA_ITEM_GRAPHICAL_ITEM_ID_ATTRIBUTE_NAME = 'data-recharts-item-id';
-export var DEFAULT_Y_AXIS_WIDTH = 60;
+export const DATA_ITEM_GRAPHICAL_ITEM_ID_ATTRIBUTE_NAME = 'data-recharts-item-id';
+
+export const DEFAULT_Y_AXIS_WIDTH = 60;

package/src/util/DOMUtils.ts

@@ -0,0 +1,135 @@
+// Adapted from recharts@3.9.2, commit b3451050c027a23957ffa50a2665c9119df21e47.
+import type { CSSProperties } from './OctaneTypes';
+
+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 = {
+	position: 'absolute',
+	top: '-20000px',
+	left: 0,
+	padding: 0,
+	margin: 0,
+	border: 'none',
+	whiteSpace: 'pre',
+};
+const MEASUREMENT_SPAN_ID = 'recharts_measurement_span';
+
+function createCacheKey(text: string | number, style: CSSProperties): string {
+	// Simple string concatenation for better performance than JSON.stringify
+	const fontSize = style.fontSize || '';
+	const fontFamily = style.fontFamily || '';
+	const fontWeight = style.fontWeight || '';
+	const fontStyle = style.fontStyle || '';
+	const letterSpacing = style.letterSpacing || '';
+	const textTransform = style.textTransform || '';
+
+	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: 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);
+		}
+
+		// Apply styles directly without unnecessary object creation
+		Object.assign(measurementSpan.style, SPAN_STYLE, style);
+		measurementSpan.textContent = `${text}`;
+
+		const rect = measurementSpan.getBoundingClientRect();
+		return { width: rect.width, height: rect.height };
+	} catch {
+		return { width: 0, height: 0 };
+	}
+};
+
+export const getStringSize = (text: string | number, style: CSSProperties = {}): Size => {
+	if (text === undefined || text === null || Global.isSsr) {
+		return { width: 0, height: 0 };
+	}
+
+	// If caching is disabled, measure directly
+	if (!currentConfig.enableCache) {
+		return measureTextWithDOM(text, style);
+	}
+
+	const cacheKey = createCacheKey(text, style);
+	const cachedResult = stringCache.get(cacheKey);
+
+	if (cachedResult) {
+		return cachedResult;
+	}
+
+	// Measure using DOM
+	const result = measureTextWithDOM(text, style);
+
+	// Store in LRU cache
+	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 = () => ({
+	size: stringCache.size(),
+	maxSize: currentConfig.cacheSize,
+});

package/src/util/{DataUtils.js → DataUtils.ts}

@@ -1,20 +1,20 @@
-// Vendored verbatim from recharts@3.9.2 es6/util/DataUtils.js (framework-agnostic).
-// Do not edit — update by re-vendoring when the recharts devDependency moves.
-// Sanctioned deviation: es-toolkit compat imports normalized to the ESM barrel
-// ('es-toolkit/compat') — the per-function subpaths are CJS-only and break
-// consumers that compile this binding from source (vite dev prebundle).
+// Adapted from recharts@3.9.2, commit b3451050c027a23957ffa50a2665c9119df21e47.
 import { get } from 'es-toolkit/compat';
+import { NonEmptyArray, Percent } from './types';
 import { round } from './round';
-export var mathSign = (value) => {
+
+export const mathSign = (value: number) => {
 	if (value === 0) {
 		return 0;
 	}
 	if (value > 0) {
 		return 1;
 	}
+
 	return -1;
 };
-export var isNan = (value) => {
+
+export const isNan = (value: unknown): value is number => {
 	// eslint-disable-next-line eqeqeq
 	return typeof value == 'number' && value != +value;
 };
@@ -26,15 +26,20 @@ export var isNan = (value) => {
  * @param {string | number | undefined} value The value to check
  * @returns {boolean} true if the value is a percent string
  */
-export var isPercent = (value) =>
+export const isPercent = (value: string | number | undefined): value is Percent =>
 	typeof value === 'string' && value.length > 1 && value.indexOf('%') === value.length - 1;
-export var isNumber = (value) =>
+
+export const isNumber = (value: unknown): value is number =>
 	(typeof value === 'number' || value instanceof Number) && !isNan(value);
-export var isNumOrStr = (value) => isNumber(value) || typeof value === 'string';
-var idCounter = 0;
-export var uniqueId = (prefix) => {
-	var id = ++idCounter;
-	return ''.concat(prefix || '').concat(id);
+
+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}`;
 };
 
 /**
@@ -52,43 +57,55 @@ export var uniqueId = (prefix) => {
  * @param validate - If true, ensures the result does not exceed `totalValue` (when provided).
  * @returns The calculated value, or `defaultValue` for invalid input.
  */
-export var getPercentValue = function getPercentValue(percent, totalValue) {
-	var defaultValue = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
-	var validate = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+export const getPercentValue = (
+	percent: number | string | undefined,
+	totalValue: number | undefined,
+	defaultValue = 0,
+	validate = false,
+) => {
 	if (!isNumber(percent) && typeof percent !== 'string') {
 		return defaultValue;
 	}
-	var value;
+
+	let value: number;
+
 	if (isPercent(percent)) {
 		if (totalValue == null) {
 			return defaultValue;
 		}
-		var index = percent.indexOf('%');
-		value = (totalValue * parseFloat(percent.slice(0, index))) / 100;
+		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 var hasDuplicate = (ary) => {
+
+export const hasDuplicate = (ary: ReadonlyArray<unknown>): boolean => {
 	if (!Array.isArray(ary)) {
 		return false;
 	}
-	var len = ary.length;
-	var cache = {};
-	for (var i = 0; i < len; i++) {
+
+	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;
 };
 
@@ -109,17 +126,56 @@ export var hasDuplicate = (ary) => {
  *
  * @since 3.9
  */
-
-export function interpolate(start, end, animationElapsedTime) {
+export function interpolate(
+	start: number | null | undefined,
+	end: number,
+	animationElapsedTime: number,
+): number;
+export function interpolate(
+	start: number | null | undefined,
+	end: null,
+	animationElapsedTime: number,
+): null;
+export function interpolate(
+	start: number | null | undefined,
+	end: undefined,
+	animationElapsedTime: number,
+): undefined;
+export function interpolate(
+	start: number | null | undefined,
+	end: number | null,
+	animationElapsedTime: number,
+): number | null;
+export function interpolate(
+	start: number | null | undefined,
+	end: number | undefined,
+	animationElapsedTime: number,
+): number | undefined;
+export function interpolate(
+	start: number | null | undefined,
+	end: number | null | undefined,
+	animationElapsedTime: number,
+): number | null | undefined;
+export function interpolate(
+	start: number | null | undefined,
+	end: number | null | undefined,
+	animationElapsedTime: number,
+): number | null | undefined {
 	if (isNumber(start) && isNumber(end)) {
 		return round(start + animationElapsedTime * (end - start));
 	}
 	return end;
 }
-export function findEntryInArray(ary, specifiedKey, specifiedValue) {
+
+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 &&
@@ -127,25 +183,36 @@ export function findEntryInArray(ary, specifiedKey, specifiedValue) {
 				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 var getLinearRegression = (data) => {
-	var len = data.length;
-	var xsum = 0;
-	var ysum = 0;
-	var xysum = 0;
-	var xxsum = 0;
-	var xmin = Infinity;
-	var xmax = -Infinity;
-	var xcurrent = 0;
-	var ycurrent = 0;
-	for (var i = 0; i < len; i++) {
-		var _data$i, _data$i2;
-		xcurrent = ((_data$i = data[i]) === null || _data$i === void 0 ? void 0 : _data$i.cx) || 0;
-		ycurrent = ((_data$i2 = data[i]) === null || _data$i2 === void 0 ? void 0 : _data$i2.cy) || 0;
+export const getLinearRegression = (
+	data: NonEmptyArray<{ cx?: number | null; cy?: number | null }>,
+): 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;
@@ -153,8 +220,10 @@ export var getLinearRegression = (data) => {
 		xmin = Math.min(xmin, xcurrent);
 		xmax = Math.max(xmax, xcurrent);
 	}
-	var a =
+
+	const a =
 		len * xxsum !== xsum * xsum ? (len * xysum - xsum * ysum) / (len * xxsum - xsum * xsum) : 0;
+
 	return {
 		xmin,
 		xmax,
@@ -162,12 +231,15 @@ export var getLinearRegression = (data) => {
 		b: (ysum - a * xsum) / len,
 	};
 };
+
+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 var isNullish = (value) => {
+export const isNullish = (value: unknown): value is Nullish => {
 	return value === null || typeof value === 'undefined';
 };
 
@@ -176,11 +248,12 @@ export var isNullish = (value) => {
  * @param {string} value The string to uppercase
  * @returns {string} The uppercased string
  */
-export var upperFirst = (value) => {
+export const upperFirst = (value: string): string => {
 	if (isNullish(value)) {
 		return value;
 	}
-	return ''.concat(value.charAt(0).toUpperCase()).concat(value.slice(1));
+
+	return `${value.charAt(0).toUpperCase()}${value.slice(1)}`;
 };
 
 /**
@@ -188,7 +261,7 @@ export var upperFirst = (value) => {
  * @param value The value to check
  * @returns true if the value is not null nor undefined
  */
-export function isNotNil(value) {
+export function isNotNil<T>(value: T): value is NonNullable<T> {
 	return value != null;
 }
 
@@ -196,4 +269,4 @@ export function isNotNil(value) {
  * No-operation function that does nothing.
  * Useful as a placeholder or default callback function.
  */
-export function noop() {}
+export function noop(): undefined {}

package/src/util/Events.ts

@@ -0,0 +1,22 @@
+// Adapted from recharts@3.9.2, commit b3451050c027a23957ffa50a2665c9119df21e47.
+import EventEmitter from 'eventemitter3';
+import { PayloadAction } from '@reduxjs/toolkit';
+import { TooltipSyncState } from '../state/tooltipSlice';
+import { BrushStartEndIndex } from '../context/brushUpdateContext';
+
+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: PayloadAction<TooltipSyncState>,
+		emitter: symbol,
+	): void;
+	[BRUSH_SYNC_EVENT](syncId: number | string, data: BrushStartEndIndex, emitter: symbol): void;
+}

package/src/util/FunnelUtils.tsrx

@@ -1,8 +1,8 @@
 import * as React from 'octane';
-import { Props as FunnelProps, FunnelTrapezoidItem } from '../cartesian/Funnel';
-import { Trapezoid } from '../shape/Trapezoid';
+import { Props as FunnelProps, FunnelTrapezoidItem } from '../cartesian/Funnel.tsrx';
+import { Trapezoid } from '../shape/Trapezoid.tsrx';
 import { ShapeAnimationProps } from './types';
-import { Shape } from './ActiveShapeUtils';
+import { Shape } from './ActiveShapeUtils.tsrx';
 
 export const defaultFunnelShape = Trapezoid;
 

package/src/util/Global.ts

@@ -0,0 +1,13 @@
+// Adapted from recharts@3.9.2, commit b3451050c027a23957ffa50a2665c9119df21e47.
+const parseIsSsrByDefault = (): boolean =>
+	!(
+		typeof window !== 'undefined' &&
+		window.document &&
+		Boolean(window.document.createElement) &&
+		window.setTimeout
+	);
+
+export const Global = {
+	devToolsEnabled: true,
+	isSsr: parseIsSsrByDefault(),
+};

package/src/util/IfOverflow.ts

@@ -0,0 +1,16 @@
+// Adapted from recharts@3.9.2, commit b3451050c027a23957ffa50a2665c9119df21e47.
+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,42 @@
+// Adapted from recharts@3.9.2, commit b3451050c027a23957ffa50a2665c9119df21e47.
+/**
+ * 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.js → LogUtils.ts}

@@ -1,19 +1,13 @@
-// Vendored verbatim from recharts@3.9.2 es6/util/LogUtils.js (framework-agnostic).
-// Do not edit — update by re-vendoring when the recharts devDependency moves.
+// Adapted from recharts@3.9.2, commit b3451050c027a23957ffa50a2665c9119df21e47.
 /* eslint no-console: 0 */
-var isDev = true;
-export var warn = function warn(condition, format) {
-	for (
-		var _len = arguments.length, args = new Array(_len > 2 ? _len - 2 : 0), _key = 2;
-		_key < _len;
-		_key++
-	) {
-		args[_key - 2] = arguments[_key];
-	}
+const isDev = true;
+
+export const warn = (condition: boolean, format: string, ...args: any[]) => {
 	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(
@@ -21,7 +15,8 @@ export var warn = function warn(condition, format) {
 						'for the full error message and additional helpful warnings.',
 				);
 			} else {
-				var argIndex = 0;
+				let argIndex = 0;
+
 				console.warn(format.replace(/%s/g, () => args[argIndex++]));
 			}
 		}

package/src/util/OctaneTypes.ts

@@ -0,0 +1,51 @@
+// DOM contracts shared by the authored Recharts port. Events are native,
+// while element props and refs follow Octane's public JSX type surface.
+import type { OctaneNode } from 'octane';
+import type { Octane } from 'octane/jsx-runtime';
+
+export type { OctaneNode } from 'octane';
+export type { OctaneElement } from 'octane/jsx-runtime';
+export type CSSProperties = Exclude<NonNullable<Octane.HTMLAttributes<Element>['style']>, string>;
+export type SVGProps<T> = Octane.SVGProps<T>;
+export type SVGAttributes<T> = Octane.SVGAttributes<T>;
+export type HTMLAttributes<T> = Octane.HTMLAttributes<T>;
+export type AriaAttributes = Pick<
+	Octane.SVGAttributes<Element>,
+	Extract<keyof Octane.SVGAttributes<Element>, `aria-${string}`>
+>;
+export type Ref<T> = Octane.Ref<T>;
+// A renderer only writes its actual host into a broader SVG ref sink. This
+// type-only view preserves the ref while narrowing that write at the boundary.
+export type SVGPropsForHost<P, T extends SVGElement> = Omit<P, 'ref'> & { ref?: Ref<T> };
+export type RefCallback<T> = (instance: T | null) => void | (() => void);
+export type RefAttributes<T> = Octane.RefAttributes<T>;
+export type PropsWithoutRef<P> = P extends unknown ? Omit<P, 'ref'> : never;
+export type MutableRefObject<T> = { current: T };
+export type RefObject<T> = { current: T };
+export type ComponentType<P = {}> = ((props: P) => OctaneNode) & { displayName?: string };
+export type FunctionComponent<P = {}> = ComponentType<P>;
+export type FC<P = {}> = ComponentType<P>;
+export type ComponentProps<C> = C extends (props: infer P) => unknown
+	? P
+	: C extends keyof Octane.JSX.IntrinsicElements
+		? Octane.JSX.IntrinsicElements[C]
+		: never;
+
+export type NativeEvent<T = Element> = Event & { currentTarget: EventTarget & T };
+export type NativeAnimationEvent<T = Element> = AnimationEvent & { currentTarget: EventTarget & T };
+export type NativeClipboardEvent<T = Element> = ClipboardEvent & { currentTarget: EventTarget & T };
+export type NativeCompositionEvent<T = Element> = CompositionEvent & {
+	currentTarget: EventTarget & T;
+};
+export type NativeDragEvent<T = Element> = DragEvent & { currentTarget: EventTarget & T };
+export type NativeFocusEvent<T = Element> = FocusEvent & { currentTarget: EventTarget & T };
+export type NativeFormEvent<T = Element> = Event & { currentTarget: EventTarget & T };
+export type NativeKeyboardEvent<T = Element> = KeyboardEvent & { currentTarget: EventTarget & T };
+export type NativeMouseEvent<T = Element> = MouseEvent & { currentTarget: EventTarget & T };
+export type NativePointerEvent<T = Element> = PointerEvent & { currentTarget: EventTarget & T };
+export type NativeTouchEvent<T = Element> = TouchEvent & { currentTarget: EventTarget & T };
+export type NativeTransitionEvent<T = Element> = TransitionEvent & {
+	currentTarget: EventTarget & T;
+};
+export type NativeUIEvent<T = Element> = UIEvent & { currentTarget: EventTarget & T };
+export type NativeWheelEvent<T = Element> = WheelEvent & { currentTarget: EventTarget & T };