@octanejs/recharts 0.1.41 → 0.1.42

package/src/util/PolarUtils.ts

@@ -0,0 +1,132 @@
+// Adapted from recharts@3.9.2, commit b3451050c027a23957ffa50a2665c9119df21e47.
+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 = {
+		top: 0,
+		right: 0,
+		bottom: 0,
+		left: 0,
+		width: 0,
+		height: 0,
+		brushBottom: 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 { radius, angle: 0 };
+	}
+
+	const cos = (x - cx) / radius;
+	let angleInRadian = Math.acos(cos);
+
+	if (y > cy) {
+		angleInRadian = 2 * Math.PI - angleInRadian;
+	}
+
+	return { radius, angle: radianToDegree(angleInRadian), angleInRadian };
+};
+
+const formatAngleOfSector = ({ startAngle, endAngle }: PolarViewBoxRequired) => {
+	const startCnt = Math.floor(startAngle / 360);
+	const endCnt = Math.floor(endAngle / 360);
+	const min = Math.min(startCnt, endCnt);
+
+	return {
+		startAngle: startAngle - min * 360,
+		endAngle: endAngle - 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, radius, angle: reverseFormatAngleOfSector(formatAngle, viewBox) };
+	}
+
+	return null;
+};

package/src/util/RadialBarUtils.tsrx

@@ -1,8 +1,8 @@
 import * as React from 'octane';
-import { RadialBarDataItem, RadialBarProps } from '../polar/RadialBar';
-import { Sector } from '../shape/Sector';
+import { RadialBarDataItem, RadialBarProps } from '../polar/RadialBar.tsrx';
+import { Sector } from '../shape/Sector.tsrx';
 import { ShapeAnimationProps } from './types';
-import { Shape } from './ActiveShapeUtils';
+import { Shape } from './ActiveShapeUtils.tsrx';
 
 export const defaultRadialBarShape = Sector;
 

package/src/util/ReduceCSSCalc.ts

@@ -0,0 +1,186 @@
+// Adapted from recharts@3.9.2, commit b3451050c027a23957ffa50a2665c9119df21e47.
+import { isNan } from './DataUtils';
+
+const MULTIPLY_OR_DIVIDE_REGEX = /(-?\d+(?:\.\d+)?[a-zA-Z%]*)([*/])(-?\d+(?:\.\d+)?[a-zA-Z%]*)/;
+const ADD_OR_SUBTRACT_REGEX = /(-?\d+(?:\.\d+)?[a-zA-Z%]*)([+-])(-?\d+(?:\.\d+)?[a-zA-Z%]*)/;
+const CSS_LENGTH_UNIT_REGEX = /^(px|cm|vh|vw|em|rem|%|mm|in|pt|pc|ex|ch|vmin|vmax|Q)$/;
+const NUM_SPLIT_REGEX = /(-?\d+(?:\.\d+)?)([a-zA-Z%]+)?/;
+
+type SupportedUnits = 'cm' | 'mm' | 'pt' | 'pc' | 'in' | 'Q' | 'px';
+
+const CONVERSION_RATES: Record<SupportedUnits, number> = {
+	cm: 96 / 2.54,
+	mm: 96 / 25.4,
+	pt: 96 / 72,
+	pc: 96 / 6,
+	in: 96,
+	Q: 96 / (2.54 * 40),
+	px: 1,
+};
+
+const FIXED_CSS_LENGTH_UNITS: ReadonlyArray<SupportedUnits> = [
+	'cm',
+	'mm',
+	'pt',
+	'pc',
+	'in',
+	'Q',
+	'px',
+];
+
+function isSupportedUnit(unit: string): unit is SupportedUnits {
+	return FIXED_CSS_LENGTH_UNITS.includes(unit as SupportedUnits);
+}
+
+const STR_NAN = 'NaN';
+
+function convertToPx(value: number, unit: SupportedUnits): number {
+	return value * CONVERSION_RATES[unit];
+}
+
+class DecimalCSS {
+	static parse(str: string) {
+		const [, numStr, unit] = NUM_SPLIT_REGEX.exec(str) ?? [];
+
+		if (numStr == null) {
+			return DecimalCSS.NaN;
+		}
+
+		return new DecimalCSS(parseFloat(numStr), unit ?? '');
+	}
+
+	static NaN = new DecimalCSS(NaN, '');
+
+	constructor(
+		public num: number,
+		public unit: string,
+	) {
+		this.num = num;
+		this.unit = unit;
+
+		if (isNan(num)) {
+			this.unit = '';
+		}
+
+		if (unit !== '' && !CSS_LENGTH_UNIT_REGEX.test(unit)) {
+			this.num = NaN;
+			this.unit = '';
+		}
+
+		if (isSupportedUnit(unit)) {
+			this.num = convertToPx(num, unit);
+			this.unit = 'px';
+		}
+	}
+
+	add(other: DecimalCSS) {
+		if (this.unit !== other.unit) {
+			return new DecimalCSS(NaN, '');
+		}
+
+		return new DecimalCSS(this.num + other.num, this.unit);
+	}
+
+	subtract(other: DecimalCSS) {
+		if (this.unit !== other.unit) {
+			return new DecimalCSS(NaN, '');
+		}
+
+		return new DecimalCSS(this.num - other.num, this.unit);
+	}
+
+	multiply(other: DecimalCSS) {
+		if (this.unit !== '' && other.unit !== '' && this.unit !== other.unit) {
+			return new DecimalCSS(NaN, '');
+		}
+
+		return new DecimalCSS(this.num * other.num, this.unit || other.unit);
+	}
+
+	divide(other: DecimalCSS) {
+		if (this.unit !== '' && other.unit !== '' && this.unit !== other.unit) {
+			return new DecimalCSS(NaN, '');
+		}
+
+		return new DecimalCSS(this.num / other.num, this.unit || other.unit);
+	}
+
+	toString() {
+		return `${this.num}${this.unit}`;
+	}
+
+	isNaN() {
+		return isNan(this.num);
+	}
+}
+
+function calculateArithmetic(expr: string | undefined): string {
+	if (expr == null || expr.includes(STR_NAN)) {
+		return STR_NAN;
+	}
+
+	let newExpr = expr;
+	while (newExpr.includes('*') || newExpr.includes('/')) {
+		const [, leftOperand, operator, rightOperand] = MULTIPLY_OR_DIVIDE_REGEX.exec(newExpr) ?? [];
+		const lTs = DecimalCSS.parse(leftOperand ?? '');
+		const rTs = DecimalCSS.parse(rightOperand ?? '');
+		const result = operator === '*' ? lTs.multiply(rTs) : lTs.divide(rTs);
+		if (result.isNaN()) {
+			return STR_NAN;
+		}
+		newExpr = newExpr.replace(MULTIPLY_OR_DIVIDE_REGEX, result.toString());
+	}
+
+	while (newExpr.includes('+') || /.-\d+(?:\.\d+)?/.test(newExpr)) {
+		const [, leftOperand, operator, rightOperand] = ADD_OR_SUBTRACT_REGEX.exec(newExpr) ?? [];
+		const lTs = DecimalCSS.parse(leftOperand ?? '');
+		const rTs = DecimalCSS.parse(rightOperand ?? '');
+		const result = operator === '+' ? lTs.add(rTs) : lTs.subtract(rTs);
+		if (result.isNaN()) {
+			return STR_NAN;
+		}
+		newExpr = newExpr.replace(ADD_OR_SUBTRACT_REGEX, result.toString());
+	}
+
+	return newExpr;
+}
+
+const PARENTHESES_REGEX = /\(([^()]*)\)/;
+
+function calculateParentheses(expr: string): string {
+	let newExpr = expr;
+	let match: ReturnType<typeof RegExp.prototype.exec> | null;
+	// eslint-disable-next-line no-cond-assign
+	while ((match = PARENTHESES_REGEX.exec(newExpr)) != null) {
+		const [, parentheticalExpression] = match;
+		newExpr = newExpr.replace(PARENTHESES_REGEX, calculateArithmetic(parentheticalExpression));
+	}
+
+	return newExpr;
+}
+
+function evaluateExpression(expression: string): string {
+	let newExpr = expression.replace(/\s+/g, '');
+	newExpr = calculateParentheses(newExpr);
+	newExpr = calculateArithmetic(newExpr);
+
+	return newExpr;
+}
+
+export function safeEvaluateExpression(expression: string): string {
+	try {
+		return evaluateExpression(expression);
+	} catch {
+		return STR_NAN;
+	}
+}
+
+export function reduceCSSCalc(expression: string): string {
+	const result = safeEvaluateExpression(expression.slice(5, -1));
+
+	if (result === STR_NAN) {
+		return '';
+	}
+
+	return result;
+}

package/src/util/ScatterUtils.tsrx

@@ -1,8 +1,8 @@
 import * as React from 'octane';
 import { ActiveShape, ShapeAnimationProps, SymbolType } from './types';
-import { ScatterPointItem } from '../cartesian/Scatter';
-import { InnerSymbolsProp, Symbols } from '../shape/Symbols';
-import { Shape } from './ActiveShapeUtils';
+import { ScatterPointItem } from '../cartesian/Scatter.tsrx';
+import { InnerSymbolsProp, Symbols } from '../shape/Symbols.tsrx';
+import { Shape } from './ActiveShapeUtils.tsrx';
 import { DATA_ITEM_GRAPHICAL_ITEM_ID_ATTRIBUTE_NAME } from './Constants';
 import { GraphicalItemId } from '../state/graphicalItemsSlice';
 
@@ -13,22 +13,24 @@ export type ScatterShapeProps =
 		[DATA_ITEM_GRAPHICAL_ITEM_ID_ATTRIBUTE_NAME]: GraphicalItemId;
 	};
 
-type ScatterSymbolShapeProps = ScatterShapeProps & InnerSymbolsProp;
+type ScatterSymbolShapeProps = ScatterShapeProps & Omit<InnerSymbolsProp, keyof ScatterShapeProps>;
 
 function renderSymbols(props: ScatterSymbolShapeProps) {
 	return <Symbols {...props} />;
 }
 
+const ScatterShape = Shape<ScatterSymbolShapeProps, SVGPathElement>;
+
 export function ScatterSymbol({ option, ...props }: {
-	option: ActiveShape<ScatterShapeProps & InnerSymbolsProp, SVGPathElement> | SymbolType;
+	option: ActiveShape<ScatterSymbolShapeProps, SVGPathElement> | SymbolType;
 } & ScatterShapeProps) {
 	if (typeof option === 'string') {
-		return <Shape
+		return <ScatterShape
 			option={<Symbols type={option} {...props} />}
 			DefaultShape={renderSymbols}
 			shapeProps={props}
 		/>;
 	}
 
-	return <Shape option={option} DefaultShape={renderSymbols} shapeProps={props} />;
+	return <ScatterShape option={option} DefaultShape={renderSymbols} shapeProps={props} />;
 }

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

@@ -1,20 +1,24 @@
-// Vendored verbatim from recharts@3.9.2 es6/util/TickUtils.js (framework-agnostic).
-// Do not edit — update by re-vendoring when the recharts devDependency moves.
+// Adapted from recharts@3.9.2, commit b3451050c027a23957ffa50a2665c9119df21e47.
 import { getAngledRectangleWidth } from './CartesianUtils';
 import { getEveryNth } from './getEveryNth';
-export function getAngledTickWidth(contentSize, unitSize, angle) {
-	var size = {
+import { Size, CartesianTickItem, CartesianViewBoxRequired } from './types';
+
+export function getAngledTickWidth(contentSize: Size, unitSize: Size, angle: number | undefined) {
+	const size = {
 		width: contentSize.width + unitSize.width,
 		height: contentSize.height + unitSize.height,
 	};
+
 	return getAngledRectangleWidth(size, angle);
 }
-export function getTickBoundaries(viewBox, sign, sizeKey) {
-	var isWidth = sizeKey === 'width';
-	var x = viewBox.x,
-		y = viewBox.y,
-		width = viewBox.width,
-		height = viewBox.height;
+
+export function getTickBoundaries(
+	viewBox: CartesianViewBoxRequired,
+	sign: number,
+	sizeKey: string,
+) {
+	const isWidth = sizeKey === 'width';
+	const { x, y, width, height } = viewBox;
 	if (sign === 1) {
 		return {
 			start: isWidth ? x : y,
@@ -26,18 +30,31 @@ export function getTickBoundaries(viewBox, sign, sizeKey) {
 		end: isWidth ? x : y,
 	};
 }
-export function isVisible(sign, tickPosition, getSize, start, end) {
+
+export function isVisible(
+	sign: number,
+	tickPosition: number,
+	getSize: () => number,
+	start: number,
+	end: number,
+): boolean {
 	/* Since getSize() is expensive (it reads the ticks' size from the DOM), we do this check first to avoid calculating
 	 * the tick's size. */
 	if (sign * tickPosition < sign * start || sign * tickPosition > sign * end) {
 		return false;
 	}
-	var size = getSize();
+
+	const size = getSize();
+
 	return (
 		sign * (tickPosition - (sign * size) / 2 - start) >= 0 &&
 		sign * (tickPosition + (sign * size) / 2 - end) <= 0
 	);
 }
-export function getNumberIntervalTicks(ticks, interval) {
+
+export function getNumberIntervalTicks(
+	ticks: ReadonlyArray<CartesianTickItem>,
+	interval: number,
+): ReadonlyArray<CartesianTickItem> | undefined {
 	return getEveryNth(ticks, interval + 1);
 }

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

@@ -1,5 +1,6 @@
-// Vendored verbatim from recharts@3.9.2 es6/util/YAxisUtils.js (framework-agnostic).
-// Do not edit — update by re-vendoring when the recharts devDependency moves.
+// Adapted from recharts@3.9.2, commit b3451050c027a23957ffa50a2665c9119df21e47.
+type IGetBoundingClient = Pick<Element, 'getBoundingClientRect'>;
+
 /**
  * Calculates the width of the Y-axis based on the tick labels and the axis label.
  * @param params - The parameters object.
@@ -10,21 +11,26 @@
  * @param [params.tickMargin=0] - The margin between the tick line and the tick text.
  * @returns The calculated width of the Y-axis.
  */
-export var getCalculatedYAxisWidth = (_ref) => {
-	var ticks = _ref.ticks,
-		label = _ref.label,
-		_ref$labelGapWithTick = _ref.labelGapWithTick,
-		labelGapWithTick = _ref$labelGapWithTick === void 0 ? 5 : _ref$labelGapWithTick,
-		_ref$tickSize = _ref.tickSize,
-		tickSize = _ref$tickSize === void 0 ? 0 : _ref$tickSize,
-		_ref$tickMargin = _ref.tickMargin,
-		tickMargin = _ref$tickMargin === void 0 ? 0 : _ref$tickMargin;
+export const getCalculatedYAxisWidth = ({
+	ticks,
+	label,
+	labelGapWithTick = 5, // Default gap between label and tick
+	tickSize = 0,
+	tickMargin = 0,
+}: {
+	ticks: ArrayLike<IGetBoundingClient> | null;
+	label: IGetBoundingClient | null | undefined;
+	labelGapWithTick: number | undefined;
+	tickSize: number | undefined;
+	tickMargin: number | undefined;
+}): number => {
 	// find the max width of the tick labels
-	var maxTickWidth = 0;
+	let maxTickWidth = 0;
 	if (ticks) {
-		Array.from(ticks).forEach((tickNode) => {
+		Array.from(ticks).forEach((tickNode: IGetBoundingClient) => {
 			if (tickNode) {
-				var bbox = tickNode.getBoundingClientRect();
+				const bbox = tickNode.getBoundingClientRect();
+
 				if (bbox.width > maxTickWidth) {
 					maxTickWidth = bbox.width;
 				}
@@ -32,12 +38,16 @@ export var getCalculatedYAxisWidth = (_ref) => {
 		});
 
 		// calculate width of the axis label
-		var labelWidth = label ? label.getBoundingClientRect().width : 0;
-		var tickWidth = tickSize + tickMargin;
+		const labelWidth = label ? label.getBoundingClientRect().width : 0;
+
+		const tickWidth = tickSize + tickMargin;
 
 		// calculate the updated width of the y-axis
-		var updatedYAxisWidth = maxTickWidth + tickWidth + labelWidth + (label ? labelGapWithTick : 0);
+		const updatedYAxisWidth =
+			maxTickWidth + tickWidth + labelWidth + (label ? labelGapWithTick : 0);
+
 		return Math.round(updatedYAxisWidth);
 	}
+
 	return 0;
 };

package/src/util/axisPropsAreEqual.ts

@@ -0,0 +1,49 @@
+// Adapted from recharts@3.9.2, commit b3451050c027a23957ffa50a2665c9119df21e47.
+import { XAxisProps, YAxisProps } from '../index';
+import { AxisDomain } from './types';
+import { AxisRange } from '../state/selectors/axisSelectors';
+import { propsAreEqual } from './propsAreEqual';
+
+function shortArraysAreEqual(
+	arr1: AxisDomain | AxisRange | undefined,
+	arr2: AxisDomain | AxisRange | undefined,
+): boolean {
+	if (arr1 === arr2) {
+		return true;
+	}
+
+	if (Array.isArray(arr1) && arr1.length === 2 && Array.isArray(arr2) && arr2.length === 2) {
+		return arr1[0] === arr2[0] && arr1[1] === arr2[1];
+	}
+
+	return false;
+}
+
+/**
+ * Usually we would not compare array props deeply for performance consideration.
+ * However, for axis props, domain is sometimes defined as a two-elements array, and range is always
+ * a two-elements array. So we can do a shallow comparison for the rest props and a shallow
+ * comparison for these two array props.
+ * @param prevProps
+ * @param nextProps
+ */
+export function axisPropsAreEqual<T extends YAxisProps | XAxisProps>(
+	prevProps: T,
+	nextProps: T,
+): boolean {
+	if (prevProps === nextProps) {
+		return true;
+	}
+	const { domain: prevDomain, range: prevRange, ...prevRest } = prevProps;
+	const { domain: nextDomain, range: nextRange, ...nextRest } = nextProps;
+
+	if (!shortArraysAreEqual(prevDomain, nextDomain)) {
+		return false;
+	}
+
+	if (!shortArraysAreEqual(prevRange, nextRange)) {
+		return false;
+	}
+
+	return propsAreEqual(prevRest, nextRest);
+}

package/src/util/createEventProxy.ts

@@ -0,0 +1,20 @@
+// Adapted from recharts@3.9.2, commit b3451050c027a23957ffa50a2665c9119df21e47.
+import type { NativeEvent } from './OctaneTypes';
+
+export function createEventProxy<T extends NativeEvent>(reactEvent: T): T {
+	// Native events are not pooled. Capture the delegated target before a
+	// throttled callback runs, after dispatch has cleared currentTarget.
+	const { currentTarget } = reactEvent;
+	return new Proxy(reactEvent, {
+		get: (target, prop) => {
+			if (prop === 'currentTarget') {
+				return currentTarget;
+			}
+			const value = Reflect.get(target, prop);
+			if (typeof value === 'function') {
+				return value.bind(target);
+			}
+			return value;
+		},
+	});
+}

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

@@ -1,6 +1,5 @@
-// Vendored verbatim from recharts@3.9.2 es6/util/excludeEventProps.js (framework-agnostic).
-// Do not edit — update by re-vendoring when the recharts devDependency moves.
-var EventKeys = [
+// Adapted from recharts@3.9.2, commit b3451050c027a23957ffa50a2665c9119df21e47.
+const EventKeys = [
 	'dangerouslySetInnerHTML',
 	'onCopy',
 	'onCopyCapture',
@@ -162,11 +161,14 @@ var EventKeys = [
 	'onAnimationIterationCapture',
 	'onTransitionEnd',
 	'onTransitionEndCapture',
-];
-export function isEventKey(key) {
+] as const;
+
+export type EventKeysType = (typeof EventKeys)[number];
+
+export function isEventKey(key: PropertyKey): key is EventKeysType {
 	if (typeof key !== 'string') {
 		return false;
 	}
-	var allowedEventKeys = EventKeys;
+	const allowedEventKeys: ReadonlyArray<string> = EventKeys;
 	return allowedEventKeys.includes(key);
 }