@octanejs/recharts 0.1.41 → 0.1.43

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

@@ -1,54 +1,4 @@
-// Vendored verbatim from recharts@3.9.2 es6/util/resolveDefaultProps.js (framework-agnostic).
-// Do not edit — update by re-vendoring when the recharts devDependency moves.
-function ownKeys(e, r) {
-	var t = Object.keys(e);
-	if (Object.getOwnPropertySymbols) {
-		var o = Object.getOwnPropertySymbols(e);
-		(r &&
-			(o = o.filter(function (r) {
-				return Object.getOwnPropertyDescriptor(e, r).enumerable;
-			})),
-			t.push.apply(t, o));
-	}
-	return t;
-}
-function _objectSpread(e) {
-	for (var r = 1; r < arguments.length; r++) {
-		var t = null != arguments[r] ? arguments[r] : {};
-		r % 2
-			? ownKeys(Object(t), !0).forEach(function (r) {
-					_defineProperty(e, r, t[r]);
-				})
-			: Object.getOwnPropertyDescriptors
-				? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t))
-				: ownKeys(Object(t)).forEach(function (r) {
-						Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
-					});
-	}
-	return e;
-}
-function _defineProperty(e, r, t) {
-	return (
-		(r = _toPropertyKey(r)) in e
-			? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 })
-			: (e[r] = t),
-		e
-	);
-}
-function _toPropertyKey(t) {
-	var i = _toPrimitive(t, 'string');
-	return 'symbol' == typeof i ? i : i + '';
-}
-function _toPrimitive(t, r) {
-	if ('object' != typeof t || !t) return t;
-	var e = t[Symbol.toPrimitive];
-	if (void 0 !== e) {
-		var i = e.call(t, r || 'default');
-		if ('object' != typeof i) return i;
-		throw new TypeError('@@toPrimitive must return a primitive value.');
-	}
-	return ('string' === r ? String : Number)(t);
-}
+// Adapted from recharts@3.9.2, commit b3451050c027a23957ffa50a2665c9119df21e47.
 /**
  * This function mimics the behavior of the `defaultProps` static property in React.
  * Functional components do not have a defaultProps property, so this function is useful to resolve default props.
@@ -64,19 +14,22 @@ function _toPrimitive(t, r) {
  * @param defaultProps - the default props object defined in the component by Recharts
  * @returns - the props object with all the default props resolved. All `undefined` values are replaced with the default value.
  */
-export function resolveDefaultProps(realProps, defaultProps) {
+export function resolveDefaultProps<T, D extends Partial<T>>(
+	realProps: T,
+	defaultProps: D & DisallowExtraKeys<T, D>,
+): RequiresDefaultProps<T, D> {
 	/*
 	 * To avoid mutating the original `realProps` object passed to the function, create a shallow copy of it.
 	 * `resolvedProps` will be modified directly with the defaults.
 	 */
-	var resolvedProps = _objectSpread({}, realProps);
+	const resolvedProps: T = { ...realProps };
 	/*
 	 * Since the function guarantees `D extends Partial<T>`, this assignment is safe.
 	 * It allows TypeScript to work with the well-defined `Partial<T>` type inside the loop,
 	 * making subsequent type inference (especially for `dp[key]`) much more straightforward for the compiler.
 	 * This is a key step to improve type safety *without* value assertions later.
 	 */
-	var dp = defaultProps;
+	const dp: Partial<T> = defaultProps;
 	/*
 	 * `Object.keys` doesn't preserve strong key types - it always returns Array<string>.
 	 * However, due to the `D extends Partial<T>` constraint,
@@ -86,8 +39,8 @@ export function resolveDefaultProps(realProps, defaultProps) {
 	 * Type assertions are not sound but in this case it's necessary
 	 * as `Object.keys` does not do what we want it to do.
 	 */
-	var keys = Object.keys(defaultProps);
-	var withDefaults = keys.reduce((acc, key) => {
+	const keys = Object.keys(defaultProps) as Array<keyof T>;
+	const withDefaults: T = keys.reduce((acc: T, key: keyof T): T => {
 		if (acc[key] === undefined && dp[key] !== undefined) {
 			acc[key] = dp[key];
 		}
@@ -97,7 +50,7 @@ export function resolveDefaultProps(realProps, defaultProps) {
 	 * And again type assertions are not safe but here we have done the runtime work
 	 * so let's bypass the lack of static type safety and tell the compiler what happened.
 	 */
-	return withDefaults;
+	return withDefaults as RequiresDefaultProps<T, D>;
 }
 
 /**
@@ -106,6 +59,9 @@ export function resolveDefaultProps(realProps, defaultProps) {
  * it means K is required, so we keep K; otherwise, we discard it (never).
  * [keyof T] at the end creates a union of the kept keys.
  */
+export type RequiredKeys<T> = {
+	[K in keyof T]-?: object extends Pick<T, K> ? never : K;
+}[keyof T];
 
 /**
  * Helper type to extract the keys of T that are optional.
@@ -113,6 +69,9 @@ export function resolveDefaultProps(realProps, defaultProps) {
  * it means K is optional (or potentially missing), so we keep K; otherwise, we discard it (never).
  * [keyof T] at the end creates a union of the kept keys.
  */
+export type OptionalKeys<T> = {
+	[K in keyof T]-?: object extends Pick<T, K> ? K : never;
+}[keyof T];
 
 /**
  * Helper type to ensure keys of D exist in T.
@@ -120,6 +79,7 @@ export function resolveDefaultProps(realProps, defaultProps) {
  * If K is NOT a key of T, map it to type `never`.
  * An object cannot have a property of type `never`, effectively disallowing extra keys.
  */
+export type DisallowExtraKeys<T, D> = { [K in keyof D]: K extends keyof T ? D[K] : never };
 
 /**
  * This type will take a source type `Props` and a default type `Defaults` and will return a new type
@@ -129,3 +89,21 @@ export function resolveDefaultProps(realProps, defaultProps) {
  *
  * This is useful for creating a type that represents the resolved props of a component with default props.
  */
+export type RequiresDefaultProps<Props, Defaults extends Partial<Props>> =
+	// Section 1: Properties that were already required in T.
+	// We use Pick<T, RequiredKeys<T>> to select only the keys that were originally
+	// required in T. Pick preserves their required status and original types.
+	Pick<Props, RequiredKeys<Props>> &
+		// Section 2: Properties that were optional in T BUT have a default specified in D.
+		// These properties should become required in the resulting type.
+		// - OptionalKeys<T>: Gets the union of keys that are optional in T.
+		// - RequiredKeys<D>: Gets the keys that are required in the default props D.
+		// - Extract<..., ...>: Finds the intersection of these two sets – the keys that are optional in T AND required in D.
+		// - Pick<T, Extract<...>>: Selects these specific properties from T. At this stage, they still retain their original optional ('?') status from T.
+		// - Required<...>: Wraps the picked properties, removing the '?' modifier and making them required. Their underlying type (e.g., `string | undefined`) remains unchanged.
+		Required<Pick<Props, Extract<OptionalKeys<Props>, RequiredKeys<Defaults>>>> &
+		// Section 3: Properties that were optional in T AND do NOT have a default in D.
+		// These properties should remain optional.
+		// - Exclude<OptionalKeys<T>, keyof D>: Finds the keys that are optional in T but are NOT present in D.
+		// - Pick<T, Exclude<...>>: Selects these properties from T. Pick preserves their original optional status and types.
+		Pick<Props, Exclude<OptionalKeys<Props>, keyof Defaults>>;

package/src/util/round.ts

@@ -0,0 +1,33 @@
+// Adapted from recharts@3.9.2, commit b3451050c027a23957ffa50a2665c9119df21e47.
+// if you go lower than 3, wild wild things happen during rendering
+const defaultRoundPrecision = 4;
+
+export function round(num: number, roundPrecision: number = defaultRoundPrecision): number {
+	const factor = 10 ** roundPrecision;
+	const rounded = Math.round(num * factor) / factor;
+	if (Object.is(rounded, -0)) {
+		return 0;
+	}
+	return rounded;
+}
+
+/**
+ * This function will accept a string template literal and for each
+ * variable placeholder, it will round the value to avoid long float numbers in
+ * the SVG path which might cause rendering issues in some browsers.
+ */
+export function roundTemplateLiteral(
+	strings: TemplateStringsArray,
+	...values: ReadonlyArray<number | string>
+) {
+	return strings.reduce((result, string, i) => {
+		const value = values[i - 1];
+		if (typeof value === 'string') {
+			return result + value + string;
+		}
+		if (value !== undefined) {
+			return result + round(value) + string;
+		}
+		return result + string;
+	}, '');
+}

package/src/util/scale/CustomScaleDefinition.ts

@@ -0,0 +1,82 @@
+// Adapted from recharts@3.9.2, commit b3451050c027a23957ffa50a2665c9119df21e47.
+import { CategoricalDomainItem } from '../types';
+
+/**
+ * A subset of d3-scale. This is the external representation;
+ * This is the type that we expect from `axis.scale` props, if users want to provide custom scales.
+ *
+ * The actual d3 scales have many more methods, but we don't need them all.
+ * Specifically we want to avoid all the setters
+ * - immutable API is preferred in Recharts and mutating state will lead to hard-to-debug issues.
+ *
+ * @see {@link ScaleType} and {@link RechartsScaleType} for string shortcuts that you can use instead of this interface.
+ */
+export interface CustomScaleDefinition<
+	Domain extends CategoricalDomainItem = CategoricalDomainItem,
+> {
+	/**
+	 * Returns the scale's current domain.
+	 * The domain could be:
+	 * - in categorical scales: an array of strings or categories
+	 * - in continuous scales: tuple of two numbers: [min, max]
+	 */
+	domain(): ReadonlyArray<Domain>;
+
+	/**
+	 * Sets the domain of the scale.
+	 */
+	domain(newDomain: ReadonlyArray<Domain>): this;
+
+	/**
+	 * Returns the scale’s current range.
+	 */
+	range(): ReadonlyArray<number>;
+
+	/**
+	 * Sets the range of the scale.
+	 */
+	range(newRange: ReadonlyArray<number>): this;
+
+	/**
+	 * Returns an exact copy of this scale. Changes to this scale will not affect the returned scale, and vice versa.
+	 * We use this method in Recharts to ensure immutability - changes to the scale outside should not affect the internal state,
+	 * as they won't trigger re-renders in React.
+	 */
+	copy(): CustomScaleDefinition<Domain>;
+
+	/**
+	 * Returns width of each band.
+	 * Most scales are not banded, so this method is optional.
+	 * Banded scales (like scaleBand from d3-scale) will implement this method.
+	 */
+	bandwidth?: () => number;
+	/**
+	 * Quantitative (continuous) scales provide a ticks method that returns representative values from the scale’s domain.
+	 * Ordinal and band scales do not have this method.
+	 *
+	 * An optional count argument requests more or fewer ticks.
+	 * The number of ticks returned, however, is not necessarily equal to the requested count.
+	 *
+	 * @see {@link https://d3js.org/d3-scale/linear#linear_ticks}
+	 * @see {@link https://observablehq.com/@d3/scale-ticks}
+	 *
+	 * @param count number of ticks
+	 */
+	ticks?: (count: number | undefined) => ReadonlyArray<number>;
+
+	/**
+	 * Given an arbitrary input, returns the corresponding point derived from the output range if the input is in the scale's domain.
+	 * If the input is not included in the domain, returns undefined.
+	 *
+	 * @param input
+	 */
+	(input: Domain): number | undefined;
+
+	/**
+	 * Given a value from the range, returns the corresponding value from the domain.
+	 *
+	 * This method is optional, as not all scales provide an inverse mapping.
+	 * Linear and time scales typically do, while band and ordinal scales may not.
+	 */
+	invert?(value: number): Domain | undefined;
+}

package/src/util/scale/RechartsScale.ts

@@ -0,0 +1,131 @@
+// Adapted from recharts@3.9.2, commit b3451050c027a23957ffa50a2665c9119df21e47.
+import { CustomScaleDefinition } from './CustomScaleDefinition';
+import { CategoricalDomainItem } from '../types';
+
+/**
+ * This is internal representation of scale used in Recharts.
+ * Users will provide CustomScaleDefinition or a string, which we will parse into RechartsScale.
+ * Most importantly, RechartsScale is fully immutable - there are no setters that mutate the scale in place.
+ * This is important for React integration - if the scale changes, we want to trigger re-renders.
+ * Mutating the scale in place would not trigger re-renders, leading to stale UI.
+ */
+export interface RechartsScale<Domain extends CategoricalDomainItem = CategoricalDomainItem> {
+	/**
+	 * Returns the scale's current domain.
+	 * The domain could be:
+	 * - in categorical scales: an array of strings or categories
+	 * - in continuous scales: tuple of two numbers: [min, max]
+	 */
+	domain(): ReadonlyArray<Domain>;
+
+	/**
+	 * Returns the scale’s current range.
+	 *
+	 * This should be a readonly tuple of two numbers: [min, max]
+	 * and so a better type would be `readonly [number, number]` but again - breaking changes,
+	 * so let's keep that for 4.0.
+	 */
+	range(): ReadonlyArray<number>;
+
+	/**
+	 * Returns the minimum value from the range.
+	 */
+	rangeMin(): number;
+
+	/**
+	 * Returns the maximum value from the range.
+	 */
+	rangeMax(): number;
+
+	/**
+	 * Returns true if the given value is within the scale's range.
+	 * @param value
+	 */
+	isInRange(value: number): boolean;
+
+	/**
+	 * Returns width of each band.
+	 * Most scales are not banded, so this method is optional.
+	 * Banded scales (like scaleBand from d3-scale) will implement this method.
+	 */
+	bandwidth?: () => number;
+	/**
+	 * Quantitative (continuous) scales provide a ticks method that returns representative values from the scale’s domain.
+	 * Ordinal and band scales do not have this method.
+	 *
+	 * An optional count argument requests more or fewer ticks.
+	 * The number of ticks returned, however, is not necessarily equal to the requested count.
+	 *
+	 * @see {@link https://d3js.org/d3-scale/linear#linear_ticks}
+	 * @see {@link https://observablehq.com/@d3/scale-ticks}
+	 *
+	 * @param count number of ticks
+	 */
+	ticks?: (count: number | undefined) => ReadonlyArray<number>;
+
+	/**
+	 * Given an arbitrary input, returns the corresponding point derived from the output range if the input is in the scale's domain.
+	 * If the input is not included in the domain, returns undefined.
+	 */
+	map(input: unknown, options?: { position?: BandPosition }): number | undefined;
+}
+
+/**
+ * Position within a band for banded scales.
+ * In scales that are not banded, this parameter is ignored.
+ *
+ * @inline
+ */
+export type BandPosition = 'start' | 'middle' | 'end';
+
+export function rechartsScaleFactory<Domain extends CategoricalDomainItem = CategoricalDomainItem>(
+	d3Scale: CustomScaleDefinition<Domain>,
+): RechartsScale<Domain>;
+export function rechartsScaleFactory<Domain extends CategoricalDomainItem = CategoricalDomainItem>(
+	d3Scale: CustomScaleDefinition<Domain> | undefined,
+): RechartsScale<Domain> | undefined;
+export function rechartsScaleFactory<Domain extends CategoricalDomainItem = CategoricalDomainItem>(
+	d3Scale: CustomScaleDefinition<Domain> | undefined,
+): RechartsScale<Domain> | undefined {
+	if (d3Scale == null) {
+		return undefined;
+	}
+	const ticksFn = d3Scale.ticks;
+	const bandwidthFn = d3Scale.bandwidth;
+	const d3Range: ReadonlyArray<number> = d3Scale.range();
+	const range: [number, number] = [Math.min(...d3Range), Math.max(...d3Range)];
+	return {
+		domain: () => d3Scale.domain(),
+		range: () => range,
+		rangeMin: () => range[0],
+		rangeMax: () => range[1],
+		isInRange(value: number): boolean {
+			const first = range[0];
+			const last = range[1];
+			return first <= last ? value >= first && value <= last : value >= last && value <= first;
+		},
+		bandwidth: bandwidthFn ? () => bandwidthFn.call(d3Scale) : undefined,
+		ticks: ticksFn ? (count: number | undefined) => ticksFn.call(d3Scale, count) : undefined,
+		map: (input: Domain, options?: { position?: BandPosition }) => {
+			let baseValue = d3Scale(input);
+			if (baseValue == null) {
+				return undefined;
+			}
+			if (d3Scale.bandwidth && options?.position) {
+				const bandWidth = d3Scale.bandwidth();
+				switch (options.position) {
+					case 'middle':
+						baseValue += bandWidth / 2;
+						break;
+					case 'end':
+						baseValue += bandWidth;
+						break;
+					default:
+						// 'start' requires no adjustment
+						break;
+				}
+			}
+			return baseValue;
+		},
+	};
+}

package/src/util/scale/{createCategoricalInverse.js → createCategoricalInverse.ts}

@@ -1,5 +1,7 @@
-// Vendored verbatim from recharts@3.9.2 es6/util/scale/createCategoricalInverse.js (framework-agnostic).
-// Do not edit — update by re-vendoring when the recharts devDependency moves.
+// Adapted from recharts@3.9.2, commit b3451050c027a23957ffa50a2665c9119df21e47.
+import { InverseScaleFunction } from '../../hooks';
+import { CustomScaleDefinition } from './CustomScaleDefinition';
+
 /**
  * Binary search to find the index where x would fit in array a.
  * Works for arrays that are sorted both ascending and descending.
@@ -10,13 +12,14 @@
  * @param needle Number to find the insertion index for
  * @returns Index where x would fit in array a
  */
-export function bisect(haystack, needle) {
-	var lo = 0;
-	var hi = haystack.length;
-	var ascending = haystack[0] < haystack[haystack.length - 1];
+export function bisect(haystack: ReadonlyArray<number>, needle: number): number {
+	let lo = 0;
+	let hi = haystack.length;
+	const ascending = haystack[0]! < haystack[haystack.length - 1]!;
+
 	while (lo < hi) {
-		var mid = Math.floor((lo + hi) / 2);
-		if (ascending ? haystack[mid] < needle : haystack[mid] > needle) {
+		const mid = Math.floor((lo + hi) / 2);
+		if (ascending ? haystack[mid]! < needle : haystack[mid]! > needle) {
 			lo = mid + 1;
 		} else {
 			hi = mid;
@@ -29,28 +32,26 @@ export function bisect(haystack, needle) {
  * Computes an inverse scale function for categorical/ordinal scales.
  * Uses bisect to find the closest domain value for a given pixel coordinate.
  */
-export function createCategoricalInverse(scale, allDataPointsOnAxis) {
+export function createCategoricalInverse(
+	scale: CustomScaleDefinition | undefined,
+	allDataPointsOnAxis?: ReadonlyArray<unknown>,
+): InverseScaleFunction | undefined {
 	if (!scale) {
 		return undefined;
 	}
-	var domain =
-		allDataPointsOnAxis !== null && allDataPointsOnAxis !== void 0
-			? allDataPointsOnAxis
-			: scale.domain();
+	const domain = allDataPointsOnAxis ?? scale.domain();
 	// Build an array of pixel positions for each domain value
 	// @ts-expect-error we're attempting to scale unknown without having guarantee that it is a Domain type
-	var pixelPositions = domain.map((d) => {
-		var _scale;
-		return (_scale = scale(d)) !== null && _scale !== void 0 ? _scale : 0;
-	});
-	var range = scale.range();
+	const pixelPositions: number[] = domain.map((d) => scale(d) ?? 0);
+	const range = scale.range();
+
 	if (domain.length === 0 || range.length < 2) {
 		return undefined;
 	}
-	return (pixelValue) => {
-		var _pixelPositions, _pixelPositions$index;
+
+	return (pixelValue: number): unknown => {
 		// Find the closest domain value using bisect
-		var index = bisect(pixelPositions, pixelValue);
+		const index = bisect(pixelPositions, pixelValue);
 
 		// Clamp to valid range
 		if (index <= 0) {
@@ -61,14 +62,8 @@ export function createCategoricalInverse(scale, allDataPointsOnAxis) {
 		}
 
 		// Check which neighbor is closer
-		var leftPixel =
-			(_pixelPositions = pixelPositions[index - 1]) !== null && _pixelPositions !== void 0
-				? _pixelPositions
-				: 0;
-		var rightPixel =
-			(_pixelPositions$index = pixelPositions[index]) !== null && _pixelPositions$index !== void 0
-				? _pixelPositions$index
-				: 0;
+		const leftPixel = pixelPositions[index - 1] ?? 0;
+		const rightPixel = pixelPositions[index] ?? 0;
 		if (Math.abs(pixelValue - leftPixel) <= Math.abs(pixelValue - rightPixel)) {
 			return domain[index - 1];
 		}