vccs 0.6.0 → 1.0.0-beta.2

package/dist/es/chart/ScatterChart.mjs

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

package/dist/es/chart/Sparkline.mjs

@@ -0,0 +1,458 @@
+import { toFiniteNumber } from "../utils/validate.mjs";
+import { useTooltipController } from "../model/tooltip.mjs";
+import { useTrackedData } from "../hooks/useTrackedData.mjs";
+import { seriesColor } from "../utils/theme.mjs";
+import { Layer } from "../container/Layer.mjs";
+import { getValueByDataKey } from "../utils/chart.mjs";
+import { drawTiming } from "../animation/motion.mjs";
+import { usePointTransition } from "../animation/usePointTransition.mjs";
+import { SweepClip } from "../animation/SweepClip.mjs";
+import { polylineLength } from "../animation/ridingLabels.mjs";
+import { chartEmits, chartListeners } from "../events/componentEvents.mjs";
+import { chartSizeProps } from "../hooks/useResponsiveSize.mjs";
+import { cellGridSharedProps, useValueText, valueFormatProps } from "./cellGridProps.mjs";
+import { standaloneChartOptions } from "./shell.mjs";
+import { ChartShell, useChartShell } from "./ChartShell.mjs";
+import { useItemKeyboard } from "../events/useItemKeyboard.mjs";
+import { CellGridLayer } from "./CellGridLayer.mjs";
+import { computed, createVNode, defineComponent, mergeProps, reactive, toRefs, useId } from "vue";
+import { area, curveLinear, curveMonotoneX, line } from "d3-shape";
+//#region src/chart/Sparkline.tsx
+/** Room for the end dot and the stroke at the edges. */
+var PAD = 3;
+var SparklineVueProps = {
+	isAnimationActive: cellGridSharedProps.isAnimationActive,
+	transition: cellGridSharedProps.transition,
+	/** Numbers, or rows with `data-key`. `null` leaves a gap. */
+	data: {
+		type: Array,
+		required: true
+	},
+	dataKey: {
+		type: [
+			String,
+			Number,
+			Function
+		],
+		default: "value"
+	},
+	/** Identity of a point across updates, e.g. its date, so a moving window slides. Defaults to the position. */
+	nameKey: {
+		type: [
+			String,
+			Number,
+			Function
+		],
+		default: void 0
+	},
+	type: {
+		type: String,
+		default: "line"
+	},
+	color: {
+		type: String,
+		default: seriesColor(0)
+	},
+	strokeWidth: {
+		type: Number,
+		default: 1.5
+	},
+	curve: {
+		type: String,
+		default: "monotone"
+	},
+	/** Lowest value on the scale. Set `min` and `max` on several sparklines to compare them. */
+	min: {
+		type: Number,
+		default: void 0
+	},
+	max: {
+		type: Number,
+		default: void 0
+	},
+	/** Mark the latest value with a dot (line and area). */
+	endDot: {
+		type: Boolean,
+		default: true
+	},
+	/** Hovered or focused point; bind with `v-model:active-index` to show its value elsewhere. */
+	activeIndex: {
+		type: Number,
+		default: void 0
+	},
+	gap: {
+		type: Number,
+		default: 1
+	},
+	radius: {
+		type: Number,
+		default: 1
+	},
+	...valueFormatProps,
+	desc: String,
+	title: {
+		type: String,
+		default: void 0
+	}
+};
+var sparklineEmits = {
+	"update:activeIndex": (_index) => true,
+	"animation-start": () => true,
+	"animation-end": () => true
+};
+/** The drawing, set up inside the measured surface so its scope follows the surface's. */
+function useSparkline(props, emit) {
+	const valueText = useValueText(props);
+	const tooltip = useTooltipController();
+	const id = useId();
+	const size = {
+		effectiveWidth: computed(() => props.width),
+		effectiveHeight: computed(() => props.height)
+	};
+	const rows = useTrackedData(() => props.data);
+	const values = computed(() => (rows.value ?? []).map((row) => {
+		const raw = row !== null && typeof row === "object" ? getValueByDataKey(row, props.dataKey) : row;
+		return toFiniteNumber(raw) ?? null;
+	}));
+	const domain = computed(() => {
+		const finite = values.value.filter((value) => value !== null);
+		let dataLo = Infinity;
+		let dataHi = -Infinity;
+		for (const value of finite) {
+			dataLo = Math.min(dataLo, value);
+			dataHi = Math.max(dataHi, value);
+		}
+		let lo = props.min ?? (finite.length ? dataLo : 0);
+		let hi = props.max ?? (finite.length ? dataHi : 1);
+		if (props.type === "bar") {
+			lo = props.min ?? Math.min(0, lo);
+			hi = props.max ?? Math.max(0, hi);
+		}
+		if (hi === lo && props.type === "bar") hi += 1;
+		return {
+			lo,
+			hi
+		};
+	});
+	const points = computed(() => {
+		const width = size.effectiveWidth.value;
+		const height = size.effectiveHeight.value;
+		const n = values.value.length;
+		const { lo, hi } = domain.value;
+		function yOf(value) {
+			return hi === lo ? height / 2 : PAD + (1 - (value - lo) / (hi - lo)) * (height - 6);
+		}
+		return values.value.map((value, index) => ({
+			x: n === 1 ? width / 2 : PAD + index * (width - 6) / (n - 1),
+			y: value === null ? null : yOf(value),
+			value,
+			index,
+			payload: rows.value?.[index]
+		}));
+	});
+	const nameValueOf = (point) => {
+		const row = point.payload;
+		return props.nameKey && row !== null && typeof row === "object" ? getValueByDataKey(row, props.nameKey) : void 0;
+	};
+	const keyOf = (point) => {
+		const name = nameValueOf(point);
+		return name == null ? point.index : String(name);
+	};
+	/** The point's name in the tooltip and for screen readers, in line and bar mode alike. */
+	const nameOf = (point) => {
+		const name = nameValueOf(point);
+		return name == null ? String(point.index + 1) : String(name);
+	};
+	const baselineY = computed(() => size.effectiveHeight.value - PAD);
+	const display = usePointTransition(() => props.type === "bar" ? [] : points.value, {
+		key: keyOf,
+		baseline: () => baselineY.value,
+		isActive: () => props.isAnimationActive,
+		transition: () => props.transition,
+		entrance: () => drawTiming(polylineLength(points.value)),
+		onStart: () => emit("animation-start"),
+		onEnd: () => emit("animation-end")
+	});
+	const curve = computed(() => props.curve === "linear" ? curveLinear : curveMonotoneX);
+	const defined = (p) => p.y != null && Number.isFinite(p.y);
+	const linePath = computed(() => line().defined(defined).x((p) => p.x).y((p) => p.y ?? 0).curve(curve.value)(display.points.value) ?? "");
+	const areaPath = computed(() => area().defined(defined).x((p) => p.x).y0(baselineY.value).y1((p) => p.y ?? 0).curve(curve.value)(display.points.value) ?? "");
+	const bars = computed(() => {
+		if (props.type !== "bar") return [];
+		const width = size.effectiveWidth.value;
+		const height = size.effectiveHeight.value;
+		const n = values.value.length;
+		if (!n) return [];
+		const gap = (width - props.gap * (n - 1)) / n >= 2 ? props.gap : 0;
+		const step = (width - gap * (n - 1)) / n;
+		const { lo, hi } = domain.value;
+		const yOf = (value) => (1 - (value - lo) / (hi - lo)) * height;
+		const zero = yOf(Math.min(hi, Math.max(lo, 0)));
+		return points.value.map((point) => ({
+			key: String(keyOf(point)),
+			x: point.index * (step + gap),
+			y: point.value === null ? zero : Math.min(zero, yOf(point.value)),
+			width: step,
+			height: point.value === null ? 0 : Math.abs(yOf(point.value) - zero),
+			fill: props.color,
+			row: 0,
+			column: point.index,
+			label: nameOf(point),
+			value: point.value,
+			valueText: point.value === null ? void 0 : valueText(point.value, point.payload),
+			payload: point.payload
+		}));
+	});
+	const positionalIdentities = [];
+	const configuration = computed(() => {
+		if (props.type === "bar") return void 0;
+		const identities = points.value.map((point) => props.nameKey && point.payload !== null && typeof point.payload === "object" ? getValueByDataKey(point.payload, props.nameKey) ?? point.payload : point.payload);
+		const counts = /* @__PURE__ */ new Map();
+		for (const identity of identities) counts.set(identity, (counts.get(identity) ?? 0) + 1);
+		return {
+			model: {
+				root: true,
+				index: () => props.activeIndex,
+				request: (index) => emit("update:activeIndex", index)
+			},
+			keyboardItems: points.value.map((point) => ({
+				index: point.index,
+				identity: point.payload !== null && typeof point.payload === "object" ? counts.get(identities[point.index]) === 1 ? identities[point.index] : point.payload : positionalIdentities[point.index] ??= Symbol(),
+				coordinate: {
+					x: point.x,
+					y: point.y ?? 0
+				}
+			})),
+			dataDefinedOnItem: points.value.map((point) => point.payload),
+			values: Object.fromEntries(points.value.map((point) => [point.index, point.value])),
+			names: Object.fromEntries(points.value.map((point) => [point.index, nameOf(point)])),
+			positions: void 0,
+			settings: {
+				stroke: props.color,
+				strokeWidth: void 0,
+				fill: props.color,
+				dataKey: "value",
+				nameKey: "name",
+				name: void 0,
+				hide: false,
+				type: void 0,
+				color: props.color,
+				unit: "",
+				formatter: (value, _name, entry) => typeof value === "number" ? valueText(value, entry.payload) : value
+			}
+		};
+	});
+	tooltip.entries.register(configuration);
+	const active = tooltip.activeIndexFor(configuration);
+	function setActive(index, keyboard = false) {
+		const point = index === null ? void 0 : points.value[index];
+		if (!point && !keyboard) {
+			tooltip.clear("hover", "item");
+			return;
+		}
+		const action = {
+			index: point ? point.index : null,
+			configuration: configuration.value,
+			coordinate: point && defined(point) ? {
+				x: point.x,
+				y: point.y
+			} : void 0
+		};
+		if (keyboard) tooltip.activate("keyboard", {
+			...action,
+			active: !!point
+		});
+		else tooltip.activate("hover", {
+			...action,
+			type: "item"
+		});
+	}
+	function onPointer(event) {
+		const svg = event.currentTarget.ownerSVGElement;
+		if (!svg || points.value.length === 0) return;
+		const box = svg.getBoundingClientRect();
+		const x = (event.clientX - box.left) * (size.effectiveWidth.value / (box.width || size.effectiveWidth.value));
+		let nearest = 0;
+		for (const point of points.value) if (Math.abs(point.x - x) < Math.abs(points.value[nearest].x - x)) nearest = point.index;
+		setActive(nearest);
+	}
+	const { onFocus, onKeydown } = useItemKeyboard({
+		empty: () => points.value.length === 0,
+		start: () => active.value == null ? points.value.length - 1 : void 0,
+		neighbour: (key) => {
+			const n = points.value.length;
+			const current = active.value ?? n;
+			return key === "ArrowLeft" ? Math.max(0, current - 1) : key === "ArrowRight" ? Math.min(n - 1, current + 1) : key === "Home" ? 0 : key === "End" ? n - 1 : void 0;
+		},
+		activate: (index) => setActive(index, true),
+		clear: () => setActive(null, true)
+	});
+	const lastPoint = computed(() => {
+		const shown = display.points.value;
+		for (let i = shown.length - 1; i >= 0; i--) {
+			const point = shown[i];
+			if (point && defined(point)) return point;
+		}
+	});
+	const activePoint = computed(() => {
+		const point = active.value == null ? void 0 : points.value[active.value];
+		return point && defined(point) ? point : void 0;
+	});
+	const summary = computed(() => {
+		const shown = points.value.filter((point) => point.value !== null);
+		const text = (point) => point?.value == null ? "" : valueText(point.value, point.payload);
+		return props.title ?? (shown.length ? `Trend: ${shown.length} ${shown.length === 1 ? "value" : "values"} from ${text(shown[0])} to ${text(shown.at(-1))}` : "Trend");
+	});
+	return () => {
+		const width = props.width;
+		const height = props.height;
+		return createVNode(Layer, {
+			"data-slot": "series",
+			"class": "v-charts-sparkline",
+			"data-type": props.type
+		}, { default: () => [props.type === "bar" ? createVNode(CellGridLayer, mergeProps({
+			"cells": bars.value,
+			"gap": props.gap,
+			"radius": props.radius,
+			"activeStyle": "dim",
+			"grow": "bottom",
+			"title": summary.value,
+			"isAnimationActive": props.isAnimationActive,
+			"transition": props.transition,
+			"activeIndex": props.activeIndex
+		}, {
+			"onUpdate:activeIndex": (index) => emit("update:activeIndex", index),
+			"onAnimation-start": () => emit("animation-start"),
+			"onAnimation-end": () => emit("animation-end")
+		}), null) : createVNode("g", {
+			"role": "img",
+			"tabindex": 0,
+			"aria-label": activePoint.value ? `${summary.value}. Point ${activePoint.value.index + 1}: ${activePoint.value.value === null ? "no value" : valueText(activePoint.value.value, activePoint.value.payload)}` : summary.value,
+			"style": { outline: "none" },
+			"onMousemove": onPointer,
+			"onMouseleave": () => setActive(null),
+			"onKeydown": onKeydown,
+			"onFocus": onFocus,
+			"onBlur": () => setActive(null, true)
+		}, [
+			createVNode("defs", null, [createVNode(SweepClip, {
+				"id": `${id}-sweep`,
+				"progress": display.reveal.value,
+				"x": -3,
+				"y": -3,
+				"width": width + 6,
+				"height": height + 6
+			}, null), props.type === "area" && createVNode("linearGradient", {
+				"id": `${id}-fill`,
+				"x1": "0",
+				"y1": "0",
+				"x2": "0",
+				"y2": "1"
+			}, [createVNode("stop", {
+				"offset": "0%",
+				"style": {
+					stopColor: props.color,
+					stopOpacity: .28
+				}
+			}, null), createVNode("stop", {
+				"offset": "100%",
+				"style": {
+					stopColor: props.color,
+					stopOpacity: 0
+				}
+			}, null)])]),
+			createVNode("rect", {
+				"x": 0,
+				"y": 0,
+				"width": width,
+				"height": height,
+				"fill": "transparent"
+			}, null),
+			createVNode("g", { "clip-path": `url(#${id}-sweep)` }, [props.type === "area" && createVNode("path", {
+				"class": "v-charts-sparkline-area",
+				"d": areaPath.value,
+				"style": { fill: `url(#${id}-fill)` }
+			}, null), createVNode("path", {
+				"class": "v-charts-sparkline-line",
+				"d": linePath.value,
+				"fill": "none",
+				"stroke-width": props.strokeWidth,
+				"stroke-linejoin": "round",
+				"stroke-linecap": "round",
+				"style": { stroke: props.color }
+			}, null)]),
+			props.endDot && !activePoint.value && lastPoint.value && display.reveal.value >= 1 && createVNode("circle", {
+				"class": "v-charts-sparkline-end",
+				"cx": lastPoint.value.x,
+				"cy": lastPoint.value.y,
+				"r": 2.5,
+				"stroke-width": 1.5,
+				"style": {
+					fill: props.color,
+					stroke: "var(--v-charts-background, #fff)"
+				}
+			}, null),
+			activePoint.value && activePoint.value.value !== null && createVNode("g", {
+				"class": "v-charts-sparkline-active",
+				"style": { pointerEvents: "none" }
+			}, [createVNode("line", {
+				"x1": activePoint.value.x,
+				"x2": activePoint.value.x,
+				"y1": 0,
+				"y2": height,
+				"stroke-width": 1,
+				"style": { stroke: "var(--v-charts-cursor, #ccc)" }
+			}, null), createVNode("circle", {
+				"cx": activePoint.value.x,
+				"cy": activePoint.value.y,
+				"r": 3,
+				"stroke-width": 1.5,
+				"style": {
+					fill: props.color,
+					stroke: "var(--v-charts-background, #fff)"
+				}
+			}, null)])
+		])] });
+	};
+}
+/**
+* A word-sized trend without axes, for stat cards and tables.
+*
+* ```vue
+* <Sparkline :data="[4, 6, 5, 9, 12]" type="area" v-model:active-index="hovered" />
+* ```
+*/
+var Sparkline = /* @__PURE__ */ defineComponent({
+	name: "Sparkline",
+	props: {
+		...SparklineVueProps,
+		...chartSizeProps
+	},
+	inheritAttrs: false,
+	emits: {
+		...chartEmits,
+		...sparklineEmits
+	},
+	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("Sparkline"));
+		const setupContent = () => ({ svg: useSparkline(reactive({
+			...toRefs(props),
+			width: size.effectiveWidth,
+			height: size.effectiveHeight
+		}), emit) });
+		return () => createVNode(ChartShell, mergeProps(attrs, chartListeners(emit), {
+			"size": size,
+			"desc": props.desc,
+			"overflow": "visible",
+			"setupContent": setupContent
+		}), { default: slots.default });
+	}
+});
+//#endregion
+export { Sparkline };