vccs 0.6.0 → 1.0.0-beta.2

package/dist/es/chart/AreaChart.mjs

@@ -1,9 +1,17 @@
-import { arrayTooltipSearcher } from "../state/optionsSlice.mjs";
-import { generateCategoricalChart } from "./generateCategoricalChart.mjs";
+import { forwardsSvgAttributes } from "../utils/attributes.mjs";
+import { cartesianChartProps } from "./chartProps.mjs";
+import { chartRoot } from "./chartRoot.mjs";
+import { defineComponent } from "vue";
 //#region src/chart/AreaChart.ts
-var AreaChart = generateCategoricalChart({
+var root = chartRoot({
 	chartName: "AreaChart",
-	tooltipPayloadSearcher: arrayTooltipSearcher
+	categoryScale: "point",
+	series: ["area"]
 });
+var AreaChart = /* @__PURE__ */ forwardsSvgAttributes(defineComponent({
+	...root,
+	props: cartesianChartProps,
+	setup: (props, context) => root.setup(props, context)
+}));
 //#endregion
 export { AreaChart };

package/dist/es/chart/BarChart.mjs

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

package/dist/es/chart/BarList.mjs

@@ -0,0 +1,265 @@
+import { toFiniteNumber } from "../utils/validate.mjs";
+import { useTrackedData } from "../hooks/useTrackedData.mjs";
+import { seriesColor } from "../utils/theme.mjs";
+import { provideChartInView, provideRenderPhase } from "../model/runtime.mjs";
+import { getValueByDataKey } from "../utils/chart.mjs";
+import { useAnimationCallbacks } from "../animation/useAnimationCallbacks.mjs";
+import { useKeyedTransition } from "../animation/useKeyedTransition.mjs";
+import { cellGridSharedProps, useValueText, valueFormatProps } from "./cellGridProps.mjs";
+import { computed, createVNode, defineComponent, getCurrentInstance, mergeProps, ref } from "vue";
+//#region src/chart/BarList.tsx
+var BarListVueProps = {
+	isAnimationActive: cellGridSharedProps.isAnimationActive,
+	transition: cellGridSharedProps.transition,
+	data: {
+		type: Array,
+		required: true
+	},
+	/** Field with the label. It is also the row's identity, so a row slides to its new rank. */
+	nameKey: {
+		type: [
+			String,
+			Number,
+			Function
+		],
+		default: "name"
+	},
+	dataKey: {
+		type: [
+			String,
+			Number,
+			Function
+		],
+		default: "value"
+	},
+	/** Field with a link; the label becomes an anchor. */
+	hrefKey: {
+		type: [
+			String,
+			Number,
+			Function
+		],
+		default: void 0
+	},
+	sort: {
+		type: String,
+		default: "descending"
+	},
+	color: {
+		type: String,
+		default: seriesColor(0)
+	},
+	...valueFormatProps,
+	rowHeight: {
+		type: Number,
+		default: 32
+	},
+	gap: {
+		type: Number,
+		default: 4
+	},
+	desc: String,
+	title: {
+		type: String,
+		default: "Bar list"
+	}
+};
+var barListEmits = {
+	"row-click": (_row, _index, _event) => true,
+	"animation-start": () => true,
+	"animation-end": () => true
+};
+var BarListInner = /* @__PURE__ */ defineComponent({
+	name: "BarListInner",
+	props: {
+		...BarListVueProps,
+		actionable: Boolean
+	},
+	emits: barListEmits,
+	slots: Object,
+	setup(props, { emit, slots }) {
+		const rows = useTrackedData(() => props.data);
+		const valueText = useValueText(props);
+		const target = computed(() => {
+			const list = (rows.value ?? []).flatMap((row) => {
+				const value = toFiniteNumber(getValueByDataKey(row, props.dataKey));
+				return row && value !== void 0 ? [{
+					row,
+					name: String(getValueByDataKey(row, props.nameKey) ?? ""),
+					value
+				}] : [];
+			});
+			if (props.sort !== "none") list.sort((a, b) => props.sort === "descending" ? b.value - a.value : a.value - b.value);
+			const max = Math.max(0, ...list.map((item) => item.value));
+			return list.map((item, index) => ({
+				...item,
+				index,
+				y: index * (props.rowHeight + props.gap),
+				ratio: max > 0 ? Math.max(0, item.value) / max : 0,
+				opacity: 1,
+				presence: 1
+			}));
+		});
+		const crossing = (from, to, t) => from.y - to.y > props.rowHeight && t < 1 ? { rising: true } : { rising: void 0 };
+		const callbacks = useAnimationCallbacks(() => emit("animation-start"), () => emit("animation-end"));
+		const { items } = useKeyedTransition(() => target.value, {
+			key: (state) => state.name,
+			interpolate: (from, to, t) => ({
+				...to,
+				value: Number.isInteger(to.value) ? Math.round(from.value + (to.value - from.value) * t) : from.value + (to.value - from.value) * t,
+				y: from.y + (to.y - from.y) * t,
+				presence: Math.min(1, Math.max(0, from.presence + (to.presence - from.presence) * t)),
+				...crossing(from, to, t),
+				ratio: from.ratio + (to.ratio - from.ratio) * t,
+				opacity: Math.min(1, Math.max(0, (from.opacity + (to.opacity - from.opacity) * t) * (to.y - from.y > props.rowHeight ? 1 - .7 * Math.sin(Math.PI * t) : 1)))
+			}),
+			enterFrom: (to) => ({
+				...to,
+				value: 0,
+				ratio: 0,
+				opacity: 0,
+				presence: 0
+			}),
+			exitTo: (from) => ({
+				...from,
+				ratio: 0,
+				opacity: 0,
+				presence: 0
+			}),
+			isActive: () => props.isAnimationActive,
+			transition: () => props.transition,
+			onStart: callbacks.onStart,
+			onEnd: callbacks.onEnd
+		});
+		const height = computed(() => {
+			const count = items.value.reduce((sum, item) => sum + Math.max(0, Math.min(1, item.value.presence)), 0);
+			return Math.max(0, count * (props.rowHeight + props.gap) - props.gap);
+		});
+		const format = (state) => valueText(state.value, state.row);
+		function renderName(slotProps, href, exiting) {
+			if (slots.name) return slots.name(slotProps);
+			if (href) return createVNode("a", {
+				"href": href,
+				"tabindex": exiting ? -1 : void 0,
+				"style": { color: "inherit" }
+			}, [slotProps.name]);
+			if (!props.actionable || exiting) return slotProps.name;
+			return createVNode("button", {
+				"type": "button",
+				"style": {
+					font: "inherit",
+					color: "inherit",
+					background: "none",
+					border: 0,
+					padding: 0
+				}
+			}, [slotProps.name]);
+		}
+		return () => createVNode("ul", {
+			"data-slot": "chart",
+			"class": "v-charts-bar-list",
+			"aria-label": props.title,
+			"aria-description": props.desc,
+			"style": {
+				position: "relative",
+				height: `${height.value}px`,
+				margin: 0,
+				padding: 0,
+				listStyle: "none"
+			}
+		}, [items.value.map(({ key, value: state, phase }) => {
+			const index = state.index;
+			const slotProps = {
+				row: state.row,
+				index,
+				name: state.name,
+				value: state.value,
+				ratio: state.ratio,
+				formatted: format(state)
+			};
+			const href = props.hrefKey ? getValueByDataKey(state.row, props.hrefKey) : void 0;
+			return createVNode("li", {
+				"key": key,
+				"data-slot": "series",
+				"class": "v-charts-bar-list-row",
+				"aria-hidden": phase === "exit" ? "true" : void 0,
+				"style": {
+					position: "absolute",
+					left: 0,
+					right: 0,
+					top: 0,
+					height: `${props.rowHeight}px`,
+					transform: `translateY(${state.y}px)`,
+					opacity: state.opacity,
+					zIndex: state.rising ? 1 : void 0,
+					display: "flex",
+					alignItems: "center",
+					gap: "12px",
+					pointerEvents: phase === "exit" ? "none" : void 0
+				},
+				"onClick": (event) => phase !== "exit" && emit("row-click", state.row, index, event)
+			}, [createVNode("div", { "style": {
+				position: "relative",
+				flex: "1 1 auto",
+				minWidth: 0,
+				height: "100%",
+				display: "flex",
+				alignItems: "center"
+			} }, [createVNode("div", {
+				"class": "v-charts-bar-list-bar",
+				"style": {
+					position: "absolute",
+					inset: "0 auto 0 0",
+					width: `${state.ratio * 100}%`,
+					borderRadius: "4px",
+					background: props.color,
+					opacity: .18
+				}
+			}, null), createVNode("span", {
+				"class": "v-charts-bar-list-name",
+				"style": {
+					position: "relative",
+					padding: "0 8px",
+					overflow: "hidden",
+					textOverflow: "ellipsis",
+					whiteSpace: "nowrap"
+				}
+			}, [renderName(slotProps, href, phase === "exit")])]), createVNode("span", {
+				"class": "v-charts-bar-list-value",
+				"style": {
+					flex: "none",
+					fontVariantNumeric: "tabular-nums"
+				}
+			}, [slots.value ? slots.value(slotProps) : slotProps.formatted])]);
+		})]);
+	}
+});
+/**
+* A ranked list with a bar behind each label, as in analytics "top pages" panels.
+*
+* ```vue
+* <BarList :data="[{ name: '/pricing', value: 820 }]" href-key="url" />
+* ```
+*/
+var BarList = /* @__PURE__ */ defineComponent({
+	name: "BarList",
+	props: BarListVueProps,
+	emits: barListEmits,
+	slots: Object,
+	setup(props, { emit, slots }) {
+		const instance = getCurrentInstance();
+		provideRenderPhase();
+		const inner = ref(null);
+		provideChartInView(computed(() => inner.value?.$el));
+		return () => createVNode(BarListInner, mergeProps({ "ref": inner }, props, { "actionable": !!(instance?.vnode.props?.["onRow-click"] || instance?.vnode.props?.onRowClick) }, {
+			"onRow-click": (row, index, event) => emit("row-click", row, index, event),
+			"onAnimation-start": () => emit("animation-start"),
+			"onAnimation-end": () => emit("animation-end")
+		}), {
+			name: slots.name,
+			value: slots.value
+		});
+	}
+});
+//#endregion
+export { BarList };

package/dist/es/chart/CalendarHeatmap.mjs

@@ -0,0 +1,299 @@
+import { toFiniteNumber } from "../utils/validate.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 { cellGridEmits, cellGridListeners, chartEmits, chartListeners } from "../events/componentEvents.mjs";
+import { chartSizeProps } from "../hooks/useResponsiveSize.mjs";
+import { cellGridSharedProps, useValueText, valueFormatProps } from "./cellGridProps.mjs";
+import { MovingLabels } from "../animation/MovingLabels.mjs";
+import { standaloneChartOptions } from "./shell.mjs";
+import { ChartShell, useChartShell } from "./ChartShell.mjs";
+import { CellGridLayer } from "./CellGridLayer.mjs";
+import { cellColorScale, dayNumberToIso, formatDay, toDayNumber, weekdayOf } from "./cellGridUtils.mjs";
+import { computed, createVNode, defineComponent, mergeProps, reactive } from "vue";
+//#region src/chart/CalendarHeatmap.tsx
+var MONTH_BAND = 16;
+var WEEKDAY_BAND = 28;
+/** Nominal cell step, only used to pick the default aspect ratio. */
+var NOMINAL_STEP = 14;
+var CalendarHeatmapVueProps = {
+	...cellGridSharedProps,
+	data: {
+		type: Array,
+		required: true
+	},
+	/** The field holding the day: a `YYYY-MM-DD` string or a `Date` (its local calendar date). */
+	dateKey: {
+		type: [
+			String,
+			Number,
+			Function
+		],
+		default: "date"
+	},
+	/** The field holding the number to color by. Rows with the same day are summed. */
+	dataKey: {
+		type: [
+			String,
+			Number,
+			Function
+		],
+		default: "value"
+	},
+	/** First day shown. Defaults to 52 weeks before `end`. */
+	start: {
+		type: [String, Date],
+		default: void 0
+	},
+	/** Last day shown. Defaults to the latest day in `data`, so server and client agree. */
+	end: {
+		type: [String, Date],
+		default: void 0
+	},
+	/** 0 = Sunday (GitHub), 1 = Monday (ISO). */
+	weekStart: {
+		type: Number,
+		default: 0
+	},
+	/** Full-intensity color; lower levels mix it with `emptyColor`. */
+	color: {
+		type: String,
+		default: seriesColor(0)
+	},
+	emptyColor: {
+		type: String,
+		default: "var(--v-charts-muted, #ebedf0)"
+	},
+	/** Number of intensity steps above empty. */
+	levels: {
+		type: Number,
+		default: 4
+	},
+	/** Explicit fill per level, from empty to full; overrides `color`, `emptyColor` and `levels`. */
+	colors: {
+		type: Array,
+		default: void 0
+	},
+	/** Value that reaches the top level. Defaults to the largest value in range. */
+	max: {
+		type: Number,
+		default: void 0
+	},
+	gap: {
+		type: Number,
+		default: 3
+	},
+	/** `locale` also sets month, weekday and date text. */
+	...valueFormatProps,
+	monthLabels: {
+		type: Boolean,
+		default: true
+	},
+	weekdayLabels: {
+		type: Boolean,
+		default: true
+	},
+	desc: String,
+	title: {
+		type: String,
+		default: "Activity calendar"
+	}
+};
+/**
+* Contribution calendar: one square per day, columns are weeks, color is the day's value.
+*
+* ```vue
+* <CalendarHeatmap :data="commits" date-key="day" data-key="count"><Tooltip /></CalendarHeatmap>
+* ```
+*/
+var CalendarHeatmap = /* @__PURE__ */ defineComponent({
+	name: "CalendarHeatmap",
+	props: {
+		...CalendarHeatmapVueProps,
+		...chartSizeProps
+	},
+	inheritAttrs: false,
+	emits: {
+		...chartEmits,
+		...cellGridEmits
+	},
+	slots: Object,
+	setup(props, { emit, slots, attrs }) {
+		const valueText = useValueText(props);
+		const rows = useTrackedData(() => props.data);
+		const days = computed(() => {
+			const values = /* @__PURE__ */ new Map();
+			const contributing = /* @__PURE__ */ new Map();
+			let latest;
+			for (const row of rows.value ?? []) {
+				const day = toDayNumber(getValueByDataKey(row, props.dateKey));
+				if (day !== void 0 && (latest === void 0 || day > latest)) latest = day;
+				const value = toFiniteNumber(getValueByDataKey(row, props.dataKey));
+				if (day === void 0 || value === void 0) continue;
+				values.set(day, (values.get(day) ?? 0) + value);
+				const sourceRows = contributing.get(day) ?? [];
+				sourceRows.push(row);
+				contributing.set(day, sourceRows);
+			}
+			return {
+				values,
+				contributing,
+				latest
+			};
+		});
+		const range = computed(() => {
+			const end = toDayNumber(props.end) ?? days.value.latest;
+			if (end === void 0) return void 0;
+			const start = toDayNumber(props.start) ?? end - 364 - weekdayOffset(end);
+			return start <= end ? {
+				start,
+				end
+			} : void 0;
+		});
+		function weekdayOffset(day) {
+			return (weekdayOf(day) - props.weekStart + 7) % 7;
+		}
+		const columns = computed(() => {
+			const r = range.value;
+			return r ? Math.floor((r.end - (r.start - weekdayOffset(r.start))) / 7) + 1 : 0;
+		});
+		const left = computed(() => props.weekdayLabels ? WEEKDAY_BAND : 0);
+		const top = computed(() => props.monthLabels ? MONTH_BAND : 0);
+		const size = useChartShell(reactive({
+			width: computed(() => props.width),
+			height: computed(() => props.height),
+			aspect: computed(() => props.aspect ?? (props.height === void 0 ? (left.value + Math.max(columns.value, 1) * NOMINAL_STEP) / (top.value + 98) : void 0)),
+			initialDimension: computed(() => props.initialDimension)
+		}), standaloneChartOptions("CalendarHeatmap"));
+		const layout = computed(() => {
+			const r = range.value;
+			const width = size.effectiveWidth.value;
+			const height = size.effectiveHeight.value;
+			if (!r || !(width > 0) || !(height > 0)) return {
+				cells: [],
+				months: [],
+				weekdays: [],
+				step: 0
+			};
+			const step = Math.max(0, Math.min((width - left.value) / columns.value, (height - top.value) / 7));
+			const cellSize = step - Math.min(props.gap, step / 3);
+			const firstColumn = r.start - weekdayOffset(r.start);
+			const values = days.value.values;
+			let max = props.max;
+			if (max === void 0) {
+				max = 0;
+				for (const [day, value] of values) if (day >= r.start && day <= r.end && value > max) max = value;
+			}
+			const scale = cellColorScale({
+				color: props.color,
+				empty: props.emptyColor,
+				levels: props.levels,
+				colors: props.colors,
+				max,
+				minLevel: 1
+			});
+			const dateFormat = {
+				weekday: "short",
+				month: "short",
+				day: "numeric",
+				year: "numeric"
+			};
+			const cells = [];
+			const months = [];
+			for (let day = r.start; day <= r.end; day++) {
+				const column = Math.floor((day - firstColumn) / 7);
+				const row = weekdayOffset(day);
+				const value = values.get(day) ?? null;
+				const level = scale.level(value);
+				const iso = dayNumberToIso(day);
+				const payload = {
+					date: iso,
+					value,
+					level,
+					rows: days.value.contributing.get(day) ?? []
+				};
+				cells.push({
+					key: iso,
+					x: left.value + column * step,
+					y: top.value + row * step,
+					width: cellSize,
+					height: cellSize,
+					fill: scale.fill(value),
+					row,
+					column,
+					label: formatDay(day, props.locale, dateFormat),
+					value,
+					valueText: value === null ? void 0 : valueText(value, payload),
+					payload
+				});
+				if (iso.endsWith("-01") || day === r.start) {
+					const labelColumn = row === 0 ? column : column + 1;
+					if (labelColumn < columns.value) months.push({
+						key: iso.slice(0, 7),
+						column: labelColumn,
+						text: formatDay(day, props.locale, { month: "short" })
+					});
+				}
+			}
+			const visibleMonths = months.filter((month, i) => i === months.length - 1 || months[i + 1].column - month.column >= 3);
+			const weekdays = props.weekdayLabels ? [
+				1,
+				3,
+				5
+			].map((weekday) => ({
+				key: weekday,
+				x: 0,
+				y: top.value + (weekday - props.weekStart + 7) % 7 * step + cellSize / 2,
+				text: formatDay(3 + weekday, props.locale, { weekday: "short" })
+			})) : [];
+			return {
+				cells,
+				months: props.monthLabels ? visibleMonths.map((month) => ({
+					key: month.key,
+					x: left.value + month.column * step,
+					y: 10,
+					text: month.text
+				})) : [],
+				weekdays,
+				step
+			};
+		});
+		return () => createVNode(ChartShell, mergeProps(attrs, chartListeners(emit), {
+			"size": size,
+			"title": props.title,
+			"desc": props.desc,
+			"overflow": "visible"
+		}), {
+			svg: () => createVNode(Layer, { "class": "v-charts-calendar" }, { default: () => [
+				createVNode(MovingLabels, {
+					"class": "v-charts-calendar-months",
+					"labels": layout.value.months,
+					"isAnimationActive": props.isAnimationActive,
+					"transition": props.transition
+				}, null),
+				createVNode(MovingLabels, {
+					"class": "v-charts-calendar-weekdays",
+					"labels": layout.value.weekdays,
+					"isAnimationActive": props.isAnimationActive,
+					"transition": props.transition,
+					"centered": true
+				}, null),
+				createVNode(CellGridLayer, mergeProps({
+					"cells": layout.value.cells,
+					"gap": Math.min(props.gap, layout.value.step / 3),
+					"activeIndex": props.activeIndex,
+					"radius": props.radius,
+					"activeStyle": "ring",
+					"grow": "center",
+					"title": props.title,
+					"isAnimationActive": props.isAnimationActive,
+					"transition": props.transition
+				}, cellGridListeners(emit)), { cell: slots.cell })
+			] }),
+			default: slots.default
+		});
+	}
+});
+//#endregion
+export { CalendarHeatmap };