vue-data-ui 3.7.7 → 3.7.9

package/dist/{vue-ui-quick-chart-oc7_RYCx.js → vue-ui-quick-chart-BVHExcyO.js}

@@ -1,97 +1,97 @@
-import { defineAsyncComponent as Ee, ref as A, computed as M, toRefs as La, watch as Te, shallowRef as Bt, onMounted as _a, onBeforeUnmount as Dt, nextTick as lt, watchEffect as za, createElementBlock as n, openBlock as o, normalizeStyle as D, normalizeClass as fe, createBlock as Ie, createCommentVNode as m, createElementVNode as z, createVNode as Se, unref as s, withCtx as G, renderSlot as R, normalizeProps as Q, guardReactiveProps as K, createSlots as $a, toDisplayString as N, Fragment as x, renderList as E, Teleport as Fa, mergeProps as ot } from "vue";
-import { c as Ea, t as Ta, i as Ia, p as ee, W as Nt, j as Oa, a5 as Pa, g as Ma, o as Ra, l as nt, Z as Ba, F as We, X as Da, _ as Na, $ as it, a0 as Oe, a as se, d as Z, U as Ut, z as Vt, M as ve, x as Ge, R as rt } from "./lib-C5BH09_g.js";
+import { defineAsyncComponent as Fe, ref as A, computed as M, toRefs as La, watch as Te, shallowRef as Bt, onMounted as _a, onBeforeUnmount as Dt, nextTick as lt, watchEffect as za, createElementBlock as n, openBlock as o, normalizeStyle as D, normalizeClass as he, createBlock as Ie, createCommentVNode as m, createElementVNode as z, createVNode as Se, unref as s, withCtx as G, renderSlot as R, normalizeProps as Q, guardReactiveProps as K, createSlots as $a, toDisplayString as N, Fragment as x, renderList as F, Teleport as Ea, mergeProps as ot } from "vue";
+import { c as Fa, t as Ta, i as Ia, p as ee, W as Nt, j as Oa, a5 as Pa, g as Ma, o as Ra, l as nt, Z as Ba, F as We, X as Da, _ as Na, $ as it, a0 as Oe, a as se, d as Z, U as Ut, z as Vt, M as ve, x as Ge, R as rt } from "./lib-DUaaQGCv.js";
 import { t as Ht, u as Ua } from "./useResponsive-DfdjqQps.js";
-import { u as Va, a as ut } from "./useNestedProp-CRoetJdp.js";
+import { u as Va, a as ut } from "./useNestedProp-xVOMUtFl.js";
 import { u as Ha, B as qa } from "./BaseScanner-BgWxam9d.js";
-import { u as Wa } from "./usePrinter-DCJzEiS8.js";
+import { u as Wa } from "./usePrinter-BdVu83IN.js";
 import { u as Ga } from "./useSvgExport-DrjCWun4.js";
 import { u as ja } from "./useTimeLabels-C5qMhpbe.js";
 import { u as Xa } from "./useThemeCheck-DGJ31Vi5.js";
 import { u as Za } from "./useChartAccessibility-9icAAmYg.js";
 import { u as Ya } from "./useTimeLabelCollider-CIsgDrl9.js";
-import Ja from "./img-DUzJeMlr.js";
-import { S as Qa } from "./Slicer-BFBBG6xv.js";
+import Ja from "./img-BYzbY8TZ.js";
+import { S as Qa } from "./Slicer-DX5CaF9H.js";
 import { _ as Ka } from "./_plugin-vue_export-helper-CHgC5LLL.js";
 const w = {
   LINE: "LINE",
   BAR: "BAR",
   DONUT: "DONUT"
 }, el = ["SERIE", "SERIES", "DATA", "VALUE", "VALUES", "NUM"];
-function tl({ dataset: f, barLineSwitch: O = 6, debug: C = !0 }) {
+function tl({ dataset: h, barLineSwitch: O = 6, debug: C = !0 }) {
   let V = null, X = null, ce = 0;
-  if ((typeof f == "number" || typeof f == "string") && C && console.warn(`The provided dataset (${f}) is not sufficient to build a chart`), Xe(f) && (de(f) && (f.length < O ? V = w.BAR : V = w.LINE, X = f, ce = f.length), je(f))) {
-    if (!ll(f))
+  if ((typeof h == "number" || typeof h == "string") && C && console.warn(`The provided dataset (${h}) is not sufficient to build a chart`), Xe(h) && (de(h) && (h.length < O ? V = w.BAR : V = w.LINE, X = h, ce = h.length), je(h))) {
+    if (!ll(h))
       return C && console.warn("The objects in the dataset array have a different data structure. Either keys or value types are different."), !1;
-    const Ze = Object.keys(f[0]), Pe = Object.values(f[0]);
+    const Ze = Object.keys(h[0]), Pe = Object.values(h[0]);
     if (!Ze.some((j) => ol(j)))
       return C && console.warn("The data type of the dataset objects in the array must contain one of the following keys: DATA, SERIES, VALUE, VALUES, NUM. Casing is not important."), !1;
-    qt(Pe, (j) => typeof j == "number") && (V = w.DONUT, X = f), qt(Pe, (j) => Array.isArray(j) && de(j)) && (Wt(f) > O ? V = w.LINE : V = w.BAR, ce = Wt(f), X = f.map((j) => ({
+    qt(Pe, (j) => typeof j == "number") && (V = w.DONUT, X = h), qt(Pe, (j) => Array.isArray(j) && de(j)) && (Wt(h) > O ? V = w.LINE : V = w.BAR, ce = Wt(h), X = h.map((j) => ({
       ...j,
       data: nl(j, (q) => de(q))
-    }))), f = f.map((j) => Gt(j)), X = X.map((j) => Gt(j));
+    }))), h = h.map((j) => Gt(j)), X = X.map((j) => Gt(j));
   }
   return {
-    dataset: f,
+    dataset: h,
     type: V,
     usableDataset: X,
     maxSeriesLength: ce
   };
 }
-function jt(f) {
-  return !f || Xe(f) && !f.length;
+function jt(h) {
+  return !h || Xe(h) && !h.length;
 }
-function Xe(f) {
-  return Array.isArray(f);
+function Xe(h) {
+  return Array.isArray(h);
 }
-function de(f) {
-  if (!Xe(f) || jt(f)) return !1;
-  const O = f.map((C) => Number(C));
+function de(h) {
+  if (!Xe(h) || jt(h)) return !1;
+  const O = h.map((C) => Number(C));
   return ![...new Set(O.flatMap((C) => typeof C == "number" && !isNaN(C)))].includes(!1);
 }
-function je(f) {
-  return !Xe(f) || jt(f) || !![...new Set(f.flatMap((C) => typeof C == "object" && !Array.isArray(C)))].includes(!1) ? !1 : !f.map((C) => Object.keys(C).length > 0).includes(!1);
+function je(h) {
+  return !Xe(h) || jt(h) || !![...new Set(h.flatMap((C) => typeof C == "object" && !Array.isArray(C)))].includes(!1) ? !1 : !h.map((C) => Object.keys(C).length > 0).includes(!1);
 }
-function al(f, O) {
-  const C = Object.keys(f).sort(), V = Object.keys(O).sort();
+function al(h, O) {
+  const C = Object.keys(h).sort(), V = Object.keys(O).sort();
   if (C.length !== V.length)
     return !1;
   for (let X = 0; X < C.length; X += 1) {
     const ce = C[X], Ae = V[X];
-    if (ce !== Ae || typeof f[ce] != typeof O[Ae])
+    if (ce !== Ae || typeof h[ce] != typeof O[Ae])
       return !1;
   }
   return !0;
 }
-function ll(f) {
-  if (f.length <= 1) return !0;
-  for (let O = 0; O < f.length; O += 1)
-    for (let C = O + 1; C < f.length; C += 1)
-      if (!al(f[O], f[C]))
+function ll(h) {
+  if (h.length <= 1) return !0;
+  for (let O = 0; O < h.length; O += 1)
+    for (let C = O + 1; C < h.length; C += 1)
+      if (!al(h[O], h[C]))
         return !1;
   return !0;
 }
-function ol(f) {
-  return el.includes(f.toUpperCase());
+function ol(h) {
+  return el.includes(h.toUpperCase());
 }
-function qt(f, O) {
+function qt(h, O) {
   let C = [];
-  for (let V = 0; V < f.length; V += 1)
-    C.push(O(f[V]));
+  for (let V = 0; V < h.length; V += 1)
+    C.push(O(h[V]));
   return C.includes(!0);
 }
-function Wt(f) {
-  return Math.max(...[...f].flatMap((O) => Object.values(O).filter((C) => de(C)).map((C) => C.length)));
+function Wt(h) {
+  return Math.max(...[...h].flatMap((O) => Object.values(O).filter((C) => de(C)).map((C) => C.length)));
 }
-function nl(f, O) {
-  return Object.values(f).filter((C) => O(C))[0];
+function nl(h, O) {
+  return Object.values(h).filter((C) => O(C))[0];
 }
-function Gt(f) {
+function Gt(h) {
   const O = {};
-  for (let C in f)
-    f.hasOwnProperty(C) && (O[C.toUpperCase()] = f[C]);
+  for (let C in h)
+    h.hasOwnProperty(C) && (O[C.toUpperCase()] = h[C]);
   return O;
 }
-const Xt = { backgroundColor: "#1A1A1A", color: "#CCCCCC", donutStroke: "#1A1A1A", xyAxisStroke: "#5A5A5A", xyGridStroke: "#4A4A4A", xyHighlighterColor: "#CCCCCC", zoomColor: "#4A4A4A", zoomHighlightColor: "#9A9A9A", zoomMinimap: { lineColor: "#424242", selectedColor: "#8A8A8A", indicatorColor: "#CCCCCC" }, tooltipBorderColor: "#5A5A5A", tooltipBackgroundOpacity: 70 }, Zt = { backgroundColor: "#FFF8E1", color: "#424242", xyAxisStroke: "#5D4037", xyGridStroke: "#5D403760", xyHighlighterColor: "#424242", zoomColor: "#5D4037", zoomHighlightColor: "#FF8A65", zoomMinimap: { lineColor: "#424242", selectedColor: "#FF8A65" }, tooltipBorderColor: "#FF8A65", tooltipBackgroundOpacity: 30 }, Yt = { backgroundColor: "#1E1E1E", color: "#BDBDBD", xyAxisStroke: "#5D4037", xyGridStroke: "#5D403780", xyHighlighterColor: "#FFF8E1", zoomColor: "#5D4037", zoomHighlightColor: "#FF8A65", zoomMinimap: { lineColor: "#FF6B6B", selectedColor: "#FF8A65", indicatorColor: "#FF8A65" }, tooltipBorderColor: "#FF8A65", tooltipBackgroundOpacity: 30 }, Jt = { backgroundColor: "#1A1A1A", color: "#99AA99", xyAxisStroke: "#5F6A5F", xyGridStroke: "#333333", xyHighlighterColor: "#66CC66", zoomColor: "#5F6A5F", zoomHighlightColor: "#66CC66", tooltipBorderColor: "#66CC66" }, Qt = { backgroundColor: "#fbfafa", color: "#8A9892", xyAxisStroke: "transparent", xyGridStroke: "transparent", xyHighlighterColor: "#8F837A", zoomColor: "#E0CFC3", zoomHighlightColor: "#8F837A" }, Kt = { backgroundColor: "#f6f6fb", color: "#50606C", xyAxisStroke: "#829C98", xyGridStroke: "#CCD6D3", xyHighlighterColor: "#7DA9B5", zoomColor: "#92B0AB", zoomHighlightColor: "#50606C" }, ea = {
+const Xt = { backgroundColor: "#1A1A1A", color: "#CCCCCC", donutStroke: "#1A1A1A", xyAxisStroke: "#5A5A5A", xyGridStroke: "#4A4A4A", xyHighlighterColor: "#CCCCCC", zoomColor: "#4A4A4A", zoomHighlightColor: "#9A9A9A", zoomMinimap: { lineColor: "#424242", selectedColor: "#8A8A8A", indicatorColor: "#CCCCCC" }, tooltipBorderColor: "#5A5A5A", tooltipBackgroundOpacity: 70 }, Zt = { backgroundColor: "#FFF8E1", color: "#424242", donutStroke: "#FFF8E1", xyAxisStroke: "#5D4037", xyGridStroke: "#5D403760", xyHighlighterColor: "#424242", zoomColor: "#5D4037", zoomHighlightColor: "#FF8A65", zoomMinimap: { lineColor: "#424242", selectedColor: "#FF8A65" }, tooltipBorderColor: "#FF8A65", tooltipBackgroundOpacity: 30 }, Yt = { backgroundColor: "#1E1E1E", color: "#BDBDBD", donutStroke: "#1E1E1E", xyAxisStroke: "#5D4037", xyGridStroke: "#5D403780", xyHighlighterColor: "#FFF8E1", zoomColor: "#5D4037", zoomHighlightColor: "#FF8A65", zoomMinimap: { lineColor: "#FF6B6B", selectedColor: "#FF8A65", indicatorColor: "#FF8A65" }, tooltipBorderColor: "#FF8A65", tooltipBackgroundOpacity: 30 }, Jt = { backgroundColor: "#1A1A1A", color: "#99AA99", xyAxisStroke: "#5F6A5F", xyGridStroke: "#333333", donutStroke: "#1A1A1A", xyHighlighterColor: "#66CC66", zoomColor: "#5F6A5F", zoomHighlightColor: "#66CC66", tooltipBorderColor: "#66CC66" }, Qt = { backgroundColor: "#fbfafa", color: "#8A9892", donutStroke: "#fbfafa", xyAxisStroke: "transparent", xyGridStroke: "transparent", xyHighlighterColor: "#8F837A", zoomColor: "#E0CFC3", zoomHighlightColor: "#8F837A" }, Kt = { backgroundColor: "#f6f6fb", color: "#50606C", donutStroke: "#f6f6fb", xyAxisStroke: "#829C98", xyGridStroke: "#CCD6D3", xyHighlighterColor: "#7DA9B5", zoomColor: "#92B0AB", zoomHighlightColor: "#50606C" }, ea = {
   default: {},
   dark: Xt,
   celebration: Zt,
@@ -108,7 +108,7 @@ const Xt = { backgroundColor: "#1A1A1A", color: "#CCCCCC", donutStroke: "#1A1A1A
   default: ea,
   hack: Jt,
   zen: Qt
-}, Symbol.toStringTag, { value: "Module" })), il = ["id"], rl = ["id"], ul = ["xmlns", "viewBox"], sl = ["x", "y", "width", "height"], vl = ["x", "y", "width", "height"], dl = ["width", "height"], cl = ["id"], hl = ["id"], fl = ["id"], ml = ["flood-color"], gl = {
+}, Symbol.toStringTag, { value: "Module" })), il = ["id"], rl = ["id"], ul = ["xmlns", "viewBox"], sl = ["x", "y", "width", "height"], vl = ["x", "y", "width", "height"], dl = ["width", "height"], cl = ["id"], fl = ["id"], hl = ["id"], ml = ["flood-color"], gl = {
   key: 0,
   class: "donut-label-connectors"
 }, pl = ["d", "stroke", "stroke-width", "filter"], yl = ["cx", "cy", "r", "fill", "filter"], xl = { class: "donut" }, kl = ["d", "fill", "stroke", "stroke-width", "filter"], bl = ["d", "onMouseenter", "onMouseout", "onClick"], Sl = {
@@ -120,7 +120,7 @@ const Xt = { backgroundColor: "#1A1A1A", color: "#CCCCCC", donutStroke: "#1A1A1A
 }, _l = ["x", "y", "font-size", "fill"], zl = ["x", "y", "font-size", "fill"], $l = {
   key: 0,
   class: "line-grid"
-}, Fl = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], El = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], Tl = {
+}, El = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], Fl = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], Tl = {
   key: 1,
   class: "line-axis"
 }, Il = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], Ol = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], Pl = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], Ml = ["x", "y", "font-size", "fill"], Rl = {
@@ -141,7 +141,7 @@ const Xt = { backgroundColor: "#1A1A1A", color: "#CCCCCC", donutStroke: "#1A1A1A
 }, lo = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], oo = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], no = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], io = ["x", "y", "font-size", "fill"], ro = {
   key: 3,
   class: "periodLabels"
-}, uo = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], so = { key: 0 }, vo = ["font-size", "text-anchor", "fill", "transform"], co = ["font-size", "text-anchor", "fill", "transform", "innerHTML"], ho = { class: "plots" }, fo = ["x", "width", "height", "y", "fill", "stroke", "stroke-width"], mo = ["to"], go = ["from", "to"], po = {
+}, uo = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], so = { key: 0 }, vo = ["font-size", "text-anchor", "fill", "transform"], co = ["font-size", "text-anchor", "fill", "transform", "innerHTML"], fo = { class: "plots" }, ho = ["x", "width", "height", "y", "fill", "stroke", "stroke-width"], mo = ["to"], go = ["from", "to"], po = {
   key: 4,
   class: "dataLabels"
 }, yo = ["x", "y", "font-size", "fill"], xo = {
@@ -153,7 +153,7 @@ const Xt = { backgroundColor: "#1A1A1A", color: "#CCCCCC", donutStroke: "#1A1A1A
 }, So = ["font-size", "fill", "x", "y"], Ao = ["font-size", "fill", "x", "y"], wo = ["font-size", "fill", "transform"], Co = ["font-size", "fill", "transform"], Lo = {
   key: 5,
   class: "vue-data-ui-watermark"
-}, _o = ["id"], zo = ["onClick"], $o = ["onClick"], Fo = ["onClick"], Eo = {
+}, _o = ["id"], zo = ["onClick"], $o = ["onClick"], Eo = ["onClick"], Fo = {
   key: 1,
   class: "vue-ui-quick-chart-not-processable"
 }, To = {
@@ -173,8 +173,8 @@ const Xt = { backgroundColor: "#1A1A1A", color: "#CCCCCC", donutStroke: "#1A1A1A
     }
   },
   emits: ["selectDatapoint", "selectLegend"],
-  setup(f, { expose: O, emit: C }) {
-    const V = Ee(() => import("./BaseIcon-CofSxalQ.js")), X = Ee(() => import("./PackageVersion-DpSE-1Wc.js")), ce = Ee(() => import("./PenAndPaper-HCZQTkqi.js")), Ae = Ee(() => import("./Tooltip-WD0Ros6G.js")), st = Ee(() => import("./UserOptions-B3I-s3Lw.js")), { vue_ui_quick_chart: Ze } = Va(), { isThemeValid: Pe, warnInvalidTheme: j } = Xa(), q = f, ne = A(null), vt = A(null), dt = A(null), ct = A(null), Y = A(Ea()), me = A(!1), we = A(null), ge = A(""), oe = A(null), ht = A(null), ft = A(null), L = A([]), mt = A(0), Me = A(0), gt = A(!1), Ce = A(null), Le = A(null), ie = A(null), Re = A(null), pt = A(null), yt = A(null);
+  setup(h, { expose: O, emit: C }) {
+    const V = Fe(() => import("./BaseIcon-5acZpJev.js")), X = Fe(() => import("./PackageVersion-D2zuSCLX.js")), ce = Fe(() => import("./PenAndPaper-Bfbd6BHc.js")), Ae = Fe(() => import("./Tooltip-De7i-i20.js")), st = Fe(() => import("./UserOptions-D-GV6kfB.js")), { vue_ui_quick_chart: Ze } = Va(), { isThemeValid: Pe, warnInvalidTheme: j } = Xa(), q = h, ne = A(null), vt = A(null), dt = A(null), ct = A(null), Y = A(Fa()), me = A(!1), we = A(null), ge = A(""), oe = A(null), ft = A(null), ht = A(null), L = A([]), mt = A(0), Me = A(0), gt = A(!1), Ce = A(null), Le = A(null), ie = A(null), Re = A(null), pt = A(null), yt = A(null);
     A("#FFFFFF");
     const e = A(Ke()), Ye = M(() => !!e.value.debug), { loading: U, FINAL_DATASET: ta, manualLoading: xt } = Ha({
       ...La(q),
@@ -283,7 +283,7 @@ const Xt = { backgroundColor: "#1A1A1A", color: "#CCCCCC", donutStroke: "#1A1A1A
         showTooltip: e.value.showTooltip
       };
     }, { immediate: !0 });
-    const he = Bt(null), ke = Bt(null);
+    const fe = Bt(null), ke = Bt(null);
     _a(async () => {
       gt.value = !0, wt();
     });
@@ -295,19 +295,19 @@ const Xt = { backgroundColor: "#1A1A1A", color: "#CCCCCC", donutStroke: "#1A1A1A
             title: e.value.title ? vt.value : null,
             legend: e.value.showLegend ? dt.value : null,
             slicer: [w.BAR, w.LINE].includes($.value) && e.value.zoomXy && k.value.maxSeriesLength > 1 ? ct.value : null,
-            source: ht.value,
-            noTitle: ft.value
+            source: ft.value,
+            noTitle: ht.value
           });
           requestAnimationFrame(() => {
             S.value.width = u, S.value.height = t;
           });
         });
-        he.value && (ke.value && he.value.unobserve(ke.value), he.value.disconnect()), he.value = new ResizeObserver(a), ke.value = ne.value.parentNode, he.value.observe(ke.value);
+        fe.value && (ke.value && fe.value.unobserve(ke.value), fe.value.disconnect()), fe.value = new ResizeObserver(a), ke.value = ne.value.parentNode, fe.value.observe(ke.value);
       }
-      Et();
+      Ft();
     }
     Dt(() => {
-      he.value && (ke.value && he.value.unobserve(ke.value), he.value.disconnect());
+      fe.value && (ke.value && fe.value.unobserve(ke.value), fe.value.disconnect());
     });
     const na = M(() => {
       switch ($.value) {
@@ -381,79 +381,79 @@ const Xt = { backgroundColor: "#1A1A1A", color: "#CCCCCC", donutStroke: "#1A1A1A
     }
     const $t = M(() => e.value.donutThicknessRatio < 0.01 ? 0.01 : e.value.donutThicknessRatio > 0.4 ? 0.4 : e.value.donutThicknessRatio), T = M(() => {
       if ($.value !== w.DONUT) return null;
-      const a = k.value.dataset.map((h, _) => ({
-        ...h,
-        value: h.VALUE || h.DATA || h.SERIE || h.VALUES || h.NUM || 0,
-        name: h.NAME || h.DESCRIPTION || h.TITLE || h.LABEL || `Serie ${_}`,
+      const a = k.value.dataset.map((f, _) => ({
+        ...f,
+        value: f.VALUE || f.DATA || f.SERIE || f.VALUES || f.NUM || 0,
+        name: f.NAME || f.DESCRIPTION || f.TITLE || f.LABEL || `Serie ${_}`,
         id: `donut_${_}`
-      })).map((h, _) => ({
-        ...h,
-        color: h.COLOR ? nt(h.COLOR) : _e.value[_ + e.value.paletteStartIndex] || ee[_ + e.value.paletteStartIndex] || ee[(_ + e.value.paletteStartIndex) % ee.length],
-        immutableValue: h.value
+      })).map((f, _) => ({
+        ...f,
+        color: f.COLOR ? nt(f.COLOR) : _e.value[_ + e.value.paletteStartIndex] || ee[_ + e.value.paletteStartIndex] || ee[(_ + e.value.paletteStartIndex) % ee.length],
+        immutableValue: f.value
       }));
-      function u(h, _) {
+      function u(f, _) {
         return Z({
-          v: isNaN(h.value / Ct(_)) ? 0 : h.value / Ct(_) * 100,
+          v: isNaN(f.value / Ct(_)) ? 0 : f.value / Ct(_) * 100,
           s: "%",
           r: e.value.dataLabelRoundingPercentage
         });
       }
-      function t(h) {
-        return h.proportion * 100 > e.value.donutHideLabelUnderPercentage;
+      function t(f) {
+        return f.proportion * 100 > e.value.donutHideLabelUnderPercentage;
       }
-      function l(h, _) {
-        const d = ze.value.dataset.find((g, F) => `donut_${F}` === h).VALUE;
+      function l(f, _) {
+        const d = ze.value.dataset.find((g, E) => `donut_${E}` === f).VALUE;
         return Math.abs(String(Number(d.toFixed(0))).length - String(Number(_.toFixed(0))).length);
       }
-      function r({ datapoint: h, seriesIndex: _ }) {
-        we.value = { datapoint: h, seriesIndex: _, config: e.value, dataset: a }, oe.value = h.id;
+      function r({ datapoint: f, seriesIndex: _ }) {
+        we.value = { datapoint: f, seriesIndex: _, config: e.value, dataset: a }, oe.value = f.id;
         const d = e.value.tooltipCustomFormat;
-        if (e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: h, seriesIndex: _ }), Ge(d) && rt(() => d({
-          datapoint: h,
+        if (e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: f, seriesIndex: _ }), Ge(d) && rt(() => d({
+          datapoint: f,
           seriesIndex: _,
           series: a,
           config: e.value
         })))
           ge.value = d({
-            datapoint: h,
+            datapoint: f,
             seriesIndex: _,
             series: a,
             config: e.value
           });
         else {
           let i = "";
-          i += `<div style="width:100%;text-align:center;border-bottom:1px solid ${e.value.tooltipBorderColor};padding-bottom:6px;margin-bottom:3px;">${h.name}</div>`, i += `<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="${h.color}"/></svg>`, i += `<b>${se(
+          i += `<div style="width:100%;text-align:center;border-bottom:1px solid ${e.value.tooltipBorderColor};padding-bottom:6px;margin-bottom:3px;">${f.name}</div>`, i += `<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="${f.color}"/></svg>`, i += `<b>${se(
             e.value.formatter,
-            h.value,
+            f.value,
             Z({
               p: e.value.valuePrefix,
-              v: h.value,
+              v: f.value,
               s: e.value.valueSuffix,
               r: e.value.dataLabelRoundingValue
             }),
-            { datapoint: h, seriesIndex: _ }
-          )}</b>`, i += `<span>(${Z({ v: h.proportion * 100, s: "%", r: e.value.dataLabelRoundingPercentage })})</span></div>`, ge.value = `<div>${i}</div>`;
+            { datapoint: f, seriesIndex: _ }
+          )}</b>`, i += `<span>(${Z({ v: f.proportion * 100, s: "%", r: e.value.dataLabelRoundingPercentage })})</span></div>`, ge.value = `<div>${i}</div>`;
         }
         me.value = !0;
       }
-      function p({ datapoint: h, seriesIndex: _ }) {
-        e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: h, seriesIndex: _ }), me.value = !1, oe.value = null, re.value = null;
+      function p({ datapoint: f, seriesIndex: _ }) {
+        e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: f, seriesIndex: _ }), me.value = !1, oe.value = null, re.value = null;
       }
-      function b({ datapoint: h, seriesIndex: _ }) {
-        e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: h, seriesIndex: _ }), ye("selectDatapoint", h);
+      function b({ datapoint: f, seriesIndex: _ }) {
+        e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: f, seriesIndex: _ }), ye("selectDatapoint", f);
       }
       const I = {
         centerX: S.value.width / 2,
         centerY: S.value.height / 2
-      }, P = a.filter((h) => !L.value.includes(h.id)).map((h) => h.value || 0).reduce((h, _) => h + _, 0), ae = a.map((h, _) => ({
-        ...h,
-        proportion: (h.value || 0) / P,
-        value: h.value || 0,
-        absoluteValue: ze.value.dataset.find((d, i) => `donut_${i}` === h.id).VALUE,
+      }, P = a.filter((f) => !L.value.includes(f.id)).map((f) => f.value || 0).reduce((f, _) => f + _, 0), ae = a.map((f, _) => ({
+        ...f,
+        proportion: (f.value || 0) / P,
+        value: f.value || 0,
+        absoluteValue: ze.value.dataset.find((d, i) => `donut_${i}` === f.id).VALUE,
         shape: "circle"
       })), ue = S.value.width / 2, J = S.value.height / 2, W = S.value.height * e.value.donutRadiusRatio;
       return {
-        dataset: ae.filter((h) => !L.value.includes(h.id)),
+        dataset: ae.filter((f) => !L.value.includes(f.id)),
         legend: ae,
         drawingArea: I,
         displayArcPercentage: u,
@@ -467,7 +467,7 @@ const Xt = { backgroundColor: "#1A1A1A", color: "#CCCCCC", donutStroke: "#1A1A1A
         cy: J,
         radius: W,
         chart: Ba(
-          { series: a.filter((h) => !L.value.includes(h.id)) },
+          { series: a.filter((f) => !L.value.includes(f.id)) },
           ue,
           J,
           W,
@@ -485,12 +485,12 @@ const Xt = { backgroundColor: "#1A1A1A", color: "#CCCCCC", donutStroke: "#1A1A1A
       end: k.value.maxSeriesLength
     });
     function ua() {
-      Et();
+      Ft();
     }
-    const Ft = A(null);
-    async function Et() {
+    const Et = A(null);
+    async function Ft() {
       await lt(), await lt();
-      const { zoomStartIndex: a, zoomEndIndex: u } = e.value, t = Ft.value;
+      const { zoomStartIndex: a, zoomEndIndex: u } = e.value, t = Et.value;
       (a != null || u != null) && t ? (a != null && t.setStartValue(a), u != null && t.setEndValue(sa(u + 1))) : (y.value = {
         start: 0,
         end: k.value.maxSeriesLength
@@ -579,7 +579,7 @@ const Xt = { backgroundColor: "#1A1A1A", color: "#CCCCCC", donutStroke: "#1A1A1A
         color: d.COLOR ? nt(d.COLOR) : _e.value[i + e.value.paletteStartIndex] || ee[i + e.value.paletteStartIndex] || ee[(i + e.value.paletteStartIndex) % ee.length],
         values: d.values.slice(y.value.start, y.value.end),
         absoluteValues: d.values,
-        absoluteIndices: d.values.map((g, F) => F).slice(y.value.start, y.value.end)
+        absoluteIndices: d.values.map((g, E) => E).slice(y.value.start, y.value.end)
       })));
       const r = {
         max: Math.max(...l.filter((d) => !L.value.includes(d.id)).flatMap((d) => d.values)),
@@ -592,8 +592,8 @@ const Xt = { backgroundColor: "#1A1A1A", color: "#CCCCCC", donutStroke: "#1A1A1A
       })), ue = l.map((d, i) => ({
         ...d,
         shape: "circle",
-        coordinates: d.values.map((g, F) => ({
-          x: t.left + P * (F + 1) - P / 2,
+        coordinates: d.values.map((g, E) => ({
+          x: t.left + P * (E + 1) - P / 2,
           y: t.bottom - (g + b) / (p.max + b) * t.height,
           value: g
         }))
@@ -631,9 +631,9 @@ const Xt = { backgroundColor: "#1A1A1A", color: "#CCCCCC", donutStroke: "#1A1A1A
             config: e.value
           });
         else {
-          let F = "";
-          te.value[i[0].absoluteIndex] && (F += `<div style="border-bottom:1px solid ${e.value.tooltipBorderColor};padding-bottom:6px;margin-bottom:3px;">${te.value[i[0].absoluteIndex].text}</div>`), i.forEach((B, H) => {
-            F += `
+          let E = "";
+          te.value[i[0].absoluteIndex] && (E += `<div style="border-bottom:1px solid ${e.value.tooltipBorderColor};padding-bottom:6px;margin-bottom:3px;">${te.value[i[0].absoluteIndex].text}</div>`), i.forEach((B, H) => {
+            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="${B.color}"/></svg>
                         <span>${B.name}:</span>
@@ -651,11 +651,11 @@ const Xt = { backgroundColor: "#1A1A1A", color: "#CCCCCC", donutStroke: "#1A1A1A
                         </b>
                     </div>
                 `;
-          }), ge.value = F;
+          }), ge.value = E;
         }
         me.value = !0;
       }
-      function h(d) {
+      function f(d) {
         const i = J(d);
         e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: i, seriesIndex: d + y.value.start }), oe.value = null, re.value = null, me.value = !1;
       }
@@ -672,7 +672,7 @@ const Xt = { backgroundColor: "#1A1A1A", color: "#CCCCCC", donutStroke: "#1A1A1A
         slotSize: P,
         yLabels: ae,
         useTooltip: W,
-        killTooltip: h,
+        killTooltip: f,
         selectDatapoint: _
       };
     }), v = M(() => {
@@ -714,7 +714,7 @@ const Xt = { backgroundColor: "#1A1A1A", color: "#CCCCCC", donutStroke: "#1A1A1A
         color: i.COLOR ? nt(i.COLOR) : _e.value[g + e.value.paletteStartIndex] || ee[g + e.value.paletteStartIndex] || ee[(g + e.value.paletteStartIndex) % ee.length],
         values: i.values.slice(y.value.start, y.value.end),
         absoluteValues: i.values,
-        absoluteIndices: i.values.map((F, B) => B).slice(y.value.start, y.value.end)
+        absoluteIndices: i.values.map((E, B) => B).slice(y.value.start, y.value.end)
       })));
       const r = {
         max: Math.max(...l.filter((i) => !L.value.includes(i.id)).flatMap((i) => i.values)) < 0 ? 0 : Math.max(...l.filter((i) => !L.value.includes(i.id)).flatMap((i) => i.values)),
@@ -727,26 +727,26 @@ const Xt = { backgroundColor: "#1A1A1A", color: "#CCCCCC", donutStroke: "#1A1A1A
       })), ue = l.map((i, g) => ({
         ...i,
         shape: "square",
-        coordinates: i.values.map((F, B) => {
-          const H = (F + b) / (r.max + b) * t.height, le = Math.abs(F) / Math.abs(r.min) * (t.height - I), at = b / (r.max + b) * t.height, Fe = P / l.filter((pe) => !L.value.includes(pe.id)).length - e.value.barGap / l.filter((pe) => !L.value.includes(pe.id)).length;
+        coordinates: i.values.map((E, B) => {
+          const H = (E + b) / (r.max + b) * t.height, le = Math.abs(E) / Math.abs(r.min) * (t.height - I), at = b / (r.max + b) * t.height, Ee = P / l.filter((pe) => !L.value.includes(pe.id)).length - e.value.barGap / l.filter((pe) => !L.value.includes(pe.id)).length;
           return {
-            x: t.left + P * B + Fe * g + e.value.barGap / 2,
-            y: F > 0 ? t.bottom - H : I,
-            height: F > 0 ? H - at : le,
-            value: F,
-            width: Fe
+            x: t.left + P * B + Ee * g + e.value.barGap / 2,
+            y: E > 0 ? t.bottom - H : I,
+            height: E > 0 ? H - at : le,
+            value: E,
+            width: Ee
           };
         })
       })), J = l.filter((i) => !L.value.includes(i.id)).map((i, g) => ({
         ...i,
-        coordinates: i.values.map((F, B) => {
-          const H = (F + b) / (r.max + b) * t.height, le = Math.abs(F) / (r.max + b) * t.height, at = b / (r.max + b) * t.height, Fe = P / l.filter((pe) => !L.value.includes(pe.id)).length - e.value.barGap / l.filter((pe) => !L.value.includes(pe.id)).length;
+        coordinates: i.values.map((E, B) => {
+          const H = (E + b) / (r.max + b) * t.height, le = Math.abs(E) / (r.max + b) * t.height, at = b / (r.max + b) * t.height, Ee = P / l.filter((pe) => !L.value.includes(pe.id)).length - e.value.barGap / l.filter((pe) => !L.value.includes(pe.id)).length;
           return {
-            x: t.left + P * B + Fe * g + e.value.barGap / 2,
-            y: F > 0 ? t.bottom - H : I,
-            height: F > 0 ? H - at : le,
-            value: F,
-            width: Fe
+            x: t.left + P * B + Ee * g + e.value.barGap / 2,
+            y: E > 0 ? t.bottom - H : I,
+            height: E > 0 ? H - at : le,
+            value: E,
+            width: Ee
           };
         })
       }));
@@ -757,18 +757,18 @@ const Xt = { backgroundColor: "#1A1A1A", color: "#CCCCCC", donutStroke: "#1A1A1A
           absoluteIndex: g.absoluteIndices[i]
         })).filter((g) => !L.value.includes(g.id));
       }
-      function h(i) {
+      function f(i) {
         oe.value = i, re.value = i;
         const g = W(i);
         we.value = { datapoint: g, seriesIndex: i, config: e.value, dataset: l };
-        const F = e.value.tooltipCustomFormat;
-        if (e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: g, seriesIndex: i + y.value.start }), Ge(F) && rt(() => F({
+        const E = e.value.tooltipCustomFormat;
+        if (e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: g, seriesIndex: i + y.value.start }), Ge(E) && rt(() => E({
           datapoint: g,
           seriesIndex: i,
           series: l,
           config: e.value
         })))
-          ge.value = F({
+          ge.value = E({
             point: g,
             seriesIndex: i,
             series: l,
@@ -816,7 +816,7 @@ const Xt = { backgroundColor: "#1A1A1A", color: "#CCCCCC", donutStroke: "#1A1A1A
         extremes: r,
         slotSize: P,
         yLabels: ae,
-        useTooltip: h,
+        useTooltip: f,
         killTooltip: _,
         selectDatapoint: d
       };
@@ -831,10 +831,10 @@ const Xt = { backgroundColor: "#1A1A1A", color: "#CCCCCC", donutStroke: "#1A1A1A
         l.style.animation = "none", l.style.transition = "none", l.style.opacity = u, l.style.transform = `scale(${t})`, l.style.transformBox = "fill-box", l.style.transformOrigin = "50% 50%";
       });
     }
-    function ha(a) {
+    function fa(a) {
       return a.cx?.baseVal?.value ?? parseFloat(a.getAttribute("cx"));
     }
-    function fa(a) {
+    function ha(a) {
       const u = a.getAttribute("x");
       if (u != null) return parseFloat(u);
       const t = a.getCTM?.();
@@ -868,21 +868,21 @@ const Xt = { backgroundColor: "#1A1A1A", color: "#CCCCCC", donutStroke: "#1A1A1A
       labelStep: I = 0,
       intraSeriesStep: P = 0
     } = {}) {
-      const ae = Array.isArray(Ce?.value) ? Ce.value : [Ce?.value].filter(Boolean), ue = Array.isArray(Le?.value) ? Le.value : [Le?.value].filter(Boolean), J = [...ae, ...ue].filter(Boolean), W = ne?.value || null, h = W ? Array.from(W.querySelectorAll(".vue-ui-quick-chart-plot")) : [], _ = W ? Array.from(W.querySelectorAll(".vue-ui-quick-chart-label")) : [];
-      J.forEach(ca), It(h, { fromOpacity: "0", fromScale: "0.75" }), It(_, { fromOpacity: "0", fromScale: "0.98" }), h.forEach((g) => g.classList.remove("quick-animation")), _.forEach((g) => g.classList.remove("quick-animation")), W && W.offsetWidth;
-      const d = h.length ? Ot(h, ha) : [], i = _.length ? Ot(_, fa) : [];
+      const ae = Array.isArray(Ce?.value) ? Ce.value : [Ce?.value].filter(Boolean), ue = Array.isArray(Le?.value) ? Le.value : [Le?.value].filter(Boolean), J = [...ae, ...ue].filter(Boolean), W = ne?.value || null, f = W ? Array.from(W.querySelectorAll(".vue-ui-quick-chart-plot")) : [], _ = W ? Array.from(W.querySelectorAll(".vue-ui-quick-chart-label")) : [];
+      J.forEach(ca), It(f, { fromOpacity: "0", fromScale: "0.75" }), It(_, { fromOpacity: "0", fromScale: "0.98" }), f.forEach((g) => g.classList.remove("quick-animation")), _.forEach((g) => g.classList.remove("quick-animation")), W && W.offsetWidth;
+      const d = f.length ? Ot(f, fa) : [], i = _.length ? Ot(_, ha) : [];
       requestAnimationFrame(() => {
         requestAnimationFrame(() => {
           J.forEach((g) => {
             g.style.transition = `stroke-dashoffset ${a}ms ${u}`, g.style.strokeDashoffset = "0";
-          }), d.forEach((g, F) => {
+          }), d.forEach((g, E) => {
             g.items.forEach((B, H) => {
-              const le = r + F * b + H * P;
+              const le = r + E * b + H * P;
               B.style.transition = `opacity ${t}ms ease-out ${le}ms, transform ${t}ms ease-out ${le}ms`, B.style.opacity = "1", B.style.transform = "scale(1)";
             });
-          }), i.forEach((g, F) => {
+          }), i.forEach((g, E) => {
             g.items.forEach((B, H) => {
-              const le = p + F * I + H * P;
+              const le = p + E * I + H * P;
               B.style.transition = `opacity ${l}ms ease-out ${le}ms, transform ${l}ms ease-out ${le}ms`, B.style.opacity = "1", B.style.transform = "scale(1)";
             });
           });
@@ -992,7 +992,7 @@ const Xt = { backgroundColor: "#1A1A1A", color: "#CCCCCC", donutStroke: "#1A1A1A
       id: `${$.value}_${Y.value}`,
       ref_key: "quickChart",
       ref: ne,
-      class: fe({ "vue-data-ui-component": !0, "vue-ui-quick-chart": !0, "vue-data-ui-wrapper-fullscreen": He.value }),
+      class: he({ "vue-data-ui-component": !0, "vue-ui-quick-chart": !0, "vue-data-ui-wrapper-fullscreen": He.value }),
       style: D(`background:${e.value.backgroundColor};color:${e.value.color};font-family:${e.value.fontFamily}; position: relative; ${e.value.responsive ? "height: 100%" : ""}`),
       onMouseenter: u[2] || (u[2] = () => bt(!0)),
       onMouseleave: u[3] || (u[3] = () => bt(!1))
@@ -1028,7 +1028,7 @@ const Xt = { backgroundColor: "#1A1A1A", color: "#CCCCCC", donutStroke: "#1A1A1A
       oa.value ? (o(), n("div", {
         key: 1,
         ref_key: "noTitle",
-        ref: ft,
+        ref: ht,
         class: "vue-data-ui-no-title-space",
         style: "height:36px; width: 100%;background:transparent"
       }, null, 512)) : m("", !0),
@@ -1182,7 +1182,7 @@ const Xt = { backgroundColor: "#1A1A1A", color: "#CCCCCC", donutStroke: "#1A1A1A
               in: "SourceGraphic",
               stdDeviation: 2,
               id: `blur_std_${Y.value}`
-            }, null, 8, hl),
+            }, null, 8, fl),
             u[4] || (u[4] = z("feColorMatrix", {
               type: "saturate",
               values: "0"
@@ -1199,11 +1199,11 @@ const Xt = { backgroundColor: "#1A1A1A", color: "#CCCCCC", donutStroke: "#1A1A1A
               "flood-opacity": "0.5",
               "flood-color": e.value.donutShadowColor
             }, null, 8, ml)
-          ], 8, fl)
+          ], 8, hl)
         ]),
         $.value === w.DONUT ? (o(), n(x, { key: 3 }, [
           e.value.showDataLabels ? (o(), n("g", gl, [
-            (o(!0), n(x, null, E(T.value.chart, (t, l) => (o(), n(x, null, [
+            (o(!0), n(x, null, F(T.value.chart, (t, l) => (o(), n(x, null, [
               T.value.isArcBigEnough(t) ? (o(), n("path", {
                 key: 0,
                 d: s(Na)(t, { x: S.value.width / 2, y: S.value.height / 2 }, 16, 16, !1, !1, S.value.height * $t.value, 12, e.value.donutCurvedMarkers),
@@ -1224,14 +1224,14 @@ const Xt = { backgroundColor: "#1A1A1A", color: "#CCCCCC", donutStroke: "#1A1A1A
             filter: e.value.donutUseShadow ? `url(#shadow_${Y.value})` : ""
           }, null, 8, yl),
           z("g", xl, [
-            (o(!0), n(x, null, E(T.value.chart, (t, l) => (o(), n("path", {
+            (o(!0), n(x, null, F(T.value.chart, (t, l) => (o(), n("path", {
               d: t.arcSlice,
               fill: t.color,
               stroke: e.value.donutStroke || e.value.backgroundColor,
               "stroke-width": e.value.donutStrokeWidth,
               filter: $e(t.id)
             }, null, 8, kl))), 256)),
-            (o(!0), n(x, null, E(T.value.chart, (t, l) => (o(), n("path", {
+            (o(!0), n(x, null, F(T.value.chart, (t, l) => (o(), n("path", {
               d: t.arcSlice,
               fill: "transparent",
               onMouseenter: (r) => T.value.useTooltip({ datapoint: t, seriesIndex: l }),
@@ -1240,7 +1240,7 @@ const Xt = { backgroundColor: "#1A1A1A", color: "#CCCCCC", donutStroke: "#1A1A1A
             }, null, 40, bl))), 256))
           ]),
           e.value.showDataLabels ? (o(), n("g", Sl, [
-            (o(!0), n(x, null, E(T.value.chart, (t, l) => (o(), n(x, null, [
+            (o(!0), n(x, null, F(T.value.chart, (t, l) => (o(), n(x, null, [
               T.value.isArcBigEnough(t) ? (o(), n("circle", {
                 key: 0,
                 cx: s(Oe)(t).x,
@@ -1305,7 +1305,7 @@ const Xt = { backgroundColor: "#1A1A1A", color: "#CCCCCC", donutStroke: "#1A1A1A
         ], 64)) : m("", !0),
         $.value === w.LINE ? (o(), n(x, { key: 4 }, [
           e.value.xyShowGrid ? (o(), n("g", $l, [
-            (o(!0), n(x, null, E(c.value.yLabels, (t) => (o(), n(x, null, [
+            (o(!0), n(x, null, F(c.value.yLabels, (t) => (o(), n(x, null, [
               t.y <= c.value.drawingArea.bottom ? (o(), n("line", {
                 key: 0,
                 x1: c.value.drawingArea.left,
@@ -1315,9 +1315,9 @@ const Xt = { backgroundColor: "#1A1A1A", color: "#CCCCCC", donutStroke: "#1A1A1A
                 stroke: e.value.xyGridStroke,
                 "stroke-width": e.value.xyGridStrokeWidth,
                 "stroke-linecap": "round"
-              }, null, 8, Fl)) : m("", !0)
+              }, null, 8, El)) : m("", !0)
             ], 64))), 256)),
-            (o(!0), n(x, null, E(c.value.extremes.maxSeries + 1, (t, l) => (o(), n("line", {
+            (o(!0), n(x, null, F(c.value.extremes.maxSeries + 1, (t, l) => (o(), n("line", {
               x1: c.value.drawingArea.left + c.value.slotSize * l,
               x2: c.value.drawingArea.left + c.value.slotSize * l,
               y1: c.value.drawingArea.top,
@@ -1325,7 +1325,7 @@ const Xt = { backgroundColor: "#1A1A1A", color: "#CCCCCC", donutStroke: "#1A1A1A
               stroke: e.value.xyGridStroke,
               "stroke-width": e.value.xyGridStrokeWidth,
               "stroke-linecap": "round"
-            }, null, 8, El))), 256))
+            }, null, 8, Fl))), 256))
           ])) : m("", !0),
           e.value.xyShowAxis ? (o(), n("g", Tl, [
             z("line", {
@@ -1353,7 +1353,7 @@ const Xt = { backgroundColor: "#1A1A1A", color: "#CCCCCC", donutStroke: "#1A1A1A
             ref_key: "scaleLabels",
             ref: Re
           }, [
-            (o(!0), n(x, null, E(c.value.yLabels, (t, l) => (o(), n(x, null, [
+            (o(!0), n(x, null, F(c.value.yLabels, (t, l) => (o(), n(x, null, [
               t.y <= c.value.drawingArea.bottom ? (o(), n("line", {
                 key: 0,
                 x1: t.x + 4,
@@ -1385,7 +1385,7 @@ const Xt = { backgroundColor: "#1A1A1A", color: "#CCCCCC", donutStroke: "#1A1A1A
             ], 64))), 256))
           ], 512)) : m("", !0),
           e.value.xyShowScale && e.value.xyPeriods.length ? (o(), n("g", Rl, [
-            (o(!0), n(x, null, E(te.value.map((t) => t.text), (t, l) => (o(), n(x, null, [
+            (o(!0), n(x, null, F(te.value.map((t) => t.text), (t, l) => (o(), n(x, null, [
               !e.value.xyPeriodsShowOnlyAtModulo || e.value.xyPeriodsShowOnlyAtModulo && l % Math.floor((y.value.end - y.value.start) / be.value) === 0 || y.value.end - y.value.start <= be.value ? (o(), n("line", {
                 key: 0,
                 x1: c.value.drawingArea.left + c.value.slotSize * (l + 1) - c.value.slotSize / 2,
@@ -1401,7 +1401,7 @@ const Xt = { backgroundColor: "#1A1A1A", color: "#CCCCCC", donutStroke: "#1A1A1A
               ref_key: "timeLabelsEls",
               ref: ie
             }, [
-              (o(!0), n(x, null, E(te.value.map((t) => t.text), (t, l) => (o(), n(x, null, [
+              (o(!0), n(x, null, F(te.value.map((t) => t.text), (t, l) => (o(), n(x, null, [
                 !e.value.xyPeriodsShowOnlyAtModulo || e.value.xyPeriodsShowOnlyAtModulo && l % Math.floor((y.value.end - y.value.start) / be.value) === 0 || y.value.end - y.value.start <= be.value ? (o(), n("g", Dl, [
                   String(t).includes(`
 `) ? (o(), n("text", {
@@ -1431,7 +1431,7 @@ const Xt = { backgroundColor: "#1A1A1A", color: "#CCCCCC", donutStroke: "#1A1A1A
             ], 512)
           ])) : m("", !0),
           z("g", Vl, [
-            (o(!0), n(x, null, E(c.value.dataset, (t, l) => (o(), n("g", Hl, [
+            (o(!0), n(x, null, F(c.value.dataset, (t, l) => (o(), n("g", Hl, [
               e.value.lineSmooth ? (o(), n(x, { key: 0 }, [
                 z("path", {
                   ref_for: !0,
@@ -1442,7 +1442,7 @@ const Xt = { backgroundColor: "#1A1A1A", color: "#CCCCCC", donutStroke: "#1A1A1A
                   "stroke-width": e.value.lineStrokeWidth + 1,
                   "stroke-linecap": "round",
                   fill: "none",
-                  class: fe({ "quick-animation": !s(U), "vue-data-ui-line-animated": e.value.lineAnimated && !s(U) }),
+                  class: he({ "quick-animation": !s(U), "vue-data-ui-line-animated": e.value.lineAnimated && !s(U) }),
                   style: D({ transition: s(U) ? void 0 : "all 0.3s ease-in-out" })
                 }, null, 14, ql),
                 z("path", {
@@ -1454,7 +1454,7 @@ const Xt = { backgroundColor: "#1A1A1A", color: "#CCCCCC", donutStroke: "#1A1A1A
                   "stroke-width": e.value.lineStrokeWidth,
                   "stroke-linecap": "round",
                   fill: "none",
-                  class: fe({ "quick-animation": !s(U), "vue-data-ui-line-animated": e.value.lineAnimated && !s(U) }),
+                  class: he({ "quick-animation": !s(U), "vue-data-ui-line-animated": e.value.lineAnimated && !s(U) }),
                   style: D({ transition: s(U) ? void 0 : "all 0.3s ease-in-out" })
                 }, null, 14, Wl)
               ], 64)) : (o(), n(x, { key: 1 }, [
@@ -1467,7 +1467,7 @@ const Xt = { backgroundColor: "#1A1A1A", color: "#CCCCCC", donutStroke: "#1A1A1A
                   "stroke-width": e.value.lineStrokeWidth + 1,
                   "stroke-linecap": "round",
                   fill: "none",
-                  class: fe({ "quick-animation": !s(U), "vue-data-ui-line-animated": e.value.lineAnimated && !s(U) }),
+                  class: he({ "quick-animation": !s(U), "vue-data-ui-line-animated": e.value.lineAnimated && !s(U) }),
                   style: D({ transition: s(U) ? void 0 : "all 0.3s ease-in-out" })
                 }, null, 14, Gl),
                 z("path", {
@@ -1479,31 +1479,31 @@ const Xt = { backgroundColor: "#1A1A1A", color: "#CCCCCC", donutStroke: "#1A1A1A
                   "stroke-width": e.value.lineStrokeWidth,
                   "stroke-linecap": "round",
                   fill: "none",
-                  class: fe({ "quick-animation": !s(U), "vue-data-ui-line-animated": e.value.lineAnimated && !s(U) }),
+                  class: he({ "quick-animation": !s(U), "vue-data-ui-line-animated": e.value.lineAnimated && !s(U) }),
                   style: D({ transition: s(U) ? void 0 : "all 0.3s ease-in-out" })
                 }, null, 14, jl)
               ], 64)),
-              (o(!0), n(x, null, E(t.coordinates, (r, p) => (o(), n("circle", {
+              (o(!0), n(x, null, F(t.coordinates, (r, p) => (o(), n("circle", {
                 cx: r.x,
                 cy: s(ve)(r.y),
                 r: 3,
                 fill: t.color,
                 stroke: e.value.backgroundColor,
                 "stroke-width": "0.5",
-                class: fe({ "vue-ui-quick-chart-plot": !0, "quick-animation": !s(U) }),
+                class: he({ "vue-ui-quick-chart-plot": !0, "quick-animation": !s(U) }),
                 style: D({ transition: s(U) ? void 0 : "all 0.3s ease-in-out" })
               }, null, 14, Xl))), 256))
             ]))), 256))
           ]),
           e.value.showDataLabels ? (o(), n("g", Zl, [
-            (o(!0), n(x, null, E(c.value.dataset, (t, l) => (o(), n(x, null, [
-              (o(!0), n(x, null, E(t.coordinates, (r, p) => (o(), n("text", {
+            (o(!0), n(x, null, F(c.value.dataset, (t, l) => (o(), n(x, null, [
+              (o(!0), n(x, null, F(t.coordinates, (r, p) => (o(), n("text", {
                 "text-anchor": "middle",
                 "font-size": e.value.dataLabelFontSize,
                 fill: t.color,
                 x: r.x,
                 y: s(ve)(r.y) - e.value.dataLabelFontSize / 2,
-                class: fe({ "vue-ui-quick-chart-label": !0, "quick-animation": !s(U) }),
+                class: he({ "vue-ui-quick-chart-label": !0, "quick-animation": !s(U) }),
                 style: D({ transition: s(U) ? void 0 : "all 0.3s ease-in-out" })
               }, N(s(se)(
                 e.value.formatter,
@@ -1519,7 +1519,7 @@ const Xt = { backgroundColor: "#1A1A1A", color: "#CCCCCC", donutStroke: "#1A1A1A
             ], 64))), 256))
           ])) : m("", !0),
           Qe.value ? (o(), n("g", Jl, [
-            (o(!0), n(x, null, E(c.value.extremes.maxSeries, (t, l) => (o(), n("rect", {
+            (o(!0), n(x, null, F(c.value.extremes.maxSeries, (t, l) => (o(), n("rect", {
               x: c.value.drawingArea.left + l * c.value.slotSize,
               y: c.value.drawingArea.top,
               height: c.value.drawingArea.height <= 0 ? 1e-5 : c.value.drawingArea.height,
@@ -1534,7 +1534,7 @@ const Xt = { backgroundColor: "#1A1A1A", color: "#CCCCCC", donutStroke: "#1A1A1A
         ], 64)) : m("", !0),
         $.value === w.BAR ? (o(), n(x, { key: 5 }, [
           e.value.xyShowGrid ? (o(), n("g", Kl, [
-            (o(!0), n(x, null, E(v.value.yLabels, (t) => (o(), n(x, null, [
+            (o(!0), n(x, null, F(v.value.yLabels, (t) => (o(), n(x, null, [
               t.y <= v.value.drawingArea.bottom ? (o(), n("line", {
                 key: 0,
                 x1: v.value.drawingArea.left,
@@ -1546,7 +1546,7 @@ const Xt = { backgroundColor: "#1A1A1A", color: "#CCCCCC", donutStroke: "#1A1A1A
                 "stroke-linecap": "round"
               }, null, 8, eo)) : m("", !0)
             ], 64))), 256)),
-            (o(!0), n(x, null, E(v.value.extremes.maxSeries + 1, (t, l) => (o(), n("line", {
+            (o(!0), n(x, null, F(v.value.extremes.maxSeries + 1, (t, l) => (o(), n("line", {
               x1: v.value.drawingArea.left + v.value.slotSize * l,
               x2: v.value.drawingArea.left + v.value.slotSize * l,
               y1: v.value.drawingArea.top,
@@ -1582,7 +1582,7 @@ const Xt = { backgroundColor: "#1A1A1A", color: "#CCCCCC", donutStroke: "#1A1A1A
             ref_key: "scaleLabels",
             ref: Re
           }, [
-            (o(!0), n(x, null, E(v.value.yLabels, (t, l) => (o(), n(x, null, [
+            (o(!0), n(x, null, F(v.value.yLabels, (t, l) => (o(), n(x, null, [
               t.y <= v.value.drawingArea.bottom ? (o(), n("line", {
                 key: 0,
                 x1: t.x + 4,
@@ -1614,7 +1614,7 @@ const Xt = { backgroundColor: "#1A1A1A", color: "#CCCCCC", donutStroke: "#1A1A1A
             ], 64))), 256))
           ], 512)) : m("", !0),
           e.value.xyShowScale && e.value.xyPeriods.length ? (o(), n("g", ro, [
-            (o(!0), n(x, null, E(e.value.xyPeriods.slice(y.value.start, y.value.end), (t, l) => (o(), n("line", {
+            (o(!0), n(x, null, F(e.value.xyPeriods.slice(y.value.start, y.value.end), (t, l) => (o(), n("line", {
               x1: v.value.drawingArea.left + v.value.slotSize * (l + 1) - v.value.slotSize / 2,
               x2: v.value.drawingArea.left + v.value.slotSize * (l + 1) - v.value.slotSize / 2,
               y1: v.value.drawingArea.bottom,
@@ -1627,7 +1627,7 @@ const Xt = { backgroundColor: "#1A1A1A", color: "#CCCCCC", donutStroke: "#1A1A1A
               ref_key: "timeLabelsEls",
               ref: ie
             }, [
-              (o(!0), n(x, null, E(te.value.map((t) => t.text), (t, l) => (o(), n(x, null, [
+              (o(!0), n(x, null, F(te.value.map((t) => t.text), (t, l) => (o(), n(x, null, [
                 !e.value.xyPeriodsShowOnlyAtModulo || e.value.xyPeriodsShowOnlyAtModulo && l % Math.floor((y.value.end - y.value.start) / be.value) === 0 || y.value.end - y.value.start <= be.value ? (o(), n("g", so, [
                   String(t).includes(`
 `) ? (o(), n("text", {
@@ -1656,9 +1656,9 @@ const Xt = { backgroundColor: "#1A1A1A", color: "#CCCCCC", donutStroke: "#1A1A1A
               ], 64))), 256))
             ], 512)
           ])) : m("", !0),
-          z("g", ho, [
-            (o(!0), n(x, null, E(v.value.dataset, (t, l) => (o(), n(x, null, [
-              (o(!0), n(x, null, E(t.coordinates, (r, p) => (o(), n("rect", {
+          z("g", fo, [
+            (o(!0), n(x, null, F(v.value.dataset, (t, l) => (o(), n(x, null, [
+              (o(!0), n(x, null, F(t.coordinates, (r, p) => (o(), n("rect", {
                 x: r.x,
                 width: r.width <= 0 ? 1e-5 : r.width,
                 height: s(ve)(r.height <= 0 ? 1e-5 : r.height),
@@ -1667,7 +1667,7 @@ const Xt = { backgroundColor: "#1A1A1A", color: "#CCCCCC", donutStroke: "#1A1A1A
                 stroke: e.value.backgroundColor,
                 "stroke-width": e.value.barStrokeWidth,
                 "stroke-linecap": "round",
-                class: fe({ "vue-data-ui-bar-animated": e.value.barAnimated && r.value < 0 && !s(U) })
+                class: he({ "vue-data-ui-bar-animated": e.value.barAnimated && r.value < 0 && !s(U) })
               }, [
                 e.value.barAnimated && r.value > 0 && !s(De) && !s(Ne) ? (o(), n("animate", {
                   key: 0,
@@ -1683,12 +1683,12 @@ const Xt = { backgroundColor: "#1A1A1A", color: "#CCCCCC", donutStroke: "#1A1A1A
                   to: v.value.absoluteZero - r.height,
                   dur: "0.5s"
                 }, null, 8, go)) : m("", !0)
-              ], 10, fo))), 256))
+              ], 10, ho))), 256))
             ], 64))), 256))
           ]),
           e.value.showDataLabels ? (o(), n("g", po, [
-            (o(!0), n(x, null, E(v.value.dataset, (t, l) => (o(), n(x, null, [
-              (o(!0), n(x, null, E(t.coordinates, (r, p) => (o(), n("text", {
+            (o(!0), n(x, null, F(v.value.dataset, (t, l) => (o(), n(x, null, [
+              (o(!0), n(x, null, F(t.coordinates, (r, p) => (o(), n("text", {
                 x: r.x + r.width / 2,
                 y: s(ve)(r.y) - e.value.dataLabelFontSize / 2,
                 "text-anchor": "middle",
@@ -1709,7 +1709,7 @@ const Xt = { backgroundColor: "#1A1A1A", color: "#CCCCCC", donutStroke: "#1A1A1A
             ], 64))), 256))
           ])) : m("", !0),
           Qe.value ? (o(), n("g", xo, [
-            (o(!0), n(x, null, E(v.value.extremes.maxSeries, (t, l) => (o(), n("rect", {
+            (o(!0), n(x, null, F(v.value.extremes.maxSeries, (t, l) => (o(), n("rect", {
               x: v.value.drawingArea.left + l * v.value.slotSize,
               y: v.value.drawingArea.top,
               height: v.value.drawingArea.height <= 0 ? 1e-5 : v.value.drawingArea.height,
@@ -1785,7 +1785,7 @@ const Xt = { backgroundColor: "#1A1A1A", color: "#CCCCCC", donutStroke: "#1A1A1A
       }, [
         (o(), Ie(Qa, {
           ref_key: "slicerComponent",
-          ref: Ft,
+          ref: Et,
           key: `slicer_${Me.value}`,
           background: e.value.zoomColor,
           borderColor: e.value.backgroundColor,
@@ -1835,7 +1835,7 @@ const Xt = { backgroundColor: "#1A1A1A", color: "#CCCCCC", donutStroke: "#1A1A1A
       z("div", {
         id: `legend-bottom-${Y.value}`
       }, null, 8, _o),
-      gt.value ? (o(), Ie(Fa, {
+      gt.value ? (o(), Ie(Ea, {
         key: 7,
         to: e.value.legendPosition === "top" ? `#legend-top-${Y.value}` : `#legend-bottom-${Y.value}`
       }, [
@@ -1846,7 +1846,7 @@ const Xt = { backgroundColor: "#1A1A1A", color: "#CCCCCC", donutStroke: "#1A1A1A
           class: "vue-ui-quick-chart-legend",
           style: D(`background:transparent;color:${e.value.color}`)
         }, [
-          $.value === w.DONUT ? (o(!0), n(x, { key: 0 }, E(T.value.legend, (t, l) => (o(), n("div", {
+          $.value === w.DONUT ? (o(!0), n(x, { key: 0 }, F(T.value.legend, (t, l) => (o(), n("div", {
             class: "vue-ui-quick-chart-legend-item",
             onClick: (r) => {
               ia(t, T.value.dataset), ye("selectLegend", t);
@@ -1894,7 +1894,7 @@ const Xt = { backgroundColor: "#1A1A1A", color: "#CCCCCC", donutStroke: "#1A1A1A
               })) + ") ", 5))
             ], 64))
           ], 12, zo))), 256)) : m("", !0),
-          $.value === w.LINE ? (o(!0), n(x, { key: 1 }, E(c.value.legend, (t, l) => (o(), n("div", {
+          $.value === w.LINE ? (o(!0), n(x, { key: 1 }, F(c.value.legend, (t, l) => (o(), n("div", {
             class: "vue-ui-quick-chart-legend-item",
             onClick: (r) => {
               Lt(t.id, c.value.legend.length - 1), ye("selectLegend", t);
@@ -1915,7 +1915,7 @@ const Xt = { backgroundColor: "#1A1A1A", color: "#CCCCCC", donutStroke: "#1A1A1A
               }, N(t.name), 5)
             ], 64))
           ], 12, $o))), 256)) : m("", !0),
-          $.value === w.BAR ? (o(!0), n(x, { key: 2 }, E(v.value.legend, (t, l) => (o(), n("div", {
+          $.value === w.BAR ? (o(!0), n(x, { key: 2 }, F(v.value.legend, (t, l) => (o(), n("div", {
             class: "vue-ui-quick-chart-legend-item",
             onClick: (r) => {
               Lt(t.id, v.value.legend.length - 1), ye("selectLegend", t);
@@ -1935,13 +1935,13 @@ const Xt = { backgroundColor: "#1A1A1A", color: "#CCCCCC", donutStroke: "#1A1A1A
                 style: D(`font-size:${e.value.legendFontSize}px`)
               }, N(t.name), 5)
             ], 64))
-          ], 12, Fo))), 256)) : m("", !0)
+          ], 12, Eo))), 256)) : m("", !0)
         ], 4)) : m("", !0)
       ], 8, ["to"])) : m("", !0),
       a.$slots.source ? (o(), n("div", {
         key: 8,
         ref_key: "source",
-        ref: ht,
+        ref: ft,
         dir: "auto"
       }, [
         R(a.$slots, "source", {}, void 0, !0)
@@ -1975,7 +1975,7 @@ const Xt = { backgroundColor: "#1A1A1A", color: "#CCCCCC", donutStroke: "#1A1A1A
         _: 3
       }, 8, ["show", "backgroundColor", "color", "borderRadius", "borderColor", "borderWidth", "fontSize", "backgroundOpacity", "position", "offsetY", "parent", "content", "isFullscreen", "isCustom", "smooth", "smoothForce", "smoothSnapThreshold", "backdropFilter"]),
       s(U) ? (o(), Ie(qa, { key: 9 })) : m("", !0)
-    ], 46, il)) : (o(), n("div", Eo, [
+    ], 46, il)) : (o(), n("div", Fo, [
       Se(s(V), {
         name: "circleCancel",
         stroke: "red"