@octanejs/recharts 0.1.0

package/src/util/svgPropertiesNoEvents.js

@@ -0,0 +1,383 @@
+// Vendored from recharts@3.9.2 es6/util/svgPropertiesNoEvents.js with ONE
+// adaptation: `isValidElement` comes from octane (this file inspects OCTANE
+// element descriptors at runtime, not React elements). Everything else is
+// verbatim — update by re-vendoring when the recharts devDependency moves.
+import { isValidElement } from 'octane';
+var SVGElementPropKeys = [
+	'aria-activedescendant',
+	'aria-atomic',
+	'aria-autocomplete',
+	'aria-busy',
+	'aria-checked',
+	'aria-colcount',
+	'aria-colindex',
+	'aria-colspan',
+	'aria-controls',
+	'aria-current',
+	'aria-describedby',
+	'aria-details',
+	'aria-disabled',
+	'aria-errormessage',
+	'aria-expanded',
+	'aria-flowto',
+	'aria-haspopup',
+	'aria-hidden',
+	'aria-invalid',
+	'aria-keyshortcuts',
+	'aria-label',
+	'aria-labelledby',
+	'aria-level',
+	'aria-live',
+	'aria-modal',
+	'aria-multiline',
+	'aria-multiselectable',
+	'aria-orientation',
+	'aria-owns',
+	'aria-placeholder',
+	'aria-posinset',
+	'aria-pressed',
+	'aria-readonly',
+	'aria-relevant',
+	'aria-required',
+	'aria-roledescription',
+	'aria-rowcount',
+	'aria-rowindex',
+	'aria-rowspan',
+	'aria-selected',
+	'aria-setsize',
+	'aria-sort',
+	'aria-valuemax',
+	'aria-valuemin',
+	'aria-valuenow',
+	'aria-valuetext',
+	'className',
+	'color',
+	'height',
+	'id',
+	'lang',
+	'max',
+	'media',
+	'method',
+	'min',
+	'name',
+	'style',
+	/*
+	 * removed 'type' SVGElementPropKey because we do not currently use any SVG elements
+	 * that can use it, and it conflicts with the recharts prop 'type'
+	 * https://github.com/recharts/recharts/pull/3327
+	 * https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/type
+	 */
+	// 'type',
+	'target',
+	'width',
+	'role',
+	'tabIndex',
+	'accentHeight',
+	'accumulate',
+	'additive',
+	'alignmentBaseline',
+	'allowReorder',
+	'alphabetic',
+	'amplitude',
+	'arabicForm',
+	'ascent',
+	'attributeName',
+	'attributeType',
+	'autoReverse',
+	'azimuth',
+	'baseFrequency',
+	'baselineShift',
+	'baseProfile',
+	'bbox',
+	'begin',
+	'bias',
+	'by',
+	'calcMode',
+	'capHeight',
+	'clip',
+	'clipPath',
+	'clipPathUnits',
+	'clipRule',
+	'colorInterpolation',
+	'colorInterpolationFilters',
+	'colorProfile',
+	'colorRendering',
+	'contentScriptType',
+	'contentStyleType',
+	'cursor',
+	'cx',
+	'cy',
+	'd',
+	'decelerate',
+	'descent',
+	'diffuseConstant',
+	'direction',
+	'display',
+	'divisor',
+	'dominantBaseline',
+	'dur',
+	'dx',
+	'dy',
+	'edgeMode',
+	'elevation',
+	'enableBackground',
+	'end',
+	'exponent',
+	'externalResourcesRequired',
+	'fill',
+	'fillOpacity',
+	'fillRule',
+	'filter',
+	'filterRes',
+	'filterUnits',
+	'floodColor',
+	'floodOpacity',
+	'focusable',
+	'fontFamily',
+	'fontSize',
+	'fontSizeAdjust',
+	'fontStretch',
+	'fontStyle',
+	'fontVariant',
+	'fontWeight',
+	'format',
+	'from',
+	'fx',
+	'fy',
+	'g1',
+	'g2',
+	'glyphName',
+	'glyphOrientationHorizontal',
+	'glyphOrientationVertical',
+	'glyphRef',
+	'gradientTransform',
+	'gradientUnits',
+	'hanging',
+	'horizAdvX',
+	'horizOriginX',
+	'href',
+	'ideographic',
+	'imageRendering',
+	'in2',
+	'in',
+	'intercept',
+	'k1',
+	'k2',
+	'k3',
+	'k4',
+	'k',
+	'kernelMatrix',
+	'kernelUnitLength',
+	'kerning',
+	'keyPoints',
+	'keySplines',
+	'keyTimes',
+	'lengthAdjust',
+	'letterSpacing',
+	'lightingColor',
+	'limitingConeAngle',
+	'local',
+	'markerEnd',
+	'markerHeight',
+	'markerMid',
+	'markerStart',
+	'markerUnits',
+	'markerWidth',
+	'mask',
+	'maskContentUnits',
+	'maskUnits',
+	'mathematical',
+	'mode',
+	'numOctaves',
+	'offset',
+	'opacity',
+	'operator',
+	'order',
+	'orient',
+	'orientation',
+	'origin',
+	'overflow',
+	'overlinePosition',
+	'overlineThickness',
+	'paintOrder',
+	'panose1',
+	'pathLength',
+	'patternContentUnits',
+	'patternTransform',
+	'patternUnits',
+	'pointerEvents',
+	'pointsAtX',
+	'pointsAtY',
+	'pointsAtZ',
+	'preserveAlpha',
+	'preserveAspectRatio',
+	'primitiveUnits',
+	'r',
+	'radius',
+	'refX',
+	'refY',
+	'renderingIntent',
+	'repeatCount',
+	'repeatDur',
+	'requiredExtensions',
+	'requiredFeatures',
+	'restart',
+	'result',
+	'rotate',
+	'rx',
+	'ry',
+	'seed',
+	'shapeRendering',
+	'slope',
+	'spacing',
+	'specularConstant',
+	'specularExponent',
+	'speed',
+	'spreadMethod',
+	'startOffset',
+	'stdDeviation',
+	'stemh',
+	'stemv',
+	'stitchTiles',
+	'stopColor',
+	'stopOpacity',
+	'strikethroughPosition',
+	'strikethroughThickness',
+	'string',
+	'stroke',
+	'strokeDasharray',
+	'strokeDashoffset',
+	'strokeLinecap',
+	'strokeLinejoin',
+	'strokeMiterlimit',
+	'strokeOpacity',
+	'strokeWidth',
+	'surfaceScale',
+	'systemLanguage',
+	'tableValues',
+	'targetX',
+	'targetY',
+	'textAnchor',
+	'textDecoration',
+	'textLength',
+	'textRendering',
+	'to',
+	'transform',
+	'u1',
+	'u2',
+	'underlinePosition',
+	'underlineThickness',
+	'unicode',
+	'unicodeBidi',
+	'unicodeRange',
+	'unitsPerEm',
+	'vAlphabetic',
+	'values',
+	'vectorEffect',
+	'version',
+	'vertAdvY',
+	'vertOriginX',
+	'vertOriginY',
+	'vHanging',
+	'vIdeographic',
+	'viewTarget',
+	'visibility',
+	'vMathematical',
+	'widths',
+	'wordSpacing',
+	'writingMode',
+	'x1',
+	'x2',
+	'x',
+	'xChannelSelector',
+	'xHeight',
+	'xlinkActuate',
+	'xlinkArcrole',
+	'xlinkHref',
+	'xlinkRole',
+	'xlinkShow',
+	'xlinkTitle',
+	'xlinkType',
+	'xmlBase',
+	'xmlLang',
+	'xmlns',
+	'xmlnsXlink',
+	'xmlSpace',
+	'y1',
+	'y2',
+	'y',
+	'yChannelSelector',
+	'z',
+	'zoomAndPan',
+	'ref',
+	'key',
+	'angle',
+];
+var SVGElementPropKeySet = new Set(SVGElementPropKeys);
+export function isSvgElementPropKey(key) {
+	if (typeof key !== 'string') {
+		return false;
+	}
+	return SVGElementPropKeySet.has(key);
+}
+/**
+ * Checks if the property is a data attribute.
+ * @param key The property key.
+ * @returns True if the key starts with 'data-', false otherwise.
+ */
+export function isDataAttribute(key) {
+	return typeof key === 'string' && key.startsWith('data-');
+}
+
+/**
+ * Filters an object to only include SVG properties. Removes all event handlers too.
+ * @param obj - The object to filter
+ * @returns A new object containing only valid SVG properties, excluding event handlers.
+ */
+export function svgPropertiesNoEvents(obj) {
+	if (typeof obj !== 'object' || obj === null) {
+		return {};
+	}
+	var result = {};
+	for (var key in obj) {
+		if (Object.prototype.hasOwnProperty.call(obj, key)) {
+			if (isSvgElementPropKey(key) || isDataAttribute(key)) {
+				result[key] = obj[key];
+			}
+		}
+	}
+	return result;
+}
+
+/**
+ * Function to filter SVG properties from various input types.
+ * The input types can be:
+ * - A record of string keys to any values, in which case it returns a record of only SVG properties
+ * - A React element, in which case it returns the props of the element filtered to only SVG properties
+ * - Anything else, in which case it returns null
+ *
+ * This function has a wide-open return type, because it will read and filter the props of an arbitrary React element.
+ * This can be SVG, HTML, whatnot, with arbitrary values, so we can't type it more specifically.
+ *
+ * If you wish to have a type-safe version, use svgPropertiesNoEvents directly with a typed object.
+ *
+ * @param input - The input to filter, which can be a record, a React element, or other types.
+ * @returns A record of SVG properties if the input is a record or React element, otherwise null.
+ */
+export function svgPropertiesNoEventsFromUnknown(input) {
+	if (input == null) {
+		return null;
+	}
+	if (
+		/*#__PURE__*/ isValidElement(input) &&
+		typeof input.props === 'object' &&
+		input.props !== null
+	) {
+		var p = input.props;
+		return svgPropertiesNoEvents(p);
+	}
+	if (typeof input === 'object' && !Array.isArray(input)) {
+		return svgPropertiesNoEvents(input);
+	}
+	return null;
+}

package/src/util/types.ts

@@ -0,0 +1,59 @@
+// Port of the runtime helpers from recharts' util/types.ts (the file is mostly
+// type definitions; these are the two runtime exports the components use).
+// octane events are NATIVE delegated DOM events — handlers receive the real
+// event, matching the platform (never a synthetic wrapper).
+import { isValidElement } from 'octane';
+import { isEventKey } from '../util/excludeEventProps';
+
+// Collect the event handlers off a props bag (or element), rebinding each to
+// `(e) => handler(props, e)` — recharts item components pass their own props as
+// the first argument of chart-level handlers.
+export function adaptEventHandlers(
+	props: unknown,
+	newHandler?: (e: Event) => void,
+): Record<string, (e: Event) => void> | null {
+	if (!props || typeof props === 'function' || typeof props === 'boolean') {
+		return null;
+	}
+	let inputProps: any = props;
+	if (isValidElement(props)) {
+		inputProps = (props as any).props;
+	}
+	if (typeof inputProps !== 'object' && typeof inputProps !== 'function') {
+		return null;
+	}
+	const out: Record<string, (e: Event) => void> = {};
+	Object.keys(inputProps).forEach((key) => {
+		if (isEventKey(key) && typeof inputProps[key] === 'function') {
+			out[key] = newHandler || ((e: Event) => inputProps[key](inputProps, e));
+		}
+	});
+	return out;
+}
+
+const getEventHandlerOfChild =
+	(originalHandler: (data: any, index: number, e: Event) => void, data: any, index: number) =>
+	(e: Event): null => {
+		originalHandler(data, index, e);
+		return null;
+	};
+
+// Rebind the event handlers off a child's props to `(e) => handler(data, index, e)`.
+export function adaptEventsOfChild(
+	props: Record<string, any>,
+	data: any,
+	index: number,
+): Record<string, (e: Event) => void> | null {
+	if (props === null || typeof props !== 'object') {
+		return null;
+	}
+	let out: Record<string, (e: Event) => void> | null = null;
+	Object.keys(props).forEach((key) => {
+		const item = props[key];
+		if (isEventKey(key) && typeof item === 'function') {
+			if (!out) out = {};
+			out[key] = getEventHandlerOfChild(item, data, index);
+		}
+	});
+	return out;
+}

package/src/util/useAnimationId.ts

@@ -0,0 +1,14 @@
+// Port of util/useAnimationId.ts — a unique id that regenerates whenever the
+// input's reference identity changes (drives re-animation on data change).
+import { useRef } from 'octane';
+import { uniqueId } from './DataUtils';
+
+export function useAnimationId(input: unknown, prefix = 'animation-'): string {
+	const animationId = useRef(uniqueId(prefix));
+	const prevProps = useRef(input);
+	if (prevProps.current !== input) {
+		animationId.current = uniqueId(prefix);
+		prevProps.current = input;
+	}
+	return animationId.current;
+}

package/src/util/useId.ts

@@ -0,0 +1,13 @@
+// Port of util/useId.ts — octane always provides useId (React-18 semantics,
+// SSR/hydration-stable), so the pre-18 fallback collapses to a forwarder. The
+// slot forwarding keeps the hook usable from compiled AND uncompiled callers.
+import { useId as octaneUseId } from 'octane';
+import { splitSlot } from '../internal';
+
+export function useId(...rest: any[]): string {
+	const [, slot] = splitSlot(rest);
+	return octaneUseId(slot);
+}
+
+/** Upstream's pre-React-18 fallback — same implementation here. */
+export const useIdFallback = useId;

package/src/util/usePrefersReducedMotion.ts

@@ -0,0 +1,30 @@
+// Port of util/usePrefersReducedMotion.ts — subscribes to the system
+// `prefers-reduced-motion` preference; SSR-safe (false on the server).
+import { useEffect, useState } from 'octane';
+import { Global } from './Global';
+
+export function usePrefersReducedMotion(): boolean {
+	const [prefersReducedMotion, setPrefersReducedMotion] = useState(() => {
+		if (Global.isSsr) {
+			return false;
+		}
+		if (!window.matchMedia) {
+			return false;
+		}
+		return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+	});
+	useEffect(() => {
+		if (!window.matchMedia) {
+			return;
+		}
+		const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
+		const handleChange = () => {
+			setPrefersReducedMotion(mediaQuery.matches);
+		};
+		mediaQuery.addEventListener('change', handleChange);
+		return () => {
+			mediaQuery.removeEventListener('change', handleChange);
+		};
+	}, []);
+	return prefersReducedMotion;
+}

package/src/util/useReportScale.ts

@@ -0,0 +1,26 @@
+// Port of util/useReportScale.ts — measures the wrapper's CSS transform scale
+// (getBoundingClientRect width vs offsetWidth) and reports it to the store.
+import { useEffect, useState } from 'octane';
+import { useAppDispatch, useAppSelector } from '../state/hooks';
+import { selectContainerScale } from '../state/selectors/containerSelectors';
+import { setScale } from '../state/layoutSlice';
+import { isWellBehavedNumber } from './isWellBehavedNumber';
+import { splitSlot, subSlot } from '../internal';
+
+export function useReportScale(...rest: any[]) {
+	const [, slot] = splitSlot(rest);
+	const dispatch = useAppDispatch();
+	const [ref, setRef] = useState<HTMLElement | null>(null);
+	const scale = useAppSelector(selectContainerScale, subSlot(slot, 'urs:scale'));
+	useEffect(() => {
+		if (ref == null) {
+			return;
+		}
+		const rect = ref.getBoundingClientRect();
+		const newScale = rect.width / ref.offsetWidth;
+		if (isWellBehavedNumber(newScale) && newScale !== scale) {
+			dispatch(setScale(newScale));
+		}
+	}, [ref, dispatch, scale]);
+	return setRef;
+}

package/src/util/useUniqueId.js

@@ -0,0 +1,34 @@
+// Vendored verbatim from recharts@3.9.2 es6/util/useUniqueId.js (framework-agnostic).
+// Do not edit — update by re-vendoring when the recharts devDependency moves.
+import { useId } from './useId';
+
+/**
+ * A hook that generates a unique ID. It uses React.useId() in React 18+ for SSR safety
+ * and falls back to a client-side-only unique ID generator for older versions.
+ *
+ * The ID will stay the same across renders, and you can optionally provide a prefix.
+ *
+ * @param [prefix] - An optional prefix for the generated ID.
+ * @param [customId] - An optional custom ID to override the generated one.
+ * @returns The unique ID.
+ */
+export function useUniqueId(prefix, customId) {
+	/*
+	 * We have to call this hook here even if we don't use the result because
+	 * rules of hooks demand that hooks are never called conditionally.
+	 */
+	var generatedId = useId();
+
+	// If a custom ID is provided, it always takes precedence.
+	if (customId) {
+		return customId;
+	}
+
+	// Apply the prefix if one was provided.
+	return prefix ? ''.concat(prefix, '-').concat(generatedId) : generatedId;
+}
+
+/**
+ * The useUniqueId hook returns a unique ID that is either reused from external props or generated internally.
+ * Either way the ID is now guaranteed to be present so no more nulls or undefined.
+ */

package/src/zIndex/DefaultZIndexes.js

@@ -0,0 +1,75 @@
+// Vendored verbatim from recharts@3.9.2 es6/zIndex/DefaultZIndexes.js (framework-agnostic).
+// Do not edit — update by re-vendoring when the recharts devDependency moves.
+/**
+ * A collection of all default zIndex values used by Recharts.
+ *
+ * You can reuse these, or you can define your own.
+ */
+export var DefaultZIndexes = {
+	/**
+	 * CartesianGrid and PolarGrid
+	 */
+	grid: -100,
+	/**
+	 * Background of Bar and RadialBar.
+	 * This is not visible by default but can be enabled by setting background={true} on Bar or RadialBar.
+	 */
+	barBackground: -50,
+	/*
+	 * other chart elements or custom elements without specific zIndex
+	 * render in here, at zIndex 0
+	 */
+
+	/**
+	 * Area, Pie, Radar, and ReferenceArea
+	 */
+	area: 100,
+	/**
+	 * Cursor is embedded inside Tooltip and controlled by it.
+	 * The Tooltip itself has a separate portal and is not included in the zIndex system;
+	 * Cursor is the decoration inside the chart area. CursorRectangle is a rectangle box.
+	 * It renders below bar so that in a stacked bar chart the cursor rectangle does not hide the other bars.
+	 */
+	cursorRectangle: 200,
+	/**
+	 * Bar and RadialBar
+	 */
+	bar: 300,
+	/**
+	 * Line and ReferenceLine, and ErrorBor
+	 */
+	line: 400,
+	/**
+	 * XAxis and YAxis and PolarAngleAxis and PolarRadiusAxis ticks and lines and children
+	 */
+	axis: 500,
+	/**
+	 * Scatter and ReferenceDot,
+	 * and Dots of Line and Area and Radar if they have dot=true
+	 */
+	scatter: 600,
+	/**
+	 * Hovering over a Bar or RadialBar renders a highlight rectangle
+	 */
+	activeBar: 1000,
+	/**
+	 * Cursor is embedded inside Tooltip and controlled by it.
+	 * The Tooltip itself has a separate portal and is not included in the zIndex system;
+	 * Cursor is the decoration inside the chart area, usually a cross or a box.
+	 * CursorLine is a line cursor rendered in Line, Area, Scatter, Radar charts.
+	 * It renders above the Line and Scatter so that it is always visible.
+	 * It renders below active dot so that the dot is always visible and shows the current point.
+	 * We're also assuming that the active dot is small enough that it does not fully cover the cursor line.
+	 *
+	 * This also applies to the radial cursor in RadialBarChart.
+	 */
+	cursorLine: 1100,
+	/**
+	 * Hovering over a Point in Line, Area, Scatter, Radar renders a highlight dot
+	 */
+	activeDot: 1200,
+	/**
+	 * LabelList and Label, including Axis labels
+	 */
+	label: 2000,
+};