iryx-ui 0.14.0 → 0.16.0

package/dist/components/LineChart.vue_vue_type_script_setup_true_lang.js

@@ -1,42 +1,57 @@
 import { useIryxUiConfig as e } from "../config.js";
 import { useElementSize as t } from "../composables/element-size.js";
 import { cartesianLayout as n, clampTooltip as r, seriesColor as i, slotOf as a, warnOnSlotOverflow as o } from "../composables/cartesian.js";
-import ee from "./ChartLegend.js";
-import { lineChartTheme as s } from "../theme/line-chart.js";
-import { Fragment as c, computed as l, createBlock as te, createCommentVNode as u, createElementBlock as d, createElementVNode as f, defineComponent as p, guardReactiveProps as m, normalizeClass as h, normalizeProps as g, normalizeStyle as _, openBlock as v, ref as y, renderList as b, renderSlot as x, toDisplayString as S, unref as C } from "vue";
+import { useChartAnimation as s, useChartReveal as c } from "../composables/chart-reveal.js";
+import l from "./ChartLegend.js";
+import { lineChartTheme as u } from "../theme/line-chart.js";
+import { Fragment as d, computed as f, createBlock as ee, createCommentVNode as p, createElementBlock as m, createElementVNode as h, defineComponent as g, guardReactiveProps as _, normalizeClass as v, normalizeProps as y, normalizeStyle as b, openBlock as x, ref as S, renderList as C, renderSlot as w, toDisplayString as T, unref as E, useId as D } from "vue";
 //#region src/components/LineChart.vue?vue&type=script&setup=true&lang.ts
-var w = ["role", "aria-label"], T = [
+var te = ["role", "aria-label"], ne = [
 	"width",
 	"height",
 	"viewBox"
-], E = [
+], O = [
 	"x1",
 	"y1",
 	"x2",
 	"y2"
-], D = ["x", "y"], O = ["d"], k = [
+], re = ["x", "y"], ie = { key: 1 }, ae = [
+	"x",
+	"y",
+	"width",
+	"height"
+], oe = [
 	"x1",
 	"y1",
 	"x2",
 	"y2"
-], A = ["d"], j = ["cx", "cy"], M = ["cx", "cy"], ne = ["x", "y"], re = [
+], se = ["clip-path"], ce = ["d", "fill"], le = ["d"], ue = ["cx", "cy"], de = ["cx", "cy"], fe = ["x", "y"], pe = [
 	"x",
 	"y",
 	"width",
 	"height",
 	"onPointerenter"
-], ie = { scope: "row" }, N = /*@__PURE__*/ p({
+], me = { scope: "row" }, k = /*@__PURE__*/ g({
 	__name: "LineChart",
 	props: {
 		data: { default: () => [] },
 		series: {},
 		variant: { default: "line" },
+		tension: { default: 0 },
+		flush: {
+			type: Boolean,
+			default: void 0
+		},
 		height: { default: 240 },
 		ticks: { default: 5 },
 		axis: {
 			type: Boolean,
 			default: !0
 		},
+		animate: {
+			type: [Boolean, Object],
+			default: !0
+		},
 		legend: {
 			type: Boolean,
 			default: !0
@@ -55,44 +70,44 @@ var w = ["role", "aria-label"], T = [
 		class: {},
 		ui: {}
 	},
-	setup(p) {
-		let N = p, ae = e(), P = l(() => N.unstyled ?? ae.unstyled), F = y(), { width: I } = t(F), L = l(() => new Intl.NumberFormat(N.locale, N.format));
-		function R(e) {
-			return L.value.format(e);
+	setup(g) {
+		let k = g, he = e(), A = f(() => k.unstyled ?? he.unstyled), j = S(), { width: M } = t(j), ge = f(() => new Intl.NumberFormat(k.locale, k.format));
+		function N(e) {
+			return ge.value.format(e);
 		}
-		let z = l(() => {
-			let e = N.series?.length ? [...N.series] : [{ key: "value" }];
+		let P = f(() => {
+			let e = k.series?.length ? [...k.series] : [{ key: "value" }];
 			return o(e.length), e;
-		}), B = l(() => z.value.length > 1), V = l(() => B.value || N.legend && z.value[0].name != null);
-		function H(e, t) {
+		}), F = f(() => P.value.length > 1), _e = f(() => F.value || k.legend && P.value[0].name != null);
+		function I(e, t) {
 			let n = e[t];
 			return typeof n == "number" && Number.isFinite(n) ? n : null;
 		}
-		let U = l(() => n({
-			values: N.data.flatMap((e) => z.value.map((t) => H(e, t.key))),
-			categories: N.data.length,
-			longestLabel: Math.max(...N.data.map((e) => e.label.length), 1),
-			width: I.value,
-			height: N.height,
-			tickCount: N.ticks,
-			showAxis: N.axis,
-			formatTick: R,
-			includeZero: N.zero
+		let L = f(() => n({
+			values: k.data.flatMap((e) => P.value.map((t) => I(e, t.key))),
+			categories: k.data.length,
+			longestLabel: Math.max(...k.data.map((e) => e.label.length), 1),
+			width: M.value,
+			height: k.height,
+			tickCount: k.ticks,
+			showAxis: k.axis,
+			formatTick: N,
+			includeZero: k.zero
 		}));
-		function W(e) {
+		function R(e) {
 			return Math.round(e * 100) / 100;
 		}
-		let G = l(() => I.value ? z.value.map((e, t) => {
+		let z = f(() => M.value ? P.value.map((e, t) => {
 			let n = [], r = [];
-			return N.data.forEach((t, i) => {
-				let a = H(t, e.key);
+			return k.data.forEach((t, i) => {
+				let a = I(t, e.key);
 				if (a == null) {
 					r.length && n.push(r), r = [];
 					return;
 				}
 				r.push({
-					x: W(U.value.bandCentre(i)),
-					y: W(U.value.y(a)),
+					x: R(L.value.pointAt(i)),
+					y: R(L.value.y(a)),
 					index: i
 				});
 			}), r.length && n.push(r), {
@@ -100,166 +115,217 @@ var w = ["role", "aria-label"], T = [
 				color: i(a(e, t)),
 				seriesIndex: t
 			};
-		}) : []), K = l(() => N.variant === "area" && !B.value && G.value.length > 0);
-		function q(e) {
-			return e.map((e, t) => `${t === 0 ? "M" : "L"}${e.x} ${e.y}`).join(" ");
+		}) : []), B = f(() => k.variant === "area" && !F.value && z.value.length > 0), V = f(() => {
+			let e = k.data?.length ?? 0;
+			return {
+				first: e ? R(L.value.pointAt(0)) : 0,
+				last: e ? R(L.value.pointAt(e - 1)) : 0,
+				left: R(L.value.plot.left),
+				right: R(L.value.plot.left + L.value.plot.width)
+			};
+		});
+		function H(e) {
+			return k.flush && e.x === V.value.last ? `L${V.value.right} ${e.y}` : "";
 		}
-		function oe(e) {
-			let t = U.value.plot.top + U.value.plot.height, n = e[0], r = e[e.length - 1];
-			return `${q(e)} L${r.x} ${t} L${n.x} ${t} Z`;
+		let U = f(() => Math.min(Math.max(k.tension, 0), 1) / 6);
+		function W(e) {
+			let t = e[0], n = e[e.length - 1], r = k.flush && t.x === V.value.first ? `M${V.value.left} ${t.y} L${t.x} ${t.y}` : `M${t.x} ${t.y}`;
+			if (U.value === 0 || e.length < 2) return [
+				r,
+				...e.slice(1).map((e) => `L${e.x} ${e.y}`),
+				H(n)
+			].filter(Boolean).join(" ");
+			let i = (e, t, n) => Math.min(Math.max(e, Math.min(t, n)), Math.max(t, n));
+			return [
+				r,
+				...e.slice(1).map((t, n) => {
+					let r = e[n], a = e[n - 1] ?? r, o = t, s = e[n + 2] ?? o, c = r.x + (o.x - a.x) * U.value, l = i(r.y + (o.y - a.y) * U.value, r.y, o.y), u = o.x - (s.x - r.x) * U.value, d = i(o.y - (s.y - r.y) * U.value, r.y, o.y);
+					return `C${R(c)} ${R(l)}, ${R(u)} ${R(d)}, ${o.x} ${o.y}`;
+				}),
+				H(n)
+			].filter(Boolean).join(" ");
+		}
+		function ve(e) {
+			let t = L.value.plot.top + L.value.plot.height, n = e[0], r = e[e.length - 1], i = k.flush && n.x === V.value.first ? V.value.left : n.x, a = k.flush && r.x === V.value.last ? V.value.right : r.x;
+			return `${W(e)} L${a} ${t} L${i} ${t} Z`;
 		}
-		let J = y(), Y = l(() => J.value == null ? [] : G.value.flatMap((e) => {
+		let G = `iryx-area-${D()}`, K = `iryx-plot-clip-${D()}`, q = S(), J = f(() => q.value == null ? [] : z.value.flatMap((e) => {
 			for (let t of e.runs) {
-				let n = t.find((e) => e.index === J.value);
+				let n = t.find((e) => e.index === q.value);
 				if (n) return [{
 					...n,
 					color: e.color
 				}];
 			}
 			return [];
-		})), X = l(() => J.value == null ? void 0 : W(U.value.bandCentre(J.value))), Z = l(() => {
-			if (J.value == null) return;
-			let e = N.data[J.value];
+		})), Y = f(() => q.value == null ? void 0 : R(L.value.pointAt(q.value))), X = f(() => {
+			if (q.value == null) return;
+			let e = k.data[q.value];
 			if (!e) return;
-			let t = z.value.map((t, n) => ({
+			let t = P.value.map((t, n) => ({
 				name: t.name ?? t.key,
 				color: i(a(t, n)),
-				value: H(e, t.key)
+				value: I(e, t.key)
 			})).filter((e) => e.value != null).map((e) => ({
 				...e,
-				value: R(e.value)
+				value: N(e.value)
 			}));
 			if (!t.length) return;
-			let n = B.value ? Math.max(e.label.length, ...t.map((e) => e.name.length + e.value.length + 3)) : e.label.length + t[0].value.length + 2;
+			let n = F.value ? Math.max(e.label.length, ...t.map((e) => e.name.length + e.value.length + 3)) : e.label.length + t[0].value.length + 2;
 			return {
 				label: e.label,
 				rows: t,
-				multi: B.value,
-				x: r(U.value.bandCentre(J.value), "x".repeat(n), I.value),
-				y: Math.min(...Y.value.map((e) => e.y), U.value.plot.top + U.value.plot.height)
+				multi: F.value,
+				x: r(L.value.pointAt(q.value), "x".repeat(n), M.value),
+				y: Math.min(...J.value.map((e) => e.y), L.value.plot.top + L.value.plot.height)
 			};
-		}), Q = l(() => s());
+		}), Z = s(f(() => k.animate)), { revealed: ye } = c(f(() => !!(M.value && z.value.length)), Z), be = f(() => ({
+			transform: `scaleX(${+!!ye.value})`,
+			transformOrigin: `${L.value.plot.left}px 0px`,
+			transition: `transform ${Z.value.duration}ms ${Z.value.css}`
+		})), Q = f(() => u());
 		function $(e, t) {
-			let n = N.ui?.[e];
-			return P.value ? [n, t] : Q.value[e]({ class: [n, t] });
+			let n = k.ui?.[e];
+			return A.value ? [n, t] : Q.value[e]({ class: [n, t] });
 		}
-		return (e, t) => (v(), d("div", {
+		return (e, t) => (x(), m("div", {
 			ref_key: "root",
-			ref: F,
-			role: N.label ? "figure" : void 0,
-			"aria-label": N.label,
-			class: h($("root", N.class))
+			ref: j,
+			role: k.label ? "figure" : void 0,
+			"aria-label": k.label,
+			class: v($("root", k.class))
 		}, [
-			V.value ? (v(), te(ee, {
+			_e.value ? (x(), ee(l, {
 				key: 0,
-				series: z.value,
-				unstyled: N.unstyled
-			}, null, 8, ["series", "unstyled"])) : u("", !0),
-			f("div", { class: h(P.value ? void 0 : Q.value.plot()) }, [(v(), d("svg", {
-				width: C(I),
-				height: N.height,
-				viewBox: `0 0 ${C(I)} ${N.height}`,
+				series: P.value,
+				unstyled: k.unstyled
+			}, null, 8, ["series", "unstyled"])) : p("", !0),
+			h("div", { class: v(A.value ? void 0 : Q.value.plot()) }, [(x(), m("svg", {
+				width: E(M),
+				height: k.height,
+				viewBox: `0 0 ${E(M)} ${k.height}`,
 				"aria-hidden": "true",
-				class: h($("svg"))
+				class: v($("svg"))
 			}, [
-				N.axis ? (v(!0), d(c, { key: 0 }, b(U.value.ticks, (e) => (v(), d("g", { key: `tick-${e}` }, [f("line", {
-					x1: U.value.plot.left,
-					y1: U.value.y(e),
-					x2: U.value.plot.left + U.value.plot.width,
-					y2: U.value.y(e),
+				k.axis ? (x(!0), m(d, { key: 0 }, C(L.value.ticks, (e) => (x(), m("g", { key: `tick-${e}` }, [h("line", {
+					x1: L.value.plot.left,
+					y1: L.value.y(e),
+					x2: L.value.plot.left + L.value.plot.width,
+					y2: L.value.y(e),
 					"stroke-width": "1",
-					class: h($("grid"))
-				}, null, 10, E), f("text", {
-					x: U.value.plot.left - C(8),
-					y: U.value.y(e),
+					class: v($("grid"))
+				}, null, 10, O), h("text", {
+					x: L.value.plot.left - E(8),
+					y: L.value.y(e),
 					"text-anchor": "end",
 					"dominant-baseline": "middle",
-					class: h($("tick"))
-				}, S(R(e)), 11, D)]))), 128)) : u("", !0),
-				x(e.$slots, "underlay", g(m(U.value))),
-				K.value ? (v(!0), d(c, { key: 1 }, b(G.value[0].runs, (e, t) => (v(), d("path", {
-					key: `area-${t}`,
-					d: oe(e),
-					style: _({ fill: G.value[0].color }),
-					class: h($("area"))
-				}, null, 14, O))), 128)) : u("", !0),
-				X.value == null ? u("", !0) : (v(), d("line", {
+					class: v($("tick"))
+				}, T(N(e)), 11, re)]))), 128)) : p("", !0),
+				w(e.$slots, "underlay", y(_(L.value))),
+				B.value ? (x(), m("defs", ie, [h("linearGradient", {
+					id: G,
+					x1: "0",
+					y1: "0",
+					x2: "0",
+					y2: "1"
+				}, [...t[1] ||= [h("stop", {
+					offset: "0%",
+					"stop-color": "currentColor",
+					"stop-opacity": "0.35"
+				}, null, -1), h("stop", {
+					offset: "100%",
+					"stop-color": "currentColor",
+					"stop-opacity": "0"
+				}, null, -1)]]), h("clipPath", { id: K }, [h("rect", {
+					x: L.value.plot.left,
+					y: L.value.plot.top,
+					width: L.value.plot.width,
+					height: L.value.plot.height,
+					style: b(be.value)
+				}, null, 12, ae)])])) : p("", !0),
+				Y.value == null ? p("", !0) : (x(), m("line", {
 					key: 2,
-					x1: X.value,
-					y1: U.value.plot.top,
-					x2: X.value,
-					y2: U.value.plot.top + U.value.plot.height,
+					x1: Y.value,
+					y1: L.value.plot.top,
+					x2: Y.value,
+					y2: L.value.plot.top + L.value.plot.height,
 					"stroke-width": "1",
-					class: h($("crosshair"))
-				}, null, 10, k)),
-				(v(!0), d(c, null, b(G.value, (e) => (v(), d(c, { key: `series-${e.seriesIndex}` }, [(v(!0), d(c, null, b(e.runs, (t, n) => (v(), d("path", {
+					class: v($("crosshair"))
+				}, null, 10, oe)),
+				h("g", { "clip-path": `url(#${K})` }, [(x(!0), m(d, null, C(B.value ? z.value[0].runs : [], (e, t) => (x(), m("path", {
+					key: `area-${t}`,
+					d: ve(e),
+					fill: `url(#${G})`,
+					style: b({ color: z.value[0].color }),
+					class: v($("area"))
+				}, null, 14, ce))), 128)), (x(!0), m(d, null, C(z.value, (e) => (x(), m(d, { key: `series-${e.seriesIndex}` }, [(x(!0), m(d, null, C(e.runs, (t, n) => (x(), m("path", {
 					key: `line-${e.seriesIndex}-${n}`,
-					d: q(t),
-					style: _({ stroke: e.color }),
-					class: h($("line"))
-				}, null, 14, A))), 128))], 64))), 128)),
-				(v(!0), d(c, null, b(Y.value, (e, t) => (v(), d(c, { key: `marker-${t}` }, [f("circle", {
+					d: W(t),
+					style: b({ stroke: e.color }),
+					class: v($("line"))
+				}, null, 14, le))), 128))], 64))), 128))], 8, se),
+				(x(!0), m(d, null, C(J.value, (e, t) => (x(), m(d, { key: `marker-${t}` }, [h("circle", {
 					cx: e.x,
 					cy: e.y,
 					r: "6",
-					class: h($("markerRing"))
-				}, null, 10, j), f("circle", {
+					class: v($("markerRing"))
+				}, null, 10, ue), h("circle", {
 					cx: e.x,
 					cy: e.y,
 					r: "4",
-					style: _({ fill: e.color }),
-					class: h($("marker"))
-				}, null, 14, M)], 64))), 128)),
-				(v(!0), d(c, null, b(N.data, (e, t) => (v(), d(c, { key: `label-${e.label}-${t}` }, [t % U.value.labelStep === 0 ? (v(), d("text", {
+					style: b({ fill: e.color }),
+					class: v($("marker"))
+				}, null, 14, de)], 64))), 128)),
+				(x(!0), m(d, null, C(k.data, (e, t) => (x(), m(d, { key: `label-${e.label}-${t}` }, [t % L.value.labelStep === 0 ? (x(), m("text", {
 					key: 0,
-					x: U.value.bandCentre(t),
-					y: U.value.plot.top + U.value.plot.height + 14,
+					x: L.value.pointAt(t),
+					y: L.value.plot.top + L.value.plot.height + 14,
 					"text-anchor": "middle",
-					class: h($("category"))
-				}, S(e.label), 11, ne)) : u("", !0)], 64))), 128)),
-				x(e.$slots, "overlay", g(m(U.value))),
-				(v(!0), d(c, null, b(N.data, (e, n) => (v(), d("rect", {
+					class: v($("category"))
+				}, T(e.label), 11, fe)) : p("", !0)], 64))), 128)),
+				w(e.$slots, "overlay", y(_(L.value))),
+				(x(!0), m(d, null, C(k.data, (e, n) => (x(), m("rect", {
 					key: `hit-${e.label}-${n}`,
-					x: U.value.plot.left + U.value.bandWidth * n,
-					y: U.value.plot.top,
-					width: U.value.bandWidth,
-					height: U.value.plot.height,
-					class: h(P.value ? void 0 : Q.value.hit()),
-					onPointerenter: (e) => J.value = n,
-					onPointerleave: t[0] ||= (e) => J.value = void 0
-				}, null, 42, re))), 128))
-			], 10, T)), Z.value ? (v(), d("div", {
+					x: L.value.plot.left + L.value.bandWidth * n,
+					y: L.value.plot.top,
+					width: L.value.bandWidth,
+					height: L.value.plot.height,
+					class: v(A.value ? void 0 : Q.value.hit()),
+					onPointerenter: (e) => q.value = n,
+					onPointerleave: t[0] ||= (e) => q.value = void 0
+				}, null, 42, pe))), 128))
+			], 10, ne)), X.value ? (x(), m("div", {
 				key: 0,
-				class: h($("tooltip", Z.value.multi ? "flex-col items-start gap-1" : void 0)),
-				style: _({
-					left: `${Z.value.x}px`,
-					top: `${Z.value.y}px`,
+				class: v($("tooltip", X.value.multi ? "flex-col items-start gap-1" : void 0)),
+				style: b({
+					left: `${X.value.x}px`,
+					top: `${X.value.y}px`,
 					transform: "translate(-50%, -100%) translateY(-12px)"
 				})
-			}, [f("span", { class: h($("tooltipLabel")) }, S(Z.value.label), 3), Z.value.multi ? (v(!0), d(c, { key: 0 }, b(Z.value.rows, (e) => (v(), d("span", {
+			}, [h("span", { class: v($("tooltipLabel")) }, T(X.value.label), 3), X.value.multi ? (x(!0), m(d, { key: 0 }, C(X.value.rows, (e) => (x(), m("span", {
 				key: e.name,
 				class: "flex items-center gap-1.5"
 			}, [
-				f("span", {
+				h("span", {
 					class: "size-2 shrink-0 rounded-full",
-					style: _({ background: e.color })
+					style: b({ background: e.color })
 				}, null, 4),
-				f("span", { class: h($("tooltipLabel")) }, S(e.name), 3),
-				f("span", { class: h($("tooltipValue")) }, S(e.value), 3)
-			]))), 128)) : (v(), d("span", {
+				h("span", { class: v($("tooltipLabel")) }, T(e.name), 3),
+				h("span", { class: v($("tooltipValue")) }, T(e.value), 3)
+			]))), 128)) : (x(), m("span", {
 				key: 1,
-				class: h($("tooltipValue"))
-			}, S(Z.value.rows[0].value), 3))], 6)) : u("", !0)], 2),
-			f("table", { class: h($("table")) }, [
-				f("caption", null, S(N.label), 1),
-				f("thead", null, [f("tr", null, [t[1] ||= f("th", { scope: "col" }, " Category ", -1), (v(!0), d(c, null, b(z.value, (e) => (v(), d("th", {
+				class: v($("tooltipValue"))
+			}, T(X.value.rows[0].value), 3))], 6)) : p("", !0)], 2),
+			h("div", { class: v($("table")) }, [h("table", null, [
+				h("caption", null, T(k.label), 1),
+				h("thead", null, [h("tr", null, [t[2] ||= h("th", { scope: "col" }, " Category ", -1), (x(!0), m(d, null, C(P.value, (e) => (x(), m("th", {
 					key: e.key,
 					scope: "col"
-				}, S(e.name ?? "Value"), 1))), 128))])]),
-				f("tbody", null, [(v(!0), d(c, null, b(N.data, (e, t) => (v(), d("tr", { key: `row-${e.label}-${t}` }, [f("th", ie, S(e.label), 1), (v(!0), d(c, null, b(z.value, (t) => (v(), d("td", { key: t.key }, S(H(e, t.key) == null ? "—" : R(H(e, t.key))), 1))), 128))]))), 128))])
-			], 2)
-		], 10, w));
+				}, T(e.name ?? "Value"), 1))), 128))])]),
+				h("tbody", null, [(x(!0), m(d, null, C(k.data, (e, t) => (x(), m("tr", { key: `row-${e.label}-${t}` }, [h("th", me, T(e.label), 1), (x(!0), m(d, null, C(P.value, (t) => (x(), m("td", { key: t.key }, T(I(e, t.key) == null ? "—" : N(I(e, t.key))), 1))), 128))]))), 128))])
+			])], 2)
+		], 10, te));
 	}
 });
 //#endregion
-export { N as default };
+export { k as default };

package/dist/components/Popover.vue.d.ts

@@ -61,8 +61,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
 }>, {
     unstyled: boolean;
     closeLabel: string;
-    align: "start" | "center" | "end";
     side: "top" | "right" | "bottom" | "left";
+    align: "start" | "center" | "end";
     sideOffset: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/components/Sparkline.vue.d.ts

@@ -1,3 +1,4 @@
+import type { ChartAnimate } from '../composables/chart-reveal';
 import type { SparseValue } from '../composables/scale';
 export interface SparklineProps {
     /** Values, oldest first. `null` is a gap in the series, not a zero. */
@@ -21,6 +22,13 @@ export interface SparklineProps {
     label?: string;
     /** Rendered height in px. Width always fills the container. */
     height?: number;
+    /**
+     * Draw the line on across the box on the first paint. Off by default here,
+     * unlike the full-size charts: a sparkline usually sits inside a stat tile
+     * or a table row, and a page of them animating at once is a distraction
+     * rather than an arrival.
+     */
+    animate?: ChartAnimate;
     /** Skip built-in classes; you take over styling entirely. */
     unstyled?: boolean;
     class?: string;
@@ -31,6 +39,7 @@ declare const __VLS_export: import("vue").DefineComponent<SparklineProps, {}, {}
     variant: "line" | "area";
     unstyled: boolean;
     data: readonly SparseValue[];
+    animate: ChartAnimate;
     height: number;
     baseline: "min" | "zero";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;