@octanejs/recharts 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Dominic Gannaway
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@octanejs/recharts",
+  "version": "0.1.0",
+  "license": "MIT",
+  "type": "module",
+  "description": "Recharts for the octane renderer — reuses recharts' framework-agnostic core (Redux Toolkit state, reselect, d3 via victory-vendor) and swaps the React layer for octane's hooks.",
+  "author": {
+    "name": "Dominic Gannaway",
+    "email": "dg@domgan.com"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/octanejs/octane.git",
+    "directory": "packages/recharts"
+  },
+  "main": "src/index.ts",
+  "module": "src/index.ts",
+  "types": "src/index.ts",
+  "files": [
+    "src",
+    "README.md"
+  ],
+  "exports": {
+    ".": "./src/index.ts"
+  },
+  "dependencies": {
+    "@reduxjs/toolkit": "^2.9.0",
+    "clsx": "^2.1.1",
+    "decimal.js-light": "^2.5.1",
+    "es-toolkit": "^1.39.3",
+    "eventemitter3": "^5.0.1",
+    "immer": "^11.1.8",
+    "reselect": "5.2.0",
+    "tiny-invariant": "^1.3.3",
+    "victory-vendor": "^37.0.2",
+    "@octanejs/redux": "0.1.0",
+    "octane": "0.1.3"
+  },
+  "devDependencies": {
+    "@tsrx/react": "^0.2.37",
+    "esbuild": "^0.28.1",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "recharts": "3.9.2",
+    "vitest": "^4.1.9"
+  },
+  "scripts": {
+    "test": "vitest run"
+  }
+}

package/src/animation/AnimatedItems.tsrx

@@ -0,0 +1,82 @@
+// Port of animation/AnimatedItems.tsx — the reusable enter/update/exit
+// animation wrapper for array-based chart data (Bar, Line, Area, Pie, …).
+import { useCallback, useState } from 'octane';
+import { JavascriptAnimate } from './JavascriptAnimate.tsrx';
+import { useAnimationId } from '../util/useAnimationId.ts';
+import { matchAnimationItems, matchByIndex } from './matchBy';
+import { useAnimationStartSnapshot } from './useAnimationStartSnapshot.ts';
+
+/**
+ * Tracks animation state and provides callbacks for animation start/end.
+ */
+export function useAnimationCallbacks(onAnimationStart, onAnimationEnd) {
+	const [isAnimating, setIsAnimating] = useState(false);
+	const handleAnimationStart = useCallback(() => {
+		if (typeof onAnimationStart === 'function') {
+			onAnimationStart();
+		}
+		setIsAnimating(true);
+	}, [onAnimationStart]);
+	const handleAnimationEnd = useCallback(() => {
+		if (typeof onAnimationEnd === 'function') {
+			onAnimationEnd();
+		}
+		setIsAnimating(false);
+	}, [onAnimationEnd]);
+	return {
+		isAnimating,
+		handleAnimationStart,
+		handleAnimationEnd,
+	};
+}
+
+export function AnimatedItems(props) {
+	const {
+		animationInput,
+		animationIdPrefix,
+		items,
+		previousItemsRef,
+		isAnimationActive,
+		animationBegin,
+		animationDuration,
+		animationEasing,
+		onAnimationStart,
+		onAnimationEnd,
+		animationInterpolateFn,
+		animationMatchBy,
+		shouldUpdatePreviousRef,
+		children,
+		layout,
+	} = props;
+	const animationId = useAnimationId(animationInput, animationIdPrefix);
+	const animationStartItems = useAnimationStartSnapshot(animationId, previousItemsRef);
+	const rawPrevItems = animationStartItems.startValue ?? null;
+	const animationItems = matchAnimationItems(rawPrevItems, items, animationMatchBy ?? matchByIndex);
+	return <JavascriptAnimate
+		animationId={animationId}
+		begin={animationBegin}
+		duration={animationDuration}
+		isActive={isAnimationActive}
+		easing={animationEasing}
+		onAnimationEnd={onAnimationEnd}
+		onAnimationStart={onAnimationStart}
+		key={animationId}
+	>
+		{(animationElapsedTime) => {
+			const isEntrance = rawPrevItems == null;
+			const stepData =
+				items == null
+					? items
+					: animationInterpolateFn(animationItems, animationElapsedTime, layout);
+			const canUpdate =
+				shouldUpdatePreviousRef
+					? shouldUpdatePreviousRef(animationElapsedTime)
+					: animationElapsedTime > 0;
+			animationStartItems.syncStepValue(stepData, animationElapsedTime, canUpdate);
+			if (stepData == null) {
+				return null;
+			}
+			return children(stepData, animationElapsedTime, isEntrance);
+		}}
+	</JavascriptAnimate>;
+}

package/src/animation/AnimationControllerImpl.js

@@ -0,0 +1,33 @@
+// Vendored verbatim from recharts@3.9.2 es6/animation/AnimationControllerImpl.js (framework-agnostic).
+// Do not edit — update by re-vendoring when the recharts devDependency moves.
+/**
+ * JavaScript animations require trigger and repaint as soon as possible,
+ * so this class uses the timeoutController to trigger updates as quickly as the controller allows.
+ *
+ * JavaScript animation progress is represented as a stream of values. The exact type depends on the animationHandle type.
+ * Each individual consumer is then responsible for mapping those values onto a React component.
+ */
+export var animationControllerImpl = (timeoutController, animationHandle, listener) => {
+	var cancellable;
+	var nextUpdate = (now) => {
+		var timeRemaining = animationHandle.tick(now);
+		if (animationHandle.getState() === 'active') {
+			listener(animationHandle.getInterpolated());
+			if (animationHandle.getProgress() === 1) {
+				animationHandle.complete();
+				cancellable = undefined;
+				return;
+			}
+			cancellable = timeoutController.setTimeout(nextUpdate, timeRemaining);
+			return;
+		}
+		cancellable = timeoutController.setTimeout(nextUpdate, timeRemaining);
+	};
+	cancellable = timeoutController.setTimeout(nextUpdate, 0);
+	return () => {
+		var _cancellable;
+		return (_cancellable = cancellable) === null || _cancellable === void 0
+			? void 0
+			: _cancellable();
+	};
+};

package/src/animation/AnimationHandle.js

@@ -0,0 +1,291 @@
+// Vendored verbatim from recharts@3.9.2 es6/animation/AnimationHandle.js (framework-agnostic).
+// Do not edit — update by re-vendoring when the recharts devDependency moves.
+function _defineProperty(e, r, t) {
+	return (
+		(r = _toPropertyKey(r)) in e
+			? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 })
+			: (e[r] = t),
+		e
+	);
+}
+function _toPropertyKey(t) {
+	var i = _toPrimitive(t, 'string');
+	return 'symbol' == typeof i ? i : i + '';
+}
+function _toPrimitive(t, r) {
+	if ('object' != typeof t || !t) return t;
+	var e = t[Symbol.toPrimitive];
+	if (void 0 !== e) {
+		var i = e.call(t, r || 'default');
+		if ('object' != typeof i) return i;
+		throw new TypeError('@@toPrimitive must return a primitive value.');
+	}
+	return ('string' === r ? String : Number)(t);
+}
+// eslint-disable-next-line max-classes-per-file
+import { interpolate } from '../util/DataUtils';
+var INIT = 'init';
+var PENDING = 'pending';
+var ACTIVE = 'active';
+var COMPLETED = 'completed';
+function duration(time) {
+	return Math.max(0, time);
+}
+class RechartsAnimation {
+	/**
+	 * Returns the absolute time after the animationBegin delay has been completed,
+	 * and when the animationDuration started ticking.
+	 */
+	getAnimationStartedTime() {
+		return this.animationStartedTime;
+	}
+
+	/**
+	 * Returns the absolute time of when the animation began - now it will wait for {animationBegin} ms before the transition starts
+	 */
+	getBeginStartedTime() {
+		return this.beginStartedTime;
+	}
+	constructor(param) {
+		var _param$onAnimationSta;
+		_defineProperty(this, 'state', INIT);
+		this.animationId = param.animationId;
+		this.onAnimationEnd = param.onAnimationEnd;
+		this.animationDuration = duration(param.animationDuration);
+		this.animationBegin = duration(param.animationBegin);
+		this.progress = 0;
+		this.from = param.from;
+		this.to = param.to;
+		this.easing = param.easing;
+		// Mimic what the previous animationManager was doing - call onAnimationStart immediately and synchronously
+		(_param$onAnimationSta = param.onAnimationStart) === null ||
+			_param$onAnimationSta === void 0 ||
+			_param$onAnimationSta.call(param);
+	}
+	/**
+	 * Returns the state machine current state
+	 * - `init`:       animation had just been created. It immediately calls `onAnimationStart`
+	 * - `pending`:    animation is now paused for `animationBegin` milliseconds until the transition begins
+	 * - `active`:     animation is transitioning items on screen
+	 * - `completed`:  animation has completed its transition and executed `onAnimationEnd`.
+	 *                 This state is final and the animation is no longer allowed to transition to other states.
+	 */
+	getState() {
+		return this.state;
+	}
+
+	/**
+	 * Returns the easing input or function
+	 */
+	getEasing() {
+		return this.easing;
+	}
+
+	/**
+	 * Returns the configuration - the duration of the transition.
+	 * Does not change in time, does not change when state changes, this is a static value.
+	 */
+	getAnimationDuration() {
+		return this.animationDuration;
+	}
+
+	/**
+	 * Sets the current time of the animation. The animation sets its internal state and progress accordingly.
+	 * This is current, absolute time; not additive!
+	 * This allows you to essentially "travel back in time" based on the value you pass in here.
+	 *
+	 * Returns the (relative) time remaining until the current activity is over.
+	 * Meaning: if the state is in a middle of a delay, returns the time left until the delay is finished.
+	 * If the state is in the middle of a transition, returns time left until that transition is complete.
+	 * This is useful because it's the same number you can take and put into setTimeout(fn, X)
+	 * as that's how much time we need to wait until the next state transition happens.
+	 */
+	tick(now) {
+		if (this.getState() === INIT) {
+			this.state = PENDING;
+			this.beginStartedTime = now;
+			return this.animationBegin;
+		}
+		if (this.getState() === PENDING) {
+			if (this.beginStartedTime == null) {
+				throw new Error();
+			}
+			var _timeElapsed = now - this.beginStartedTime;
+			if (_timeElapsed >= this.animationBegin) {
+				this.state = ACTIVE;
+				this.animationStartedTime = now;
+				// The state flipped just now so the elapsed time is zero
+				return this.nextAnimationUpdate(0);
+			}
+			return duration(this.animationBegin - _timeElapsed);
+		}
+		if (this.getState() === ACTIVE) {
+			if (this.animationStartedTime == null) {
+				throw new Error();
+			}
+			var _timeElapsed2 = now - this.animationStartedTime;
+			this.setProgress(_timeElapsed2 / this.animationDuration);
+			return this.nextAnimationUpdate(_timeElapsed2);
+		}
+
+		// state === COMPLETED, nothing interesting is going to happen
+		return 0;
+	}
+	setProgress(newProgress) {
+		this.progress = Math.min(1, Math.max(0, newProgress));
+	}
+
+	/**
+	 * Returns an abstract "progress" which is number between 0 and 1 which shows the distance of transition.
+	 * This progress depends on the animation state:
+	 * - `init`: 0
+	 * - `pending`: 0
+	 * - `active`: transitioning between [0, 1] based on the time elapsed
+	 * - `completed`: 1
+	 *
+	 * The progress is hard-capped to be between 0 and 1 (inclusive) to avoid overshooting caused by coarse timers.
+	 * For this reason, the easing function must be applied _after_ this animation state,
+	 * so that one has a chance to construct dynamic "overshoot" animations.
+	 *
+	 * The progress is linear with time.
+	 * If you wish for easing, use `getInterpolated()` instead.
+	 */
+	getProgress() {
+		return this.progress;
+	}
+
+	/**
+	 * Completes the animation. Completed animation:
+	 * - cannot be manipulated anymore
+	 * - its progress is set to 1
+	 * - tick function doesn't do anything
+	 * - getState() always returns 'completed'
+	 */
+	complete() {
+		this.progress = 1;
+		if (this.state === 'active') {
+			var _this$onAnimationEnd;
+			// Do not call callbacks if the animation was interrupted before it even started!
+			(_this$onAnimationEnd = this.onAnimationEnd) === null ||
+				_this$onAnimationEnd === void 0 ||
+				_this$onAnimationEnd.call(this);
+		}
+		this.state = COMPLETED;
+	}
+
+	/**
+	 * Returns the starting value of the animation.
+	 * Does not include progress, easing, interpolation, none of that - just the static starting value
+	 */
+	getFrom() {
+		return this.from;
+	}
+
+	/**
+	 * Returns the end value of the animation.
+	 * Does not include progress, easing, interpolation, none of that - just the static end value
+	 */
+	getTo() {
+		return this.to;
+	}
+
+	/**
+	 * Unique identifier of an animation
+	 */
+	getAnimationId() {
+		return this.animationId;
+	}
+
+	/**
+	 * Returns the configuration - the duration of delay in between animation initialization, and transition.
+	 * Does not change in time, does not change when state changes, this is a static value.
+	 */
+	getAnimationBegin() {
+		return this.animationBegin;
+	}
+
+	/**
+	 * Returns value of the transition at the current time.
+	 * The exact details differ based on the animation type
+	 */
+
+	/**
+	 * Returns the duration of time of when the controller should ask for the next update
+	 */
+}
+
+/**
+ * Animation handle representing a Javascript-based animation.
+ * This animation requires one render cycle for each frame, and it calls setTimeout as quickly as possible
+ *
+ * @since 3.9
+ */
+export class JavascriptAnimation extends RechartsAnimation {
+	// eslint-disable-next-line class-methods-use-this
+	nextAnimationUpdate() {
+		/*
+		 * JavaScript-based animations have to update as soon as possible,
+		 * so we return 0 here to indicate that the next update should be scheduled immediately
+		 * and it should trigger render on every occasion.
+		 */
+		return 0;
+	}
+
+	/**
+	 * Returns value of the animation after its easing function had been applied.
+	 * This value, unlike getProgress(), can escape the [0..1] range
+	 * because this is entirely within the easing function control. Spring typically does this.
+	 */
+	getInterpolated() {
+		return this.easing(interpolate(this.getFrom(), this.getTo(), this.getProgress()));
+	}
+}
+
+/**
+ * Animation handle representing a CSS transition.
+ * This animation requires only one render, and the actual transition is then handled by the browser.
+ *
+ * @since 3.9
+ */
+export class CSSTransitionAnimation extends RechartsAnimation {
+	nextAnimationUpdate(timeElapsed) {
+		/**
+		 * CSS transitions do not need DOM updates past the initial render
+		 * so here we just instruct the controller to wait until the animation duration is over.
+		 */
+		return duration(this.animationDuration - timeElapsed);
+	}
+
+	/**
+	 * Returns the final value of the animation (the `to`).
+	 *
+	 * CSS transitions leave both interpolation and easing to the browser,
+	 * so all we need to do here is return the final state
+	 * and let browser handle the rest.
+	 */
+	getInterpolated() {
+		return this.getTo();
+	}
+}
+
+/**
+ * Recharts animation state machine.
+ *
+ * Possible transitions are:
+ * - `init`: starting state - `onAnimationStart` executes
+ * - `init` to `pending` - `animationBegin` duration begins
+ * - `pending` to `active` - `animationDuration` duration begins, timer ticks decide the progress
+ * - `active` to `completed` - `onAnimationEnd` executes
+ *
+ * The state always moves in this direction, cannot move backwards.
+ *
+ * The animation queue is static and consists of four elements:
+ * - `onAnimationStart`: function that is called when the animation is created
+ * - `animationBegin`: delay between `onAnimationStart` and the transition
+ * - the transition itself, takes `animationDuration` ms to finish
+ * - `onAnimationEnd`: function that is called when the animation is moving from `active` to `completed`
+ *
+ * @see {@link https://recharts.github.io/en-US/guide/animations/ Animation guide}
+ *
+ * @since 3.9
+ */

package/src/animation/JavascriptAnimate.tsrx

@@ -0,0 +1,81 @@
+// Port of animation/JavascriptAnimate.tsx — the render-prop animation driver:
+// `children(t)` with t progressing 0→1 through the (vendored) animation core.
+// `isActive={false}` renders a single synchronous `children(1)` — the static
+// path Phases 0–4 ride; the live rAF path works through the same vendored
+// controller.
+import { useEffect, useState } from 'octane';
+import { noop } from '../util/DataUtils';
+import { resolveDefaultProps } from '../util/resolveDefaultProps';
+import { createEasingFunction } from './easing';
+import { useAnimationController } from './useAnimationController.ts';
+import { Global } from '../util/Global';
+import { usePrefersReducedMotion } from '../util/usePrefersReducedMotion.ts';
+import { JavascriptAnimation } from './AnimationHandle';
+import { RequestAnimationFrameTimeoutController } from './timeoutController';
+
+const defaultJavascriptAnimateProps = {
+	begin: 0,
+	duration: 1000,
+	easing: 'ease',
+	isActive: true,
+	canBegin: true,
+	onAnimationEnd: () => {},
+	onAnimationStart: () => {},
+};
+
+const from = 0;
+const to = 1;
+
+export function JavascriptAnimate(outsideProps) {
+	const props = resolveDefaultProps(outsideProps, defaultJavascriptAnimateProps);
+	const {
+		animationId,
+		isActive: isActiveProp,
+		canBegin,
+		duration,
+		easing,
+		begin,
+		onAnimationEnd,
+		onAnimationStart,
+		children,
+	} = props;
+	const prefersReducedMotion = usePrefersReducedMotion();
+	const isActive =
+		isActiveProp === 'auto' ? !Global.isSsr && !prefersReducedMotion : isActiveProp;
+	const animationController = useAnimationController(props.animationController);
+	const [style, setStyle] = useState(isActive ? from : to);
+	useEffect(() => {
+		if (!isActive) {
+			setStyle(to);
+		}
+	}, [isActive]);
+	useEffect(() => {
+		const easingFunction = createEasingFunction(easing);
+		if (!isActive || !canBegin || easingFunction == null) {
+			return noop;
+		}
+		const timeoutController = new RequestAnimationFrameTimeoutController();
+		const animation = new JavascriptAnimation({
+			animationId,
+			easing: easingFunction,
+			animationDuration: duration,
+			animationBegin: begin,
+			onAnimationStart,
+			onAnimationEnd,
+			from,
+			to,
+		});
+		return animationController(timeoutController, animation, setStyle);
+	}, [
+		animationController,
+		animationId,
+		isActive,
+		canBegin,
+		duration,
+		easing,
+		begin,
+		onAnimationStart,
+		onAnimationEnd,
+	]);
+	return children(Number(style));
+}