@octanejs/recharts 0.1.0

package/src/component/Text.tsrx

@@ -0,0 +1,281 @@
+// Port of component/Text.tsx — the SVG text renderer with word wrapping,
+// maxLines binary-search truncation, scaleToFit, and rotation. Measurement
+// runs through the vendored getStringSize (0×0 under SSR, so SSR renders the
+// unwrapped single line — same as upstream).
+import { useMemo } from 'octane';
+import { clsx } from 'clsx';
+import { isNullish, isNumber, isNumOrStr } from '../util/DataUtils';
+import { Global } from '../util/Global';
+import { getStringSize } from '../util/DOMUtils';
+import { reduceCSSCalc } from '../util/ReduceCSSCalc';
+import { svgPropertiesAndEvents } from '../util/svgPropertiesAndEvents.ts';
+import { resolveDefaultProps } from '../util/resolveDefaultProps';
+import { isWellBehavedNumber } from '../util/isWellBehavedNumber';
+
+const BREAKING_SPACES = /[ \f\n\r\t\v\u2028\u2029]+/;
+
+const calculateWordWidths = ({ children, breakAll, style }) => {
+	try {
+		let words = [];
+		if (!isNullish(children)) {
+			if (breakAll) {
+				words = children.toString().split('');
+			} else {
+				words = children.toString().split(BREAKING_SPACES);
+			}
+		}
+		const wordsWithComputedWidth = words.map(
+			(word) => ({
+				word,
+				width: getStringSize(word, style).width,
+			}),
+		);
+		const spaceWidth = breakAll ? 0 : getStringSize(' ', style).width;
+		return { wordsWithComputedWidth, spaceWidth };
+	} catch {
+		return null;
+	}
+};
+
+export function isValidTextAnchor(value) {
+	return value === 'start' || value === 'middle' || value === 'end' || value === 'inherit';
+}
+
+export function isRenderableText(val) {
+	return isNullish(val) || typeof val === 'string' || typeof val === 'number' ||
+		typeof val === 'boolean';
+}
+
+const calculate = (words, lineWidth, spaceWidth, scaleToFit) => words.reduce((
+	result,
+	{ word, width },
+) => {
+	const currentLine = result[result.length - 1];
+	if (
+		currentLine && width != null &&
+			(lineWidth == null || scaleToFit ||
+				currentLine.width + width + spaceWidth < Number(lineWidth))
+	) {
+		// Word can be added to an existing line
+		currentLine.words.push(word);
+		currentLine.width += width + spaceWidth;
+	} else {
+		// Add first word to line or word is too long to scaleToFit on existing line
+		result.push({ words: [word], width });
+	}
+	return result;
+}, []);
+
+const findLongestLine = (words) => words.reduce((a, b) => (a.width > b.width ? a : b));
+
+const suffix = '…';
+
+const checkOverflow = (
+	text,
+	index,
+	breakAll,
+	style,
+	maxLines,
+	lineWidth,
+	spaceWidth,
+	scaleToFit,
+) => {
+	const tempText = text.slice(0, index);
+	const words = calculateWordWidths({ breakAll, style, children: tempText + suffix });
+	if (!words) {
+		return [false, []];
+	}
+	const result = calculate(words.wordsWithComputedWidth, lineWidth, spaceWidth, scaleToFit);
+	const doesOverflow =
+		result.length > maxLines || findLongestLine(result).width > Number(lineWidth);
+	return [doesOverflow, result];
+};
+
+const calculateWordsByLines = (
+	{ maxLines, children, style, breakAll },
+	initialWordsWithComputedWith,
+	spaceWidth,
+	lineWidth,
+	scaleToFit,
+) => {
+	const shouldLimitLines = isNumber(maxLines);
+	const text = String(children);
+	const originalResult = calculate(initialWordsWithComputedWith, lineWidth, spaceWidth, scaleToFit);
+	if (!shouldLimitLines || scaleToFit) {
+		return originalResult;
+	}
+	const overflows =
+		originalResult.length > maxLines || findLongestLine(originalResult).width > Number(lineWidth);
+	if (!overflows) {
+		return originalResult;
+	}
+	let start = 0;
+	let end = text.length - 1;
+	let iterations = 0;
+	let trimmedResult;
+	while (start <= end && iterations <= text.length - 1) {
+		const middle = Math.floor((start + end) / 2);
+		const prev = middle - 1;
+		const [doesPrevOverflow, result] = checkOverflow(
+			text,
+			prev,
+			breakAll,
+			style,
+			maxLines,
+			lineWidth,
+			spaceWidth,
+			scaleToFit,
+		);
+		const [doesMiddleOverflow] = checkOverflow(
+			text,
+			middle,
+			breakAll,
+			style,
+			maxLines,
+			lineWidth,
+			spaceWidth,
+			scaleToFit,
+		);
+		if (!doesPrevOverflow && !doesMiddleOverflow) {
+			start = middle + 1;
+		}
+		if (doesPrevOverflow && doesMiddleOverflow) {
+			end = middle - 1;
+		}
+		if (!doesPrevOverflow && doesMiddleOverflow) {
+			trimmedResult = result;
+			break;
+		}
+		iterations++;
+	}
+	// Fallback to originalResult (result without trimming) if we cannot find
+	// where to trim. This should not happen :tm:
+	return trimmedResult || originalResult;
+};
+
+const getWordsWithoutCalculate = (children) => {
+	const words =
+		!isNullish(children) ? children.toString().split(BREAKING_SPACES) : [];
+	return [
+		{ words, width: undefined },
+	];
+};
+
+export const getWordsByLines = ({ width, scaleToFit, children, style, breakAll, maxLines }) => {
+	// Only perform calculations if using features that require them (multiline, scaleToFit)
+	if ((width || scaleToFit) && !Global.isSsr) {
+		const wordWidths = calculateWordWidths({ breakAll, children, style });
+		if (!wordWidths) {
+			return getWordsWithoutCalculate(children);
+		}
+		const { wordsWithComputedWidth, spaceWidth } = wordWidths;
+		return calculateWordsByLines(
+			{ breakAll, children, maxLines, style },
+			wordsWithComputedWidth,
+			spaceWidth,
+			width,
+			Boolean(scaleToFit),
+		);
+	}
+	return getWordsWithoutCalculate(children);
+};
+
+const DEFAULT_FILL = '#808080';
+
+export const textDefaultProps = {
+	angle: 0,
+	breakAll: false,
+	// Magic number from d3
+	capHeight: '0.71em',
+	fill: DEFAULT_FILL,
+	lineHeight: '1em',
+	scaleToFit: false,
+	textAnchor: 'start',
+	// Maintain compat with existing charts / default SVG behavior
+	verticalAnchor: 'end',
+	x: 0,
+	y: 0,
+};
+
+export function Text(outsideProps) @{
+	const {
+		x: propsX,
+		y: propsY,
+		lineHeight,
+		capHeight,
+		fill,
+		scaleToFit,
+		textAnchor,
+		verticalAnchor,
+		ref,
+		...props
+	} = resolveDefaultProps(outsideProps, textDefaultProps);
+	const wordsByLines = useMemo(() => {
+		return getWordsByLines({
+			breakAll: props.breakAll,
+			children: props.children,
+			maxLines: props.maxLines,
+			scaleToFit,
+			style: props.style,
+			width: props.width,
+		});
+	}, [props.breakAll, props.children, props.maxLines, scaleToFit, props.style, props.width]);
+	const { dx, dy, angle, className, breakAll, ...textProps } = props;
+	if (!isNumOrStr(propsX) || !isNumOrStr(propsY) || wordsByLines.length === 0) {
+		return null;
+	}
+	const x = Number(propsX) + (isNumber(dx) ? dx : 0);
+	const y = Number(propsY) + (isNumber(dy) ? dy : 0);
+	if (!isWellBehavedNumber(x) || !isWellBehavedNumber(y)) {
+		return null;
+	}
+	let startDy;
+	switch (verticalAnchor) {
+		case 'start':
+			startDy = reduceCSSCalc('calc(' + capHeight + ')');
+			break;
+		case 'middle':
+			startDy = reduceCSSCalc(
+				'calc(' + (wordsByLines.length - 1) / 2 + ' * -' + lineHeight + ' + (' + capHeight +
+					' / 2))',
+			);
+			break;
+		default:
+			startDy = reduceCSSCalc('calc(' + (wordsByLines.length - 1) + ' * -' + lineHeight + ')');
+			break;
+	}
+	const transforms = [];
+	const firstLine = wordsByLines[0];
+	if (scaleToFit && firstLine != null) {
+		const lineWidth = firstLine.width;
+		const { width } = props;
+		transforms.push(
+			'scale(' + (isNumber(width) && isNumber(lineWidth) ? width / lineWidth : 1) + ')',
+		);
+	}
+	if (angle) {
+		transforms.push('rotate(' + angle + ', ' + x + ', ' + y + ')');
+	}
+	if (transforms.length) {
+		textProps.transform = transforms.join(' ');
+	}
+	<text
+		{...svgPropertiesAndEvents(textProps)}
+		ref={ref}
+		x={x}
+		y={y}
+		class={clsx('recharts-text', className)}
+		textAnchor={textAnchor}
+		fill={fill.includes('url') ? DEFAULT_FILL : fill}
+	>{wordsByLines.map((line, index) => {
+		const words = line.words.join(breakAll ? '' : ' ');
+		// duplicate words would cause duplicate keys — the index disambiguates
+		return <tspan
+			x={x}
+			dy={index === 0 ? startDy : lineHeight}
+			key={words + '-' + index}
+		>{words}</tspan>;
+	})}</text>
+}
+
+Text.displayName = 'Text';

package/src/component/Text.tsrx.d.ts

@@ -0,0 +1,9 @@
+// Type declaration for the .tsrx component (resolved by relative path).
+export declare const textDefaultProps: Record<string, unknown>;
+export declare const Text: {
+	(props: Record<string, unknown>): unknown;
+	displayName: string;
+};
+export declare function isValidTextAnchor(value: unknown): boolean;
+export declare function isRenderableText(val: unknown): boolean;
+export declare const getWordsByLines: (input: Record<string, unknown>) => unknown[];

package/src/component/responsiveContainerUtils.js

@@ -0,0 +1,111 @@
+// Vendored verbatim from recharts@3.9.2 es6/component/responsiveContainerUtils.js (framework-agnostic).
+// Do not edit — update by re-vendoring when the recharts devDependency moves.
+import { isPercent } from '../util/DataUtils';
+export var defaultResponsiveContainerProps = {
+	width: '100%',
+	height: '100%',
+	debounce: 0,
+	minWidth: 0,
+	initialDimension: {
+		width: -1,
+		height: -1,
+	},
+};
+export var calculateChartDimensions = (containerWidth, containerHeight, props) => {
+	var _props$width = props.width,
+		width = _props$width === void 0 ? defaultResponsiveContainerProps.width : _props$width,
+		_props$height = props.height,
+		height = _props$height === void 0 ? defaultResponsiveContainerProps.height : _props$height,
+		aspect = props.aspect,
+		maxHeight = props.maxHeight;
+
+	/*
+	 * The containerWidth and containerHeight are already percentage based because it's set as that percentage in CSS.
+	 * Means we don't have to calculate percentages here.
+	 */
+	var calculatedWidth = isPercent(width) ? containerWidth : Number(width);
+	var calculatedHeight = isPercent(height) ? containerHeight : Number(height);
+	if (aspect && aspect > 0) {
+		// Preserve the desired aspect ratio
+		if (calculatedWidth) {
+			// Will default to using width for aspect ratio
+			calculatedHeight = calculatedWidth / aspect;
+		} else if (calculatedHeight) {
+			// But we should also take height into consideration
+			calculatedWidth = calculatedHeight * aspect;
+		}
+
+		// if maxHeight is set, overwrite if calculatedHeight is greater than maxHeight
+		if (maxHeight && calculatedHeight != null && calculatedHeight > maxHeight) {
+			calculatedHeight = maxHeight;
+		}
+	}
+	return {
+		calculatedWidth,
+		calculatedHeight,
+	};
+};
+var bothOverflow = {
+	width: 0,
+	height: 0,
+	overflow: 'visible',
+};
+var overflowX = {
+	width: 0,
+	overflowX: 'visible',
+};
+var overflowY = {
+	height: 0,
+	overflowY: 'visible',
+};
+var noStyle = {};
+
+/**
+ * This zero-size, overflow-visible is required to allow the chart to shrink.
+ * Without it, the chart itself will fill the ResponsiveContainer, and while it allows the chart to grow,
+ * it would always keep the container at the size of the chart,
+ * and ResizeObserver would never fire.
+ * With this zero-size element, the chart itself never actually fills the container,
+ * it just so happens that it is visible because it overflows.
+ * I learned this trick from the `react-virtualized` library: https://github.com/bvaughn/react-virtualized-auto-sizer/blob/master/src/AutoSizer.ts
+ * See https://github.com/recharts/recharts/issues/172 and also https://github.com/bvaughn/react-virtualized/issues/68
+ *
+ * Also, we don't need to apply the zero-size style if the dimension is a fixed number (or undefined),
+ * because in that case the chart can't shrink in that dimension anyway.
+ * This fixes defining the dimensions using aspect ratio: https://github.com/recharts/recharts/issues/6245
+ */
+export var getInnerDivStyle = (props) => {
+	var width = props.width,
+		height = props.height;
+	var isWidthPercent = isPercent(width);
+	var isHeightPercent = isPercent(height);
+	if (isWidthPercent && isHeightPercent) {
+		return bothOverflow;
+	}
+	if (isWidthPercent) {
+		return overflowX;
+	}
+	if (isHeightPercent) {
+		return overflowY;
+	}
+	return noStyle;
+};
+export function getDefaultWidthAndHeight(_ref) {
+	var width = _ref.width,
+		height = _ref.height,
+		aspect = _ref.aspect;
+	var calculatedWidth = width;
+	var calculatedHeight = height;
+	if (calculatedWidth === undefined && calculatedHeight === undefined) {
+		calculatedWidth = defaultResponsiveContainerProps.width;
+		calculatedHeight = defaultResponsiveContainerProps.height;
+	} else if (calculatedWidth === undefined) {
+		calculatedWidth = aspect && aspect > 0 ? undefined : defaultResponsiveContainerProps.width;
+	} else if (calculatedHeight === undefined) {
+		calculatedHeight = aspect && aspect > 0 ? undefined : defaultResponsiveContainerProps.height;
+	}
+	return {
+		width: calculatedWidth,
+		height: calculatedHeight,
+	};
+}

package/src/container/ClipPathProvider.tsrx

@@ -0,0 +1,29 @@
+// Port of container/ClipPathProvider.tsx — mints the chart's clip path id,
+// renders the <defs><clipPath> sized to the plot area, and provides the id.
+import { createContext, useContext, useState } from 'octane';
+import { uniqueId } from '../util/DataUtils';
+import { usePlotArea } from '../hooks';
+
+const ClipPathIdContext = createContext(undefined);
+
+export function ClipPathProvider(props) @{
+	const { children } = props;
+	const [clipPathId] = useState(uniqueId('recharts') + '-clip');
+	const plotArea = usePlotArea();
+	if (plotArea == null) {
+		return null;
+	}
+	const { x, y, width, height } = plotArea;
+	<ClipPathIdContext.Provider value={clipPathId}>
+		<defs>
+			<clipPath id={clipPathId}>
+				<rect x={x} y={y} height={height} width={width} />
+			</clipPath>
+		</defs>
+		{children}
+	</ClipPathIdContext.Provider>
+}
+
+export const useClipPathId = () => {
+	return useContext(ClipPathIdContext);
+};

package/src/container/Layer.tsrx

@@ -0,0 +1,9 @@
+// Port of container/Layer.tsx — an SVG <g> group. Ref is a plain prop.
+import { clsx } from 'clsx';
+import { svgPropertiesAndEvents } from '../util/svgPropertiesAndEvents.ts';
+
+export function Layer(props) {
+	const { children, className, ref, ...others } = props;
+	const layerClass = clsx('recharts-layer', className);
+	return <g className={layerClass} {...svgPropertiesAndEvents(others)} ref={ref}>{children}</g>;
+}

package/src/container/Layer.tsrx.d.ts

@@ -0,0 +1,6 @@
+// Type declaration for the .tsrx component (resolved by relative path).
+export declare const Layer: (props: {
+	className?: unknown;
+	children?: unknown;
+	[key: string]: unknown;
+}) => unknown;

package/src/container/RootSurface.tsrx

@@ -0,0 +1,76 @@
+// Port of container/RootSurface.tsx — the chart's outer <svg> (via Surface),
+// sized from the store, with the zIndex portal <g>s wrapped around children.
+// A panorama (Brush preview) renders a nested, brush-sized Surface instead.
+import { useChartHeight, useChartWidth } from '../context/chartLayoutContext.ts';
+import { useAccessibilityLayer } from '../context/accessibilityContext';
+import { useIsPanorama } from '../context/PanoramaContext.ts';
+import { Surface } from './Surface.tsrx';
+import { useAppSelector } from '../state/hooks';
+import { selectBrushDimensions } from '../state/selectors/brushSelectors';
+import { isPositiveNumber } from '../util/isWellBehavedNumber';
+import { AllZIndexPortals } from '../zIndex/ZIndexPortal.tsrx';
+
+const FULL_WIDTH_AND_HEIGHT = {
+	width: '100%',
+	height: '100%',
+	// display:block — the default inline SVG reserves descender space in some
+	// browsers, which inflates height measurement under responsive containers.
+	display: 'block',
+};
+
+function MainChartSurface(props) {
+	const width = useChartWidth();
+	const height = useChartHeight();
+	const hasAccessibilityLayer = useAccessibilityLayer();
+	if (!isPositiveNumber(width) || !isPositiveNumber(height)) {
+		return null;
+	}
+	const { children, otherAttributes, title, desc, ref } = props;
+	let tabIndex, role;
+	if (otherAttributes != null) {
+		if (typeof otherAttributes.tabIndex === 'number') {
+			tabIndex = otherAttributes.tabIndex;
+		} else {
+			tabIndex = hasAccessibilityLayer ? 0 : undefined;
+		}
+		if (typeof otherAttributes.role === 'string') {
+			role = otherAttributes.role;
+		} else {
+			role = hasAccessibilityLayer ? 'application' : undefined;
+		}
+	}
+	return <Surface
+		{...otherAttributes}
+		title={title}
+		desc={desc}
+		role={role}
+		tabIndex={tabIndex}
+		width={width}
+		height={height}
+		style={FULL_WIDTH_AND_HEIGHT}
+		ref={ref}
+	>{children}</Surface>;
+}
+
+function BrushPanoramaSurface(props) {
+	const { children } = props;
+	const brushDimensions = useAppSelector(selectBrushDimensions);
+	if (!brushDimensions) {
+		return null;
+	}
+	const { width, height, y, x } = brushDimensions;
+	return <Surface width={width} height={height} x={x} y={y}>{children}</Surface>;
+}
+
+export function RootSurface(props) {
+	const { children, ref, ...rest } = props;
+	const isPanorama = useIsPanorama();
+	if (isPanorama) {
+		return <BrushPanoramaSurface>
+			<AllZIndexPortals isPanorama={true}>{children}</AllZIndexPortals>
+		</BrushPanoramaSurface>;
+	}
+	return <MainChartSurface ref={ref} {...rest}>
+		<AllZIndexPortals isPanorama={false}>{children}</AllZIndexPortals>
+	</MainChartSurface>;
+}

package/src/container/Surface.tsrx

@@ -0,0 +1,23 @@
+// Port of container/Surface.tsx — the root <svg> element every chart renders
+// into. Ref is a plain prop (octane model, no forwardRef).
+import { clsx } from 'clsx';
+import { svgPropertiesAndEvents } from '../util/svgPropertiesAndEvents.ts';
+
+export function Surface(props) {
+	const { children, width, height, viewBox, className, style, title, desc, ref, ...others } = props;
+	const svgView = viewBox || { width, height, x: 0, y: 0 };
+	const layerClass = clsx('recharts-surface', className);
+	return <svg
+		{...svgPropertiesAndEvents(others)}
+		className={layerClass}
+		width={width}
+		height={height}
+		style={style}
+		viewBox={svgView.x + ' ' + svgView.y + ' ' + svgView.width + ' ' + svgView.height}
+		ref={ref}
+	>
+		<title>{title}</title>
+		<desc>{desc}</desc>
+		{children}
+	</svg>;
+}

package/src/container/Surface.tsrx.d.ts

@@ -0,0 +1,12 @@
+// Type declaration for the .tsrx component (resolved by relative path).
+export declare const Surface: (props: {
+	width: number;
+	height: number;
+	viewBox?: { x?: number; y?: number; width?: number; height?: number };
+	className?: unknown;
+	style?: unknown;
+	title?: string;
+	desc?: string;
+	children?: unknown;
+	[key: string]: unknown;
+}) => unknown;

package/src/context/CellsContext.ts

@@ -0,0 +1,80 @@
+// octane-only (no upstream counterpart): Cell props collection by
+// REGISTRATION. React recharts reads `<Cell>` children via findAllByType —
+// element introspection that octane's compiled children (opaque block
+// functions) cannot support. Instead, octane Cells REGISTER their props into
+// this collector when rendered, mirroring the redux-registration pattern
+// recharts v3 itself adopted for every other child type. Registration order is
+// mount order, which octane guarantees follows tree order (sibling layout
+// effects run in order), so indexes line up with data indexes exactly like the
+// upstream element order did.
+import { createContext, useContext, useMemo, useState } from 'octane';
+import { splitSlot, subSlot } from '../internal';
+
+export interface CellRegistry {
+	register(token: object, props: unknown): void;
+	unregister(token: object): void;
+}
+
+/** The shape upstream's `cells[index].props` access expects. */
+export interface RegisteredCell {
+	props: unknown;
+}
+
+export const CellsContext = createContext<CellRegistry | null>(null);
+
+function toCellArray(map: Map<object, unknown>): RegisteredCell[] | undefined {
+	if (map.size === 0) {
+		return undefined;
+	}
+	return Array.from(map.values(), (props) => ({ props }));
+}
+
+/**
+ * Owns the collected cells state. Returns `[cells, registry]`; provide the
+ * registry via `<CellsContext.Provider value={registry}>` around the item's
+ * children, and pass `cells` wherever upstream passed findAllByType's result.
+ * `cells` is `undefined` until the first Cell registers — matching upstream,
+ * where a childless item passes an empty find result whose `cells[index]`
+ * lookups are all undefined.
+ */
+export function useCellRegistry(...rest: any[]): [RegisteredCell[] | undefined, CellRegistry] {
+	const [, slot] = splitSlot(rest);
+	const [cells, setCells] = useState<RegisteredCell[] | undefined>(
+		undefined,
+		subSlot(slot, 'cr:s'),
+	);
+	const registry = useMemo(
+		() => {
+			const entries = new Map<object, unknown>();
+			let scheduled = false;
+			const publish = () => {
+				if (scheduled) return;
+				scheduled = true;
+				// One state update per commit no matter how many cells registered.
+				queueMicrotask(() => {
+					scheduled = false;
+					setCells(toCellArray(entries));
+				});
+			};
+			return {
+				register(token: object, props: unknown) {
+					entries.set(token, props);
+					publish();
+				},
+				unregister(token: object) {
+					entries.delete(token);
+					publish();
+				},
+			};
+		},
+		[],
+		subSlot(slot, 'cr:m'),
+	);
+	return [cells, registry];
+}
+
+/** Read the ambient registry (null outside a cell-collecting graphical item). */
+export function useCellsRegistry(): CellRegistry | null {
+	// Context reads resolve by walking the block tree — no slot needed.
+	return useContext(CellsContext);
+}