vccs 0.6.0 → 1.0.0-beta.2

package/dist/es/chart/CellGridLayer.mjs

@@ -0,0 +1,380 @@
+import { useTooltipController } from "../model/tooltip.mjs";
+import { labelColor } from "../utils/labelColor.mjs";
+import { useAnimationCallbacks } from "../animation/useAnimationCallbacks.mjs";
+import { useReducedMotion } from "../animation/useReducedMotion.mjs";
+import { cascadeReveal, motionTokens } from "../animation/motion.mjs";
+import { useKeyedTransition } from "../animation/useKeyedTransition.mjs";
+import { cellGridEmits } from "../events/componentEvents.mjs";
+import { cellGridSharedProps } from "./cellGridProps.mjs";
+import { emptyGridTransitionPlan, planGridTransition } from "../animation/gridTransition.mjs";
+import { useItemKeyboard } from "../events/useItemKeyboard.mjs";
+import { computed, createVNode, defineComponent, toRaw, useId, watch } from "vue";
+//#region src/chart/CellGridLayer.tsx
+/** A cell as drawn: `opacity` is the entrance's fade. */
+/**
+* Draws a set of keyed cells with the behavior every cell chart shares: cells keep their DOM
+* node and slide when the window moves, colors cross-fade, one cell is active at a time
+* (pointer or arrow keys), and the active cell drives the chart tooltip.
+*/
+var CellGridLayer = /* @__PURE__ */ defineComponent({
+	name: "CellGridLayer",
+	props: {
+		...cellGridSharedProps,
+		cells: {
+			type: Array,
+			required: true
+		},
+		/** Space between cells; hover targets extend into it so the pointer never falls through. */
+		gap: {
+			type: Number,
+			default: 0
+		},
+		/** How the other cells react to an active one: `ring` outlines it, `dim` fades the rest. */
+		activeStyle: {
+			type: String,
+			default: "ring"
+		},
+		/** How the cells first appear: `cascade` for grids, `slide` for a single timeline row. */
+		entrance: {
+			type: String,
+			default: "cascade"
+		},
+		/** Where cells entering after the first appearance grow from. */
+		grow: {
+			type: String,
+			default: "center"
+		},
+		title: {
+			type: String,
+			default: void 0
+		}
+	},
+	emits: cellGridEmits,
+	slots: Object,
+	setup(props, { emit, slots }) {
+		const tooltip = useTooltipController();
+		const reducedMotion = useReducedMotion();
+		const baseId = useId();
+		const indexByKey = computed(() => new Map(props.cells.map((cell, index) => [cell.key, index])));
+		const collapse = (cell) => props.grow === "bottom" ? {
+			...cell,
+			y: cell.y + cell.height,
+			height: 0
+		} : {
+			...cell,
+			x: cell.x + cell.width / 2,
+			y: cell.y + cell.height / 2,
+			width: 0,
+			height: 0
+		};
+		const shiftOf = (move) => move ? {
+			x: move.to.x - move.from.x,
+			y: move.to.y - move.from.y
+		} : void 0;
+		const isShift = (shift) => !!shift && Math.abs(shift.x) + Math.abs(shift.y) > .5;
+		const lerp = (from, to, t) => ({
+			...to,
+			x: from.x + (to.x - from.x) * t,
+			y: from.y + (to.y - from.y) * t,
+			width: from.width + (to.width - from.width) * t,
+			height: from.height + (to.height - from.height) * t,
+			opacity: Math.min(1, Math.max(0, (from.opacity ?? 1) + ((to.opacity ?? 1) - (from.opacity ?? 1)) * t))
+		});
+		let plan = emptyGridTransitionPlan();
+		let generation = 0;
+		watch(() => props.cells, (next, previous = []) => {
+			plan = planGridTransition(previous, next, plan.keys, ++generation);
+		}, {
+			immediate: true,
+			flush: "sync"
+		});
+		const callbacks = useAnimationCallbacks(() => emit("animation-start"), () => emit("animation-end"));
+		const { items } = useKeyedTransition(() => props.cells, {
+			key: (cell) => plan.keys.get(cell.key) ?? cell.key,
+			interpolate: (from, to, t) => {
+				if (!plan.jumping.has(to.key)) return lerp(from, to, t);
+				return t < .5 ? lerp(from, collapse(from), t * 2) : lerp(collapse(to), to, t * 2 - 1);
+			},
+			enterFrom: (to, neighbors) => {
+				const seam = plan.seams.enter.get(to.key);
+				if (seam) return seam;
+				const shift = shiftOf(neighbors.previousMove) ?? shiftOf(neighbors.nextMove);
+				return isShift(shift) ? {
+					...to,
+					x: to.x - shift.x,
+					y: to.y - shift.y
+				} : collapse(to);
+			},
+			exitTo: (from, neighbors) => {
+				const seam = plan.seams.exit.get(from.key);
+				if (seam) return seam;
+				const shift = shiftOf(neighbors.nextMove) ?? shiftOf(neighbors.previousMove);
+				return isShift(shift) ? {
+					...from,
+					x: from.x + shift.x,
+					y: from.y + shift.y
+				} : collapse(from);
+			},
+			connected: true,
+			reveal: () => cascadeReveal(props.cells, props.entrance),
+			isActive: () => props.isAnimationActive,
+			transition: () => props.transition,
+			onStart: callbacks.onStart,
+			onEnd: callbacks.onEnd
+		});
+		const valueTexts = computed(() => new Map(props.cells.flatMap((cell) => cell.valueText === void 0 ? [] : [[toRaw(cell.payload), cell.valueText]])));
+		const configuration = computed(() => {
+			return {
+				model: {
+					root: true,
+					index: () => props.activeIndex,
+					request: (index) => emit("update:activeIndex", index)
+				},
+				keyboardItems: props.cells.map((cell, index) => ({
+					index,
+					identity: cell.key,
+					coordinate: {
+						x: cell.x + cell.width / 2,
+						y: cell.y + cell.height / 2
+					}
+				})),
+				dataDefinedOnItem: props.cells.map((cell) => cell.payload),
+				values: Object.fromEntries(props.cells.map((cell, index) => [index, cell.value])),
+				names: Object.fromEntries(props.cells.map((cell, index) => [index, cell.label])),
+				positions: void 0,
+				settings: {
+					stroke: void 0,
+					strokeWidth: void 0,
+					fill: void 0,
+					dataKey: "value",
+					nameKey: "name",
+					name: void 0,
+					hide: false,
+					type: void 0,
+					color: void 0,
+					unit: "",
+					formatter: valueTexts.value.size ? (value, _name, entry) => valueTexts.value.get(toRaw(entry.payload)) ?? value : void 0
+				}
+			};
+		});
+		tooltip.entries.register(configuration);
+		const activeIndex = tooltip.activeIndexFor(configuration);
+		const activeKey = computed(() => activeIndex.value === null ? void 0 : props.cells[activeIndex.value]?.key);
+		const { keyboard, onFocus, onKeydown } = useItemKeyboard({
+			empty: () => props.cells.length === 0,
+			start: () => activeKey.value === void 0 ? props.cells[props.cells.length - 1] : void 0,
+			neighbour: (key) => {
+				const current = activeKey.value === void 0 ? void 0 : props.cells[indexByKey.value.get(activeKey.value) ?? -1];
+				if (current) return neighbour(current, key);
+				return key === "Home" ? props.cells[0] : key.startsWith("Arrow") || key === "End" ? props.cells[props.cells.length - 1] : void 0;
+			},
+			activate: (cell) => activate(cell, indexByKey.value.get(cell.key) ?? -1),
+			clear,
+			keydown: (event) => {
+				const index = activeIndex.value;
+				const cell = index === null ? void 0 : props.cells[index];
+				if (event.key !== "Enter" || !cell || index === null) return false;
+				event.preventDefault();
+				emit("cell-click", cell.payload, index, event);
+				return true;
+			}
+		});
+		function activate(cell, index) {
+			const action = {
+				index,
+				configuration: configuration.value,
+				coordinate: {
+					x: cell.x + cell.width / 2,
+					y: cell.y + cell.height / 2
+				}
+			};
+			if (keyboard.value) tooltip.activate("keyboard", {
+				...action,
+				active: true
+			});
+			else tooltip.activate("hover", {
+				...action,
+				type: "item"
+			});
+		}
+		function clear() {
+			if (keyboard.value) tooltip.activate("keyboard", {
+				index: null,
+				coordinate: void 0,
+				active: false
+			});
+			else tooltip.clear("hover", "item");
+		}
+		function onEnter(cell, index, event) {
+			keyboard.value = false;
+			activate(cell, index);
+			emit("cell-mouseenter", cell.payload, index, event);
+		}
+		function onLeave(cell, index, event) {
+			if (activeKey.value === cell.key) clear();
+			emit("cell-mouseleave", cell.payload, index, event);
+		}
+		function onClick(cell, index, event) {
+			tooltip.activate("click", {
+				type: "item",
+				index,
+				configuration: configuration.value,
+				coordinate: {
+					x: cell.x + cell.width / 2,
+					y: cell.y + cell.height / 2
+				}
+			});
+			emit("cell-click", cell.payload, index, event);
+		}
+		/** The nearest cell in a direction, skipping holes such as days outside the range. */
+		function neighbour(from, key) {
+			const cells = props.cells;
+			const pick = (candidates, by) => candidates.reduce((best, cell) => best === void 0 || by(cell) < by(best) ? cell : best, void 0);
+			switch (key) {
+				case "ArrowRight": return pick(cells.filter((c) => c.row === from.row && c.column > from.column), (c) => c.column);
+				case "ArrowLeft": return pick(cells.filter((c) => c.row === from.row && c.column < from.column), (c) => -c.column);
+				case "ArrowDown": return pick(cells.filter((c) => c.column === from.column && c.row > from.row), (c) => c.row);
+				case "ArrowUp": return pick(cells.filter((c) => c.column === from.column && c.row < from.row), (c) => -c.row);
+				case "Home": return cells[0];
+				case "End": return cells[cells.length - 1];
+			}
+		}
+		const clip = computed(() => {
+			const cells = props.cells;
+			if (cells.length === 0) return void 0;
+			let x0 = Infinity;
+			let y0 = Infinity;
+			let x1 = -Infinity;
+			let y1 = -Infinity;
+			for (const cell of cells) {
+				x0 = Math.min(x0, cell.x);
+				y0 = Math.min(y0, cell.y);
+				x1 = Math.max(x1, cell.x + cell.width);
+				y1 = Math.max(y1, cell.y + cell.height);
+			}
+			return {
+				x: x0 - 2,
+				y: y0 - 8,
+				width: x1 - x0 + 4,
+				height: y1 - y0 + 16
+			};
+		});
+		const clipId = `${baseId}-clip`;
+		const cellId = (key) => `${baseId}-cell-${indexByKey.value.get(key)}`;
+		const radiusOf = (rect) => Math.max(0, Math.min(props.radius, rect.width / 2, rect.height / 2));
+		return () => {
+			const fillTransition = reducedMotion.value === "reduce" ? void 0 : `fill ${motionTokens.color.duration}s ${motionTokens.color.cssEase}, opacity ${motionTokens.feedback.duration}s ${motionTokens.feedback.cssEase}`;
+			const half = props.gap / 2;
+			const active = activeKey.value;
+			const activeCell = active === void 0 ? void 0 : items.value.find((item) => item.value.key === active && item.phase !== "exit")?.value;
+			return createVNode("g", {
+				"data-slot": "series",
+				"class": "v-charts-cell-grid",
+				"role": "listbox",
+				"tabindex": 0,
+				"aria-label": props.title,
+				"aria-activedescendant": active === void 0 ? void 0 : cellId(active),
+				"style": { outline: "none" },
+				"onFocus": onFocus,
+				"onKeydown": onKeydown,
+				"onBlur": () => {
+					if (keyboard.value) clear();
+				}
+			}, [
+				clip.value && createVNode("defs", null, [createVNode("clipPath", { "id": clipId }, [createVNode("rect", {
+					"x": clip.value.x,
+					"y": clip.value.y,
+					"width": clip.value.width,
+					"height": clip.value.height
+				}, null)])]),
+				createVNode("g", { "clip-path": clip.value ? `url(#${clipId})` : void 0 }, [items.value.map(({ key, value: cell, phase }) => {
+					const index = indexByKey.value.get(cell.key) ?? -1;
+					const isActive = cell.key === active;
+					const dimmed = props.activeStyle === "dim" && active !== void 0 && !isActive;
+					const radius = radiusOf(cell);
+					const interactive = phase !== "exit" && index >= 0;
+					const fade = cell.opacity != null && cell.opacity < 1 ? cell.opacity : void 0;
+					return createVNode("g", {
+						"key": key,
+						"id": interactive ? cellId(cell.key) : void 0,
+						"data-slot": "cell",
+						"class": "v-charts-cell",
+						"role": "option",
+						"aria-selected": isActive,
+						"aria-label": (cell.valueText ?? cell.value) == null ? cell.label : `${cell.label}: ${cell.valueText ?? cell.value}`,
+						"style": {
+							opacity: dimmed ? .45 : 1,
+							transition: fillTransition,
+							pointerEvents: interactive ? void 0 : "none"
+						},
+						"onMouseenter": (event) => interactive && onEnter(cell, index, event),
+						"onMouseleave": (event) => interactive && onLeave(cell, index, event),
+						"onClick": (event) => interactive && onClick(cell, index, event)
+					}, [
+						slots.cell ? slots.cell({
+							cell,
+							index,
+							active: isActive,
+							x: cell.x,
+							y: cell.y,
+							width: cell.width,
+							height: cell.height,
+							fill: cell.fill,
+							radius
+						}) : createVNode("rect", {
+							"class": "v-charts-cell-rect",
+							"x": cell.x,
+							"y": cell.y,
+							"width": cell.width,
+							"height": cell.height,
+							"rx": radius,
+							"fill-opacity": fade,
+							"style": {
+								fill: cell.fill,
+								transition: fillTransition
+							}
+						}, null),
+						cell.text && !slots.cell && cell.width >= cell.text.length * 6.2 + 4 && cell.height >= 13 && createVNode("text", {
+							"data-slot": "label",
+							"class": "v-charts-cell-text",
+							"x": cell.x + cell.width / 2,
+							"y": cell.y + cell.height / 2,
+							"text-anchor": "middle",
+							"dominant-baseline": "central",
+							"fill-opacity": fade,
+							"style": {
+								fill: labelColor(cell.fill),
+								fontSize: "11px",
+								fontVariantNumeric: "tabular-nums",
+								pointerEvents: "none"
+							}
+						}, [cell.text]),
+						half > 0 && createVNode("rect", {
+							"x": cell.x - half,
+							"y": cell.y - half,
+							"width": cell.width + props.gap,
+							"height": cell.height + props.gap,
+							"fill": "transparent"
+						}, null)
+					]);
+				})]),
+				activeCell && (props.activeStyle === "ring" || keyboard.value) && createVNode("rect", {
+					"class": "v-charts-cell-active",
+					"x": activeCell.x - 1,
+					"y": activeCell.y - 1,
+					"width": activeCell.width + 2,
+					"height": activeCell.height + 2,
+					"rx": radiusOf(activeCell) + 1,
+					"fill": "none",
+					"stroke-width": 1.5,
+					"style": {
+						stroke: keyboard.value ? "var(--v-charts-focus, Highlight)" : "var(--v-charts-axis, #666)",
+						pointerEvents: "none"
+					}
+				}, null)
+			]);
+		};
+	}
+});
+//#endregion
+export { CellGridLayer };

package/dist/es/chart/ChartShell.mjs

@@ -0,0 +1,139 @@
+import { provideChartAnimation } from "../model/animation.mjs";
+import { provideChartPresentation } from "../model/presentation.mjs";
+import { createTooltip, provideTooltipController } from "../model/tooltip.mjs";
+import { createChartData } from "../model/dataRange.mjs";
+import { provideRenderPhase } from "../model/runtime.mjs";
+import { chartEmits, chartListeners } from "../events/componentEvents.mjs";
+import Surface from "../container/Surface.mjs";
+import { useItemInteractions } from "../events/useItemInteractions.mjs";
+import { ChartWrapper } from "./ChartWrapper.mjs";
+import { chartDefaults } from "../model/defaults.mjs";
+import { useResponsiveSize } from "../hooks/useResponsiveSize.mjs";
+import { boxAttrs, rootAttrs } from "./shell.mjs";
+import { Fragment, computed, createVNode, defineComponent, mergeProps } from "vue";
+//#region src/chart/ChartShell.tsx
+/** Size and selection live in the root scope; descendants share only these capabilities. */
+function useChartShell(props, options) {
+	provideRenderPhase();
+	provideChartAnimation(props);
+	const size = useResponsiveSize(props);
+	const dimensions = computed(() => ({
+		width: size.effectiveWidth.value,
+		height: size.effectiveHeight.value
+	}));
+	const width = computed(() => 0);
+	const height = computed(() => 0);
+	const margin = computed(() => chartDefaults.margin);
+	const offset = computed(() => ({
+		top: margin.value.top ?? 0,
+		left: margin.value.left ?? 0,
+		bottom: margin.value.bottom ?? 0,
+		right: margin.value.right ?? 0,
+		brushBottom: margin.value.bottom ?? 0,
+		width: width.value,
+		height: height.value
+	}));
+	const viewBox = computed(() => ({
+		x: offset.value.left,
+		y: offset.value.top,
+		width: offset.value.width,
+		height: offset.value.height
+	}));
+	const tooltip = createTooltip({
+		dataRange: createChartData(() => void 0),
+		options: () => options,
+		layout: () => "horizontal",
+		size: () => dimensions.value,
+		offset: () => offset.value
+	});
+	provideTooltipController(tooltip);
+	provideChartPresentation({
+		capabilities: computed(() => options.capabilities),
+		layout: computed(() => "horizontal"),
+		width,
+		height,
+		margin,
+		viewBox,
+		offset,
+		accessibility: computed(() => true),
+		bandSize: computed(() => void 0),
+		syncId: computed(() => void 0),
+		emitter: computed(() => void 0)
+	});
+	return size;
+}
+var shellSurfaceProps = {
+	size: {
+		type: Object,
+		required: true
+	},
+	root: {
+		type: String,
+		default: "surface"
+	},
+	title: String,
+	desc: String,
+	overflow: {
+		type: String,
+		default: void 0
+	},
+	setupContent: Function
+};
+var ShellContent = /* @__PURE__ */ defineComponent({
+	name: "ShellContent",
+	inheritAttrs: false,
+	props: shellSurfaceProps,
+	setup(props, { attrs, slots }) {
+		const content = props.setupContent?.();
+		return () => createVNode(Fragment, null, [content?.before?.() ?? slots.before?.(), createVNode(Surface, mergeProps({ "data-slot": "surface" }, props.root === "surface" ? rootAttrs(attrs) : {}, {
+			"title": props.title,
+			"desc": props.desc,
+			"width": props.size.effectiveWidth.value,
+			"height": props.size.effectiveHeight.value,
+			"style": {
+				width: "100%",
+				height: "100%",
+				overflow: props.overflow
+			}
+		}), { default: () => [createVNode("g", { "data-slot": "plot" }, [content ? content.svg() : slots.svg?.()])] })]);
+	}
+});
+var ChartShell = /* @__PURE__ */ defineComponent({
+	name: "ChartShell",
+	inheritAttrs: false,
+	props: {
+		...shellSurfaceProps,
+		accessibilityLayer: Boolean
+	},
+	emits: chartEmits,
+	setup(props, { attrs, slots, emit }) {
+		const interactions = useItemInteractions();
+		return () => {
+			const size = props.size;
+			return createVNode(ChartWrapper, mergeProps(props.root === "wrapper" ? rootAttrs(attrs) : {}, boxAttrs(attrs), chartListeners(emit), {
+				"accessibilityLayer": props.accessibilityLayer,
+				"title": props.title,
+				"desc": props.desc,
+				"isResponsive": size.isResponsive.value,
+				"boxStyle": size.boxStyle.value,
+				"interactive": !size.isResponsive.value || size.measured.value,
+				"onResize": size.handleResize,
+				"width": size.effectiveWidth.value,
+				"height": size.effectiveHeight.value,
+				"interactions": interactions
+			}), { default: () => [createVNode(ShellContent, mergeProps(attrs, {
+				"size": size,
+				"root": props.root,
+				"title": props.title,
+				"desc": props.desc,
+				"overflow": props.overflow,
+				"setupContent": props.setupContent
+			}), {
+				svg: slots.svg,
+				before: slots.before
+			}), slots.default?.()] });
+		};
+	}
+});
+//#endregion
+export { ChartShell, useChartShell };