vue-data-ui 3.25.2 → 3.25.4

package/dist/{vue-ui-nested-donuts-DKzeriUP.js → vue-ui-nested-donuts-CeAV2xPk.js}

@@ -1,23 +1,23 @@
 import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
-import { $ as t, Bt as n, D as r, Ht as i, It as a, Jt as o, Lt as s, Nt as c, S as l, St as ee, X as u, Xt as te, b as ne, f as d, i as re, jt as ie, lt as ae, n as oe, nt as se, p as ce, q as le, t as ue, tt as de, w as fe } from "./lib-BPg41jWd.js";
+import { $ as t, Ct as n, D as r, Lt as i, Mt as a, Pt as o, Rt as s, S as ee, Ut as c, Vt as l, X as u, Yt as te, Zt as ne, b as re, f as ie, i as ae, lt as oe, n as se, nt as d, p as ce, q as le, t as ue, tt as de, w as fe } from "./lib-Dql7cqyA.js";
 import { n as pe, t as me } from "./useHints-Dq_w2E8B.js";
 import { t as he } from "./useConfig-CyCVHo81.js";
-import { t as ge } from "./usePrinter-CsDAx75S.js";
+import { t as ge } from "./usePrinter-DISD7q5m.js";
 import { n as _e, t as ve } from "./BaseScanner-DZvpgOjM.js";
-import { t as ye } from "./useNestedProp-fNUUtYXm.js";
+import { t as ye } from "./useNestedProp-Chvyfpl-.js";
 import { t as be } from "./useThemeCheck-C43Tcqmk.js";
 import { t as xe } from "./useChartExport-iwOqiIWX.js";
-import { t as Se } from "./img-EYBQVkRw.js";
-import { n as Ce } from "./Title-BLrnZl5j.js";
+import { t as Se } from "./img-DhGApYG0.js";
+import { n as Ce } from "./Title-CPHi-evi.js";
 import { t as we } from "./_plugin-vue_export-helper-B3ysoDQm.js";
 import { l as Te, t as Ee } from "./useResponsive-ZtArZtUf.js";
 import { t as De } from "./DefGrad-DVBqDjhO.js";
-import { t as Oe } from "./BaseLegendToggle-Cvuc-Mrr.js";
+import { t as Oe } from "./BaseLegendToggle-__JnV08B.js";
 import { t as ke } from "./A11yDataTable-DdRsVULz.js";
 import { t as Ae } from "./useUserOptionState-DK-_1ddE.js";
 import { t as je } from "./useChartAccessibility-DYqac8yF.js";
-import { t as Me } from "./labelUtils-Ba5vMXV8.js";
-import { t as Ne } from "./Legend-BQxAKh7g.js";
+import { t as Me } from "./labelUtils-BXX2NzRe.js";
+import { t as Ne } from "./Legend-X4kF4PvW.js";
 import { t as Pe } from "./vue_ui_nested_donuts-B8csIoVO.js";
 import { Fragment as f, Teleport as Fe, computed as p, createBlock as m, createCommentVNode as h, createElementBlock as g, createElementVNode as _, createSlots as Ie, createTextVNode as Le, createVNode as Re, defineAsyncComponent as v, guardReactiveProps as y, mergeProps as ze, nextTick as Be, normalizeClass as Ve, normalizeProps as b, normalizeStyle as He, onBeforeUnmount as Ue, onMounted as We, openBlock as x, ref as S, renderList as C, renderSlot as w, resolveDynamicComponent as Ge, shallowRef as Ke, toDisplayString as T, toRefs as qe, unref as E, vShow as Je, watch as Ye, withCtx as D, withDirectives as Xe } from "vue";
 //#region src/components/vue-ui-nested-donuts.vue
@@ -110,7 +110,7 @@ var Ze = /* @__PURE__ */ e({ default: () => Ot }), Qe = ["id"], $e = ["id"], et
 		"copyAlt"
 	],
 	setup(e, { expose: we, emit: Ze }) {
-		let Ot = v(() => import("./Tooltip-CmmM0DtW.js")), kt = v(() => import("./BaseIcon-Oj70ytWI.js").then((e) => e.n)), At = v(() => import("./vue-ui-accordion-BGxpEtfk.js").then((e) => e.n)), jt = v(() => import("./DataTable-DcDMoMmQ.js")), Mt = v(() => import("./UserOptions-pq95M7ss.js").then((e) => e.n)), Nt = v(() => import("./PenAndPaper-Co2OSRzH.js").then((e) => e.t)), Pt = v(() => import("./PackageVersion-DWq6mo_q.js").then((e) => e.t)), Ft = v(() => import("./BaseDraggableDialog-Cwj9aGdF.js").then((e) => e.n)), { vue_ui_nested_donuts: It } = he(), { isThemeValid: Lt, warnInvalidTheme: Rt } = be(), O = e, zt = p({
+		let Ot = v(() => import("./Tooltip-hhrkQ3Lk.js")), kt = v(() => import("./BaseIcon-t83PDe9k.js").then((e) => e.n)), At = v(() => import("./vue-ui-accordion-D4zsdacF.js").then((e) => e.n)), jt = v(() => import("./DataTable-COIO9gi4.js")), Mt = v(() => import("./UserOptions-f3Q0nqrj.js").then((e) => e.n)), Nt = v(() => import("./PenAndPaper-B_SdRSKH.js").then((e) => e.t)), Pt = v(() => import("./PackageVersion-5SWftabm.js").then((e) => e.t)), Ft = v(() => import("./BaseDraggableDialog-BM_R41j8.js").then((e) => e.n)), { vue_ui_nested_donuts: It } = he(), { isThemeValid: Lt, warnInvalidTheme: Rt } = be(), O = e, zt = p({
 			get() {
 				return !!O.dataset && O.dataset.length;
 			},
@@ -182,7 +182,7 @@ var Ze = /* @__PURE__ */ e({ default: () => Ot }), Qe = ["id"], $e = ["id"], et
 					color: "#CACACA"
 				}
 			]
-		}, sn = p(() => te({
+		}, sn = p(() => ne({
 			defaultConfig: {
 				useCssAnimation: !1,
 				table: { show: !1 },
@@ -213,7 +213,7 @@ var Ze = /* @__PURE__ */ e({ default: () => Ot }), Qe = ["id"], $e = ["id"], et
 				});
 			},
 			skeletonDataset: O.config?.skeletonDataset ?? [on, on],
-			skeletonConfig: te({
+			skeletonConfig: ne({
 				defaultConfig: F.value,
 				userConfig: sn.value
 			})
@@ -235,7 +235,7 @@ var Ze = /* @__PURE__ */ e({ default: () => Ot }), Qe = ["id"], $e = ["id"], et
 							userConfig: O.config,
 							defaultConfig: r
 						}),
-						customPalette: e.customPalette.length ? e.customPalette : o[n] || a
+						customPalette: e.customPalette.length ? e.customPalette : te[n] || i
 					};
 				}
 			} else t = e;
@@ -254,21 +254,21 @@ var Ze = /* @__PURE__ */ e({ default: () => Ot }), Qe = ["id"], $e = ["id"], et
 				left: r
 			};
 		});
-		function hn(e, t = 1e3, r = 50) {
-			return new Promise((i) => {
-				let a = e.length;
-				M.value = Array(a).fill(0), Zt.value = [];
-				let o = 0;
-				e.forEach((e, s) => {
+		function hn(e, t = 1e3, n = 50) {
+			return new Promise((r) => {
+				let i = e.length;
+				M.value = Array(i).fill(0), Zt.value = [];
+				let a = 0;
+				e.forEach((e, o) => {
 					setTimeout(() => {
-						let r = performance.now();
-						function c(l) {
-							let ee = Math.min((l - r) / t, 1), u = e * de(ee);
-							M.value[s] = u, M.value = [...M.value];
-							let te = [], d = 0;
+						let n = performance.now();
+						function s(ee) {
+							let c = Math.min((ee - n) / t, 1), u = e * de(c);
+							M.value[o] = u, M.value = [...M.value];
+							let te = [], ne = 0;
 							O.dataset.forEach((e, t) => {
-								let r = ne(e.series.reduce((e, t) => e + ne(n(t.values).reduce((e, t) => e + t, 0)), 0)) - ne(M.value.slice(d, d + e.series.length).reduce((e, t) => e + t, 0));
-								r > Number.MIN_VALUE && te.push({
+								let n = re(e.series.reduce((e, t) => e + re(l(t.values).reduce((e, t) => e + t, 0)), 0)) - re(M.value.slice(ne, ne + e.series.length).reduce((e, t) => e + t, 0));
+								n > Number.MIN_VALUE && te.push({
 									name: "__ghost__",
 									arcOf: e.name,
 									arcOfId: `${k.value}_${t}`,
@@ -276,23 +276,23 @@ var Ze = /* @__PURE__ */ e({ default: () => Ot }), Qe = ["id"], $e = ["id"], et
 									seriesIndex: -1,
 									datasetIndex: t,
 									color: "transparent",
-									value: r,
-									fullValue: r,
+									value: n,
+									fullValue: n,
 									absoluteValues: [],
 									ghost: !0
-								}), d += e.series.length;
-							}), Zt.value = te, ee < 1 ? requestAnimationFrame(c) : (o += 1, o === a && i());
+								}), ne += e.series.length;
+							}), Zt.value = te, c < 1 ? requestAnimationFrame(s) : (a += 1, a === i && r());
 						}
-						requestAnimationFrame(c);
-					}, s * r);
+						requestAnimationFrame(s);
+					}, o * n);
 				});
 			});
 		}
 		async function gn() {
 			if (F.value.startAnimation?.show) {
-				let e = L.value.flatMap((e) => e.series).map((e) => n(e.values).reduce((e, t) => e + t, 0));
+				let e = L.value.flatMap((e) => e.series).map((e) => l(e.values).reduce((e, t) => e + t, 0));
 				M.value = e.map(() => 0), j.value = !0, Zt.value = L.value.map((e, t) => {
-					let r = e.series.reduce((e, t) => e + n(t.values).reduce((e, t) => e + t, 0), 0);
+					let n = e.series.reduce((e, t) => e + l(t.values).reduce((e, t) => e + t, 0), 0);
 					return {
 						name: "__ghost__",
 						arcOf: e.name,
@@ -301,8 +301,8 @@ var Ze = /* @__PURE__ */ e({ default: () => Ot }), Qe = ["id"], $e = ["id"], et
 						seriesIndex: -1,
 						datasetIndex: t,
 						color: "transparent",
-						value: r,
-						fullValue: r,
+						value: n,
+						fullValue: n,
 						absoluteValues: [],
 						ghost: !0
 					};
@@ -316,7 +316,7 @@ var Ze = /* @__PURE__ */ e({ default: () => Ot }), Qe = ["id"], $e = ["id"], et
 		});
 		let z = Ke(null), _n = Ke(null), B = p(() => F.value.debug);
 		function vn() {
-			if (c(O.dataset) ? (se({
+			if (o(O.dataset) ? (d({
 				componentName: "VueUiNestedDonuts",
 				type: "dataset",
 				debug: B.value
@@ -371,40 +371,40 @@ var Ze = /* @__PURE__ */ e({ default: () => Ot }), Qe = ["id"], $e = ["id"], et
 		}
 		function En({ from: e, to: t, duration: n, onUpdate: r, onDone: i, easing: a = de }) {
 			let o = performance.now();
-			function s(c) {
-				let l = Math.min((c - o) / n, 1), ee = a(l);
-				r(e + (t - e) * ee, l), l < 1 ? requestAnimationFrame(s) : (r(t, 1), i && i());
+			function s(ee) {
+				let c = Math.min((ee - o) / n, 1), l = a(c);
+				r(e + (t - e) * l, c), c < 1 ? requestAnimationFrame(s) : (r(t, 1), i && i());
 			}
 			requestAnimationFrame(s);
 		}
 		let W = S([]), G = p(() => {
 			cn.value, L.value.forEach((e, t) => {
-				[null, void 0].includes(e.name) && se({
+				[null, void 0].includes(e.name) && d({
 					componentName: "VueUiNestedDonuts",
 					type: "datasetSerieAttribute",
 					property: "name",
 					index: t,
 					debug: B.value
-				}), [null, void 0].includes(e.series) ? se({
+				}), [null, void 0].includes(e.series) ? d({
 					componentName: "VueUiNestedDonuts",
 					type: "datasetSerieAttribute",
 					property: "series",
 					index: t,
 					debug: B.value
-				}) : e.series.length === 0 ? se({
+				}) : e.series.length === 0 ? d({
 					componentName: "VueUiNestedDonuts",
 					type: "datasetAttributeEmpty",
 					property: `series at index ${t}`,
 					debug: B.value
 				}) : e.series.forEach((e, t) => {
-					[null, void 0].includes(e.name) && se({
+					[null, void 0].includes(e.name) && d({
 						componentName: "VueUiNestedDonuts",
 						type: "datasetSerieAttribute",
 						property: "name",
 						index: t,
 						key: "serie",
 						debug: B.value
-					}), [null, void 0].includes(e.values) && se({
+					}), [null, void 0].includes(e.values) && d({
 						componentName: "VueUiNestedDonuts",
 						type: "datasetSerieAttribute",
 						property: "values",
@@ -415,23 +415,23 @@ var Ze = /* @__PURE__ */ e({ default: () => Ot }), Qe = ["id"], $e = ["id"], et
 				});
 			});
 			let e = 0;
-			return L.value.map((t, r) => ({
+			return L.value.map((t, n) => ({
 				...t,
-				total: t.series.filter((e) => !W.value.includes(e.id)).map((e) => n(e.values).reduce((e, t) => e + t, 0)).reduce((e, t) => e + t, 0),
-				datasetIndex: r,
-				id: `${k.value}_${r}`,
-				series: t.series.map((i, o) => {
-					let s = n(i.values).reduce((e, t) => e + t, 0);
+				total: t.series.filter((e) => !W.value.includes(e.id)).map((e) => l(e.values).reduce((e, t) => e + t, 0)).reduce((e, t) => e + t, 0),
+				datasetIndex: n,
+				id: `${k.value}_${n}`,
+				series: t.series.map((r, a) => {
+					let o = l(r.values).reduce((e, t) => e + t, 0);
 					return {
-						name: i.name,
+						name: r.name,
 						arcOf: t.name,
-						arcOfId: `${k.value}_${r}`,
-						id: `${k.value}_${r}_${o}`,
-						seriesIndex: o,
-						datasetIndex: r,
-						color: l(i.color) || wn.value[o] || a[o % a.length],
-						value: j.value ? M.value[e++] ?? 0 : s,
-						absoluteValues: i.values || []
+						arcOfId: `${k.value}_${n}`,
+						id: `${k.value}_${n}_${a}`,
+						seriesIndex: a,
+						datasetIndex: n,
+						color: ee(r.color) || wn.value[a] || i[a % i.length],
+						value: j.value ? M.value[e++] ?? 0 : o,
+						absoluteValues: r.values || []
 					};
 				})
 			}));
@@ -466,18 +466,18 @@ var Ze = /* @__PURE__ */ e({ default: () => Ot }), Qe = ["id"], $e = ["id"], et
 			U("selectLegend", q.value);
 		}
 		function Y(e) {
-			let t = O.dataset.flatMap((e, t) => e.series.map((e, r) => ({
-				value: n(e.values).reduce((e, t) => e + t, 0),
-				id: `${k.value}_${t}_${r}`,
+			let t = O.dataset.flatMap((e, t) => e.series.map((e, n) => ({
+				value: l(e.values).reduce((e, t) => e + t, 0),
+				id: `${k.value}_${t}_${n}`,
 				arcOfId: `${k.value}_${t}`
 			}))).find((t) => t.id === e.id);
 			if (!t) return;
-			let r = G.value.flatMap((e) => e.series).find((t) => t.id === e.id)?.value ?? 0, i = J.value.flatMap((e) => e.series).find((t) => t.id === e.id), a = i ? i.value : 0, o = G.value.find((e) => e.id === t.arcOfId);
-			if (!o) return;
-			let s = o.series.map((e) => e.id), c = Dn(s, s.length - 1, W.value);
+			let n = G.value.flatMap((e) => e.series).find((t) => t.id === e.id)?.value ?? 0, r = J.value.flatMap((e) => e.series).find((t) => t.id === e.id), i = r ? r.value : 0, a = G.value.find((e) => e.id === t.arcOfId);
+			if (!a) return;
+			let o = a.series.map((e) => e.id), s = Dn(o, o.length - 1, W.value);
 			W.value.includes(e.id) ? (W.value = W.value.filter((t) => t !== e.id), F.value.serieToggleAnimation.show ? En({
-				from: a,
-				to: r,
+				from: i,
+				to: n,
 				duration: F.value.serieToggleAnimation.durationMs,
 				onUpdate: (t) => {
 					J.value = J.value.map((n) => ({
@@ -495,10 +495,10 @@ var Ze = /* @__PURE__ */ e({ default: () => Ot }), Qe = ["id"], $e = ["id"], et
 				...t,
 				series: t.series.map((t) => t.id === e.id ? {
 					...t,
-					value: r
+					value: n
 				} : t)
-			})), U("selectLegend", q.value))) : c && (F.value.serieToggleAnimation.show ? En({
-				from: a,
+			})), U("selectLegend", q.value))) : s && (F.value.serieToggleAnimation.show ? En({
+				from: i,
 				to: 0,
 				duration: F.value.serieToggleAnimation.durationMs,
 				onUpdate: (t) => {
@@ -537,29 +537,29 @@ var Ze = /* @__PURE__ */ e({ default: () => Ot }), Qe = ["id"], $e = ["id"], et
 			}) : W.value.includes(t.id) || Y({ id: t.id }));
 		}
 		let Mn = p(() => K.value / G.value.length * F.value.style.chart.layout.donut.spacingRatio), Nn = p(() => J.value.map((e, t) => K.value - t * K.value / G.value.length)), X = p(() => J.value.map((e, t) => {
-			let n = Math.abs(e.series.map((e) => e.value).reduce((e, t) => e + t, 0)) > 0, r = K.value - t * K.value / J.value.length, i = j.value ? Zt.value.find((e) => e.datasetIndex === t) : null, a = [...e.series, ...i ? [i] : []].map((e) => ({
+			let n = Math.abs(e.series.map((e) => e.value).reduce((e, t) => e + t, 0)) > 0, r = K.value - t * K.value / J.value.length, i = j.value ? Zt.value.find((e) => e.datasetIndex === t) : null, o = [...e.series, ...i ? [i] : []].map((e) => ({
 				...e,
 				value: e.value < 1e-11 ? Number.MIN_VALUE : e.value
-			})), o = ie({ series: [{
+			})), s = a({ series: [{
 				name: "_",
 				color: F.value.style.chart.layout.donut.emptyFill,
 				value: 1
-			}] }, H.value.width / 2, H.value.height / 2, r, r, 1.99999, 2, 1, 360, 105.25, Mn.value), s = `M ${H.value.width / 2},${H.value.height / 2 + r}
+			}] }, H.value.width / 2, H.value.height / 2, r, r, 1.99999, 2, 1, 360, 105.25, Mn.value), ee = `M ${H.value.width / 2},${H.value.height / 2 + r}
             a ${r},${r} 0 1,1 0,${-2 * r}
             a ${r},${r} 0 1,1 0,${2 * r}`;
 			return {
 				...e,
 				hasData: n,
 				radius: r,
-				skeleton: o,
-				fullCirclePath: s,
-				donut: ie({ series: a }, H.value.width / 2, H.value.height / 2, r, r, 1.99999, 2, 1, 360, 105.25, Mn.value)
+				skeleton: s,
+				fullCirclePath: ee,
+				donut: a({ series: o }, H.value.width / 2, H.value.height / 2, r, r, 1.99999, 2, 1, 360, 105.25, Mn.value)
 			};
 		})), Pn = p(() => [...G.value].map((e, t) => {
 			let n = t * K.value / G.value.length;
 			return {
 				sizeRatio: n,
-				donut: ie({ series: [{ value: 1 }] }, H.value.width / 2, H.value.height / 2, K.value - n, K.value - n, 1.99999, 2, 1, 360, 105.25, K.value / G.value.length * F.value.style.chart.layout.donut.spacingRatio)[0]
+				donut: a({ series: [{ value: 1 }] }, H.value.width / 2, H.value.height / 2, K.value - n, K.value - n, 1.99999, 2, 1, 360, 105.25, K.value / G.value.length * F.value.style.chart.layout.donut.spacingRatio)[0]
 			};
 		})), Fn = S(null), In = S(null), Z = S(null), Ln = S(null);
 		function Rn({ datapoint: e, seriesIndex: t }) {
@@ -577,24 +577,24 @@ var Ze = /* @__PURE__ */ e({ default: () => Ot }), Qe = ["id"], $e = ["id"], et
 				showPercentage: r
 			});
 		}
-		function Bn({ datapoint: e, _relativeIndex: t, seriesIndex: n, triggerMode: r = "pointer" }) {
+		function Bn({ datapoint: e, _relativeIndex: t, seriesIndex: r, triggerMode: i = "pointer" }) {
 			F.value.events.datapointEnter && F.value.events.datapointEnter({
 				datapoint: e,
-				seriesIndex: n
-			}), nn.value = r, N.value = n, Fn.value = e.arcOfId, In.value = e.id, Z.value = n, Ht.value = e.id, Ln.value = {
+				seriesIndex: r
+			}), nn.value = i, N.value = r, Fn.value = e.arcOfId, In.value = e.id, Z.value = r, Ht.value = e.id, Ln.value = {
 				datapoint: e,
-				seriesIndex: n,
+				seriesIndex: r,
 				series: J.value,
 				config: F.value
 			};
-			let i = F.value.style.chart.tooltip.customFormat;
-			if (ee(i) && ae(() => i({
-				seriesIndex: n,
+			let a = F.value.style.chart.tooltip.customFormat;
+			if (n(a) && oe(() => a({
+				seriesIndex: r,
 				datapoint: e,
 				series: J.value,
 				config: F.value
-			}))) Vt.value = i({
-				seriesIndex: n,
+			}))) Vt.value = a({
+				seriesIndex: r,
 				datapoint: e,
 				series: J.value,
 				config: F.value
@@ -602,11 +602,11 @@ var Ze = /* @__PURE__ */ e({ default: () => Ot }), Qe = ["id"], $e = ["id"], et
 			else {
 				let t = "";
 				if (F.value.style.chart.tooltip.showAllItemsAtIndex && W.value.length === 0) {
-					let r = J.value.map((e) => e.series.find((e) => e.seriesIndex === n));
-					r.forEach((i, a) => {
+					let n = J.value.map((e) => e.series.find((e) => e.seriesIndex === r));
+					n.forEach((i, a) => {
 						if (!i) return "";
 						t += `
-                    <div style="display:flex; flex-direction: column; justify-content:flex-start; align-items:flex-start;padding:6px 0; ${a < r.length - 1 ? `border-bottom:1px solid ${F.value.style.chart.tooltip.borderColor}` : ""}">
+                    <div style="display:flex; flex-direction: column; justify-content:flex-start; align-items:flex-start;padding:6px 0; ${a < n.length - 1 ? `border-bottom:1px solid ${F.value.style.chart.tooltip.borderColor}` : ""}">
                         <div style="display:flex; flex-direction: row; gap: 3px; justify-content:flex-start; align-items:center;">
                             <svg viewBox="0 0 20 20" height="${F.value.style.chart.tooltip.fontSize}" width="${F.value.style.chart.tooltip.fontSize}">
                                 <circle cx="10" cy="10" r="10" fill="${i.color}"/>
@@ -621,14 +621,14 @@ var Ze = /* @__PURE__ */ e({ default: () => Ot }), Qe = ["id"], $e = ["id"], et
 							config: F.value.style.chart.tooltip,
 							showVal: F.value.style.chart.tooltip.showValue,
 							showPercentage: F.value.style.chart.tooltip.showPercentage,
-							val: re(F.value.style.chart.layout.labels.dataLabels.formatter, e.value, u({
+							val: ae(F.value.style.chart.layout.labels.dataLabels.formatter, e.value, u({
 								p: F.value.style.chart.layout.labels.dataLabels.prefix,
 								v: e.value,
 								s: F.value.style.chart.layout.labels.dataLabels.suffix,
 								r: F.value.style.chart.tooltip.roundingValue
 							}), {
 								datapoint: e,
-								seriesIndex: n
+								seriesIndex: r
 							}),
 							percentage: u({
 								v: i.proportion * 100,
@@ -641,14 +641,14 @@ var Ze = /* @__PURE__ */ e({ default: () => Ot }), Qe = ["id"], $e = ["id"], et
                     </div>
                 `;
 					});
-				} else t += `<div style="width:100%;text-align:center;border-bottom:1px solid ${F.value.style.chart.tooltip.borderColor};padding-bottom:6px;margin-bottom:3px;">${e.arcOf ?? ""} - ${e.name}</div>`, t += `<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>`, F.value.style.chart.tooltip.showValue && (t += `<b>${re(F.value.style.chart.layout.labels.dataLabels.formatter, e.value, u({
+				} else t += `<div style="width:100%;text-align:center;border-bottom:1px solid ${F.value.style.chart.tooltip.borderColor};padding-bottom:6px;margin-bottom:3px;">${e.arcOf ?? ""} - ${e.name}</div>`, t += `<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>`, F.value.style.chart.tooltip.showValue && (t += `<b>${ae(F.value.style.chart.layout.labels.dataLabels.formatter, e.value, u({
 					p: F.value.style.chart.layout.labels.dataLabels.prefix,
 					v: e.value,
 					s: F.value.style.chart.layout.labels.dataLabels.suffix,
 					r: F.value.style.chart.tooltip.roundingValue
 				}), {
 					datapoint: e,
-					seriesIndex: n
+					seriesIndex: r
 				})}</b>`), F.value.style.chart.tooltip.showPercentage && (F.value.style.chart.tooltip.showValue ? t += `<span>(${u({
 					v: e.proportion * 100,
 					s: "%",
@@ -671,42 +671,42 @@ var Ze = /* @__PURE__ */ e({ default: () => Ot }), Qe = ["id"], $e = ["id"], et
 			if (!F.value.style.chart.tooltip.showAllItemsAtIndex || W.value.length) return [null, void 0].includes(In.value) || In.value === e.id ? "" : `url(#blur_${k.value})`;
 		}
 		let Un = p(() => G.value.map((e, t) => {
-			let r = e.series.filter((e) => !W.value.includes(e.id)), i = j.value ? r.map((e) => {
-				let r = L.value[t].series.findIndex((t) => t.name === e.name);
-				return n(L.value[t].series[r].values).reduce((e, t) => e + t, 0);
-			}).reduce((e, t) => e + t, 0) : r.map((e) => e.value).reduce((e, t) => e + t, 0);
-			return e.series.map((e, r) => {
-				let a = n(L.value[t].series[r].values).reduce((e, t) => e + t, 0), o = j.value ? a : e.value, s = zn({
-					val: re(F.value.style.chart.layout.labels.dataLabels.formatter, o, u({
+			let n = e.series.filter((e) => !W.value.includes(e.id)), r = j.value ? n.map((e) => {
+				let n = L.value[t].series.findIndex((t) => t.name === e.name);
+				return l(L.value[t].series[n].values).reduce((e, t) => e + t, 0);
+			}).reduce((e, t) => e + t, 0) : n.map((e) => e.value).reduce((e, t) => e + t, 0);
+			return e.series.map((e, n) => {
+				let i = l(L.value[t].series[n].values).reduce((e, t) => e + t, 0), a = j.value ? i : e.value, o = zn({
+					val: ae(F.value.style.chart.layout.labels.dataLabels.formatter, a, u({
 						p: F.value.style.chart.layout.labels.dataLabels.prefix,
-						v: o,
+						v: a,
 						s: F.value.style.chart.layout.labels.dataLabels.suffix,
 						r: F.value.style.chart.legend.roundingValue
 					}), {
 						datapoint: e,
-						seriesIndex: r
+						seriesIndex: n
 					}),
-					percentage: isNaN(o / i) || W.value.includes(e.id) ? "-" : u({
-						v: o / i * 100,
+					percentage: isNaN(a / r) || W.value.includes(e.id) ? "-" : u({
+						v: a / r * 100,
 						s: "%",
 						r: F.value.style.chart.legend.roundingPercentage
 					}),
 					showVal: F.value.style.chart.legend.showValue,
 					showPercentage: F.value.style.chart.legend.showPercentage,
 					config: F.value.style.chart.legend
-				}), c = `${e.name}${F.value.style.chart.legend.showPercentage || F.value.style.chart.legend.showValue ? ": " : ""}${s}`;
+				}), s = `${e.name}${F.value.style.chart.legend.showPercentage || F.value.style.chart.legend.showValue ? ": " : ""}${o}`;
 				return {
 					name: e.name,
 					color: e.color,
-					value: o,
-					display: c,
-					svgDisplay: `${e.arcOf ? `${e.arcOf} - ` : ""}${c}`,
+					value: a,
+					display: s,
+					svgDisplay: `${e.arcOf ? `${e.arcOf} - ` : ""}${s}`,
 					shape: "circle",
 					arcOf: e.arcOf,
 					id: e.id,
-					seriesIndex: r,
+					seriesIndex: n,
 					datasetIndex: t,
-					total: i,
+					total: r,
 					opacity: W.value.includes(e.id) ? .5 : 1,
 					segregate: () => Y(e),
 					isSegregated: W.value.includes(e.id)
@@ -924,13 +924,13 @@ var Ze = /* @__PURE__ */ e({ default: () => Ot }), Qe = ["id"], $e = ["id"], et
 				});
 				return;
 			}
-			let a = N.value, o = Z.value, s = a !== null && a >= 0 && a < $.value.length, c = o !== null && o >= 0 && o < $.value.length;
-			s ? n ? (a += 1, a >= $.value.length && (a = 0)) : t && (--a, a < 0 && (a = $.value.length - 1)) : c ? (a = n ? o + 1 : o - 1, a >= $.value.length && (a = 0), a < 0 && (a = $.value.length - 1)) : a = n ? 0 : $.value.length - 1;
-			let l = $.value[a];
-			l && (N.value = a, gr(), Bn({
-				datapoint: l,
+			let a = N.value, o = Z.value, s = a !== null && a >= 0 && a < $.value.length, ee = o !== null && o >= 0 && o < $.value.length;
+			s ? n ? (a += 1, a >= $.value.length && (a = 0)) : t && (--a, a < 0 && (a = $.value.length - 1)) : ee ? (a = n ? o + 1 : o - 1, a >= $.value.length && (a = 0), a < 0 && (a = $.value.length - 1)) : a = n ? 0 : $.value.length - 1;
+			let c = $.value[a];
+			c && (N.value = a, gr(), Bn({
+				datapoint: c,
 				relativeIndex: a,
-				seriesIndex: l.seriesIndex,
+				seriesIndex: c.seriesIndex,
 				show: !0,
 				triggerMode: "keyboard"
 			}));
@@ -1196,7 +1196,7 @@ var Ze = /* @__PURE__ */ e({ default: () => Ot }), Qe = ["id"], $e = ["id"], et
 						],
 						[
 							`${(1 - Mn.value / Nn.value[t]) * 100}%`,
-							E(i)("#FFFFFF", 0),
+							E(c)("#FFFFFF", 0),
 							0
 						],
 						[
@@ -1273,7 +1273,7 @@ var Ze = /* @__PURE__ */ e({ default: () => Ot }), Qe = ["id"], $e = ["id"], et
 					"text-anchor": "middle",
 					method: "align",
 					spacing: "auto"
-				}, T(F.value.style.chart.layout.labels.dataLabels.donutNameAbbreviation ? E(oe)({
+				}, T(F.value.style.chart.layout.labels.dataLabels.donutNameAbbreviation ? E(se)({
 					source: e.name,
 					length: F.value.style.chart.layout.labels.dataLabels.donutNameMaxAbbreviationSize
 				}) : e.name), 9, ht)], 8, mt)) : h("", !0)]))), 256))]))), 256)) : (x(!0), g(f, { key: 1 }, C(X.value, (e, t) => (x(), g("g", null, [(x(!0), g(f, null, C(e.donut, (t, n) => (x(), g("g", null, [n === 0 && H.value.width && H.value.height ? (x(), g("text", {
@@ -1284,14 +1284,14 @@ var Ze = /* @__PURE__ */ e({ default: () => Ot }), Qe = ["id"], $e = ["id"], et
 					"font-size": F.value.style.chart.layout.labels.dataLabels.fontSize,
 					"font-weight": F.value.style.chart.layout.labels.dataLabels.boldDonutName ? "bold" : "normal",
 					fill: F.value.style.chart.layout.labels.dataLabels.color
-				}, T(F.value.style.chart.layout.labels.dataLabels.donutNameAbbreviation ? E(oe)({
+				}, T(F.value.style.chart.layout.labels.dataLabels.donutNameAbbreviation ? E(se)({
 					source: e.name,
 					length: F.value.style.chart.layout.labels.dataLabels.donutNameMaxAbbreviationSize
 				}) : e.name), 9, gt)) : h("", !0)]))), 256))]))), 256))])) : h("", !0),
 				F.value.style.chart.layout.labels.dataLabels.show ? (x(), g("g", _t, [(x(!0), g(f, null, C(X.value, (e, t) => (x(), g("g", null, [(x(!0), g(f, null, C(e.donut.filter((e) => !e.ghost), (e, n) => (x(), g("g", { filter: Hn(e, n) }, [Xe(_("text", {
 					opacity: +!!Vn(e),
-					"text-anchor": E(d)(e, !0).anchor,
-					x: E(d)(e, !1, F.value.style.chart.layout.labels.dataLabels.offsetX).x || 0,
+					"text-anchor": E(ie)(e, !0).anchor,
+					x: E(ie)(e, !1, F.value.style.chart.layout.labels.dataLabels.offsetX).x || 0,
 					y: E(ce)(e, F.value.style.chart.layout.labels.dataLabels.offsetY, F.value.style.chart.layout.labels.dataLabels.offsetY) + (F.value.style.chart.layout.labels.dataLabels.showValueFirst && F.value.style.chart.layout.labels.dataLabels.showValue ? F.value.style.chart.layout.labels.dataLabels.fontSize : 0),
 					fill: F.value.style.chart.layout.labels.dataLabels.useSerieColor ? e.color : F.value.style.chart.layout.labels.dataLabels.color,
 					"font-size": F.value.style.chart.layout.labels.dataLabels.fontSize,
@@ -1302,13 +1302,13 @@ var Ze = /* @__PURE__ */ e({ default: () => Ot }), Qe = ["id"], $e = ["id"], et
 					r: F.value.style.chart.layout.labels.dataLabels.roundingPercentage
 				}), F.value.style.chart.layout.labels.dataLabels.usePercentageParens ? "(" : "", F.value.style.chart.layout.labels.dataLabels.usePercentageParens ? ")" : "")), 9, yt), [[Je, V.value.dataLabels.show && F.value.style.chart.layout.labels.dataLabels.showPercentage]]), Xe(_("text", {
 					opacity: +!!Vn(e),
-					"text-anchor": E(d)(e, !0).anchor,
-					x: E(d)(e, !1, F.value.style.chart.layout.labels.dataLabels.offsetX).x || 0,
+					"text-anchor": E(ie)(e, !0).anchor,
+					x: E(ie)(e, !1, F.value.style.chart.layout.labels.dataLabels.offsetX).x || 0,
 					y: E(ce)(e, F.value.style.chart.layout.labels.dataLabels.offsetY, F.value.style.chart.layout.labels.dataLabels.offsetY) + (F.value.style.chart.layout.labels.dataLabels.showValueFirst || !F.value.style.chart.layout.labels.dataLabels.showPercentage ? 0 : F.value.style.chart.layout.labels.dataLabels.fontSize),
 					fill: F.value.style.chart.layout.labels.dataLabels.useSerieColor ? e.color : F.value.style.chart.layout.labels.dataLabels.color,
 					"font-size": F.value.style.chart.layout.labels.dataLabels.fontSize,
 					"font-weight": F.value.style.chart.layout.labels.dataLabels.boldValue ? "bold" : "normal"
-				}, T(E(s)(E(re)(F.value.style.chart.layout.labels.dataLabels.formatter, e.value, E(u)({
+				}, T(E(s)(E(ae)(F.value.style.chart.layout.labels.dataLabels.formatter, e.value, E(u)({
 					p: F.value.style.chart.layout.labels.dataLabels.prefix,
 					v: e.value,
 					s: F.value.style.chart.layout.labels.dataLabels.suffix,
@@ -1362,7 +1362,7 @@ var Ze = /* @__PURE__ */ e({ default: () => Ot }), Qe = ["id"], $e = ["id"], et
 				parent: A.value,
 				content: Vt.value,
 				isFullscreen: P.value,
-				isCustom: E(ee)(F.value.style.chart.tooltip.customFormat),
+				isCustom: E(n)(F.value.style.chart.tooltip.customFormat),
 				smooth: F.value.style.chart.tooltip.smooth,
 				backdropFilter: F.value.style.chart.tooltip.backdropFilter,
 				smoothForce: F.value.style.chart.tooltip.smoothForce,