@octanejs/recharts 0.1.0

package/src/shape/Cross.tsrx.d.ts

@@ -0,0 +1,12 @@
+// Type declaration for the .tsrx component (resolved by relative path).
+export interface CrossProps {
+	x?: number;
+	y?: number;
+	top?: number;
+	left?: number;
+	width?: number;
+	height?: number;
+	className?: unknown;
+	[key: string]: unknown;
+}
+export declare const Cross: (props: CrossProps) => unknown;

package/src/shape/Curve.tsrx

@@ -0,0 +1,132 @@
+// Port of shape/Curve.tsx — the line/area path. The `d` string comes straight
+// from victory-vendor's d3-shape line/area generators (same dependency, same
+// version as upstream), so output is byte-identical by construction.
+import {
+	area as shapeArea,
+	curveBasis,
+	curveBasisClosed,
+	curveBasisOpen,
+	curveBumpX,
+	curveBumpY,
+	curveLinear,
+	curveLinearClosed,
+	curveMonotoneX,
+	curveMonotoneY,
+	curveNatural,
+	curveStep,
+	curveStepAfter,
+	curveStepBefore,
+	line as shapeLine,
+} from 'victory-vendor/d3-shape';
+import { clsx } from 'clsx';
+import { adaptEventHandlers } from '../util/types.ts';
+import { isNumber, upperFirst } from '../util/DataUtils';
+import { isWellBehavedNumber } from '../util/isWellBehavedNumber';
+import { svgPropertiesNoEvents } from '../util/svgPropertiesNoEvents';
+import { useChartLayout } from '../context/chartLayoutContext.ts';
+
+const CURVE_FACTORIES = {
+	curveBasisClosed,
+	curveBasisOpen,
+	curveBasis,
+	curveBumpX,
+	curveBumpY,
+	curveLinearClosed,
+	curveLinear,
+	curveMonotoneX,
+	curveMonotoneY,
+	curveNatural,
+	curveStep,
+	curveStepAfter,
+	curveStepBefore,
+};
+
+const defined = (p) => isWellBehavedNumber(p.x) && isWellBehavedNumber(p.y);
+const areaDefined = (d) => d.base != null && defined(d.base) && defined(d);
+const getX = (p) => p.x;
+const getY = (p) => p.y;
+
+const getCurveFactory = (type, layout) => {
+	if (typeof type === 'function') {
+		return type;
+	}
+	const name = 'curve' + upperFirst(type);
+	if ((name === 'curveMonotone' || name === 'curveBump') && layout) {
+		const factory = CURVE_FACTORIES[name + (layout === 'vertical' ? 'Y' : 'X')];
+		if (factory) {
+			return factory;
+		}
+	}
+	return CURVE_FACTORIES[name] || curveLinear;
+};
+
+export const defaultCurveProps = {
+	connectNulls: false,
+	type: 'linear',
+};
+
+/**
+ * Calculate the path of curve. Returns null if points is an empty array.
+ * @return path or null
+ */
+export const getPath = ({
+	type = defaultCurveProps.type,
+	points = [],
+	baseLine,
+	layout,
+	connectNulls = defaultCurveProps.connectNulls,
+}) => {
+	const curveFactory = getCurveFactory(type, layout);
+	const formatPoints =
+		connectNulls ? points.filter(defined) : points;
+
+	// An area chart's array `baseLine` pairs each point with its baseline
+	// counterpart FIRST, so the `defined` filter drops both sides together.
+	if (Array.isArray(baseLine)) {
+		const areaPoints = points.map((entry, index) => ({ ...entry, base: baseLine[index] }));
+		let lineFunction;
+		if (layout === 'vertical') {
+			lineFunction = shapeArea().y(getY).x1(getX).x0((d) => d.base.x);
+		} else {
+			lineFunction = shapeArea().x(getX).y1(getY).y0((d) => d.base.y);
+		}
+		const nullableLineFunction = lineFunction.defined(areaDefined).curve(curveFactory);
+		const finalPoints =
+			connectNulls ? areaPoints.filter(areaDefined) : areaPoints;
+		return nullableLineFunction(finalPoints);
+	}
+	let lineFunction;
+	if (layout === 'vertical' && isNumber(baseLine)) {
+		lineFunction = shapeArea().y(getY).x1(getX).x0(baseLine);
+	} else if (isNumber(baseLine)) {
+		lineFunction = shapeArea().x(getX).y1(getY).y0(baseLine);
+	} else {
+		lineFunction = shapeLine().x(getX).y(getY);
+	}
+	const nullableLineFunction = lineFunction.defined(defined).curve(curveFactory);
+	return nullableLineFunction(formatPoints);
+};
+
+export function Curve(props) {
+	const { className, points, path, pathRef } = props;
+	const layout = useChartLayout();
+	if ((!points || !points.length) && !path) {
+		return null;
+	}
+	const getPathInput = {
+		type: props.type,
+		points: props.points,
+		baseLine: props.baseLine,
+		layout: props.layout || layout,
+		connectNulls: props.connectNulls,
+	};
+	const realPath =
+		points && points.length ? getPath(getPathInput) : path;
+	return <path
+		{...svgPropertiesNoEvents(props)}
+		{...adaptEventHandlers(props)}
+		className={clsx('recharts-curve', className)}
+		d={realPath === null ? undefined : realPath}
+		ref={pathRef}
+	/>;
+}

package/src/shape/Curve.tsrx.d.ts

@@ -0,0 +1,42 @@
+// Type declaration for the .tsrx component (resolved by relative path).
+export interface CurvePoint {
+	x: number | null;
+	y: number | null;
+}
+export type CurveType =
+	| 'basis'
+	| 'basisClosed'
+	| 'basisOpen'
+	| 'bump'
+	| 'bumpX'
+	| 'bumpY'
+	| 'linear'
+	| 'linearClosed'
+	| 'monotone'
+	| 'monotoneX'
+	| 'monotoneY'
+	| 'natural'
+	| 'step'
+	| 'stepAfter'
+	| 'stepBefore'
+	| ((...args: unknown[]) => unknown);
+export interface CurveProps {
+	type?: CurveType;
+	points?: ReadonlyArray<CurvePoint>;
+	baseLine?: number | ReadonlyArray<CurvePoint>;
+	layout?: 'horizontal' | 'vertical';
+	connectNulls?: boolean;
+	path?: string;
+	pathRef?: unknown;
+	className?: unknown;
+	[key: string]: unknown;
+}
+export declare const defaultCurveProps: { connectNulls: boolean; type: 'linear' };
+export declare const getPath: (input: {
+	type?: CurveType;
+	points?: ReadonlyArray<CurvePoint>;
+	baseLine?: number | ReadonlyArray<CurvePoint>;
+	layout?: 'horizontal' | 'vertical';
+	connectNulls?: boolean;
+}) => string | null;
+export declare const Curve: (props: CurveProps) => unknown;

package/src/shape/Dot.tsrx

@@ -0,0 +1,21 @@
+// Port of shape/Dot.tsx — a circle marker.
+import { clsx } from 'clsx';
+import { adaptEventHandlers } from '../util/types.ts';
+import { svgPropertiesNoEvents } from '../util/svgPropertiesNoEvents';
+import { isNumber } from '../util/DataUtils';
+
+export function Dot(props) {
+	const { cx, cy, r, className } = props;
+	const layerClass = clsx('recharts-dot', className);
+	if (isNumber(cx) && isNumber(cy) && isNumber(r)) {
+		return <circle
+			{...svgPropertiesNoEvents(props)}
+			{...adaptEventHandlers(props)}
+			className={layerClass}
+			cx={cx}
+			cy={cy}
+			r={r}
+		/>;
+	}
+	return null;
+}

package/src/shape/Dot.tsrx.d.ts

@@ -0,0 +1,9 @@
+// Type declaration for the .tsrx component (resolved by relative path).
+export interface DotProps {
+	cx?: number;
+	cy?: number;
+	r?: number;
+	className?: unknown;
+	[key: string]: unknown;
+}
+export declare const Dot: (props: DotProps) => unknown;

package/src/shape/Polygon.tsrx

@@ -0,0 +1,95 @@
+// Port of shape/Polygon.tsx — closed/segmented polygon paths (Radar,
+// PolarGrid). Path strings mirror upstream's roundTemplateLiteral output.
+import { clsx } from 'clsx';
+import { svgPropertiesAndEvents } from '../util/svgPropertiesAndEvents.ts';
+import { round } from '../util/round';
+
+function isValidatePoint(point) {
+	return point != null && point.x === +point.x && point.y === +point.y;
+}
+
+function getParsedPoints(points = []) {
+	let segmentPoints = [[]];
+	points.forEach((entry) => {
+		const lastLink = segmentPoints[segmentPoints.length - 1];
+		if (isValidatePoint(entry)) {
+			if (lastLink) {
+				lastLink.push(entry);
+			}
+		} else if (lastLink && lastLink.length > 0) {
+			segmentPoints.push([]);
+		}
+	});
+	const firstPoint = points[0];
+	const lastLink = segmentPoints[segmentPoints.length - 1];
+	if (isValidatePoint(firstPoint) && lastLink) {
+		lastLink.push(firstPoint);
+	}
+	const finalLink = segmentPoints[segmentPoints.length - 1];
+	if (finalLink && finalLink.length <= 0) {
+		segmentPoints = segmentPoints.slice(0, -1);
+	}
+	return segmentPoints;
+}
+
+function getSinglePolygonPath(points, connectNulls) {
+	let segmentPoints = getParsedPoints(points);
+	if (connectNulls) {
+		segmentPoints = [segmentPoints.reduce((res, segPoints) => [...res, ...segPoints], [])];
+	}
+	const polygonPath = segmentPoints.map(
+		(segPoints) => segPoints.reduce(
+			(path, point, index) => path + (index === 0 ? 'M' : 'L') + round(point.x) + ',' +
+				round(point.y),
+			'',
+		),
+	).join('');
+	return segmentPoints.length === 1 ? polygonPath + 'Z' : polygonPath;
+}
+
+function getRanglePath(points, baseLinePoints, connectNulls) {
+	const outerPath = getSinglePolygonPath(points, connectNulls);
+	return (outerPath.slice(-1) === 'Z' ? outerPath.slice(0, -1) : outerPath) + 'L' +
+		getSinglePolygonPath(Array.from(baseLinePoints).reverse(), connectNulls).slice(1);
+}
+
+export function Polygon(props) {
+	const { points, className, baseLinePoints, connectNulls, ...others } = props;
+	if (!points || !points.length) {
+		return null;
+	}
+	const layerClass = clsx('recharts-polygon', className);
+	if (baseLinePoints && baseLinePoints.length) {
+		const hasStroke = others.stroke && others.stroke !== 'none';
+		const rangePath = getRanglePath(points, baseLinePoints, connectNulls);
+		return <g className={layerClass}>
+			<path
+				{...svgPropertiesAndEvents(others)}
+				fill={rangePath.slice(-1) === 'Z' ? others.fill : 'none'}
+				stroke="none"
+				d={rangePath}
+			/>
+			{hasStroke
+				? <path
+						{...svgPropertiesAndEvents(others)}
+						fill="none"
+						d={getSinglePolygonPath(points, connectNulls)}
+					/>
+				: null}
+			{hasStroke
+				? <path
+						{...svgPropertiesAndEvents(others)}
+						fill="none"
+						d={getSinglePolygonPath(baseLinePoints, connectNulls)}
+					/>
+				: null}
+		</g>;
+	}
+	const singlePath = getSinglePolygonPath(points, connectNulls);
+	return <path
+		{...svgPropertiesAndEvents(others)}
+		fill={singlePath.slice(-1) === 'Z' ? others.fill : 'none'}
+		className={layerClass}
+		d={singlePath}
+	/>;
+}

package/src/shape/Polygon.tsrx.d.ts

@@ -0,0 +1,13 @@
+// Type declaration for the .tsrx component (resolved by relative path).
+export interface PolygonPoint {
+	x: number;
+	y: number;
+}
+export interface PolygonProps {
+	points?: ReadonlyArray<PolygonPoint>;
+	baseLinePoints?: ReadonlyArray<PolygonPoint>;
+	connectNulls?: boolean;
+	className?: unknown;
+	[key: string]: unknown;
+}
+export declare const Polygon: (props: PolygonProps) => unknown;

package/src/shape/Rectangle.tsrx

@@ -0,0 +1,162 @@
+// Port of shape/Rectangle.tsx — a rectangle path with per-corner rounding.
+// Phase 0 ports the STATIC path (isUpdateAnimationActive defaults false, and
+// standalone Rectangles never animate); the width/height update animation and
+// the getTotalLength entrance dash arrive with the Phase 5 animation port.
+// Path strings must be BYTE-IDENTICAL to upstream: recharts builds them via
+// roundTemplateLiteral (every interpolated number rounded to 4dp, template
+// whitespace/newlines preserved verbatim) — mirrored exactly here.
+import { clsx } from 'clsx';
+import { resolveDefaultProps } from '../util/resolveDefaultProps';
+import { round } from '../util/round';
+import { svgPropertiesAndEvents } from '../util/svgPropertiesAndEvents.ts';
+
+function getRectanglePath(x, y, width, height, radius) {
+	const roundedWidth = round(width);
+	const roundedHeight = round(height);
+	const maxRadius = Math.min(Math.abs(roundedWidth) / 2, Math.abs(roundedHeight) / 2);
+	const ySign =
+		roundedHeight >= 0 ? 1 : -1;
+	const xSign =
+		roundedWidth >= 0 ? 1 : -1;
+	const clockWise =
+		roundedHeight >= 0 && roundedWidth >= 0 || roundedHeight < 0 && roundedWidth < 0 ? 1 : 0;
+	let path;
+
+	if (maxRadius > 0 && Array.isArray(radius)) {
+		const newRadius = [0, 0, 0, 0];
+		for (let i = 0; i < 4; i++) {
+			const r = radius[i] ?? 0;
+			newRadius[i] = r > maxRadius ? maxRadius : r;
+		}
+		// roundTemplateLiteral`M${…},${…}` etc. — values rounded, whitespace verbatim.
+		path = 'M' + round(x) + ',' + round(y + ySign * newRadius[0]);
+		if (newRadius[0] > 0) {
+			path += 'A ' + round(newRadius[0]) + ',' + round(newRadius[0]) + ',0,0,' + round(clockWise) +
+				',' +
+				round(x + xSign * newRadius[0]) +
+				',' +
+			round(y);
+		}
+		path += 'L ' + round(x + width - xSign * newRadius[1]) + ',' + round(y);
+		if (newRadius[1] > 0) {
+			path += 'A ' + round(newRadius[1]) + ',' + round(newRadius[1]) + ',0,0,' + round(clockWise) +
+				',\n        ' +
+				round(x + width) +
+				',' +
+			round(y + ySign * newRadius[1]);
+		}
+		path += 'L ' + round(x + width) + ',' + round(y + height - ySign * newRadius[2]);
+		if (newRadius[2] > 0) {
+			path += 'A ' + round(newRadius[2]) + ',' + round(newRadius[2]) + ',0,0,' + round(clockWise) +
+				',\n        ' +
+				round(x + width - xSign * newRadius[2]) +
+				',' +
+			round(y + height);
+		}
+		path += 'L ' + round(x + xSign * newRadius[3]) + ',' + round(y + height);
+		if (newRadius[3] > 0) {
+			path += 'A ' + round(newRadius[3]) + ',' + round(newRadius[3]) + ',0,0,' + round(clockWise) +
+				',\n        ' +
+				round(x) +
+				',' +
+			round(y + height - ySign * newRadius[3]);
+		}
+		path += 'Z';
+	} else if (maxRadius > 0 && radius === +radius && radius > 0) {
+		const r = Math.min(maxRadius, radius);
+		path = 'M ' + round(x) + ',' + round(y + ySign * r) + '\n            A ' + round(r) + ',' +
+			round(r) +
+			',0,0,' +
+			round(clockWise) +
+			',' +
+			round(x + xSign * r) +
+			',' +
+			round(y) +
+			'\n            L ' +
+			round(x + width - xSign * r) +
+			',' +
+			round(y) +
+			'\n            A ' +
+			round(r) +
+			',' +
+			round(r) +
+			',0,0,' +
+			round(clockWise) +
+			',' +
+			round(x + width) +
+			',' +
+			round(y + ySign * r) +
+			'\n            L ' +
+			round(x + width) +
+			',' +
+			round(y + height - ySign * r) +
+			'\n            A ' +
+			round(r) +
+			',' +
+			round(r) +
+			',0,0,' +
+			round(clockWise) +
+			',' +
+			round(x + width - xSign * r) +
+			',' +
+			round(y + height) +
+			'\n            L ' +
+			round(x + xSign * r) +
+			',' +
+			round(y + height) +
+			'\n            A ' +
+			round(r) +
+			',' +
+			round(r) +
+			',0,0,' +
+			round(clockWise) +
+			',' +
+			round(x) +
+			',' +
+			round(y + height - ySign * r) +
+		' Z';
+	} else {
+		path = 'M ' + round(x) + ',' + round(y) + ' h ' + round(width) + ' v ' + round(height) + ' h ' +
+			round(-width) +
+		' Z';
+	}
+	return path;
+}
+
+export const defaultRectangleProps = {
+	x: 0,
+	y: 0,
+	width: 0,
+	height: 0,
+	radius: 0,
+	isAnimationActive: false,
+	isUpdateAnimationActive: false,
+	animationBegin: 0,
+	animationDuration: 1500,
+	animationEasing: 'ease',
+};
+
+export function Rectangle(rectangleProps) {
+	const props = resolveDefaultProps(rectangleProps, defaultRectangleProps);
+	const { x, y, width, height, radius, className } = props;
+
+	if (
+		x !== +x || y !== +y || width !== +width || height !== +height || width === 0 || height === 0
+	) {
+		return null;
+	}
+	const layerClass = clsx('recharts-rectangle', className);
+
+	// Static path — the update-animation branch is a Phase 5 port.
+	const { radius: _radius, ...otherPathProps } = svgPropertiesAndEvents(props);
+	return <path
+		{...otherPathProps}
+		x={round(x)}
+		y={round(y)}
+		width={round(width)}
+		height={round(height)}
+		radius={typeof radius === 'number' ? radius : undefined}
+		className={layerClass}
+		d={getRectanglePath(x, y, width, height, radius)}
+	/>;
+}

package/src/shape/Rectangle.tsrx.d.ts

@@ -0,0 +1,31 @@
+// Type declaration for the .tsrx component (resolved by relative path).
+export interface RectangleProps {
+	x?: number;
+	y?: number;
+	width?: number;
+	height?: number;
+	radius?: number | [number, number, number, number];
+	className?: unknown;
+	isAnimationActive?: boolean;
+	isUpdateAnimationActive?: boolean;
+	animationBegin?: number;
+	animationDuration?: number;
+	animationEasing?: string;
+	[key: string]: unknown;
+}
+export declare const defaultRectangleProps: Required<
+	Pick<
+		RectangleProps,
+		| 'x'
+		| 'y'
+		| 'width'
+		| 'height'
+		| 'radius'
+		| 'isAnimationActive'
+		| 'isUpdateAnimationActive'
+		| 'animationBegin'
+		| 'animationDuration'
+		| 'animationEasing'
+	>
+>;
+export declare const Rectangle: (props: RectangleProps) => unknown;