vccs 0.6.0 → 1.0.0-beta.2

package/dist/es/chart/ChartWrapper.mjs

@@ -0,0 +1,215 @@
+import { useTooltipController } from "../model/tooltip.mjs";
+import { provideChartInView, provideChartLayers } from "../model/runtime.mjs";
+import { classProp } from "../types/common.mjs";
+import { chartEmits } from "../events/componentEvents.mjs";
+import { getChartPointer } from "../utils/pointer.mjs";
+import { useChartCallbacks } from "../events/useChartCallbacks.mjs";
+import { createVNode, defineComponent, mergeProps, ref, useId, watch } from "vue";
+import { useResizeObserver } from "@vueuse/core";
+//#region src/chart/ChartWrapper.tsx
+var chartWrapperProps = {
+	accessibilityLayer: {
+		type: Boolean,
+		default: false
+	},
+	title: String,
+	desc: String,
+	descriptionId: String,
+	/** Overrides the default `application` role of an accessible chart. */
+	role: String,
+	tabIndex: Number,
+	class: classProp,
+	height: {
+		type: Number,
+		required: true
+	},
+	isResponsive: {
+		type: Boolean,
+		default: false
+	},
+	/** Box style from useResponsiveSize. */
+	boxStyle: {
+		type: Object,
+		required: true
+	},
+	interactive: {
+		type: Boolean,
+		default: true
+	},
+	style: { type: [
+		String,
+		Object,
+		Array
+	] },
+	width: {
+		type: Number,
+		required: true
+	}
+};
+var ChartWrapper = /* @__PURE__ */ defineComponent({
+	name: "ChartWrapper",
+	props: {
+		...chartWrapperProps,
+		interactions: {
+			type: Object,
+			required: true
+		}
+	},
+	inheritAttrs: false,
+	emits: {
+		...chartEmits,
+		resize: (_width, _height) => true
+	},
+	setup(props, { slots, emit, attrs }) {
+		const descriptionId = useId();
+		const tooltip = useTooltipController();
+		const callHandler = useChartCallbacks();
+		const interactions = props.interactions;
+		const wrapperEl = ref(null);
+		provideChartLayers({ portal: wrapperEl });
+		const innerRef = (value) => {
+			wrapperEl.value = value instanceof HTMLDivElement ? value : null;
+		};
+		provideChartInView(wrapperEl);
+		watch(() => props.isResponsive ? wrapperEl.value : null, (element, _, onCleanup) => {
+			if (!element) return;
+			onCleanup(useResizeObserver(element, (entries) => {
+				const box = entries[0]?.contentRect;
+				if (box) emit("resize", box.width, box.height);
+			}).stop);
+		}, {
+			immediate: true,
+			flush: "post"
+		});
+		const myOnClick = (e) => {
+			const chartPointer = getChartPointer(e);
+			if (chartPointer) interactions.click(chartPointer, e.target);
+			callHandler((state, event) => emit("click", state, event), e);
+		};
+		const myOnMouseEnter = (e) => {
+			const chartPointer = getChartPointer(e);
+			if (chartPointer) interactions.move(chartPointer, e.target);
+			callHandler((state, event) => emit("mouseenter", state, event), e);
+		};
+		const myOnMouseLeave = (e) => {
+			tooltip.clear("hover");
+			callHandler((state, event) => emit("mouseleave", state, event), e);
+		};
+		const myOnMouseMove = (e) => {
+			const chartPointer = getChartPointer(e);
+			if (chartPointer) interactions.move(chartPointer, e.target);
+			callHandler((state, event) => emit("mousemove", state, event), e);
+		};
+		const focusVisible = ref(false);
+		let pointerFocus = false;
+		const onFocus = (e) => {
+			if (e.target !== wrapperEl.value || !props.accessibilityLayer) return;
+			focusVisible.value = !pointerFocus && wrapperEl.value.matches(":focus-visible");
+			if (focusVisible.value) interactions.focus();
+		};
+		const onBlur = () => {
+			focusVisible.value = false;
+			pointerFocus = false;
+		};
+		const onPointerDown = () => {
+			pointerFocus = true;
+			focusVisible.value = false;
+		};
+		const onKeyDown = (e) => {
+			if (e.target !== wrapperEl.value || !props.accessibilityLayer) return;
+			pointerFocus = false;
+			focusVisible.value = true;
+			if ([
+				"ArrowRight",
+				"ArrowDown",
+				"ArrowLeft",
+				"ArrowUp",
+				"Home",
+				"End",
+				"Escape",
+				"Enter"
+			].includes(e.key)) e.preventDefault();
+			interactions.keyDown(e);
+		};
+		const myOnContextMenu = (e) => {
+			callHandler((state, event) => emit("contextmenu", state, event), e);
+		};
+		const myOnDoubleClick = (e) => {
+			callHandler((state, event) => emit("dblclick", state, event), e);
+		};
+		const myOnMouseDown = (e) => {
+			onPointerDown();
+			callHandler((state, event) => emit("mousedown", state, event), e);
+		};
+		const myOnMouseUp = (e) => {
+			callHandler((state, event) => emit("mouseup", state, event), e);
+		};
+		const myOnTouchStart = (e) => {
+			callHandler((state, event) => emit("touchstart", state, event), e);
+		};
+		const myOnTouchMove = (e) => {
+			interactions.touchMove(e);
+			callHandler((state, event) => emit("touchmove", state, event), e);
+		};
+		const myOnTouchEnd = (e) => {
+			callHandler((state, event) => emit("touchend", state, event), e);
+		};
+		return () => createVNode("div", mergeProps(attrs, {
+			"data-slot": "chart",
+			"class": ["v-charts-wrapper", props.class],
+			"style": [
+				props.boxStyle,
+				props.style,
+				!props.interactive && { pointerEvents: "none" },
+				focusVisible.value && {
+					outline: "2px solid var(--v-charts-focus, Highlight)",
+					outlineOffset: "2px"
+				}
+			],
+			"role": props.accessibilityLayer ? props.role ?? "application" : void 0,
+			"tabindex": props.accessibilityLayer ? props.tabIndex ?? 0 : void 0,
+			"aria-label": props.accessibilityLayer ? props.title : void 0,
+			"aria-describedby": props.accessibilityLayer ? props.descriptionId ?? (props.desc ? descriptionId : void 0) : void 0,
+			"data-focus-visible": focusVisible.value ? "" : void 0,
+			"onBlur": onBlur,
+			"onPointerdown": onPointerDown,
+			"onClick": myOnClick,
+			"onContextmenu": myOnContextMenu,
+			"onDblclick": myOnDoubleClick,
+			"onFocus": onFocus,
+			"onKeydown": onKeyDown,
+			"onMousedown": myOnMouseDown,
+			"onMouseenter": myOnMouseEnter,
+			"onMouseleave": myOnMouseLeave,
+			"onMousemove": myOnMouseMove,
+			"onMouseup": myOnMouseUp,
+			"onTouchend": myOnTouchEnd,
+			"onTouchmove": myOnTouchMove,
+			"onTouchstart": myOnTouchStart,
+			"ref": innerRef
+		}), [
+			props.desc && createVNode("span", {
+				"id": descriptionId,
+				"hidden": true
+			}, [props.desc]),
+			slots.default?.(),
+			props.accessibilityLayer && createVNode("div", {
+				"aria-live": "polite",
+				"aria-atomic": "true",
+				"style": {
+					position: "absolute",
+					width: "1px",
+					height: "1px",
+					padding: 0,
+					margin: "-1px",
+					overflow: "hidden",
+					clipPath: "inset(50%)",
+					whiteSpace: "nowrap",
+					border: 0
+				}
+			}, [tooltip.announcement.value])
+		]);
+	}
+});
+//#endregion
+export { ChartWrapper, chartWrapperProps };

package/dist/es/chart/ChartsWrapper.mjs

@@ -1,183 +1,28 @@
-import { classProp } from "../types/common.mjs";
-import { getChartPointer } from "../utils/chart.mjs";
-import { mouseLeaveChart } from "../state/tooltipSlice.mjs";
-import { useAppDispatch } from "../state/hooks.mjs";
-import { mouseClickAction, mouseMoveAction } from "../state/mouseEventsMiddleware.mjs";
-import { focusAction, keyDownAction } from "../state/keyboardEventsMiddleware.mjs";
-import { externalEventAction } from "../state/externalEventsMiddleware.mjs";
-import { touchEventAction } from "../state/touchEventsMiddleware.mjs";
-import { useSynchronisedEventsFromOtherCharts } from "../events/useChartSynchronisation.mjs";
-import { useReportScale } from "../state/utils/useReportScale.mjs";
-import { providePortalRaw } from "./TooltipPortalContext.mjs";
-import { provideLegendPortalRaw } from "./LegendPortalContext.mjs";
-import { createVNode, defineComponent, ref, watch } from "vue";
-import { useResizeObserver } from "@vueuse/core";
+import { useChart } from "../model/chart.mjs";
+import { useSynchronisedEventsFromOtherCharts } from "../events/sync.mjs";
+import { chartEmits, chartListeners } from "../events/componentEvents.mjs";
+import { useChartInteractions } from "../events/useChartInteractions.mjs";
+import { ChartWrapper, chartWrapperProps } from "./ChartWrapper.mjs";
+import { createVNode, defineComponent, isVNode, mergeProps } from "vue";
 //#region src/chart/ChartsWrapper.tsx
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
 var ChartsWrapper = /* @__PURE__ */ defineComponent({
 	name: "ChartsWrapper",
-	props: {
-		class: classProp,
-		height: {
-			type: Number,
-			required: true
-		},
-		onClick: { type: Function },
-		onContextMenu: { type: Function },
-		onDoubleClick: { type: Function },
-		onMouseDown: { type: Function },
-		onMouseEnter: { type: Function },
-		onMouseLeave: { type: Function },
-		onMouseMove: { type: Function },
-		onMouseUp: { type: Function },
-		onResize: { type: Function },
-		onTouchEnd: { type: Function },
-		onTouchMove: { type: Function },
-		onTouchStart: { type: Function },
-		responsive: {
-			type: Boolean,
-			default: false
-		},
-		style: { type: [
-			String,
-			Object,
-			Array
-		] },
-		width: {
-			type: Number,
-			required: true
-		}
+	props: chartWrapperProps,
+	inheritAttrs: false,
+	emits: {
+		...chartEmits,
+		resize: (_width, _height) => true
 	},
-	setup(props, { slots }) {
-		const dispatch = useAppDispatch();
-		useSynchronisedEventsFromOtherCharts();
-		const scaleRef = useReportScale();
-		const tooltipPortal = ref(null);
-		const legendPortal = ref(null);
-		providePortalRaw(tooltipPortal);
-		provideLegendPortalRaw(legendPortal);
-		const wrapperEl = ref(null);
-		const innerRef = (node) => {
-			scaleRef.value = node;
-			tooltipPortal.value = node;
-			legendPortal.value = node;
-			wrapperEl.value = node;
-		};
-		watch(() => props.responsive, (responsive, _, onCleanup) => {
-			if (!responsive) return;
-			onCleanup(useResizeObserver(wrapperEl, (entries) => {
-				const { width, height } = entries[0].contentRect;
-				props.onResize?.(width, height);
-			}).stop);
-		}, { immediate: true });
-		const myOnClick = (e) => {
-			const chartPointer = getChartPointer(e);
-			if (chartPointer) dispatch(mouseClickAction(chartPointer));
-			dispatch(externalEventAction({
-				handler: props.onClick,
-				event: e
-			}));
-		};
-		const myOnMouseEnter = (e) => {
-			const chartPointer = getChartPointer(e);
-			if (chartPointer) dispatch(mouseMoveAction(chartPointer));
-			dispatch(externalEventAction({
-				handler: props.onMouseEnter,
-				event: e
-			}));
-		};
-		const myOnMouseLeave = (e) => {
-			dispatch(mouseLeaveChart());
-			dispatch(externalEventAction({
-				handler: props.onMouseLeave,
-				event: e
-			}));
-		};
-		const myOnMouseMove = (e) => {
-			const chartPointer = getChartPointer(e);
-			if (chartPointer) dispatch(mouseMoveAction(chartPointer));
-			dispatch(externalEventAction({
-				handler: props.onMouseMove,
-				event: e
-			}));
-		};
-		const onFocus = () => {
-			dispatch(focusAction());
-		};
-		const onKeyDown = (e) => {
-			dispatch(keyDownAction(e.key));
-		};
-		const myOnContextMenu = (e) => {
-			dispatch(externalEventAction({
-				handler: props.onContextMenu,
-				event: e
-			}));
-		};
-		const myOnDoubleClick = (e) => {
-			dispatch(externalEventAction({
-				handler: props.onDoubleClick,
-				event: e
-			}));
-		};
-		const myOnMouseDown = (e) => {
-			dispatch(externalEventAction({
-				handler: props.onMouseDown,
-				event: e
-			}));
-		};
-		const myOnMouseUp = (e) => {
-			dispatch(externalEventAction({
-				handler: props.onMouseUp,
-				event: e
-			}));
-		};
-		const myOnTouchStart = (e) => {
-			dispatch(externalEventAction({
-				handler: props.onTouchStart,
-				event: e
-			}));
-		};
-		const myOnTouchMove = (e) => {
-			dispatch(touchEventAction(e));
-			dispatch(externalEventAction({
-				handler: props.onTouchMove,
-				event: e
-			}));
-		};
-		const myOnTouchEnd = (e) => {
-			dispatch(externalEventAction({
-				handler: props.onTouchEnd,
-				event: e
-			}));
-		};
-		return () => createVNode("div", {
-			"class": ["v-charts-wrapper", props.class],
-			"style": [props.responsive ? {
-				position: "relative",
-				cursor: "default",
-				width: "100%",
-				height: "100%"
-			} : {
-				position: "relative",
-				cursor: "default",
-				width: `${props.width}px`,
-				height: `${props.height}px`
-			}, props.style],
-			"role": "application",
-			"onClick": myOnClick,
-			"onContextmenu": myOnContextMenu,
-			"onDblclick": myOnDoubleClick,
-			"onFocus": onFocus,
-			"onKeydown": onKeyDown,
-			"onMousedown": myOnMouseDown,
-			"onMouseenter": myOnMouseEnter,
-			"onMouseleave": myOnMouseLeave,
-			"onMousemove": myOnMouseMove,
-			"onMouseup": myOnMouseUp,
-			"onTouchend": myOnTouchEnd,
-			"onTouchmove": myOnTouchMove,
-			"onTouchstart": myOnTouchStart,
-			"ref": innerRef
-		}, [slots.default?.()]);
+	setup(props, { attrs, slots, emit }) {
+		const interactions = useChartInteractions();
+		useSynchronisedEventsFromOtherCharts(useChart());
+		return () => createVNode(ChartWrapper, mergeProps(attrs, props, chartListeners(emit), {
+			"interactions": interactions,
+			"onResize": (width, height) => emit("resize", width, height)
+		}), _isSlot(slots) ? slots : { default: () => [slots] });
 	}
 });
 //#endregion

package/dist/es/chart/CohortChart.mjs

@@ -0,0 +1,169 @@
+import { toFiniteNumber } from "../utils/validate.mjs";
+import { seriesColor } from "../utils/theme.mjs";
+import { getValueByDataKey } from "../utils/chart.mjs";
+import { cellGridEmits, cellGridListeners, chartEmits, chartListeners } from "../events/componentEvents.mjs";
+import { chartSizeProps } from "../hooks/useResponsiveSize.mjs";
+import { cellGridSharedProps, valueFormatProps } from "./cellGridProps.mjs";
+import { HeatmapView } from "./Heatmap.mjs";
+import { computed, createVNode, defineComponent, mergeProps } from "vue";
+//#region src/chart/CohortChart.tsx
+function cohortCell(cell) {
+	const first = cell.rows[0];
+	return first && {
+		x: cell.x,
+		y: cell.y,
+		value: cell.value,
+		row: first.row,
+		rows: cell.rows.map((source) => source.row),
+		period: first.period
+	};
+}
+var CohortChartVueProps = {
+	...cellGridSharedProps,
+	/** One row per cohort, oldest first. */
+	data: {
+		type: Array,
+		required: true
+	},
+	/** Field naming the cohort, e.g. its signup month. */
+	cohortKey: {
+		type: [
+			String,
+			Number,
+			Function
+		],
+		default: "cohort"
+	},
+	/**
+	* Field with the counts per period: index 0 is the cohort's size, index n how many were
+	* still active n periods later. Periods not reached yet are simply left out.
+	*/
+	valuesKey: {
+		type: [
+			String,
+			Number,
+			Function
+		],
+		default: "values"
+	},
+	/** `percent` of the cohort size, or the raw `count`. */
+	mode: {
+		type: String,
+		default: "percent"
+	},
+	/** Column heading per period, e.g. `i => \`Month ${i}\``. */
+	periodFormatter: {
+		type: Function,
+		default: (period) => String(period)
+	},
+	color: {
+		type: String,
+		default: seriesColor(0)
+	},
+	emptyColor: {
+		type: String,
+		default: "var(--v-charts-muted, #eef2f7)"
+	},
+	/** Without `valueFormatter`, values show as a rounded percent (`mode: 'percent'`) or a count. */
+	...valueFormatProps,
+	gap: {
+		type: Number,
+		default: 2
+	},
+	desc: String,
+	title: {
+		type: String,
+		default: "Cohort retention"
+	}
+};
+var CohortChart = /* @__PURE__ */ defineComponent({
+	name: "CohortChart",
+	props: {
+		...CohortChartVueProps,
+		...chartSizeProps
+	},
+	inheritAttrs: false,
+	emits: {
+		...chartEmits,
+		...cellGridEmits
+	},
+	slots: Object,
+	setup(props, { emit, slots, attrs }) {
+		const numbers = computed(() => new Intl.NumberFormat(props.locale));
+		const model = computed(() => {
+			const rows = [];
+			const cohorts = [];
+			const sizes = /* @__PURE__ */ new Map();
+			let periods = 0;
+			for (const row of props.data ?? []) {
+				const cohort = getValueByDataKey(row, props.cohortKey);
+				const values = getValueByDataKey(row, props.valuesKey);
+				if (cohort == null || !Array.isArray(values) || values.length === 0) continue;
+				const name = String(cohort);
+				const size = toFiniteNumber(values[0]) ?? null;
+				cohorts.push(name);
+				sizes.set(name, size);
+				periods = Math.max(periods, values.length);
+				values.forEach((raw, period) => {
+					const count = toFiniteNumber(raw);
+					if (count === void 0) return;
+					if (props.mode !== "percent") rows.push({
+						cohort: name,
+						period,
+						value: count,
+						row
+					});
+					else if (size !== null && size > 0) rows.push({
+						cohort: name,
+						period,
+						value: count / size * 100,
+						row
+					});
+				});
+			}
+			return {
+				rows,
+				cohorts,
+				sizes,
+				periods: Array.from({ length: periods }, (_, i) => i)
+			};
+		});
+		const format = (value) => props.mode === "percent" ? `${Math.round(value)}%` : numbers.value.format(value);
+		return () => createVNode(HeatmapView, mergeProps(attrs, chartListeners(emit), cellGridListeners(emit), {
+			"cellPayload": (cell) => cohortCell(cell),
+			"data": model.value.rows,
+			"xKey": "period",
+			"yKey": "cohort",
+			"dataKey": "value",
+			"xDomain": model.value.periods,
+			"yDomain": model.value.cohorts,
+			"max": props.mode === "percent" ? 100 : void 0,
+			"fillMissing": false,
+			"showValues": true,
+			"valueFormatter": (value, cell) => props.valueFormatter ? props.valueFormatter(value, cohortCell(cell)) : format(value),
+			"xTickFormatter": (x) => props.periodFormatter(Number(x)),
+			"yTickFormatter": (y) => {
+				const size = model.value.sizes.get(String(y));
+				return size == null ? String(y) : `${y} · ${numbers.value.format(size)}`;
+			},
+			"color": props.color,
+			"emptyColor": props.emptyColor,
+			"gap": props.gap,
+			"activeIndex": props.activeIndex,
+			"radius": props.radius,
+			"isAnimationActive": props.isAnimationActive,
+			"transition": props.transition,
+			"title": props.title,
+			"desc": props.desc,
+			"width": props.width,
+			"height": props.height,
+			"aspect": props.aspect,
+			"initialDimension": props.initialDimension
+		}), {
+			cell: slots.cell,
+			default: slots.default
+		});
+	}
+});
+//#endregion
+export { CohortChart };

package/dist/es/chart/ComposedChart.mjs

@@ -1,10 +1,20 @@
-import { arrayTooltipSearcher } from "../state/optionsSlice.mjs";
-import { generateCategoricalChart } from "./generateCategoricalChart.mjs";
-var ComposedChart = generateCategoricalChart({
+import { forwardsSvgAttributes } from "../utils/attributes.mjs";
+import { cartesianChartProps } from "./chartProps.mjs";
+import { chartRoot } from "./chartRoot.mjs";
+import { defineComponent } from "vue";
+//#region src/chart/ComposedChart.ts
+var root = chartRoot({
 	chartName: "ComposedChart",
+	title: "Chart",
+	categoryScale: "auto",
+	series: ["line", "area"],
 	defaultTooltipEventType: "axis",
-	tooltipPayloadSearcher: arrayTooltipSearcher,
 	validateTooltipEventTypes: ["axis"]
 });
+var ComposedChart = /* @__PURE__ */ forwardsSvgAttributes(defineComponent({
+	...root,
+	props: cartesianChartProps,
+	setup: (props, context) => root.setup(props, context)
+}));
 //#endregion
 export { ComposedChart };

package/dist/es/chart/FunnelChart.mjs

@@ -1,11 +1,17 @@
-import { arrayTooltipSearcher } from "../state/optionsSlice.mjs";
-import { generateCategoricalChart } from "./generateCategoricalChart.mjs";
+import { forwardsSvgAttributes } from "../utils/attributes.mjs";
+import { funnelChartProps } from "./chartProps.mjs";
+import { chartRoot } from "./chartRoot.mjs";
+import { defineComponent } from "vue";
 //#region src/chart/FunnelChart.ts
-var FunnelChart = generateCategoricalChart({
+var root = chartRoot({
 	chartName: "FunnelChart",
 	defaultTooltipEventType: "item",
-	validateTooltipEventTypes: ["item"],
-	tooltipPayloadSearcher: arrayTooltipSearcher
+	validateTooltipEventTypes: ["item"]
 });
+var FunnelChart = /* @__PURE__ */ forwardsSvgAttributes(defineComponent({
+	...root,
+	props: funnelChartProps,
+	setup: (props, context) => root.setup(props, context)
+}));
 //#endregion
 export { FunnelChart };