vue-data-ui 3.25.13 → 3.26.0

package/dist/{vue-ui-quick-chart-D-VuAoll.js → vue-ui-quick-chart-hNOMlqTI.js}

@@ -1,24 +1,24 @@
 import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
-import { $ as t, $t as n, Et as r, Ft as i, Gt as a, J as o, P as s, Rt as c, S as ee, Vt as l, X as te, _ as ne, at as u, b as d, et as re, f, ft as ie, h as ae, i as p, p as oe, t as se, tn as ce, w as le } from "./lib-DOpaUOQx.js";
+import { $ as t, $t as n, Et as r, Ft as i, Gt as a, J as o, P as s, Rt as c, S as ee, Vt as l, X as te, _ as ne, at as u, b as d, et as re, f, ft as ie, h as ae, i as p, p as oe, t as se, tn as ce, w as le } from "./lib-CklJ7rIN.js";
 import { n as ue, t as de } from "./useHints-Dq_w2E8B.js";
 import { t as fe } from "./useTimeLabels-d2f-W1L4.js";
-import { t as pe } from "./useConfig-C2uy4ltq.js";
-import { t as me } from "./usePrinter-BBBooAGP.js";
+import { t as pe } from "./useConfig-DObkR9Aa.js";
+import { t as me } from "./usePrinter-Dp3X1vqr.js";
 import { n as he, t as ge } from "./BaseScanner-Dzc8VT3j.js";
-import { t as _e } from "./useNestedProp-Bux0f4iY.js";
+import { t as _e } from "./useNestedProp-Tc9i6ZcN.js";
 import { t as ve } from "./useThemeCheck-C43Tcqmk.js";
 import { t as ye } from "./useChartExport-iwOqiIWX.js";
 import { t as be } from "./useTransitions-g_zBREk2.js";
 import { t as xe } from "./useStableElementSize-C7KADDKj.js";
 import { t as Se } from "./useTimeLabelCollider-AEcY4Ioe.js";
-import { t as Ce } from "./img-W50sC9SC.js";
+import { t as Ce } from "./img-CaIaBHA0.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 "./SlicerPreview-BJ4usfYd.js";
-import { t as Oe } from "./BaseLegendToggle-DGG65LAR.js";
+import { t as De } from "./SlicerPreview-BgyIezm0.js";
+import { t as Oe } from "./BaseLegendToggle-DtS_Oj3B.js";
 import { t as ke } from "./A11yDataTable-DdRsVULz.js";
 import { t as Ae } from "./useChartAccessibility-DYqac8yF.js";
-import { t as je } from "./vue_ui_quick_chart-mZBdml3Z.js";
+import { t as je } from "./vue_ui_quick_chart-DByCqSYE.js";
 import { Fragment as m, Teleport as Me, computed as h, createBlock as Ne, createCommentVNode as g, createElementBlock as _, createElementVNode as v, createSlots as Pe, createVNode as Fe, defineAsyncComponent as Ie, guardReactiveProps as y, mergeProps as Le, nextTick as Re, normalizeClass as b, normalizeProps as x, normalizeStyle as S, onBeforeUnmount as ze, onMounted as Be, openBlock as C, ref as w, renderList as T, renderSlot as E, shallowRef as Ve, toDisplayString as D, toRefs as He, unref as O, watch as Ue, watchEffect as We, withCtx as k } from "vue";
 //#region src/chartDetector.js
 var A = {
@@ -100,7 +100,7 @@ function M(e) {
 }
 //#endregion
 //#region src/components/vue-ui-quick-chart.vue
-var N = /* @__PURE__ */ e({ default: () => On }), nt = ["id"], rt = ["id"], it = ["id"], at = { style: { position: "relative" } }, ot = [
+var N = /* @__PURE__ */ e({ default: () => kn }), nt = ["id"], rt = ["id"], it = ["id"], at = { style: { position: "relative" } }, ot = [
 	"xmlns",
 	"aria-describedby",
 	"viewBox"
@@ -389,7 +389,18 @@ var N = /* @__PURE__ */ e({ default: () => On }), nt = ["id"], rt = ["id"], it =
 	"font-size",
 	"fill",
 	"transform"
-], xn = {
+], xn = [
+	"x",
+	"y",
+	"width",
+	"height",
+	"fill",
+	"fill-opacity",
+	"stroke",
+	"stroke-opacity",
+	"stroke-width",
+	"stroke-dasharray"
+], Sn = {
 	key: 1,
 	style: {
 		position: "absolute",
@@ -399,13 +410,13 @@ var N = /* @__PURE__ */ e({ default: () => On }), nt = ["id"], rt = ["id"], it =
 	},
 	"data-dom-to-png-ignore": "",
 	"aria-hidden": "true"
-}, Sn = {
+}, Cn = {
 	key: 5,
 	class: "vue-data-ui-watermark"
-}, Cn = ["id"], wn = ["onClick", "onKeydown"], Tn = ["onClick", "onKeydown"], En = ["onClick", "onKeydown"], Dn = {
+}, wn = ["id"], Tn = ["onClick", "onKeydown"], En = ["onClick", "onKeydown"], Dn = ["onClick", "onKeydown"], On = {
 	key: 1,
 	class: "vue-ui-quick-chart-not-processable"
-}, On = /*#__PURE__*/ we({
+}, kn = /*#__PURE__*/ we({
 	__name: "vue-ui-quick-chart",
 	props: {
 		config: {
@@ -424,48 +435,56 @@ var N = /* @__PURE__ */ e({ default: () => On }), nt = ["id"], rt = ["id"], it =
 			default() {
 				return null;
 			}
+		},
+		zoomState: {
+			type: Object,
+			default: null
 		}
 	},
 	emits: [
 		"selectDatapoint",
 		"selectLegend",
+		"zoomStart",
+		"zoomEnd",
+		"zoomReset",
+		"update:zoomState",
 		"copyAlt"
 	],
 	setup(e, { expose: we, emit: Ge }) {
-		let qe = Ie(() => import("./BaseIcon-Dlz7gfx0.js").then((e) => e.n)), Je = Ie(() => import("./PackageVersion-D5QkTJQU.js").then((e) => e.t)), Xe = Ie(() => import("./PenAndPaper-XdUD8uB3.js").then((e) => e.t)), Ze = Ie(() => import("./Tooltip-DZ4a3XJQ.js")), Qe = Ie(() => import("./UserOptions-wFD9vo9g.js").then((e) => e.n)), { vue_ui_quick_chart: $e } = pe(), { isThemeValid: et, warnInvalidTheme: tt } = ve(), M = e, N = w(null), On = w(null), kn = w(null), An = w(null), P = w(te()), F = w(!1), jn = w(null), Mn = w(""), I = w(null), Nn = w(null), Pn = w(null), L = w([]), Fn = w(0), In = w(0), Ln = w(!1), Rn = w(null), zn = w(null), R = w(null), Bn = w(null), Vn = w(null), Hn = w(null), Un = Ve(null), Wn = w(!1), Gn = w(0), Kn = w(0), qn = w(!1);
-		function Jn() {
-			Un.value = N.value?.parentNode ?? null;
+		let qe = Ie(() => import("./BaseIcon-BV75ei8X.js").then((e) => e.n)), Je = Ie(() => import("./PackageVersion-DhXk363L.js").then((e) => e.t)), Xe = Ie(() => import("./PenAndPaper-DkQ4sEhs.js").then((e) => e.t)), Ze = Ie(() => import("./Tooltip-2NAb_Rrx.js")), Qe = Ie(() => import("./UserOptions-Dgn3StKw.js").then((e) => e.n)), { vue_ui_quick_chart: $e } = pe(), { isThemeValid: et, warnInvalidTheme: tt } = ve(), M = e, N = w(null), kn = w(null), An = w(null), jn = w(null), P = w(te()), F = w(!1), Mn = w(null), Nn = w(""), I = w(null), Pn = w(null), Fn = w(null), L = w([]), In = w(0), Ln = w(0), Rn = w(!1), zn = w(null), Bn = w(null), Vn = w(null), Hn = w(null), Un = w(null), Wn = w(null), Gn = Ve(null), Kn = w(!1), qn = w(0), Jn = w(0), Yn = w(!1);
+		function Xn() {
+			Gn.value = N.value?.parentNode ?? null;
 		}
-		function Yn() {
+		function Zn() {
 			return new Promise((e) => {
 				requestAnimationFrame(() => {
 					requestAnimationFrame(e);
 				});
 			});
 		}
-		async function Xn() {
-			let e = ++Kn.value;
-			Wn.value = !1, await Re(), await Yn(), await Yn(), e === Kn.value && (Gn.value += 1, Wn.value = !0);
+		async function Qn() {
+			let e = ++Jn.value;
+			Kn.value = !1, await Re(), await Zn(), await Zn(), e === Jn.value && (qn.value += 1, Kn.value = !0);
 		}
-		function Zn() {
-			qn.value || (qn.value = !0, Re(() => {
-				qn.value = !1, Jn(), Xn();
+		function $n() {
+			Yn.value || (Yn.value = !0, Re(() => {
+				Yn.value = !1, Xn(), Qn();
 			}));
 		}
-		let Qn = xe({
-			elementRef: Un,
+		let er = xe({
+			elementRef: Gn,
 			minimumWidth: 2,
 			minimumHeight: 2,
 			stableFramesRequired: 2,
 			once: !1,
 			onSizeAccepted: () => {
-				Xn();
+				Qn();
 			}
 		});
 		w("#FFFFFF");
-		let z = w(pr());
+		let R = w(mr());
 		ue({
-			config: () => z.value,
+			config: () => R.value,
 			dataset: () => M.dataset,
 			component: "VueUiQuickChart",
 			rules: [de.emptyArray, {
@@ -479,13 +498,13 @@ var N = /* @__PURE__ */ e({ default: () => On }), nt = ["id"], rt = ["id"], it =
 				]
 			}]
 		});
-		let { transitionEnabled: B } = be({
-			config: () => z.value.transitions,
+		let { transitionEnabled: z } = be({
+			config: () => R.value.transitions,
 			dataset: () => M.dataset
-		}), $n = h(() => z.value.debug), er = h(() => z.value.useCursorPointer), V = w(null), tr = w({
+		}), tr = h(() => R.value.debug), nr = h(() => R.value.useCursorPointer), B = w(null), rr = w({
 			x: 0,
 			y: 0
-		}), H = w("pointer"), nr = w(!1), rr = h(() => ce({
+		}), V = w("pointer"), ir = w(!1), ar = h(() => ce({
 			dafaultConfig: {
 				backgroundColor: "#99999930",
 				customPalette: ["#BABABA"],
@@ -505,11 +524,11 @@ var N = /* @__PURE__ */ e({ default: () => On }), nt = ["id"], rt = ["id"], it =
 				zoomStartIndex: null,
 				zoomEndIndex: null
 			},
-			userConfig: z.value.skeletonConfig ?? {}
-		})), { loading: ir, FINAL_DATASET: ar, manualLoading: or } = he({
+			userConfig: R.value.skeletonConfig ?? {}
+		})), { loading: or, FINAL_DATASET: sr, manualLoading: cr } = he({
 			...He(M),
-			FINAL_CONFIG: z,
-			prepareConfig: pr,
+			FINAL_CONFIG: R,
+			prepareConfig: mr,
 			skeletonDataset: M.config?.skeletonDataset ?? [
 				1,
 				2,
@@ -523,14 +542,14 @@ var N = /* @__PURE__ */ e({ default: () => On }), nt = ["id"], rt = ["id"], it =
 				89
 			],
 			skeletonConfig: ce({
-				defaultConfig: z.value,
-				userConfig: rr.value
+				defaultConfig: R.value,
+				userConfig: ar.value
 			})
-		}), { svgRef: sr } = Ae({ config: { text: z.value.title } }), cr = h(() => z.value.showUserOptionsOnChartHover), lr = h(() => z.value.keepUserOptionsStateOnChartLeave), ur = w(!z.value.showUserOptionsOnChartHover), dr = w(!1);
-		function fr(e = !1) {
-			dr.value = e, cr.value && (ur.value = e);
+		}), { svgRef: H } = Ae({ config: { text: R.value.title } }), lr = h(() => R.value.showUserOptionsOnChartHover), ur = h(() => R.value.keepUserOptionsStateOnChartLeave), dr = w(!R.value.showUserOptionsOnChartHover), fr = w(!1);
+		function pr(e = !1) {
+			fr.value = e, lr.value && (dr.value = e);
 		}
-		function pr() {
+		function mr() {
 			let e = _e({
 				userConfig: M.config,
 				defaultConfig: $e
@@ -553,29 +572,27 @@ var N = /* @__PURE__ */ e({ default: () => On }), nt = ["id"], rt = ["id"], it =
 			} else t = e;
 			return t;
 		}
-		function mr(e) {
+		function hr(e) {
 			let t = re(e);
 			return t?.tooltipPosition && delete t.tooltipPosition, JSON.stringify(t);
 		}
-		let hr = mr(M.config);
+		let gr = hr(M.config);
 		Ue(() => M.config, (e, t) => {
-			let n = mr(e), r = n !== hr;
-			hr = n;
-			let i = pr();
+			let n = hr(e), r = n !== gr;
+			gr = n;
+			let i = mr();
 			if (!r) {
-				z.value.tooltipPosition = i.tooltipPosition, wr.value.showTooltip = z.value.showTooltip;
+				R.value.tooltipPosition = i.tooltipPosition, Dr.value.showTooltip = R.value.showTooltip;
 				return;
 			}
-			ir.value || (z.value = i), K.value.width = z.value.width, K.value.height = z.value.height, ur.value = !z.value.showUserOptionsOnChartHover, Er(), wr.value.showTooltip = z.value.showTooltip;
-		}, { deep: !0 }), Ue(() => M.dataset, (e) => {
-			W.value = _r.value, X.value.start = 0, X.value.end = W.value.maxSeriesLength, In.value += 1, Zn();
+			or.value || (R.value = i), K.value.width = R.value.width, K.value.height = R.value.height, dr.value = !R.value.showUserOptionsOnChartHover, kr(), Dr.value.showTooltip = R.value.showTooltip;
 		}, { deep: !0 }), Ue(() => M.dataset, (e) => {
-			Array.isArray(e) && e.length > 0 && (or.value = !1);
+			Array.isArray(e) && e.length > 0 && (cr.value = !1);
 		}, { immediate: !0 });
-		let gr = h(() => le(z.value.customPalette)), U = Ge, _r = h(() => {
+		let _r = h(() => le(R.value.customPalette)), U = Ge, vr = h(() => {
 			let e = Ke({
-				debug: $n.value,
-				dataset: a(ar.value, [
+				debug: tr.value,
+				dataset: a(sr.value, [
 					"serie",
 					"series",
 					"data",
@@ -583,55 +600,55 @@ var N = /* @__PURE__ */ e({ default: () => On }), nt = ["id"], rt = ["id"], it =
 					"values",
 					"num"
 				]),
-				barLineSwitch: z.value.chartIsBarUnderDatasetLength
+				barLineSwitch: R.value.chartIsBarUnderDatasetLength
 			});
-			return !e && $n.value && console.error("VueUiQuickChart : Dataset is not processable"), e;
-		}), W = w(_r.value), vr = h(() => !!W.value), G = h(() => W.value ? W.value.type : null);
+			return !e && tr.value && console.error("VueUiQuickChart : Dataset is not processable"), e;
+		}), W = w(vr.value), yr = h(() => !!W.value), G = h(() => W.value ? W.value.type : null), br = h(() => [A.BAR, A.LINE].includes(G.value)), xr = h(() => br.value && R.value.zoomXy && Number(W.value?.maxSeriesLength ?? 0) > 1);
 		Ue(() => G.value, (e) => {
 			e || u({
 				componentName: "VueUiQuickChart",
 				type: "dataset",
-				debug: $n.value
+				debug: tr.value
 			});
 		}, { immediate: !0 });
-		let { isPrinting: yr, isImaging: br, generatePdf: xr, generateImage: Sr } = me({
+		let { isPrinting: Sr, isImaging: Cr, generatePdf: wr, generateImage: Tr } = me({
 			elementId: `${G.value}_${P.value}`,
-			fileName: z.value.title || G.value,
-			options: z.value.userOptionsPrint
-		}), Cr = h(() => z.value.showUserOptions && !z.value.title), K = w({
-			width: z.value.width,
-			height: z.value.height
-		}), wr = w({ showTooltip: z.value.showTooltip });
-		Ue(z, () => {
-			wr.value = { showTooltip: z.value.showTooltip };
+			fileName: R.value.title || G.value,
+			options: R.value.userOptionsPrint
+		}), Er = h(() => R.value.showUserOptions && !R.value.title), K = w({
+			width: R.value.width,
+			height: R.value.height
+		}), Dr = w({ showTooltip: R.value.showTooltip });
+		Ue(R, () => {
+			Dr.value = { showTooltip: R.value.showTooltip };
 		}, { immediate: !0 });
-		let q = Ve(null), Tr = Ve(null);
+		let q = Ve(null), Or = Ve(null);
 		Be(() => {
-			Ln.value = !0, Jn(), Qn.start(), Er(), Xn();
+			Rn.value = !0, Xn(), er.start(), kr(), Qn();
 		});
-		function Er() {
-			if (c(M.dataset) || (or.value = z.value.loading), z.value.responsive) {
+		function kr() {
+			if (c(M.dataset) || (cr.value = R.value.loading), R.value.responsive) {
 				let e = Te(() => {
 					let { width: e, height: t } = Ee({
 						chart: N.value,
-						title: z.value.title ? On.value : null,
-						legend: z.value.showLegend ? kn.value : null,
-						slicer: [A.BAR, A.LINE].includes(G.value) && z.value.zoomXy && W.value.maxSeriesLength > 1 ? An.value : null,
-						source: Nn.value,
-						noTitle: Pn.value
+						title: R.value.title ? kn.value : null,
+						legend: R.value.showLegend ? An.value : null,
+						slicer: xr.value ? jn.value : null,
+						source: Pn.value,
+						noTitle: Fn.value
 					});
 					requestAnimationFrame(() => {
-						K.value.width = e, K.value.height = t, Zn();
+						K.value.width = e, K.value.height = t, $n();
 					});
 				});
-				q.value && (Tr.value && q.value.unobserve(Tr.value), q.value.disconnect()), q.value = new ResizeObserver(e), Tr.value = N.value.parentNode, q.value.observe(Tr.value);
+				q.value && (Or.value && q.value.unobserve(Or.value), q.value.disconnect()), q.value = new ResizeObserver(e), Or.value = N.value.parentNode, q.value.observe(Or.value);
 			}
-			Br(), Zn();
+			fi(), $n();
 		}
 		ze(() => {
-			Qn.stop(), q.value && (Tr.value && q.value.unobserve(Tr.value), q.value.disconnect(), q.value = null, Tr.value = null);
+			er.stop(), oi(), Ai(), q.value && (Or.value && q.value.unobserve(Or.value), q.value.disconnect(), q.value = null, Or.value = null);
 		});
-		let Dr = h(() => {
+		let Ar = h(() => {
 			switch (G.value) {
 				case A.LINE: return `0 0 ${K.value.width <= 0 ? 10 : K.value.width} ${K.value.height <= 0 ? 10 : K.value.height}`;
 				case A.BAR: return `0 0 ${K.value.width <= 0 ? 10 : K.value.width} ${K.value.height <= 0 ? 10 : K.value.height}`;
@@ -639,13 +656,13 @@ var N = /* @__PURE__ */ e({ default: () => On }), nt = ["id"], rt = ["id"], it =
 				default: return `0 0 ${K.value.width <= 0 ? 10 : K.value.width} ${K.value.height <= 0 ? 10 : K.value.height}`;
 			}
 		});
-		function Or(e) {
+		function jr(e) {
 			return [...e].map((e) => e.value).reduce((e, t) => e + t, 0);
 		}
-		function kr(e) {
-			return z.value.blurOnHover && ![null, void 0].includes(I.value) && I.value !== e ? `url(#blur_${P.value})` : "";
+		function Mr(e) {
+			return R.value.blurOnHover && ![null, void 0].includes(I.value) && I.value !== e ? `url(#blur_${P.value})` : "";
 		}
-		function Ar() {
+		function Nr() {
 			L.value.length ? L.value = [] : G.value === A.DONUT ? Y.value.legend.forEach((e) => {
 				L.value.push(e.id);
 			}) : G.value === A.LINE ? Z.value.legend.forEach((e) => {
@@ -654,17 +671,17 @@ var N = /* @__PURE__ */ e({ default: () => On }), nt = ["id"], rt = ["id"], it =
 				L.value.push(e.id);
 			}), G.value === A.DONUT ? U("selectLegend", Y.value.dataset) : G.value === A.LINE ? U("selectLegend", Z.value.dataset) : G.value === A.BAR && U("selectLegend", Q.value.dataset);
 		}
-		function jr(e, t) {
+		function Pr(e, t) {
 			L.value.includes(e) ? L.value = L.value.filter((t) => t !== e) : L.value.length < t && L.value.push(e);
 		}
-		let Mr = w(null), Nr = w(null), Pr = w(!1);
-		function Fr(e, t) {
-			Pr.value = !0;
-			let n = e.value, r = _r.value.dataset.find((t, n) => e.id === `donut_${n}`).VALUE;
+		let Fr = w(null), Ir = w(null), Lr = w(!1);
+		function Rr(e, t) {
+			Lr.value = !0;
+			let n = e.value, r = vr.value.dataset.find((t, n) => e.id === `donut_${n}`).VALUE;
 			if (L.value.includes(e.id)) {
 				L.value = L.value.filter((t) => t !== e.id);
 				function t() {
-					n > r ? (Pr.value = !1, cancelAnimationFrame(Nr.value), W.value = {
+					n > r ? (Lr.value = !1, cancelAnimationFrame(Ir.value), W.value = {
 						...W.value,
 						dataset: W.value.dataset.map((t, n) => e.id === `donut_${n}` ? {
 							...t,
@@ -678,12 +695,12 @@ var N = /* @__PURE__ */ e({ default: () => On }), nt = ["id"], rt = ["id"], it =
 							value: n,
 							VALUE: n
 						} : t)
-					}, Nr.value = requestAnimationFrame(t));
+					}, Ir.value = requestAnimationFrame(t));
 				}
 				t();
 			} else if (t.length > 1) {
 				function t() {
-					n < r / 100 ? (Pr.value = !1, cancelAnimationFrame(Mr.value), L.value.push(e.id), W.value = {
+					n < r / 100 ? (Lr.value = !1, cancelAnimationFrame(Fr.value), L.value.push(e.id), W.value = {
 						...W.value,
 						dataset: W.value.dataset.map((t, n) => e.id === `donut_${n}` ? {
 							...t,
@@ -697,16 +714,16 @@ var N = /* @__PURE__ */ e({ default: () => On }), nt = ["id"], rt = ["id"], it =
 							value: n,
 							VALUE: n
 						} : t)
-					}, Mr.value = requestAnimationFrame(t));
+					}, Fr.value = requestAnimationFrame(t));
 				}
 				t();
 			} else U("selectLegend", Y.value.dataset);
 		}
 		let J = w(null);
-		function Ir(e) {
+		function zr(e) {
 			J.value = e;
 		}
-		let Lr = h(() => z.value.donutThicknessRatio < .01 ? .01 : z.value.donutThicknessRatio > .4 ? .4 : z.value.donutThicknessRatio), Y = h(() => {
+		let Br = h(() => R.value.donutThicknessRatio < .01 ? .01 : R.value.donutThicknessRatio > .4 ? .4 : R.value.donutThicknessRatio), Y = h(() => {
 			if (G.value !== A.DONUT) return null;
 			let e = W.value.dataset.map((e, t) => ({
 				...e,
@@ -715,71 +732,71 @@ var N = /* @__PURE__ */ e({ default: () => On }), nt = ["id"], rt = ["id"], it =
 				id: `donut_${t}`
 			})).map((e, t) => ({
 				...e,
-				color: e.COLOR ? ee(e.COLOR) : gr.value[t + z.value.paletteStartIndex] || l[t + z.value.paletteStartIndex] || l[(t + z.value.paletteStartIndex) % l.length],
+				color: e.COLOR ? ee(e.COLOR) : _r.value[t + R.value.paletteStartIndex] || l[t + R.value.paletteStartIndex] || l[(t + R.value.paletteStartIndex) % l.length],
 				immutableValue: e.value
 			}));
 			function n(e, n) {
 				return t({
-					v: isNaN(e.value / Or(n)) ? 0 : e.value / Or(n) * 100,
+					v: isNaN(e.value / jr(n)) ? 0 : e.value / jr(n) * 100,
 					s: "%",
-					r: z.value.dataLabelRoundingPercentage
+					r: R.value.dataLabelRoundingPercentage
 				});
 			}
 			function a(e) {
-				return e.proportion * 100 > z.value.donutHideLabelUnderPercentage;
+				return e.proportion * 100 > R.value.donutHideLabelUnderPercentage;
 			}
 			function o(e, t) {
-				let n = _r.value.dataset.find((t, n) => `donut_${n}` === e).VALUE;
+				let n = vr.value.dataset.find((t, n) => `donut_${n}` === e).VALUE;
 				return Math.abs(String(Number(n.toFixed(0))).length - String(Number(t.toFixed(0))).length);
 			}
 			function s({ datapoint: n, seriesIndex: i, triggerMode: a = "pointer" }) {
-				jn.value = {
+				Mn.value = {
 					datapoint: n,
 					seriesIndex: i,
-					config: z.value,
+					config: R.value,
 					dataset: e
-				}, I.value = n.id, V.value = i, H.value = a;
-				let o = z.value.tooltipCustomFormat;
-				if (z.value.events.datapointEnter && z.value.events.datapointEnter({
+				}, I.value = n.id, B.value = i, V.value = a;
+				let o = R.value.tooltipCustomFormat;
+				if (R.value.events.datapointEnter && R.value.events.datapointEnter({
 					datapoint: n,
 					seriesIndex: i
 				}), r(o) && ie(() => o({
 					datapoint: n,
 					seriesIndex: i,
 					series: e,
-					config: z.value
-				}))) Mn.value = o({
+					config: R.value
+				}))) Nn.value = o({
 					datapoint: n,
 					seriesIndex: i,
 					series: e,
-					config: z.value
+					config: R.value
 				});
 				else {
 					let e = "";
-					e += `<div style="width:100%;text-align:center;border-bottom:1px solid ${z.value.tooltipBorderColor};padding-bottom:6px;margin-bottom:3px;">${n.name}</div>`, e += `<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="${n.color}"/></svg>`, e += `<b>${p(z.value.formatter, n.value, t({
-						p: z.value.valuePrefix,
+					e += `<div style="width:100%;text-align:center;border-bottom:1px solid ${R.value.tooltipBorderColor};padding-bottom:6px;margin-bottom:3px;">${n.name}</div>`, e += `<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="${n.color}"/></svg>`, e += `<b>${p(R.value.formatter, n.value, t({
+						p: R.value.valuePrefix,
 						v: n.value,
-						s: z.value.valueSuffix,
-						r: z.value.dataLabelRoundingValue
+						s: R.value.valueSuffix,
+						r: R.value.dataLabelRoundingValue
 					}), {
 						datapoint: n,
 						seriesIndex: i
 					})}</b>`, e += `<span>(${t({
 						v: n.proportion * 100,
 						s: "%",
-						r: z.value.dataLabelRoundingPercentage
-					})})</span></div>`, Mn.value = `<div>${e}</div>`;
+						r: R.value.dataLabelRoundingPercentage
+					})})</span></div>`, Nn.value = `<div>${e}</div>`;
 				}
 				F.value = !0;
 			}
 			function c({ datapoint: e, seriesIndex: t }) {
-				z.value.events.datapointLeave && z.value.events.datapointLeave({
+				R.value.events.datapointLeave && R.value.events.datapointLeave({
 					datapoint: e,
 					seriesIndex: t
-				}), F.value = !1, I.value = null, J.value = null, V.value = null, H.value = "pointer";
+				}), F.value = !1, I.value = null, J.value = null, B.value = null, V.value = "pointer";
 			}
 			function te({ datapoint: e, seriesIndex: t }) {
-				z.value.events.datapointClick && z.value.events.datapointClick({
+				R.value.events.datapointClick && R.value.events.datapointClick({
 					datapoint: e,
 					seriesIndex: t
 				}), U("selectDatapoint", e);
@@ -791,9 +808,9 @@ var N = /* @__PURE__ */ e({ default: () => On }), nt = ["id"], rt = ["id"], it =
 				...e,
 				proportion: (e.value || 0) / u,
 				value: e.value || 0,
-				absoluteValue: _r.value.dataset.find((t, n) => `donut_${n}` === e.id).VALUE,
+				absoluteValue: vr.value.dataset.find((t, n) => `donut_${n}` === e.id).VALUE,
 				shape: "circle"
-			})), re = K.value.width / 2, f = K.value.height / 2, ae = K.value.height * z.value.donutRadiusRatio;
+			})), re = K.value.width / 2, f = K.value.height / 2, ae = K.value.height * R.value.donutRadiusRatio;
 			return {
 				dataset: d.filter((e) => !L.value.includes(e.id)),
 				legend: d,
@@ -808,30 +825,204 @@ var N = /* @__PURE__ */ e({ default: () => On }), nt = ["id"], rt = ["id"], it =
 				cx: re,
 				cy: f,
 				radius: ae,
-				chart: i({ series: e.filter((e) => !L.value.includes(e.id)) }, re, f, ae, ae, 1.99999, 2, 1, 360, 105.25, K.value.height * Lr.value)
+				chart: i({ series: e.filter((e) => !L.value.includes(e.id)) }, re, f, ae, ae, 1.99999, 2, 1, 360, 105.25, K.value.height * Br.value)
 			};
 		}), X = w({
 			start: 0,
 			end: W.value.maxSeriesLength
-		});
-		function Rr() {
-			Br();
+		}), Vr = w({ ...X.value }), Hr = w(null), Ur = w(!1), Wr = w(!1), Gr = w(!1), Kr = w(!1), qr = w(!1), Jr = w(null), Yr = w(null), Xr = w(null), Zr = w(!1), Qr = w({
+			time: 0,
+			x: 0,
+			y: 0,
+			pointerType: null
+		}), $r = {
+			show: !1,
+			selection: {
+				fill: "#2D353C",
+				stroke: "transparent",
+				fillOpacity: .1,
+				strokeOpacity: .5,
+				strokeWidth: 1,
+				strokeDasharray: 0
+			}
+		}, ei = h(() => {
+			let e = R.value.dragToZoom ?? {};
+			return {
+				...$r,
+				...e,
+				selection: {
+					...$r.selection,
+					...e.selection ?? {}
+				}
+			};
+		}), ti = h(() => br.value && ei.value.show && Ur.value && si() > 1 && !or.value), ni = null, ri = {};
+		function ii(e, t = X.value) {
+			if (!e || typeof e != "object") return null;
+			let n = e.start !== void 0 && e.start !== null, r = e.end !== void 0 && e.end !== null;
+			if (!n && !r) return null;
+			let i = Number(n ? e.start : t.start), a = Number(r ? e.end : t.end);
+			return !Number.isFinite(i) || !Number.isFinite(a) ? null : {
+				start: i,
+				end: a
+			};
 		}
-		let zr = w(null);
-		async function Br() {
-			await Re(), await Re();
-			let { zoomStartIndex: e, zoomEndIndex: t } = z.value, n = zr.value;
-			(e != null || t != null) && n ? (e != null && n.setStartValue(e), t != null && n.setEndValue(Vr(t + 1))) : (X.value = {
-				start: 0,
-				end: W.value.maxSeriesLength
-			}, In.value += 1), Zn();
+		function ai(e) {
+			let t = ii(e);
+			t && U("update:zoomState", t);
+		}
+		function oi() {
+			ni &&= (cancelAnimationFrame(ni), null), ri = {};
+		}
+		function si() {
+			let e = Number(W.value?.maxSeriesLength);
+			return Number.isFinite(e) ? Math.max(0, e) : 0;
+		}
+		function ci(e, t = X.value.start) {
+			let n = si();
+			if (n <= 0) return 0;
+			let r = Math.max(0, Math.min(Number(t) || 0, n - 1)), i = Number(e);
+			return Number.isFinite(i) ? i > n ? n : i <= r ? Math.min(r + 1, n) : Math.max(0, i) : Math.min(r + 1, n);
 		}
-		function Vr(e) {
-			let t = W.value.maxSeriesLength;
-			return e > t ? t : e < 0 || z.value.zoomStartIndex !== null && e < z.value.zoomStartIndex ? z.value.zoomStartIndex === null ? 1 : z.value.zoomStartIndex + 1 : e;
+		function li() {
+			let e = si();
+			if (e <= 0) {
+				X.value = {
+					start: 0,
+					end: 0
+				}, Vr.value = { ...X.value }, Hr.value && Hr.value.setRangeValues(0, 0);
+				return;
+			}
+			let t = Number(X.value.start), n = Number(X.value.end);
+			Number.isFinite(t) || (t = 0), Number.isFinite(n) || (n = e), t = Math.max(0, Math.min(t, e - 1)), n = Math.max(t + 1, Math.min(n, e)), X.value = {
+				start: t,
+				end: n
+			}, Vr.value = {
+				start: t,
+				end: n
+			}, Hr.value && Hr.value.setRangeValues(t, n);
+		}
+		function ui(e) {
+			if (!br.value) return null;
+			let t = ii(e);
+			return t ? ((t.start !== Number(X.value.start) || t.end !== Number(X.value.end)) && (oi(), X.value = {
+				start: t.start,
+				end: t.end
+			}, Vr.value = { ...X.value }, li(), $n()), {
+				start: Number(X.value.start),
+				end: Number(X.value.end)
+			}) : null;
+		}
+		function di(e) {
+			let t = ui(e);
+			return t ? (ai(t), t) : null;
+		}
+		async function fi({ applyControlledZoom: e = !0 } = {}) {
+			if (!Wr.value) {
+				if (!br.value) {
+					Ur.value = !1;
+					return;
+				}
+				Wr.value = !0;
+				try {
+					await Re(), await Re();
+					let { zoomStartIndex: t, zoomEndIndex: n } = R.value, r = si();
+					if (r <= 0) {
+						X.value = {
+							start: 0,
+							end: 0
+						}, Vr.value = { ...X.value }, Ur.value = !1;
+						return;
+					}
+					let i = t == null ? 0 : Number(t), a = n == null ? r : ci(Number(n) + 1, i);
+					if (e && ii(M.zoomState)) {
+						let e = ii(M.zoomState);
+						i = e.start, a = e.end;
+					}
+					Gr.value = !0, X.value = {
+						start: i,
+						end: a
+					}, Vr.value = {
+						start: i,
+						end: a
+					}, li(), Ur.value = !0, await Re(), Hr.value && Hr.value.setRangeValues(X.value.start, X.value.end);
+				} finally {
+					queueMicrotask(() => {
+						Gr.value = !1;
+					}), Wr.value = !1, $n();
+				}
+			}
+		}
+		async function pi({ applyControlledZoom: e = !1, publish: t = !1 } = {}) {
+			oi(), await fi({ applyControlledZoom: e }), t && (ai({
+				start: Number(X.value.start),
+				end: Number(X.value.end)
+			}), U("zoomReset"));
 		}
-		let Hr = h(() => {
-			if (!z.value.zoomMinimap.show || G.value === A.DONUT) return [];
+		function mi(e) {
+			ri = {
+				...ri,
+				...e
+			}, ni && cancelAnimationFrame(ni), ni = requestAnimationFrame(() => {
+				let e = {
+					...X.value,
+					...ri
+				};
+				ri = {}, ni = null, X.value = e, Vr.value = { ...e }, li(), ai({
+					start: Number(X.value.start),
+					end: Number(X.value.end)
+				}), $n();
+			});
+		}
+		function hi(e) {
+			if (Wr.value || Gr.value) return;
+			let t = Number(e);
+			Number.isFinite(t) && (U("zoomStart", {
+				index: t,
+				isZoom: t !== 0
+			}), (t !== X.value.start || ri.end !== void 0) && mi({ start: t }));
+		}
+		function gi(e) {
+			if (Wr.value || Gr.value) return;
+			let t = ri.start === void 0 ? X.value.start : ri.start, n = ci(Number(e), t);
+			U("zoomEnd", {
+				index: n,
+				isZoom: n !== si()
+			}), (n !== X.value.end || ri.start !== void 0) && mi({ end: n });
+		}
+		Ue([
+			() => M.zoomState,
+			br,
+			() => Number(W.value?.maxSeriesLength ?? 0)
+		], async ([e, t, n]) => {
+			if (!(!t || n <= 0 || !e)) {
+				if (!Ur.value) {
+					await fi({ applyControlledZoom: !0 });
+					return;
+				}
+				ui(e);
+			}
+		}, {
+			deep: !0,
+			immediate: !0
+		}), Ue(vr, async (e) => {
+			if (!e) {
+				Ur.value = !1;
+				return;
+			}
+			let t = W.value?.type, n = Number(W.value?.maxSeriesLength ?? 0);
+			W.value = e;
+			let r = e.type, i = Number(e.maxSeriesLength ?? 0);
+			if (![A.BAR, A.LINE].includes(r)) {
+				oi(), Ur.value = !1, $n();
+				return;
+			}
+			t !== r || n !== i ? (oi(), Ur.value = !1, X.value = {
+				start: 0,
+				end: i
+			}, Vr.value = { ...X.value }, Ln.value += 1, await Re(), await fi({ applyControlledZoom: !0 })) : M.zoomState && ui(M.zoomState), $n();
+		}, { deep: !0 });
+		let _i = h(() => {
+			if (!R.value.zoomMinimap.show || G.value === A.DONUT) return [];
 			let e = [];
 			j(W.value.dataset) && (e = W.value.dataset), Ye(W.value.dataset) && (e = W.value.dataset.map((e, t) => ({
 				values: e.VALUE || e.DATA || e.SERIE || e.SERIES || e.VALUES || e.NUM || 0,
@@ -843,54 +1034,54 @@ var N = /* @__PURE__ */ e({ default: () => On }), nt = ["id"], rt = ["id"], it =
 			let r = Math.min(...n);
 			return n.map((e) => e + (r < 0 ? Math.abs(r) : 0));
 		});
-		function Ur() {
+		function vi() {
 			let e = 0;
-			return Bn.value && (e = Array.from(Bn.value.querySelectorAll("text")).reduce((e, t) => {
+			return Hn.value && (e = Array.from(Hn.value.querySelectorAll("text")).reduce((e, t) => {
 				let n = t.getComputedTextLength();
 				return n > e ? n : e;
 			}, 0)), e + 4;
 		}
-		let Wr = w(0), Gr = Te((e) => {
-			Wr.value = e;
+		let yi = w(0), bi = Te((e) => {
+			yi.value = e;
 		}, 100);
 		We((e) => {
-			let t = R.value;
+			let t = Vn.value;
 			if (!t) return;
 			let n = new ResizeObserver((e) => {
-				Gr(e[0].contentRect.height);
+				bi(e[0].contentRect.height);
 			});
 			n.observe(t), e(() => n.disconnect());
 		}), ze(() => {
-			Wr.value = 0;
+			yi.value = 0;
 		});
-		let Kr = h(() => {
+		let xi = h(() => {
 			let e = 0;
-			return R.value && (e = Wr.value), 0 + e;
+			return Vn.value && (e = yi.value), 0 + e;
 		}), Z = h(() => {
 			if (G.value !== A.LINE) return null;
-			Gn.value;
+			qn.value;
 			let e = {
 				height: K.value.height,
 				width: K.value.width
-			}, n = Ur();
-			if (R.value) {
-				let e = R.value.getBBox().x;
+			}, n = vi();
+			if (Vn.value) {
+				let e = Vn.value.getBBox().x;
 				e < 0 && (n += Math.abs(e));
 			}
 			let i = {
-				left: n + z.value.xyPaddingLeft,
-				top: z.value.xyPaddingTop,
-				right: e.width - z.value.xyPaddingRight,
-				bottom: e.height - z.value.xyPaddingBottom - Kr.value,
-				width: Math.max(10, e.width - z.value.xyPaddingLeft - z.value.xyPaddingRight - n),
-				height: Math.max(10, e.height - z.value.xyPaddingTop - z.value.xyPaddingBottom - Kr.value)
+				left: n + R.value.xyPaddingLeft,
+				top: R.value.xyPaddingTop,
+				right: e.width - R.value.xyPaddingRight,
+				bottom: e.height - R.value.xyPaddingBottom - xi.value,
+				width: Math.max(10, e.width - R.value.xyPaddingLeft - R.value.xyPaddingRight - n),
+				height: Math.max(10, e.height - R.value.xyPaddingTop - R.value.xyPaddingBottom - xi.value)
 			}, a = [];
 			j(W.value.dataset) && (a = [{
 				values: W.value.dataset.slice(X.value.start, X.value.end),
 				absoluteValues: W.value.dataset,
 				absoluteIndices: W.value.dataset.map((e, t) => t).slice(X.value.start, X.value.end),
-				name: z.value.title,
-				color: gr.value[z.value.paletteStartIndex] || l[z.value.paletteStartIndex],
+				name: R.value.title,
+				color: _r.value[R.value.paletteStartIndex] || l[R.value.paletteStartIndex],
 				id: "line_0"
 			}]), Ye(W.value.dataset) && (a = W.value.dataset.map((e, t) => ({
 				...e,
@@ -899,7 +1090,7 @@ var N = /* @__PURE__ */ e({ default: () => On }), nt = ["id"], rt = ["id"], it =
 				id: `line_${t}`
 			})).map((e, t) => ({
 				...e,
-				color: e.COLOR ? ee(e.COLOR) : gr.value[t + z.value.paletteStartIndex] || l[t + z.value.paletteStartIndex] || l[(t + z.value.paletteStartIndex) % l.length],
+				color: e.COLOR ? ee(e.COLOR) : _r.value[t + R.value.paletteStartIndex] || l[t + R.value.paletteStartIndex] || l[(t + R.value.paletteStartIndex) % l.length],
 				values: e.values.slice(X.value.start, X.value.end),
 				absoluteValues: e.values,
 				absoluteIndices: e.values.map((e, t) => t).slice(X.value.start, X.value.end)
@@ -908,7 +1099,7 @@ var N = /* @__PURE__ */ e({ default: () => On }), nt = ["id"], rt = ["id"], it =
 				max: Math.max(...a.filter((e) => !L.value.includes(e.id)).flatMap((e) => e.values)),
 				min: Math.min(...a.filter((e) => !L.value.includes(e.id)).flatMap((e) => e.values)),
 				maxSeries: Math.max(...a.map((e) => e.values.length))
-			}, s = o.max === o.min ? ne(Math.min(o.min, 0), o.min === 0 ? 1 : Math.max(o.min, 0), z.value.xyScaleSegments) : ne(o.min < 0 ? o.min : 0, o.max < 0 ? 0 : o.max, z.value.xyScaleSegments), c = o.min < 0 ? Math.abs(o.min) : 0, te = o.max < 0 ? i.top : i.bottom - c / (s.max + c) * i.height, u = i.width / o.maxSeries, d = s.ticks.map((e) => ({
+			}, s = o.max === o.min ? ne(Math.min(o.min, 0), o.min === 0 ? 1 : Math.max(o.min, 0), R.value.xyScaleSegments) : ne(o.min < 0 ? o.min : 0, o.max < 0 ? 0 : o.max, R.value.xyScaleSegments), c = o.min < 0 ? Math.abs(o.min) : 0, te = o.max < 0 ? i.top : i.bottom - c / (s.max + c) * i.height, u = i.width / o.maxSeries, d = s.ticks.map((e) => ({
 				y: i.bottom - i.height * ((e + c) / (s.max + c)),
 				x: i.left - 8,
 				value: e
@@ -937,41 +1128,42 @@ var N = /* @__PURE__ */ e({ default: () => On }), nt = ["id"], rt = ["id"], it =
 				})).filter((e) => !L.value.includes(e.id));
 			}
 			function ae(e, n = "pointer") {
-				I.value = e, J.value = e, V.value = e, H.value = n;
+				if (Kr.value && n === "pointer") return;
+				I.value = e, J.value = e, B.value = e, V.value = n;
 				let i = f(e);
-				jn.value = {
+				Mn.value = {
 					datapoint: i,
 					seriesIndex: e,
-					config: z.value,
+					config: R.value,
 					dataset: a
 				};
-				let o = z.value.tooltipCustomFormat;
-				if (z.value.events.datapointEnter && z.value.events.datapointEnter({
+				let o = R.value.tooltipCustomFormat;
+				if (R.value.events.datapointEnter && R.value.events.datapointEnter({
 					datapoint: i,
 					seriesIndex: e + X.value.start
 				}), r(o) && ie(() => o({
 					datapoint: i,
 					seriesIndex: e,
 					series: a,
-					config: z.value
-				}))) Mn.value = o({
+					config: R.value
+				}))) Nn.value = o({
 					datapoint: i,
 					seriesIndex: e,
 					series: a,
-					config: z.value
+					config: R.value
 				});
 				else {
 					let e = "";
-					$.value[i[0].absoluteIndex] && (e += `<div style="border-bottom:1px solid ${z.value.tooltipBorderColor};padding-bottom:6px;margin-bottom:3px;">${$.value[i[0].absoluteIndex].text}</div>`), i.forEach((n, r) => {
+					$.value[i[0].absoluteIndex] && (e += `<div style="border-bottom:1px solid ${R.value.tooltipBorderColor};padding-bottom:6px;margin-bottom:3px;">${$.value[i[0].absoluteIndex].text}</div>`), i.forEach((n, r) => {
 						e += `
                     <div style="display:flex; flex-wrap: wrap; align-items:center; gap:3px;">
                         <svg viewBox="0 0 12 12" height="14" width="12"><circle cx="6" cy="6" r="6" stroke="none" fill="${n.color}"/></svg>
                         <span>${n.name}:</span>
-                        <b>${p(z.value.formatter, n.value, t({
-							p: z.value.valuePrefix,
+                        <b>${p(R.value.formatter, n.value, t({
+							p: R.value.valuePrefix,
 							v: n.value,
-							s: z.value.valueSuffix,
-							r: z.value.dataLabelRoundingValue
+							s: R.value.valueSuffix,
+							r: R.value.dataLabelRoundingValue
 						}), {
 							datapoint: n,
 							seriesIndex: r
@@ -979,20 +1171,20 @@ var N = /* @__PURE__ */ e({ default: () => On }), nt = ["id"], rt = ["id"], it =
                         </b>
                     </div>
                 `;
-					}), Mn.value = e;
+					}), Nn.value = e;
 				}
 				F.value = !0;
 			}
 			function oe(e) {
 				let t = f(e);
-				z.value.events.datapointLeave && z.value.events.datapointLeave({
+				R.value.events.datapointLeave && R.value.events.datapointLeave({
 					datapoint: t,
 					seriesIndex: e + X.value.start
-				}), I.value = null, J.value = null, F.value = !1, V.value = null, H.value = "pointer";
+				}), I.value = null, J.value = null, F.value = !1, B.value = null, V.value = "pointer";
 			}
 			function se(e) {
 				let t = f(e);
-				z.value.events.datapointClick && z.value.events.datapointClick({
+				R.value.events.datapointClick && R.value.events.datapointClick({
 					datapoint: t,
 					seriesIndex: e + X.value.start
 				}), U("selectDatapoint", t);
@@ -1011,29 +1203,29 @@ var N = /* @__PURE__ */ e({ default: () => On }), nt = ["id"], rt = ["id"], it =
 			};
 		}), Q = h(() => {
 			if (G.value !== A.BAR) return null;
-			Gn.value;
+			qn.value;
 			let e = {
 				height: K.value.height,
 				width: K.value.width
-			}, n = Ur();
-			if (R.value) {
-				let e = R.value.getBBox().x;
+			}, n = vi();
+			if (Vn.value) {
+				let e = Vn.value.getBBox().x;
 				e < 0 && (n += Math.abs(e));
 			}
 			let i = {
-				left: n + z.value.xyPaddingLeft,
-				top: z.value.xyPaddingTop,
-				right: e.width - z.value.xyPaddingRight,
-				bottom: e.height - z.value.xyPaddingBottom - Kr.value,
-				width: Math.max(10, e.width - z.value.xyPaddingLeft - z.value.xyPaddingRight - n),
-				height: Math.max(10, e.height - z.value.xyPaddingTop - z.value.xyPaddingBottom - Kr.value)
+				left: n + R.value.xyPaddingLeft,
+				top: R.value.xyPaddingTop,
+				right: e.width - R.value.xyPaddingRight,
+				bottom: e.height - R.value.xyPaddingBottom - xi.value,
+				width: Math.max(10, e.width - R.value.xyPaddingLeft - R.value.xyPaddingRight - n),
+				height: Math.max(10, e.height - R.value.xyPaddingTop - R.value.xyPaddingBottom - xi.value)
 			}, a = [];
 			j(W.value.dataset) && (a = [{
 				values: W.value.dataset.slice(X.value.start, X.value.end),
 				absoluteValues: W.value.dataset,
 				absoluteIndices: W.value.dataset.map((e, t) => t).slice(X.value.start, X.value.end),
-				name: z.value.title,
-				color: gr.value[z.value.paletteStartIndex] || l[z.value.paletteStartIndex],
+				name: R.value.title,
+				color: _r.value[R.value.paletteStartIndex] || l[R.value.paletteStartIndex],
 				id: "bar_0"
 			}]), Ye(W.value.dataset) && (a = W.value.dataset.map((e, t) => ({
 				...e,
@@ -1042,7 +1234,7 @@ var N = /* @__PURE__ */ e({ default: () => On }), nt = ["id"], rt = ["id"], it =
 				id: `bar_${t}`
 			})).map((e, t) => ({
 				...e,
-				color: e.COLOR ? ee(e.COLOR) : gr.value[t + z.value.paletteStartIndex] || l[t + z.value.paletteStartIndex] || l[(t + z.value.paletteStartIndex) % l.length],
+				color: e.COLOR ? ee(e.COLOR) : _r.value[t + R.value.paletteStartIndex] || l[t + R.value.paletteStartIndex] || l[(t + R.value.paletteStartIndex) % l.length],
 				values: e.values.slice(X.value.start, X.value.end),
 				absoluteValues: e.values,
 				absoluteIndices: e.values.map((e, t) => t).slice(X.value.start, X.value.end)
@@ -1051,7 +1243,7 @@ var N = /* @__PURE__ */ e({ default: () => On }), nt = ["id"], rt = ["id"], it =
 				max: Math.max(...a.filter((e) => !L.value.includes(e.id)).flatMap((e) => e.values)) < 0 ? 0 : Math.max(...a.filter((e) => !L.value.includes(e.id)).flatMap((e) => e.values)) ?? 1,
 				min: Math.min(...a.filter((e) => !L.value.includes(e.id)).flatMap((e) => e.values)) ?? 0,
 				maxSeries: Math.max(...a.filter((e) => !L.value.includes(e.id)).map((e) => e.values.length)) ?? 0
-			}, s = o.min === o.max ? ne(Math.min(o.min, 0), o.min === 0 ? 1 : Math.max(o.min, 0), z.value.xyScaleSegments) : ne(o.min < 0 ? o.min : 0, o.max, z.value.xyScaleSegments), c = s.min < 0 ? Math.abs(s.min) : 0, te = i.bottom - c / (s.max + c) * i.height, u = i.width / o.maxSeries, d = s.ticks.map((e) => ({
+			}, s = o.min === o.max ? ne(Math.min(o.min, 0), o.min === 0 ? 1 : Math.max(o.min, 0), R.value.xyScaleSegments) : ne(o.min < 0 ? o.min : 0, o.max, R.value.xyScaleSegments), c = s.min < 0 ? Math.abs(s.min) : 0, te = i.bottom - c / (s.max + c) * i.height, u = i.width / o.maxSeries, d = s.ticks.map((e) => ({
 				y: i.bottom - i.height * ((e + c) / (s.max + c)),
 				x: i.left - 8,
 				value: e
@@ -1059,9 +1251,9 @@ var N = /* @__PURE__ */ e({ default: () => On }), nt = ["id"], rt = ["id"], it =
 				...e,
 				shape: "square",
 				coordinates: e.values.map((e, n) => {
-					let r = (e + c) / (o.max + c) * i.height, s = Math.abs(e) / Math.abs(o.min) * (i.height - te), ee = c / (o.max + c) * i.height, l = u / a.filter((e) => !L.value.includes(e.id)).length - z.value.barGap / a.filter((e) => !L.value.includes(e.id)).length;
+					let r = (e + c) / (o.max + c) * i.height, s = Math.abs(e) / Math.abs(o.min) * (i.height - te), ee = c / (o.max + c) * i.height, l = u / a.filter((e) => !L.value.includes(e.id)).length - R.value.barGap / a.filter((e) => !L.value.includes(e.id)).length;
 					return {
-						x: i.left + u * n + l * t + z.value.barGap / 2,
+						x: i.left + u * n + l * t + R.value.barGap / 2,
 						y: e > 0 ? i.bottom - r : te,
 						height: e > 0 ? r - ee : s,
 						value: e,
@@ -1071,9 +1263,9 @@ var N = /* @__PURE__ */ e({ default: () => On }), nt = ["id"], rt = ["id"], it =
 			})), f = a.filter((e) => !L.value.includes(e.id)).map((e, t) => ({
 				...e,
 				coordinates: e.values.map((e, n) => {
-					let r = (e + c) / (o.max + c) * i.height, s = Math.abs(e) / (o.max + c) * i.height, ee = c / (o.max + c) * i.height, l = u / a.filter((e) => !L.value.includes(e.id)).length - z.value.barGap / a.filter((e) => !L.value.includes(e.id)).length;
+					let r = (e + c) / (o.max + c) * i.height, s = Math.abs(e) / (o.max + c) * i.height, ee = c / (o.max + c) * i.height, l = u / a.filter((e) => !L.value.includes(e.id)).length - R.value.barGap / a.filter((e) => !L.value.includes(e.id)).length;
 					return {
-						x: i.left + u * n + l * t + z.value.barGap / 2,
+						x: i.left + u * n + l * t + R.value.barGap / 2,
 						y: e > 0 ? i.bottom - r : te,
 						height: e > 0 ? r - ee : s,
 						value: e,
@@ -1089,41 +1281,42 @@ var N = /* @__PURE__ */ e({ default: () => On }), nt = ["id"], rt = ["id"], it =
 				})).filter((e) => !L.value.includes(e.id));
 			}
 			function oe(e, n = "pointer") {
-				I.value = e, J.value = e, V.value = e, H.value = n;
+				if (Kr.value && n === "pointer") return;
+				I.value = e, J.value = e, B.value = e, V.value = n;
 				let i = ae(e);
-				jn.value = {
+				Mn.value = {
 					datapoint: i,
 					seriesIndex: e,
-					config: z.value,
+					config: R.value,
 					dataset: a
 				};
-				let o = z.value.tooltipCustomFormat;
-				if (z.value.events.datapointEnter && z.value.events.datapointEnter({
+				let o = R.value.tooltipCustomFormat;
+				if (R.value.events.datapointEnter && R.value.events.datapointEnter({
 					datapoint: i,
 					seriesIndex: e + X.value.start
 				}), r(o) && ie(() => o({
 					datapoint: i,
 					seriesIndex: e,
 					series: a,
-					config: z.value
-				}))) Mn.value = o({
+					config: R.value
+				}))) Nn.value = o({
 					point: i,
 					seriesIndex: e,
 					series: a,
-					config: z.value
+					config: R.value
 				});
 				else {
 					let e = "";
-					$.value[i[0].absoluteIndex] && (e += `<div style="border-bottom:1px solid ${z.value.tooltipBorderColor};padding-bottom:6px;margin-bottom:3px;">${$.value[i[0].absoluteIndex].text}</div>`), i.forEach((n, r) => {
+					$.value[i[0].absoluteIndex] && (e += `<div style="border-bottom:1px solid ${R.value.tooltipBorderColor};padding-bottom:6px;margin-bottom:3px;">${$.value[i[0].absoluteIndex].text}</div>`), i.forEach((n, r) => {
 						e += `
                     <div style="display:flex; flex-wrap: wrap; align-items:center; gap:3px;">
                         <svg viewBox="0 0 12 12" height="14" width="12"><rect x=0 y="0" width="12" height="12" rx="1" stroke="none" fill="${n.color}"/></svg>
                         <span>${n.name}:</span>
-                        <b>${p(z.value.formatter, n.value, t({
-							p: z.value.valuePrefix,
+                        <b>${p(R.value.formatter, n.value, t({
+							p: R.value.valuePrefix,
 							v: n.value,
-							s: z.value.valueSuffix,
-							r: z.value.dataLabelRoundingValue
+							s: R.value.valueSuffix,
+							r: R.value.dataLabelRoundingValue
 						}), {
 							datapoint: n,
 							seriesIndex: r
@@ -1131,20 +1324,20 @@ var N = /* @__PURE__ */ e({ default: () => On }), nt = ["id"], rt = ["id"], it =
                         </b>
                     </div>
                 `;
-					}), Mn.value = e;
+					}), Nn.value = e;
 				}
 				F.value = !0;
 			}
 			function se(e) {
 				let t = ae(e);
-				z.value.events.datapointLeave && z.value.events.datapointLeave({
+				R.value.events.datapointLeave && R.value.events.datapointLeave({
 					datapoint: t,
 					seriesIndex: e + X.value.start
-				}), F.value = !1, I.value = null, J.value = null, V.value = null, H.value = "pointer";
+				}), F.value = !1, I.value = null, J.value = null, B.value = null, V.value = "pointer";
 			}
 			function ce(e) {
 				let t = ae(e);
-				z.value.events.datapointClick && z.value.events.datapointClick({
+				R.value.events.datapointClick && R.value.events.datapointClick({
 					datapoint: t,
 					seriesIndex: e + X.value.start
 				}), U("selectDatapoint", t);
@@ -1162,13 +1355,147 @@ var N = /* @__PURE__ */ e({ default: () => On }), nt = ["id"], rt = ["id"], it =
 				killTooltip: se,
 				selectDatapoint: ce
 			};
-		}), qr = h(() => G.value === A.LINE ? Z.value?.drawingArea ?? null : G.value === A.BAR ? Q.value?.drawingArea ?? null : null), Jr = h(() => {
-			let e = qr.value, t = K.value.width;
-			return !e || t <= 0 || !z.value.zoomXyAutoFit ? null : e.left / t;
-		}), Yr = h(() => {
-			let e = qr.value, t = K.value.width;
-			return !e || t <= 0 || !z.value.zoomXyAutoFit ? null : (t - e.right) / t;
-		}), Xr = h(() => {
+		}), Si = h(() => G.value === A.LINE ? Z.value?.drawingArea ?? null : G.value === A.BAR ? Q.value?.drawingArea ?? null : null), Ci = h(() => G.value === A.LINE ? Number(Z.value?.slotSize ?? 0) : G.value === A.BAR ? Number(Q.value?.slotSize ?? 0) : 0), wi = h(() => G.value === A.LINE ? Number(Z.value?.extremes?.maxSeries ?? 0) : G.value === A.BAR ? Number(Q.value?.extremes?.maxSeries ?? 0) : 0), Ti = h(() => {
+			let e = Si.value;
+			return !e || !Kr.value || Jr.value == null || Yr.value == null ? null : {
+				x: Math.min(Jr.value, Yr.value),
+				y: e.top,
+				width: Math.abs(Yr.value - Jr.value),
+				height: e.height
+			};
+		}), Ei = h(() => !Ur.value || !br.value ? !1 : Number(X.value.start) !== 0 || Number(X.value.end) !== Number(si()));
+		function Di(e) {
+			let t = H.value;
+			if (!t) return null;
+			if (t.createSVGPoint && t.getScreenCTM) {
+				let n = t.createSVGPoint();
+				n.x = e.clientX, n.y = e.clientY;
+				let r = t.getScreenCTM();
+				if (r) {
+					let e = n.matrixTransform(r.inverse());
+					return {
+						x: e.x,
+						y: e.y
+					};
+				}
+			}
+			let n = t.getBoundingClientRect(), r = t.viewBox?.baseVal || {
+				x: 0,
+				y: 0,
+				width: n.width,
+				height: n.height
+			}, i = Math.min(n.width / r.width, n.height / r.height);
+			if (!Number.isFinite(i) || i <= 0) return null;
+			let a = r.width * i, o = r.height * i, s = (n.width - a) / 2, c = (n.height - o) / 2;
+			return {
+				x: (e.clientX - n.left - s) / i + r.x,
+				y: (e.clientY - n.top - c) / i + r.y
+			};
+		}
+		function Oi(e) {
+			let t = Si.value;
+			return t ? Math.min(Math.max(e, t.left), t.right) : e;
+		}
+		function ki() {
+			B.value = null, V.value = "pointer", F.value = !1, I.value = null, J.value = null;
+		}
+		function Ai(e) {
+			let t = e?.pointerId == null ? Xr.value : e.pointerId;
+			t != null && H.value?.hasPointerCapture?.(t) && H.value.releasePointerCapture(t), Kr.value = !1, Jr.value = null, Yr.value = null, Xr.value = null;
+		}
+		function ji() {
+			Zr.value = !0, setTimeout(() => {
+				Zr.value = !1;
+			}, 0);
+		}
+		function Mi(e) {
+			Zr.value && (Zr.value = !1, e.preventDefault(), e.stopPropagation());
+		}
+		function Ni(e) {
+			if (!ti.value || !Ei.value || !e) return !1;
+			let t = Date.now(), n = e.pointerType || "mouse", r = Qr.value, i = n === "touch" ? 450 : 350, a = n === "touch" ? 28 : 10, o = Math.hypot(e.clientX - r.x, e.clientY - r.y);
+			return r.time > 0 && r.pointerType === n && t - r.time <= i && o <= a ? (Qr.value = {
+				time: 0,
+				x: 0,
+				y: 0,
+				pointerType: null
+			}, ji(), Ai(e), ki(), pi({
+				applyControlledZoom: !1,
+				publish: !0
+			}), !0) : (Qr.value = {
+				time: t,
+				x: e.clientX,
+				y: e.clientY,
+				pointerType: n
+			}, !1);
+		}
+		function Pi(e) {
+			let t = Si.value, n = Ci.value, r = wi.value;
+			if (!t || r <= 0 || !Number.isFinite(n) || n <= 0) return null;
+			let i = Math.floor((Oi(e) - t.left) / n);
+			return Math.max(0, Math.min(r - 1, i));
+		}
+		function Fi(e, t) {
+			let n = Pi(e), r = Pi(t);
+			if (n == null || r == null) return null;
+			let i = Math.min(n, r), a = Math.max(n, r);
+			return a <= i ? null : {
+				start: Number(X.value.start) + i,
+				end: Number(X.value.start) + a + 1
+			};
+		}
+		function Ii(e) {
+			let t = di(e);
+			return t ? (U("zoomStart", {
+				index: t.start,
+				isZoom: t.start !== 0
+			}), U("zoomEnd", {
+				index: t.end,
+				isZoom: t.end !== si()
+			}), t) : null;
+		}
+		function Li(e) {
+			if (!ti.value || Ji.value || e.button !== void 0 && e.button !== 0 || Xr.value != null && e.pointerId !== Xr.value) return;
+			let t = Si.value, n = Di(e);
+			if (!t || !n || n.x < t.left || n.x > t.right || n.y < t.top || n.y > t.bottom || wi.value <= 1) return;
+			qr.value = !0, H.value?.focus?.({ preventScroll: !0 }), ki();
+			let r = Oi(n.x);
+			Xr.value = e.pointerId, Kr.value = !0, Jr.value = r, Yr.value = r;
+		}
+		function Ri(e) {
+			if (!ti.value || !Kr.value || Xr.value != null && e.pointerId !== Xr.value) return;
+			let t = Di(e);
+			t && (Yr.value = Oi(t.x), ki(), Jr.value != null && Math.abs(Yr.value - Jr.value) >= 2 && !H.value?.hasPointerCapture?.(e.pointerId) && H.value?.setPointerCapture?.(e.pointerId));
+		}
+		function zi(e) {
+			if (!ti.value || !Kr.value || Xr.value != null && e.pointerId !== Xr.value) return;
+			let t = Di(e);
+			t && (Yr.value = Oi(t.x));
+			let n = Jr.value, r = Yr.value, i = Si.value;
+			if ((n == null || r == null ? 0 : Math.abs(r - n)) < Math.max(4, Number(i?.width ?? 0) * .01)) {
+				if (Ni(e)) return;
+				Ai(e);
+				return;
+			}
+			let a = Fi(Math.min(n, r), Math.max(n, r));
+			if (!a) {
+				Ai(e);
+				return;
+			}
+			Ai(e), Ii(a) && (Qr.value = {
+				time: 0,
+				x: 0,
+				y: 0,
+				pointerType: null
+			}, ki(), ji());
+		}
+		let Bi = h(() => {
+			let e = Si.value, t = K.value.width;
+			return !e || t <= 0 || !R.value.zoomXyAutoFit ? null : e.left / t;
+		}), Vi = h(() => {
+			let e = Si.value, t = K.value.width;
+			return !e || t <= 0 || !R.value.zoomXyAutoFit ? null : (t - e.right) / t;
+		}), Hi = h(() => {
 			if (G.value === A.LINE) return Z.value.legend.map((e) => (Math.min(...e.absoluteValues.map((e) => e ?? 0)), {
 				...e,
 				isVisible: !L.value.includes(e.id),
@@ -1181,35 +1508,35 @@ var N = /* @__PURE__ */ e({ default: () => On }), nt = ["id"], rt = ["id"], it =
 				type: "bar",
 				series: e.absoluteValues
 			}));
-		}), $ = w([]), Zr = 0;
+		}), $ = w([]), Ui = 0;
 		We(() => {
-			let e = ++Zr;
+			let e = ++Ui;
 			(async () => {
 				let t = await fe({
-					values: z.value.xyPeriods,
+					values: R.value.xyPeriods,
 					maxDatapoints: W.value.maxSeriesLength,
-					formatter: z.value.datetimeFormatter,
+					formatter: R.value.datetimeFormatter,
 					start: X.value.start,
 					end: X.value.end
 				});
-				e === Zr && ($.value = t);
+				e === Ui && ($.value = t);
 			})();
 		});
-		let Qr = h(() => {
-			let e = z.value.xyPeriodsModulo;
-			return z.value.xyPeriods.length ? Math.min(e, [...new Set($.value.map((e) => e.text))].length) : e;
-		}), $r = w(!1);
-		function ei(e) {
-			$r.value = e, Fn.value += 1;
+		let Wi = h(() => {
+			let e = R.value.xyPeriodsModulo;
+			return R.value.xyPeriods.length ? Math.min(e, [...new Set($.value.map((e) => e.text))].length) : e;
+		}), Gi = w(!1);
+		function Ki(e) {
+			Gi.value = e, In.value += 1;
 		}
-		function ti() {
-			wr.value.showTooltip = !wr.value.showTooltip;
+		function qi() {
+			Dr.value.showTooltip = !Dr.value.showTooltip;
 		}
-		let ni = w(!1);
-		function ri() {
-			ni.value = !ni.value;
+		let Ji = w(!1);
+		function Yi() {
+			Ji.value = !Ji.value;
 		}
-		async function ii({ scale: e = 2 } = {}) {
+		async function Xi({ scale: e = 2 } = {}) {
 			if (!N.value) return;
 			let { width: t, height: n } = N.value.getBoundingClientRect(), r = t / n, { imageUri: i, base64: a } = await Ce({
 				domElement: N.value,
@@ -1220,62 +1547,62 @@ var N = /* @__PURE__ */ e({ default: () => On }), nt = ["id"], rt = ["id"], it =
 			return {
 				imageUri: i,
 				base64: a,
-				title: z.value.title,
+				title: R.value.title,
 				width: t,
 				height: n,
 				aspectRatio: r
 			};
 		}
-		let ai = h(() => K.value.width), oi = h(() => K.value.height);
+		let Zi = h(() => K.value.width), Qi = h(() => K.value.height);
 		Se({
-			timeLabelsEls: R,
+			timeLabelsEls: Vn,
 			timeLabels: $,
 			slicer: X,
-			configRef: z,
+			configRef: R,
 			rotationPath: ["xyPeriodLabelsRotation"],
 			autoRotatePath: ["xyPeriodLabelsAutoRotate", "enable"],
 			isAutoSize: !1,
-			rotation: z.value.xyPeriodLabelsAutoRotate.angle,
-			height: oi.value,
-			width: ai.value
+			rotation: R.value.xyPeriodLabelsAutoRotate.angle,
+			height: Qi.value,
+			width: Zi.value
 		});
-		let si = h(() => z.value.backgroundColor), ci = h(() => G.value === A.DONUT ? Y.value.legend : G.value === A.LINE ? Z.value.legend : Q.value.legend), li = h(() => ({
-			show: z.value.showLegend,
+		let $i = h(() => R.value.backgroundColor), ea = h(() => G.value === A.DONUT ? Y.value.legend : G.value === A.LINE ? Z.value.legend : Q.value.legend), ta = h(() => ({
+			show: R.value.showLegend,
 			bold: !1,
-			backgroundColor: z.value.backgroundColor,
-			color: z.value.color,
-			fontSize: z.value.legendFontSize,
-			position: z.value.legendPosition
-		})), ui = h(() => ({
-			text: z.value.title,
-			color: z.value.color,
-			fontSize: z.value.titleFontSize,
-			bold: z.value.titleBold,
-			textAlign: z.value.titleTextAlign,
+			backgroundColor: R.value.backgroundColor,
+			color: R.value.color,
+			fontSize: R.value.legendFontSize,
+			position: R.value.legendPosition
+		})), na = h(() => ({
+			text: R.value.title,
+			color: R.value.color,
+			fontSize: R.value.titleFontSize,
+			bold: R.value.titleBold,
+			textAlign: R.value.titleTextAlign,
 			subtitle: { text: "" }
-		})), { generateSvg: di, onGenerateImage: fi } = ye({
-			svg: sr,
-			title: ui,
-			legend: li,
-			legendItems: ci,
-			backgroundColor: si,
-			getSvgCallback: () => z.value.userOptionsCallbacks.svg,
-			generateImage: Sr
+		})), { generateSvg: ra, onGenerateImage: ia } = ye({
+			svg: H,
+			title: na,
+			legend: ta,
+			legendItems: ea,
+			backgroundColor: $i,
+			getSvgCallback: () => R.value.userOptionsCallbacks.svg,
+			generateImage: Tr
 		});
-		async function pi() {
+		async function aa() {
 			if (U("copyAlt", {
-				config: z.value,
+				config: R.value,
 				dataset: {
 					line: Z.value,
 					bar: Q.value,
 					donut: Y.value
 				}
-			}), !z.value.userOptionsCallbacks.altCopy) {
+			}), !R.value.userOptionsCallbacks.altCopy) {
 				console.warn("Vue Data UI - A callback must be set for `altCopy` in userOptions.");
 				return;
 			}
-			await Promise.resolve(z.value.userOptionsCallbacks.altCopy({
-				config: z.value,
+			await Promise.resolve(R.value.userOptionsCallbacks.altCopy({
+				config: R.value,
 				dataset: {
 					line: Z.value,
 					bar: Q.value,
@@ -1283,50 +1610,57 @@ var N = /* @__PURE__ */ e({ default: () => On }), nt = ["id"], rt = ["id"], it =
 				}
 			}));
 		}
-		function mi(e, t) {
+		function oa(e, t) {
 			(e.key === "Enter" || e.key === " ") && (e.preventDefault(), t());
 		}
-		let hi = h(() => G.value === A.DONUT ? Y.value?.chart?.length ?? 0 : G.value === A.LINE ? Z.value?.extremes?.maxSeries ?? 0 : G.value === A.BAR ? Q.value?.extremes?.maxSeries ?? 0 : 0);
-		function gi() {
-			V.value = null, nr.value = !0;
+		let sa = h(() => G.value === A.DONUT ? Y.value?.chart?.length ?? 0 : G.value === A.LINE ? Z.value?.extremes?.maxSeries ?? 0 : G.value === A.BAR ? Q.value?.extremes?.maxSeries ?? 0 : 0);
+		function ca() {
+			B.value = null, ir.value = !0;
 		}
-		function _i() {
-			V.value = null, H.value = "pointer", F.value = !1, I.value = null, J.value = null, nr.value = !1;
+		function la() {
+			qr.value = !1, B.value = null, V.value = "pointer", F.value = !1, I.value = null, J.value = null, ir.value = !1;
 		}
-		function vi(e) {
-			if (!sr.value || ni.value || document.activeElement !== sr.value || !hi.value) return;
+		function ua(e) {
+			if (!H.value || Ji.value || document.activeElement !== H.value || (qr.value = !1, !sa.value)) return;
 			let t = e.key === "ArrowLeft", n = e.key === "ArrowRight", r = e.key === "Enter" || e.key === " ", i = e.key === "Escape";
 			if (!t && !n && !r && !i) return;
 			if (e.preventDefault(), e.stopPropagation(), i) {
-				V.value = null, H.value = "pointer", F.value = !1, I.value = null, J.value = null;
+				if (ti.value && (Ei.value || Kr.value)) {
+					Ai(), ki(), pi({
+						applyControlledZoom: !1,
+						publish: !0
+					});
+					return;
+				}
+				B.value = null, V.value = "pointer", F.value = !1, I.value = null, J.value = null;
 				return;
 			}
 			if (r) {
-				if (V.value === null) return;
+				if (B.value === null) return;
 				if (G.value === A.DONUT) {
-					let e = Y.value?.chart?.[V.value];
+					let e = Y.value?.chart?.[B.value];
 					if (!e) return;
 					Y.value.selectDatapoint({
 						datapoint: e,
-						seriesIndex: V.value
+						seriesIndex: B.value
 					});
 					return;
 				}
 				if (G.value === A.LINE) {
-					Z.value?.selectDatapoint(V.value);
+					Z.value?.selectDatapoint(B.value);
 					return;
 				}
 				if (G.value === A.BAR) {
-					Q.value?.selectDatapoint(V.value);
+					Q.value?.selectDatapoint(B.value);
 					return;
 				}
 				return;
 			}
-			let a = V.value, o = J.value, s = a !== null && a >= 0 && a < hi.value, c = o !== null && o >= 0 && o < hi.value;
-			if (s ? n ? (a += 1, a >= hi.value && (a = 0)) : t && (--a, a < 0 && (a = hi.value - 1)) : c ? (a = n ? o + 1 : o - 1, a >= hi.value && (a = 0), a < 0 && (a = hi.value - 1)) : a = n ? 0 : hi.value - 1, G.value === A.DONUT) {
+			let a = B.value, o = J.value, s = a !== null && a >= 0 && a < sa.value, c = o !== null && o >= 0 && o < sa.value;
+			if (s ? n ? (a += 1, a >= sa.value && (a = 0)) : t && (--a, a < 0 && (a = sa.value - 1)) : c ? (a = n ? o + 1 : o - 1, a >= sa.value && (a = 0), a < 0 && (a = sa.value - 1)) : a = n ? 0 : sa.value - 1, G.value === A.DONUT) {
 				let e = Y.value?.chart?.[a];
 				if (!e) return;
-				yi(a), Y.value.useTooltip({
+				da(a), Y.value.useTooltip({
 					datapoint: e,
 					seriesIndex: a,
 					triggerMode: "keyboard"
@@ -1334,13 +1668,13 @@ var N = /* @__PURE__ */ e({ default: () => On }), nt = ["id"], rt = ["id"], it =
 				return;
 			}
 			if (G.value === A.LINE) {
-				yi(a), Z.value?.useTooltip(a, "keyboard");
+				da(a), Z.value?.useTooltip(a, "keyboard");
 				return;
 			}
-			G.value === A.BAR && (yi(a), Q.value?.useTooltip(a, "keyboard"));
+			G.value === A.BAR && (da(a), Q.value?.useTooltip(a, "keyboard"));
 		}
-		function yi(e) {
-			if (!Number.isFinite(e) || !sr.value) return;
+		function da(e) {
+			if (!Number.isFinite(e) || !H.value) return;
 			let t = 0, n = 0;
 			if (G.value === A.DONUT) {
 				let r = Y.value?.chart?.[e];
@@ -1357,13 +1691,13 @@ var N = /* @__PURE__ */ e({ default: () => On }), nt = ["id"], rt = ["id"], it =
 				if (!r || !i) return;
 				t = r.left + i * (e + 1) - i / 2, n = r.top + r.height / 2;
 			}
-			let r = sr.value.getBoundingClientRect();
-			tr.value = {
+			let r = H.value.getBoundingClientRect();
+			rr.value = {
 				x: r.left + t / K.value.width * r.width,
 				y: r.top + n / K.value.height * r.height
 			};
 		}
-		let bi = h(() => {
+		let fa = h(() => {
 			if (G.value === A.DONUT) return {
 				headers: [
 					"Series",
@@ -1374,15 +1708,15 @@ var N = /* @__PURE__ */ e({ default: () => On }), nt = ["id"], rt = ["id"], it =
 					let n = Y.value?.total ? t({
 						v: e.value / Y.value.total * 100,
 						s: "%",
-						r: z.value.dataLabelRoundingPercentage
+						r: R.value.dataLabelRoundingPercentage
 					}) : "0%";
 					return [
 						e.name,
-						p(z.value.formatter, e.value, t({
-							p: z.value.valuePrefix,
+						p(R.value.formatter, e.value, t({
+							p: R.value.valuePrefix,
 							v: e.value,
-							s: z.value.valueSuffix,
-							r: z.value.dataLabelRoundingValue
+							s: R.value.valueSuffix,
+							r: R.value.dataLabelRoundingValue
 						})),
 						n
 					];
@@ -1394,11 +1728,11 @@ var N = /* @__PURE__ */ e({ default: () => On }), nt = ["id"], rt = ["id"], it =
 					headers: ["Index", ...e.map((e) => e.name)],
 					rows: Array.from({ length: n }, (n, r) => [$.value?.[r + X.value.start]?.text ?? String(r + X.value.start), ...e.map((e) => {
 						let n = e.values?.[r];
-						return p(z.value.formatter, n, t({
-							p: z.value.valuePrefix,
+						return p(R.value.formatter, n, t({
+							p: R.value.valuePrefix,
 							v: n,
-							s: z.value.valueSuffix,
-							r: z.value.dataLabelRoundingValue
+							s: R.value.valueSuffix,
+							r: R.value.dataLabelRoundingValue
 						}));
 					})])
 				};
@@ -1409,15 +1743,20 @@ var N = /* @__PURE__ */ e({ default: () => On }), nt = ["id"], rt = ["id"], it =
 			};
 		});
 		return we({
-			getImage: ii,
-			generatePdf: xr,
-			generateImage: Sr,
-			generateSvg: di,
-			toggleTooltip: ti,
-			toggleAnnotator: ri,
-			toggleFullscreen: ei,
-			copyAlt: pi
-		}), (e, n) => vr.value ? (C(), _("div", {
+			getImage: Xi,
+			generatePdf: wr,
+			generateImage: Tr,
+			generateSvg: ra,
+			toggleTooltip: qi,
+			toggleAnnotator: Yi,
+			toggleFullscreen: Ki,
+			copyAlt: aa,
+			resetZoom: () => pi({
+				applyControlledZoom: !1,
+				publish: !0
+			}),
+			setZoomState: di
+		}), (e, n) => yr.value ? (C(), _("div", {
 			key: 0,
 			id: `${G.value}_${P.value}`,
 			ref_key: "quickChart",
@@ -1425,23 +1764,23 @@ var N = /* @__PURE__ */ e({ default: () => On }), nt = ["id"], rt = ["id"], it =
 			class: b({
 				"vue-data-ui-component": !0,
 				"vue-ui-quick-chart": !0,
-				"vue-data-ui-wrapper-fullscreen": $r.value
+				"vue-data-ui-wrapper-fullscreen": Gi.value
 			}),
-			style: S(`background:${z.value.backgroundColor};color:${z.value.color};font-family:${z.value.fontFamily}; position: relative; ${z.value.responsive ? "height: 100%" : ""}`),
-			onMouseenter: n[2] ||= () => fr(!0),
-			onMouseleave: n[3] ||= () => fr(!1)
+			style: S(`background:${R.value.backgroundColor};color:${R.value.color};font-family:${R.value.fontFamily}; position: relative; ${R.value.responsive ? "height: 100%" : ""}`),
+			onMouseenter: n[1] ||= () => pr(!0),
+			onMouseleave: n[2] ||= () => pr(!1)
 		}, [
 			v("div", {
 				id: `chart-instructions-${P.value}`,
 				class: "sr-only"
-			}, [v("p", null, D(z.value.a11y.translations.keyboardNavigation), 1)], 8, rt),
-			bi.value.rows.length ? (C(), Ne(ke, {
+			}, [v("p", null, D(R.value.a11y.translations.keyboardNavigation), 1)], 8, rt),
+			fa.value.rows.length ? (C(), Ne(ke, {
 				key: 0,
 				uid: P.value,
-				head: bi.value.headers,
-				body: bi.value.rows,
-				notice: z.value.a11y.translations.tableAvailable,
-				caption: z.value.a11y.translations.tableCaption
+				head: fa.value.headers,
+				body: fa.value.rows,
+				notice: R.value.a11y.translations.tableAvailable,
+				caption: R.value.a11y.translations.tableCaption
 			}, null, 8, [
 				"uid",
 				"head",
@@ -1449,15 +1788,15 @@ var N = /* @__PURE__ */ e({ default: () => On }), nt = ["id"], rt = ["id"], it =
 				"notice",
 				"caption"
 			])) : g("", !0),
-			z.value.userOptionsButtons.annotator ? (C(), Ne(O(Xe), {
+			R.value.userOptionsButtons.annotator ? (C(), Ne(O(Xe), {
 				key: 1,
-				svgRef: O(sr),
-				backgroundColor: z.value.backgroundColor,
-				color: z.value.color,
-				active: ni.value,
-				isCursorPointer: er.value,
-				palette: z.value.annotatorPalette,
-				onClose: ri
+				svgRef: O(H),
+				backgroundColor: R.value.backgroundColor,
+				color: R.value.color,
+				active: Ji.value,
+				isCursorPointer: nr.value,
+				palette: R.value.annotatorPalette,
+				onClose: Yi
 			}, {
 				"annotator-action-close": k(() => [E(e.$slots, "annotator-action-close", {}, void 0, !0)]),
 				"annotator-action-color": k(({ color: t }) => [E(e.$slots, "annotator-action-color", x(y({ color: t })), void 0, !0)]),
@@ -1474,46 +1813,46 @@ var N = /* @__PURE__ */ e({ default: () => On }), nt = ["id"], rt = ["id"], it =
 				"isCursorPointer",
 				"palette"
 			])) : g("", !0),
-			Cr.value ? (C(), _("div", {
+			Er.value ? (C(), _("div", {
 				key: 2,
 				ref_key: "noTitle",
-				ref: Pn,
+				ref: Fn,
 				class: "vue-data-ui-no-title-space",
 				style: "height:36px; width: 100%;background:transparent"
 			}, null, 512)) : g("", !0),
-			z.value.showUserOptions && (lr.value || ur.value) ? (C(), Ne(O(Qe), {
+			R.value.showUserOptions && (ur.value || dr.value) ? (C(), Ne(O(Qe), {
 				ref: "details",
-				key: `user_option_${Fn.value}`,
-				backgroundColor: z.value.backgroundColor,
-				color: z.value.color,
-				isPrinting: O(yr),
-				isImaging: O(br),
+				key: `user_option_${In.value}`,
+				backgroundColor: R.value.backgroundColor,
+				color: R.value.color,
+				isPrinting: O(Sr),
+				isImaging: O(Cr),
 				uid: P.value,
-				hasTooltip: z.value.userOptionsButtons.tooltip && z.value.showTooltip,
-				hasPdf: z.value.userOptionsButtons.pdf,
-				hasImg: z.value.userOptionsButtons.img,
-				hasSvg: z.value.userOptionsButtons.svg,
-				hasFullscreen: z.value.userOptionsButtons.fullscreen,
-				hasAltCopy: z.value.userOptionsButtons.altCopy,
+				hasTooltip: R.value.userOptionsButtons.tooltip && R.value.showTooltip,
+				hasPdf: R.value.userOptionsButtons.pdf,
+				hasImg: R.value.userOptionsButtons.img,
+				hasSvg: R.value.userOptionsButtons.svg,
+				hasFullscreen: R.value.userOptionsButtons.fullscreen,
+				hasAltCopy: R.value.userOptionsButtons.altCopy,
 				hasXls: !1,
-				isTooltip: wr.value.showTooltip,
-				isFullscreen: $r.value,
-				titles: { ...z.value.userOptionsButtonTitles },
+				isTooltip: Dr.value.showTooltip,
+				isFullscreen: Gi.value,
+				titles: { ...R.value.userOptionsButtonTitles },
 				chartElement: N.value,
-				position: z.value.userOptionsPosition,
-				hasAnnotator: z.value.userOptionsButtons.annotator,
-				isAnnotation: ni.value,
-				callbacks: z.value.userOptionsCallbacks,
-				printScale: z.value.userOptionsPrint.scale,
-				isCursorPointer: er.value,
-				onToggleFullscreen: ei,
-				onGeneratePdf: O(xr),
-				onGenerateImage: O(fi),
-				onGenerateSvg: O(di),
-				onToggleTooltip: ti,
-				onToggleAnnotator: ri,
-				onCopyAlt: pi,
-				style: S({ visibility: lr.value ? ur.value ? "visible" : "hidden" : "visible" })
+				position: R.value.userOptionsPosition,
+				hasAnnotator: R.value.userOptionsButtons.annotator,
+				isAnnotation: Ji.value,
+				callbacks: R.value.userOptionsCallbacks,
+				printScale: R.value.userOptionsPrint.scale,
+				isCursorPointer: nr.value,
+				onToggleFullscreen: Ki,
+				onGeneratePdf: O(wr),
+				onGenerateImage: O(ia),
+				onGenerateSvg: O(ra),
+				onToggleTooltip: qi,
+				onToggleAnnotator: Yi,
+				onCopyAlt: aa,
+				style: S({ visibility: ur.value ? dr.value ? "visible" : "hidden" : "visible" })
 			}, Pe({ _: 2 }, [
 				e.$slots.menuIcon ? {
 					name: "menuIcon",
@@ -1601,27 +1940,43 @@ var N = /* @__PURE__ */ e({ default: () => On }), nt = ["id"], rt = ["id"], it =
 				"onGenerateSvg",
 				"style"
 			])) : g("", !0),
-			z.value.title ? (C(), _("div", {
+			R.value.title ? (C(), _("div", {
 				key: 4,
 				ref_key: "quickChartTitle",
-				ref: On,
+				ref: kn,
 				class: "vue-ui-quick-chart-title",
-				style: S(`background:transparent;color:${z.value.color};font-size:${z.value.titleFontSize}px;font-weight:${z.value.titleBold ? "bold" : "normal"};text-align:${z.value.titleTextAlign}`)
-			}, D(z.value.title), 5)) : g("", !0),
+				style: S(`background:transparent;color:${R.value.color};font-size:${R.value.titleFontSize}px;font-weight:${R.value.titleBold ? "bold" : "normal"};text-align:${R.value.titleTextAlign}`)
+			}, D(R.value.title), 5)) : g("", !0),
 			v("div", { id: `legend-top-${P.value}` }, null, 8, it),
 			v("div", at, [G.value ? (C(), _("svg", {
 				key: 0,
 				ref_key: "svgRef",
-				ref: sr,
+				ref: H,
 				xmlns: O(se),
 				"aria-describedby": `chart-instructions-${P.value}`,
-				viewBox: Dr.value,
-				style: S(`max-width:100%;overflow:visible;background:transparent;color:${z.value.color}`),
-				class: b({ "vue-data-ui-no-transition": !O(B) }),
+				viewBox: Ar.value,
+				style: S({
+					maxWidth: "100%",
+					overflow: "visible",
+					background: "transparent",
+					color: R.value.color,
+					cursor: ti.value ? Kr.value ? "col-resize" : "crosshair" : void 0,
+					touchAction: ti.value ? "pan-y" : void 0,
+					userSelect: ti.value ? "none" : void 0
+				}),
+				class: b({
+					"vue-data-ui-no-transition": !O(z),
+					"vue-ui-quick-chart-zoom-pointer-focus": ti.value && qr.value
+				}),
 				tabindex: "0",
-				onFocus: gi,
-				onBlur: _i,
-				onKeydown: vi
+				onFocus: ca,
+				onBlur: la,
+				onKeydown: ua,
+				onPointerdown: Li,
+				onPointermove: Ri,
+				onPointerup: zi,
+				onPointercancel: Ai,
+				onClickCapture: Mi
 			}, [
 				Fe(O(Je)),
 				e.$slots["chart-background"] && G.value === A.BAR ? (C(), _("foreignObject", {
@@ -1658,7 +2013,7 @@ var N = /* @__PURE__ */ e({ default: () => On }), nt = ["id"], rt = ["id"], it =
 					in: "SourceGraphic",
 					stdDeviation: 2,
 					id: `blur_std_${P.value}`
-				}, null, 8, dt), n[4] ||= v("feColorMatrix", {
+				}, null, 8, dt), n[3] ||= v("feColorMatrix", {
 					type: "saturate",
 					values: "0"
 				}, null, -1)], 8, ut), v("filter", {
@@ -1669,35 +2024,35 @@ var N = /* @__PURE__ */ e({ default: () => On }), nt = ["id"], rt = ["id"], it =
 					dy: "0",
 					stdDeviation: "10",
 					"flood-opacity": "0.5",
-					"flood-color": z.value.donutShadowColor
+					"flood-color": R.value.donutShadowColor
 				}, null, 8, pt)], 8, ft)]),
 				G.value === A.DONUT ? (C(), _(m, { key: 3 }, [
-					z.value.showDataLabels ? (C(), _("g", mt, [(C(!0), _(m, null, T(Y.value.chart, (e, t) => (C(), _(m, null, [Y.value.isArcBigEnough(e) ? (C(), _("path", {
+					R.value.showDataLabels ? (C(), _("g", mt, [(C(!0), _(m, null, T(Y.value.chart, (e, t) => (C(), _(m, null, [Y.value.isArcBigEnough(e) ? (C(), _("path", {
 						key: 0,
 						d: O(ae)(e, {
 							x: K.value.width / 2,
 							y: K.value.height / 2
-						}, 16, 16, !1, !1, K.value.height * Lr.value, 12, z.value.donutCurvedMarkers),
+						}, 16, 16, !1, !1, K.value.height * Br.value, 12, R.value.donutCurvedMarkers),
 						stroke: e.color,
-						"stroke-width": z.value.donutLabelMarkerStrokeWidth,
+						"stroke-width": R.value.donutLabelMarkerStrokeWidth,
 						"stroke-linecap": "round",
 						"stroke-linejoin": "round",
 						fill: "none",
-						filter: kr(e.id)
+						filter: Mr(e.id)
 					}, null, 8, ht)) : g("", !0)], 64))), 256))])) : g("", !0),
 					v("circle", {
 						cx: Y.value.cx,
 						cy: Y.value.cy,
 						r: Y.value.radius,
-						fill: z.value.backgroundColor,
-						filter: z.value.donutUseShadow ? `url(#shadow_${P.value})` : ""
+						fill: R.value.backgroundColor,
+						filter: R.value.donutUseShadow ? `url(#shadow_${P.value})` : ""
 					}, null, 8, gt),
 					v("g", _t, [(C(!0), _(m, null, T(Y.value.chart, (e, t) => (C(), _("path", {
 						d: e.arcSlice,
 						fill: e.color,
-						stroke: z.value.donutStroke || z.value.backgroundColor,
-						"stroke-width": z.value.donutStrokeWidth,
-						filter: kr(e.id)
+						stroke: R.value.donutStroke || R.value.backgroundColor,
+						"stroke-width": R.value.donutStrokeWidth,
+						filter: Mr(e.id)
 					}, null, 8, vt))), 256)), (C(!0), _(m, null, T(Y.value.chart, (e, t) => (C(), _("path", {
 						d: e.arcSlice,
 						fill: "transparent",
@@ -1715,30 +2070,30 @@ var N = /* @__PURE__ */ e({ default: () => On }), nt = ["id"], rt = ["id"], it =
 							seriesIndex: t
 						})
 					}, null, 40, yt))), 256))]),
-					z.value.showDataLabels ? (C(), _("g", bt, [(C(!0), _(m, null, T(Y.value.chart, (e, n) => (C(), _(m, null, [
+					R.value.showDataLabels ? (C(), _("g", bt, [(C(!0), _(m, null, T(Y.value.chart, (e, n) => (C(), _(m, null, [
 						Y.value.isArcBigEnough(e) ? (C(), _("circle", {
 							key: 0,
 							cx: O(f)(e).x,
 							cy: O(oe)(e) - 3.7,
 							fill: e.color,
-							stroke: z.value.backgroundColor,
+							stroke: R.value.backgroundColor,
 							"stroke-width": 1,
 							r: 3,
-							filter: kr(e.id)
+							filter: Mr(e.id)
 						}, null, 8, xt)) : g("", !0),
 						Y.value.isArcBigEnough(e) ? (C(), _("text", {
 							key: 1,
 							"text-anchor": O(f)(e, !0, 20).anchor,
 							x: O(f)(e, !0).x,
 							y: O(oe)(e),
-							fill: z.value.color,
-							"font-size": z.value.dataLabelFontSize,
-							filter: kr(e.id)
-						}, D(Y.value.displayArcPercentage(e, Y.value.chart)) + " (" + D(O(p)(z.value.formatter, e.value, O(t)({
-							p: z.value.valuePrefix,
+							fill: R.value.color,
+							"font-size": R.value.dataLabelFontSize,
+							filter: Mr(e.id)
+						}, D(Y.value.displayArcPercentage(e, Y.value.chart)) + " (" + D(O(p)(R.value.formatter, e.value, O(t)({
+							p: R.value.valuePrefix,
 							v: e.value,
-							s: z.value.valueSuffix,
-							r: z.value.dataLabelRoundingValue
+							s: R.value.valueSuffix,
+							r: R.value.dataLabelRoundingValue
 						}), {
 							datapoint: e,
 							seriesIndex: n
@@ -1747,310 +2102,310 @@ var N = /* @__PURE__ */ e({ default: () => On }), nt = ["id"], rt = ["id"], it =
 							key: 2,
 							"text-anchor": O(f)(e).anchor,
 							x: O(f)(e, !0).x,
-							y: O(oe)(e) + z.value.dataLabelFontSize,
-							fill: z.value.color,
-							"font-size": z.value.dataLabelFontSize,
-							filter: kr(e.id)
+							y: O(oe)(e) + R.value.dataLabelFontSize,
+							fill: R.value.color,
+							"font-size": R.value.dataLabelFontSize,
+							filter: Mr(e.id)
 						}, D(e.name), 9, Ct)) : g("", !0)
 					], 64))), 256))])) : g("", !0),
-					z.value.donutShowTotal ? (C(), _("g", wt, [v("text", {
+					R.value.donutShowTotal ? (C(), _("g", wt, [v("text", {
 						"text-anchor": "middle",
 						x: Y.value.drawingArea.centerX,
-						y: Y.value.drawingArea.centerY - z.value.donutTotalLabelFontSize / 2,
-						"font-size": z.value.donutTotalLabelFontSize,
-						fill: z.value.color
-					}, D(z.value.donutTotalLabelText), 9, Tt), v("text", {
+						y: Y.value.drawingArea.centerY - R.value.donutTotalLabelFontSize / 2,
+						"font-size": R.value.donutTotalLabelFontSize,
+						fill: R.value.color
+					}, D(R.value.donutTotalLabelText), 9, Tt), v("text", {
 						"text-anchor": "middle",
 						x: Y.value.drawingArea.centerX,
-						y: Y.value.drawingArea.centerY + z.value.donutTotalLabelFontSize,
-						"font-size": z.value.donutTotalLabelFontSize,
-						fill: z.value.color
+						y: Y.value.drawingArea.centerY + R.value.donutTotalLabelFontSize,
+						"font-size": R.value.donutTotalLabelFontSize,
+						fill: R.value.color
 					}, D(O(t)({
-						p: z.value.valuePrefix,
+						p: R.value.valuePrefix,
 						v: Y.value.total,
-						s: z.value.valueSuffix,
-						r: z.value.dataLabelRoundingValue
+						s: R.value.valueSuffix,
+						r: R.value.dataLabelRoundingValue
 					})), 9, Et)])) : g("", !0)
 				], 64)) : g("", !0),
 				G.value === A.LINE ? (C(), _(m, { key: 4 }, [
-					z.value.xyShowGrid ? (C(), _("g", Dt, [(C(!0), _(m, null, T(Z.value.yLabels, (e) => (C(), _(m, null, [e.y <= Z.value.drawingArea.bottom ? (C(), _("line", {
+					R.value.xyShowGrid ? (C(), _("g", Dt, [(C(!0), _(m, null, T(Z.value.yLabels, (e) => (C(), _(m, null, [e.y <= Z.value.drawingArea.bottom ? (C(), _("line", {
 						key: 0,
 						x1: Z.value.drawingArea.left,
 						x2: Z.value.drawingArea.right,
 						y1: e.y,
 						y2: e.y,
-						stroke: z.value.xyGridStroke,
-						"stroke-width": z.value.xyGridStrokeWidth,
+						stroke: R.value.xyGridStroke,
+						"stroke-width": R.value.xyGridStrokeWidth,
 						"stroke-linecap": "round"
 					}, null, 8, Ot)) : g("", !0)], 64))), 256)), (C(!0), _(m, null, T(Z.value.extremes.maxSeries + 1, (e, t) => (C(), _("line", {
 						x1: Z.value.drawingArea.left + Z.value.slotSize * t,
 						x2: Z.value.drawingArea.left + Z.value.slotSize * t,
 						y1: Z.value.drawingArea.top,
 						y2: Z.value.drawingArea.bottom,
-						stroke: z.value.xyGridStroke,
-						"stroke-width": z.value.xyGridStrokeWidth,
+						stroke: R.value.xyGridStroke,
+						"stroke-width": R.value.xyGridStrokeWidth,
 						"stroke-linecap": "round"
 					}, null, 8, kt))), 256))])) : g("", !0),
-					z.value.xyShowAxis ? (C(), _("g", At, [v("line", {
+					R.value.xyShowAxis ? (C(), _("g", At, [v("line", {
 						x1: Z.value.drawingArea.left,
 						x2: Z.value.drawingArea.left,
 						y1: Z.value.drawingArea.top,
 						y2: Z.value.drawingArea.bottom,
-						stroke: z.value.xyAxisStroke,
-						"stroke-width": z.value.xyAxisStrokeWidth,
+						stroke: R.value.xyAxisStroke,
+						"stroke-width": R.value.xyAxisStrokeWidth,
 						"stroke-linecap": "round"
 					}, null, 8, jt), v("line", {
 						x1: Z.value.drawingArea.left,
 						x2: Z.value.drawingArea.right,
 						y1: isNaN(Z.value.absoluteZero) ? Z.value.drawingArea.bottom : Z.value.absoluteZero,
 						y2: isNaN(Z.value.absoluteZero) ? Z.value.drawingArea.bottom : Z.value.absoluteZero,
-						stroke: z.value.xyAxisStroke,
-						"stroke-width": z.value.xyAxisStrokeWidth,
+						stroke: R.value.xyAxisStroke,
+						"stroke-width": R.value.xyAxisStrokeWidth,
 						"stroke-linecap": "round"
 					}, null, 8, Mt)])) : g("", !0),
-					z.value.xyShowScale ? (C(), _("g", {
+					R.value.xyShowScale ? (C(), _("g", {
 						key: 2,
 						class: "yLabels",
 						ref_key: "scaleLabels",
-						ref: Bn
+						ref: Hn
 					}, [(C(!0), _(m, null, T(Z.value.yLabels, (e, n) => (C(), _(m, { key: `sl_${n}` }, [e.y <= Z.value.drawingArea.bottom ? (C(), _("path", {
 						key: 0,
-						class: b({ "vue-data-ui-transition": O(B) }),
+						class: b({ "vue-data-ui-transition": O(z) }),
 						d: `M${e.x + 4},${e.y} ${Z.value.drawingArea.left},${e.y}`,
-						stroke: z.value.xyAxisStroke,
-						"stroke-width": z.value.xyAxisStrokeWidth,
+						stroke: R.value.xyAxisStroke,
+						"stroke-width": R.value.xyAxisStrokeWidth,
 						"stroke-linecap": "round"
 					}, null, 10, Nt)) : g("", !0), e.y <= Z.value.drawingArea.bottom ? (C(), _("text", {
 						key: 1,
-						class: b({ "vue-data-ui-transition": O(B) }),
-						transform: `translate(${e.x}, ${e.y + z.value.xyLabelsYFontSize / 3})`,
+						class: b({ "vue-data-ui-transition": O(z) }),
+						transform: `translate(${e.x}, ${e.y + R.value.xyLabelsYFontSize / 3})`,
 						"text-anchor": "end",
-						"font-size": z.value.xyLabelsYFontSize,
-						fill: z.value.color
-					}, D(O(p)(z.value.formatter, e.value, O(t)({
-						p: z.value.valuePrefix,
+						"font-size": R.value.xyLabelsYFontSize,
+						fill: R.value.color
+					}, D(O(p)(R.value.formatter, e.value, O(t)({
+						p: R.value.valuePrefix,
 						v: e.value,
-						s: z.value.valueSuffix,
-						r: z.value.dataLabelRoundingValue
+						s: R.value.valueSuffix,
+						r: R.value.dataLabelRoundingValue
 					}), {
 						datapoint: e,
 						seriesIndex: n
 					})), 11, Pt)) : g("", !0)], 64))), 128))], 512)) : g("", !0),
-					z.value.xyShowScale && z.value.xyPeriods.length ? (C(), _("g", Ft, [(C(!0), _(m, null, T($.value.map((e) => e.text), (e, t) => (C(), _(m, null, [!z.value.xyPeriodsShowOnlyAtModulo || z.value.xyPeriodsShowOnlyAtModulo && t % Math.floor((X.value.end - X.value.start) / Qr.value) === 0 || X.value.end - X.value.start <= Qr.value ? (C(), _("line", {
+					R.value.xyShowScale && R.value.xyPeriods.length ? (C(), _("g", Ft, [(C(!0), _(m, null, T($.value.map((e) => e.text), (e, t) => (C(), _(m, null, [!R.value.xyPeriodsShowOnlyAtModulo || R.value.xyPeriodsShowOnlyAtModulo && t % Math.floor((X.value.end - X.value.start) / Wi.value) === 0 || X.value.end - X.value.start <= Wi.value ? (C(), _("line", {
 						key: 0,
 						x1: Z.value.drawingArea.left + Z.value.slotSize * (t + 1) - Z.value.slotSize / 2,
 						x2: Z.value.drawingArea.left + Z.value.slotSize * (t + 1) - Z.value.slotSize / 2,
 						y1: Z.value.drawingArea.bottom,
 						y2: Z.value.drawingArea.bottom + 4,
-						stroke: z.value.xyAxisStroke,
-						"stroke-width": z.value.xyAxisStrokeWidth,
+						stroke: R.value.xyAxisStroke,
+						"stroke-width": R.value.xyAxisStrokeWidth,
 						"stroke-linecap": "round"
 					}, null, 8, It)) : g("", !0)], 64))), 256)), v("g", {
 						ref_key: "timeLabelsEls",
-						ref: R
-					}, [(C(!0), _(m, null, T($.value.map((e) => e.text), (e, t) => (C(), _(m, null, [!z.value.xyPeriodsShowOnlyAtModulo || z.value.xyPeriodsShowOnlyAtModulo && t % Math.floor((X.value.end - X.value.start) / Qr.value) === 0 || X.value.end - X.value.start <= Qr.value ? (C(), _("g", Lt, [String(e).includes("\n") ? (C(), _("text", {
+						ref: Vn
+					}, [(C(!0), _(m, null, T($.value.map((e) => e.text), (e, t) => (C(), _(m, null, [!R.value.xyPeriodsShowOnlyAtModulo || R.value.xyPeriodsShowOnlyAtModulo && t % Math.floor((X.value.end - X.value.start) / Wi.value) === 0 || X.value.end - X.value.start <= Wi.value ? (C(), _("g", Lt, [String(e).includes("\n") ? (C(), _("text", {
 						key: 1,
 						class: "vue-data-ui-time-label",
-						"font-size": z.value.xyLabelsXFontSize,
-						"text-anchor": z.value.xyPeriodLabelsRotation > 0 ? "start" : z.value.xyPeriodLabelsRotation < 0 ? "end" : "middle",
-						fill: z.value.color,
-						transform: `translate(${Z.value.drawingArea.left + Z.value.slotSize * (t + 1) - Z.value.slotSize / 2}, ${Z.value.drawingArea.bottom + z.value.xyLabelsXFontSize + 6}), rotate(${z.value.xyPeriodLabelsRotation})`,
+						"font-size": R.value.xyLabelsXFontSize,
+						"text-anchor": R.value.xyPeriodLabelsRotation > 0 ? "start" : R.value.xyPeriodLabelsRotation < 0 ? "end" : "middle",
+						fill: R.value.color,
+						transform: `translate(${Z.value.drawingArea.left + Z.value.slotSize * (t + 1) - Z.value.slotSize / 2}, ${Z.value.drawingArea.bottom + R.value.xyLabelsXFontSize + 6}), rotate(${R.value.xyPeriodLabelsRotation})`,
 						innerHTML: O(o)({
 							content: String(e),
-							fontSize: z.value.xyLabelsXFontSize,
-							fill: z.value.color,
+							fontSize: R.value.xyLabelsXFontSize,
+							fill: R.value.color,
 							x: 0,
 							y: 0
 						})
 					}, null, 8, zt)) : (C(), _("text", {
 						key: 0,
 						class: "vue-data-ui-time-label",
-						"font-size": z.value.xyLabelsXFontSize,
-						"text-anchor": z.value.xyPeriodLabelsRotation > 0 ? "start" : z.value.xyPeriodLabelsRotation < 0 ? "end" : "middle",
-						fill: z.value.color,
-						transform: `translate(${Z.value.drawingArea.left + Z.value.slotSize * (t + 1) - Z.value.slotSize / 2}, ${Z.value.drawingArea.bottom + z.value.xyLabelsXFontSize + 6}), rotate(${z.value.xyPeriodLabelsRotation})`
+						"font-size": R.value.xyLabelsXFontSize,
+						"text-anchor": R.value.xyPeriodLabelsRotation > 0 ? "start" : R.value.xyPeriodLabelsRotation < 0 ? "end" : "middle",
+						fill: R.value.color,
+						transform: `translate(${Z.value.drawingArea.left + Z.value.slotSize * (t + 1) - Z.value.slotSize / 2}, ${Z.value.drawingArea.bottom + R.value.xyLabelsXFontSize + 6}), rotate(${R.value.xyPeriodLabelsRotation})`
 					}, D(e), 9, Rt))])) : g("", !0)], 64))), 256))], 512)])) : g("", !0),
 					v("g", Bt, [(C(!0), _(m, null, T(Z.value.dataset, (e, t) => (C(), _("g", {
 						key: `serie_${e.id}`,
 						class: "line-plot-series"
-					}, [z.value.lineSmooth ? (C(), _(m, { key: 0 }, [v("path", {
+					}, [R.value.lineSmooth ? (C(), _(m, { key: 0 }, [v("path", {
 						ref_for: !0,
 						ref_key: "pathWrapper",
-						ref: Rn,
+						ref: zn,
 						d: `M ${O(s)(e.coordinates)}`,
-						stroke: z.value.backgroundColor,
-						"stroke-width": z.value.lineStrokeWidth + 1,
+						stroke: R.value.backgroundColor,
+						"stroke-width": R.value.lineStrokeWidth + 1,
 						"stroke-linecap": "round",
 						fill: "none",
-						class: b({ "vue-data-ui-transition": O(B) })
+						class: b({ "vue-data-ui-transition": O(z) })
 					}, null, 10, Vt), v("path", {
 						ref_for: !0,
 						ref_key: "pathTop",
-						ref: zn,
+						ref: Bn,
 						d: `M ${O(s)(e.coordinates)}`,
 						stroke: e.color,
-						"stroke-width": z.value.lineStrokeWidth,
+						"stroke-width": R.value.lineStrokeWidth,
 						"stroke-linecap": "round",
 						fill: "none",
-						class: b({ "vue-data-ui-transition": O(B) }),
-						style: S({ transition: O(ir) ? void 0 : "all 0.2s ease-in-out" })
+						class: b({ "vue-data-ui-transition": O(z) }),
+						style: S({ transition: O(or) ? void 0 : "all 0.2s ease-in-out" })
 					}, null, 14, Ht)], 64)) : (C(), _(m, { key: 1 }, [v("path", {
 						ref_for: !0,
 						ref_key: "pathWrapper",
-						ref: Rn,
+						ref: zn,
 						d: `M ${e.linePath}`,
-						stroke: z.value.backgroundColor,
-						"stroke-width": z.value.lineStrokeWidth + 1,
+						stroke: R.value.backgroundColor,
+						"stroke-width": R.value.lineStrokeWidth + 1,
 						"stroke-linecap": "round",
 						fill: "none",
-						class: b({ "vue-data-ui-transition": O(B) })
+						class: b({ "vue-data-ui-transition": O(z) })
 					}, null, 10, Ut), v("path", {
 						ref_for: !0,
 						ref_key: "pathTop",
-						ref: zn,
+						ref: Bn,
 						d: `M ${e.linePath}`,
 						stroke: e.color,
-						"stroke-width": z.value.lineStrokeWidth,
+						"stroke-width": R.value.lineStrokeWidth,
 						"stroke-linecap": "round",
 						fill: "none",
-						class: b({ "vue-data-ui-transition": O(B) })
+						class: b({ "vue-data-ui-transition": O(z) })
 					}, null, 10, Wt)], 64)), (C(!0), _(m, null, T(e.coordinates, (t, n) => (C(), _("circle", {
 						key: `dp_${e.id}_${n + X.value.start}`,
 						cx: t.x,
 						cy: O(d)(t.y),
 						r: 3,
 						fill: e.color,
-						stroke: z.value.backgroundColor,
+						stroke: R.value.backgroundColor,
 						"stroke-width": "0.5",
 						class: b({
 							"vue-ui-quick-chart-plot": !0,
-							"vue-data-ui-transition": O(B)
+							"vue-data-ui-transition": O(z)
 						})
 					}, null, 10, Gt))), 128))]))), 128))]),
-					z.value.showDataLabels ? (C(), _("g", Kt, [(C(!0), _(m, null, T(Z.value.dataset, (e, n) => (C(), _(m, { key: `ds_${e.id}` }, [(C(!0), _(m, null, T(e.coordinates, (n, r) => (C(), _("text", {
-						class: b(["vue-ui-quick-chart-label", { "vue-data-ui-transition": O(B) }]),
+					R.value.showDataLabels ? (C(), _("g", Kt, [(C(!0), _(m, null, T(Z.value.dataset, (e, n) => (C(), _(m, { key: `ds_${e.id}` }, [(C(!0), _(m, null, T(e.coordinates, (n, r) => (C(), _("text", {
+						class: b(["vue-ui-quick-chart-label", { "vue-data-ui-transition": O(z) }]),
 						key: `plot_${e.id}_${r + X.value.start}`,
 						"text-anchor": "middle",
-						"font-size": z.value.dataLabelFontSize,
+						"font-size": R.value.dataLabelFontSize,
 						fill: e.color,
-						transform: `translate(${n.x}, ${O(d)(n.y) - z.value.dataLabelFontSize / 2})`
-					}, D(O(p)(z.value.formatter, O(d)(n.value), O(t)({
-						p: z.value.valuePrefix,
+						transform: `translate(${n.x}, ${O(d)(n.y) - R.value.dataLabelFontSize / 2})`
+					}, D(O(p)(R.value.formatter, O(d)(n.value), O(t)({
+						p: R.value.valuePrefix,
 						v: O(d)(n.value),
-						s: z.value.valueSuffix,
-						r: z.value.dataLabelRoundingValue
+						s: R.value.valueSuffix,
+						r: R.value.dataLabelRoundingValue
 					}), {
 						datapoint: n,
 						seriesIndex: r
 					})), 11, qt))), 128))], 64))), 128))])) : g("", !0),
-					dr.value ? (C(), _("g", Jt, [(C(!0), _(m, null, T(Z.value.extremes.maxSeries, (e, t) => (C(), _("rect", {
+					fr.value ? (C(), _("g", Jt, [(C(!0), _(m, null, T(Z.value.extremes.maxSeries, (e, t) => (C(), _("rect", {
 						x: Z.value.drawingArea.left + t * Z.value.slotSize,
 						y: Z.value.drawingArea.top,
 						height: Z.value.drawingArea.height <= 0 ? 1e-5 : Z.value.drawingArea.height,
 						width: Z.value.slotSize <= 0 ? 1e-5 : Z.value.slotSize,
-						fill: [I.value, J.value].includes(t) ? z.value.xyHighlighterColor : "transparent",
-						style: S(`opacity:${z.value.xyHighlighterOpacity}`),
+						fill: [I.value, J.value].includes(t) ? R.value.xyHighlighterColor : "transparent",
+						style: S(`opacity:${R.value.xyHighlighterOpacity}`),
 						onMouseenter: (e) => Z.value.useTooltip(t, "pointer"),
 						onMouseleave: (e) => Z.value.killTooltip(t),
 						onClick: (e) => Z.value.selectDatapoint(t)
 					}, null, 44, Yt))), 256))])) : g("", !0)
 				], 64)) : g("", !0),
 				G.value === A.BAR ? (C(), _(m, { key: 5 }, [
-					z.value.xyShowGrid ? (C(), _("g", Xt, [(C(!0), _(m, null, T(Q.value.yLabels, (e) => (C(), _(m, null, [e.y <= Q.value.drawingArea.bottom ? (C(), _("line", {
+					R.value.xyShowGrid ? (C(), _("g", Xt, [(C(!0), _(m, null, T(Q.value.yLabels, (e) => (C(), _(m, null, [e.y <= Q.value.drawingArea.bottom ? (C(), _("line", {
 						key: 0,
 						x1: Q.value.drawingArea.left,
 						x2: Q.value.drawingArea.right,
 						y1: e.y,
 						y2: e.y,
-						stroke: z.value.xyGridStroke,
-						"stroke-width": z.value.xyGridStrokeWidth,
+						stroke: R.value.xyGridStroke,
+						"stroke-width": R.value.xyGridStrokeWidth,
 						"stroke-linecap": "round"
 					}, null, 8, Zt)) : g("", !0)], 64))), 256)), L.value.length < Q.value.legend.length ? (C(!0), _(m, { key: 0 }, T(Q.value.extremes.maxSeries + 1, (e, t) => (C(), _("line", {
 						x1: Q.value.drawingArea.left + Q.value.slotSize * t,
 						x2: Q.value.drawingArea.left + Q.value.slotSize * t,
 						y1: Q.value.drawingArea.top,
 						y2: Q.value.drawingArea.bottom,
-						stroke: z.value.xyGridStroke,
-						"stroke-width": z.value.xyGridStrokeWidth,
+						stroke: R.value.xyGridStroke,
+						"stroke-width": R.value.xyGridStrokeWidth,
 						"stroke-linecap": "round"
 					}, null, 8, Qt))), 256)) : g("", !0)])) : g("", !0),
-					z.value.xyShowAxis ? (C(), _("g", $t, [v("line", {
+					R.value.xyShowAxis ? (C(), _("g", $t, [v("line", {
 						x1: Q.value.drawingArea.left,
 						x2: Q.value.drawingArea.left,
 						y1: Q.value.drawingArea.top,
 						y2: Q.value.drawingArea.bottom,
-						stroke: z.value.xyAxisStroke,
-						"stroke-width": z.value.xyAxisStrokeWidth,
+						stroke: R.value.xyAxisStroke,
+						"stroke-width": R.value.xyAxisStrokeWidth,
 						"stroke-linecap": "round"
 					}, null, 8, en), v("line", {
 						x1: Q.value.drawingArea.left,
 						x2: Q.value.drawingArea.right,
 						y1: isNaN(Q.value.absoluteZero) ? Q.value.drawingArea.bottom : Q.value.absoluteZero,
 						y2: isNaN(Q.value.absoluteZero) ? Q.value.drawingArea.bottom : Q.value.absoluteZero,
-						stroke: z.value.xyAxisStroke,
-						"stroke-width": z.value.xyAxisStrokeWidth,
+						stroke: R.value.xyAxisStroke,
+						"stroke-width": R.value.xyAxisStrokeWidth,
 						"stroke-linecap": "round"
 					}, null, 8, tn)])) : g("", !0),
-					z.value.xyShowScale ? (C(), _("g", {
+					R.value.xyShowScale ? (C(), _("g", {
 						key: 2,
 						class: "yLabels",
 						ref_key: "scaleLabels",
-						ref: Bn
+						ref: Hn
 					}, [(C(!0), _(m, null, T(Q.value.yLabels, (e, n) => (C(), _(m, { key: `sl_${n}` }, [e.y <= Q.value.drawingArea.bottom ? (C(), _("path", {
 						key: 0,
-						class: b({ "vue-data-ui-transition": O(B) }),
+						class: b({ "vue-data-ui-transition": O(z) }),
 						d: `M${e.x + 4},${e.y} ${Q.value.drawingArea.left},${e.y}`,
-						stroke: z.value.xyAxisStroke,
-						"stroke-width": z.value.xyAxisStrokeWidth,
+						stroke: R.value.xyAxisStroke,
+						"stroke-width": R.value.xyAxisStrokeWidth,
 						"stroke-linecap": "round"
 					}, null, 10, nn)) : g("", !0), e.y <= Q.value.drawingArea.bottom ? (C(), _("text", {
 						key: 1,
-						class: b({ "vue-data-ui-transition": O(B) }),
-						transform: `translate(${e.x}, ${e.y + z.value.xyLabelsYFontSize / 3})`,
+						class: b({ "vue-data-ui-transition": O(z) }),
+						transform: `translate(${e.x}, ${e.y + R.value.xyLabelsYFontSize / 3})`,
 						"text-anchor": "end",
-						"font-size": z.value.xyLabelsYFontSize,
-						fill: z.value.color
-					}, D(O(p)(z.value.formatter, e.value, O(t)({
-						p: z.value.valuePrefix,
+						"font-size": R.value.xyLabelsYFontSize,
+						fill: R.value.color
+					}, D(O(p)(R.value.formatter, e.value, O(t)({
+						p: R.value.valuePrefix,
 						v: e.value,
-						s: z.value.valueSuffix,
-						r: z.value.dataLabelRoundingValue
+						s: R.value.valueSuffix,
+						r: R.value.dataLabelRoundingValue
 					}), {
 						datapoint: e,
 						seriesIndex: n
 					})), 11, rn)) : g("", !0)], 64))), 128))], 512)) : g("", !0),
-					z.value.xyShowScale && z.value.xyPeriods.length ? (C(), _("g", an, [(C(!0), _(m, null, T(z.value.xyPeriods.slice(X.value.start, X.value.end), (e, t) => (C(), _("line", {
+					R.value.xyShowScale && R.value.xyPeriods.length ? (C(), _("g", an, [(C(!0), _(m, null, T(R.value.xyPeriods.slice(X.value.start, X.value.end), (e, t) => (C(), _("line", {
 						x1: Q.value.drawingArea.left + Q.value.slotSize * (t + 1) - Q.value.slotSize / 2,
 						x2: Q.value.drawingArea.left + Q.value.slotSize * (t + 1) - Q.value.slotSize / 2,
 						y1: Q.value.drawingArea.bottom,
 						y2: Q.value.drawingArea.bottom + 4,
-						stroke: z.value.xyAxisStroke,
-						"stroke-width": z.value.xyAxisStrokeWidth,
+						stroke: R.value.xyAxisStroke,
+						"stroke-width": R.value.xyAxisStrokeWidth,
 						"stroke-linecap": "round"
 					}, null, 8, on))), 256)), v("g", {
 						ref_key: "timeLabelsEls",
-						ref: R
-					}, [(C(!0), _(m, null, T($.value.map((e) => e.text), (e, t) => (C(), _(m, null, [!z.value.xyPeriodsShowOnlyAtModulo || z.value.xyPeriodsShowOnlyAtModulo && t % Math.floor((X.value.end - X.value.start) / Qr.value) === 0 || X.value.end - X.value.start <= Qr.value ? (C(), _("g", sn, [String(e).includes("\n") ? (C(), _("text", {
+						ref: Vn
+					}, [(C(!0), _(m, null, T($.value.map((e) => e.text), (e, t) => (C(), _(m, null, [!R.value.xyPeriodsShowOnlyAtModulo || R.value.xyPeriodsShowOnlyAtModulo && t % Math.floor((X.value.end - X.value.start) / Wi.value) === 0 || X.value.end - X.value.start <= Wi.value ? (C(), _("g", sn, [String(e).includes("\n") ? (C(), _("text", {
 						key: 1,
 						class: "vue-data-ui-time-label",
-						"font-size": z.value.xyLabelsXFontSize,
-						"text-anchor": z.value.xyPeriodLabelsRotation > 0 ? "start" : z.value.xyPeriodLabelsRotation < 0 ? "end" : "middle",
-						fill: z.value.color,
-						transform: `translate(${Q.value.drawingArea.left + Q.value.slotSize * (t + 1) - Q.value.slotSize / 2}, ${Q.value.drawingArea.bottom + z.value.xyLabelsXFontSize + 6}), rotate(${z.value.xyPeriodLabelsRotation})`,
+						"font-size": R.value.xyLabelsXFontSize,
+						"text-anchor": R.value.xyPeriodLabelsRotation > 0 ? "start" : R.value.xyPeriodLabelsRotation < 0 ? "end" : "middle",
+						fill: R.value.color,
+						transform: `translate(${Q.value.drawingArea.left + Q.value.slotSize * (t + 1) - Q.value.slotSize / 2}, ${Q.value.drawingArea.bottom + R.value.xyLabelsXFontSize + 6}), rotate(${R.value.xyPeriodLabelsRotation})`,
 						innerHTML: O(o)({
 							content: String(e),
-							fontSize: z.value.xyLabelsXFontSize,
-							fill: z.value.color,
+							fontSize: R.value.xyLabelsXFontSize,
+							fill: R.value.color,
 							x: 0,
 							y: 0
 						})
 					}, null, 8, ln)) : (C(), _("text", {
 						key: 0,
 						class: "vue-data-ui-time-label",
-						"font-size": z.value.xyLabelsXFontSize,
-						"text-anchor": z.value.xyPeriodLabelsRotation > 0 ? "start" : z.value.xyPeriodLabelsRotation < 0 ? "end" : "middle",
-						fill: z.value.color,
-						transform: `translate(${Q.value.drawingArea.left + Q.value.slotSize * (t + 1) - Q.value.slotSize / 2}, ${Q.value.drawingArea.bottom + z.value.xyLabelsXFontSize + 6}), rotate(${z.value.xyPeriodLabelsRotation})`
+						"font-size": R.value.xyLabelsXFontSize,
+						"text-anchor": R.value.xyPeriodLabelsRotation > 0 ? "start" : R.value.xyPeriodLabelsRotation < 0 ? "end" : "middle",
+						fill: R.value.color,
+						transform: `translate(${Q.value.drawingArea.left + Q.value.slotSize * (t + 1) - Q.value.slotSize / 2}, ${Q.value.drawingArea.bottom + R.value.xyLabelsXFontSize + 6}), rotate(${R.value.xyPeriodLabelsRotation})`
 					}, D(e), 9, cn))])) : g("", !0)], 64))), 256))], 512)])) : g("", !0),
 					v("g", un, [(C(!0), _(m, null, T(Q.value.dataset, (e, t) => (C(), _(m, null, [(C(!0), _(m, null, T(e.coordinates, (t, n) => (C(), _("rect", {
 						x: t.x,
@@ -2058,166 +2413,183 @@ var N = /* @__PURE__ */ e({ default: () => On }), nt = ["id"], rt = ["id"], it =
 						height: O(d)(t.height <= 0 ? 1e-5 : t.height),
 						y: O(d)(t.y),
 						fill: e.color,
-						stroke: z.value.backgroundColor,
-						"stroke-width": z.value.barStrokeWidth,
+						stroke: R.value.backgroundColor,
+						"stroke-width": R.value.barStrokeWidth,
 						"stroke-linecap": "round",
-						class: b({ "vue-data-ui-transition": O(B) })
+						class: b({ "vue-data-ui-transition": O(z) })
 					}, null, 10, dn))), 256))], 64))), 256))]),
-					z.value.showDataLabels ? (C(), _("g", fn, [(C(!0), _(m, null, T(Q.value.dataset, (e, n) => (C(), _(m, { key: `ds_${e.id}` }, [(C(!0), _(m, null, T(e.coordinates, (n, r) => (C(), _("text", {
-						class: b({ "vue-data-ui-transition": O(B) }),
+					R.value.showDataLabels ? (C(), _("g", fn, [(C(!0), _(m, null, T(Q.value.dataset, (e, n) => (C(), _(m, { key: `ds_${e.id}` }, [(C(!0), _(m, null, T(e.coordinates, (n, r) => (C(), _("text", {
+						class: b({ "vue-data-ui-transition": O(z) }),
 						key: `plot_${r + X.value.start}`,
-						transform: `translate(${n.x + n.width / 2}, ${O(d)(n.y) - z.value.dataLabelFontSize / 2})`,
+						transform: `translate(${n.x + n.width / 2}, ${O(d)(n.y) - R.value.dataLabelFontSize / 2})`,
 						"text-anchor": "middle",
-						"font-size": z.value.dataLabelFontSize,
+						"font-size": R.value.dataLabelFontSize,
 						fill: e.color
-					}, D(O(p)(z.value.formatter, O(d)(n.value), O(t)({
-						p: z.value.valuePrefix,
+					}, D(O(p)(R.value.formatter, O(d)(n.value), O(t)({
+						p: R.value.valuePrefix,
 						v: O(d)(n.value),
-						s: z.value.valueSuffix,
-						r: z.value.dataLabelRoundingValue
+						s: R.value.valueSuffix,
+						r: R.value.dataLabelRoundingValue
 					}), {
 						datapoint: n,
 						seriesIndex: r
 					})), 11, pn))), 128))], 64))), 128))])) : g("", !0),
-					dr.value && L.value.length < Q.value.legend.length ? (C(), _("g", mn, [(C(!0), _(m, null, T(Q.value.extremes.maxSeries, (e, t) => (C(), _("rect", {
+					fr.value && L.value.length < Q.value.legend.length ? (C(), _("g", mn, [(C(!0), _(m, null, T(Q.value.extremes.maxSeries, (e, t) => (C(), _("rect", {
 						x: Q.value.drawingArea.left + t * Q.value.slotSize,
 						y: Q.value.drawingArea.top,
 						height: Q.value.drawingArea.height <= 0 ? 1e-5 : Q.value.drawingArea.height,
 						width: Q.value.slotSize <= 0 ? 1e-5 : Q.value.slotSize,
-						fill: [I.value, J.value].includes(t) ? z.value.xyHighlighterColor : "transparent",
-						style: S(`opacity:${z.value.xyHighlighterOpacity}`),
+						fill: [I.value, J.value].includes(t) ? R.value.xyHighlighterColor : "transparent",
+						style: S(`opacity:${R.value.xyHighlighterOpacity}`),
 						onMouseenter: (e) => Q.value.useTooltip(t, "pointer"),
 						onMouseleave: (e) => Q.value.killTooltip(t),
 						onClick: (e) => Q.value.selectDatapoint(t)
 					}, null, 44, hn))), 256))])) : g("", !0)
 				], 64)) : g("", !0),
 				[A.LINE, A.BAR].includes(G.value) ? (C(), _("g", gn, [
-					z.value.xAxisLabel && G.value === A.LINE ? (C(), _("g", {
+					R.value.xAxisLabel && G.value === A.LINE ? (C(), _("g", {
 						key: 0,
 						ref_key: "xAxisLabel",
-						ref: Vn
+						ref: Un
 					}, [v("text", {
-						"font-size": z.value.axisLabelsFontSize,
-						fill: z.value.color,
+						"font-size": R.value.axisLabelsFontSize,
+						fill: R.value.color,
 						"text-anchor": "middle",
 						x: Z.value.drawingArea.left + Z.value.drawingArea.width / 2,
-						y: K.value.height - z.value.axisLabelsFontSize / 3
-					}, D(z.value.xAxisLabel), 9, _n)], 512)) : g("", !0),
-					z.value.xAxisLabel && G.value === A.BAR ? (C(), _("g", {
+						y: K.value.height - R.value.axisLabelsFontSize / 3
+					}, D(R.value.xAxisLabel), 9, _n)], 512)) : g("", !0),
+					R.value.xAxisLabel && G.value === A.BAR ? (C(), _("g", {
 						key: 1,
 						ref_key: "xAxisLabel",
-						ref: Vn
+						ref: Un
 					}, [v("text", {
-						"font-size": z.value.axisLabelsFontSize,
-						fill: z.value.color,
+						"font-size": R.value.axisLabelsFontSize,
+						fill: R.value.color,
 						"text-anchor": "middle",
 						x: Q.value.drawingArea.left + Q.value.drawingArea.width / 2,
-						y: K.value.height - z.value.axisLabelsFontSize / 3
-					}, D(z.value.xAxisLabel), 9, vn)], 512)) : g("", !0),
-					z.value.yAxisLabel && G.value === A.LINE ? (C(), _("g", {
+						y: K.value.height - R.value.axisLabelsFontSize / 3
+					}, D(R.value.xAxisLabel), 9, vn)], 512)) : g("", !0),
+					R.value.yAxisLabel && G.value === A.LINE ? (C(), _("g", {
 						key: 2,
 						ref_key: "yAxisLabel",
-						ref: Hn
+						ref: Wn
 					}, [v("text", {
-						"font-size": z.value.axisLabelsFontSize,
-						fill: z.value.color,
-						transform: `translate(${z.value.axisLabelsFontSize}, ${Z.value.drawingArea.top + Z.value.drawingArea.height / 2}) rotate(-90)`,
+						"font-size": R.value.axisLabelsFontSize,
+						fill: R.value.color,
+						transform: `translate(${R.value.axisLabelsFontSize}, ${Z.value.drawingArea.top + Z.value.drawingArea.height / 2}) rotate(-90)`,
 						"text-anchor": "middle"
-					}, D(z.value.yAxisLabel), 9, yn)], 512)) : g("", !0),
-					z.value.yAxisLabel && G.value === A.BAR ? (C(), _("g", {
+					}, D(R.value.yAxisLabel), 9, yn)], 512)) : g("", !0),
+					R.value.yAxisLabel && G.value === A.BAR ? (C(), _("g", {
 						key: 3,
 						ref_key: "yAxisLabel",
-						ref: Hn
+						ref: Wn
 					}, [v("text", {
-						"font-size": z.value.axisLabelsFontSize,
-						fill: z.value.color,
-						transform: `translate(${z.value.axisLabelsFontSize}, ${Q.value.drawingArea.top + Q.value.drawingArea.height / 2}) rotate(-90)`,
+						"font-size": R.value.axisLabelsFontSize,
+						fill: R.value.color,
+						transform: `translate(${R.value.axisLabelsFontSize}, ${Q.value.drawingArea.top + Q.value.drawingArea.height / 2}) rotate(-90)`,
 						"text-anchor": "middle"
-					}, D(z.value.yAxisLabel), 9, bn)], 512)) : g("", !0)
-				])) : g("", !0)
-			], 46, ot)) : g("", !0), e.$slots.hint ? (C(), _("div", xn, [E(e.$slots, "hint", x(y({
-				hint: z.value.a11y.translations.keyboardNavigation,
-				isVisible: nr.value
+					}, D(R.value.yAxisLabel), 9, bn)], 512)) : g("", !0)
+				])) : g("", !0),
+				Ti.value ? (C(), _("rect", {
+					key: 7,
+					x: Ti.value.x,
+					y: Ti.value.y,
+					width: Ti.value.width,
+					height: Ti.value.height,
+					fill: ei.value.selection.fill,
+					"fill-opacity": ei.value.selection.fillOpacity,
+					stroke: ei.value.selection.stroke,
+					"stroke-opacity": ei.value.selection.strokeOpacity,
+					"stroke-width": ei.value.selection.strokeWidth,
+					"stroke-dasharray": ei.value.selection.strokeDasharray,
+					"stroke-linecap": "round",
+					"stroke-linejoin": "round",
+					"pointer-events": "none"
+				}, null, 8, xn)) : g("", !0)
+			], 46, ot)) : g("", !0), e.$slots.hint ? (C(), _("div", Sn, [E(e.$slots, "hint", x(y({
+				hint: R.value.a11y.translations.keyboardNavigation,
+				isVisible: ir.value
 			})), void 0, !0)])) : g("", !0)]),
-			e.$slots.watermark ? (C(), _("div", Sn, [E(e.$slots, "watermark", x(y({ isPrinting: O(yr) || O(br) })), void 0, !0)])) : g("", !0),
-			[A.BAR, A.LINE].includes(G.value) && z.value.zoomXy && W.value.maxSeriesLength > 1 ? (C(), _("div", {
-				key: `slicer_${In.value}`,
+			e.$slots.watermark ? (C(), _("div", Cn, [E(e.$slots, "watermark", x(y({ isPrinting: O(Sr) || O(Cr) })), void 0, !0)])) : g("", !0),
+			xr.value ? (C(), _("div", {
+				key: `slicer_${Ln.value}`,
 				ref_key: "quickChartSlicer",
-				ref: An
+				ref: jn
 			}, [(C(), Ne(De, {
 				ref_key: "slicerComponent",
-				ref: zr,
-				key: `slicer_${In.value}`,
+				ref: Hr,
+				key: `slicer_${Ln.value}`,
 				timeLabels: $.value,
-				background: z.value.zoomColor,
-				borderColor: z.value.backgroundColor,
-				fontSize: z.value.zoomFontSize,
-				useResetSlot: z.value.zoomUseResetSlot,
-				textColor: z.value.color,
-				inputColor: z.value.zoomColor,
-				selectColor: z.value.zoomHighlightColor,
+				background: R.value.zoomColor,
+				borderColor: R.value.backgroundColor,
+				fontSize: R.value.zoomFontSize,
+				useResetSlot: R.value.zoomUseResetSlot,
+				textColor: R.value.color,
+				inputColor: R.value.zoomColor,
+				selectColor: R.value.zoomHighlightColor,
 				max: W.value.maxSeriesLength,
 				min: 0,
 				valueStart: X.value.start,
 				valueEnd: X.value.end,
-				smoothMinimap: z.value.zoomMinimap.smooth,
-				minimapSelectedColor: z.value.zoomMinimap.selectedColor,
-				minimapSelectedColorOpacity: z.value.zoomMinimap.selectedColorOpacity,
-				minimapSelectionRadius: z.value.zoomMinimap.selectionRadius,
-				minimapLineColor: z.value.zoomMinimap.lineColor,
-				minimap: Hr.value,
-				minimapIndicatorColor: z.value.zoomMinimap.indicatorColor,
-				verticalHandles: z.value.zoomMinimap.verticalHandles,
+				smoothMinimap: R.value.zoomMinimap.smooth,
+				minimapSelectedColor: R.value.zoomMinimap.selectedColor,
+				minimapSelectedColorOpacity: R.value.zoomMinimap.selectedColorOpacity,
+				minimapSelectionRadius: R.value.zoomMinimap.selectionRadius,
+				minimapLineColor: R.value.zoomMinimap.lineColor,
+				minimap: _i.value,
+				minimapIndicatorColor: R.value.zoomMinimap.indicatorColor,
+				verticalHandles: R.value.zoomMinimap.verticalHandles,
 				minimapSelectedIndex: J.value,
-				start: X.value.start,
-				"onUpdate:start": n[0] ||= (e) => X.value.start = e,
-				end: X.value.end,
-				"onUpdate:end": n[1] ||= (e) => X.value.end = e,
-				refreshStartPoint: z.value.zoomStartIndex === null ? 0 : z.value.zoomStartIndex,
-				refreshEndPoint: z.value.zoomEndIndex === null ? W.value.maxSeriesLength : z.value.zoomEndIndex + 1,
-				enableRangeHandles: z.value.zoomEnableRangeHandles,
-				enableSelectionDrag: z.value.zoomEnableSelectionDrag,
-				minimapCompact: z.value.zoomMinimap.compact,
-				minimapMerged: z.value.zoomMinimap.merged,
-				allMinimaps: Xr.value,
-				minimapFrameColor: z.value.zoomMinimap.frameColor,
-				additionalMinimapHeight: z.value.zoomMinimap.additionalHeight,
-				handleType: z.value.zoomMinimap.handleType,
-				handleWidth: z.value.zoomMinimap.handleWidth,
-				handleBorderWidth: z.value.zoomMinimap.handleBorderWidth,
-				handleIconColor: z.value.zoomMinimap.handleIconColor,
-				handleBorderColor: z.value.zoomMinimap.handleBorderColor,
-				handleFill: z.value.zoomMinimap.handleFill,
-				focusOnDrag: z.value.zoomFocusOnDrag,
-				focusRangeRatio: z.value.zoomFocusRangeRatio,
-				maxWidth: z.value.zoomMaxWidth,
-				minimapLeftInsetRatio: Jr.value,
-				minimapRightInsetRatio: Yr.value,
-				onReset: Rr,
-				onTrapMouse: Ir
+				"onUpdate:start": hi,
+				"onUpdate:end": gi,
+				refreshStartPoint: R.value.zoomStartIndex === null ? 0 : R.value.zoomStartIndex,
+				refreshEndPoint: R.value.zoomEndIndex === null ? W.value.maxSeriesLength : R.value.zoomEndIndex + 1,
+				enableRangeHandles: R.value.zoomEnableRangeHandles,
+				enableSelectionDrag: R.value.zoomEnableSelectionDrag,
+				minimapCompact: R.value.zoomMinimap.compact,
+				minimapMerged: R.value.zoomMinimap.merged,
+				allMinimaps: Hi.value,
+				minimapFrameColor: R.value.zoomMinimap.frameColor,
+				additionalMinimapHeight: R.value.zoomMinimap.additionalHeight,
+				handleType: R.value.zoomMinimap.handleType,
+				handleWidth: R.value.zoomMinimap.handleWidth,
+				handleBorderWidth: R.value.zoomMinimap.handleBorderWidth,
+				handleIconColor: R.value.zoomMinimap.handleIconColor,
+				handleBorderColor: R.value.zoomMinimap.handleBorderColor,
+				handleFill: R.value.zoomMinimap.handleFill,
+				focusOnDrag: R.value.zoomFocusOnDrag,
+				focusRangeRatio: R.value.zoomFocusRangeRatio,
+				maxWidth: R.value.zoomMaxWidth,
+				minimapLeftInsetRatio: Bi.value,
+				minimapRightInsetRatio: Vi.value,
+				onReset: n[0] ||= () => pi({
+					applyControlledZoom: !1,
+					publish: !0
+				}),
+				onTrapMouse: zr
 			}, {
 				"reset-action": k(({ reset: t }) => [E(e.$slots, "reset-action", x(y({ reset: t })), void 0, !0)]),
 				_: 3
-			}, 8, /* @__PURE__ */ "timeLabels.background.borderColor.fontSize.useResetSlot.textColor.inputColor.selectColor.max.valueStart.valueEnd.smoothMinimap.minimapSelectedColor.minimapSelectedColorOpacity.minimapSelectionRadius.minimapLineColor.minimap.minimapIndicatorColor.verticalHandles.minimapSelectedIndex.start.end.refreshStartPoint.refreshEndPoint.enableRangeHandles.enableSelectionDrag.minimapCompact.minimapMerged.allMinimaps.minimapFrameColor.additionalMinimapHeight.handleType.handleWidth.handleBorderWidth.handleIconColor.handleBorderColor.handleFill.focusOnDrag.focusRangeRatio.maxWidth.minimapLeftInsetRatio.minimapRightInsetRatio".split(".")))])) : g("", !0),
-			v("div", { id: `legend-bottom-${P.value}` }, null, 8, Cn),
-			Ln.value && z.value.showLegend ? (C(), Ne(Me, {
+			}, 8, /* @__PURE__ */ "timeLabels.background.borderColor.fontSize.useResetSlot.textColor.inputColor.selectColor.max.valueStart.valueEnd.smoothMinimap.minimapSelectedColor.minimapSelectedColorOpacity.minimapSelectionRadius.minimapLineColor.minimap.minimapIndicatorColor.verticalHandles.minimapSelectedIndex.refreshStartPoint.refreshEndPoint.enableRangeHandles.enableSelectionDrag.minimapCompact.minimapMerged.allMinimaps.minimapFrameColor.additionalMinimapHeight.handleType.handleWidth.handleBorderWidth.handleIconColor.handleBorderColor.handleFill.focusOnDrag.focusRangeRatio.maxWidth.minimapLeftInsetRatio.minimapRightInsetRatio".split(".")))])) : g("", !0),
+			v("div", { id: `legend-bottom-${P.value}` }, null, 8, wn),
+			Rn.value && R.value.showLegend ? (C(), Ne(Me, {
 				key: 7,
-				to: z.value.legendPosition === "top" ? `#legend-top-${P.value}` : `#legend-bottom-${P.value}`
-			}, [z.value.showLegend ? (C(), _("div", {
+				to: R.value.legendPosition === "top" ? `#legend-top-${P.value}` : `#legend-bottom-${P.value}`
+			}, [R.value.showLegend ? (C(), _("div", {
 				key: 0,
 				ref_key: "quickChartLegend",
-				ref: kn,
+				ref: An,
 				class: "vue-ui-quick-chart-legend",
-				style: S(`background:transparent;color:${z.value.color}`)
+				style: S(`background:transparent;color:${R.value.color}`)
 			}, [
-				(Y.value?.legend?.length > 2 || Z.value?.legend?.length > 2 || Q.value?.legend?.length > 2) && z.value.showLegendSelectAllToggle && !O(ir) ? (C(), Ne(Oe, {
+				(Y.value?.legend?.length > 2 || Z.value?.legend?.length > 2 || Q.value?.legend?.length > 2) && R.value.showLegendSelectAllToggle && !O(or) ? (C(), Ne(Oe, {
 					key: 0,
-					backgroundColor: z.value.legendSelectAllToggleBackgroundColor,
-					color: z.value.legendSelectAllToggleColor,
-					fontSize: z.value.legendFontSize,
+					backgroundColor: R.value.legendSelectAllToggleBackgroundColor,
+					color: R.value.legendSelectAllToggleColor,
+					fontSize: R.value.legendFontSize,
 					checked: L.value.length > 0,
-					isCursorPointer: er.value,
-					onToggle: Ar
+					isCursorPointer: nr.value,
+					onToggle: Nr
 				}, null, 8, [
 					"backgroundColor",
 					"color",
@@ -2227,146 +2599,146 @@ var N = /* @__PURE__ */ e({ default: () => On }), nt = ["id"], rt = ["id"], it =
 				])) : g("", !0),
 				G.value === A.DONUT ? (C(!0), _(m, { key: 1 }, T(Y.value.legend, (n, r) => (C(), _("div", {
 					class: "vue-ui-quick-chart-legend-item",
-					onClick: (e) => Fr(n, Y.value.dataset),
-					style: S(`cursor: ${Y.value.legend.length > 1 && er.value ? "pointer" : "default"}; opacity:${L.value.includes(n.id) ? "0.5" : "1"}`),
+					onClick: (e) => Rr(n, Y.value.dataset),
+					style: S(`cursor: ${Y.value.legend.length > 1 && nr.value ? "pointer" : "default"}; opacity:${L.value.includes(n.id) ? "0.5" : "1"}`),
 					role: "button",
 					tabindex: "0",
 					onKeydown: (e) => {
-						mi(e, () => {
-							Fr(n, Y.value.dataset);
+						oa(e, () => {
+							Rr(n, Y.value.dataset);
 						});
 					}
-				}, [z.value.useCustomLegend ? E(e.$slots, "legend", Le({ ref_for: !0 }, { legend: {
+				}, [R.value.useCustomLegend ? E(e.$slots, "legend", Le({ ref_for: !0 }, { legend: {
 					...n,
 					isSegregated: L.value.includes(n.id),
 					segregate: () => {
-						Fr(n, Y.value.dataset);
+						Rr(n, Y.value.dataset);
 					}
 				} }), void 0, !0, 0) : (C(), _(m, { key: 1 }, [
 					Fe(O(qe), {
-						name: z.value.legendIcon,
+						name: R.value.legendIcon,
 						stroke: n.color,
-						size: z.value.legendIconSize
+						size: R.value.legendIconSize
 					}, null, 8, [
 						"name",
 						"stroke",
 						"size"
 					]),
-					v("span", { style: S(`font-size:${z.value.legendFontSize}px`) }, D(n.name), 5),
-					v("span", { style: S(`font-size:${z.value.legendFontSize}px;font-variant-numeric:tabular-nums`) }, D(L.value.includes(n.id) ? "-" : O(p)(z.value.formatter, n.absoluteValue, O(t)({
-						p: z.value.valuePrefix,
+					v("span", { style: S(`font-size:${R.value.legendFontSize}px`) }, D(n.name), 5),
+					v("span", { style: S(`font-size:${R.value.legendFontSize}px;font-variant-numeric:tabular-nums`) }, D(L.value.includes(n.id) ? "-" : O(p)(R.value.formatter, n.absoluteValue, O(t)({
+						p: R.value.valuePrefix,
 						v: n.absoluteValue,
-						s: z.value.valueSuffix,
-						r: z.value.dataLabelRoundingValue
+						s: R.value.valueSuffix,
+						r: R.value.dataLabelRoundingValue
 					}), {
 						datapoint: n,
 						seriesIndex: r
 					})), 5),
 					L.value.includes(n.id) ? (C(), _("span", {
 						key: 0,
-						style: S(`font-size:${z.value.legendFontSize}px`)
-					}, " ( - % ) ", 4)) : Pr.value ? (C(), _("span", {
+						style: S(`font-size:${R.value.legendFontSize}px`)
+					}, " ( - % ) ", 4)) : Lr.value ? (C(), _("span", {
 						key: 1,
-						style: S(`font-size:${z.value.legendFontSize}px; font-variant-numeric: tabular-nums;`)
+						style: S(`font-size:${R.value.legendFontSize}px; font-variant-numeric: tabular-nums;`)
 					}, " ( - % ) ", 4)) : (C(), _("span", {
 						key: 2,
-						style: S(`font-size:${z.value.legendFontSize}px; font-variant-numeric: tabular-nums;`)
+						style: S(`font-size:${R.value.legendFontSize}px; font-variant-numeric: tabular-nums;`)
 					}, " (" + D(O(t)({
 						v: n.value / Y.value.total * 100,
 						s: "%",
-						r: z.value.dataLabelRoundingPercentage
+						r: R.value.dataLabelRoundingPercentage
 					})) + ") ", 5))
-				], 64))], 44, wn))), 256)) : g("", !0),
+				], 64))], 44, Tn))), 256)) : g("", !0),
 				G.value === A.LINE ? (C(!0), _(m, { key: 2 }, T(Z.value.legend, (t, n) => (C(), _("div", {
 					class: "vue-ui-quick-chart-legend-item",
 					onClick: (e) => {
-						jr(t.id, Z.value.legend.length - 1), U("selectLegend", Z.value.dataset);
+						Pr(t.id, Z.value.legend.length - 1), U("selectLegend", Z.value.dataset);
 					},
-					style: S(`cursor: ${Z.value.legend.length > 1 && er.value ? "pointer" : "default"}; opacity:${L.value.includes(t.id) ? "0.5" : "1"}`),
+					style: S(`cursor: ${Z.value.legend.length > 1 && nr.value ? "pointer" : "default"}; opacity:${L.value.includes(t.id) ? "0.5" : "1"}`),
 					role: "button",
 					tabindex: "0",
 					onKeydown: (e) => {
-						mi(e, () => {
-							jr(t.id, Z.value.legend.length - 1), U("selectLegend", Z.value.dataset);
+						oa(e, () => {
+							Pr(t.id, Z.value.legend.length - 1), U("selectLegend", Z.value.dataset);
 						});
 					}
-				}, [z.value.useCustomLegend ? E(e.$slots, "legend", Le({ ref_for: !0 }, { legend: {
+				}, [R.value.useCustomLegend ? E(e.$slots, "legend", Le({ ref_for: !0 }, { legend: {
 					...t,
 					isSegregated: L.value.includes(t.id),
 					segregate: () => {
-						jr(t.id, Z.value.legend.length - 1), U("selectLegend", Z.value.dataset);
+						Pr(t.id, Z.value.legend.length - 1), U("selectLegend", Z.value.dataset);
 					}
 				} }), void 0, !0, 0) : (C(), _(m, { key: 1 }, [Fe(O(qe), {
-					name: z.value.legendIcon,
+					name: R.value.legendIcon,
 					stroke: t.color,
-					size: z.value.legendIconSize
+					size: R.value.legendIconSize
 				}, null, 8, [
 					"name",
 					"stroke",
 					"size"
-				]), v("span", { style: S(`font-size:${z.value.legendFontSize}px`) }, D(t.name), 5)], 64))], 44, Tn))), 256)) : g("", !0),
+				]), v("span", { style: S(`font-size:${R.value.legendFontSize}px`) }, D(t.name), 5)], 64))], 44, En))), 256)) : g("", !0),
 				G.value === A.BAR ? (C(!0), _(m, { key: 3 }, T(Q.value.legend, (t, n) => (C(), _("div", {
 					class: "vue-ui-quick-chart-legend-item",
 					onClick: (e) => {
-						jr(t.id, Q.value.legend.length - 1), U("selectLegend", Q.value.dataset);
+						Pr(t.id, Q.value.legend.length - 1), U("selectLegend", Q.value.dataset);
 					},
-					style: S(`cursor: ${Q.value.legend.length > 1 && er.value ? "pointer" : "default"}; opacity:${L.value.includes(t.id) ? "0.5" : "1"}`),
+					style: S(`cursor: ${Q.value.legend.length > 1 && nr.value ? "pointer" : "default"}; opacity:${L.value.includes(t.id) ? "0.5" : "1"}`),
 					role: "button",
 					tabindex: "0",
 					onKeydown: (e) => {
-						mi(e, () => {
-							jr(t.id, Q.value.legend.length - 1), U("selectLegend", Q.value.dataset);
+						oa(e, () => {
+							Pr(t.id, Q.value.legend.length - 1), U("selectLegend", Q.value.dataset);
 						});
 					}
-				}, [z.value.useCustomLegend ? E(e.$slots, "legend", Le({ ref_for: !0 }, { legend: {
+				}, [R.value.useCustomLegend ? E(e.$slots, "legend", Le({ ref_for: !0 }, { legend: {
 					...t,
 					isSegregated: L.value.includes(t.id),
 					segregate: () => {
-						jr(t.id, Q.value.legend.length - 1), U("selectLegend", Q.value.dataset);
+						Pr(t.id, Q.value.legend.length - 1), U("selectLegend", Q.value.dataset);
 					}
 				} }), void 0, !0, 0) : (C(), _(m, { key: 1 }, [Fe(O(qe), {
-					name: z.value.legendIcon,
+					name: R.value.legendIcon,
 					stroke: t.color,
-					size: z.value.legendIconSize
+					size: R.value.legendIconSize
 				}, null, 8, [
 					"name",
 					"stroke",
 					"size"
-				]), v("span", { style: S(`font-size:${z.value.legendFontSize}px`) }, D(t.name), 5)], 64))], 44, En))), 256)) : g("", !0)
+				]), v("span", { style: S(`font-size:${R.value.legendFontSize}px`) }, D(t.name), 5)], 64))], 44, Dn))), 256)) : g("", !0)
 			], 4)) : g("", !0)], 8, ["to"])) : g("", !0),
 			e.$slots.source ? (C(), _("div", {
 				key: 8,
 				ref_key: "source",
-				ref: Nn,
+				ref: Pn,
 				dir: "auto"
 			}, [E(e.$slots, "source", {}, void 0, !0)], 512)) : g("", !0),
 			Fe(O(Ze), {
-				teleportTo: z.value.tooltipTeleportTo,
-				show: wr.value.showTooltip && F.value,
-				backgroundColor: z.value.backgroundColor,
-				color: z.value.color,
-				borderRadius: z.value.tooltipBorderRadius,
-				borderColor: z.value.tooltipBorderColor,
-				borderWidth: z.value.tooltipBorderWidth,
-				fontSize: z.value.tooltipFontSize,
-				backgroundOpacity: z.value.tooltipBackgroundOpacity,
-				position: z.value.tooltipPosition,
-				offsetX: z.value.tooltipOffsetX,
-				offsetY: z.value.tooltipOffsetY,
+				teleportTo: R.value.tooltipTeleportTo,
+				show: Dr.value.showTooltip && F.value,
+				backgroundColor: R.value.backgroundColor,
+				color: R.value.color,
+				borderRadius: R.value.tooltipBorderRadius,
+				borderColor: R.value.tooltipBorderColor,
+				borderWidth: R.value.tooltipBorderWidth,
+				fontSize: R.value.tooltipFontSize,
+				backgroundOpacity: R.value.tooltipBackgroundOpacity,
+				position: R.value.tooltipPosition,
+				offsetX: R.value.tooltipOffsetX,
+				offsetY: R.value.tooltipOffsetY,
 				parent: N.value,
-				content: Mn.value,
-				isFullscreen: $r.value,
-				isCustom: O(r)(z.value.tooltipCustomFormat),
-				smooth: z.value.tooltipSmooth,
-				smoothForce: z.value.tooltipSmoothForce,
-				smoothSnapThreshold: z.value.tooltipSmoothSnapThreshold,
-				backdropFilter: z.value.tooltipBackdropFilter,
-				isA11yMode: H.value === "keyboard",
-				a11yPosition: tr.value
+				content: Nn.value,
+				isFullscreen: Gi.value,
+				isCustom: O(r)(R.value.tooltipCustomFormat),
+				smooth: R.value.tooltipSmooth,
+				smoothForce: R.value.tooltipSmoothForce,
+				smoothSnapThreshold: R.value.tooltipSmoothSnapThreshold,
+				backdropFilter: R.value.tooltipBackdropFilter,
+				isA11yMode: V.value === "keyboard",
+				a11yPosition: rr.value
 			}, {
-				"tooltip-before": k(() => [E(e.$slots, "tooltip-before", x(y({ ...jn.value })), void 0, !0)]),
-				tooltip: k(() => [E(e.$slots, "tooltip", x(y({ ...jn.value })), void 0, !0)]),
-				"tooltip-after": k(() => [E(e.$slots, "tooltip-after", x(y({ ...jn.value })), void 0, !0)]),
+				"tooltip-before": k(() => [E(e.$slots, "tooltip-before", x(y({ ...Mn.value })), void 0, !0)]),
+				tooltip: k(() => [E(e.$slots, "tooltip", x(y({ ...Mn.value })), void 0, !0)]),
+				"tooltip-after": k(() => [E(e.$slots, "tooltip-after", x(y({ ...Mn.value })), void 0, !0)]),
 				_: 3
 			}, 8, [
 				"teleportTo",
@@ -2392,12 +2764,12 @@ var N = /* @__PURE__ */ e({ default: () => On }), nt = ["id"], rt = ["id"], it =
 				"isA11yMode",
 				"a11yPosition"
 			]),
-			E(e.$slots, "skeleton", {}, () => [O(ir) ? (C(), Ne(ge, { key: 0 })) : g("", !0)], !0)
-		], 46, nt)) : (C(), _("div", Dn, [Fe(O(qe), {
+			E(e.$slots, "skeleton", {}, () => [O(or) ? (C(), Ne(ge, { key: 0 })) : g("", !0)], !0)
+		], 46, nt)) : (C(), _("div", On, [Fe(O(qe), {
 			name: "circleCancel",
 			stroke: "red"
-		}), n[5] ||= v("span", null, "Dataset is not processable", -1)]));
+		}), n[4] ||= v("span", null, "Dataset is not processable", -1)]));
 	}
-}, [["__scopeId", "data-v-0c7f3834"]]);
+}, [["__scopeId", "data-v-6e6dae1f"]]);
 //#endregion
-export { N as n, On as t };
+export { N as n, kn as t };