vue-data-ui 3.23.0 → 3.23.2

package/dist/{vue-ui-quick-chart-CJ9rejnj.js → vue-ui-quick-chart-CgHX9njq.js}

@@ -1,23 +1,23 @@
 import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
-import { G as t, Jt as n, Kt as r, P as i, Pt as a, Rt as o, S as ee, X as s, _ as c, b as l, ct as te, f as u, h as d, i as f, jt as ne, kt as re, p, q as ie, t as ae, tt as oe, w as se, xt as ce } from "./lib-BuMGJ_a0.js";
+import { G as t, Jt as n, Kt as r, P as i, Pt as a, Rt as o, S as ee, X as s, _ as c, b as l, ct as te, f as u, h as d, i as f, jt as ne, kt as re, p, q as ie, t as ae, tt as oe, w as se, xt as ce } from "./lib-Bttd6u5E.js";
 import { n as le, t as ue } from "./useHints-Dq_w2E8B.js";
-import { t as de } from "./useTimeLabels-B9CEuiLZ.js";
-import { t as fe } from "./useConfig-BilxnBNr.js";
-import { t as pe } from "./usePrinter-BFvi4jVy.js";
+import { t as de } from "./useTimeLabels-d2f-W1L4.js";
+import { t as fe } from "./useConfig-DlNpz6P8.js";
+import { t as pe } from "./usePrinter-DN5bYhTG.js";
 import { n as me, t as he } from "./BaseScanner-DZvpgOjM.js";
-import { t as ge } from "./useSvgExport-Ba9qBr9M.js";
-import { t as _e } from "./useNestedProp--NSEmhOH.js";
-import { t as ve } from "./useThemeCheck-C43Tcqmk.js";
+import { t as ge } from "./useNestedProp-vPNvh7rV.js";
+import { t as _e } from "./useThemeCheck-C43Tcqmk.js";
+import { t as ve } from "./useChartExport-DNiwdPmb.js";
 import { t as ye } from "./useTransitions-g_zBREk2.js";
 import { t as be } from "./useStableElementSize-C7KADDKj.js";
 import { t as xe } from "./useTimeLabelCollider-AEcY4Ioe.js";
-import { t as Se } from "./img-DIQG5q8T.js";
+import { t as Se } from "./img-Bnokohej.js";
 import { t as Ce } from "./_plugin-vue_export-helper-B3ysoDQm.js";
 import { l as we, t as Te } from "./useResponsive-ZtArZtUf.js";
-import { t as Ee } from "./BaseLegendToggle-CtAPwzr2.js";
-import { t as De } from "./A11yDataTable-DdRsVULz.js";
-import { t as Oe } from "./useChartAccessibility-DYqac8yF.js";
-import { t as ke } from "./Slicer-5yIrdoJv.js";
+import { t as Ee } from "./SlicerPreview-wUw1hFwe.js";
+import { t as De } from "./BaseLegendToggle-DZVucLnv.js";
+import { t as Oe } from "./A11yDataTable-DdRsVULz.js";
+import { t as ke } from "./useChartAccessibility-DYqac8yF.js";
 import { t as Ae } from "./vue_ui_quick_chart-mZBdml3Z.js";
 import { Fragment as m, Teleport as je, computed as h, createBlock as Me, createCommentVNode as g, createElementBlock as _, createElementVNode as v, createSlots as Ne, createVNode as Pe, defineAsyncComponent as Fe, guardReactiveProps as y, mergeProps as Ie, nextTick as Le, normalizeClass as b, normalizeProps as x, normalizeStyle as S, onBeforeUnmount as Re, onMounted as ze, openBlock as C, ref as w, renderList as T, renderSlot as E, shallowRef as Be, toDisplayString as D, toRefs as Ve, unref as O, watch as He, watchEffect as Ue, withCtx as k } from "vue";
 //#region src/chartDetector.js
@@ -432,7 +432,7 @@ var N = /* @__PURE__ */ e({ default: () => Dn }), tt = ["id"], nt = ["id"], rt =
 		"copyAlt"
 	],
 	setup(e, { expose: Ce, emit: We }) {
-		let Ke = Fe(() => import("./BaseIcon-91MZoczJ.js").then((e) => e.n)), qe = Fe(() => import("./PackageVersion--QCMh5k_.js").then((e) => e.t)), Ye = Fe(() => import("./PenAndPaper-cE4J8-rA.js").then((e) => e.t)), Xe = Fe(() => import("./Tooltip-CMTGxeYO.js")), Ze = Fe(() => import("./UserOptions-3ujTo3LD.js").then((e) => e.n)), { vue_ui_quick_chart: Qe } = fe(), { isThemeValid: $e, warnInvalidTheme: et } = ve(), M = e, N = w(null), Dn = w(null), On = w(null), kn = w(null), P = w(ie()), F = w(!1), An = w(null), jn = w(""), I = w(null), Mn = w(null), Nn = w(null), L = w([]), Pn = w(0), Fn = w(0), In = w(!1), Ln = w(null), Rn = w(null), R = w(null), zn = w(null), Bn = w(null), Vn = w(null), Hn = Be(null), Un = w(!1), Wn = w(0), Gn = w(0), Kn = w(!1);
+		let Ke = Fe(() => import("./BaseIcon-BfndwIWE.js").then((e) => e.n)), qe = Fe(() => import("./PackageVersion-DXU7nRr9.js").then((e) => e.t)), Ye = Fe(() => import("./PenAndPaper-DAE-tnEQ.js").then((e) => e.t)), Xe = Fe(() => import("./Tooltip-DhjyfHwz.js")), Ze = Fe(() => import("./UserOptions-Dt98of5H.js").then((e) => e.n)), { vue_ui_quick_chart: Qe } = fe(), { isThemeValid: $e, warnInvalidTheme: et } = _e(), M = e, N = w(null), Dn = w(null), On = w(null), kn = w(null), P = w(ie()), F = w(!1), An = w(null), jn = w(""), I = w(null), Mn = w(null), Nn = w(null), L = w([]), Pn = w(0), Fn = w(0), In = w(!1), Ln = w(null), Rn = w(null), R = w(null), zn = w(null), Bn = w(null), Vn = w(null), Hn = Be(null), Un = w(!1), Wn = w(0), Gn = w(0), Kn = w(!1);
 		function qn() {
 			Hn.value = N.value?.parentNode ?? null;
 		}
@@ -482,7 +482,7 @@ var N = /* @__PURE__ */ e({ default: () => Dn }), tt = ["id"], nt = ["id"], rt =
 		let { transitionEnabled: B } = ye({
 			config: () => z.value.transitions,
 			dataset: () => M.dataset
-		}), Qn = h(() => !!z.value.debug), $n = h(() => z.value.useCursorPointer), V = w(null), er = w({
+		}), Qn = h(() => z.value.debug), $n = h(() => z.value.useCursorPointer), V = w(null), er = w({
 			x: 0,
 			y: 0
 		}), H = w("pointer"), tr = w(!1), nr = h(() => n({
@@ -526,23 +526,23 @@ var N = /* @__PURE__ */ e({ default: () => Dn }), tt = ["id"], nt = ["id"], rt =
 				defaultConfig: z.value,
 				userConfig: nr.value
 			})
-		}), { svgRef: or } = Oe({ config: { text: z.value.title } }), sr = h(() => z.value.showUserOptionsOnChartHover), cr = h(() => z.value.keepUserOptionsStateOnChartLeave), lr = w(!z.value.showUserOptionsOnChartHover), ur = w(!1);
+		}), { svgRef: or } = ke({ config: { text: z.value.title } }), sr = h(() => z.value.showUserOptionsOnChartHover), cr = h(() => z.value.keepUserOptionsStateOnChartLeave), lr = w(!z.value.showUserOptionsOnChartHover), ur = w(!1);
 		function dr(e = !1) {
 			ur.value = e, sr.value && (lr.value = e);
 		}
 		function fr() {
-			let e = _e({
+			let e = ge({
 				userConfig: M.config,
 				defaultConfig: Qe
 			}), t = {}, n = e.theme;
 			if (n) if (!$e.value(e)) et(e), t = e;
 			else {
-				let i = _e({
+				let i = ge({
 					userConfig: Ae[n] || M.config,
 					defaultConfig: e
 				});
 				t = {
-					..._e({
+					...ge({
 						userConfig: M.config,
 						defaultConfig: i
 					}),
@@ -1149,7 +1149,13 @@ var N = /* @__PURE__ */ e({ default: () => Dn }), tt = ["id"], nt = ["id"], rt =
 				killTooltip: oe,
 				selectDatapoint: se
 			};
-		}), Wr = h(() => {
+		}), Wr = h(() => G.value === A.LINE ? Z.value?.drawingArea ?? null : G.value === A.BAR ? Q.value?.drawingArea ?? null : null), Gr = h(() => {
+			let e = Wr.value, t = K.value.width;
+			return !e || t <= 0 || !z.value.zoomXyAutoFit ? null : e.left / t;
+		}), Kr = h(() => {
+			let e = Wr.value, t = K.value.width;
+			return !e || t <= 0 || !z.value.zoomXyAutoFit ? null : (t - e.right) / t;
+		}), qr = 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),
@@ -1162,9 +1168,9 @@ var N = /* @__PURE__ */ e({ default: () => Dn }), tt = ["id"], nt = ["id"], rt =
 				type: "bar",
 				series: e.absoluteValues
 			}));
-		}), $ = w([]), Gr = 0;
+		}), $ = w([]), Jr = 0;
 		Ue(() => {
-			let e = ++Gr;
+			let e = ++Jr;
 			(async () => {
 				let t = await de({
 					values: z.value.xyPeriods,
@@ -1173,24 +1179,24 @@ var N = /* @__PURE__ */ e({ default: () => Dn }), tt = ["id"], nt = ["id"], rt =
 					start: X.value.start,
 					end: X.value.end
 				});
-				e === Gr && ($.value = t);
+				e === Jr && ($.value = t);
 			})();
 		});
-		let Kr = h(() => {
+		let Yr = h(() => {
 			let e = z.value.xyPeriodsModulo;
 			return z.value.xyPeriods.length ? Math.min(e, [...new Set($.value.map((e) => e.text))].length) : e;
-		}), qr = w(!1);
-		function Jr(e) {
-			qr.value = e, Pn.value += 1;
+		}), Xr = w(!1);
+		function Zr(e) {
+			Xr.value = e, Pn.value += 1;
 		}
-		function Yr() {
+		function Qr() {
 			xr.value.showTooltip = !xr.value.showTooltip;
 		}
-		let Xr = w(!1);
-		function Zr() {
-			Xr.value = !Xr.value;
+		let $r = w(!1);
+		function ei() {
+			$r.value = !$r.value;
 		}
-		async function Qr({ scale: e = 2 } = {}) {
+		async function ti({ scale: e = 2 } = {}) {
 			if (!N.value) return;
 			let { width: t, height: n } = N.value.getBoundingClientRect(), r = t / n, { imageUri: i, base64: a } = await Se({
 				domElement: N.value,
@@ -1207,7 +1213,7 @@ var N = /* @__PURE__ */ e({ default: () => Dn }), tt = ["id"], nt = ["id"], rt =
 				aspectRatio: r
 			};
 		}
-		let $r = h(() => K.value.width), ei = h(() => K.value.height);
+		let ni = h(() => K.value.width), ri = h(() => K.value.height);
 		xe({
 			timeLabelsEls: R,
 			timeLabels: $,
@@ -1217,42 +1223,33 @@ var N = /* @__PURE__ */ e({ default: () => Dn }), tt = ["id"], nt = ["id"], rt =
 			autoRotatePath: ["xyPeriodLabelsAutoRotate", "enable"],
 			isAutoSize: !1,
 			rotation: z.value.xyPeriodLabelsAutoRotate.angle,
-			height: ei.value,
-			width: $r.value
+			height: ri.value,
+			width: ni.value
 		});
-		let ti = h(() => z.value.backgroundColor), ni = h(() => G.value === A.DONUT ? Y.value.legend : G.value === A.LINE ? Z.value.legend : Q.value.legend), ri = h(() => ({
+		let ii = h(() => z.value.backgroundColor), ai = h(() => G.value === A.DONUT ? Y.value.legend : G.value === A.LINE ? Z.value.legend : Q.value.legend), oi = h(() => ({
 			show: z.value.showLegend,
 			bold: !1,
 			backgroundColor: z.value.backgroundColor,
 			color: z.value.color,
 			fontSize: z.value.legendFontSize,
 			position: z.value.legendPosition
-		})), { exportSvg: ii, getSvg: ai } = ge({
+		})), si = h(() => ({
+			text: z.value.title,
+			color: z.value.color,
+			fontSize: z.value.titleFontSize,
+			bold: z.value.titleBold,
+			textAlign: z.value.titleTextAlign,
+			subtitle: { text: "" }
+		})), { generateSvg: ci, onGenerateImage: li } = ve({
 			svg: or,
-			title: h(() => ({
-				text: z.value.title,
-				color: z.value.color,
-				fontSize: z.value.titleFontSize,
-				bold: z.value.titleBold,
-				textAlign: z.value.titleTextAlign,
-				subtitle: { text: "" }
-			})),
-			legend: ri,
-			legendItems: ni,
-			backgroundColor: ti
+			title: si,
+			legend: oi,
+			legendItems: ai,
+			backgroundColor: ii,
+			getSvgCallback: () => z.value.userOptionsCallbacks.svg,
+			generateImage: yr
 		});
-		async function oi({ isCb: e }) {
-			if (e) {
-				let { blob: e, url: t, text: n, dataUrl: r } = await ai();
-				z.value.userOptionsCallbacks.svg({
-					blob: e,
-					url: t,
-					text: n,
-					dataUrl: r
-				});
-			} else ii();
-		}
-		async function si() {
+		async function ui() {
 			if (U("copyAlt", {
 				config: z.value,
 				dataset: {
@@ -1273,18 +1270,18 @@ var N = /* @__PURE__ */ e({ default: () => Dn }), tt = ["id"], nt = ["id"], rt =
 				}
 			}));
 		}
-		function ci(e, t) {
+		function di(e, t) {
 			(e.key === "Enter" || e.key === " ") && (e.preventDefault(), t());
 		}
-		let li = 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 ui() {
+		let fi = 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 pi() {
 			V.value = null, tr.value = !0;
 		}
-		function di() {
+		function mi() {
 			V.value = null, H.value = "pointer", F.value = !1, I.value = null, J.value = null, tr.value = !1;
 		}
-		function fi(e) {
-			if (!or.value || Xr.value || document.activeElement !== or.value || !li.value) return;
+		function hi(e) {
+			if (!or.value || $r.value || document.activeElement !== or.value || !fi.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) {
@@ -1312,11 +1309,11 @@ var N = /* @__PURE__ */ e({ default: () => Dn }), tt = ["id"], nt = ["id"], rt =
 				}
 				return;
 			}
-			let a = V.value, o = J.value, ee = a !== null && a >= 0 && a < li.value, s = o !== null && o >= 0 && o < li.value;
-			if (ee ? n ? (a += 1, a >= li.value && (a = 0)) : t && (--a, a < 0 && (a = li.value - 1)) : s ? (a = n ? o + 1 : o - 1, a >= li.value && (a = 0), a < 0 && (a = li.value - 1)) : a = n ? 0 : li.value - 1, G.value === A.DONUT) {
+			let a = V.value, o = J.value, ee = a !== null && a >= 0 && a < fi.value, s = o !== null && o >= 0 && o < fi.value;
+			if (ee ? n ? (a += 1, a >= fi.value && (a = 0)) : t && (--a, a < 0 && (a = fi.value - 1)) : s ? (a = n ? o + 1 : o - 1, a >= fi.value && (a = 0), a < 0 && (a = fi.value - 1)) : a = n ? 0 : fi.value - 1, G.value === A.DONUT) {
 				let e = Y.value?.chart?.[a];
 				if (!e) return;
-				pi(a), Y.value.useTooltip({
+				gi(a), Y.value.useTooltip({
 					datapoint: e,
 					seriesIndex: a,
 					triggerMode: "keyboard"
@@ -1324,12 +1321,12 @@ var N = /* @__PURE__ */ e({ default: () => Dn }), tt = ["id"], nt = ["id"], rt =
 				return;
 			}
 			if (G.value === A.LINE) {
-				pi(a), Z.value?.useTooltip(a, "keyboard");
+				gi(a), Z.value?.useTooltip(a, "keyboard");
 				return;
 			}
-			G.value === A.BAR && (pi(a), Q.value?.useTooltip(a, "keyboard"));
+			G.value === A.BAR && (gi(a), Q.value?.useTooltip(a, "keyboard"));
 		}
-		function pi(e) {
+		function gi(e) {
 			if (!Number.isFinite(e) || !or.value) return;
 			let t = 0, n = 0;
 			if (G.value === A.DONUT) {
@@ -1353,7 +1350,7 @@ var N = /* @__PURE__ */ e({ default: () => Dn }), tt = ["id"], nt = ["id"], rt =
 				y: r.top + n / K.value.height * r.height
 			};
 		}
-		let mi = h(() => {
+		let _i = h(() => {
 			if (G.value === A.DONUT) return {
 				headers: [
 					"Series",
@@ -1399,14 +1396,14 @@ var N = /* @__PURE__ */ e({ default: () => Dn }), tt = ["id"], nt = ["id"], rt =
 			};
 		});
 		return Ce({
-			getImage: Qr,
+			getImage: ti,
 			generatePdf: vr,
 			generateImage: yr,
-			generateSvg: oi,
-			toggleTooltip: Yr,
-			toggleAnnotator: Zr,
-			toggleFullscreen: Jr,
-			copyAlt: si
+			generateSvg: ci,
+			toggleTooltip: Qr,
+			toggleAnnotator: ei,
+			toggleFullscreen: Zr,
+			copyAlt: ui
 		}), (e, n) => hr.value ? (C(), _("div", {
 			key: 0,
 			id: `${G.value}_${P.value}`,
@@ -1415,7 +1412,7 @@ var N = /* @__PURE__ */ e({ default: () => Dn }), tt = ["id"], nt = ["id"], rt =
 			class: b({
 				"vue-data-ui-component": !0,
 				"vue-ui-quick-chart": !0,
-				"vue-data-ui-wrapper-fullscreen": qr.value
+				"vue-data-ui-wrapper-fullscreen": Xr.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] ||= () => dr(!0),
@@ -1425,11 +1422,11 @@ var N = /* @__PURE__ */ e({ default: () => Dn }), tt = ["id"], nt = ["id"], rt =
 				id: `chart-instructions-${P.value}`,
 				class: "sr-only"
 			}, [v("p", null, D(z.value.a11y.translations.keyboardNavigation), 1)], 8, nt),
-			mi.value.rows.length ? (C(), Me(De, {
+			_i.value.rows.length ? (C(), Me(Oe, {
 				key: 0,
 				uid: P.value,
-				head: mi.value.headers,
-				body: mi.value.rows,
+				head: _i.value.headers,
+				body: _i.value.rows,
 				notice: z.value.a11y.translations.tableAvailable,
 				caption: z.value.a11y.translations.tableCaption
 			}, null, 8, [
@@ -1444,9 +1441,9 @@ var N = /* @__PURE__ */ e({ default: () => Dn }), tt = ["id"], nt = ["id"], rt =
 				svgRef: O(or),
 				backgroundColor: z.value.backgroundColor,
 				color: z.value.color,
-				active: Xr.value,
+				active: $r.value,
 				isCursorPointer: $n.value,
-				onClose: Zr
+				onClose: ei
 			}, {
 				"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)]),
@@ -1485,22 +1482,22 @@ var N = /* @__PURE__ */ e({ default: () => Dn }), tt = ["id"], nt = ["id"], rt =
 				hasAltCopy: z.value.userOptionsButtons.altCopy,
 				hasXls: !1,
 				isTooltip: xr.value.showTooltip,
-				isFullscreen: qr.value,
+				isFullscreen: Xr.value,
 				titles: { ...z.value.userOptionsButtonTitles },
 				chartElement: N.value,
 				position: z.value.userOptionsPosition,
 				hasAnnotator: z.value.userOptionsButtons.annotator,
-				isAnnotation: Xr.value,
+				isAnnotation: $r.value,
 				callbacks: z.value.userOptionsCallbacks,
 				printScale: z.value.userOptionsPrint.scale,
 				isCursorPointer: $n.value,
-				onToggleFullscreen: Jr,
+				onToggleFullscreen: Zr,
 				onGeneratePdf: O(vr),
-				onGenerateImage: O(yr),
-				onGenerateSvg: oi,
-				onToggleTooltip: Yr,
-				onToggleAnnotator: Zr,
-				onCopyAlt: si,
+				onGenerateImage: O(li),
+				onGenerateSvg: O(ci),
+				onToggleTooltip: Qr,
+				onToggleAnnotator: ei,
+				onCopyAlt: ui,
 				style: S({ visibility: cr.value ? lr.value ? "visible" : "hidden" : "visible" })
 			}, Ne({ _: 2 }, [
 				e.$slots.menuIcon ? {
@@ -1586,6 +1583,7 @@ var N = /* @__PURE__ */ e({ default: () => Dn }), tt = ["id"], nt = ["id"], rt =
 				"isCursorPointer",
 				"onGeneratePdf",
 				"onGenerateImage",
+				"onGenerateSvg",
 				"style"
 			])) : g("", !0),
 			z.value.title ? (C(), _("div", {
@@ -1606,9 +1604,9 @@ var N = /* @__PURE__ */ e({ default: () => Dn }), tt = ["id"], nt = ["id"], rt =
 				style: S(`max-width:100%;overflow:visible;background:transparent;color:${z.value.color}`),
 				class: b({ "vue-data-ui-no-transition": !O(B) }),
 				tabindex: "0",
-				onFocus: ui,
-				onBlur: di,
-				onKeydown: fi
+				onFocus: pi,
+				onBlur: mi,
+				onKeydown: hi
 			}, [
 				Pe(O(qe)),
 				e.$slots["chart-background"] && G.value === A.BAR ? (C(), _("foreignObject", {
@@ -1823,7 +1821,7 @@ var N = /* @__PURE__ */ e({ default: () => Dn }), tt = ["id"], nt = ["id"], rt =
 						datapoint: e,
 						seriesIndex: t
 					})), 11, Nt)) : g("", !0)], 64))), 128))], 512)) : g("", !0),
-					z.value.xyShowScale && z.value.xyPeriods.length ? (C(), _("g", Pt, [(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) / Kr.value) === 0 || X.value.end - X.value.start <= Kr.value ? (C(), _("line", {
+					z.value.xyShowScale && z.value.xyPeriods.length ? (C(), _("g", Pt, [(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) / Yr.value) === 0 || X.value.end - X.value.start <= Yr.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,
@@ -1835,7 +1833,7 @@ var N = /* @__PURE__ */ e({ default: () => Dn }), tt = ["id"], nt = ["id"], rt =
 					}, null, 8, Ft)) : g("", !0)], 64))), 256)), v("g", {
 						ref_key: "timeLabelsEls",
 						ref: R
-					}, [(C(!0), _(m, null, T($.value.map((e) => e.text), (e, n) => (C(), _(m, null, [!z.value.xyPeriodsShowOnlyAtModulo || z.value.xyPeriodsShowOnlyAtModulo && n % Math.floor((X.value.end - X.value.start) / Kr.value) === 0 || X.value.end - X.value.start <= Kr.value ? (C(), _("g", It, [String(e).includes("\n") ? (C(), _("text", {
+					}, [(C(!0), _(m, null, T($.value.map((e) => e.text), (e, n) => (C(), _(m, null, [!z.value.xyPeriodsShowOnlyAtModulo || z.value.xyPeriodsShowOnlyAtModulo && n % Math.floor((X.value.end - X.value.start) / Yr.value) === 0 || X.value.end - X.value.start <= Yr.value ? (C(), _("g", It, [String(e).includes("\n") ? (C(), _("text", {
 						key: 1,
 						class: "vue-data-ui-time-label",
 						"font-size": z.value.xyLabelsXFontSize,
@@ -2017,7 +2015,7 @@ var N = /* @__PURE__ */ e({ default: () => Dn }), tt = ["id"], nt = ["id"], rt =
 					}, null, 8, an))), 256)), v("g", {
 						ref_key: "timeLabelsEls",
 						ref: R
-					}, [(C(!0), _(m, null, T($.value.map((e) => e.text), (e, n) => (C(), _(m, null, [!z.value.xyPeriodsShowOnlyAtModulo || z.value.xyPeriodsShowOnlyAtModulo && n % Math.floor((X.value.end - X.value.start) / Kr.value) === 0 || X.value.end - X.value.start <= Kr.value ? (C(), _("g", on, [String(e).includes("\n") ? (C(), _("text", {
+					}, [(C(!0), _(m, null, T($.value.map((e) => e.text), (e, n) => (C(), _(m, null, [!z.value.xyPeriodsShowOnlyAtModulo || z.value.xyPeriodsShowOnlyAtModulo && n % Math.floor((X.value.end - X.value.start) / Yr.value) === 0 || X.value.end - X.value.start <= Yr.value ? (C(), _("g", on, [String(e).includes("\n") ? (C(), _("text", {
 						key: 1,
 						class: "vue-data-ui-time-label",
 						"font-size": z.value.xyLabelsXFontSize,
@@ -2131,16 +2129,15 @@ var N = /* @__PURE__ */ e({ default: () => Dn }), tt = ["id"], nt = ["id"], rt =
 				key: `slicer_${Fn.value}`,
 				ref_key: "quickChartSlicer",
 				ref: kn
-			}, [(C(), Me(ke, {
+			}, [(C(), Me(Ee, {
 				ref_key: "slicerComponent",
 				ref: Ir,
 				key: `slicer_${Fn.value}`,
+				timeLabels: $.value,
 				background: z.value.zoomColor,
 				borderColor: z.value.backgroundColor,
 				fontSize: z.value.zoomFontSize,
 				useResetSlot: z.value.zoomUseResetSlot,
-				labelLeft: z.value.xyPeriods[X.value.start] && $.value[0] ? $.value[0].text : "",
-				labelRight: z.value.xyPeriods[X.value.end - 1] && $.value?.length ? $.value.at(-1).text : "",
 				textColor: z.value.color,
 				inputColor: z.value.zoomColor,
 				selectColor: z.value.zoomHighlightColor,
@@ -2167,7 +2164,7 @@ var N = /* @__PURE__ */ e({ default: () => Dn }), tt = ["id"], nt = ["id"], rt =
 				enableSelectionDrag: z.value.zoomEnableSelectionDrag,
 				minimapCompact: z.value.zoomMinimap.compact,
 				minimapMerged: z.value.zoomMinimap.merged,
-				allMinimaps: Wr.value,
+				allMinimaps: qr.value,
 				minimapFrameColor: z.value.zoomMinimap.frameColor,
 				additionalMinimapHeight: z.value.zoomMinimap.additionalHeight,
 				handleType: z.value.zoomMinimap.handleType,
@@ -2179,12 +2176,14 @@ var N = /* @__PURE__ */ e({ default: () => Dn }), tt = ["id"], nt = ["id"], rt =
 				focusOnDrag: z.value.zoomFocusOnDrag,
 				focusRangeRatio: z.value.zoomFocusRangeRatio,
 				maxWidth: z.value.zoomMaxWidth,
+				minimapLeftInsetRatio: Gr.value,
+				minimapRightInsetRatio: Kr.value,
 				onReset: Fr,
 				onTrapMouse: Nr
 			}, {
 				"reset-action": k(({ reset: t }) => [E(e.$slots, "reset-action", x(y({ reset: t })), void 0, !0)]),
 				_: 3
-			}, 8, /* @__PURE__ */ "background.borderColor.fontSize.useResetSlot.labelLeft.labelRight.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".split(".")))])) : g("", !0),
+			}, 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, Sn),
 			In.value && z.value.showLegend ? (C(), Me(je, {
 				key: 7,
@@ -2196,7 +2195,7 @@ var N = /* @__PURE__ */ e({ default: () => Dn }), tt = ["id"], nt = ["id"], rt =
 				class: "vue-ui-quick-chart-legend",
 				style: S(`background:transparent;color:${z.value.color}`)
 			}, [
-				(Y.value?.legend?.length > 2 || Z.value?.legend?.length > 2 || Q.value?.legend?.length > 2) && z.value.showLegendSelectAllToggle && !O(rr) ? (C(), Me(Ee, {
+				(Y.value?.legend?.length > 2 || Z.value?.legend?.length > 2 || Q.value?.legend?.length > 2) && z.value.showLegendSelectAllToggle && !O(rr) ? (C(), Me(De, {
 					key: 0,
 					backgroundColor: z.value.legendSelectAllToggleBackgroundColor,
 					color: z.value.legendSelectAllToggleColor,
@@ -2218,7 +2217,7 @@ var N = /* @__PURE__ */ e({ default: () => Dn }), tt = ["id"], nt = ["id"], rt =
 					role: "button",
 					tabindex: "0",
 					onKeydown: (e) => {
-						ci(e, () => {
+						di(e, () => {
 							Mr(t, Y.value.dataset);
 						});
 					}
@@ -2272,7 +2271,7 @@ var N = /* @__PURE__ */ e({ default: () => Dn }), tt = ["id"], nt = ["id"], rt =
 					role: "button",
 					tabindex: "0",
 					onKeydown: (e) => {
-						ci(e, () => {
+						di(e, () => {
 							Or(t.id, Z.value.legend.length - 1), U("selectLegend", Z.value.dataset);
 						});
 					}
@@ -2300,7 +2299,7 @@ var N = /* @__PURE__ */ e({ default: () => Dn }), tt = ["id"], nt = ["id"], rt =
 					role: "button",
 					tabindex: "0",
 					onKeydown: (e) => {
-						ci(e, () => {
+						di(e, () => {
 							Or(t.id, Q.value.legend.length - 1), U("selectLegend", Q.value.dataset);
 						});
 					}
@@ -2341,7 +2340,7 @@ var N = /* @__PURE__ */ e({ default: () => Dn }), tt = ["id"], nt = ["id"], rt =
 				offsetY: z.value.tooltipOffsetY,
 				parent: N.value,
 				content: jn.value,
-				isFullscreen: qr.value,
+				isFullscreen: Xr.value,
 				isCustom: O(ce)(z.value.tooltipCustomFormat),
 				smooth: z.value.tooltipSmooth,
 				smoothForce: z.value.tooltipSmoothForce,
@@ -2384,6 +2383,6 @@ var N = /* @__PURE__ */ e({ default: () => Dn }), tt = ["id"], nt = ["id"], rt =
 			stroke: "red"
 		}), n[5] ||= v("span", null, "Dataset is not processable", -1)]));
 	}
-}, [["__scopeId", "data-v-71d46cbc"]]);
+}, [["__scopeId", "data-v-4bec8cdd"]]);
 //#endregion
 export { N as n, Dn as t };