vccs 0.6.0 → 1.0.0-beta.2

package/dist/es/animation/ActiveDot.mjs

@@ -0,0 +1,39 @@
+import { shouldSkipEntrance } from "../model/runtime.mjs";
+import { useReducedMotion } from "./useReducedMotion.mjs";
+import { motionTokens } from "./motion.mjs";
+import { createVNode, defineComponent, nextTick, onMounted, onScopeDispose, ref } from "vue";
+import { animate } from "motion-v";
+//#region src/animation/ActiveDot.tsx
+/** Radius and opacity appear together; pointer retargeting keeps the mounted dot. */
+var ActiveDot = /* @__PURE__ */ defineComponent({
+	props: { isAnimationActive: {
+		type: Boolean,
+		default: true
+	} },
+	setup(props, { slots }) {
+		const element = ref();
+		const reduced = useReducedMotion();
+		const skip = shouldSkipEntrance();
+		let controls;
+		onMounted(() => nextTick(() => {
+			const el = element.value;
+			if (!el || !props.isAnimationActive || skip || reduced.value === "reduce") return;
+			const circle = el.querySelector("circle");
+			const radius = circle?.getAttribute("r");
+			controls = animate(0, 1, {
+				duration: motionTokens.feedback.duration,
+				ease: motionTokens.feedback.ease,
+				onUpdate: (t) => {
+					el.style.opacity = String(t);
+					if (circle && radius) circle.setAttribute("r", String(Number(radius) * t));
+				}
+			});
+			el.style.opacity = "0";
+			if (circle) circle.setAttribute("r", "0");
+		}));
+		onScopeDispose(() => controls?.stop());
+		return () => createVNode("g", { "ref": element }, [slots.default?.()]);
+	}
+});
+//#endregion
+export { ActiveDot };

package/dist/es/animation/MovingLabels.mjs

@@ -0,0 +1,61 @@
+import { useKeyedTransition } from "./useKeyedTransition.mjs";
+import { labelOpacity } from "./ridingLabels.mjs";
+import { createVNode, defineComponent, mergeProps } from "vue";
+//#region src/animation/MovingLabels.tsx
+/** A child shares the chart's resize and hydration context with its cells. */
+var MovingLabels = /* @__PURE__ */ defineComponent({
+	name: "MovingLabels",
+	inheritAttrs: false,
+	props: {
+		labels: {
+			type: Array,
+			required: true
+		},
+		isAnimationActive: {
+			type: Boolean,
+			default: true
+		},
+		transition: {
+			type: Object,
+			default: void 0
+		},
+		textAnchor: {
+			type: String,
+			default: void 0
+		},
+		centered: {
+			type: Boolean,
+			default: false
+		}
+	},
+	setup(props, { attrs }) {
+		const { items } = useKeyedTransition(() => props.labels, {
+			key: (label) => label.key,
+			interpolate: (from, to, t) => ({
+				...to,
+				x: from.x + (to.x - from.x) * t,
+				y: from.y + (to.y - from.y) * t
+			}),
+			enterFrom: (to) => to,
+			exitTo: (from) => from,
+			isActive: () => props.isAnimationActive,
+			transition: () => props.transition,
+			followsSeries: true
+		});
+		return () => createVNode("g", mergeProps(attrs, { "aria-hidden": "true" }), [items.value.map((item) => createVNode("text", {
+			"data-slot": "label",
+			"key": String(item.key),
+			"x": item.value.x,
+			"y": item.value.y,
+			"opacity": item.phase === "exit" ? labelOpacity(item) : void 0,
+			"text-anchor": props.textAnchor,
+			"dominant-baseline": props.centered ? "central" : void 0,
+			"style": {
+				fill: "var(--v-charts-text, #666)",
+				fontSize: "10px"
+			}
+		}, [item.value.text]))]);
+	}
+});
+//#endregion
+export { MovingLabels };

package/dist/es/animation/SweepClip.mjs

@@ -0,0 +1,40 @@
+import { createVNode, defineComponent } from "vue";
+//#region src/animation/SweepClip.tsx
+/** Plot bounds also sweep flat lines, whose object bounding box has zero height. */
+var SweepClip = /* @__PURE__ */ defineComponent({
+	props: {
+		id: {
+			type: String,
+			required: true
+		},
+		progress: {
+			type: Number,
+			required: true
+		},
+		vertical: Boolean,
+		x: {
+			type: Number,
+			required: true
+		},
+		y: {
+			type: Number,
+			required: true
+		},
+		width: {
+			type: Number,
+			required: true
+		},
+		height: {
+			type: Number,
+			required: true
+		}
+	},
+	setup: (props) => () => createVNode("clipPath", { "id": props.id }, [createVNode("rect", {
+		"x": props.x,
+		"y": props.y,
+		"width": props.width * (props.vertical ? 1 : props.progress),
+		"height": props.height * (props.vertical ? props.progress : 1)
+	}, null)])
+});
+//#endregion
+export { SweepClip };

package/dist/es/animation/gridTransition.mjs

@@ -0,0 +1,112 @@
+//#region src/animation/gridTransition.ts
+function emptyGridTransitionPlan() {
+	return {
+		keys: /* @__PURE__ */ new Map(),
+		jumping: /* @__PURE__ */ new Set(),
+		seams: {
+			enter: /* @__PURE__ */ new Map(),
+			exit: /* @__PURE__ */ new Map()
+		}
+	};
+}
+/**
+* A cell removed between two staying grid neighbours (a row dropped from the middle) closes
+* onto the line where those neighbours meet after the change; a cell added between two opens
+* from the line where they met before. Both ends move on the same clock as the neighbours, so
+* the cell always fills exactly the gap between them and never overlaps either.
+*/
+function findSeams(previous, next) {
+	const seams = {
+		enter: /* @__PURE__ */ new Map(),
+		exit: /* @__PURE__ */ new Map()
+	};
+	const before = new Map(previous.map((cell) => [cell.key, cell]));
+	const after = new Map(next.map((cell) => [cell.key, cell]));
+	const position = (cells) => new Map(cells.map((cell) => [`${cell.row}:${cell.column}`, cell]));
+	const oldAt = position(previous);
+	const newAt = position(next);
+	const seamBetween = (cell, at, stays) => {
+		const pair = (a, b) => {
+			const first = at.get(a);
+			const second = at.get(b);
+			const stayingFirst = first && stays.get(first.key);
+			const stayingSecond = second && stays.get(second.key);
+			return stayingFirst && stayingSecond ? [stayingFirst, stayingSecond] : void 0;
+		};
+		const vertical = pair(`${cell.row - 1}:${cell.column}`, `${cell.row + 1}:${cell.column}`);
+		if (vertical) return {
+			...cell,
+			y: (vertical[0].y + vertical[0].height + vertical[1].y) / 2,
+			height: 0
+		};
+		const horizontal = pair(`${cell.row}:${cell.column - 1}`, `${cell.row}:${cell.column + 1}`);
+		if (horizontal) return {
+			...cell,
+			x: (horizontal[0].x + horizontal[0].width + horizontal[1].x) / 2,
+			width: 0
+		};
+	};
+	for (const cell of previous) if (!after.has(cell.key)) {
+		const seam = seamBetween(cell, oldAt, after);
+		if (seam) seams.exit.set(cell.key, seam);
+	}
+	for (const cell of next) if (!before.has(cell.key)) {
+		const seam = seamBetween(cell, newAt, before);
+		if (seam) seams.enter.set(cell.key, seam);
+	}
+	return seams;
+}
+/**
+* Plans how a keyed grid moves from `previous` to `next`. Identity on screen is usually the
+* cell's own key, with two exceptions decided per change:
+* - A few cells move far against the common grid move (Sundays wrapping to the last row when
+*   the week start changes): they shrink and regrow in place instead of streaking across.
+* - Nothing stays, or most cells would have to jump (a different year, a reversed axis):
+*   new cells take over the node at the same grid position, so the grid recolors in place
+*   instead of every cell shrinking and growing at once.
+*
+* `generation` must differ per call; it keeps a reused on-screen key unique.
+*/
+function planGridTransition(previous, next, previousKeys, generation) {
+	const before = new Map(previous.map((cell) => [cell.key, cell]));
+	const jumping = /* @__PURE__ */ new Set();
+	const moves = /* @__PURE__ */ new Map();
+	let staying = 0;
+	for (const cell of next) {
+		const old = before.get(cell.key);
+		if (old) {
+			staying++;
+			const move = `${cell.column - old.column}:${cell.row - old.row}`;
+			moves.set(move, (moves.get(move) ?? 0) + 1);
+		}
+	}
+	const common = [...moves].reduce((best, entry) => !best || entry[1] > best[1] ? entry : best, void 0)?.[0];
+	if (common !== void 0) {
+		const [commonColumn, commonRow] = common.split(":").map(Number);
+		for (const cell of next) {
+			const old = before.get(cell.key);
+			if (old && Math.abs(cell.column - old.column - commonColumn) + Math.abs(cell.row - old.row - commonRow) > 1) jumping.add(cell.key);
+		}
+	}
+	const inPlace = previous.length > 0 && (staying === 0 || jumping.size > staying / 2);
+	if (inPlace) jumping.clear();
+	const byPosition = new Map(previous.map((cell) => [`${cell.row}:${cell.column}`, previousKeys.get(cell.key) ?? cell.key]));
+	const keys = /* @__PURE__ */ new Map();
+	const used = /* @__PURE__ */ new Set();
+	for (const cell of next) {
+		let key = inPlace ? byPosition.get(`${cell.row}:${cell.column}`) ?? cell.key : previousKeys.get(cell.key) ?? cell.key;
+		if (used.has(key)) key = `${cell.key}\u0000${generation}`;
+		used.add(key);
+		keys.set(cell.key, key);
+	}
+	return {
+		keys,
+		jumping,
+		seams: inPlace ? {
+			enter: /* @__PURE__ */ new Map(),
+			exit: /* @__PURE__ */ new Map()
+		} : findSeams(previous, next)
+	};
+}
+//#endregion
+export { emptyGridTransitionPlan, planGridTransition };

package/dist/es/animation/motion.mjs

@@ -0,0 +1,100 @@
+import { cubicBezier } from "motion-v";
+//#region src/animation/motion.ts
+var easeOutQuint = cubicBezier(.22, 1, .36, 1);
+var easeOutCubic = cubicBezier(.33, 1, .68, 1);
+/**
+* Default timings shared by chart elements. Lines and areas keep drawing at their steady
+* pace after bars land. Elements leave faster than they arrive, so exits clear the way.
+*/
+var motionTokens = {
+	/**
+	* First appearance: long enough to watch the chart build up, and decelerating gently, so most
+	* of it is not over in the first frames (a quint curve finished two thirds in 120 ms).
+	*/
+	enter: {
+		duration: 1,
+		ease: easeOutCubic
+	},
+	/** Data changes: same curve, shorter, so interruptions feel responsive. */
+	update: {
+		duration: .5,
+		ease: easeOutQuint
+	},
+	/** Removed elements: the same curve, shorter still, so they clear the way for the rest. */
+	exit: {
+		duration: .3,
+		ease: easeOutQuint
+	},
+	/** Pointer feedback and tooltip appearance share the CSS ease-out curve. */
+	feedback: {
+		duration: .15,
+		ease: "easeOut",
+		cssEase: "ease-out"
+	},
+	color: {
+		duration: .3,
+		ease: "easeOut",
+		cssEase: "ease-out"
+	},
+	follow: {
+		type: "spring",
+		stiffness: 500,
+		damping: 40,
+		mass: 1
+	}
+};
+/**
+* A cascade entrance: items start one after another over the first `spread` of `duration` and
+* each takes the rest on the entrance curve, so the wave reads as one gesture, not many.
+*/
+var cascadeTiming = {
+	duration: 1.2,
+	spread: .4,
+	ease: easeOutCubic
+};
+var drawEase = cubicBezier(.4, 0, .2, 1);
+/**
+* A line drawing itself on first appearance. Its tip travels the whole curve, so the duration
+* follows the length it travels: 1.2 s up to 500 px, 0.2 s more per further 1000 px, at most
+* 2 s. A dense line then never races faster than the eye can follow, and a short one does not
+* crawl. The curve starts gently and settles for longer than it accelerates.
+*/
+function drawTiming(length) {
+	const extra = Math.max(0, length - 500) / 1e3 * .2;
+	return {
+		duration: Math.min(2, 1.2 + extra),
+		ease: drawEase
+	};
+}
+/** The diagonal reveal shared by treemaps and cell charts; timelines slide instead. */
+function cascadeReveal(cells, style = "cascade") {
+	if (!cells.length) return void 0;
+	let left = Infinity;
+	let top = Infinity;
+	let right = -Infinity;
+	let bottom = -Infinity;
+	for (const cell of cells) {
+		left = Math.min(left, cell.x);
+		top = Math.min(top, cell.y);
+		right = Math.max(right, cell.x + cell.width);
+		bottom = Math.max(bottom, cell.y + cell.height);
+	}
+	const span = right - left + bottom - top || 1;
+	return {
+		from: (cell) => style === "slide" ? {
+			...cell,
+			x: cell.x - 8,
+			opacity: 0
+		} : {
+			...cell,
+			x: cell.x + cell.width * .04,
+			y: cell.y + cell.height * .04,
+			width: cell.width * .92,
+			height: cell.height * .92,
+			opacity: 0
+		},
+		order: (cell) => Math.min(1, Math.max(0, (cell.x - left + cell.y - top) / span))
+	};
+}
+//#endregion
+export { cascadeReveal, cascadeTiming, drawTiming, motionTokens };

package/dist/es/animation/ridingLabels.mjs

@@ -0,0 +1,70 @@
+//#region src/animation/ridingLabels.ts
+/**
+* Labels ride along with their shape on every frame and show the new value at once. A label
+* fades with a shape that enters or leaves; settled and moving shapes keep full opacity.
+*/
+function labelOpacity(item) {
+	if (item.progress == null || item.phase === "update") return void 0;
+	return item.phase === "enter" ? item.progress : 1 - item.progress;
+}
+/** Share of the reveal over which a label fades in after the line reaches its point. */
+var SWEEP_FADE = .3;
+/**
+* The labels of points the reveal has passed. `reached(point, index)` is the share of the
+* reveal at which it reaches the point. Each label fades in behind the edge and is fully shown
+* when the reveal ends; all of them are unchanged once it has finished.
+*/
+function sweptLabels(points, reveal, reached) {
+	if (reveal >= 1) return points;
+	const shown = [];
+	points.forEach((point, index) => {
+		const at = reached(point, index);
+		if (at == null) return;
+		const window = Math.max(Math.min(SWEEP_FADE, 1 - at), 1e-6);
+		const opacity = Math.min(1, (reveal - at) / window);
+		if (opacity > 0) shown.push(opacity < 1 ? {
+			...point,
+			opacity: Math.min(opacity, point.opacity ?? 1)
+		} : point);
+	});
+	return shown;
+}
+/** Where a straight sweep across `start`..`start + size` reaches a coordinate, as a share. */
+function sweepShare(position, start, size) {
+	return position == null ? void 0 : Math.min(1, Math.max(0, (position - start) / size));
+}
+/**
+* Where a line drawn along its length reaches each point, as a share of its length; straight
+* segments between the points approximate the curve. Gaps (null coordinates) are skipped.
+*/
+function lengthShares(points) {
+	const { shares, total } = measure(points);
+	return shares.map((share) => share == null ? void 0 : total > 0 ? share / total : 0);
+}
+/** The length of the straight segments through the points, skipping gaps. */
+function polylineLength(points) {
+	return measure(points).total;
+}
+function measure(points) {
+	const shares = [];
+	let total = 0;
+	let previous;
+	for (const point of points) {
+		if (point.x == null || point.y == null) {
+			shares.push(void 0);
+			continue;
+		}
+		if (previous) total += Math.hypot(point.x - previous.x, point.y - previous.y);
+		shares.push(total);
+		previous = {
+			x: point.x,
+			y: point.y
+		};
+	}
+	return {
+		shares,
+		total
+	};
+}
+//#endregion
+export { labelOpacity, lengthShares, polylineLength, sweepShare, sweptLabels };

package/dist/es/animation/useAnimationCallbacks.mjs

@@ -0,0 +1,23 @@
+import { nextTick, onScopeDispose } from "vue";
+//#region src/animation/useAnimationCallbacks.ts
+/** Ignore the inline instance replaced by the chart's mount-time layer teleport. */
+function useAnimationCallbacks(onStart, onEnd) {
+	let alive = true;
+	onScopeDispose(() => {
+		alive = false;
+	});
+	return {
+		onStart: () => {
+			nextTick(() => {
+				if (alive) onStart();
+			});
+		},
+		onEnd: () => {
+			nextTick(() => {
+				if (alive) onEnd();
+			});
+		}
+	};
+}
+//#endregion
+export { useAnimationCallbacks };