@octanejs/recharts 0.1.40 → 0.1.42

package/src/util/ActiveShapeUtils.tsrx

@@ -1,3 +1,16 @@
+import type { OctaneElement, OctaneNode, SVGProps } from './OctaneTypes.ts';
+import type { ActiveShape, ShapeAnimationProps } from './types';
+
+type ShapeRenderer<PropsType> = (props: PropsType) => OctaneNode;
+type ShapeOptionProps<PropsType extends object> = Partial<PropsType>;
+type ShapeOptionElement<PropsType extends object> = OctaneElement<ShapeOptionProps<PropsType>>;
+export type ShapeProps<PropsType extends object, ElementType extends SVGElement = SVGElement> = {
+	option: ActiveShape<PropsType, ElementType> | undefined;
+	DefaultShape: ShapeRenderer<PropsType>;
+	shapeProps: PropsType;
+	activeClassName?: string;
+	inActiveClassName?: string;
+};
 // Port of util/ActiveShapeUtils.tsx — renders a user-defined `shape`/
 // `activeShape` option in all four accepted forms: an element (cloned with the
 // computed props as defaults), a render function, a props object (merged), or
@@ -7,22 +20,30 @@
 import { cloneElement, isValidElement } from 'octane';
 import { Layer } from '../container/Layer.tsrx';
 
-function mergeShapeProps(option, props) {
+function mergeShapeProps<PropsType extends object>(
+	option: ShapeOptionProps<PropsType>,
+	props: PropsType,
+): PropsType {
 	return { ...props, ...option };
 }
 
-export function getPropsFromShapeOption(option) {
-	if (isValidElement(option)) {
+export function getPropsFromShapeOption<PropsType extends object>(
+	option: ShapeOptionElement<PropsType> | ShapeOptionProps<PropsType>,
+): ShapeOptionProps<PropsType> {
+	if (isValidElement<ShapeOptionProps<PropsType>>(option)) {
 		return option.props;
 	}
 	return option;
 }
 
-function renderWithShapeElement(option, props) {
-	return cloneElement(option, mergeShapeProps(getPropsFromShapeOption(option), props));
+function renderWithShapeElement<PropsType extends object, OptionProps extends Partial<PropsType>>(
+	option: OctaneElement<OptionProps>,
+	props: PropsType,
+) {
+	return cloneElement(option, mergeShapeProps(option.props, props));
 }
 
-function getShapeIndex(shapeProps) {
+function getShapeIndex(shapeProps: object) {
 	if (!('index' in shapeProps)) {
 		return undefined;
 	}
@@ -30,11 +51,14 @@ function getShapeIndex(shapeProps) {
 	return typeof index === 'number' || typeof index === 'string' ? index : undefined;
 }
 
-function isActiveShape(shapeProps) {
+function isActiveShape(shapeProps: object) {
 	return 'isActive' in shapeProps && shapeProps.isActive === true;
 }
 
-export function Shape(shapeOuterProps) {
+export function Shape<
+	PropsType extends ShapeAnimationProps,
+	ElementType extends SVGElement = SVGElement,
+>(shapeOuterProps: ShapeProps<PropsType, ElementType>) {
 	const {
 		option,
 		DefaultShape,
@@ -43,8 +67,8 @@ export function Shape(shapeOuterProps) {
 		inActiveClassName = 'recharts-shape',
 	} = shapeOuterProps;
 	const index = getShapeIndex(shapeProps);
-	let shape;
-	if (isValidElement(option)) {
+	let shape: OctaneNode;
+	if (isValidElement<Partial<PropsType> & SVGProps<ElementType>>(option)) {
 		shape = renderWithShapeElement(option, shapeProps);
 	} else if (option === DefaultShape) {
 		shape = <DefaultShape {...shapeProps} />;

package/src/util/BarUtils.tsrx

@@ -1,3 +1,26 @@
+import type { NativeMouseEvent } from './OctaneTypes.ts';
+import type { ActiveShape, DataKey, ShapeAnimationProps } from './types';
+import type { Props as RectangleProps } from '../shape/Rectangle.tsrx';
+import type { BarBackgroundShapeProps, BarShapeProps } from '../cartesian/Bar.tsrx';
+
+type BarRectangleSharedProps =
+	{
+		onMouseEnter?: (e: NativeMouseEvent<SVGPathElement>) => void;
+		onMouseLeave?: (e: NativeMouseEvent<SVGPathElement>) => void;
+		onClick?: (e: NativeMouseEvent<SVGPathElement>) => void;
+		dataKey: DataKey<any> | undefined;
+	} & ShapeAnimationProps & Omit<RectangleProps, 'onAnimationStart' | 'onAnimationEnd'>;
+export type BarRectangleProps =
+	BarShapeProps & BarRectangleSharedProps & {
+		option: ActiveShape<BarShapeProps, SVGPathElement>;
+	};
+export type BarBackgroundRectangleProps =
+	BarBackgroundShapeProps & BarRectangleSharedProps & {
+		option: ActiveShape<BarBackgroundShapeProps, SVGPathElement>;
+	};
+type BarRectangleShapeProps = Omit<BarRectangleProps, 'option'>;
+type BarBackgroundRectangleShapeProps = Omit<BarBackgroundRectangleProps, 'option'>;
+export type MinPointSize = number | ((value: number | undefined | null, index: number) => number);
 // Port of util/BarUtils.tsx — the bar shape wrapper (Rectangle by default,
 // user overridable through the Shape helper) + the minPointSize resolver.
 import invariant from 'tiny-invariant';
@@ -7,9 +30,23 @@ import { isNullish, isNumber } from './DataUtils';
 
 export const defaultBarShape = Rectangle;
 
-export function BarRectangle(barRectangleProps) {
+const BarRectangleShape = Shape<BarRectangleShapeProps, SVGPathElement>;
+const BarBackgroundRectangleShape = Shape<BarBackgroundRectangleShapeProps, SVGPathElement>;
+
+export function BarRectangle(barRectangleProps: BarRectangleProps) {
 	const { option, ...shapeProps } = barRectangleProps;
-	return <Shape
+	return <BarRectangleShape
+		option={option}
+		DefaultShape={defaultBarShape}
+		shapeProps={shapeProps}
+		activeClassName="recharts-active-bar"
+		inActiveClassName="recharts-inactive-bar"
+	/>;
+}
+
+export function BarBackgroundRectangle(backgroundRectangleProps: BarBackgroundRectangleProps) {
+	const { option, ...shapeProps } = backgroundRectangleProps;
+	return <BarBackgroundRectangleShape
 		option={option}
 		DefaultShape={defaultBarShape}
 		shapeProps={shapeProps}
@@ -21,7 +58,10 @@ export function BarRectangle(barRectangleProps) {
 /**
  * Safely gets minPointSize from the minPointSize prop if it is a function
  */
-export const minPointSizeCallback = (minPointSize, defaultValue = 0) => (value, index) => {
+export const minPointSizeCallback = (minPointSize: MinPointSize, defaultValue = 0) => (
+	value: unknown,
+	index: number,
+): number => {
 	if (isNumber(minPointSize)) return minPointSize;
 	const isValueNumberOrNil = isNumber(value) || isNullish(value);
 	if (isValueNumberOrNil) {

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

@@ -1,44 +1,28 @@
-// Vendored verbatim from recharts@3.9.2 es6/util/CartesianUtils.js (framework-agnostic).
-// Do not edit — update by re-vendoring when the recharts devDependency moves.
-export var rectWithPoints = (_ref, _ref2) => {
-	var x1 = _ref.x,
-		y1 = _ref.y;
-	var x2 = _ref2.x,
-		y2 = _ref2.y;
-	return {
-		x: Math.min(x1, x2),
-		y: Math.min(y1, y2),
-		width: Math.abs(x2 - x1),
-		height: Math.abs(y2 - y1),
-	};
-};
+// Adapted from recharts@3.9.2, commit b3451050c027a23957ffa50a2665c9119df21e47.
+import { Coordinate, RectangleCoordinate, RectanglePosition, Size } from './types';
+
+export const rectWithPoints = (
+	{ x: x1, y: y1 }: Coordinate,
+	{ x: x2, y: y2 }: Coordinate,
+): RectanglePosition => ({
+	x: Math.min(x1, x2),
+	y: Math.min(y1, y2),
+	width: Math.abs(x2 - x1),
+	height: Math.abs(y2 - y1),
+});
 
 /**
  * Compute the x, y, width, and height of a box from two reference points.
  * @param  {Object} coords     x1, x2, y1, and y2
  * @return {Object} object
  */
-export var rectWithCoords = (_ref3) => {
-	var x1 = _ref3.x1,
-		y1 = _ref3.y1,
-		x2 = _ref3.x2,
-		y2 = _ref3.y2;
-	return rectWithPoints(
-		{
-			x: x1,
-			y: y1,
-		},
-		{
-			x: x2,
-			y: y2,
-		},
-	);
-};
+export const rectWithCoords = ({ x1, y1, x2, y2 }: RectangleCoordinate): RectanglePosition =>
+	rectWithPoints({ x: x1, y: y1 }, { x: x2, y: y2 });
 
 /** Normalizes the angle so that 0 <= angle < 180.
  * @param {number} angle Angle in degrees.
  * @return {number} the normalized angle with a value of at least 0 and never greater or equal to 180. */
-export function normalizeAngle(angle) {
+export function normalizeAngle(angle: number) {
 	return ((angle % 180) + 180) % 180;
 }
 
@@ -47,20 +31,19 @@ export function normalizeAngle(angle) {
  * @param {number} angle Angle in degrees in which the text is displayed.
  * @return {number} The width of the largest horizontal line that fits inside a rectangle that is displayed at an angle.
  */
-export var getAngledRectangleWidth = function getAngledRectangleWidth(_ref4) {
-	var width = _ref4.width,
-		height = _ref4.height;
-	var angle = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+export const getAngledRectangleWidth = ({ width, height }: Size, angle: number | undefined = 0) => {
 	// Ensure angle is >= 0 && < 180
-	var normalizedAngle = normalizeAngle(angle);
-	var angleRadians = (normalizedAngle * Math.PI) / 180;
+	const normalizedAngle = normalizeAngle(angle);
+	const angleRadians = (normalizedAngle * Math.PI) / 180;
 
 	/* Depending on the height and width of the rectangle, we may need to use different formulas to calculate the angled
 	 * width. This threshold defines when each formula should kick in. */
-	var angleThreshold = Math.atan(height / width);
-	var angledWidth =
+	const angleThreshold = Math.atan(height / width);
+
+	const angledWidth =
 		angleRadians > angleThreshold && angleRadians < Math.PI - angleThreshold
 			? height / Math.sin(angleRadians)
 			: width / Math.cos(angleRadians);
+
 	return Math.abs(angledWidth);
 };