vccs 0.6.0 → 1.0.0-beta.2

package/dist/es/chart/SunburstChart.mjs

@@ -1,51 +1,48 @@
+import { useTooltipController } from "../model/tooltip.mjs";
 import { polarToCartesian } from "../utils/polar.mjs";
-import { addTooltipEntrySettings, mouseLeaveItem, removeTooltipEntrySettings, setActiveClickItemIndex, setActiveMouseOverItemIndex } from "../state/tooltipSlice.mjs";
-import { useAppDispatch } from "../state/hooks.mjs";
+import { useTrackedData } from "../hooks/useTrackedData.mjs";
+import { seriesColor } from "../utils/theme.mjs";
 import { Layer } from "../container/Layer.mjs";
-import { createRechartsStore } from "../state/store.mjs";
-import { ChartsWrapper } from "./ChartsWrapper.mjs";
-import Surface from "../container/Surface.mjs";
+import { useAnimationCallbacks } from "../animation/useAnimationCallbacks.mjs";
+import { useKeyedTransition } from "../animation/useKeyedTransition.mjs";
+import { forwardsHtmlAttributes } from "../utils/attributes.mjs";
+import { chartEmits, chartListeners } from "../events/componentEvents.mjs";
+import { chartSizeProps } from "../hooks/useResponsiveSize.mjs";
+import { standaloneChartOptions } from "./shell.mjs";
+import { ChartShell, useChartShell } from "./ChartShell.mjs";
 import { Sector } from "../shape/Sector.mjs";
 import { computeSunburstLayout } from "./sunburstUtils.mjs";
-import { computed, createVNode, defineComponent, isVNode, watchEffect } from "vue";
-import { provideStore } from "@reduxjs/vue-redux";
-import { get } from "lodash-es";
+import { computed, createVNode, defineComponent, isVNode, mergeProps, reactive, toRefs } from "vue";
 //#region src/chart/SunburstChart.tsx
 function _isSlot(s) {
 	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
 }
-var sunburstPayloadSearcher = (data, activeIndex) => {
-	if (!data || !activeIndex) return void 0;
-	return get(data, activeIndex);
-};
-var sunburstOptions = {
-	chartName: "SunburstChart",
-	defaultTooltipEventType: "item",
-	validateTooltipEventTypes: ["item"],
-	tooltipPayloadSearcher: sunburstPayloadSearcher,
-	eventEmitter: void 0
-};
 var SunburstChartVueProps = {
+	title: {
+		type: String,
+		default: "Sunburst chart"
+	},
+	desc: String,
 	data: {
 		type: Object,
 		required: true
 	},
 	dataKey: {
-		type: String,
+		type: [
+			String,
+			Number,
+			Function
+		],
 		default: "value"
 	},
 	nameKey: {
-		type: String,
+		type: [
+			String,
+			Number,
+			Function
+		],
 		default: "name"
 	},
-	width: {
-		type: Number,
-		required: true
-	},
-	height: {
-		type: Number,
-		required: true
-	},
 	cx: {
 		type: Number,
 		default: void 0
@@ -80,150 +77,210 @@ var SunburstChartVueProps = {
 	},
 	fill: {
 		type: String,
-		default: "#333"
+		default: void 0
 	},
 	stroke: {
 		type: String,
-		default: "#fff"
-	},
-	onClick: {
-		type: Function,
-		default: void 0
+		default: "var(--v-charts-background, #fff)"
 	},
-	onMouseEnter: {
-		type: Function,
-		default: void 0
+	isAnimationActive: {
+		type: Boolean,
+		default: true
 	},
-	onMouseLeave: {
-		type: Function,
+	transition: {
+		type: Object,
 		default: void 0
 	}
 };
-var SunburstInner = /* @__PURE__ */ defineComponent({
-	name: "SunburstInner",
-	props: SunburstChartVueProps,
-	slots: Object,
-	setup(props, { slots }) {
-		const dispatch = useAppDispatch();
-		const resolvedCx = computed(() => props.cx ?? props.width / 2);
-		const resolvedCy = computed(() => props.cy ?? props.height / 2);
-		const resolvedOuterRadius = computed(() => props.outerRadius ?? Math.min(props.width, props.height) / 2);
-		const nodes = computed(() => computeSunburstLayout({
-			data: props.data,
-			cx: resolvedCx.value,
-			cy: resolvedCy.value,
-			innerRadius: props.innerRadius,
-			outerRadius: resolvedOuterRadius.value,
-			startAngle: props.startAngle,
-			endAngle: props.endAngle,
-			dataKey: props.dataKey,
-			ringPadding: props.ringPadding,
-			padding: props.padding
-		}));
-		watchEffect((onCleanup) => {
-			const tooltipEntrySettings = {
-				dataDefinedOnItem: props.data,
-				positions: void 0,
-				settings: {
-					stroke: props.stroke,
-					strokeWidth: void 0,
-					fill: props.fill,
-					dataKey: props.dataKey,
-					nameKey: props.nameKey,
-					name: void 0,
-					hide: false,
-					type: void 0,
-					color: props.fill,
-					unit: ""
-				}
-			};
-			dispatch(addTooltipEntrySettings(tooltipEntrySettings));
-			onCleanup(() => {
-				dispatch(removeTooltipEntrySettings(tooltipEntrySettings));
-			});
+var sunburstItemEmits = {
+	"node-click": (_node, _index, _event) => true,
+	"node-mouseenter": (_node, _index, _event) => true,
+	"node-mouseleave": (_node, _index, _event) => true,
+	"animation-start": () => true,
+	"animation-end": () => true
+};
+/** The drawing, set up inside the measured surface so its scope follows the surface's. */
+function useSunburst(props, slots, emit) {
+	const trackedData = useTrackedData(() => [props.data]);
+	const data = computed(() => ({ ...trackedData.value[0] }));
+	const tooltip = useTooltipController();
+	const resolvedCx = computed(() => props.cx ?? props.width / 2);
+	const resolvedCy = computed(() => props.cy ?? props.height / 2);
+	const resolvedOuterRadius = computed(() => props.outerRadius ?? Math.min(props.width, props.height) / 2);
+	const nodes = computed(() => computeSunburstLayout({
+		data: data.value,
+		cx: resolvedCx.value,
+		cy: resolvedCy.value,
+		innerRadius: props.innerRadius,
+		outerRadius: resolvedOuterRadius.value,
+		startAngle: props.startAngle,
+		endAngle: props.endAngle,
+		dataKey: props.dataKey,
+		nameKey: props.nameKey,
+		ringPadding: props.ringPadding,
+		padding: props.padding
+	}));
+	const callbacks = useAnimationCallbacks(() => emit("animation-start"), () => emit("animation-end"));
+	let appeared = false;
+	const mix = (a, b, t) => a + (b - a) * t;
+	const collapsed = (node, angle) => ({
+		...node,
+		startAngle: angle,
+		endAngle: angle
+	});
+	const { items } = useKeyedTransition(() => nodes.value, {
+		key: (node) => node.path,
+		connected: true,
+		interpolate: (from, to, t) => ({
+			...to,
+			startAngle: mix(from.startAngle, to.startAngle, t),
+			endAngle: mix(from.endAngle, to.endAngle, t),
+			innerRadius: mix(from.innerRadius, to.innerRadius, t),
+			outerRadius: mix(from.outerRadius, to.outerRadius, t)
+		}),
+		enterFrom: (to, { previous, next }) => collapsed(to, !appeared ? props.startAngle : previous?.depth === to.depth ? previous.endAngle : next?.depth === to.depth ? next.startAngle : to.startAngle),
+		exitTo: (from, { previous, next }) => collapsed(from, previous?.depth === from.depth ? previous.endAngle : next?.depth === from.depth ? next.startAngle : from.startAngle),
+		isActive: () => props.isAnimationActive,
+		transition: () => props.transition,
+		onStart: () => {
+			callbacks.onStart();
+			if (nodes.value.length) appeared = true;
+		},
+		onEnd: callbacks.onEnd
+	});
+	const tooltipConfiguration = computed(() => {
+		return {
+			dataDefinedOnItem: data.value,
+			values: Object.fromEntries(nodes.value.map((node) => [node.tooltipIndex, node.value])),
+			positions: void 0,
+			keyboardItems: [...nodes.value].sort((a, b) => {
+				if (a.tooltipIndex.startsWith(`${b.tooltipIndex}.`)) return 1;
+				if (b.tooltipIndex.startsWith(`${a.tooltipIndex}.`)) return -1;
+				return a.startAngle - b.startAngle || a.depth - b.depth;
+			}).map((node) => ({
+				identity: node.payload,
+				index: nodes.value.indexOf(node),
+				payloadKey: node.tooltipIndex,
+				coordinate: getTooltipCoordinate(node),
+				onClick: (event) => handleClick(node, event)
+			})),
+			settings: {
+				stroke: props.stroke,
+				strokeWidth: void 0,
+				fill: props.fill,
+				dataKey: props.dataKey,
+				nameKey: props.nameKey,
+				name: void 0,
+				hide: false,
+				type: void 0,
+				color: props.fill,
+				unit: ""
+			}
+		};
+	});
+	tooltip.entries.register(tooltipConfiguration);
+	function getNodeFill(node) {
+		if (node.fill) return node.fill;
+		const branchIndex = Number(node.tooltipIndex.match(/^children\[(\d+)\]/)?.[1] ?? 0);
+		const branch = props.data.children?.[branchIndex];
+		return props.fill ?? branch?.fill ?? seriesColor(branchIndex);
+	}
+	function getTooltipCoordinate(node) {
+		const midAngle = (node.startAngle + node.endAngle) / 2;
+		const midRadius = (node.innerRadius + node.outerRadius) / 2;
+		return polarToCartesian(node.cx, node.cy, midRadius, midAngle);
+	}
+	const indexOf = (node) => nodes.value.findIndex((candidate) => candidate.path === node.path);
+	function handleMouseEnter(node, e) {
+		emit("node-mouseenter", node, indexOf(node), e);
+		tooltip.activate("hover", {
+			type: "item",
+			configuration: tooltipConfiguration.value,
+			index: indexOf(node),
+			coordinate: getTooltipCoordinate(node)
 		});
-		function getNodeFill(node) {
-			if (node.fill) return node.fill;
-			return props.fill;
-		}
-		function getTooltipCoordinate(node) {
-			const midAngle = (node.startAngle + node.endAngle) / 2;
-			const midRadius = (node.innerRadius + node.outerRadius) / 2;
-			return polarToCartesian(node.cx, node.cy, midRadius, midAngle);
-		}
-		function handleMouseEnter(node, e) {
-			dispatch(setActiveMouseOverItemIndex({
-				activeIndex: node.tooltipIndex,
-				activeDataKey: props.dataKey,
-				activeCoordinate: getTooltipCoordinate(node)
-			}));
-			props.onMouseEnter?.(node.payload, e);
-		}
-		function handleMouseLeave(node, e) {
-			dispatch(mouseLeaveItem());
-			props.onMouseLeave?.(node.payload, e);
-		}
-		function handleClick(node, e) {
-			dispatch(setActiveClickItemIndex({
-				activeIndex: node.tooltipIndex,
-				activeDataKey: props.dataKey,
-				activeCoordinate: getTooltipCoordinate(node)
-			}));
-			props.onClick?.(node.payload, e);
-		}
-		function renderSector(node, index) {
-			const nodeFill = getNodeFill(node);
-			const slotProps = {
-				...node,
-				index
-			};
-			if (slots.content) return createVNode("g", {
-				"key": `sector-${index}`,
-				"class": "v-charts-sunburst-sector",
-				"onClick": (e) => handleClick(node, e),
-				"onMouseenter": (e) => handleMouseEnter(node, e),
-				"onMouseleave": (e) => handleMouseLeave(node, e)
-			}, [slots.content(slotProps)]);
-			return createVNode("g", {
-				"key": `sector-${index}`,
-				"class": "v-charts-sunburst-sector",
-				"onClick": (e) => handleClick(node, e),
-				"onMouseenter": (e) => handleMouseEnter(node, e),
-				"onMouseleave": (e) => handleMouseLeave(node, e)
-			}, [createVNode(Sector, {
-				"cx": node.cx,
-				"cy": node.cy,
-				"innerRadius": node.innerRadius,
-				"outerRadius": node.outerRadius,
-				"startAngle": node.startAngle,
-				"endAngle": node.endAngle,
-				"fill": nodeFill,
-				"stroke": props.stroke
-			}, null)]);
-		}
-		return () => {
-			let _slot;
-			return createVNode(Surface, {
-				"width": props.width,
-				"height": props.height
-			}, { default: () => [createVNode(Layer, { "class": "v-charts-sunburst" }, _isSlot(_slot = nodes.value.map((node, index) => renderSector(node, index))) ? _slot : { default: () => [_slot] })] });
+	}
+	function handleMouseLeave(node, e) {
+		tooltip.clear("hover", "item");
+		emit("node-mouseleave", node, indexOf(node), e);
+	}
+	function handleClick(node, e) {
+		tooltip.activate("click", {
+			type: "item",
+			configuration: tooltipConfiguration.value,
+			index: indexOf(node),
+			coordinate: getTooltipCoordinate(node)
+		});
+		emit("node-click", node, indexOf(node), e);
+	}
+	const listeners = (node, exiting) => exiting ? { style: { pointerEvents: "none" } } : {
+		onClick: (e) => handleClick(node, e),
+		onMouseenter: (e) => handleMouseEnter(node, e),
+		onMouseleave: (e) => handleMouseLeave(node, e)
+	};
+	function renderSector(node, index, key, exiting) {
+		const nodeFill = getNodeFill(node);
+		const slotProps = {
+			...node,
+			index
 		};
+		if (slots.content) return createVNode("g", mergeProps({
+			"key": key,
+			"class": "v-charts-sunburst-sector"
+		}, listeners(node, exiting)), [slots.content(slotProps)]);
+		return createVNode("g", mergeProps({
+			"key": key,
+			"class": "v-charts-sunburst-sector"
+		}, listeners(node, exiting)), [createVNode(Sector, {
+			"cx": node.cx,
+			"cy": node.cy,
+			"innerRadius": node.innerRadius,
+			"outerRadius": node.outerRadius,
+			"startAngle": node.startAngle,
+			"endAngle": node.endAngle,
+			"fill": nodeFill,
+			"stroke": props.stroke
+		}, null)]);
 	}
-});
-var SunburstChart = /* @__PURE__ */ defineComponent({
+	return () => {
+		let _slot;
+		return createVNode(Layer, {
+			"data-slot": "series",
+			"class": "v-charts-sunburst"
+		}, _isSlot(_slot = items.value.map(({ key, value, phase }, index) => renderSector(value, index, key, phase === "exit"))) ? _slot : { default: () => [_slot] });
+	};
+}
+var SunburstChart = /* @__PURE__ */ forwardsHtmlAttributes(/* @__PURE__ */ defineComponent({
 	name: "SunburstChart",
-	props: SunburstChartVueProps,
+	props: {
+		...SunburstChartVueProps,
+		...chartSizeProps
+	},
+	inheritAttrs: false,
+	emits: {
+		...chartEmits,
+		...sunburstItemEmits
+	},
 	slots: Object,
-	setup(props, { slots }) {
-		provideStore({ store: createRechartsStore({ options: sunburstOptions }, "SunburstChart") });
+	setup(props, { slots, emit, attrs }) {
+		const size = useChartShell(props, standaloneChartOptions("SunburstChart"));
+		const setupContent = () => ({ svg: useSunburst(reactive({
+			...toRefs(props),
+			width: size.effectiveWidth,
+			height: size.effectiveHeight
+		}), slots, emit) });
 		return () => {
 			if (!props.data?.children || props.data.children.length === 0) return null;
-			return createVNode(ChartsWrapper, {
-				"width": props.width,
-				"height": props.height
-			}, { default: () => [createVNode(SunburstInner, props, { content: slots.content }), slots.default?.()] });
+			return createVNode(ChartShell, mergeProps(attrs, chartListeners(emit), {
+				"size": size,
+				"root": "wrapper",
+				"setupContent": setupContent,
+				"accessibilityLayer": true,
+				"title": props.title,
+				"desc": props.desc
+			}), { default: slots.default });
 		};
 	}
-});
+}));
 //#endregion
-export { SunburstChart, SunburstChartVueProps, sunburstPayloadSearcher };
+export { SunburstChart };

package/dist/es/chart/Tracker.mjs

@@ -0,0 +1,175 @@
+import { useTrackedData } from "../hooks/useTrackedData.mjs";
+import { Layer } from "../container/Layer.mjs";
+import { getValueByDataKey } from "../utils/chart.mjs";
+import { cellGridEmits, cellGridListeners, chartEmits, chartListeners } from "../events/componentEvents.mjs";
+import { chartSizeProps } from "../hooks/useResponsiveSize.mjs";
+import { cellGridSharedProps } from "./cellGridProps.mjs";
+import { standaloneChartOptions } from "./shell.mjs";
+import { ChartShell, useChartShell } from "./ChartShell.mjs";
+import { CellGridLayer } from "./CellGridLayer.mjs";
+import { formatDay, toDayNumber } from "./cellGridUtils.mjs";
+import { computed, createVNode, defineComponent, mergeProps, reactive } from "vue";
+//#region src/chart/Tracker.tsx
+/** Default fill per status. Every color reads a CSS variable first, so themes can restyle it. */
+var trackerStatusColors = {
+	up: "var(--v-charts-status-up, #22c55e)",
+	degraded: "var(--v-charts-status-degraded, #f59e0b)",
+	down: "var(--v-charts-status-down, #ef4444)",
+	maintenance: "var(--v-charts-status-maintenance, #3b82f6)"
+};
+var trackerStatusLabels = {
+	up: "Operational",
+	degraded: "Degraded",
+	down: "Down",
+	maintenance: "Maintenance"
+};
+var NO_DATA_COLOR = "var(--v-charts-muted, #e5e5e5)";
+var TrackerVueProps = {
+	...cellGridSharedProps,
+	/** One row per bar, oldest first. */
+	data: {
+		type: Array,
+		required: true
+	},
+	/** The field holding the status (`up`, `degraded`, `down`, `maintenance` or your own). */
+	dataKey: {
+		type: [
+			String,
+			Number,
+			Function
+		],
+		default: "status"
+	},
+	/** The field naming the bar, e.g. its date. It is also the bar's identity across updates. */
+	nameKey: {
+		type: [
+			String,
+			Number,
+			Function
+		],
+		default: "date"
+	},
+	/** Fill per status, merged over the defaults. */
+	statusColors: {
+		type: Object,
+		default: () => ({})
+	},
+	/** Readable text per status for tooltips and screen readers, merged over the defaults. */
+	statusLabels: {
+		type: Object,
+		default: () => ({})
+	},
+	gap: {
+		type: Number,
+		default: 2
+	},
+	/** Locale for dates in tooltips. Fixed by default so server and client render the same. */
+	locale: {
+		type: String,
+		default: "en-US"
+	},
+	desc: String,
+	title: {
+		type: String,
+		default: "Status history"
+	}
+};
+/**
+* Uptime and status history: one bar per period, colored by status.
+*
+* ```vue
+* <Tracker :data="days" data-key="status" name-key="date"><Tooltip /></Tracker>
+* ```
+*/
+var Tracker = /* @__PURE__ */ defineComponent({
+	name: "Tracker",
+	props: {
+		...TrackerVueProps,
+		...chartSizeProps
+	},
+	inheritAttrs: false,
+	emits: {
+		...chartEmits,
+		...cellGridEmits
+	},
+	slots: Object,
+	setup(props, { emit, slots, attrs }) {
+		const size = useChartShell(reactive({
+			width: computed(() => props.width),
+			height: computed(() => props.height ?? (props.aspect ? void 0 : 32)),
+			aspect: computed(() => props.aspect),
+			initialDimension: computed(() => props.initialDimension)
+		}), standaloneChartOptions("Tracker"));
+		const rows = useTrackedData(() => props.data);
+		function labelOf(name, index) {
+			if (name == null) return `#${index + 1}`;
+			const day = typeof name === "string" || name instanceof Date ? toDayNumber(name) : void 0;
+			return day === void 0 ? String(name) : formatDay(day, props.locale, {
+				month: "short",
+				day: "numeric",
+				year: "numeric"
+			});
+		}
+		const cells = computed(() => {
+			const data = rows.value ?? [];
+			const width = size.effectiveWidth.value;
+			const height = size.effectiveHeight.value;
+			const count = data.length;
+			if (count === 0 || !(width > 0) || !(height > 0)) return [];
+			const gap = (width - props.gap * (count - 1)) / count >= 3 ? props.gap : 0;
+			const step = (width - gap * (count - 1)) / count;
+			const colors = {
+				...trackerStatusColors,
+				...props.statusColors
+			};
+			const labels = {
+				...trackerStatusLabels,
+				...props.statusLabels
+			};
+			const seen = /* @__PURE__ */ new Map();
+			return data.map((row, index) => {
+				const status = getValueByDataKey(row, props.dataKey);
+				const name = getValueByDataKey(row, props.nameKey);
+				const base = name == null ? `#${index}` : String(name);
+				const repeat = seen.get(base) ?? 0;
+				seen.set(base, repeat + 1);
+				return {
+					key: repeat === 0 ? base : `${base}\u0000${repeat}`,
+					x: index * (step + gap),
+					y: 0,
+					width: step,
+					height,
+					fill: status == null ? NO_DATA_COLOR : colors[status] ?? NO_DATA_COLOR,
+					row: 0,
+					column: index,
+					label: labelOf(name, index),
+					value: status == null ? null : typeof status === "number" ? status : String(status),
+					valueText: status == null ? "No data" : labels[status] ?? String(status),
+					payload: row
+				};
+			});
+		});
+		return () => createVNode(ChartShell, mergeProps(attrs, chartListeners(emit), {
+			"size": size,
+			"title": props.title,
+			"desc": props.desc,
+			"overflow": "visible"
+		}), {
+			svg: () => createVNode(Layer, { "class": "v-charts-tracker" }, { default: () => [createVNode(CellGridLayer, mergeProps({
+				"cells": cells.value,
+				"gap": props.gap,
+				"activeIndex": props.activeIndex,
+				"radius": props.radius,
+				"activeStyle": "dim",
+				"grow": "bottom",
+				"title": props.title,
+				"isAnimationActive": props.isAnimationActive,
+				"transition": props.transition,
+				"entrance": "slide"
+			}, cellGridListeners(emit)), { cell: slots.cell })] }),
+			default: slots.default
+		});
+	}
+});
+//#endregion
+export { Tracker };