@vunset/vue 0.0.0-stage → 1.0.0-rc.2

package/dist/components/chart/ChartLegend.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,81 @@
+import { mergeProps as mergeProps$1 } from "../../shared/merge-props.js";
+import { Part } from "../../shared/part.js";
+import { useControlled } from "../../shared/use-controlled.js";
+import { useOptionalChartContext } from "./use-chart-series.js";
+import { Fragment, computed, createBlock, createElementBlock, createElementVNode, defineComponent, guardReactiveProps, mergeProps, normalizeProps, normalizeStyle, openBlock, renderList, renderSlot, toDisplayString, unref, useAttrs, withCtx } from "vue";
+import { chartColors } from "@vunset/utils";
+//#region src/components/chart/ChartLegend.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = [
+	"data-hidden",
+	"aria-pressed",
+	"onClick"
+];
+var _hoisted_2 = { "data-part": "legend-label" };
+var ChartLegend_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "ChartLegend",
+	inheritAttrs: false,
+	__name: "ChartLegend",
+	props: {
+		modelValue: { default: void 0 },
+		categories: {},
+		colors: {},
+		labelFormat: {},
+		as: { default: "div" }
+	},
+	emits: ["update:modelValue"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const chart = useOptionalChartContext();
+		const driven = chart !== null && props.modelValue === void 0;
+		const own = useControlled({
+			value: () => props.modelValue,
+			defaultValue: () => [],
+			onChange: (next) => emit("update:modelValue", next),
+			name: "ChartLegend",
+			label: "modelValue"
+		});
+		const categories = computed(() => props.categories ?? chart?.categories.value ?? []);
+		const colors = computed(() => props.colors ?? chart?.colors.value ?? chartColors(categories.value.length));
+		const hidden = computed(() => driven ? chart.hidden.value : own.value);
+		function toggle(category) {
+			if (driven) {
+				chart.toggle(category);
+				return;
+			}
+			own.value = hidden.value.includes(category) ? hidden.value.filter((entry) => entry !== category) : [...hidden.value, category];
+		}
+		const items = computed(() => categories.value.map((category, index) => ({
+			category,
+			label: props.labelFormat ? props.labelFormat(category) : (props.categories ? void 0 : chart?.labels?.value[index]) ?? category,
+			color: colors.value[index] ?? "",
+			hidden: hidden.value.includes(category),
+			toggle: () => toggle(category)
+		})));
+		const attrs = useAttrs();
+		const merged = computed(() => mergeProps$1({ "data-part": "legend" }, attrs));
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(Part), mergeProps({ as: props.as }, merged.value), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps({
+					items: items.value,
+					hidden: hidden.value
+				})), () => [(openBlock(true), createElementBlock(Fragment, null, renderList(items.value, (item) => {
+					return openBlock(), createElementBlock("button", {
+						key: item.category,
+						type: "button",
+						"data-part": "legend-item",
+						"data-hidden": item.hidden ? "" : void 0,
+						"aria-pressed": !item.hidden,
+						onClick: ($event) => item.toggle()
+					}, [createElementVNode("span", {
+						"data-part": "legend-swatch",
+						style: normalizeStyle({ background: item.color })
+					}, null, 4), createElementVNode("span", _hoisted_2, toDisplayString(item.label), 1)], 8, _hoisted_1);
+				}), 128))])]),
+				_: 3
+			}, 16, ["as"]);
+		};
+	}
+});
+//#endregion
+export { ChartLegend_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/chart/ChartLine.js

@@ -0,0 +1,5 @@
+import ChartLine_vue_vue_type_script_setup_true_lang_default from "./ChartLine.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/chart/ChartLine.vue
+var ChartLine_default = ChartLine_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { ChartLine_default as default };

package/dist/components/chart/ChartLine.vue.d.ts

@@ -0,0 +1,23 @@
+import { type ChartCurve } from './ChartRoot.vue';
+type __VLS_Props = {
+    /** The key plotted, read off each row. */
+    yKey: string;
+    /** Its name in the legend, the tooltip and the chart's accessible name. Defaults to `y-key`. */
+    label?: string;
+    /** Defaults to `var(--chart-color-N)`, `N` its place among the chart's series. */
+    color?: string;
+    /** The value scale it reads against. A name of your own puts it on an axis of its own. @default 'y' */
+    scale?: string;
+    /** Formats its value in the tooltip. Defaults to its scale's axis. */
+    format?: (value: any) => string;
+    /** Bend the line through the points, or run it straight. @default 'smooth' */
+    curve?: ChartCurve;
+    /** Mark each row with a dot. */
+    points?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    curve: ChartCurve;
+    scale: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/chart/ChartLine.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,28 @@
+import { useChartPart } from "./ChartRoot.vue_vue_type_script_setup_true_lang.js";
+import { defineComponent } from "vue";
+//#region src/components/chart/ChartLine.vue?vue&type=script&setup=true&lang.ts
+var ChartLine_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "ChartLine",
+	__name: "ChartLine",
+	props: {
+		yKey: {},
+		label: {},
+		color: {},
+		scale: { default: "y" },
+		format: {},
+		curve: { default: "smooth" },
+		points: { type: Boolean }
+	},
+	setup(__props) {
+		const props = __props;
+		useChartPart("series", () => ({
+			kind: "line",
+			...props
+		}));
+		return (_ctx, _cache) => {
+			return null;
+		};
+	}
+});
+//#endregion
+export { ChartLine_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/chart/ChartRoot.js

@@ -0,0 +1,5 @@
+import ChartRoot_vue_vue_type_script_setup_true_lang_default, { byTemplate, provideChartRootContext, useChartPart, useChartRootContext } from "./ChartRoot.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/chart/ChartRoot.vue
+var ChartRoot_default = ChartRoot_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { byTemplate, ChartRoot_default as default, provideChartRootContext, useChartPart, useChartRootContext };

package/dist/components/chart/ChartRoot.vue.d.ts

@@ -0,0 +1,115 @@
+import { type ComponentInternalInstance } from 'vue';
+export type ChartCurve = 'smooth' | 'linear';
+export type ChartSide = 'top' | 'right' | 'bottom' | 'left';
+/** What `ChartArea`, `ChartLine` and `ChartBar` hand their chart. */
+export interface ChartSeriesPart {
+    kind: 'area' | 'line' | 'bar';
+    yKey: string;
+    label?: string;
+    color?: string;
+    scale: string;
+    format?: (value: any) => string;
+    curve?: ChartCurve;
+    points?: boolean;
+    gradient?: boolean;
+    roundedCorners?: number;
+    padding?: number;
+}
+export interface ChartAxisPart {
+    type: 'x' | 'y';
+    scale?: string;
+    side?: ChartSide;
+    format?: (value: any) => string;
+    numTicks?: number;
+    trimLabels?: boolean;
+}
+export interface ChartGridPart {
+    type: 'x' | 'y';
+    scale?: string;
+}
+/** One series in the tooltip, for the row under the pointer. */
+export interface ChartTooltipSeries {
+    key: string;
+    label: string;
+    color: string;
+    /** The raw value, as the row holds it. */
+    value: unknown;
+    /** The value through its series' or axis' formatter. */
+    text: string;
+}
+export interface ChartTooltipSlotProps<T = Record<string, any>> {
+    /** The row under the pointer. */
+    row: T;
+    /** Its `x-key` value, through the x axis' formatter. */
+    heading: string;
+    /** The series showing, in order. */
+    series: ChartTooltipSeries[];
+}
+export interface ChartTooltipPart {
+    attrs: Record<string, unknown>;
+    slot?: (props: ChartTooltipSlotProps) => unknown;
+}
+interface Parts {
+    series: ChartSeriesPart;
+    axis: ChartAxisPart;
+    grid: ChartGridPart;
+    crosshair: Record<string, never>;
+    tooltip: ChartTooltipPart;
+}
+export type ChartPartKind = keyof Parts;
+export interface ChartPart<K extends ChartPartKind = ChartPartKind> {
+    kind: K;
+    options: () => Parts[K];
+    instance: ComponentInternalInstance | null;
+    /** Registration order, the fallback for template order before anything is mounted. */
+    seq: number;
+}
+export interface ChartRootContext {
+    add(part: ChartPart): void;
+    remove(part: ChartPart): void;
+    /** A part has mounted: template order can be read off the page. */
+    mounted(): void;
+}
+export declare const provideChartRootContext: (value: ChartRootContext) => ChartRootContext, useChartRootContext: () => ChartRootContext;
+/** Hands a part's options to the chart it sits in, for as long as it is mounted. */
+export declare function useChartPart<K extends ChartPartKind>(kind: K, options: () => Parts[K]): void;
+/** Template order: what comes later paints on top. A part shown later by `v-if` registers last. */
+export declare function byTemplate(a: ChartPart, b: ChartPart): number;
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends Record<string, any>>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<{
+        /** The rows, one per point along the x axis. */
+        data: T[];
+        /** The key naming each row, along the x axis. */
+        xKey: keyof T & string;
+        /** A number means pixels. @default '20rem' */
+        height?: number | string;
+        /** Which way the bars grow, and so which way the rows run. @default 'vertical' */
+        orientation?: "vertical" | "horizontal";
+        /** Pile the bars on top of each other rather than side by side. */
+        stacked?: boolean;
+        /** Series not drawn, by `y-key`. `v-model:hidden` pairs it with a `ChartLegend`. */
+        hidden?: string[];
+        /** The chart's accessible name. Defaults to its series. */
+        label?: string;
+    } & {
+        "onUpdate:hidden"?: ((hidden: string[]) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        /** The parts: series, axes, grid, crosshair, tooltip and legend. */
+        default(): unknown;
+    };
+    emit: (evt: "update:hidden", hidden: string[]) => void;
+}>) => import("vue").VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/components/chart/ChartRoot.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,394 @@
+import { createContext } from "../../shared/context.js";
+import { useChartSeries } from "./use-chart-series.js";
+import { curveOf, plotted, rowFocus, rowLabel, rowTicks, tickLabels, valueLabel } from "./chart-scales.js";
+import ChartFrame_default from "./ChartFrame.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, getCurrentInstance, mergeProps, normalizeStyle, onBeforeUnmount, onMounted, openBlock, renderList, renderSlot, shallowRef, toDisplayString, unref, withCtx } from "vue";
+import { chartColors, formatNumber } from "@vunset/utils";
+import { areaX, areaY, barX, barY, defineChart, group, lineX, lineY, stack } from "@tanstack/charts";
+import { crosshair } from "@tanstack/charts/crosshair";
+import { decorative } from "@tanstack/charts/mark/decorative";
+import { tooltip } from "@tanstack/charts/tooltip";
+import { scaleBand } from "@tanstack/charts/scales/band";
+import { scaleLinear } from "@tanstack/charts/scales/linear";
+import { scaleOrdinal } from "@tanstack/charts/scales/ordinal";
+import { scalePoint } from "@tanstack/charts/scales/point";
+//#region src/components/chart/ChartRoot.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	key: 0,
+	"data-part": "tooltip-heading"
+};
+var _hoisted_2 = { "data-part": "tooltip-rows" };
+var _hoisted_3 = { "data-part": "tooltip-label" };
+var _hoisted_4 = { "data-part": "tooltip-value" };
+var { provideContext: provideChartRootContext, useContext: useChartRootContext } = createContext("ChartRoot");
+var seq = 0;
+/** Hands a part's options to the chart it sits in, for as long as it is mounted. */
+function useChartPart(kind, options) {
+	const chart = useChartRootContext();
+	const part = {
+		kind,
+		options,
+		instance: getCurrentInstance(),
+		seq: seq++
+	};
+	chart.add(part);
+	onMounted(() => chart.mounted());
+	onBeforeUnmount(() => chart.remove(part));
+}
+function anchor(part) {
+	const el = part.instance?.vnode.el;
+	return typeof Node !== "undefined" && el instanceof Node && el.isConnected ? el : null;
+}
+/** Template order: what comes later paints on top. A part shown later by `v-if` registers last. */
+function byTemplate(a, b) {
+	const first = anchor(a);
+	const second = anchor(b);
+	if (first && second) return first.compareDocumentPosition(second) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1;
+	return a.seq - b.seq;
+}
+var ChartRoot_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "ChartRoot",
+	inheritAttrs: false,
+	__name: "ChartRoot",
+	props: {
+		data: {},
+		xKey: {},
+		height: { default: "20rem" },
+		orientation: { default: "vertical" },
+		stacked: { type: Boolean },
+		hidden: { default: void 0 },
+		label: {}
+	},
+	emits: ["update:hidden"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const parts = shallowRef([]);
+		function sort() {
+			const next = [...parts.value].sort(byTemplate);
+			if (next.some((part, index) => part !== parts.value[index])) parts.value = next;
+		}
+		provideChartRootContext({
+			add(part) {
+				parts.value = [...parts.value, part].sort(byTemplate);
+			},
+			remove(part) {
+				parts.value = parts.value.filter((entry) => entry !== part);
+			},
+			mounted: sort
+		});
+		const of = (kind) => computed(() => parts.value.filter((part) => part.kind === kind).map((part) => part.options()));
+		const series = of("series");
+		const axes = of("axis");
+		const grids = of("grid");
+		const crosshairs = of("crosshair");
+		const tooltips = of("tooltip");
+		const keys = computed(() => [...new Set(series.value.map((entry) => entry.yKey))]);
+		const labelOf = (key) => series.value.find((entry) => entry.yKey === key && entry.label)?.label ?? key;
+		const { colors, visible } = useChartSeries({
+			categories: () => keys.value,
+			colors: () => {
+				const palette = chartColors(keys.value.length);
+				return keys.value.map((key, index) => series.value.find((entry) => entry.yKey === key && entry.color)?.color ?? palette[index]);
+			},
+			labels: () => keys.value.map(labelOf),
+			hidden: () => props.hidden,
+			prop: "hidden",
+			onHiddenChange: (next) => emit("update:hidden", next)
+		});
+		const horizontal = computed(() => props.orientation === "horizontal");
+		const shownKeys = computed(() => visible.value.map((entry) => entry.category));
+		const shownColors = computed(() => visible.value.map((entry) => entry.color));
+		const shown = computed(() => series.value.filter((entry) => shownKeys.value.includes(entry.yKey)));
+		const colorIndex = (key) => keys.value.indexOf(key);
+		const rowId = computed(() => horizontal.value ? "y" : "x");
+		const valueChannel = computed(() => horizontal.value ? "x" : "y");
+		const valueId = (scale) => scale === "y" ? valueChannel.value : scale;
+		const xAxis = computed(() => axes.value.find((axis) => axis.type === "x"));
+		const axisOf = (scale) => axes.value.find((axis) => axis.type === "y" && (axis.scale ?? "y") === scale);
+		/** Every value scale a series or an axis names, `y` first. */
+		const scales = computed(() => {
+			const named = [...series.value.map((entry) => entry.scale), ...axes.value.filter((axis) => axis.type === "y").map((axis) => axis.scale ?? "y")];
+			return [.../* @__PURE__ */ new Set(["y", ...named])].filter((scale) => scale === "y" || named.includes(scale));
+		});
+		const drawsOn = (scale) => shown.value.some((entry) => entry.scale === scale);
+		const axisShown = (scale) => drawsOn(scale) || !series.value.some((entry) => entry.scale === scale);
+		const valueGrid = computed(() => {
+			const grid = grids.value.find((entry) => entry.type === "y");
+			if (!grid) return void 0;
+			return grid.scale ?? scales.value.find(drawsOn) ?? "y";
+		});
+		const formatOf = (entry) => entry?.format ?? axisOf(entry?.scale ?? "y")?.format;
+		const xText = (row) => rowLabel(row, props.xKey, xAxis.value?.format);
+		/** The row's series for the tooltip, one per key showing. */
+		function tooltipSeries(row) {
+			return shownKeys.value.map((key, index) => {
+				const value = row[key];
+				const format = formatOf(series.value.find((entry) => entry.yKey === key));
+				return {
+					key,
+					label: labelOf(key),
+					color: shownColors.value[index] ?? "",
+					value,
+					text: format ? format(value) : formatNumber(Number(value) || 0)
+				};
+			});
+		}
+		const tooltipProps = (row) => ({
+			row,
+			heading: xText(row),
+			series: tooltipSeries(row)
+		});
+		const band = shallowRef();
+		const tickSize = shallowRef();
+		const fits = computed(() => xAxis.value?.trimLabels && !horizontal.value && band.value !== void 0 ? Math.max(1, Math.floor(band.value / ((tickSize.value ?? 11) * .6))) : void 0);
+		const trim = (label, fits) => fits !== void 0 && label.length > fits ? `${label.slice(0, Math.max(1, fits - 1))}…` : label;
+		const areaGradient = (key) => `area-${colorIndex(key)}`;
+		const barGradient = (key) => `bar-${colorIndex(key)}`;
+		const pointsOf = (key, fill) => props.data.map((row, index) => ({
+			row,
+			index,
+			category: key,
+			value: plotted(row[key]),
+			fill
+		}));
+		function barMark() {
+			const bars = shown.value.filter((entry) => entry.kind === "bar");
+			const first = bars[0];
+			const radius = first.roundedCorners ?? 2;
+			const data = props.data.flatMap((row, index) => bars.map((entry) => ({
+				row,
+				index,
+				category: entry.yKey,
+				value: plotted(row[entry.yKey]),
+				fill: entry.gradient ? `url(#${barGradient(entry.yKey)})` : void 0
+			})));
+			const options = {
+				z: "category",
+				color: "category",
+				fill: bars.some((entry) => entry.gradient) ? (bar) => bar.fill ?? colors.value[colorIndex(bar.category)] : void 0,
+				radius: props.stacked ? {
+					end: radius,
+					stack: "outer"
+				} : { end: radius },
+				layout: props.stacked ? stack() : group({ padding: .05 })
+			};
+			return horizontal.value ? barX(data, {
+				...options,
+				x: "value",
+				y: "index",
+				xScale: valueId(first.scale)
+			}) : barY(data, {
+				...options,
+				x: "index",
+				y: "value",
+				yScale: valueId(first.scale)
+			});
+		}
+		function seriesMarks(entry) {
+			const points = pointsOf(entry.yKey);
+			const channels = {
+				...horizontal.value ? {
+					x: "value",
+					y: "index",
+					xScale: valueId(entry.scale)
+				} : {
+					x: "index",
+					y: "value",
+					yScale: valueId(entry.scale)
+				},
+				z: "category",
+				color: "category",
+				curve: curveOf(entry.curve ?? "smooth")
+			};
+			const line = (horizontal.value ? lineX : lineY)(points, {
+				...channels,
+				strokeWidth: 2,
+				points: entry.points
+			});
+			if (entry.kind === "line") return [line];
+			const area = (horizontal.value ? areaX : areaY)(points, {
+				...channels,
+				fill: `url(#${areaGradient(entry.yKey)})`,
+				fillOpacity: 1
+			});
+			return [decorative(area), line];
+		}
+		const fade = computed(() => horizontal.value ? {
+			x1: 1,
+			y1: 0,
+			x2: 0,
+			y2: 0
+		} : {
+			x1: 0,
+			y1: 0,
+			x2: 0,
+			y2: 1
+		});
+		function gradients() {
+			const found = /* @__PURE__ */ new Map();
+			for (const entry of shown.value) {
+				const color = colors.value[colorIndex(entry.yKey)];
+				if (entry.kind === "area") found.set(areaGradient(entry.yKey), {
+					id: areaGradient(entry.yKey),
+					x1: 0,
+					y1: 0,
+					x2: 0,
+					y2: 1,
+					stops: [{
+						offset: 0,
+						color,
+						opacity: .25
+					}, {
+						offset: .9,
+						color,
+						opacity: 0
+					}]
+				});
+				else if (entry.kind === "bar" && entry.gradient) found.set(barGradient(entry.yKey), {
+					id: barGradient(entry.yKey),
+					...fade.value,
+					stops: [{
+						offset: 0,
+						color
+					}, {
+						offset: 1,
+						color,
+						opacity: .2
+					}]
+				});
+			}
+			return found.size ? [...found.values()] : void 0;
+		}
+		const definition = computed(() => {
+			const marks = [];
+			let bars = false;
+			for (const entry of shown.value) if (entry.kind !== "bar") marks.push(...seriesMarks(entry));
+			else if (!bars) {
+				marks.push(barMark());
+				bars = true;
+			}
+			if (crosshairs.value.length) marks.push(crosshair(horizontal.value ? {
+				x: false,
+				y: true
+			} : {
+				x: true,
+				y: false
+			}));
+			const budget = fits.value;
+			const x = xAxis.value;
+			const firstBar = series.value.find((entry) => entry.kind === "bar");
+			const rowScale = {
+				scale: firstBar ? () => scaleBand().padding(firstBar.padding ?? .1) : () => scalePoint().padding(0),
+				grid: grids.value.some((entry) => entry.type === "x"),
+				axis: x ? {
+					line: false,
+					...tickLabels(tickSize.value),
+					ticks: {
+						format: (index) => trim(xText(props.data[index]), budget),
+						values: rowTicks(props.data.length, x.numTicks)
+					}
+				} : false
+			};
+			const valueScales = Object.fromEntries(scales.value.map((scale) => {
+				const axis = axisOf(scale);
+				return [valueId(scale), {
+					...scale === "y" ? axis?.side && { side: axis.side } : {
+						channel: valueChannel.value,
+						side: axis?.side ?? (horizontal.value ? "top" : "right")
+					},
+					scale: scaleLinear,
+					nice: true,
+					grid: valueGrid.value === scale,
+					axis: axis && axisShown(scale) ? {
+						line: false,
+						...tickLabels(tickSize.value),
+						ticks: {
+							format: (raw) => valueLabel(raw, axis.format),
+							...axis.numTicks !== void 0 && { count: axis.numTicks }
+						}
+					} : false
+				}];
+			}));
+			return defineChart({
+				marks,
+				scales: {
+					[rowId.value]: rowScale,
+					...valueScales
+				},
+				color: { scale: scaleOrdinal().domain(shownKeys.value).range(shownColors.value) },
+				gradients: gradients(),
+				...rowFocus(horizontal.value),
+				tooltip: tooltips.value.length > 0 && {
+					use: tooltip,
+					content: (points) => {
+						const row = points[0]?.datum.row;
+						if (!row) return { rows: [] };
+						return {
+							title: row[props.xKey] !== void 0 ? xText(row) : void 0,
+							rows: tooltipSeries(row).map((entry) => ({
+								label: entry.label,
+								value: entry.text,
+								color: entry.color
+							}))
+						};
+					}
+				}
+			});
+		});
+		const ariaLabel = () => props.label ?? (shownKeys.value.map(labelOf).join(", ") || "Chart");
+		function onRender({ scene, svg }) {
+			band.value = props.data.length ? scene.chart.width / props.data.length : void 0;
+			const drawn = scales.value.filter(drawsOn);
+			if (drawn.length < 2) return;
+			for (const scale of drawn) {
+				const own = [...new Set(shown.value.filter((entry) => entry.scale === scale).map((entry) => entry.yKey))];
+				const color = own.length === 1 ? colors.value[colorIndex(own[0])] : void 0;
+				if (!color) continue;
+				for (const label of svg.querySelectorAll(`text[data-ts-key^="${valueId(scale)}-tick-label"]`)) label.setAttribute("fill", color);
+			}
+		}
+		const tooltip$1 = computed(() => tooltips.value[0]);
+		const Render = (own) => own.render();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(ChartFrame_default, mergeProps({
+				definition: () => definition.value,
+				label: ariaLabel,
+				height: props.height,
+				tooltip: () => unref(tooltips).length > 0,
+				"tooltip-attrs": () => tooltip$1.value?.attrs ?? {},
+				"data-orientation": props.orientation,
+				"tick-size": tickSize.value,
+				"onUpdate:tickSize": _cache[0] || (_cache[0] = ($event) => tickSize.value = $event)
+			}, _ctx.$attrs, { onRender }), {
+				tooltip: withCtx(({ point }) => [tooltip$1.value?.slot ? (openBlock(), createBlock(Render, {
+					key: 0,
+					render: () => tooltip$1.value.slot(tooltipProps(point.datum.row))
+				}, null, 8, ["render"])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [point.datum.row[props.xKey] !== void 0 ? (openBlock(), createElementBlock("div", _hoisted_1, toDisplayString(xText(point.datum.row)), 1)) : createCommentVNode("", true), createElementVNode("div", _hoisted_2, [(openBlock(true), createElementBlock(Fragment, null, renderList(tooltipSeries(point.datum.row), (entry) => {
+					return openBlock(), createElementBlock("div", {
+						key: entry.key,
+						"data-part": "tooltip-row"
+					}, [
+						createElementVNode("span", {
+							"data-part": "tooltip-swatch",
+							style: normalizeStyle({ background: entry.color })
+						}, null, 4),
+						createElementVNode("span", _hoisted_3, toDisplayString(entry.label), 1),
+						createElementVNode("span", _hoisted_4, toDisplayString(entry.text), 1)
+					]);
+				}), 128))])], 64))]),
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, [
+				"definition",
+				"height",
+				"tooltip",
+				"tooltip-attrs",
+				"data-orientation",
+				"tick-size"
+			]);
+		};
+	}
+});
+//#endregion
+export { byTemplate, ChartRoot_vue_vue_type_script_setup_true_lang_default as default, provideChartRootContext, useChartPart, useChartRootContext };

package/dist/components/chart/ChartTooltip.js

@@ -0,0 +1,5 @@
+import ChartTooltip_vue_vue_type_script_setup_true_lang_default from "./ChartTooltip.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/chart/ChartTooltip.vue
+var ChartTooltip_default = ChartTooltip_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { ChartTooltip_default as default };

package/dist/components/chart/ChartTooltip.vue.d.ts

@@ -0,0 +1,14 @@
+import { type ChartTooltipSlotProps } from './ChartRoot.vue';
+type __VLS_Slots = {
+    /** Replaces the content: a heading, then a row per series. */
+    default?(props: ChartTooltipSlotProps): unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};