vue-data-ui 3.1.1 → 3.1.2

package/dist/{vue-ui-xy-canvas-BOQyxVRl.js → vue-ui-xy-canvas-WxSJqoiF.js}

@@ -1,22 +1,22 @@
-import { defineAsyncComponent as ee, ref as c, computed as L, useSlots as Kl, onMounted as vl, watch as P, nextTick as cl, shallowRef as Ie, onBeforeUnmount as Ql, createElementBlock as de, openBlock as S, unref as p, normalizeClass as ea, normalizeStyle as le, createCommentVNode as H, createElementVNode as Y, createBlock as D, createSlots as dl, withCtx as b, renderSlot as k, normalizeProps as V, guardReactiveProps as G, createVNode as hl, Teleport as la, toDisplayString as Me, resolveDynamicComponent as aa, mergeProps as ta, createTextVNode as yl } from "vue";
-import { u as oa, c as ua, a as ra, p as Z, b as sa, C as xe, d as na, D as Oe, k as ae, i as te, e as fl, a4 as ia, G as va, ae as ca, o as da, f as ha, y as gl, v as ya, w as fa, z as ga, s as he, l as pa } from "./index-BKQqb9lF.js";
-import { d as ba, t as ma, u as xa, c as La, a as pl, l as C, r as Re, b as F, p as bl } from "./useResponsive-DfdjqQps.js";
-import { u as ml } from "./useNestedProp-aBOhgs4U.js";
-import { u as ka } from "./usePrinter-BzuXiubT.js";
-import { u as Ca } from "./useUserOptionState-BIvW1Kz7.js";
-import { u as wa } from "./useChartAccessibility-9icAAmYg.js";
-import Sa from "./Legend-8_V5egWW.js";
-import za from "./Title-Dz-j6ERs.js";
-import { S as $a } from "./Slicer-6w3K8gAc.js";
-import Ta from "./vue-ui-accordion-B5QeV3BK.js";
-import { u as Ia } from "./useTimeLabels-BGFjWgrv.js";
-import Ma from "./img-gBDz7xQQ.js";
-import Oa from "./BaseIcon-DLesaZpW.js";
-import { _ as Ra } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const Pa = ["id"], Da = ["id"], Fa = ["id"], Ea = ["onClick"], Aa = {
+import { defineAsyncComponent as ee, ref as c, computed as L, useSlots as ea, onMounted as dl, watch as D, nextTick as hl, shallowRef as Me, onBeforeUnmount as la, createElementBlock as de, openBlock as S, unref as p, normalizeClass as aa, normalizeStyle as le, createCommentVNode as H, createElementVNode as Y, createBlock as P, createSlots as yl, withCtx as b, renderSlot as k, normalizeProps as V, guardReactiveProps as G, createVNode as fl, Teleport as ta, toDisplayString as Oe, resolveDynamicComponent as oa, mergeProps as ua, createTextVNode as gl } from "vue";
+import { u as ra, c as sa, a as na, p as Z, b as ia, C as xe, d as va, D as Re, k as ae, i as te, e as pl, a4 as ca, G as da, ae as ha, o as ya, f as fa, y as bl, v as ga, w as pa, z as ba, s as he, l as ma } from "./index-BFqW8WA0.js";
+import { d as xa, t as La, u as ka, c as Ca, a as ml, l as C, r as De, b as F, p as xl } from "./useResponsive-DfdjqQps.js";
+import { u as Ll } from "./useNestedProp-BSZCnuGl.js";
+import { u as wa } from "./usePrinter-DDIKRiOp.js";
+import { u as Sa } from "./useUserOptionState-BIvW1Kz7.js";
+import { u as za } from "./useChartAccessibility-9icAAmYg.js";
+import $a from "./Legend-DLzeDl3-.js";
+import Ta from "./Title-AGmmsSi_.js";
+import { S as Ia } from "./Slicer-DeWHn8zH.js";
+import Ma from "./vue-ui-accordion-Cv747Pg6.js";
+import { u as Oa } from "./useTimeLabels-BGFjWgrv.js";
+import Ra from "./img-DvuphHeJ.js";
+import Da from "./BaseIcon-BLg8FaQ2.js";
+import { _ as Pa } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const Fa = ["id"], Ea = ["id"], Aa = ["id"], Na = ["onClick"], Ha = {
   key: 3,
   class: "vue-data-ui-watermark"
-}, Na = ["innerHTML"], Ha = {
+}, Ya = ["innerHTML"], _a = {
   __name: "vue-ui-xy-canvas",
   props: {
     dataset: {
@@ -33,36 +33,36 @@ const Pa = ["id"], Da = ["id"], Fa = ["id"], Ea = ["onClick"], Aa = {
     }
   },
   emits: ["selectLegend"],
-  setup(Pe, { expose: xl, emit: Ll }) {
-    const kl = ee(() => import("./DataTable-BAf4Obr9.js")), Cl = ee(() => import("./NonSvgPenAndPaper-Cq4fHmA0.js")), wl = ee(() => import("./vue-ui-skeleton--twnjS2t.js")), Sl = ee(() => import("./Tooltip-BTGOEC7w.js")), zl = ee(() => import("./UserOptions-CsDlFB0L.js")), $l = ee(() => import("./BaseDraggableDialog-B2BQC0-h.js")), { vue_ui_xy_canvas: Tl } = oa(), g = Pe, B = c(ua()), I = c(null), oe = c(null), n = c(null), y = c(1), E = c(1), ye = c(!1), d = c(null), fe = c(""), De = c(null), $ = c([]), j = c(1), U = c(!0), q = c(!0), Le = c(null), Fe = c(0), Ee = c(0), ue = c(!1), Ae = c(null), Ne = c(null), He = c(null), Ye = c(null), ke = c(0), Ce = c(0), we = c(0), M = c(null), Be = c(!1), re = c(null), ge = L(() => !!g.dataset && g.dataset.length), Il = Ll, Ml = Kl();
-    vl(() => {
-      Ml["chart-background"] && console.warn("VueUiXyCanvas does not support the #chart-background slot.");
+  setup(Pe, { expose: kl, emit: Cl }) {
+    const wl = ee(() => import("./DataTable-BRN1-1ob.js")), Sl = ee(() => import("./NonSvgPenAndPaper-Dp53d2re.js")), zl = ee(() => import("./vue-ui-skeleton-CeyaKpZd.js")), $l = ee(() => import("./Tooltip-le0yZk_t.js")), Tl = ee(() => import("./UserOptions-DEFwuQIo.js")), Il = ee(() => import("./BaseDraggableDialog-Dkpr-qUQ.js")), { vue_ui_xy_canvas: Ml } = ra(), g = Pe, _ = c(sa()), I = c(null), oe = c(null), n = c(null), y = c(1), E = c(1), ye = c(!1), d = c(null), fe = c(""), Fe = c(null), $ = c([]), j = c(1), B = c(!0), q = c(!0), Le = c(null), Ee = c(0), Ae = c(0), ue = c(!1), Ne = c(null), He = c(null), Ye = c(null), _e = c(null), ke = c(0), Ce = c(0), we = c(0), M = c(null), Be = c(!1), re = c(null), Se = c(null), ge = L(() => !!g.dataset && g.dataset.length), Ol = Cl, Rl = ea();
+    dl(() => {
+      Rl["chart-background"] && console.warn("VueUiXyCanvas does not support the #chart-background slot.");
     });
     const l = L({
       get: () => Xe(),
       set: (e) => e
-    }), { userOptionsVisible: Se, setUserOptionsVisibility: Ue, keepUserOptionState: We } = Ca({ config: l.value }), { svgRef: O } = wa({ config: l.value.style.chart.title });
+    }), { userOptionsVisible: ze, setUserOptionsVisibility: Ue, keepUserOptionState: We } = Sa({ config: l.value }), { svgRef: O } = za({ config: l.value.style.chart.title });
     function Xe() {
-      const e = ml({
+      const e = Ll({
         userConfig: g.config,
-        defaultConfig: Tl
+        defaultConfig: Ml
       });
       let a = {};
       return e.theme ? a = {
-        ...ml({
-          userConfig: sa.vue_ui_xy_canvas[e.theme] || g.config,
+        ...Ll({
+          userConfig: ia.vue_ui_xy_canvas[e.theme] || g.config,
           defaultConfig: e
         }),
-        customPalette: ra[e.theme] || Z
+        customPalette: na[e.theme] || Z
       } : a = e, g.config && xe(g.config, "style.chart.scale.min") ? a.style.chart.scale.min = g.config.style.chart.scale.min : a.style.chart.scale.min = null, g.config && xe(g.config, "style.chart.scale.max") ? a.style.chart.scale.max = g.config.style.chart.scale.max : a.style.chart.scale.max = null, g.config && xe(g.config, "style.chart.zoom.startIndex") ? a.style.chart.zoom.startIndex = g.config.style.chart.zoom.startIndex : a.style.chart.zoom.startIndex = null, g.config && xe(g.config, "style.chart.zoom.endIndex") ? a.style.chart.zoom.endIndex = g.config.style.chart.zoom.endIndex : a.style.chart.zoom.endIndex = null, a;
     }
-    P(() => g.config, (e) => {
-      l.value = Xe(), Se.value = !l.value.userOptions.showOnChartHover, ze(), ke.value += 1, Ce.value += 1, we.value += 1, r.value.showTable = l.value.table.show, r.value.showDataLabels = l.value.style.chart.dataLabels.show, r.value.stacked = l.value.style.chart.stacked, r.value.showTooltip = l.value.style.chart.tooltip.show;
-    }, { deep: !0 }), P(() => g.dataset, () => {
-      ze(), ke.value += 1, Ce.value += 1, we.value += 1;
+    D(() => g.config, (e) => {
+      l.value = Xe(), ze.value = !l.value.userOptions.showOnChartHover, $e(), ke.value += 1, Ce.value += 1, we.value += 1, r.value.showTable = l.value.table.show, r.value.showDataLabels = l.value.style.chart.dataLabels.show, r.value.stacked = l.value.style.chart.stacked, r.value.showTooltip = l.value.style.chart.tooltip.show;
+    }, { deep: !0 }), D(() => g.dataset, () => {
+      $e(), ke.value += 1, Ce.value += 1, we.value += 1;
     }, { deep: !0 });
-    const _e = c(l.value.style.chart.aspectRatio), { isPrinting: Ve, isImaging: Ge, generatePdf: Ze, generateImage: je } = ka({
-      elementId: `xy_canvas_${B.value}`,
+    const Ve = c(l.value.style.chart.aspectRatio), { isPrinting: Ge, isImaging: Ze, generatePdf: je, generateImage: qe } = wa({
+      elementId: `xy_canvas_${_.value}`,
       fileName: l.value.style.chart.title.text || "vue-ui-xy-canvas",
       options: l.value.userOptions.print
     }), r = c({
@@ -71,10 +71,10 @@ const Pa = ["id"], Da = ["id"], Fa = ["id"], Ea = ["onClick"], Aa = {
       stacked: l.value.style.chart.stacked,
       showTooltip: l.value.style.chart.tooltip.show
     });
-    function qe(e) {
-      ue.value = e, Ee.value += 1;
+    function Je(e) {
+      ue.value = e, Ae.value += 1;
     }
-    const Je = L(() => na(l.value.customPalette)), T = L(() => J.value ? Math.max(...J.value.filter((e, a) => !$.value.includes(e.absoluteIndex)).map((e) => e.series.length)) : 0), t = L(() => {
+    const Ke = L(() => va(l.value.customPalette)), T = L(() => J.value ? Math.max(...J.value.filter((e, a) => !$.value.includes(e.absoluteIndex)).map((e) => e.series.length)) : 0), t = L(() => {
       const e = y.value - y.value * (l.value.style.chart.paddingProportions.left + l.value.style.chart.paddingProportions.right);
       return {
         canvasWidth: y.value,
@@ -88,24 +88,24 @@ const Pa = ["id"], Da = ["id"], Fa = ["id"], Ea = ["onClick"], Aa = {
         slot: e / (u.value.end - u.value.start)
       };
     });
-    function Ke(e, a) {
+    function Qe(e, a) {
       return e / a;
     }
-    function Ol({ hasAutoScale: e, series: a, min: o, max: s, scale: i, yOffset: x, individualHeight: v, stackIndex: f = null }) {
-      return a.map((X, z) => {
-        const N = i.min < 0 ? Math.abs(i.min) : 0, _ = Ke(X + N, N + i.max);
+    function Dl({ hasAutoScale: e, series: a, min: o, max: s, scale: i, yOffset: x, individualHeight: v, stackIndex: f = null }) {
+      return a.map((W, z) => {
+        const N = i.min < 0 ? Math.abs(i.min) : 0, X = Qe(W + N, N + i.max);
         let ve, ce;
-        e && (ve = i.min, ce = Ke(X - ve, i.max - ve));
+        e && (ve = i.min, ce = Qe(W - ve, i.max - ve));
         let R = 0;
-        return f === null ? R = t.value.bottom - t.value.height * (e ? ce : _) : R = t.value.bottom - x - v * (e ? ce : _), {
+        return f === null ? R = t.value.bottom - t.value.height * (e ? ce : X) : R = t.value.bottom - x - v * (e ? ce : X), {
           x: t.value.left + t.value.slot * z + t.value.slot / 2,
           y: R,
-          value: X
+          value: W
         };
       });
     }
     const m = L(() => {
-      const e = l.value.style.chart.scale.min !== null ? l.value.style.chart.scale.min : Math.min(...J.value.filter((v, f) => !$.value.includes(v.absoluteIndex)).flatMap((v) => v.series.slice(u.value.start, u.value.end))), a = l.value.style.chart.scale.max !== null ? l.value.style.chart.scale.max : Math.max(...J.value.filter((v, f) => !$.value.includes(v.absoluteIndex)).flatMap((v) => v.series.slice(u.value.start, u.value.end))), o = Oe(e < 0 ? e : 0, a === e ? e + 1 < 0 ? 0 : e + 1 : a < 0 ? 0 : a, l.value.style.chart.scale.ticks), s = o.min < 0 ? Math.abs(o.min) : 0, i = t.value.bottom - t.value.height * (s / (o.max + s)), x = o.ticks.map((v) => ({
+      const e = l.value.style.chart.scale.min !== null ? l.value.style.chart.scale.min : Math.min(...J.value.filter((v, f) => !$.value.includes(v.absoluteIndex)).flatMap((v) => v.series.slice(u.value.start, u.value.end))), a = l.value.style.chart.scale.max !== null ? l.value.style.chart.scale.max : Math.max(...J.value.filter((v, f) => !$.value.includes(v.absoluteIndex)).flatMap((v) => v.series.slice(u.value.start, u.value.end))), o = Re(e < 0 ? e : 0, a === e ? e + 1 < 0 ? 0 : e + 1 : a < 0 ? 0 : a, l.value.style.chart.scale.ticks), s = o.min < 0 ? Math.abs(o.min) : 0, i = t.value.bottom - t.value.height * (s / (o.max + s)), x = o.ticks.map((v) => ({
         y: t.value.bottom - t.value.height * ((v + s) / (o.max + s)),
         x: t.value.left - 8,
         value: v
@@ -118,7 +118,7 @@ const Pa = ["id"], Da = ["id"], Fa = ["id"], Ea = ["onClick"], Aa = {
         yLabels: x,
         zero: i
       };
-    }), Rl = L(() => h.value.map((e) => `
+    }), Pl = L(() => h.value.map((e) => `
             <div style="display:flex;flex-direction:row;gap:6px;align-items:center;">
                 <svg viewBox="0 0 10 10" height="12" width="12">
                     <circle cx="5" cy="5" r="5" fill="${e.color}"/>
@@ -138,17 +138,17 @@ const Pa = ["id"], Da = ["id"], Fa = ["id"], Ea = ["onClick"], Aa = {
             </div>
         `)), J = L(() => g.dataset.map((e, a) => ({
       ...e,
-      series: ia({
-        data: va(e.series),
+      series: ca({
+        data: da(e.series),
         threshold: l.value.downsample.threshold
       }),
       absoluteIndex: a,
-      color: fl(e.color || Je.value[a] || Z[a] || Z[a % Z.length])
+      color: pl(e.color || Ke.value[a] || Z[a] || Z[a % Z.length])
     })));
-    P(T, (e) => {
-      e && Qe();
+    D(T, (e) => {
+      e && el();
     });
-    const h = L(() => ca(J.value.filter((e, a) => !$.value.includes(e.absoluteIndex))).map((e, a) => ({
+    const h = L(() => ha(J.value.filter((e, a) => !$.value.includes(e.absoluteIndex))).map((e, a) => ({
       ...e,
       series: e.series.slice(u.value.start, u.value.end)
     })).map((e, a) => {
@@ -159,15 +159,15 @@ const Pa = ["id"], Da = ["id"], Fa = ["id"], Ea = ["onClick"], Aa = {
         valueMax: s
       }, x = e.scaleSteps || l.value.style.chart.scale.ticks;
       let v;
-      e.autoScaling ? v = Oe(i.valueMin, i.valueMax, x) : v = Oe(i.valueMin < 0 ? i.valueMin : 0, i.valueMax <= 0 ? 0 : i.valueMax, x);
-      const f = r.value.stacked ? t.value.height * (1 - e.cumulatedStackRatio) : 0, X = r.value.stacked ? t.value.height / l.value.style.chart.stackGap : 0, z = r.value.stacked ? t.value.height * e.stackRatio - X : t.value.height, N = v.min < 0 ? Math.abs(v.min) : 0;
-      let _;
-      e.autoScaling && r.value.stacked && s <= 0 ? _ = t.value.bottom - f - z : _ = t.value.bottom - f - z * (N / (v.max + N));
-      const ve = v.ticks.map((R, Jl) => ({
-        y: t.value.bottom - f - z * (Jl / (v.ticks.length - 1)),
+      e.autoScaling ? v = Re(i.valueMin, i.valueMax, x) : v = Re(i.valueMin < 0 ? i.valueMin : 0, i.valueMax <= 0 ? 0 : i.valueMax, x);
+      const f = r.value.stacked ? t.value.height * (1 - e.cumulatedStackRatio) : 0, W = r.value.stacked ? t.value.height / l.value.style.chart.stackGap : 0, z = r.value.stacked ? t.value.height * e.stackRatio - W : t.value.height, N = v.min < 0 ? Math.abs(v.min) : 0;
+      let X;
+      e.autoScaling && r.value.stacked && s <= 0 ? X = t.value.bottom - f - z : X = t.value.bottom - f - z * (N / (v.max + N));
+      const ve = v.ticks.map((R, Ql) => ({
+        y: t.value.bottom - f - z * (Ql / (v.ticks.length - 1)),
         x: t.value.left - 8,
         value: R
-      })), ce = Ol({
+      })), ce = Dl({
         hasAutoScale: r.value.stacked && e.autoScaling,
         series: e.series,
         min: r.value.stacked ? o : m.value.min,
@@ -183,7 +183,7 @@ const Pa = ["id"], Da = ["id"], Fa = ["id"], Ea = ["onClick"], Aa = {
         min: o,
         max: s,
         localScale: v,
-        localZero: _,
+        localZero: X,
         localMin: N,
         localYLabels: ve,
         yOffset: f,
@@ -193,27 +193,27 @@ const Pa = ["id"], Da = ["id"], Fa = ["id"], Ea = ["onClick"], Aa = {
       start: 0,
       end: T.value
     });
-    function Qe() {
-      ll();
+    function el() {
+      al();
     }
-    const el = c(null);
-    async function ll() {
-      await cl(), await cl();
-      const { startIndex: e, endIndex: a } = l.value.style.chart.zoom, o = el.value, s = T.value;
-      u.value = { start: 0, end: s }, (e != null || a != null) && o ? (e != null ? o.setStartValue(e) : (u.value.start = 0, o.setStartValue(0)), a != null ? o.setEndValue(Pl(a + 1)) : (u.value.end = s, o.setEndValue(s))) : (u.value = { start: 0, end: s }, Fe.value += 1);
+    const ll = c(null);
+    async function al() {
+      await hl(), await hl();
+      const { startIndex: e, endIndex: a } = l.value.style.chart.zoom, o = ll.value, s = T.value;
+      u.value = { start: 0, end: s }, (e != null || a != null) && o ? (e != null ? o.setStartValue(e) : (u.value.start = 0, o.setStartValue(0)), a != null ? o.setEndValue(Fl(a + 1)) : (u.value.end = s, o.setEndValue(s))) : (u.value = { start: 0, end: s }, Ee.value += 1);
     }
-    function Pl(e) {
+    function Fl(e) {
       const a = T.value;
       return e > a ? a : e < 0 || l.value.style.chart.zoom.startIndex !== null && e < l.value.style.chart.zoom.startIndex ? l.value.style.chart.zoom.startIndex !== null ? l.value.style.chart.zoom.startIndex + 1 : 1 : e;
     }
-    const Dl = L(() => h.value.filter((e) => ["line", "plot", void 0].includes(e.type))), w = L(() => h.value.filter((e) => e.type === "bar"));
-    function Fl() {
+    const El = L(() => h.value.filter((e) => ["line", "plot", void 0].includes(e.type))), w = L(() => h.value.filter((e) => e.type === "bar"));
+    function Al() {
       if (!O.value)
         return;
       const e = oe.value.offsetWidth, a = oe.value.offsetHeight;
       O.value.width = e * j.value * 2, O.value.height = a * j.value * 2, y.value = e * j.value * 2, E.value = a * j.value * 2, n.value.scale(j.value, j.value), se();
     }
-    function El() {
+    function Nl() {
       if (n.value.clearRect(0, 0, 1e4, 1e4), n.value.fillStyle = l.value.style.chart.backgroundColor, n.value.fillRect(0, 0, t.value.canvasWidth, t.value.canvasHeight), r.value.stacked)
         l.value.style.chart.grid.y.verticalLines.show && u.value.end - u.value.start < l.value.style.chart.grid.y.verticalLines.hideUnderXLength ? h.value.forEach((e) => {
           for (let a = 0; a < u.value.end - u.value.start + 1; a += 1)
@@ -253,7 +253,7 @@ const Pa = ["id"], Da = ["id"], Fa = ["id"], Ea = ["onClick"], Aa = {
             );
         }), l.value.style.chart.grid.x.horizontalLines.show && (l.value.style.chart.grid.x.horizontalLines.alternate ? h.value.forEach((e) => {
           e.localYLabels.forEach((a, o) => {
-            o < e.localYLabels.length - 1 && Re(
+            o < e.localYLabels.length - 1 && De(
               n.value,
               [
                 { x: t.value.left, y: a.y },
@@ -352,7 +352,7 @@ const Pa = ["id"], Da = ["id"], Fa = ["id"], Ea = ["onClick"], Aa = {
               }
             );
         l.value.style.chart.grid.x.horizontalLines.show && (l.value.style.chart.grid.x.horizontalLines.alternate ? m.value.yLabels.forEach((e, a) => {
-          a < m.value.yLabels.length - 1 && Re(
+          a < m.value.yLabels.length - 1 && De(
             n.value,
             [
               { x: t.value.left, y: e.y },
@@ -431,10 +431,10 @@ const Pa = ["id"], Da = ["id"], Fa = ["id"], Ea = ["onClick"], Aa = {
         }
       );
     }
-    function Al(e) {
+    function Hl(e) {
       for (let a = 0; a < e.coordinatesLine.length; a += 1) {
         const o = (d.value === a ? y.value / 150 : l.value.style.chart.line.plots.show ? y.value / 200 : 0) * l.value.style.chart.line.plots.radiusRatio;
-        pl(
+        ml(
           n.value,
           { x: e.coordinatesLine[a].x, y: e.coordinatesLine[a].y },
           o,
@@ -445,7 +445,7 @@ const Pa = ["id"], Da = ["id"], Fa = ["id"], Ea = ["onClick"], Aa = {
         );
       }
     }
-    function Nl() {
+    function Yl() {
       h.value.forEach((e) => {
         e.showYMarker && ne(e) && F(
           n.value,
@@ -470,7 +470,7 @@ const Pa = ["id"], Da = ["id"], Fa = ["id"], Ea = ["onClick"], Aa = {
         );
       });
     }
-    function Hl() {
+    function _l() {
       l.value.style.chart.grid.y.axisLabels.show && (r.value.stacked ? h.value.forEach((e) => {
         e.localYLabels.forEach((a, o) => {
           F(
@@ -521,7 +521,7 @@ const Pa = ["id"], Da = ["id"], Fa = ["id"], Ea = ["onClick"], Aa = {
         );
       }));
     }
-    function Yl(e) {
+    function Bl(e) {
       for (let a = 0; a < e.coordinatesLine.length; a += 1)
         F(
           n.value,
@@ -545,18 +545,18 @@ const Pa = ["id"], Da = ["id"], Fa = ["id"], Ea = ["onClick"], Aa = {
           }
         );
     }
-    const W = L(() => Ia({
+    const U = L(() => Oa({
       values: l.value.style.chart.grid.y.timeLabels.values,
       maxDatapoints: T.value,
       formatter: l.value.style.chart.grid.y.timeLabels.datetimeFormatter,
       start: 0,
       end: l.value.style.chart.grid.y.timeLabels.values.length
     }));
-    function Bl() {
+    function Ul() {
       for (let e = u.value.start; e < u.value.end; e += 1)
         (u.value.end - u.value.start < l.value.style.chart.grid.y.timeLabels.modulo || u.value.end - u.value.start >= l.value.style.chart.grid.y.timeLabels.modulo && (e % Math.floor((u.value.end - u.value.start) / l.value.style.chart.grid.y.timeLabels.modulo) === 0 || e === d.value + u.value.start && l.value.style.chart.grid.y.timeLabels.showMarker)) && F(
           n.value,
-          W.value[e] ? W.value[e].text : e + 1,
+          U.value[e] ? U.value[e].text : e + 1,
           t.value.left + t.value.slot * (e - u.value.start) + t.value.slot / 2,
           t.value.bottom + y.value / l.value.style.chart.grid.y.timeLabels.offsetY,
           {
@@ -567,7 +567,7 @@ const Pa = ["id"], Da = ["id"], Fa = ["id"], Ea = ["onClick"], Aa = {
           }
         );
     }
-    function al() {
+    function tl() {
       C(
         n.value,
         [
@@ -581,7 +581,7 @@ const Pa = ["id"], Da = ["id"], Fa = ["id"], Ea = ["onClick"], Aa = {
         }
       );
     }
-    function Ul() {
+    function Wl() {
       M.value && C(
         n.value,
         [
@@ -595,10 +595,10 @@ const Pa = ["id"], Da = ["id"], Fa = ["id"], Ea = ["onClick"], Aa = {
         }
       );
     }
-    function Wl() {
+    function Xl() {
       w.value.forEach((e, a) => {
         for (let o = 0; o < e.coordinatesLine.length; o += 1)
-          Re(
+          De(
             n.value,
             [
               {
@@ -632,7 +632,7 @@ const Pa = ["id"], Da = ["id"], Fa = ["id"], Ea = ["onClick"], Aa = {
                 },
                 stops: [
                   { offset: 0, color: e.color },
-                  { offset: 1, color: l.value.style.chart.bar.gradient.show ? pa(e.color, 0.5) : e.color }
+                  { offset: 1, color: l.value.style.chart.bar.gradient.show ? ma(e.color, 0.5) : e.color }
                 ]
               }
             }
@@ -661,15 +661,15 @@ const Pa = ["id"], Da = ["id"], Fa = ["id"], Ea = ["onClick"], Aa = {
           );
       });
     }
-    function Xl(e) {
-      e.useArea ? r.value.stacked ? bl(
+    function Vl(e) {
+      e.useArea ? r.value.stacked ? xl(
         n.value,
         [{ x: e.coordinatesLine[0].x, y: e.localZero }, ...e.coordinatesLine, { x: e.coordinatesLine.at(-1).x, y: e.localZero }],
         {
           fillColor: he(e.color, l.value.style.chart.area.opacity),
           strokeColor: "transparent"
         }
-      ) : bl(
+      ) : xl(
         n.value,
         [{ x: e.coordinatesLine[0].x, y: m.value.zero }, ...e.coordinatesLine, { x: e.coordinatesLine.at(-1).x, y: m.value.zero }],
         {
@@ -681,7 +681,7 @@ const Pa = ["id"], Da = ["id"], Fa = ["id"], Ea = ["onClick"], Aa = {
         lineWidth: 3
       });
     }
-    function _l() {
+    function Gl() {
       h.value.forEach((e, a) => {
         C(
           n.value,
@@ -697,12 +697,12 @@ const Pa = ["id"], Da = ["id"], Fa = ["id"], Ea = ["onClick"], Aa = {
       });
     }
     function se() {
-      El(), U.value ? (d.value !== null && l.value.style.chart.selector.show && al(), Wl(), r.value.stacked && l.value.style.chart.grid.x.showAxis && _l(), Dl.value.forEach((e) => {
-        (e.type === "line" || !e.type) && Xl(e), q.value && (Al(e), r.value.showDataLabels && [!0, void 0].includes(e.dataLabels) && Yl(e));
-      }), Le.value = La(O.value)) : (Le.value && (n.value.clearRect(0, 0, 1e4, 1e4), n.value.drawImage(Le.value, 0, 0)), d.value !== null && l.value.style.chart.selector.show && al(), d.value !== null && h.value.forEach((e) => {
+      Nl(), B.value ? (d.value !== null && l.value.style.chart.selector.show && tl(), Xl(), r.value.stacked && l.value.style.chart.grid.x.showAxis && Gl(), El.value.forEach((e) => {
+        (e.type === "line" || !e.type) && Vl(e), q.value && (Hl(e), r.value.showDataLabels && [!0, void 0].includes(e.dataLabels) && Bl(e));
+      }), Le.value = Ca(O.value)) : (Le.value && (n.value.clearRect(0, 0, 1e4, 1e4), n.value.drawImage(Le.value, 0, 0)), d.value !== null && l.value.style.chart.selector.show && tl(), d.value !== null && h.value.forEach((e) => {
         if (e.type === "line" || !e.type || e.type === "plot") {
           if (!e.coordinatesLine[d.value]) return;
-          e.coordinatesLine[d.value].x !== void 0 && e.coordinatesLine[d.value].y !== void 0 && pl(
+          e.coordinatesLine[d.value].x !== void 0 && e.coordinatesLine[d.value].y !== void 0 && ml(
             n.value,
             {
               x: e.coordinatesLine[d.value].x,
@@ -715,17 +715,17 @@ const Pa = ["id"], Da = ["id"], Fa = ["id"], Ea = ["onClick"], Aa = {
             }
           );
         }
-      })), l.value.style.chart.grid.y.timeLabels.show && Bl(), l.value.style.chart.selector.show && l.value.style.chart.selector.showHorizontalSelector && Ul(), Hl(), Nl(), U.value = !1;
+      })), l.value.style.chart.grid.y.timeLabels.show && Ul(), l.value.style.chart.selector.show && l.value.style.chart.selector.showHorizontalSelector && Wl(), _l(), Yl(), B.value = !1;
     }
-    const pe = ba(() => {
-      q.value = !0, Fl();
+    const pe = xa(() => {
+      q.value = !0, Al();
     }, T.value > 200 ? 10 : 1, !q.value);
     function ne(e) {
       if ([null, void 0].includes(d.value) || !e.coordinatesLine[d.value]) return !1;
       const { y: a, value: o } = e.coordinatesLine[d.value];
       return { y: a, value: o };
     }
-    function Vl(e) {
+    function Zl(e) {
       const { left: a, top: o } = O.value.getBoundingClientRect(), s = e.clientX - a;
       if (M.value = (e.clientY - o) * 2, (M.value < t.value.top || M.value > t.value.bottom) && (M.value = null), s * 2 < t.value.left || s * 2 > t.value.right) {
         ye.value = !1, d.value = null;
@@ -735,14 +735,14 @@ const Pa = ["id"], Da = ["id"], Fa = ["id"], Ea = ["onClick"], Aa = {
       if (d.value = Math.floor(i / t.value.slot), ye.value = !0, !q.value) return;
       let x = "";
       const v = l.value.style.chart.tooltip.customFormat;
-      gl(v) && ga(() => v({
+      bl(v) && ba(() => v({
         seriesIndex: d.value,
         datapoint: h.value.map((f) => ({
           shape: f.shape || null,
           name: f.name,
           color: f.color,
           type: f.type || "line",
-          value: f.series.find((X, z) => z === d.value)
+          value: f.series.find((W, z) => z === d.value)
         })),
         series: h.value,
         config: l.value
@@ -753,66 +753,66 @@ const Pa = ["id"], Da = ["id"], Fa = ["id"], Ea = ["onClick"], Aa = {
           name: f.name,
           color: f.color,
           type: f.type || "line",
-          value: f.series.find((X, z) => z === d.value)
+          value: f.series.find((W, z) => z === d.value)
         })),
         series: h.value,
         config: l.value
-      }) : (l.value.style.chart.grid.y.timeLabels.values.slice(u.value.start, u.value.end)[d.value] && (x += `<div style="padding-bottom: 6px; margin-bottom: 4px; border-bottom: 1px solid ${l.value.style.chart.tooltip.borderColor}; width:100%">${W.value.slice(u.value.start, u.value.end)[d.value].text}</div>`), x += Rl.value.join(""), fe.value = x), q.value = !1;
+      }) : (l.value.style.chart.grid.y.timeLabels.values.slice(u.value.start, u.value.end)[d.value] && (x += `<div style="padding-bottom: 6px; margin-bottom: 4px; border-bottom: 1px solid ${l.value.style.chart.tooltip.borderColor}; width:100%">${U.value.slice(u.value.start, u.value.end)[d.value].text}</div>`), x += Pl.value.join(""), fe.value = x), q.value = !1;
     }
-    P(() => d.value, (e) => {
+    D(() => d.value, (e) => {
       pe();
-    }), P(() => u.value, (e) => {
-      U.value = !0, se();
+    }), D(() => u.value, (e) => {
+      B.value = !0, se();
     }, {
       deep: !0
-    }), P(() => r.value.showDataLabels, (e) => {
-      U.value = !0, se();
-    }), P(() => M.value, (e) => {
+    }), D(() => r.value.showDataLabels, (e) => {
+      B.value = !0, se();
+    }), D(() => M.value, (e) => {
       e && se();
-    }), P(() => r.value.stacked, (e) => {
-      U.value = !0, q.value = !0, pe();
+    }), D(() => r.value.stacked, (e) => {
+      B.value = !0, q.value = !0, pe();
     });
-    function Gl() {
+    function jl() {
       ye.value = !1, d.value = null, fe.value = "", M.value = null, se();
     }
-    const A = Ie(null), K = Ie(null), Q = Ie(null);
-    vl(() => {
-      Be.value = !0, ze();
+    const A = Me(null), K = Me(null), Q = Me(null);
+    dl(() => {
+      Be.value = !0, $e();
     });
-    function ze() {
-      if (da(g.dataset) ? ha({
+    function $e() {
+      if (ya(g.dataset) ? fa({
         componentName: "VueUiXyCanvas",
         type: "dataset"
       }) : O.value && (n.value = O.value.getContext("2d", { willReadFrequently: !0 })), l.value.responsive) {
-        const e = ma(() => {
-          const { width: a, height: o } = xa({
+        const e = La(() => {
+          const { width: a, height: o } = ka({
             chart: I.value,
-            title: l.value.style.chart.title.text ? Ae.value : null,
-            legend: l.value.style.chart.legend.show ? Ne.value : null,
-            slicer: l.value.style.chart.zoom.show && T.value > 1 ? He.value : null,
-            source: Ye.value
+            title: l.value.style.chart.title.text ? Ne.value : null,
+            legend: l.value.style.chart.legend.show ? He.value : null,
+            slicer: l.value.style.chart.zoom.show && T.value > 1 ? Ye.value : null,
+            source: _e.value
           });
           requestAnimationFrame(() => {
-            _e.value = `${a} / ${o}`;
+            Ve.value = `${a} / ${o}`;
           });
         });
         A.value && (K.value && A.value.unobserve(K.value), A.value.disconnect()), A.value = new ResizeObserver(e), K.value = I.value.parentNode, A.value.observe(K.value);
       }
       Q.value && Q.value.disconnect(), Q.value = new ResizeObserver((e) => {
         for (const a of e)
-          a.contentBoxSize && oe.value && (U.value = !0, pe());
-      }), Q.value.observe(oe.value), ll();
+          a.contentBoxSize && oe.value && (B.value = !0, pe());
+      }), Q.value.observe(oe.value), al();
     }
-    Ql(() => {
+    la(() => {
       Q.value && Q.value.disconnect(), A.value && (K.value && A.value.unobserve(K.value), A.value.disconnect());
     });
-    function tl(e) {
-      Il("selectLegend", h.value.find((a) => a.absoluteIndex === e)), $.value.includes(e) ? $.value = $.value.filter((a) => a !== e) : $.value.push(e), U.value = !0, pe();
+    function ol(e) {
+      Ol("selectLegend", h.value.find((a) => a.absoluteIndex === e)), $.value.includes(e) ? $.value = $.value.filter((a) => a !== e) : $.value.push(e), B.value = !0, pe();
     }
-    const ol = L(() => J.value.map((e, a) => ({
+    const ul = L(() => J.value.map((e, a) => ({
       ...e,
       name: e.name,
-      color: fl(e.color) || Je.value[a] || Z[a] || Z[a % Z.length],
+      color: pl(e.color) || Ke.value[a] || Z[a] || Z[a % Z.length],
       shape: e.shape || "circle",
       prefix: e.prefix || "",
       suffix: e.suffix || "",
@@ -820,9 +820,9 @@ const Pa = ["id"], Da = ["id"], Fa = ["id"], Ea = ["onClick"], Aa = {
     })).map((e) => ({
       ...e,
       opacity: $.value.includes(e.absoluteIndex) ? 0.5 : 1,
-      segregate: () => tl(e.absoluteIndex),
+      segregate: () => ol(e.absoluteIndex),
       isSegregated: $.value.includes(e.absoluteIndex)
-    }))), Zl = L(() => ({
+    }))), ql = L(() => ({
       cy: "donut-div-legend",
       backgroundColor: l.value.style.chart.legend.backgroundColor,
       color: l.value.style.chart.legend.color,
@@ -834,7 +834,7 @@ const Pa = ["id"], Da = ["id"], Fa = ["id"], Ea = ["onClick"], Aa = {
       let a = [];
       for (let i = 0; i < T.value; i += 1) {
         const x = h.value.map((v) => v.series[i] ?? 0).reduce((v, f) => v + f, 0);
-        a.push([l.value.style.chart.grid.y.timeLabels.values.slice(u.value.start, u.value.end)[i] ? W.value.slice(u.value.start, u.value.end)[i].text : i + 1].concat(h.value.map((v) => (v.series[i] ?? 0).toFixed(l.value.table.rounding))).concat((x ?? 0).toFixed(l.value.table.rounding)));
+        a.push([l.value.style.chart.grid.y.timeLabels.values.slice(u.value.start, u.value.end)[i] ? U.value.slice(u.value.start, u.value.end)[i].text : i + 1].concat(h.value.map((v) => (v.series[i] ?? 0).toFixed(l.value.table.rounding))).concat((x ?? 0).toFixed(l.value.table.rounding)));
       }
       const o = {
         th: {
@@ -850,7 +850,7 @@ const Pa = ["id"], Da = ["id"], Fa = ["id"], Ea = ["onClick"], Aa = {
         breakpoint: l.value.table.responsiveBreakpoint
       }, s = [l.value.table.columnNames.period].concat(h.value.map((i) => i.name)).concat(l.value.table.columnNames.total);
       return { head: e, body: a.slice(0, u.value.end - u.value.start), config: o, colNames: s };
-    }), ul = L(() => {
+    }), rl = L(() => {
       if (h.value.length === 0) return { head: [], body: [], config: {}, columnNames: [] };
       const e = h.value.map((o) => ({
         label: o.name,
@@ -858,39 +858,39 @@ const Pa = ["id"], Da = ["id"], Fa = ["id"], Ea = ["onClick"], Aa = {
         type: o.type
       })), a = [];
       for (let o = u.value.start; o < u.value.end; o += 1) {
-        const s = [l.value.style.chart.grid.y.timeLabels.values[o] ? W.value[o].text : o + 1];
+        const s = [l.value.style.chart.grid.y.timeLabels.values[o] ? U.value[o].text : o + 1];
         h.value.forEach((i) => {
           s.push(Number((i.series[o] || 0).toFixed(l.value.table.rounding)));
         }), a.push(s);
       }
       return { head: e, body: a };
     });
-    function $e(e = null) {
-      const a = [[l.value.style.chart.title.text], [l.value.style.chart.title.subtitle.text], [""]], o = ["", ...ul.value.head.map((v) => v.label)], s = ul.value.body, i = a.concat([o]).concat(s), x = ya(i);
-      e ? e(x) : fa({ csvContent: x, title: l.value.style.chart.title.text || "vue-ui-xy-canvas" });
+    function Te(e = null) {
+      const a = [[l.value.style.chart.title.text], [l.value.style.chart.title.subtitle.text], [""]], o = ["", ...rl.value.head.map((v) => v.label)], s = rl.value.body, i = a.concat([o]).concat(s), x = ga(i);
+      e ? e(x) : pa({ csvContent: x, title: l.value.style.chart.title.text || "vue-ui-xy-canvas" });
     }
-    function jl() {
+    function Jl() {
       return h.value;
     }
-    function rl() {
+    function sl() {
       r.value.showTable = !r.value.showTable;
     }
-    function sl() {
+    function nl() {
       r.value.showDataLabels = !r.value.showDataLabels;
     }
-    function nl() {
+    function il() {
       r.value.stacked = !r.value.stacked;
     }
-    function il() {
+    function vl() {
       r.value.showTooltip = !r.value.showTooltip;
     }
     const me = c(!1);
-    function Te() {
+    function Ie() {
       me.value = !me.value;
     }
-    async function ql({ scale: e = 2 } = {}) {
+    async function Kl({ scale: e = 2 } = {}) {
       if (!I.value) return;
-      const { width: a, height: o } = I.value.getBoundingClientRect(), s = a / o, { imageUri: i, base64: x } = await Ma({ domElement: I.value, base64: !0, img: !0, scale: e });
+      const { width: a, height: o } = I.value.getBoundingClientRect(), s = a / o, { imageUri: i, base64: x } = await Ra({ domElement: I.value, base64: !0, img: !0, scale: e });
       return {
         imageUri: i,
         base64: x,
@@ -903,7 +903,7 @@ const Pa = ["id"], Da = ["id"], Fa = ["id"], Ea = ["onClick"], Aa = {
     const ie = L(() => {
       const e = l.value.table.useDialog && !l.value.table.show, a = r.value.showTable;
       return {
-        component: e ? $l : Ta,
+        component: e ? Il : Ma,
         title: `${l.value.style.chart.title.text}${l.value.style.chart.title.subtitle.text ? `: ${l.value.style.chart.title.subtitle.text}` : ""}`,
         props: e ? {
           backgroundColor: l.value.table.th.backgroundColor,
@@ -930,36 +930,40 @@ const Pa = ["id"], Da = ["id"], Fa = ["id"], Ea = ["onClick"], Aa = {
         }
       };
     });
-    return P(() => r.value.showTable, (e) => {
+    D(() => r.value.showTable, (e) => {
       l.value.table.show || (e && l.value.table.useDialog && re.value ? re.value.open() : "close" in re.value && re.value.close());
-    }), xl({
-      getData: jl,
-      getImage: ql,
-      generateCsv: $e,
-      generatePdf: Ze,
-      generateImage: je,
-      toggleTable: rl,
-      toggleLabels: sl,
-      toggleStack: nl,
-      toggleTooltip: il,
-      toggleAnnotator: Te,
-      toggleFullscreen: qe
+    });
+    function cl() {
+      r.value.showTable = !1, Se.value && Se.value.setTableIconState(!1);
+    }
+    return kl({
+      getData: Jl,
+      getImage: Kl,
+      generateCsv: Te,
+      generatePdf: je,
+      generateImage: qe,
+      toggleTable: sl,
+      toggleLabels: nl,
+      toggleStack: il,
+      toggleTooltip: vl,
+      toggleAnnotator: Ie,
+      toggleFullscreen: Je
     }), (e, a) => (S(), de("div", {
       style: le(`width:100%; position:relative; ${l.value.responsive ? "height: 100%" : ""}`),
       ref_key: "xy",
       ref: I,
-      id: `xy_canvas_${B.value}`,
-      class: ea(`vue-ui-donut ${ue.value ? "vue-data-ui-wrapper-fullscreen" : ""}`),
-      onMouseenter: a[7] || (a[7] = () => p(Ue)(!0)),
-      onMouseleave: a[8] || (a[8] = () => p(Ue)(!1))
+      id: `xy_canvas_${_.value}`,
+      class: aa(`vue-ui-donut ${ue.value ? "vue-data-ui-wrapper-fullscreen" : ""}`),
+      onMouseenter: a[5] || (a[5] = () => p(Ue)(!0)),
+      onMouseleave: a[6] || (a[6] = () => p(Ue)(!1))
     }, [
       l.value.style.chart.title.text ? (S(), de("div", {
         key: 0,
         ref_key: "chartTitle",
-        ref: Ae,
+        ref: Ne,
         style: le(`width:100%;background:${l.value.style.chart.backgroundColor};`)
       }, [
-        (S(), D(za, {
+        (S(), P(Ta, {
           key: `title_${ke.value}`,
           config: {
             title: {
@@ -974,16 +978,17 @@ const Pa = ["id"], Da = ["id"], Fa = ["id"], Ea = ["onClick"], Aa = {
         }, null, 8, ["config"]))
       ], 4)) : H("", !0),
       Y("div", {
-        id: `legend-top-${B.value}`
-      }, null, 8, Da),
-      l.value.userOptions.show && ge.value && (p(We) || p(Se)) ? (S(), D(p(zl), {
-        ref: "details",
-        key: `user_option_${Ee.value}`,
+        id: `legend-top-${_.value}`
+      }, null, 8, Ea),
+      l.value.userOptions.show && ge.value && (p(We) || p(ze)) ? (S(), P(p(Tl), {
+        ref_key: "userOptionsRef",
+        ref: Se,
+        key: `user_option_${Ae.value}`,
         backgroundColor: l.value.style.chart.backgroundColor,
         color: l.value.style.chart.color,
-        isPrinting: p(Ve),
-        isImaging: p(Ge),
-        uid: B.value,
+        isPrinting: p(Ge),
+        isImaging: p(Ze),
+        uid: _.value,
         hasTooltip: l.value.userOptions.buttons.tooltip && l.value.style.chart.tooltip.show,
         hasPdf: l.value.userOptions.buttons.pdf,
         hasImg: l.value.userOptions.buttons.img,
@@ -1002,19 +1007,20 @@ const Pa = ["id"], Da = ["id"], Fa = ["id"], Ea = ["onClick"], Aa = {
         isAnnotation: me.value,
         callbacks: l.value.userOptions.callbacks,
         printScale: l.value.userOptions.print.scale,
-        onToggleFullscreen: qe,
-        onGeneratePdf: p(Ze),
-        onGenerateCsv: $e,
-        onGenerateImage: p(je),
-        onToggleTable: rl,
-        onToggleLabels: sl,
-        onToggleStack: nl,
-        onToggleTooltip: il,
-        onToggleAnnotator: Te,
+        tableDialog: l.value.table.useDialog,
+        onToggleFullscreen: Je,
+        onGeneratePdf: p(je),
+        onGenerateCsv: Te,
+        onGenerateImage: p(qe),
+        onToggleTable: sl,
+        onToggleLabels: nl,
+        onToggleStack: il,
+        onToggleTooltip: vl,
+        onToggleAnnotator: Ie,
         style: le({
-          visibility: p(We) ? p(Se) ? "visible" : "hidden" : "visible"
+          visibility: p(We) ? p(ze) ? "visible" : "hidden" : "visible"
         })
-      }, dl({ _: 2 }, [
+      }, yl({ _: 2 }, [
         e.$slots.menuIcon ? {
           name: "menuIcon",
           fn: b(({ isOpen: o, color: s }) => [
@@ -1085,10 +1091,10 @@ const Pa = ["id"], Da = ["id"], Fa = ["id"], Ea = ["onClick"], Aa = {
           ]),
           key: "9"
         } : void 0
-      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasTooltip", "hasPdf", "hasImg", "hasXls", "hasLabel", "hasStack", "hasFullscreen", "hasTable", "isFullscreen", "isTooltip", "isStacked", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "onGeneratePdf", "onGenerateImage", "style"])) : H("", !0),
+      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasTooltip", "hasPdf", "hasImg", "hasXls", "hasLabel", "hasStack", "hasFullscreen", "hasTable", "isFullscreen", "isTooltip", "isStacked", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "tableDialog", "onGeneratePdf", "onGenerateImage", "style"])) : H("", !0),
       Y("div", {
         class: "vue-ui-xy-canvas",
-        style: le(`position: relative; aspect-ratio: ${_e.value}`),
+        style: le(`position: relative; aspect-ratio: ${Ve.value}`),
         ref_key: "container",
         ref: oe
       }, [
@@ -1097,9 +1103,9 @@ const Pa = ["id"], Da = ["id"], Fa = ["id"], Ea = ["onClick"], Aa = {
           ref_key: "canvas",
           ref: O,
           style: { width: "100%", height: "100%" },
-          onMousemove: a[0] || (a[0] = (o) => Vl(o)),
-          onMouseleave: Gl
-        }, null, 544)) : (S(), D(p(wl), {
+          onMousemove: a[0] || (a[0] = (o) => Zl(o)),
+          onMouseleave: jl
+        }, null, 544)) : (S(), P(p(zl), {
           key: 1,
           config: {
             type: "line",
@@ -1117,7 +1123,7 @@ const Pa = ["id"], Da = ["id"], Fa = ["id"], Ea = ["onClick"], Aa = {
             }
           }
         }, null, 8, ["config"])),
-        hl(p(Sl), {
+        fl(p($l), {
           show: r.value.showTooltip && ye.value,
           backgroundColor: l.value.style.chart.tooltip.backgroundColor,
           color: l.value.style.chart.tooltip.color,
@@ -1131,35 +1137,35 @@ const Pa = ["id"], Da = ["id"], Fa = ["id"], Ea = ["onClick"], Aa = {
           content: fe.value,
           isFullscreen: ue.value,
           backgroundOpacity: l.value.style.chart.tooltip.backgroundOpacity,
-          isCustom: p(gl)(l.value.style.chart.tooltip.customFormat),
+          isCustom: p(bl)(l.value.style.chart.tooltip.customFormat),
           smooth: l.value.style.chart.tooltip.smooth,
           backdropFilter: l.value.style.chart.tooltip.backdropFilter
         }, {
           "tooltip-before": b(() => [
-            k(e.$slots, "tooltip-before", V(G({ ...De.value })), void 0, !0)
+            k(e.$slots, "tooltip-before", V(G({ ...Fe.value })), void 0, !0)
           ]),
           "tooltip-after": b(() => [
-            k(e.$slots, "tooltip-after", V(G({ ...De.value })), void 0, !0)
+            k(e.$slots, "tooltip-after", V(G({ ...Fe.value })), void 0, !0)
           ]),
           _: 3
         }, 8, ["show", "backgroundColor", "color", "fontSize", "borderRadius", "borderColor", "borderWidth", "position", "offsetY", "parent", "content", "isFullscreen", "backgroundOpacity", "isCustom", "smooth", "backdropFilter"])
       ], 4),
       Y("div", {
         ref_key: "chartSlicer",
-        ref: He,
+        ref: Ye,
         style: le(`width:100%;background:${l.value.style.chart.backgroundColor}`),
         "data-dom-to-png-ignore": ""
       }, [
-        l.value.style.chart.zoom.show && T.value > 1 ? (S(), D($a, {
+        l.value.style.chart.zoom.show && T.value > 1 ? (S(), P(Ia, {
           ref_key: "slicerComponent",
-          ref: el,
-          key: `slicer_${Fe.value}`,
+          ref: ll,
+          key: `slicer_${Ee.value}`,
           background: l.value.style.chart.zoom.color,
           borderColor: l.value.style.chart.backgroundColor,
           fontSize: l.value.style.chart.zoom.fontSize,
           useResetSlot: l.value.style.chart.zoom.useResetSlot,
-          labelLeft: l.value.style.chart.grid.y.timeLabels.values[u.value.start] ? W.value[u.value.start].text : "",
-          labelRight: l.value.style.chart.grid.y.timeLabels.values[u.value.end - 1] ? W.value[u.value.end - 1].text : "",
+          labelLeft: l.value.style.chart.grid.y.timeLabels.values[u.value.start] ? U.value[u.value.start].text : "",
+          labelRight: l.value.style.chart.grid.y.timeLabels.values[u.value.end - 1] ? U.value[u.value.end - 1].text : "",
           textColor: l.value.style.chart.color,
           inputColor: l.value.style.chart.zoom.color,
           selectColor: l.value.style.chart.zoom.highlightColor,
@@ -1175,7 +1181,7 @@ const Pa = ["id"], Da = ["id"], Fa = ["id"], Ea = ["onClick"], Aa = {
           refreshEndPoint: l.value.style.chart.zoom.endIndex !== null ? l.value.style.chart.zoom.endIndex + 1 : T.value,
           enableRangeHandles: l.value.style.chart.zoom.enableRangeHandles,
           enableSelectionDrag: l.value.style.chart.zoom.enableSelectionDrag,
-          onReset: Qe
+          onReset: el
         }, {
           "reset-action": b(({ reset: o }) => [
             k(e.$slots, "reset-action", V(G({ reset: o })), void 0, !0)
@@ -1184,53 +1190,53 @@ const Pa = ["id"], Da = ["id"], Fa = ["id"], Ea = ["onClick"], Aa = {
         }, 8, ["background", "borderColor", "fontSize", "useResetSlot", "labelLeft", "labelRight", "textColor", "inputColor", "selectColor", "max", "valueStart", "valueEnd", "start", "end", "refreshStartPoint", "refreshEndPoint", "enableRangeHandles", "enableSelectionDrag"])) : H("", !0)
       ], 4),
       Y("div", {
-        id: `legend-bottom-${B.value}`
-      }, null, 8, Fa),
-      Be.value ? (S(), D(la, {
+        id: `legend-bottom-${_.value}`
+      }, null, 8, Aa),
+      Be.value ? (S(), P(ta, {
         key: 2,
-        to: l.value.style.chart.legend.position === "top" ? `#legend-top-${B.value}` : `#legend-bottom-${B.value}`
+        to: l.value.style.chart.legend.position === "top" ? `#legend-top-${_.value}` : `#legend-bottom-${_.value}`
       }, [
         Y("div", {
           ref_key: "chartLegend",
-          ref: Ne
+          ref: He
         }, [
-          l.value.style.chart.legend.show && ge.value ? (S(), D(Sa, {
-            legendSet: ol.value,
-            config: Zl.value,
+          l.value.style.chart.legend.show && ge.value ? (S(), P($a, {
+            legendSet: ul.value,
+            config: ql.value,
             key: `legend_${we.value}`,
-            onClickMarker: a[3] || (a[3] = ({ i: o }) => tl(o))
+            onClickMarker: a[3] || (a[3] = ({ i: o }) => ol(o))
           }, {
             item: b(({ legend: o, index: s }) => [
               Y("div", {
                 onClick: (i) => o.segregate(),
                 style: le(`opacity:${$.value.includes(s) ? 0.5 : 1}`)
-              }, Me(o.name), 13, Ea)
+              }, Oe(o.name), 13, Na)
             ]),
             _: 1
           }, 8, ["legendSet", "config"])) : k(e.$slots, "legend", {
             key: 1,
-            legend: ol.value
+            legend: ul.value
           }, void 0, !0)
         ], 512)
       ], 8, ["to"])) : H("", !0),
-      e.$slots.watermark ? (S(), de("div", Aa, [
-        k(e.$slots, "watermark", V(G({ isPrinting: p(Ve) || p(Ge) })), void 0, !0)
+      e.$slots.watermark ? (S(), de("div", Ha, [
+        k(e.$slots, "watermark", V(G({ isPrinting: p(Ge) || p(Ze) })), void 0, !0)
       ])) : H("", !0),
       e.$slots.source ? (S(), de("div", {
         key: 4,
         ref_key: "source",
-        ref: Ye,
+        ref: _e,
         dir: "auto"
       }, [
         k(e.$slots, "source", {}, void 0, !0)
       ], 512)) : H("", !0),
-      ge.value ? (S(), D(aa(ie.value.component), ta({ key: 5 }, ie.value.props, {
+      ge.value ? (S(), P(oa(ie.value.component), ua({ key: 5 }, ie.value.props, {
         ref_key: "tableUnit",
         ref: re,
-        onClose: a[6] || (a[6] = (o) => r.value.showTable = !1)
-      }), dl({
+        onClose: cl
+      }), yl({
         content: b(() => [
-          (S(), D(p(kl), {
+          (S(), P(p(wl), {
             key: `table_${Ce.value}`,
             colNames: be.value.colNames,
             head: be.value.head,
@@ -1238,13 +1244,13 @@ const Pa = ["id"], Da = ["id"], Fa = ["id"], Ea = ["onClick"], Aa = {
             config: be.value.config,
             title: l.value.table.useDialog ? "" : ie.value.title,
             withCloseButton: !l.value.table.useDialog,
-            onClose: a[5] || (a[5] = (o) => r.value.showTable = !1)
+            onClose: cl
           }, {
             th: b(({ th: o }) => [
-              Y("div", { innerHTML: o }, null, 8, Na)
+              Y("div", { innerHTML: o }, null, 8, Ya)
             ]),
             td: b(({ td: o }) => [
-              yl(Me(o), 1)
+              gl(Oe(o), 1)
             ]),
             _: 1
           }, 8, ["colNames", "head", "body", "config", "title", "withCloseButton"]))
@@ -1254,7 +1260,7 @@ const Pa = ["id"], Da = ["id"], Fa = ["id"], Ea = ["onClick"], Aa = {
         l.value.table.useDialog ? {
           name: "title",
           fn: b(() => [
-            yl(Me(ie.value.title), 1)
+            gl(Oe(ie.value.title), 1)
           ]),
           key: "0"
         } : void 0,
@@ -1264,9 +1270,9 @@ const Pa = ["id"], Da = ["id"], Fa = ["id"], Ea = ["onClick"], Aa = {
             Y("button", {
               tabindex: "0",
               class: "vue-ui-user-options-button",
-              onClick: a[4] || (a[4] = (o) => $e(l.value.userOptions.callbacks.csv))
+              onClick: a[4] || (a[4] = (o) => Te(l.value.userOptions.callbacks.csv))
             }, [
-              hl(Oa, {
+              fl(Da, {
                 name: "excel",
                 stroke: ie.value.props.color
               }, null, 8, ["stroke"])
@@ -1275,17 +1281,17 @@ const Pa = ["id"], Da = ["id"], Fa = ["id"], Ea = ["onClick"], Aa = {
           key: "1"
         } : void 0
       ]), 1040)) : H("", !0),
-      l.value.userOptions.buttons.annotator && h.value.length ? (S(), D(p(Cl), {
+      l.value.userOptions.buttons.annotator && h.value.length ? (S(), P(p(Sl), {
         key: 6,
         parent: I.value,
         backgroundColor: l.value.style.chart.backgroundColor,
         color: l.value.style.chart.color,
         active: me.value,
-        onClose: Te
+        onClose: Ie
       }, null, 8, ["parent", "backgroundColor", "color", "active"])) : H("", !0)
-    ], 46, Pa));
+    ], 46, Fa));
   }
-}, lt = /* @__PURE__ */ Ra(Ha, [["__scopeId", "data-v-7eb0be8b"]]);
+}, tt = /* @__PURE__ */ Pa(_a, [["__scopeId", "data-v-5ac4ec5c"]]);
 export {
-  lt as default
+  tt as default
 };