vue-data-ui 3.19.8 → 3.20.0

package/dist/{vue-ui-sparkstackbar-BI8zG-DG.js → vue-ui-sparkstackbar-DG7hz_KM.js}

@@ -1,15 +1,15 @@
-import { t as e } from "./rolldown-runtime-CAFD8bLK.js";
-import { G as t, H as n, Lt as r, Mt as i, St as a, Tt as o, X as s, i as c, jt as ee, ot as te, pt as ne, t as re, x as ie, y as l, zt as ae } from "./lib-BkiwukKO.js";
-import { t as oe } from "./useConfig-ByaaSKhz.js";
-import { n as se, t as ce } from "./BaseScanner-C7dmAref.js";
-import { t as u } from "./useNestedProp-Ck4hsrpu.js";
-import { t as le } from "./useThemeCheck-rFK9Zlb_.js";
-import { t as ue } from "./_plugin-vue_export-helper-Dq1MygBL.js";
-import { t as de } from "./BaseLegendToggle-CJTwLGXL.js";
-import { t as fe } from "./A11yDataTable-q2-8fSlJ.js";
-import { t as pe } from "./useChartAccessibility-Do37qcw2.js";
-import { t as me } from "./vue_ui_sparkstackbar-C5qZMmAl.js";
-import { Fragment as d, computed as f, createBlock as p, createCommentVNode as m, createElementBlock as h, createElementVNode as g, createVNode as he, defineAsyncComponent as ge, guardReactiveProps as _, normalizeClass as v, normalizeProps as y, normalizeStyle as b, onMounted as _e, openBlock as x, ref as S, renderList as C, renderSlot as w, toDisplayString as T, toRefs as ve, unref as E, useSlots as ye, watch as be, withCtx as D } from "vue";
+import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
+import { Bt as t, Ct as n, Et as r, G as i, H as a, Mt as o, Nt as s, Rt as c, X as ee, i as l, ot as te, pt as ne, t as re, x as ie, y as u } from "./lib-DUeYQsS0.js";
+import { t as ae } from "./useConfig-DAyQk86L.js";
+import { n as oe, t as se } from "./BaseScanner-Dr2a1Msy.js";
+import { t as d } from "./useNestedProp-CNcoy38D.js";
+import { t as ce } from "./useThemeCheck-C43Tcqmk.js";
+import { t as le } from "./_plugin-vue_export-helper-B3ysoDQm.js";
+import { t as ue } from "./BaseLegendToggle-C_Db-y7s.js";
+import { t as de } from "./A11yDataTable-BCbtxMU6.js";
+import { t as fe } from "./useChartAccessibility-DYqac8yF.js";
+import { t as pe } from "./vue_ui_sparkstackbar-BOjuQnZd.js";
+import { Fragment as f, computed as p, createBlock as me, createCommentVNode as m, createElementBlock as h, createElementVNode as g, createVNode as he, defineAsyncComponent as ge, guardReactiveProps as _, normalizeClass as v, normalizeProps as y, normalizeStyle as b, onMounted as _e, openBlock as x, ref as S, renderList as C, renderSlot as w, toDisplayString as T, toRefs as ve, unref as E, useSlots as ye, watch as be, withCtx as D } from "vue";
 //#region src/components/vue-ui-sparkstackbar.vue
 var xe = /* @__PURE__ */ e({ default: () => O }), Se = ["id"], Ce = { style: { position: "relative" } }, we = [
 	"xmlns",
@@ -69,7 +69,7 @@ var xe = /* @__PURE__ */ e({ default: () => O }), Se = ["id"], Ce = { style: { p
 	key: 3,
 	ref: "source",
 	dir: "auto"
-}, O = /* @__PURE__ */ ue({
+}, O = /* @__PURE__ */ le({
 	__name: "vue-ui-sparkstackbar",
 	props: {
 		config: {
@@ -85,16 +85,16 @@ var xe = /* @__PURE__ */ e({ default: () => O }), Se = ["id"], Ce = { style: { p
 			}
 		}
 	},
-	emits: ["selectDatapoint"],
-	setup(e, { expose: ue, emit: xe }) {
-		let O = ge(() => import("./PackageVersion-zJAUEmyB.js").then((e) => e.t)), Ge = ge(() => import("./Tooltip-CuWEYGr3.js")), { vue_ui_sparkstackbar: Ke } = oe(), { isThemeValid: qe, warnInvalidTheme: Je } = le(), k = e, Ye = ye();
+	emits: ["selectDatapoint", "selectLegend"],
+	setup(e, { expose: le, emit: xe }) {
+		let O = ge(() => import("./PackageVersion-xcyrdRmY.js").then((e) => e.t)), Ge = ge(() => import("./Tooltip-BENq327o.js")), { vue_ui_sparkstackbar: Ke } = ae(), { isThemeValid: qe, warnInvalidTheme: Je } = ce(), k = e, Ye = ye();
 		_e(() => {
 			Ye["chart-background"] && console.warn("VueUiSparkStackbar does not support the #chart-background slot.");
 		});
-		let Xe = S(null), A = S(n()), j = S(!1), M = S(""), N = S(null), P = S(!1), F = S(null), Ze = S({
+		let Xe = S(null), A = S(a()), j = S(!1), M = S(""), N = S(null), P = S(!1), F = S(null), Ze = S({
 			x: 0,
 			y: 0
-		}), I = S("pointer"), L = S(!1), R = S(null), Qe = S([]), z = S(U()), $e = f(() => z.value.useCursorPointer), et = f(() => ae({
+		}), I = S("pointer"), L = S(!1), R = S(null), Qe = S([]), z = S(tt()), $e = p(() => z.value.useCursorPointer), et = p(() => t({
 			defaultConfig: { style: {
 				backgroundColor: "#99999930",
 				animation: { show: !1 },
@@ -102,10 +102,10 @@ var xe = /* @__PURE__ */ e({ default: () => O }), Se = ["id"], Ce = { style: { p
 				title: { backgroundColor: "transparent" }
 			} },
 			userConfig: z.value.skeletonConfig ?? {}
-		})), { loading: B, FINAL_DATASET: V } = se({
+		})), { loading: B, FINAL_DATASET: V } = oe({
 			...ve(k),
 			FINAL_CONFIG: z,
-			prepareConfig: U,
+			prepareConfig: tt,
 			skeletonDataset: k.config?.skeletonDataset ?? [
 				{
 					name: "_",
@@ -123,136 +123,136 @@ var xe = /* @__PURE__ */ e({ default: () => O }), Se = ["id"], Ce = { style: { p
 					color: "#DBDBDB"
 				}
 			],
-			skeletonConfig: ae({
+			skeletonConfig: t({
 				defaultConfig: z.value,
 				userConfig: et.value
 			})
-		}), { svgRef: H } = pe({ config: z.value.style.title });
-		function U() {
-			let e = u({
+		}), { svgRef: H } = fe({ config: z.value.style.title });
+		function tt() {
+			let e = d({
 				userConfig: k.config,
 				defaultConfig: Ke
 			}), t = e.theme;
 			if (!t) return e;
 			if (!qe.value(e)) return Je(e), e;
-			let n = u({
-				userConfig: me[t] || k.config,
+			let n = d({
+				userConfig: pe[t] || k.config,
 				defaultConfig: e
-			}), i = u({
+			}), i = d({
 				userConfig: k.config,
 				defaultConfig: n
 			});
 			return {
 				...i,
-				customPalette: i.customPalette.length ? i.customPalette : r[t] || o
+				customPalette: i.customPalette.length ? i.customPalette : c[t] || r
 			};
 		}
 		be(() => k.config, (e) => {
-			z.value = U(), rt();
+			z.value = tt(), it();
 		}, { deep: !0 }), be(() => V.value, (e) => {
-			G.value = V.value.map((e, t) => ({
+			W.value = V.value.map((e, t) => ({
 				...e,
-				color: e.color ? l(e.color) : W.value[t] || o[t] || o[t % o.length]
-			})), tt();
+				color: e.color ? u(e.color) : U.value[t] || r[t] || r[t % r.length]
+			})), nt();
 		}, { deep: !0 });
-		let W = f(() => ie(z.value.customPalette)), G = S(V.value.map((e, t) => ({
+		let U = p(() => ie(z.value.customPalette)), W = S(V.value.map((e, t) => ({
 			...e,
 			value: z.value.style.animation.show ? 0 : e.value || 0,
-			color: e.color ? l(e.color) : W.value[t] || o[t] || o[t % o.length]
-		}))), K = S(!0);
-		function tt() {
+			color: e.color ? u(e.color) : U.value[t] || r[t] || r[t % r.length]
+		}))), G = S(!0);
+		function nt() {
 			if (!z.value.style.animation.show) {
-				K.value = !1;
+				G.value = !1;
 				return;
 			}
-			let e = z.value.style.animation.animationFrames, t = V.value.map((e) => e.value || 0), r = t.map((t) => t / e), i = t.reduce((e, t) => e + t, 0), a = 0;
-			K.value = !0, G.value = V.value.map((e, t) => ({
+			let e = z.value.style.animation.animationFrames, t = V.value.map((e) => e.value || 0), n = t.map((t) => t / e), i = t.reduce((e, t) => e + t, 0), o = 0;
+			G.value = !0, W.value = V.value.map((e, t) => ({
 				...e,
 				value: 0,
-				color: e.color ? l(e.color) : W.value[t] || o[t] || o[t % o.length]
+				color: e.color ? u(e.color) : U.value[t] || r[t] || r[t % r.length]
 			}));
 			function s() {
-				a += i / e, a < i ? (G.value = G.value.map((e, n) => ({
+				o += i / e, o < i ? (W.value = W.value.map((e, i) => ({
 					...e,
-					value: Math.min(e.value + r[n], t[n]),
-					color: e.color ? l(e.color) : W.value[n] || o[n] || o[n % o.length]
-				})), requestAnimationFrame(s)) : (K.value = !1, G.value = V.value.map((e, r) => ({
+					value: Math.min(e.value + n[i], t[i]),
+					color: e.color ? u(e.color) : U.value[i] || r[i] || r[i % r.length]
+				})), requestAnimationFrame(s)) : (G.value = !1, W.value = V.value.map((e, n) => ({
 					...e,
-					value: t[r],
-					color: e.color ? l(e.color) : W.value[r] || o[r] || o[r % o.length],
-					id: n()
+					value: t[n],
+					color: e.color ? u(e.color) : U.value[n] || r[n] || r[n % r.length],
+					id: a()
 				})));
 			}
 			s();
 		}
 		_e(() => {
-			rt();
+			it();
 		});
-		let nt = f(() => z.value.debug);
-		function rt() {
-			a(k.dataset) ? s({
+		let rt = p(() => z.value.debug);
+		function it() {
+			n(k.dataset) ? ee({
 				componentName: "VueUiSparkStackbar",
 				type: "dataset",
-				debug: nt.value
+				debug: rt.value
 			}) : k.dataset.forEach((e, t) => {
 				te({
 					datasetObject: e,
 					requiredAttributes: ["name", "value"]
 				}).forEach((e) => {
-					s({
+					ee({
 						componentName: "VueUiSparkStackbar",
 						type: "datasetSerieAttribute",
 						property: e,
 						index: t,
-						debug: nt.value
+						debug: rt.value
 					});
 				});
-			}), tt();
+			}), nt();
 		}
-		let q = S({
+		let K = S({
 			width: 500,
 			height: 16
-		}), J = S([]), it = f(() => V.value.map((e) => e.value || 0).filter((e, t) => !J.value.includes(t)).reduce((e, t) => e + t, 0)), Y = f(() => G.value.map((e, n) => {
-			let r = e.value || 0, i = r / it.value, a = isNaN(i) ? 0 : i, s = a * q.value.width;
+		}), q = S([]), at = p(() => V.value.map((e) => e.value || 0).filter((e, t) => !q.value.includes(t)).reduce((e, t) => e + t, 0)), J = p(() => W.value.map((e, t) => {
+			let n = e.value || 0, a = n / at.value, o = isNaN(a) ? 0 : a, s = o * K.value.width;
 			return {
 				...e,
-				color: l(V.value[n]?.color ? V.value[n]?.color : W.value[n] || o[n] || o[n % o.length]),
-				value: r,
-				proportion: a,
+				color: u(V.value[t]?.color ? V.value[t]?.color : U.value[t] || r[t] || r[t % r.length]),
+				value: n,
+				proportion: o,
 				width: s,
-				seriesIndex: n,
-				proportionLabel: t({
-					v: a * 100,
+				seriesIndex: t,
+				proportionLabel: i({
+					v: o * 100,
 					s: "%",
 					r: z.value.style.legend.percentage.rounding
 				})
 			};
-		})), at = f(() => Y.value.filter((e, t) => !J.value.includes(t)));
+		})), Y = p(() => J.value.filter((e, t) => !q.value.includes(t)));
 		function ot() {
-			J.value.length ? J.value = [] : Y.value.forEach((e, t) => {
-				J.value.push(t);
-			});
+			q.value.length ? q.value = [] : J.value.forEach((e, t) => {
+				q.value.push(t);
+			}), ut("selectLegend", Y.value);
 		}
 		function X(e) {
-			J.value.includes(e) ? J.value = J.value.filter((t) => t !== e) : J.value.length < G.value.length - 1 && J.value.push(e);
+			q.value.includes(e) ? q.value = q.value.filter((t) => t !== e) : q.value.length < W.value.length - 1 && q.value.push(e), ut("selectLegend", Y.value);
 		}
 		function st(e) {
-			return Y.value.length ? Y.value.find((t) => t.name === e) || (z.value.debug && console.warn(`VueUiSparkStackbar - Series name not found "${e}"`), null) : (z.value.debug && console.warn("VueUiSparkStackbar - There are no series to show."), null);
+			return J.value.length ? J.value.find((t) => t.name === e) || (z.value.debug && console.warn(`VueUiSparkStackbar - Series name not found "${e}"`), null) : (z.value.debug && console.warn("VueUiSparkStackbar - There are no series to show."), null);
 		}
 		function ct(e) {
 			let t = st(e);
-			t !== null && J.value.includes(t.id) && X(t.seriesIndex);
+			t !== null && q.value.includes(t.id) && X(t.seriesIndex);
 		}
 		function lt(e) {
 			let t = st(e);
-			t !== null && (J.value.includes(t.id) || X(t.seriesIndex));
+			t !== null && (q.value.includes(t.id) || X(t.seriesIndex));
 		}
-		let Z = f(() => {
+		let Z = p(() => {
 			let e = 0, t = [];
-			for (let n = 0; n < at.value.length; n += 1) t.push({
-				...at.value[n],
+			for (let n = 0; n < Y.value.length; n += 1) t.push({
+				...Y.value[n],
 				start: e
-			}), e += at.value[n].width;
+			}), e += Y.value[n].width;
 			return t;
 		}), ut = xe;
 		function Q(e, t, n = !1) {
@@ -270,23 +270,23 @@ var xe = /* @__PURE__ */ e({ default: () => O }), Se = ["id"], Ce = { style: { p
 				seriesIndex: e.seriesIndex
 			});
 		}
-		function ft({ datapoint: e, seriesIndex: n, triggerMode: r = "pointer" }) {
+		function ft({ datapoint: e, seriesIndex: t, triggerMode: n = "pointer" }) {
 			if (P.value = !1, z.value.events.datapointEnter && z.value.events.datapointEnter({
 				datapoint: e,
 				seriesIndex: e.seriesIndex
 			}), !z.value.style.tooltip.show) return;
-			I.value = r, N.value = {
+			I.value = n, N.value = {
 				datapoint: e,
-				seriesIndex: n,
+				seriesIndex: t,
 				config: z.value,
-				series: Y.value
-			}, j.value = !0, R.value = n;
-			let i = z.value.style.tooltip.customFormat;
-			if (ne(i)) try {
-				let t = i({
+				series: J.value
+			}, j.value = !0, R.value = t;
+			let r = z.value.style.tooltip.customFormat;
+			if (ne(r)) try {
+				let t = r({
 					seriesIndex: e.seriesIndex,
 					datapoint: e,
-					series: Y.value,
+					series: J.value,
 					config: z.value
 				});
 				typeof t == "string" && (M.value = t, P.value = !0);
@@ -294,16 +294,16 @@ var xe = /* @__PURE__ */ e({ default: () => O }), Se = ["id"], Ce = { style: { p
 				console.warn("Custom format cannot be applied."), P.value = !1;
 			}
 			if (!P.value) {
-				let r = "";
-				r += `<div style="width:100%;text-align:center;border-bottom:1px solid ${z.value.style.tooltip.borderColor};padding-bottom:6px;margin-bottom:3px;">${e.name}</div>`, r += `<div style="display:flex;flex-direction:row;gap:6px;align-items:center;"><svg viewBox="0 0 12 12" height="14" width="14"><circle cx="6" cy="6" r="6" stroke="none" fill="${e.color}"/></svg>`, r += `<b>${e.proportionLabel}</b>`, r += `<span>(${c(z.value.style.legend.value.formatter, e.value, t({
+				let n = "";
+				n += `<div style="width:100%;text-align:center;border-bottom:1px solid ${z.value.style.tooltip.borderColor};padding-bottom:6px;margin-bottom:3px;">${e.name}</div>`, n += `<div style="display:flex;flex-direction:row;gap:6px;align-items:center;"><svg viewBox="0 0 12 12" height="14" width="14"><circle cx="6" cy="6" r="6" stroke="none" fill="${e.color}"/></svg>`, n += `<b>${e.proportionLabel}</b>`, n += `<span>(${l(z.value.style.legend.value.formatter, e.value, i({
 					p: z.value.style.legend.value.prefix,
 					v: e.value,
 					s: z.value.style.legend.value.suffix,
 					r: z.value.style.legend.value.rounding
 				}), {
 					datapoint: e,
-					seriesIndex: n
-				})})</span>`, M.value = `<div>${r}</div>`;
+					seriesIndex: t
+				})})</span>`, M.value = `<div>${n}</div>`;
 			}
 		}
 		function $(e) {
@@ -314,10 +314,10 @@ var xe = /* @__PURE__ */ e({ default: () => O }), Se = ["id"], Ce = { style: { p
 			if (!Number.isFinite(e) || !H.value) return;
 			let t = Z.value[e];
 			if (!t) return;
-			let n = H.value.getBoundingClientRect(), r = t.start + t.width / 2, i = q.value.height / 2;
+			let n = H.value.getBoundingClientRect(), r = t.start + t.width / 2, i = K.value.height / 2;
 			Ze.value = {
-				x: n.left + r / q.value.width * n.width,
-				y: n.top + i / q.value.height * n.height
+				x: n.left + r / K.value.width * n.width,
+				y: n.top + i / K.value.height * n.height
 			};
 		}
 		function mt() {
@@ -372,40 +372,40 @@ var xe = /* @__PURE__ */ e({ default: () => O }), Se = ["id"], Ce = { style: { p
 					return;
 				}
 				if (s) {
-					$(Y.value.length - 1);
+					$(J.value.length - 1);
 					return;
 				}
 				if (i) {
-					$(n <= 0 ? Y.value.length - 1 : n - 1);
+					$(n <= 0 ? J.value.length - 1 : n - 1);
 					return;
 				}
-				a && $(n >= Y.value.length - 1 ? 0 : n + 1);
+				a && $(n >= J.value.length - 1 ? 0 : n + 1);
 			}
 		}
-		let bt = f(() => ({
+		let bt = p(() => ({
 			headers: [
 				z.value.a11y.translations.series,
 				z.value.a11y.translations.percentage,
 				z.value.a11y.translations.value
 			],
-			rows: Y.value.map((e, n) => [
+			rows: J.value.map((e, t) => [
 				e.name,
-				J.value.includes(n) ? " - " : e.proportionLabel,
-				c(z.value.style.legend.value.formatter, e.value, t({
+				q.value.includes(t) ? " - " : e.proportionLabel,
+				l(z.value.style.legend.value.formatter, e.value, i({
 					p: z.value.style.legend.value.prefix,
 					v: e.value,
 					s: z.value.style.legend.value.suffix,
 					r: z.value.style.legend.value.rounding
 				}), {
 					datapoint: e,
-					seriesIndex: n
+					seriesIndex: t
 				})
 			])
 		}));
-		return ue({
+		return le({
 			hideSeries: lt,
 			showSeries: ct
-		}), (e, n) => (x(), h("div", {
+		}), (e, t) => (x(), h("div", {
 			class: "vue-data-ui-component vue-ui-spark-stackbar",
 			ref_key: "sparkstackbarChart",
 			ref: Xe,
@@ -415,7 +415,7 @@ var xe = /* @__PURE__ */ e({ default: () => O }), Se = ["id"], Ce = { style: { p
 				id: `chart-instructions-${A.value}`,
 				class: "sr-only"
 			}, [g("p", null, T(z.value.a11y.translations.keyboardNavigation), 1)], 8, Se),
-			bt.value?.rows?.length ? (x(), p(fe, {
+			bt.value?.rows?.length ? (x(), me(de, {
 				key: 0,
 				uid: A.value,
 				head: bt.value.headers,
@@ -445,7 +445,7 @@ var xe = /* @__PURE__ */ e({ default: () => O }), Se = ["id"], Ce = { style: { p
 				ref: H,
 				xmlns: E(re),
 				width: "100%",
-				viewBox: `0 0 ${q.value.width} ${q.value.height}`,
+				viewBox: `0 0 ${K.value.width} ${K.value.height}`,
 				"aria-describedby": `chart-instructions-${A.value}`,
 				tabindex: "0",
 				onFocus: mt,
@@ -453,7 +453,7 @@ var xe = /* @__PURE__ */ e({ default: () => O }), Se = ["id"], Ce = { style: { p
 				onKeydown: gt
 			}, [
 				he(E(O)),
-				g("defs", null, [(x(!0), h(d, null, C(Z.value, (e, t) => (x(), h("linearGradient", {
+				g("defs", null, [(x(!0), h(f, null, C(Z.value, (e, t) => (x(), h("linearGradient", {
 					key: `stack_gradient_${t}`,
 					gradientTransform: "rotate(90)",
 					id: `stack_gradient_${t}_${A.value}`
@@ -464,7 +464,7 @@ var xe = /* @__PURE__ */ e({ default: () => O }), Se = ["id"], Ce = { style: { p
 					}, null, 8, Ee),
 					g("stop", {
 						offset: "50%",
-						"stop-color": E(ee)(E(i)(e.color, .05), 100 - z.value.style.bar.gradient.intensity)
+						"stop-color": E(o)(E(s)(e.color, .05), 100 - z.value.style.bar.gradient.intensity)
 					}, null, 8, De),
 					g("stop", {
 						offset: "100%",
@@ -479,38 +479,38 @@ var xe = /* @__PURE__ */ e({ default: () => O }), Se = ["id"], Ce = { style: { p
 					ry: "3",
 					fill: z.value.style.backgroundColor
 				}, null, 8, Ae)])]),
-				it.value > 0 ? (x(), h("g", je, [
-					(x(!0), h(d, null, C(Z.value, (e, t) => (x(), h("rect", {
+				at.value > 0 ? (x(), h("g", je, [
+					(x(!0), h(f, null, C(Z.value, (e, t) => (x(), h("rect", {
 						key: `stack_underlayer_${t}`,
 						x: e.start,
 						y: 0,
 						width: e.width,
-						height: q.value.height,
+						height: K.value.height,
 						fill: z.value.style.bar.gradient.underlayerColor,
-						class: v({ animated: !K.value && !E(B) }),
+						class: v({ animated: !G.value && !E(B) }),
 						style: b({ opacity: R.value !== null && z.value.style.tooltip.show ? R.value === t ? 1 : .5 : 1 })
 					}, null, 14, Me))), 128)),
-					(x(!0), h(d, null, C(Z.value, (e, t) => (x(), h("rect", {
+					(x(!0), h(f, null, C(Z.value, (e, t) => (x(), h("rect", {
 						key: `stack_${t}`,
 						x: e.start,
 						y: 0,
 						width: e.width,
-						height: q.value.height,
+						height: K.value.height,
 						fill: z.value.style.bar.gradient.show ? `url(#stack_gradient_${t}_${A.value})` : e.color,
 						stroke: z.value.style.backgroundColor,
 						"stroke-linecap": "round",
-						class: v({ animated: !K.value && !E(B) }),
+						class: v({ animated: !G.value && !E(B) }),
 						style: b({ opacity: R.value !== null && z.value.style.tooltip.show ? R.value === t ? 1 : .5 : 1 })
 					}, null, 14, Ne))), 128)),
-					(x(!0), h(d, null, C(Z.value, (e, t) => (x(), h("rect", {
+					(x(!0), h(f, null, C(Z.value, (e, t) => (x(), h("rect", {
 						key: `stack_trap_${t}`,
 						x: e.start,
 						y: 0,
 						width: e.width,
-						height: q.value.height,
+						height: K.value.height,
 						fill: "transparent",
 						stroke: "none",
-						class: v({ animated: !K.value && !E(B) }),
+						class: v({ animated: !G.value && !E(B) }),
 						onClick: () => Q(e, t),
 						onMouseenter: () => ft({
 							datapoint: e,
@@ -525,12 +525,12 @@ var xe = /* @__PURE__ */ e({ default: () => O }), Se = ["id"], Ce = { style: { p
 					key: 1,
 					x: 2,
 					y: 1,
-					width: q.value.width - 4,
-					height: q.value.height - 2,
+					width: K.value.width - 4,
+					height: K.value.height - 2,
 					stroke: "#CCCCCC",
 					"stroke-width": "2",
 					fill: "transparent",
-					rx: (q.value.height - 4) / 2
+					rx: (K.value.height - 4) / 2
 				}, null, 8, Fe))
 			], 40, we)), e.$slots.hint ? (x(), h("div", Ie, [w(e.$slots, "hint", y(_({
 				hint: z.value.a11y.translations.keyboardNavigation,
@@ -542,12 +542,12 @@ var xe = /* @__PURE__ */ e({ default: () => O }), Se = ["id"], Ce = { style: { p
 				class: "vue-ui-sparkstackbar-legend",
 				"aria-label": "legend",
 				role: "toolbar"
-			}, [z.value.style.legend.selectAllToggle.show && Y.value.length > 2 && !E(B) ? (x(), p(de, {
+			}, [z.value.style.legend.selectAllToggle.show && J.value.length > 2 && !E(B) ? (x(), me(ue, {
 				key: 0,
 				backgroundColor: z.value.style.legend.selectAllToggle.backgroundColor,
 				color: z.value.style.legend.selectAllToggle.color,
 				fontSize: z.value.style.legend.fontSize,
-				checked: J.value.length > 0,
+				checked: q.value.length > 0,
 				isCursorPointer: $e.value,
 				onToggle: ot
 			}, null, 8, [
@@ -556,29 +556,29 @@ var xe = /* @__PURE__ */ e({ default: () => O }), Se = ["id"], Ce = { style: { p
 				"fontSize",
 				"checked",
 				"isCursorPointer"
-			])) : m("", !0), (x(!0), h(d, null, C(Y.value, (e, n) => (x(), h("div", {
+			])) : m("", !0), (x(!0), h(f, null, C(J.value, (e, t) => (x(), h("div", {
 				role: "button",
 				tabindex: "0",
-				"aria-pressed": J.value.includes(n),
-				"aria-label": `${e.name}, ${J.value.includes(n) ? "hidden" : "visible"}, ${e.proportionLabel}`,
+				"aria-pressed": q.value.includes(t),
+				"aria-label": `${e.name}, ${q.value.includes(t) ? "hidden" : "visible"}, ${e.proportionLabel}`,
 				style: b(`font-size:${z.value.style.legend.fontSize}px;cursor:${$e.value ? "pointer" : "default"}`),
 				class: v({
 					"vue-ui-sparkstackbar-legend-item": !0,
-					"vue-ui-sparkstackbar-legend-item-unselected": J.value.includes(n)
+					"vue-ui-sparkstackbar-legend-item-unselected": q.value.includes(t)
 				}),
-				onClick: (t) => {
-					X(n), Q(e, n, !0);
+				onClick: (n) => {
+					X(t), Q(e, t, !0);
 				},
 				onFocus: (t) => _t(e),
 				onBlur: vt,
-				onKeydown: (t) => yt(t, e, n)
+				onKeydown: (n) => yt(n, e, t)
 			}, [g("div", Re, [(x(), h("svg", {
 				height: `${z.value.style.legend.fontSize}px`,
 				width: `${z.value.style.legend.fontSize}px`,
 				viewBox: "0 0 10 10"
-			}, [g("defs", null, [g("radialGradient", { id: `legend_grad_${n}-${A.value}` }, [g("stop", {
+			}, [g("defs", null, [g("radialGradient", { id: `legend_grad_${t}-${A.value}` }, [g("stop", {
 				offset: "0%",
-				"stop-color": E(B) ? "#FFFFFF" : E(ee)(E(i)(e.color, .05), 100 - z.value.style.bar.gradient.intensity)
+				"stop-color": E(B) ? "#FFFFFF" : E(o)(E(s)(e.color, .05), 100 - z.value.style.bar.gradient.intensity)
 			}, null, 8, Ve), g("stop", {
 				offset: "100%",
 				"stop-color": e.color
@@ -586,21 +586,21 @@ var xe = /* @__PURE__ */ e({ default: () => O }), Se = ["id"], Ce = { style: { p
 				cx: 5,
 				cy: 5,
 				r: 5,
-				fill: z.value.style.bar.gradient.show ? `url(#legend_grad_${n}-${A.value})` : e.color
-			}, null, 8, Ue)], 8, ze)), E(B) ? m("", !0) : (x(), h(d, { key: 0 }, [g("span", { style: b(`color:${z.value.style.legend.name.color}; font-weight:${z.value.style.legend.name.bold ? "bold" : "normal"}`) }, T(e.name), 5), K.value ? m("", !0) : (x(), h(d, { key: 0 }, [z.value.style.legend.percentage.show ? (x(), h("span", {
+				fill: z.value.style.bar.gradient.show ? `url(#legend_grad_${t}-${A.value})` : e.color
+			}, null, 8, Ue)], 8, ze)), E(B) ? m("", !0) : (x(), h(f, { key: 0 }, [g("span", { style: b(`color:${z.value.style.legend.name.color}; font-weight:${z.value.style.legend.name.bold ? "bold" : "normal"}`) }, T(e.name), 5), G.value ? m("", !0) : (x(), h(f, { key: 0 }, [z.value.style.legend.percentage.show ? (x(), h("span", {
 				key: 0,
 				style: b(`font-weight:${z.value.style.legend.percentage.bold ? "bold" : "normal"};color:${z.value.style.legend.percentage.color}`)
-			}, T(J.value.includes(n) ? " - " : e.proportionLabel), 5)) : m("", !0), z.value.style.legend.value.show ? (x(), h("span", {
+			}, T(q.value.includes(t) ? " - " : e.proportionLabel), 5)) : m("", !0), z.value.style.legend.value.show ? (x(), h("span", {
 				key: 1,
 				style: b(`font-weight:${z.value.style.legend.value.bold ? "bold" : "normal"};color:${z.value.style.legend.value.color}`)
-			}, " (" + T(E(c)(z.value.style.legend.value.formatter, e.value, E(t)({
+			}, " (" + T(E(l)(z.value.style.legend.value.formatter, e.value, E(i)({
 				p: z.value.style.legend.value.prefix,
 				v: e.value,
 				s: z.value.style.legend.value.suffix,
 				r: z.value.style.legend.value.rounding
 			}), {
 				datapoint: e,
-				seriesIndex: n
+				seriesIndex: t
 			})) + ") ", 5)) : m("", !0)], 64))], 64))])], 46, Le))), 256))], 4)) : m("", !0),
 			he(E(Ge), {
 				teleportTo: z.value.style.tooltip.teleportTo,
@@ -654,9 +654,9 @@ var xe = /* @__PURE__ */ e({ default: () => O }), Se = ["id"], Ce = { style: { p
 				"a11yPosition"
 			]),
 			e.$slots.source ? (x(), h("div", We, [w(e.$slots, "source", {}, void 0, !0)], 512)) : m("", !0),
-			w(e.$slots, "skeleton", {}, () => [E(B) ? (x(), p(ce, { key: 0 })) : m("", !0)], !0)
+			w(e.$slots, "skeleton", {}, () => [E(B) ? (x(), me(se, { key: 0 })) : m("", !0)], !0)
 		], 4));
 	}
-}, [["__scopeId", "data-v-d14e4fb2"]]);
+}, [["__scopeId", "data-v-706a37e5"]]);
 //#endregion
 export { xe as n, O as t };