vue-data-ui 3.20.10 → 3.21.0

package/dist/{vue-ui-rings-cDPIzhPb.js → vue-ui-rings-BgFO7NYF.js}

@@ -1,23 +1,23 @@
 import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
-import { At as t, B as n, Bt as r, Ct as i, Et as a, G as o, H as ee, J as te, Mt as ne, Nt as re, Rt as ie, S as ae, X as oe, i as se, nt as ce, ot as le, pt as ue, t as de, v as fe, x as pe, y as me } from "./lib-DUeYQsS0.js";
+import { B as t, Bt as n, Ft as r, G as i, H as a, Ht as ee, J as te, Mt as ne, Ot as o, Pt as re, S as ie, Tt as ae, X as oe, ct as se, ht as ce, i as le, it as ue, t as de, v as fe, x as pe, y as me } from "./lib-AJRHFE5U.js";
 import { t as he } from "./useConfig-DnH7Pf_2.js";
-import { t as ge } from "./usePrinter-C1Gqt_Sp.js";
+import { t as ge } from "./usePrinter-6n2MzVyV.js";
 import { n as _e, t as ve } from "./BaseScanner-Dr2a1Msy.js";
 import { t as ye } from "./useSvgExport-SVIsDot8.js";
-import { t as be } from "./useNestedProp-CNcoy38D.js";
+import { t as be } from "./useNestedProp-DtcXIg7n.js";
 import { t as xe } from "./useThemeCheck-C43Tcqmk.js";
-import { t as Se } from "./img-1cKsci8e.js";
-import { n as Ce } from "./Title-NWp4qB4K.js";
-import { t as we } from "./Shape-BPCJfphn.js";
+import { t as Se } from "./img-C_RNNswI.js";
+import { n as Ce } from "./Title-DH6G8_cZ.js";
+import { t as we } from "./Shape-BxFtoF1z.js";
 import { t as Te } from "./_plugin-vue_export-helper-B3ysoDQm.js";
 import { c as Ee } from "./canvas-lib-BOP_HS11.js";
 import { t as De } from "./useResponsive-BfnK0KxU.js";
-import { t as Oe } from "./BaseLegendToggle-C_Db-y7s.js";
+import { t as Oe } from "./BaseLegendToggle-BNRi408o.js";
 import { t as ke } from "./A11yDataTable-BCbtxMU6.js";
 import { t as Ae } from "./useUserOptionState-DK-_1ddE.js";
 import { t as je } from "./useChartAccessibility-DYqac8yF.js";
-import { t as Me } from "./labelUtils-CUctkYoA.js";
-import { t as Ne } from "./Legend-Cz2uQ5gs.js";
+import { t as Me } from "./labelUtils-Bycs-017.js";
+import { t as Ne } from "./Legend-BLhREbj7.js";
 import { t as Pe } from "./vue_ui_rings-BVgD2aMn.js";
 import { Fragment as Fe, Teleport as Ie, computed as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createSlots as Le, createTextVNode as Re, createVNode as ze, defineAsyncComponent as f, guardReactiveProps as p, mergeProps as Be, nextTick as Ve, normalizeClass as m, normalizeProps as h, normalizeStyle as g, onBeforeUnmount as He, onMounted as Ue, openBlock as _, ref as v, renderList as We, renderSlot as y, resolveDynamicComponent as Ge, shallowRef as Ke, toDisplayString as qe, toRefs as Je, unref as b, useSlots as Ye, watch as Xe, withCtx as x } from "vue";
 //#region src/components/vue-ui-rings.vue
@@ -107,10 +107,10 @@ var Ze = /* @__PURE__ */ e({ default: () => bt }), Qe = ["id"], $e = ["id"], et
 	},
 	emits: ["selectLegend", "copyAlt"],
 	setup(e, { expose: Te, emit: Ze }) {
-		let bt = f(() => import("./Tooltip-BENq327o.js")), xt = f(() => import("./BaseIcon-DfLoHNUj.js").then((e) => e.n)), St = f(() => import("./vue-ui-accordion-Bpbv-VHE.js").then((e) => e.n)), Ct = f(() => import("./DataTable-B--IN22e.js")), wt = f(() => import("./PenAndPaper-DqrClVfb.js").then((e) => e.t)), Tt = f(() => import("./UserOptions-C1NgoGu6.js").then((e) => e.n)), Et = f(() => import("./PackageVersion-BbgWxFC4.js").then((e) => e.t)), Dt = f(() => import("./BaseDraggableDialog-4hDW-Rj2.js").then((e) => e.n)), { vue_ui_rings: Ot } = he(), { isThemeValid: kt, warnInvalidTheme: At } = xe(), jt = Ye(), S = e, C = v(!1), Mt = s(() => !!S.dataset && S.dataset.length), w = v(ee()), T = v(!1), Nt = v(""), E = v(null), Pt = v(0), D = v(null), Ft = v(null), It = v(null), Lt = v(null), Rt = v(null), zt = v(0), Bt = v(0), Vt = v(0), Ht = v(!1), Ut = v(!1), O = v(null), Wt = v(null), Gt = v(!1), Kt = v(!1), k = v(null), qt = v({
+		let bt = f(() => import("./Tooltip-979Ytd8R.js")), xt = f(() => import("./BaseIcon-CbDazQLH.js").then((e) => e.n)), St = f(() => import("./vue-ui-accordion-DLnwuQda.js").then((e) => e.n)), Ct = f(() => import("./DataTable-DweDyHc1.js")), wt = f(() => import("./PenAndPaper-D4aFMYZf.js").then((e) => e.t)), Tt = f(() => import("./UserOptions-qFz-9Pnw.js").then((e) => e.n)), Et = f(() => import("./PackageVersion-DYLo3MRd.js").then((e) => e.t)), Dt = f(() => import("./BaseDraggableDialog-BvaFJWHb.js").then((e) => e.n)), { vue_ui_rings: Ot } = he(), { isThemeValid: kt, warnInvalidTheme: At } = xe(), jt = Ye(), S = e, C = v(!1), Mt = s(() => !!S.dataset && S.dataset.length), w = v(a()), T = v(!1), Nt = v(""), E = v(null), Pt = v(0), D = v(null), Ft = v(null), It = v(null), Lt = v(null), Rt = v(null), zt = v(0), Bt = v(0), Vt = v(0), Ht = v(!1), Ut = v(!1), O = v(null), Wt = v(null), Gt = v(!1), Kt = v(!1), k = v(null), qt = v({
 			x: 0,
 			y: 0
-		}), A = v("pointer"), Jt = v(!1), j = v(tn()), M = s(() => j.value.userOptions.useCursorPointer), Yt = s(() => r({
+		}), A = v("pointer"), Jt = v(!1), j = v(tn()), M = s(() => j.value.userOptions.useCursorPointer), Yt = s(() => ee({
 			defaultConfig: {
 				userOptions: { show: !1 },
 				table: { show: !1 },
@@ -158,7 +158,7 @@ var Ze = /* @__PURE__ */ e({ default: () => bt }), Qe = ["id"], $e = ["id"], et
 					color: "#DBDBDB"
 				}
 			],
-			skeletonConfig: r({
+			skeletonConfig: ee({
 				defaultConfig: j.value,
 				userConfig: Yt.value
 			})
@@ -170,16 +170,16 @@ var Ze = /* @__PURE__ */ e({ default: () => bt }), Qe = ["id"], $e = ["id"], et
 			}), t = e.theme;
 			if (!t) return e;
 			if (!kt.value(e)) return At(e), e;
-			let n = be({
+			let r = be({
 				userConfig: Pe[t] || S.config,
 				defaultConfig: e
 			});
 			return {
 				...be({
 					userConfig: S.config,
-					defaultConfig: n
+					defaultConfig: r
 				}),
-				customPalette: e.customPalette.length ? e.customPalette : ie[e.theme] || a
+				customPalette: e.customPalette.length ? e.customPalette : n[e.theme] || o
 			};
 		}
 		Xe(() => S.config, (e) => {
@@ -204,7 +204,7 @@ var Ze = /* @__PURE__ */ e({ default: () => bt }), Qe = ["id"], $e = ["id"], et
 		});
 		let rn = s(() => !!j.value.debug);
 		function an() {
-			if (i(S.dataset) ? (oe({
+			if (ae(S.dataset) ? (oe({
 				componentName: "VueUiRings",
 				type: "dataset",
 				debug: rn.value
@@ -213,7 +213,7 @@ var Ze = /* @__PURE__ */ e({ default: () => bt }), Qe = ["id"], $e = ["id"], et
 					componentName: "VueUiRings",
 					type: "dataset",
 					debug: rn.value
-				}), Zt.value = !0), le({
+				}), Zt.value = !0), se({
 					datasetObject: e,
 					requiredAttributes: ["name", "values"]
 				}).forEach((e) => {
@@ -225,7 +225,7 @@ var Ze = /* @__PURE__ */ e({ default: () => bt }), Qe = ["id"], $e = ["id"], et
 						debug: rn.value
 					});
 				});
-			}), i(S.dataset) || (Zt.value = j.value.loading), j.value.responsive) {
+			}), ae(S.dataset) || (Zt.value = j.value.loading), j.value.responsive) {
 				let e = Ee(() => {
 					Ht.value = !0;
 					let { width: e, height: t } = De({
@@ -303,18 +303,18 @@ var Ze = /* @__PURE__ */ e({ default: () => bt }), Qe = ["id"], $e = ["id"], et
 		function bn(e) {
 			return e / yn.value;
 		}
-		let H = s(() => Xt.value.map(({ values: e, name: n, color: r = null }, i) => {
-			let o = t(e).reduce((e, t) => e + t, 0);
+		let H = s(() => Xt.value.map(({ values: e, name: t, color: n = null }, r) => {
+			let i = ne(e).reduce((e, t) => e + t, 0);
 			return {
-				name: n,
-				color: r || me(r) || dn.value[i] || a[i] || a[i % a.length],
-				value: o,
-				proportion: o / Xt.value.map((e) => (e.values || []).reduce((e, t) => e + t, 0)).reduce((e, t) => e + t, 0),
-				uid: ee(),
-				absoluteIndex: i
+				name: t,
+				color: n || me(n) || dn.value[r] || o[r] || o[r % o.length],
+				value: i,
+				proportion: i / Xt.value.map((e) => (e.values || []).reduce((e, t) => e + t, 0)).reduce((e, t) => e + t, 0),
+				uid: a(),
+				absoluteIndex: r
 			};
 		})), U = s(() => H.value.map((e, t) => {
-			let n = se(j.value.style.chart.layout.labels.dataLabels.formatter, e.value, o({
+			let n = le(j.value.style.chart.layout.labels.dataLabels.formatter, e.value, i({
 				p: j.value.style.chart.layout.labels.dataLabels.prefix,
 				v: e.value,
 				s: j.value.style.chart.layout.labels.dataLabels.suffix,
@@ -322,11 +322,11 @@ var Ze = /* @__PURE__ */ e({ default: () => bt }), Qe = ["id"], $e = ["id"], et
 			}), {
 				datapoint: e,
 				index: t
-			}), r = isNaN(e.value / W.value) ? "-" : o({
+			}), r = isNaN(e.value / W.value) ? "-" : i({
 				v: e.value / W.value * 100,
 				s: "%",
 				r: j.value.style.chart.legend.roundingPercentage
-			}), i = Tn({
+			}), a = Tn({
 				showVal: j.value.style.chart.legend.showValue,
 				showPercentage: j.value.style.chart.legend.showPercentage,
 				val: n,
@@ -338,7 +338,7 @@ var Ze = /* @__PURE__ */ e({ default: () => bt }), Qe = ["id"], $e = ["id"], et
 				opacity: B.value.includes(e.uid) ? .5 : 1,
 				segregate: () => V(e.uid),
 				isSegregated: B.value.includes(e.uid),
-				display: `${e.name}${j.value.style.chart.legend.showPercentage || j.value.style.chart.legend.showValue ? ": " : ""}${i}`
+				display: `${e.name}${j.value.style.chart.legend.showPercentage || j.value.style.chart.legend.showValue ? ": " : ""}${a}`
 			};
 		}).toSorted((e, t) => t.value - e.value)), xn = s(() => ({
 			cy: "rings-div-legend",
@@ -347,11 +347,11 @@ var Ze = /* @__PURE__ */ e({ default: () => bt }), Qe = ["id"], $e = ["id"], et
 			fontSize: j.value.style.chart.legend.fontSize,
 			paddingBottom: 12,
 			fontWeight: j.value.style.chart.legend.bold ? "bold" : ""
-		})), W = s(() => H.value.filter((e) => !B.value.includes(e.uid)).map(({ value: e }) => e).reduce((e, t) => e + t, 0)), G = s(() => H.value.filter((e) => !B.value.includes(e.uid)).map(({ name: e, value: t, color: n = null, uid: r, absoluteIndex: i }, o) => ({
+		})), W = s(() => H.value.filter((e) => !B.value.includes(e.uid)).map(({ value: e }) => e).reduce((e, t) => e + t, 0)), G = s(() => H.value.filter((e) => !B.value.includes(e.uid)).map(({ name: e, value: t, color: n = null, uid: r, absoluteIndex: i }, a) => ({
 			absoluteIndex: i,
 			uid: r,
 			name: e,
-			color: n || me(n) || dn.value[o] || a[o] || a[o % a.length],
+			color: n || me(n) || dn.value[a] || o[a] || o[a % o.length],
 			value: t,
 			proportion: bn(t),
 			percentage: t / W.value * 100,
@@ -390,12 +390,12 @@ var Ze = /* @__PURE__ */ e({ default: () => bt }), Qe = ["id"], $e = ["id"], et
 			});
 		}
 		function En(e) {
-			let t = j.value.style.chart.layout.labels.dataLabels, n = se(t.formatter, e.value, o({
+			let t = j.value.style.chart.layout.labels.dataLabels, n = le(t.formatter, e.value, i({
 				p: t.prefix,
 				v: e.value,
 				s: t.suffix,
 				r: t.roundingValue
-			})), r = o({
+			})), r = i({
 				v: e.percentage,
 				s: "%",
 				r: t.roundingPercentage
@@ -432,13 +432,13 @@ var Ze = /* @__PURE__ */ e({ default: () => bt }), Qe = ["id"], $e = ["id"], et
 				series: G.value,
 				config: j.value
 			}, E.value = t, k.value = t, A.value = n;
-			let r = G.value[t], i = j.value.style.chart.tooltip.customFormat;
-			if (ue(i) && ce(() => i({
+			let r = G.value[t], a = j.value.style.chart.tooltip.customFormat;
+			if (ce(a) && ue(() => a({
 				seriesIndex: t,
 				datapoint: e,
 				series: G.value,
 				config: j.value
-			}))) Nt.value = i({
+			}))) Nt.value = a({
 				seriesIndex: t,
 				datapoint: e,
 				series: G.value,
@@ -449,7 +449,7 @@ var Ze = /* @__PURE__ */ e({ default: () => bt }), Qe = ["id"], $e = ["id"], et
 				n += `<div style="width:100%;text-align:center;border-bottom:1px solid ${j.value.style.chart.tooltip.borderColor};padding-bottom:6px;margin-bottom:3px;">${r.name}</div>`, n += `<div style="display:flex;flex-direction:row;gap:6px;align-items:center;"><svg viewBox="0 0 60 60" height="14" width="14"><circle cx="30" cy="30" r="30" stroke="none" fill="${r.color}" />${jt.pattern ? `<circle cx="30" cy="30" r="30" stroke="none" fill="url(#pattern_${w.value}_${e.absoluteIndex})" />` : ""}</svg>`, n += `<b>${Tn({
 					showVal: j.value.style.chart.tooltip.showValue,
 					showPercentage: j.value.style.chart.tooltip.showPercentage,
-					val: `<span>${se(j.value.style.chart.layout.labels.dataLabels.formatter, r.value, o({
+					val: `<span>${le(j.value.style.chart.layout.labels.dataLabels.formatter, r.value, i({
 						p: j.value.style.chart.layout.labels.dataLabels.prefix,
 						v: r.value,
 						s: j.value.style.chart.layout.labels.dataLabels.suffix,
@@ -458,7 +458,7 @@ var Ze = /* @__PURE__ */ e({ default: () => bt }), Qe = ["id"], $e = ["id"], et
 						datapoint: e,
 						seriesIndex: t
 					})}</span>`,
-					percentage: o({
+					percentage: i({
 						v: r.value / W.value * 100,
 						s: "%",
 						r: j.value.style.chart.tooltip.roundingPercentage
@@ -476,7 +476,7 @@ var Ze = /* @__PURE__ */ e({ default: () => bt }), Qe = ["id"], $e = ["id"], et
 		})), Z = s(() => {
 			let e = [
 				" <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M18 16v2a1 1 0 0 1 -1 1h-11l6 -7l-6 -7h11a1 1 0 0 1 1 1v2\" /></svg>",
-				o({
+				i({
 					p: j.value.style.chart.layout.labels.dataLabels.prefix,
 					v: W.value,
 					s: j.value.style.chart.layout.labels.dataLabels.suffix,
@@ -488,7 +488,7 @@ var Ze = /* @__PURE__ */ e({ default: () => bt }), Qe = ["id"], $e = ["id"], et
 					color: e.color,
 					name: e.name
 				},
-				o({
+				i({
 					p: j.value.style.chart.layout.labels.dataLabels.prefix,
 					v: X.value.body[t],
 					s: j.value.style.chart.layout.labels.dataLabels.suffix,
@@ -526,7 +526,7 @@ var Ze = /* @__PURE__ */ e({ default: () => bt }), Qe = ["id"], $e = ["id"], et
 					[e.name],
 					[X.value.body[t]],
 					[isNaN(X.value.body[t] / W.value) ? "-" : X.value.body[t] / W.value * 100]
-				]), n = ae([
+				]), n = ie([
 					[j.value.style.chart.title.text],
 					[j.value.style.chart.title.subtitle.text],
 					[
@@ -685,8 +685,8 @@ var Ze = /* @__PURE__ */ e({ default: () => bt }), Qe = ["id"], $e = ["id"], et
 			}
 			let a = k.value;
 			a === null || a < 0 || a >= G.value.length ? a = n ? 0 : G.value.length - 1 : n ? (a += 1, a >= G.value.length && (a = 0)) : t && (--a, a < 0 && (a = G.value.length - 1));
-			let o = G.value[a];
-			o && (Yn(a), On(o, a, "keyboard"));
+			let ee = G.value[a];
+			ee && (Yn(a), On(ee, a, "keyboard"));
 		}
 		function Yn(e) {
 			if (!Number.isFinite(e) || !P.value) return;
@@ -717,16 +717,16 @@ var Ze = /* @__PURE__ */ e({ default: () => bt }), Qe = ["id"], $e = ["id"], et
 			toggleFullscreen: An,
 			toggleLabels: Nn,
 			copyAlt: Gn
-		}), (e, t) => (_(), u("div", {
+		}), (e, n) => (_(), u("div", {
 			ref_key: "ringsChart",
 			ref: D,
 			class: m(`vue-data-ui-component vue-ui-rings ${Q.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${j.value.useCssAnimation ? "" : "vue-ui-dna"}`),
 			style: g(`font-family:${j.value.style.fontFamily};text-align:center;width:100%;background:${j.value.style.chart.backgroundColor};${j.value.responsive ? "height: 100%" : ""}`),
 			id: `rings_${w.value}`,
-			onMouseleave: t[2] ||= (e) => {
+			onMouseleave: n[2] ||= (e) => {
 				E.value = null, T.value = !1, b($t)(!1);
 			},
-			onMouseenter: t[3] ||= () => b($t)(!0)
+			onMouseenter: n[3] ||= () => b($t)(!0)
 		}, [
 			d("div", {
 				id: `chart-instructions-${w.value}`,
@@ -946,7 +946,7 @@ var Ze = /* @__PURE__ */ e({ default: () => bt }), Qe = ["id"], $e = ["id"], et
 					id: `gradient_${w.value}_${t}`
 				}, [d("stop", {
 					offset: "0%",
-					"stop-color": b(ne)(b(re)(e.color, .05), 100 - j.value.style.chart.layout.rings.gradient.intensity)
+					"stop-color": b(re)(b(r)(e.color, .05), 100 - j.value.style.chart.layout.rings.gradient.intensity)
 				}, null, 8, at), d("stop", {
 					offset: "100%",
 					"stop-color": e.color
@@ -955,7 +955,7 @@ var Ze = /* @__PURE__ */ e({ default: () => bt }), Qe = ["id"], $e = ["id"], et
 					seriesIndex: t.absoluteIndex,
 					patternId: `pattern_${w.value}_${t.absoluteIndex}`
 				}), void 0, !0)]))), 256))])) : l("", !0),
-				(_(!0), u(Fe, null, We(G.value, (t, r) => (_(), u("g", null, [
+				(_(!0), u(Fe, null, We(G.value, (n, r) => (_(), u("g", null, [
 					d("circle", {
 						class: m({
 							"vue-ui-rings-item": C.value && j.value.useCssAnimation,
@@ -965,8 +965,8 @@ var Ze = /* @__PURE__ */ e({ default: () => bt }), Qe = ["id"], $e = ["id"], et
 						style: g(`animation-delay:${r * 100}ms`),
 						stroke: j.value.style.chart.layout.rings.stroke,
 						cx: F.value.x,
-						cy: J(t, r),
-						r: q(t),
+						cy: J(n, r),
+						r: q(n),
 						fill: j.value.style.chart.layout.rings.gradient.underlayerColor
 					}, null, 14, ct),
 					d("circle", {
@@ -978,11 +978,11 @@ var Ze = /* @__PURE__ */ e({ default: () => bt }), Qe = ["id"], $e = ["id"], et
 						}),
 						style: g(`animation-delay:${r * 100}ms`),
 						stroke: j.value.style.chart.layout.rings.stroke,
-						"stroke-width": t.strokeWidth < .5 ? .5 : t.strokeWidth,
+						"stroke-width": n.strokeWidth < .5 ? .5 : n.strokeWidth,
 						cx: F.value.x,
-						cy: J(t, r),
-						r: q(t),
-						fill: j.value.style.chart.layout.rings.gradient.show ? `url(#gradient_${w.value}_${r})` : t.color
+						cy: J(n, r),
+						r: q(n),
+						fill: j.value.style.chart.layout.rings.gradient.show ? `url(#gradient_${w.value}_${r})` : n.color
 					}, null, 14, lt),
 					e.$slots.pattern ? (_(), u("circle", {
 						key: 0,
@@ -994,27 +994,27 @@ var Ze = /* @__PURE__ */ e({ default: () => bt }), Qe = ["id"], $e = ["id"], et
 						}),
 						style: g(`animation-delay:${r * 100}ms`),
 						stroke: j.value.style.chart.layout.rings.stroke,
-						"stroke-width": t.strokeWidth < .5 ? .5 : t.strokeWidth,
+						"stroke-width": n.strokeWidth < .5 ? .5 : n.strokeWidth,
 						cx: F.value.x,
-						cy: J(t, r),
-						r: q(t),
-						fill: `url(#pattern_${w.value}_${t.absoluteIndex})`
+						cy: J(n, r),
+						r: q(n),
+						fill: `url(#pattern_${w.value}_${n.absoluteIndex})`
 					}, null, 14, ut)) : l("", !0),
 					d("circle", {
 						stroke: "none",
 						cx: F.value.x,
-						cy: J(t, r),
-						r: q(t),
+						cy: J(n, r),
+						r: q(n),
 						fill: "transparent",
-						onMouseenter: (e) => On(t, r, "pointer"),
-						onMouseleave: (e) => wn(t, r),
-						onClick: (e) => Cn(t, r)
+						onMouseenter: (e) => On(n, r, "pointer"),
+						onMouseleave: (e) => wn(n, r),
+						onClick: (e) => Cn(n, r)
 					}, null, 40, dt),
 					R.value.showLabels ? (_(), u(Fe, { key: 1 }, [
 						d("rect", {
-							x: j.value.style.chart.layout.labels.dataLabels.markers.position === "left" ? Y(t, r).x : F.value.x,
-							y: Y(t, r).y - j.value.style.chart.layout.labels.dataLabels.markers.strokeWidth / 2,
-							width: Math.abs(F.value.x - Y(t, r).x),
+							x: j.value.style.chart.layout.labels.dataLabels.markers.position === "left" ? Y(n, r).x : F.value.x,
+							y: Y(n, r).y - j.value.style.chart.layout.labels.dataLabels.markers.strokeWidth / 2,
+							width: Math.abs(F.value.x - Y(n, r).x),
 							height: j.value.style.chart.layout.labels.dataLabels.markers.strokeWidth,
 							fill: j.value.style.chart.layout.labels.dataLabels.markers.stroke,
 							rx: j.value.style.chart.layout.labels.dataLabels.markers.strokeWidth,
@@ -1026,10 +1026,10 @@ var Ze = /* @__PURE__ */ e({ default: () => bt }), Qe = ["id"], $e = ["id"], et
 							})
 						}, null, 10, ft),
 						d("circle", {
-							cx: Y(t, r).x,
-							cy: Y(t, r).y,
+							cx: Y(n, r).x,
+							cy: Y(n, r).y,
 							r: j.value.style.chart.layout.labels.dataLabels.markers.radius,
-							fill: t.color,
+							fill: n.color,
 							stroke: j.value.style.chart.backgroundColor,
 							class: m({
 								"vue-ui-rings-item": C.value && j.value.useCssAnimation,
@@ -1039,8 +1039,8 @@ var Ze = /* @__PURE__ */ e({ default: () => bt }), Qe = ["id"], $e = ["id"], et
 							})
 						}, null, 10, pt),
 						d("text", {
-							x: Y(t, r).x + (j.value.style.chart.layout.labels.dataLabels.markers.position === "left" ? -j.value.style.chart.layout.labels.dataLabels.offsetX : j.value.style.chart.layout.labels.dataLabels.offsetX),
-							y: Y(t, r).y + j.value.style.chart.layout.labels.dataLabels.fontSize / 3,
+							x: Y(n, r).x + (j.value.style.chart.layout.labels.dataLabels.markers.position === "left" ? -j.value.style.chart.layout.labels.dataLabels.offsetX : j.value.style.chart.layout.labels.dataLabels.offsetX),
+							y: Y(n, r).y + j.value.style.chart.layout.labels.dataLabels.fontSize / 3,
 							"text-anchor": j.value.style.chart.layout.labels.dataLabels.markers.position === "left" ? "end" : "start",
 							"font-size": j.value.style.chart.layout.labels.dataLabels.fontSize,
 							fill: j.value.style.chart.layout.labels.dataLabels.color,
@@ -1051,15 +1051,15 @@ var Ze = /* @__PURE__ */ e({ default: () => bt }), Qe = ["id"], $e = ["id"], et
 								"vue-ui-rings-shadow": j.value.style.chart.layout.rings.useShadow,
 								"vue-ui-rings-blur": E.value !== null && E.value !== r
 							}),
-							onMouseenter: (e) => On(t, r, "pointer"),
-							onMouseleave: (e) => wn(t, r),
-							onClick: (e) => Cn(t, r),
-							innerHTML: b(n)({
-								content: En(t),
+							onMouseenter: (e) => On(n, r, "pointer"),
+							onMouseleave: (e) => wn(n, r),
+							onClick: (e) => Cn(n, r),
+							innerHTML: b(t)({
+								content: En(n),
 								fontSize: j.value.style.chart.layout.labels.dataLabels.fontSize,
 								fill: j.value.style.chart.layout.labels.dataLabels.color,
-								x: Y(t, r).x + (j.value.style.chart.layout.labels.dataLabels.markers.position === "left" ? -j.value.style.chart.layout.labels.dataLabels.offsetX - 6 - j.value.style.chart.layout.labels.dataLabels.markers.radius : j.value.style.chart.layout.labels.dataLabels.offsetX + 6 + j.value.style.chart.layout.labels.dataLabels.markers.radius),
-								y: Y(t, r).y + j.value.style.chart.layout.labels.dataLabels.fontSize / 3,
+								x: Y(n, r).x + (j.value.style.chart.layout.labels.dataLabels.markers.position === "left" ? -j.value.style.chart.layout.labels.dataLabels.offsetX - 6 - j.value.style.chart.layout.labels.dataLabels.markers.radius : j.value.style.chart.layout.labels.dataLabels.offsetX + 6 + j.value.style.chart.layout.labels.dataLabels.markers.radius),
+								y: Y(n, r).y + j.value.style.chart.layout.labels.dataLabels.fontSize / 3,
 								translateY: !0
 							})
 						}, null, 42, mt)
@@ -1087,7 +1087,7 @@ var Ze = /* @__PURE__ */ e({ default: () => bt }), Qe = ["id"], $e = ["id"], et
 				legendSet: U.value,
 				config: xn.value,
 				isCursorPointer: M.value,
-				onClickMarker: t[0] ||= ({ legend: e }) => V(e.uid)
+				onClickMarker: n[0] ||= ({ legend: e }) => V(e.uid)
 			}, Le({
 				item: x(({ legend: e, index: t }) => [b(N) ? l("", !0) : (_(), u("div", {
 					key: 0,
@@ -1230,7 +1230,7 @@ var Ze = /* @__PURE__ */ e({ default: () => bt }), Qe = ["id"], $e = ["id"], et
 				fn: x(() => [d("button", {
 					tabindex: "0",
 					class: "vue-ui-user-options-button",
-					onClick: t[1] ||= (e) => kn(j.value.userOptions.callbacks.csv),
+					onClick: n[1] ||= (e) => kn(j.value.userOptions.callbacks.csv),
 					style: g({ cursor: M.value ? "pointer" : "default" })
 				}, [ze(b(xt), {
 					name: "fileCsv",