vue-data-ui 3.0.22 → 3.1.0

package/dist/{vue-ui-dumbbell-Dm3gsrzi.js → vue-ui-dumbbell-D-t4M00E.js}

@@ -1,20 +1,20 @@
-import { defineAsyncComponent as U, computed as g, ref as h, toRefs as Lt, watch as ge, shallowRef as Ye, onMounted as Ze, onBeforeUnmount as Je, watchEffect as At, createElementBlock as v, openBlock as n, unref as i, normalizeStyle as ee, normalizeClass as Ke, createBlock as T, createCommentVNode as b, createElementVNode as c, createSlots as Nt, withCtx as x, renderSlot as p, normalizeProps as te, guardReactiveProps as le, createVNode as St, withDirectives as W, Fragment as C, renderList as A, toDisplayString as _, vShow as q, Teleport as Mt, createTextVNode as Qe, nextTick as Xt } from "vue";
-import { u as zt, c as et, t as Tt, b as It, o as Ot, f as tt, g as Ft, h as lt, D as Ht, i as w, k as H, X as at, s as st, l as j, j as Y, v as Pt, w as Dt } from "./index-BHb_mcWF.js";
-import { t as me, u as Gt } from "./useResponsive-DfdjqQps.js";
-import { u as Et } from "./usePrinter-B7rhbRrT.js";
-import { u as Rt, B as Bt } from "./useLoading-D7YHNtLX.js";
-import { u as ot } from "./useNestedProp-aC9S6EFJ.js";
-import { u as Vt } from "./useUserOptionState-BIvW1Kz7.js";
-import { u as Ut } from "./useChartAccessibility-9icAAmYg.js";
-import { u as Wt } from "./useTimeLabelCollider-CIsgDrl9.js";
-import qt from "./img-DsVqerdt.js";
-import jt from "./Title-BL-IjQmj.js";
-import Yt from "./Legend-DkU3at-b.js";
-import { _ as Zt } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const Jt = ["id"], Kt = ["id"], Qt = ["xmlns", "viewBox"], el = ["x", "y", "width", "height"], tl = { key: 1 }, ll = ["x1", "x2", "y1", "y2", "stroke", "stroke-width", "stroke-dasharray"], al = { key: 2 }, sl = ["x1", "x2", "y1", "y2", "stroke", "stroke-width", "stroke-dasharray"], ol = ["x1", "x2", "y1", "y2", "stroke", "stroke-width", "stroke-dasharray"], nl = ["transform", "font-size", "fill"], rl = ["x", "y", "font-size", "fill", "font-weight", "onMouseenter", "onMouseleave", "onClick"], ul = ["x", "y", "font-size", "fill", "onMouseenter", "onMouseleave", "onClick"], il = ["x", "y", "font-size", "fill"], cl = ["transform", "font-size", "fill", "font-weight", "text-anchor"], vl = ["d", "stroke", "stroke-width", "stroke-dasharray"], dl = ["d", "stroke", "stroke-width", "stroke-dasharray"], hl = ["x", "y", "height", "width", "fill"], yl = ["transform", "fill", "font-size"], fl = ["id"], bl = ["stop-color"], gl = ["stop-color"], ml = ["stop-color"], pl = ["id"], xl = ["stop-color"], _l = ["stop-color"], kl = ["stop-color"], Cl = ["id"], wl = ["stop-color"], $l = ["stop-color"], Ll = ["stop-color"], Al = ["id"], Nl = ["stop-color"], Sl = ["stop-color"], Ml = ["stop-color"], Xl = ["id"], zl = ["stop-color"], Tl = ["stop-color"], Il = ["stop-color"], Ol = ["id"], Fl = ["stop-color"], Hl = ["stop-color"], Pl = ["id"], Dl = ["stop-color"], Gl = ["stop-color"], El = { key: 0 }, Rl = { key: 0 }, Bl = ["d", "fill"], Vl = { key: 1 }, Ul = ["x", "y", "height", "width", "fill"], Wl = ["cx", "cy", "r", "fill", "stroke", "stroke-width"], ql = ["cx", "cy", "r", "fill", "stroke", "stroke-width"], jl = { key: 7 }, Yl = ["x", "y", "fill", "font-size"], Zl = { key: 8 }, Jl = ["x", "y", "fill", "font-size"], Kl = ["x", "y", "width", "height", "fill", "onMouseenter", "onMouseleave", "onClick"], Ql = {
+import { defineAsyncComponent as H, computed as g, ref as h, toRefs as zt, watch as le, shallowRef as Ke, onMounted as Qe, onBeforeUnmount as et, watchEffect as Tt, createElementBlock as v, openBlock as n, unref as i, normalizeStyle as ae, normalizeClass as tt, createBlock as I, createCommentVNode as b, createElementVNode as c, createSlots as lt, withCtx as p, renderSlot as x, normalizeProps as se, guardReactiveProps as oe, createVNode as at, withDirectives as j, Fragment as C, renderList as A, toDisplayString as _, vShow as Y, Teleport as Dt, createTextVNode as _e, resolveDynamicComponent as It, mergeProps as Ot, nextTick as Ft } from "vue";
+import { u as Ht, c as st, t as Pt, b as Gt, o as Et, f as ot, g as Bt, h as nt, D as Rt, i as w, k as P, X as rt, s as ut, l as Z, j as J, v as Vt, w as Ut } from "./index-CDQbCd41.js";
+import { t as ke, u as Wt } from "./useResponsive-DfdjqQps.js";
+import { u as qt } from "./usePrinter-Bnl1YeUU.js";
+import { u as jt, B as Yt } from "./BaseScanner-BgWxam9d.js";
+import { u as it } from "./useNestedProp-BPEHGiYX.js";
+import { u as Zt } from "./useUserOptionState-BIvW1Kz7.js";
+import { u as Jt } from "./useChartAccessibility-9icAAmYg.js";
+import { u as Kt } from "./useTimeLabelCollider-CIsgDrl9.js";
+import Qt from "./img-JOqdlnUs.js";
+import el from "./Title-Dq2_Z9kR.js";
+import tl from "./Legend-2-dC7DVb.js";
+import { _ as ll } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const al = ["id"], sl = ["id"], ol = ["xmlns", "viewBox"], nl = ["x", "y", "width", "height"], rl = { key: 1 }, ul = ["x1", "x2", "y1", "y2", "stroke", "stroke-width", "stroke-dasharray"], il = { key: 2 }, cl = ["x1", "x2", "y1", "y2", "stroke", "stroke-width", "stroke-dasharray"], vl = ["x1", "x2", "y1", "y2", "stroke", "stroke-width", "stroke-dasharray"], dl = ["transform", "font-size", "fill"], hl = ["x", "y", "font-size", "fill", "font-weight", "onMouseenter", "onMouseleave", "onClick"], fl = ["x", "y", "font-size", "fill", "onMouseenter", "onMouseleave", "onClick"], yl = ["x", "y", "font-size", "fill"], bl = ["transform", "font-size", "fill", "font-weight", "text-anchor"], gl = ["d", "stroke", "stroke-width", "stroke-dasharray"], ml = ["d", "stroke", "stroke-width", "stroke-dasharray"], pl = ["x", "y", "height", "width", "fill"], xl = ["transform", "fill", "font-size"], _l = ["id"], kl = ["stop-color"], Cl = ["stop-color"], wl = ["stop-color"], $l = ["id"], Ll = ["stop-color"], Al = ["stop-color"], Nl = ["stop-color"], Sl = ["id"], Ml = ["stop-color"], Xl = ["stop-color"], zl = ["stop-color"], Tl = ["id"], Dl = ["stop-color"], Il = ["stop-color"], Ol = ["stop-color"], Fl = ["id"], Hl = ["stop-color"], Pl = ["stop-color"], Gl = ["stop-color"], El = ["id"], Bl = ["stop-color"], Rl = ["stop-color"], Vl = ["id"], Ul = ["stop-color"], Wl = ["stop-color"], ql = { key: 0 }, jl = { key: 0 }, Yl = ["d", "fill"], Zl = { key: 1 }, Jl = ["x", "y", "height", "width", "fill"], Kl = ["cx", "cy", "r", "fill", "stroke", "stroke-width"], Ql = ["cx", "cy", "r", "fill", "stroke", "stroke-width"], ea = { key: 7 }, ta = ["x", "y", "fill", "font-size"], la = { key: 8 }, aa = ["x", "y", "fill", "font-size"], sa = ["x", "y", "width", "height", "fill", "onMouseenter", "onMouseleave", "onClick"], oa = {
   key: 4,
   class: "vue-data-ui-watermark"
-}, ea = ["id"], ta = ["xmlns", "height", "width"], la = ["fill"], aa = ["innerHTML"], sa = {
+}, na = ["id"], ra = ["xmlns", "height", "width"], ua = ["fill"], ia = ["innerHTML"], ca = {
   __name: "vue-ui-dumbbell",
   props: {
     config: {
@@ -31,18 +31,18 @@ const Jt = ["id"], Kt = ["id"], Qt = ["xmlns", "viewBox"], el = ["x", "y", "widt
     }
   },
   emits: ["selectDatapoint"],
-  setup(nt, { expose: rt, emit: oa }) {
-    const ut = U(() => import("./vue-ui-accordion-DsnF0JuK.js")), it = U(() => import("./DataTable-Y5T9UxMO.js")), ct = U(() => import("./PenAndPaper-BMHsOtT8.js")), vt = U(() => import("./UserOptions-BWMV0_Ze.js")), dt = U(() => import("./PackageVersion-CE7HSich.js")), { vue_ui_dumbbell: ht } = zt(), N = nt, Z = g({
+  setup(ct, { expose: vt, emit: va }) {
+    const dt = H(() => import("./BaseIcon-DHtro8us.js")), ht = H(() => import("./vue-ui-accordion-Bf_LHFFX.js")), ft = H(() => import("./DataTable-DJjA2_wf.js")), yt = H(() => import("./PenAndPaper-B7QEDgx4.js")), bt = H(() => import("./UserOptions-BuGfCdAY.js")), gt = H(() => import("./PackageVersion-DU12WH3O.js")), mt = H(() => import("./BaseDraggableDialog-O7900pGp.js")), { vue_ui_dumbbell: pt } = Ht(), N = ct, K = g({
       get() {
         return !!N.dataset && N.dataset.length;
       },
       set(l) {
         return l;
       }
-    }), y = h(et()), pe = h(0), I = h(null), xe = h(null), _e = h(null), ke = h(null), Ce = h(null), we = h(0), $e = h(0), Le = h(0), Ae = h(!1), ae = h(null), se = h(null), J = h(null), oe = h(null), O = h(null), r = h(null), F = h(!1), e = h(ie()), { loading: ne, FINAL_DATASET: re, manualLoading: yt } = Rt({
-      ...Lt(N),
+    }), f = h(st()), Ce = h(0), S = h(null), we = h(null), $e = h(null), Le = h(null), Ae = h(null), Ne = h(0), Se = h(0), Me = h(0), Xe = h(!1), U = h(null), ne = h(null), re = h(null), Q = h(null), ue = h(null), O = h(null), r = h(null), F = h(!1), e = h(de()), { loading: ie, FINAL_DATASET: ce, manualLoading: xt } = jt({
+      ...zt(N),
       FINAL_CONFIG: e,
-      prepareConfig: ie,
+      prepareConfig: de,
       skeletonDataset: [
         { name: "_", start: 21, end: 34 },
         { name: "_", start: 13, end: 21 },
@@ -50,7 +50,7 @@ const Jt = ["id"], Kt = ["id"], Qt = ["xmlns", "viewBox"], el = ["x", "y", "widt
         { name: "_", start: 5, end: 8 },
         { name: "_", start: 3, end: 5 }
       ],
-      skeletonConfig: Tt({
+      skeletonConfig: Pt({
         defaultConfig: e.value,
         userConfig: {
           userOptions: { show: !1 },
@@ -92,163 +92,163 @@ const Jt = ["id"], Kt = ["id"], Qt = ["xmlns", "viewBox"], el = ["x", "y", "widt
           }
         }
       })
-    }), { userOptionsVisible: ue, setUserOptionsVisibility: Ne, keepUserOptionState: Se } = Vt({ config: e.value }), { svgRef: Me } = Ut({ config: e.value.style.chart.title });
-    function ie() {
-      const l = ot({
+    }), { userOptionsVisible: ve, setUserOptionsVisibility: ze, keepUserOptionState: Te } = Zt({ config: e.value }), { svgRef: De } = Jt({ config: e.value.style.chart.title });
+    function de() {
+      const l = it({
         userConfig: N.config,
-        defaultConfig: ht
+        defaultConfig: pt
       });
       return l.theme ? {
-        ...ot({
-          userConfig: It.vue_ui_dumbbell[l.theme] || N.config,
+        ...it({
+          userConfig: Gt.vue_ui_dumbbell[l.theme] || N.config,
           defaultConfig: l
         })
       } : l;
     }
-    ge(() => N.config, (l) => {
-      ne.value || (e.value = ie()), ue.value = !e.value.userOptions.showOnChartHover, ze(), we.value += 1, $e.value += 1, Le.value += 1, E.value = e.value.style.chart.rowHeight, R.value = e.value.style.chart.width, D.value.showTable = e.value.table.show;
-    }, { deep: !0 }), ge(() => re.value, (l) => {
-      Array.isArray(l) && l.length > 0 && (yt.value = !1), Ge(), Ee();
+    le(() => N.config, (l) => {
+      ie.value || (e.value = de()), ve.value = !e.value.userOptions.showOnChartHover, Oe(), Ne.value += 1, Se.value += 1, Me.value += 1, B.value = e.value.style.chart.rowHeight, R.value = e.value.style.chart.width, X.value.showTable = e.value.table.show;
+    }, { deep: !0 }), le(() => ce.value, (l) => {
+      Array.isArray(l) && l.length > 0 && (xt.value = !1), Ve(), Ue();
     }, { deep: !0 });
-    const S = Ye(null), P = Ye(null);
-    Ze(() => {
-      Ae.value = !0, ze();
+    const M = Ke(null), G = Ke(null);
+    Qe(() => {
+      Xe.value = !0, Oe();
     });
-    const Xe = g(() => !!e.value.debug);
-    function ze() {
-      if (Ot(N.dataset) ? tt({
+    const Ie = g(() => !!e.value.debug);
+    function Oe() {
+      if (Et(N.dataset) ? ot({
         componentName: "VueUiDumbbell",
         type: "dataset",
-        debug: Xe.value
+        debug: Ie.value
       }) : N.dataset.forEach((l, s) => {
-        Ft({
+        Bt({
           datasetObject: l,
           requiredAttributes: ["name", "start", "end"]
         }).forEach((t) => {
-          Z.value = !1, tt({
+          K.value = !1, ot({
             componentName: "VueUiDumbbell",
             type: "datasetSerieAttribute",
             property: t,
             index: s,
-            debug: Xe.value
+            debug: Ie.value
           });
         });
       }), e.value.responsive) {
-        const l = me(() => {
-          const { width: s, height: t } = Gt({
-            chart: I.value,
-            title: e.value.style.chart.title.text ? xe.value : null,
-            legend: e.value.style.chart.legend.show ? _e.value : null,
-            source: ke.value,
-            noTitle: Ce.value
+        const l = ke(() => {
+          const { width: s, height: t } = Wt({
+            chart: S.value,
+            title: e.value.style.chart.title.text ? we.value : null,
+            legend: e.value.style.chart.legend.show ? $e.value : null,
+            source: Le.value,
+            noTitle: Ae.value
           }), a = e.value.style.chart.title.text ? 24 : 0, u = e.value.style.chart.legend.show ? 24 : 0;
           requestAnimationFrame(async () => {
-            R.value = Math.max(0.1, s), E.value = Math.max(0.1, (Math.max(0.1, t) - (a + u)) / re.value.length), qe();
+            R.value = Math.max(0.1, s), B.value = Math.max(0.1, (Math.max(0.1, t) - (a + u)) / ce.value.length), Ze();
           });
         });
-        S.value && (P.value && S.value.unobserve(P.value), S.value.disconnect()), S.value = new ResizeObserver(l), P.value = I.value.parentNode, S.value.observe(P.value);
+        M.value && (G.value && M.value.unobserve(G.value), M.value.disconnect()), M.value = new ResizeObserver(l), G.value = S.value.parentNode, M.value.observe(G.value);
       }
-      qe();
+      Ze();
     }
-    Je(() => {
-      L.value != null && (cancelAnimationFrame(L.value), L.value = null), S.value && (P.value && S.value.unobserve(P.value), S.value.disconnect());
+    et(() => {
+      L.value != null && (cancelAnimationFrame(L.value), L.value = null), M.value && (G.value && M.value.unobserve(G.value), M.value.disconnect());
     });
-    const { isPrinting: Te, isImaging: Ie, generatePdf: Oe, generateImage: Fe } = Et({
-      elementId: `dumbbell_${y.value}`,
+    const { isPrinting: Fe, isImaging: He, generatePdf: Pe, generateImage: Ge } = qt({
+      elementId: `dumbbell_${f.value}`,
       fileName: e.value.style.chart.title.text || "vue-ui-dumbbell",
       options: e.value.userOptions.print
-    }), ft = g(() => e.value.userOptions.show && !e.value.style.chart.title.text), D = h({
+    }), _t = g(() => e.value.userOptions.show && !e.value.style.chart.title.text), X = h({
       showTable: e.value.table.show
     });
-    ge(e, () => {
-      D.value = {
+    le(e, () => {
+      X.value = {
         showTable: e.value.table.show
       };
     }, { immediate: !0 });
-    const G = g(() => re.value.map((l, s) => ({
+    const E = g(() => ce.value.map((l, s) => ({
       ...l,
-      start: lt(l.start),
-      end: lt(l.end),
-      id: l.id ?? `${String(l.name)}__${String(l.start)}__${String(l.end)}__${et()}`
-    }))), He = g(() => {
-      const l = e.value.style.chart.grid, s = G.value.flatMap((f) => [f.start, f.end]).map((f) => Number(f)).filter((f) => Number.isFinite(f)), t = s.length ? Math.min(...s) : 0, a = s.length ? Math.max(...s) : 0, u = l.scaleMin ?? Math.min(t, 0), d = l.scaleMax ?? a;
+      start: nt(l.start),
+      end: nt(l.end),
+      id: l.id ?? `${String(l.name)}__${String(l.start)}__${String(l.end)}__${st()}`
+    }))), Ee = g(() => {
+      const l = e.value.style.chart.grid, s = E.value.flatMap((y) => [y.start, y.end]).map((y) => Number(y)).filter((y) => Number.isFinite(y)), t = s.length ? Math.min(...s) : 0, a = s.length ? Math.max(...s) : 0, u = l.scaleMin ?? Math.min(t, 0), d = l.scaleMax ?? a;
       return { min: u, max: d };
-    }), $ = g(() => Ht(He.value.min, He.value.max, e.value.style.chart.grid.scaleSteps)), E = h(e.value.style.chart.rowHeight), R = h(e.value.style.chart.width);
-    function bt() {
+    }), $ = g(() => Rt(Ee.value.min, Ee.value.max, e.value.style.chart.grid.scaleSteps)), B = h(e.value.style.chart.rowHeight), R = h(e.value.style.chart.width);
+    function kt() {
       let l = 0;
-      se.value && (l = Array.from(se.value.querySelectorAll("text")).reduce((a, u) => {
+      re.value && (l = Array.from(re.value.querySelectorAll("text")).reduce((a, u) => {
         const d = u.getComputedTextLength();
         return d > a ? d : a;
       }, 0));
-      const s = ae.value ? ae.value.getBoundingClientRect().width : 0;
+      const s = ne.value ? ne.value.getBoundingClientRect().width : 0;
       return l + s + (s ? 24 + e.value.style.chart.labels.axis.yLabelOffsetX : 0);
     }
-    const ce = h(0), gt = me((l) => {
-      ce.value = l;
+    const he = h(0), Ct = ke((l) => {
+      he.value = l;
     }, 100);
-    At((l) => {
-      const s = J.value;
+    Tt((l) => {
+      const s = Q.value;
       if (!s) return;
       const t = new ResizeObserver((a) => {
-        gt(a[0].contentRect.height);
+        Ct(a[0].contentRect.height);
       });
       t.observe(s), l(() => t.disconnect());
-    }), Je(() => {
-      ce.value = 0;
+    }), et(() => {
+      he.value = 0;
     });
-    const Pe = g(() => {
+    const Be = g(() => {
       F.value;
       let l = 0;
-      oe.value && (l = oe.value.getBBox().height);
+      ue.value && (l = ue.value.getBBox().height);
       let s = 0;
-      return J.value && (s = ce.value), l + s;
-    }), ve = g(() => G.value.length);
-    function De(l, s, t) {
-      const a = Number(l), u = Number(s.min), d = Number(s.max), f = Number(t.width);
-      if (!Number.isFinite(a) || !Number.isFinite(u) || !Number.isFinite(d) || !Number.isFinite(f))
+      return Q.value && (s = he.value), l + s;
+    }), fe = g(() => E.value.length);
+    function Re(l, s, t) {
+      const a = Number(l), u = Number(s.min), d = Number(s.max), y = Number(t.width);
+      if (!Number.isFinite(a) || !Number.isFinite(u) || !Number.isFinite(d) || !Number.isFinite(y))
         return t.left;
       const m = d - u;
-      return m <= 0 ? t.left : t.left + (a - u) / m * f;
+      return m <= 0 ? t.left : t.left + (a - u) / m * y;
     }
     const o = g(() => {
       F.value;
-      const l = bt(), s = e.value.style.chart.padding, t = e.value.style.chart.labels.axis.xLabel ? e.value.style.chart.labels.axis.xLabelOffsetY : 0, a = E.value * ve.value - Pe.value - s.top - s.bottom - t, u = a / ve.value, d = E.value * ve.value, f = R.value - l - s.left - s.right, m = $.value.ticks.length * (f / $.value.ticks.length);
+      const l = kt(), s = e.value.style.chart.padding, t = e.value.style.chart.labels.axis.xLabel ? e.value.style.chart.labels.axis.xLabelOffsetY : 0, a = B.value * fe.value - Be.value - s.top - s.bottom - t, u = a / fe.value, d = B.value * fe.value, y = R.value - l - s.left - s.right, m = $.value.ticks.length * (y / $.value.ticks.length);
       return {
         left: e.value.style.chart.padding.left + l,
         right: R.value - e.value.style.chart.padding.right,
         top: e.value.style.chart.padding.top,
-        bottom: d - e.value.style.chart.padding.bottom - Pe.value - t,
-        width: f,
+        bottom: d - e.value.style.chart.padding.bottom - Be.value - t,
+        width: y,
         height: a,
         rowHeight: u,
         absoluteHeight: d,
         widthPlotReference: m
       };
-    }), M = g(() => Math.min(E.value / 2 * 0.7, e.value.style.chart.plots.radius)), B = h([]), k = g({
+    }), z = g(() => Math.min(B.value / 2 * 0.7, e.value.style.chart.plots.radius)), W = h([]), k = g({
       get() {
         const l = o.value, s = $.value;
-        return B.value.map((t, a) => {
-          const u = De(t.start, s, l), d = De(t.endVal, s, l), f = u + (d - u) / 2, m = ![null, void 0].includes(t.start) && ![null, void 0].includes(t.end) && t.end > t.start, z = ![null, void 0].includes(t.start) && ![null, void 0].includes(t.end) && t.end < t.start, je = ![null, void 0].includes(t.start) && ![null, void 0].includes(t.end) && t.end === t.start || [null, void 0].includes(t.start) || [null, void 0].includes(t.end), $t = m ? e.value.style.chart.plots.evaluationColors.positive : z ? e.value.style.chart.plots.evaluationColors.negative : e.value.style.chart.plots.evaluationColors.neutral;
+        return W.value.map((t, a) => {
+          const u = Re(t.start, s, l), d = Re(t.endVal, s, l), y = u + (d - u) / 2, m = ![null, void 0].includes(t.start) && ![null, void 0].includes(t.end) && t.end > t.start, D = ![null, void 0].includes(t.start) && ![null, void 0].includes(t.end) && t.end < t.start, Je = ![null, void 0].includes(t.start) && ![null, void 0].includes(t.end) && t.end === t.start || [null, void 0].includes(t.start) || [null, void 0].includes(t.end), Xt = m ? e.value.style.chart.plots.evaluationColors.positive : D ? e.value.style.chart.plots.evaluationColors.negative : e.value.style.chart.plots.evaluationColors.neutral;
           return {
             ...t,
             isPositive: m,
-            isNegative: z,
-            isNeutral: je,
-            evaluationColor: $t,
-            evaluationGrad: `url(#${m ? "positive" : z ? "negative" : "neutral"}_grad_${y.value})`,
+            isNegative: D,
+            isNeutral: Je,
+            evaluationColor: Xt,
+            evaluationGrad: `url(#${m ? "positive" : D ? "negative" : "neutral"}_grad_${f.value})`,
             startX: u,
             endX: d,
-            centerX: f,
+            centerX: y,
             y: l.top + a * l.rowHeight + l.rowHeight / 2
           };
         });
       },
       set(l) {
-        B.value = l;
+        W.value = l;
       }
     });
-    function Ge() {
-      B.value = G.value.map((l) => {
+    function Ve() {
+      W.value = E.value.map((l) => {
         const s = Number(l.start);
         return {
           ...l,
@@ -257,37 +257,37 @@ const Jt = ["id"], Kt = ["id"], Qt = ["xmlns", "viewBox"], el = ["x", "y", "widt
       });
     }
     const L = h(null);
-    Ze(() => {
-      Ee();
+    Qe(() => {
+      Ue();
     });
-    function Ee() {
-      if (L.value != null && (cancelAnimationFrame(L.value), L.value = null), Ge(), !e.value.useAnimation) {
-        k.value = B.value.map((a) => {
+    function Ue() {
+      if (L.value != null && (cancelAnimationFrame(L.value), L.value = null), Ve(), !e.value.useAnimation) {
+        k.value = W.value.map((a) => {
           const u = Number(a.end);
           return { ...a, endVal: Number.isFinite(u) ? u : a.endVal };
         });
         return;
       }
-      const l = Math.max(1, Math.min(100, e.value.animationSpeed || 100)) / 100, s = G.value.map((a) => {
-        const u = Number(a.start), d = Number(a.end), f = Number.isFinite(u) ? u : 0;
-        return (Number.isFinite(d) ? d : f) - f;
+      const l = Math.max(1, Math.min(100, e.value.animationSpeed || 100)) / 100, s = E.value.map((a) => {
+        const u = Number(a.start), d = Number(a.end), y = Number.isFinite(u) ? u : 0;
+        return (Number.isFinite(d) ? d : y) - y;
       }), t = () => {
         let a = !0;
-        k.value = B.value.map((u, d) => {
-          const f = Number.isFinite(Number(u.end)) ? Number(u.end) : u.endVal, m = u.endVal + s[d] * l, z = s[d] >= 0 ? Math.min(m, f) : Math.max(m, f);
-          return z !== f && (a = !1), { ...u, endVal: z };
+        k.value = W.value.map((u, d) => {
+          const y = Number.isFinite(Number(u.end)) ? Number(u.end) : u.endVal, m = u.endVal + s[d] * l, D = s[d] >= 0 ? Math.min(m, y) : Math.max(m, y);
+          return D !== y && (a = !1), { ...u, endVal: D };
         }), a ? L.value = null : L.value = requestAnimationFrame(t);
       };
       L.value = requestAnimationFrame(t);
     }
-    const Re = g(() => e.value.style.chart.plots.evaluationColors.enable ? [
-      { name: e.value.style.chart.legend.labelNegative, color: e.value.style.chart.plots.gradient.show ? `url(#negative_grad_${y.value})` : e.value.style.chart.plots.evaluationColors.negative },
-      { name: e.value.style.chart.legend.labelNeutral, color: e.value.style.chart.plots.gradient.show ? `url(#neutral_grad_${y.value})` : e.value.style.chart.plots.evaluationColors.neutral },
-      { name: e.value.style.chart.legend.labelPositive, color: e.value.style.chart.plots.gradient.show ? `url(#positive_grad_${y.value})` : e.value.style.chart.plots.evaluationColors.positive }
+    const We = g(() => e.value.style.chart.plots.evaluationColors.enable ? [
+      { name: e.value.style.chart.legend.labelNegative, color: e.value.style.chart.plots.gradient.show ? `url(#negative_grad_${f.value})` : e.value.style.chart.plots.evaluationColors.negative },
+      { name: e.value.style.chart.legend.labelNeutral, color: e.value.style.chart.plots.gradient.show ? `url(#neutral_grad_${f.value})` : e.value.style.chart.plots.evaluationColors.neutral },
+      { name: e.value.style.chart.legend.labelPositive, color: e.value.style.chart.plots.gradient.show ? `url(#positive_grad_${f.value})` : e.value.style.chart.plots.evaluationColors.positive }
     ] : [
-      { name: e.value.style.chart.legend.labelStart, color: e.value.style.chart.plots.gradient.show ? `url(#start_grad_${y.value})` : e.value.style.chart.plots.startColor },
-      { name: e.value.style.chart.legend.labelEnd, color: e.value.style.chart.plots.gradient.show ? `url(#end_grad_${y.value})` : e.value.style.chart.plots.endColor }
-    ]), mt = g(() => ({
+      { name: e.value.style.chart.legend.labelStart, color: e.value.style.chart.plots.gradient.show ? `url(#start_grad_${f.value})` : e.value.style.chart.plots.startColor },
+      { name: e.value.style.chart.legend.labelEnd, color: e.value.style.chart.plots.gradient.show ? `url(#end_grad_${f.value})` : e.value.style.chart.plots.endColor }
+    ]), wt = g(() => ({
       cy: "donut-div-legend",
       backgroundColor: e.value.style.chart.legend.backgroundColor,
       color: e.value.style.chart.legend.color,
@@ -295,7 +295,7 @@ const Jt = ["id"], Kt = ["id"], Qt = ["xmlns", "viewBox"], el = ["x", "y", "widt
       paddingBottom: 12,
       paddingTop: 12,
       fontWeight: e.value.style.chart.legend.bold ? "bold" : ""
-    })), X = g(() => {
+    })), T = g(() => {
       const l = k.value.map((t) => ({
         name: t.name
       })), s = k.value.map((t) => ({
@@ -303,33 +303,33 @@ const Jt = ["id"], Kt = ["id"], Qt = ["xmlns", "viewBox"], el = ["x", "y", "widt
         end: t.end
       }));
       return { head: l, body: s };
-    }), K = g(() => {
+    }), ee = g(() => {
       const l = [
         e.value.table.columnNames.series,
         e.value.table.columnNames.start,
         e.value.table.columnNames.end,
         e.value.table.columnNames.progression
-      ], s = X.value.head.map((u, d) => {
-        const f = w({
+      ], s = T.value.head.map((u, d) => {
+        const y = w({
           p: e.value.style.chart.labels.prefix,
-          v: X.value.body[d].start,
+          v: T.value.body[d].start,
           s: e.value.style.chart.labels.suffix,
           r: e.value.table.td.roundingValue
         }), m = w({
           p: e.value.style.chart.labels.prefix,
-          v: X.value.body[d].end,
+          v: T.value.body[d].end,
           s: e.value.style.chart.labels.suffix,
           r: e.value.table.td.roundingValue
-        }), z = w({
-          v: 100 * (X.value.body[d].end / X.value.body[d].start - 1),
+        }), D = w({
+          v: 100 * (T.value.body[d].end / T.value.body[d].start - 1),
           s: "%",
           r: e.value.table.td.roundingPercentage
         });
         return [
           { name: u.name },
-          f,
+          y,
           m,
-          z
+          D
         ];
       }), t = {
         th: {
@@ -356,31 +356,31 @@ const Jt = ["id"], Kt = ["id"], Qt = ["xmlns", "viewBox"], el = ["x", "y", "widt
         config: t
       };
     });
-    function Be(l = null) {
-      Xt(() => {
-        const s = X.value.head.map((u, d) => [[
+    function ye(l = null) {
+      Ft(() => {
+        const s = T.value.head.map((u, d) => [[
           u.name
-        ], [X.value.body[d].start], [X.value.body[d].end]]), t = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [[e.value.table.columnNames.series], [e.value.table.columnNames.start], [e.value.table.columnNames.end]]].concat(s), a = Pt(t);
-        l ? l(a) : Dt({ csvContent: a, title: e.value.style.chart.title.text || "vue-ui-dumbbell" });
+        ], [T.value.body[d].start], [T.value.body[d].end]]), t = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [[e.value.table.columnNames.series], [e.value.table.columnNames.start], [e.value.table.columnNames.end]]].concat(s), a = Vt(t);
+        l ? l(a) : Ut({ csvContent: a, title: e.value.style.chart.title.text || "vue-ui-dumbbell" });
       });
     }
     const V = h(!1);
-    function Ve(l) {
-      V.value = l, pe.value += 1;
+    function qe(l) {
+      V.value = l, Ce.value += 1;
     }
-    function pt() {
-      return G.value;
+    function $t() {
+      return E.value;
     }
-    function Ue() {
-      D.value.showTable = !D.value.showTable;
+    function je() {
+      X.value.showTable = !X.value.showTable;
     }
-    const Q = h(!1);
-    function de() {
-      Q.value = !Q.value;
+    const te = h(!1);
+    function be() {
+      te.value = !te.value;
     }
-    async function xt({ scale: l = 2 } = {}) {
-      if (!I.value) return;
-      const { width: s, height: t } = I.value.getBoundingClientRect(), a = s / t, { imageUri: u, base64: d } = await qt({ domElement: I.value, base64: !0, img: !0, scale: l });
+    async function Lt({ scale: l = 2 } = {}) {
+      if (!S.value) return;
+      const { width: s, height: t } = S.value.getBoundingClientRect(), a = s / t, { imageUri: u, base64: d } = await Qt({ domElement: S.value, base64: !0, img: !0, scale: l });
       return {
         imageUri: u,
         base64: d,
@@ -390,30 +390,30 @@ const Jt = ["id"], Kt = ["id"], Qt = ["xmlns", "viewBox"], el = ["x", "y", "widt
         aspectRatio: a
       };
     }
-    const We = g(() => $.value.ticks), _t = g(() => ({ start: 0, end: We.value.length }));
-    Wt({
-      timeLabelsEls: J,
-      timeLabels: We,
-      slicer: _t,
+    const Ye = g(() => $.value.ticks), At = g(() => ({ start: 0, end: Ye.value.length }));
+    Kt({
+      timeLabelsEls: Q,
+      timeLabels: Ye,
+      slicer: At,
       configRef: e,
       rotationPath: ["style", "chart", "labels", "xAxisLabels", "rotation"],
       autoRotatePath: ["style", "chart", "labels", "xAxisLabels", "autoRotate", "enable"],
       isAutoSize: !1,
       width: R,
-      height: E,
+      height: B,
       targetClass: ".vue-ui-dumbbell-scale-label",
       rotation: e.value.style.chart.labels.xAxisLabels.autoRotate.angle
     });
-    function kt({
+    function Nt({
       rowHeight: l,
       fontSize: s,
       showProgression: t
     }) {
       if (!t) return !1;
-      const a = l / 3, u = l / 1.3, d = Math.abs(u - a), f = s * 1.2;
-      return d < f;
+      const a = l / 3, u = l / 1.3, d = Math.abs(u - a), y = s * 1.2;
+      return d < y;
     }
-    const Ct = /* @__PURE__ */ (() => {
+    const St = /* @__PURE__ */ (() => {
       let l = null, s = 0;
       const t = 1;
       return (a) => {
@@ -423,36 +423,36 @@ const Jt = ["id"], Kt = ["id"], Qt = ["xmlns", "viewBox"], el = ["x", "y", "widt
         }
         l === null || l !== a ? (l = a, s = 1) : (s += 1, s >= t && (F.value = a, l = null, s = 0));
       };
-    })(), qe = me(() => {
+    })(), Ze = ke(() => {
       requestAnimationFrame(() => {
         requestAnimationFrame(() => {
-          const l = kt({
+          const l = Nt({
             rowHeight: o.value.rowHeight,
             fontSize: e.value.style.chart.labels.yAxisLabels.fontSize,
             showProgression: e.value.style.chart.labels.yAxisLabels.showProgression
           });
-          Ct(l);
+          St(l);
         });
       });
     }, 100);
-    function he({ datapoint: l, seriesIndex: s }) {
+    function ge({ datapoint: l, seriesIndex: s }) {
       O.value = s, r.value = l, e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: l, seriesIndex: s });
     }
-    function ye({ datapoint: l, seriesIndex: s }) {
+    function me({ datapoint: l, seriesIndex: s }) {
       O.value = null, r.value = null, e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: l, seriesIndex: s });
     }
-    function fe({ datapoint: l, seriesIndex: s }) {
+    function pe({ datapoint: l, seriesIndex: s }) {
       e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: l, seriesIndex: s });
     }
-    const be = g(() => {
+    const xe = g(() => {
       if (r.value === null) return 0;
       const l = ![null, void 0].includes(r.value.start), s = ![null, void 0].includes(r.value.end);
       return l && s ? Math.min(r.value.startX, r.value.endX) + Math.abs(r.value.startX - r.value.endX) / 2 : l && !s ? r.value.startX : s && !l ? r.value.endX : null;
-    }), wt = g(() => {
+    }), Mt = g(() => {
       if (r.value === null) return "";
       const l = ![null, void 0].includes(r.value.start), s = ![null, void 0].includes(r.value.end);
       let t = "", a = "";
-      return l && (t = H(
+      return l && (t = P(
         e.value.style.chart.labels.formatter,
         r.value.start,
         w({
@@ -462,7 +462,7 @@ const Jt = ["id"], Kt = ["id"], Qt = ["xmlns", "viewBox"], el = ["x", "y", "widt
           r: e.value.style.chart.labels.startLabels.rounding
         }),
         { datapoint: r.value, seriesIndex: O.value }
-      )), s && (a = H(
+      )), s && (a = P(
         e.value.style.chart.labels.formatter,
         r.value.end,
         w({
@@ -473,48 +473,79 @@ const Jt = ["id"], Kt = ["id"], Qt = ["xmlns", "viewBox"], el = ["x", "y", "widt
         }),
         { datapoint: r.value, seriesIndex: O.value }
       )), l && s ? `${t} → ${a}` : l && !s ? t : s && !l ? a : "";
+    }), q = g(() => {
+      const l = e.value.table.useDialog && !e.value.table.show, s = X.value.showTable;
+      return {
+        component: l ? mt : ht,
+        title: `${e.value.style.chart.title.text}${e.value.style.chart.title.subtitle.text ? `: ${e.value.style.chart.title.subtitle.text}` : ""}`,
+        props: l ? {
+          backgroundColor: e.value.table.th.backgroundColor,
+          color: e.value.table.th.color,
+          headerColor: e.value.table.th.color,
+          headerBg: e.value.table.th.backgroundColor,
+          isFullscreen: V.value,
+          fullscreenParent: S.value,
+          forcedWidth: Math.min(800, window.innerWidth * 0.8)
+        } : {
+          hideDetails: !0,
+          config: {
+            open: s,
+            maxHeight: 1e4,
+            body: {
+              backgroundColor: e.value.style.chart.backgroundColor,
+              color: e.value.style.chart.color
+            },
+            head: {
+              backgroundColor: e.value.style.chart.backgroundColor,
+              color: e.value.style.chart.color
+            }
+          }
+        }
+      };
     });
-    return rt({
-      getData: pt,
-      getImage: xt,
-      generatePdf: Oe,
-      generateCsv: Be,
-      generateImage: Fe,
-      toggleTable: Ue,
-      toggleAnnotator: de,
-      toggleFullscreen: Ve
+    return le(() => X.value.showTable, (l) => {
+      e.value.table.show || (l && e.value.table.useDialog && U.value ? U.value.open() : "close" in U.value && U.value.close());
+    }), vt({
+      getData: $t,
+      getImage: Lt,
+      generatePdf: Pe,
+      generateCsv: ye,
+      generateImage: Ge,
+      toggleTable: je,
+      toggleAnnotator: be,
+      toggleFullscreen: qe
     }), (l, s) => (n(), v("div", {
       ref_key: "dumbbellChart",
-      ref: I,
-      class: Ke(`vue-ui-dumbbell ${V.value ? "vue-data-ui-wrapper-fullscreen" : ""}`),
-      style: ee(`font-family:${e.value.style.fontFamily};width:100%; text-align:center;background:${e.value.style.chart.backgroundColor};${e.value.responsive ? "height:100%" : ""}`),
-      id: `dumbbell_${y.value}`,
-      onMouseenter: s[1] || (s[1] = () => i(Ne)(!0)),
-      onMouseleave: s[2] || (s[2] = () => i(Ne)(!1))
+      ref: S,
+      class: tt(`vue-ui-dumbbell ${V.value ? "vue-data-ui-wrapper-fullscreen" : ""}`),
+      style: ae(`font-family:${e.value.style.fontFamily};width:100%; text-align:center;background:${e.value.style.chart.backgroundColor};${e.value.responsive ? "height:100%" : ""}`),
+      id: `dumbbell_${f.value}`,
+      onMouseenter: s[3] || (s[3] = () => i(ze)(!0)),
+      onMouseleave: s[4] || (s[4] = () => i(ze)(!1))
     }, [
-      e.value.userOptions.buttons.annotator ? (n(), T(i(ct), {
+      e.value.userOptions.buttons.annotator ? (n(), I(i(yt), {
         key: 0,
-        svgRef: i(Me),
+        svgRef: i(De),
         backgroundColor: e.value.style.chart.backgroundColor,
         color: e.value.style.chart.color,
-        active: Q.value,
-        onClose: de
+        active: te.value,
+        onClose: be
       }, null, 8, ["svgRef", "backgroundColor", "color", "active"])) : b("", !0),
-      ft.value ? (n(), v("div", {
+      _t.value ? (n(), v("div", {
         key: 1,
         ref_key: "noTitle",
-        ref: Ce,
+        ref: Ae,
         class: "vue-data-ui-no-title-space",
         style: "height:36px; width: 100%;background:transparent"
       }, null, 512)) : b("", !0),
       e.value.style.chart.title.text ? (n(), v("div", {
         key: 2,
         ref_key: "chartTitle",
-        ref: xe,
+        ref: we,
         style: "width:100%;background:transparent;padding-bottom:24px"
       }, [
-        (n(), T(jt, {
-          key: `title_${we.value}`,
+        (n(), I(el, {
+          key: `title_${Ne.value}`,
           config: {
             title: {
               cy: "donut-div-title",
@@ -528,16 +559,16 @@ const Jt = ["id"], Kt = ["id"], Qt = ["xmlns", "viewBox"], el = ["x", "y", "widt
         }, null, 8, ["config"]))
       ], 512)) : b("", !0),
       c("div", {
-        id: `legend-top-${y.value}`
-      }, null, 8, Kt),
-      e.value.userOptions.show && Z.value && (i(Se) || i(ue)) ? (n(), T(i(vt), {
+        id: `legend-top-${f.value}`
+      }, null, 8, sl),
+      e.value.userOptions.show && K.value && (i(Te) || i(ve)) ? (n(), I(i(bt), {
         ref: "details",
-        key: `user_option_${pe.value}`,
+        key: `user_option_${Ce.value}`,
         backgroundColor: e.value.style.chart.backgroundColor,
         color: e.value.style.chart.color,
-        isPrinting: i(Te),
-        isImaging: i(Ie),
-        uid: y.value,
+        isPrinting: i(Fe),
+        isImaging: i(He),
+        uid: f.value,
         hasPdf: e.value.userOptions.buttons.pdf,
         hasXls: e.value.userOptions.buttons.csv,
         hasImg: e.value.userOptions.buttons.img,
@@ -545,81 +576,81 @@ const Jt = ["id"], Kt = ["id"], Qt = ["xmlns", "viewBox"], el = ["x", "y", "widt
         hasFullscreen: e.value.userOptions.buttons.fullscreen,
         isFullscreen: V.value,
         titles: { ...e.value.userOptions.buttonTitles },
-        chartElement: I.value,
+        chartElement: S.value,
         position: e.value.userOptions.position,
         hasAnnotator: e.value.userOptions.buttons.annotator,
-        isAnnotation: Q.value,
+        isAnnotation: te.value,
         callbacks: e.value.userOptions.callbacks,
         printScale: e.value.userOptions.print.scale,
-        onToggleFullscreen: Ve,
-        onGeneratePdf: i(Oe),
-        onGenerateCsv: Be,
-        onGenerateImage: i(Fe),
-        onToggleTable: Ue,
-        onToggleAnnotator: de,
-        style: ee({
-          visibility: i(Se) ? i(ue) ? "visible" : "hidden" : "visible"
+        onToggleFullscreen: qe,
+        onGeneratePdf: i(Pe),
+        onGenerateCsv: ye,
+        onGenerateImage: i(Ge),
+        onToggleTable: je,
+        onToggleAnnotator: be,
+        style: ae({
+          visibility: i(Te) ? i(ve) ? "visible" : "hidden" : "visible"
         })
-      }, Nt({ _: 2 }, [
+      }, lt({ _: 2 }, [
         l.$slots.menuIcon ? {
           name: "menuIcon",
-          fn: x(({ isOpen: t, color: a }) => [
-            p(l.$slots, "menuIcon", te(le({ isOpen: t, color: a })), void 0, !0)
+          fn: p(({ isOpen: t, color: a }) => [
+            x(l.$slots, "menuIcon", se(oe({ isOpen: t, color: a })), void 0, !0)
           ]),
           key: "0"
         } : void 0,
         l.$slots.optionPdf ? {
           name: "optionPdf",
-          fn: x(() => [
-            p(l.$slots, "optionPdf", {}, void 0, !0)
+          fn: p(() => [
+            x(l.$slots, "optionPdf", {}, void 0, !0)
           ]),
           key: "1"
         } : void 0,
         l.$slots.optionCsv ? {
           name: "optionCsv",
-          fn: x(() => [
-            p(l.$slots, "optionCsv", {}, void 0, !0)
+          fn: p(() => [
+            x(l.$slots, "optionCsv", {}, void 0, !0)
           ]),
           key: "2"
         } : void 0,
         l.$slots.optionImg ? {
           name: "optionImg",
-          fn: x(() => [
-            p(l.$slots, "optionImg", {}, void 0, !0)
+          fn: p(() => [
+            x(l.$slots, "optionImg", {}, void 0, !0)
           ]),
           key: "3"
         } : void 0,
         l.$slots.optionTable ? {
           name: "optionTable",
-          fn: x(() => [
-            p(l.$slots, "optionTable", {}, void 0, !0)
+          fn: p(() => [
+            x(l.$slots, "optionTable", {}, void 0, !0)
           ]),
           key: "4"
         } : void 0,
         l.$slots.optionFullscreen ? {
           name: "optionFullscreen",
-          fn: x(({ toggleFullscreen: t, isFullscreen: a }) => [
-            p(l.$slots, "optionFullscreen", te(le({ toggleFullscreen: t, isFullscreen: a })), void 0, !0)
+          fn: p(({ toggleFullscreen: t, isFullscreen: a }) => [
+            x(l.$slots, "optionFullscreen", se(oe({ toggleFullscreen: t, isFullscreen: a })), void 0, !0)
           ]),
           key: "5"
         } : void 0,
         l.$slots.optionAnnotator ? {
           name: "optionAnnotator",
-          fn: x(({ toggleAnnotator: t, isAnnotator: a }) => [
-            p(l.$slots, "optionAnnotator", te(le({ toggleAnnotator: t, isAnnotator: a })), void 0, !0)
+          fn: p(({ toggleAnnotator: t, isAnnotator: a }) => [
+            x(l.$slots, "optionAnnotator", se(oe({ toggleAnnotator: t, isAnnotator: a })), void 0, !0)
           ]),
           key: "6"
         } : void 0
       ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasPdf", "hasXls", "hasImg", "hasTable", "hasFullscreen", "isFullscreen", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "onGeneratePdf", "onGenerateImage", "style"])) : b("", !0),
       (n(), v("svg", {
         ref_key: "svgRef",
-        ref: Me,
-        xmlns: i(at),
-        class: Ke({ "vue-data-ui-fullscreen--on": V.value, "vue-data-ui-fulscreen--off": !V.value }),
+        ref: De,
+        xmlns: i(rt),
+        class: tt({ "vue-data-ui-fullscreen--on": V.value, "vue-data-ui-fulscreen--off": !V.value }),
         viewBox: `0 0 ${R.value} ${o.value.absoluteHeight <= 0 ? 10 : o.value.absoluteHeight}`,
-        style: ee(`max-width:100%; overflow: visible; background:transparent;color:${e.value.style.chart.color}`)
+        style: ae(`max-width:100%; overflow: visible; background:transparent;color:${e.value.style.chart.color}`)
       }, [
-        St(i(dt)),
+        at(i(gt)),
         l.$slots["chart-background"] ? (n(), v("foreignObject", {
           key: 0,
           x: o.value.left,
@@ -630,9 +661,9 @@ const Jt = ["id"], Kt = ["id"], Qt = ["xmlns", "viewBox"], el = ["x", "y", "widt
             pointerEvents: "none"
           }
         }, [
-          p(l.$slots, "chart-background", {}, void 0, !0)
-        ], 8, el)) : b("", !0),
-        e.value.style.chart.grid.verticalGrid.show ? (n(), v("g", tl, [
+          x(l.$slots, "chart-background", {}, void 0, !0)
+        ], 8, nl)) : b("", !0),
+        e.value.style.chart.grid.verticalGrid.show ? (n(), v("g", rl, [
           (n(!0), v(C, null, A($.value.ticks, (t, a) => (n(), v("line", {
             x1: o.value.left + a * o.value.width / ($.value.ticks.length - 1),
             x2: o.value.left + a * o.value.width / ($.value.ticks.length - 1),
@@ -641,10 +672,10 @@ const Jt = ["id"], Kt = ["id"], Qt = ["xmlns", "viewBox"], el = ["x", "y", "widt
             stroke: e.value.style.chart.grid.verticalGrid.stroke,
             "stroke-width": e.value.style.chart.grid.verticalGrid.strokeWidth,
             "stroke-dasharray": e.value.style.chart.grid.verticalGrid.strokeDasharray
-          }, null, 8, ll))), 256))
+          }, null, 8, ul))), 256))
         ])) : b("", !0),
-        e.value.style.chart.grid.horizontalGrid.show ? (n(), v("g", al, [
-          (n(!0), v(C, null, A(G.value, (t, a) => (n(), v("line", {
+        e.value.style.chart.grid.horizontalGrid.show ? (n(), v("g", il, [
+          (n(!0), v(C, null, A(E.value, (t, a) => (n(), v("line", {
             x1: o.value.left,
             x2: o.value.right,
             y1: o.value.top + a * o.value.rowHeight,
@@ -652,7 +683,7 @@ const Jt = ["id"], Kt = ["id"], Qt = ["xmlns", "viewBox"], el = ["x", "y", "widt
             stroke: e.value.style.chart.grid.horizontalGrid.stroke,
             "stroke-width": e.value.style.chart.grid.horizontalGrid.strokeWidth,
             "stroke-dasharray": e.value.style.chart.grid.horizontalGrid.strokeDasharray
-          }, null, 8, sl))), 256)),
+          }, null, 8, cl))), 256)),
           c("line", {
             x1: o.value.left,
             x2: o.value.right,
@@ -661,21 +692,21 @@ const Jt = ["id"], Kt = ["id"], Qt = ["xmlns", "viewBox"], el = ["x", "y", "widt
             stroke: e.value.style.chart.grid.horizontalGrid.stroke,
             "stroke-width": e.value.style.chart.grid.horizontalGrid.strokeWidth,
             "stroke-dasharray": e.value.style.chart.grid.horizontalGrid.strokeDasharray
-          }, null, 8, ol)
+          }, null, 8, vl)
         ])) : b("", !0),
         e.value.style.chart.labels.axis.yLabel ? (n(), v("text", {
           key: 3,
           ref_key: "yAxisLabel",
-          ref: ae,
+          ref: ne,
           transform: `translate(${e.value.style.chart.labels.axis.fontSize}, ${o.value.absoluteHeight / 2}), rotate(-90)`,
           "font-size": e.value.style.chart.labels.axis.fontSize,
           fill: e.value.style.chart.labels.axis.color,
           "text-anchor": "middle"
-        }, _(e.value.style.chart.labels.axis.yLabel), 9, nl)) : b("", !0),
+        }, _(e.value.style.chart.labels.axis.yLabel), 9, dl)) : b("", !0),
         e.value.style.chart.labels.yAxisLabels.show ? (n(), v("g", {
           key: 4,
           ref_key: "serieLabels",
-          ref: se
+          ref: re
         }, [
           (n(!0), v(C, null, A(k.value, (t, a) => (n(), v("text", {
             class: "vue-ui-dumbbell-serie-name",
@@ -686,10 +717,10 @@ const Jt = ["id"], Kt = ["id"], Qt = ["xmlns", "viewBox"], el = ["x", "y", "widt
             fill: e.value.style.chart.labels.yAxisLabels.color,
             "font-weight": e.value.style.chart.labels.yAxisLabels.bold ? "bold" : "normal",
             "text-anchor": "end",
-            onMouseenter: (u) => he({ datapoint: t, seriesIndex: a }),
-            onMouseleave: (u) => ye({ datapoint: t, seriesIndex: a }),
-            onClick: (u) => fe({ datapoint: t, seriesIndex: a })
-          }, _(t.name) + " " + _(F.value && e.value.style.chart.labels.yAxisLabels.showProgression ? [null, void 0].includes(t.start) || [null, void 0].includes(t.end) ? "" : `(${i(H)(
+            onMouseenter: (u) => ge({ datapoint: t, seriesIndex: a }),
+            onMouseleave: (u) => me({ datapoint: t, seriesIndex: a }),
+            onClick: (u) => pe({ datapoint: t, seriesIndex: a })
+          }, _(t.name) + " " + _(F.value && e.value.style.chart.labels.yAxisLabels.showProgression ? [null, void 0].includes(t.start) || [null, void 0].includes(t.end) ? "" : `(${i(P)(
             e.value.style.chart.labels.yAxisLabels.formatter,
             100 * (t.end / t.start - 1),
             i(w)({
@@ -698,7 +729,7 @@ const Jt = ["id"], Kt = ["id"], Qt = ["xmlns", "viewBox"], el = ["x", "y", "widt
               r: e.value.style.chart.labels.yAxisLabels.rounding
             }),
             { datapoint: t }
-          )})` : ""), 41, rl))), 128)),
+          )})` : ""), 41, hl))), 128)),
           e.value.style.chart.labels.yAxisLabels.showProgression && !F.value ? (n(!0), v(C, { key: 0 }, A(k.value, (t, a) => (n(), v("text", {
             class: "vue-ui-dumbbell-serie-value",
             x: o.value.left - 6 + e.value.style.chart.labels.yAxisLabels.offsetX,
@@ -706,10 +737,10 @@ const Jt = ["id"], Kt = ["id"], Qt = ["xmlns", "viewBox"], el = ["x", "y", "widt
             "font-size": e.value.style.chart.labels.yAxisLabels.fontSize,
             fill: e.value.style.chart.labels.yAxisLabels.color,
             "text-anchor": "end",
-            onMouseenter: (u) => he({ datapoint: t, seriesIndex: a }),
-            onMouseleave: (u) => ye({ datapoint: t, seriesIndex: a }),
-            onClick: (u) => fe({ datapoint: t, seriesIndex: a })
-          }, _([null, void 0].includes(t.start) || [null, void 0].includes(t.end) ? "" : i(H)(
+            onMouseenter: (u) => ge({ datapoint: t, seriesIndex: a }),
+            onMouseleave: (u) => me({ datapoint: t, seriesIndex: a }),
+            onClick: (u) => pe({ datapoint: t, seriesIndex: a })
+          }, _([null, void 0].includes(t.start) || [null, void 0].includes(t.end) ? "" : i(P)(
             e.value.style.chart.labels.yAxisLabels.formatter,
             100 * (t.end / t.start - 1),
             i(w)({
@@ -718,22 +749,22 @@ const Jt = ["id"], Kt = ["id"], Qt = ["xmlns", "viewBox"], el = ["x", "y", "widt
               r: e.value.style.chart.labels.yAxisLabels.rounding
             }),
             { datapoint: t }
-          )), 41, ul))), 256)) : b("", !0)
+          )), 41, fl))), 256)) : b("", !0)
         ], 512)) : b("", !0),
         e.value.style.chart.labels.axis.xLabel ? (n(), v("text", {
           key: 5,
           ref_key: "xAxisLabel",
-          ref: oe,
+          ref: ue,
           x: o.value.left + o.value.width / 2,
           y: o.value.absoluteHeight - e.value.style.chart.labels.axis.fontSize / 3,
           "font-size": e.value.style.chart.labels.axis.fontSize,
           fill: e.value.style.chart.labels.axis.color,
           "text-anchor": "middle"
-        }, _(e.value.style.chart.labels.axis.xLabel), 9, il)) : b("", !0),
+        }, _(e.value.style.chart.labels.axis.xLabel), 9, yl)) : b("", !0),
         e.value.style.chart.labels.xAxisLabels.show ? (n(), v("g", {
           key: 6,
           ref_key: "scaleLabels",
-          ref: J
+          ref: Q
         }, [
           (n(!0), v(C, null, A($.value.ticks, (t, a) => (n(), v("text", {
             class: "vue-ui-dumbbell-scale-label",
@@ -743,7 +774,7 @@ const Jt = ["id"], Kt = ["id"], Qt = ["xmlns", "viewBox"], el = ["x", "y", "widt
             fill: e.value.style.chart.labels.xAxisLabels.color,
             "font-weight": e.value.style.chart.labels.xAxisLabels.bold ? "bold" : "normal",
             "text-anchor": e.value.style.chart.labels.xAxisLabels.rotation > 0 ? "start" : e.value.style.chart.labels.xAxisLabels.rotation < 0 ? "end" : "middle"
-          }, _(i(H)(
+          }, _(i(P)(
             e.value.style.chart.labels.formatter,
             t,
             i(w)({
@@ -753,142 +784,142 @@ const Jt = ["id"], Kt = ["id"], Qt = ["xmlns", "viewBox"], el = ["x", "y", "widt
               r: e.value.style.chart.labels.xAxisLabels.rounding
             }),
             { datapoint: t, seriesIndex: a }
-          )), 9, cl))), 128))
+          )), 9, bl))), 128))
         ], 512)) : b("", !0),
-        W(c("g", null, [
-          W(c("path", {
+        j(c("g", null, [
+          j(c("path", {
             d: `M ${r.value ? r.value.startX : o.value.left},${o.value.top} ${r.value ? r.value.startX : o.value.left},${o.value.bottom}`,
             stroke: r.value ? e.value.style.chart.plots.evaluationColors.enable ? r.value.evaluationColor : e.value.style.chart.plots.startColor : "transparent",
             "stroke-width": e.value.style.chart.comparisonLines.strokeWidth,
             "stroke-dasharray": e.value.style.chart.comparisonLines.strokeDasharray,
             style: { transition: "all 0.3s ease-in-out" }
-          }, null, 8, vl), [
-            [q, r.value !== null && ![null, void 0].includes(r.value.start)]
+          }, null, 8, gl), [
+            [Y, r.value !== null && ![null, void 0].includes(r.value.start)]
           ]),
-          W(c("path", {
+          j(c("path", {
             d: `M ${r.value ? r.value.endX : o.value.left},${o.value.top} ${r.value ? r.value.endX : o.value.left},${o.value.bottom}`,
             stroke: r.value ? e.value.style.chart.plots.evaluationColors.enable ? r.value.evaluationColor : e.value.style.chart.plots.endColor : "transparent",
             "stroke-width": e.value.style.chart.comparisonLines.strokeWidth,
             "stroke-dasharray": e.value.style.chart.comparisonLines.strokeDasharray,
             style: { transition: "all 0.3s ease-in-out" }
-          }, null, 8, dl), [
-            [q, r.value !== null && ![null, void 0].includes(r.value.end)]
+          }, null, 8, ml), [
+            [Y, r.value !== null && ![null, void 0].includes(r.value.end)]
           ]),
-          W(c("rect", {
+          j(c("rect", {
             x: r.value ? Math.min(r.value.startX, r.value.endX) : o.value.left,
             y: o.value.top,
             height: Math.max(0.1, o.value.height),
             width: r.value ? Math.max(0.1, Math.abs(r.value.endX - r.value.startX)) : 0,
-            fill: r.value ? i(st)(e.value.style.chart.comparisonLines.rectColor, e.value.style.chart.comparisonLines.rectOpacity) : "transparent",
+            fill: r.value ? i(ut)(e.value.style.chart.comparisonLines.rectColor, e.value.style.chart.comparisonLines.rectOpacity) : "transparent",
             style: { transition: "all 0.3s ease-in-out" }
-          }, null, 8, hl), [
-            [q, e.value.style.chart.comparisonLines.showRect && r.value !== null && ![null, void 0].includes(r.value.start) && ![null, void 0].includes(r.value.end)]
+          }, null, 8, pl), [
+            [Y, e.value.style.chart.comparisonLines.showRect && r.value !== null && ![null, void 0].includes(r.value.start) && ![null, void 0].includes(r.value.end)]
           ]),
-          W(c("text", {
-            transform: `translate(${be.value == null ? 0 : be.value}, ${o.value.top - 6})`,
+          j(c("text", {
+            transform: `translate(${xe.value == null ? 0 : xe.value}, ${o.value.top - 6})`,
             fill: e.value.style.chart.comparisonLines.labelColor,
             "font-size": e.value.style.chart.comparisonLines.labelFontSize,
             "text-anchor": "middle",
             style: { transition: "all 0.3s ease-in-out" }
-          }, _(wt.value), 9, yl), [
-            [q, r.value !== null && be.value !== null && e.value.style.chart.comparisonLines.showLabel]
+          }, _(Mt.value), 9, xl), [
+            [Y, r.value !== null && xe.value !== null && e.value.style.chart.comparisonLines.showLabel]
           ])
         ], 512), [
-          [q, e.value.style.chart.comparisonLines.show && O.value !== null]
+          [Y, e.value.style.chart.comparisonLines.show && O.value !== null]
         ]),
         c("defs", null, [
           c("radialGradient", {
-            id: `start_grad_${y.value}`,
+            id: `start_grad_${f.value}`,
             fy: "30%"
           }, [
             c("stop", {
               offset: "10%",
-              "stop-color": i(j)(e.value.style.chart.plots.startColor, e.value.style.chart.plots.gradient.intensity / 100)
-            }, null, 8, bl),
+              "stop-color": i(Z)(e.value.style.chart.plots.startColor, e.value.style.chart.plots.gradient.intensity / 100)
+            }, null, 8, kl),
             c("stop", {
               offset: "90%",
-              "stop-color": i(Y)(e.value.style.chart.plots.startColor, 0.1)
-            }, null, 8, gl),
+              "stop-color": i(J)(e.value.style.chart.plots.startColor, 0.1)
+            }, null, 8, Cl),
             c("stop", {
               offset: "100%",
               "stop-color": e.value.style.chart.plots.startColor
-            }, null, 8, ml)
-          ], 8, fl),
+            }, null, 8, wl)
+          ], 8, _l),
           c("radialGradient", {
-            id: `end_grad_${y.value}`,
+            id: `end_grad_${f.value}`,
             fy: "30%"
           }, [
             c("stop", {
               offset: "10%",
-              "stop-color": i(j)(e.value.style.chart.plots.endColor, e.value.style.chart.plots.gradient.intensity / 100)
-            }, null, 8, xl),
+              "stop-color": i(Z)(e.value.style.chart.plots.endColor, e.value.style.chart.plots.gradient.intensity / 100)
+            }, null, 8, Ll),
             c("stop", {
               offset: "90%",
-              "stop-color": i(Y)(e.value.style.chart.plots.endColor, 0.1)
-            }, null, 8, _l),
+              "stop-color": i(J)(e.value.style.chart.plots.endColor, 0.1)
+            }, null, 8, Al),
             c("stop", {
               offset: "100%",
               "stop-color": e.value.style.chart.plots.endColor
-            }, null, 8, kl)
-          ], 8, pl),
+            }, null, 8, Nl)
+          ], 8, $l),
           c("radialGradient", {
-            id: `positive_grad_${y.value}`,
+            id: `positive_grad_${f.value}`,
             fy: "30%"
           }, [
             c("stop", {
               offset: "10%",
-              "stop-color": i(j)(e.value.style.chart.plots.evaluationColors.positive, e.value.style.chart.plots.gradient.intensity / 100)
-            }, null, 8, wl),
+              "stop-color": i(Z)(e.value.style.chart.plots.evaluationColors.positive, e.value.style.chart.plots.gradient.intensity / 100)
+            }, null, 8, Ml),
             c("stop", {
               offset: "90%",
-              "stop-color": i(Y)(e.value.style.chart.plots.evaluationColors.positive, 0.1)
-            }, null, 8, $l),
+              "stop-color": i(J)(e.value.style.chart.plots.evaluationColors.positive, 0.1)
+            }, null, 8, Xl),
             c("stop", {
               offset: "100%",
               "stop-color": e.value.style.chart.plots.evaluationColors.positive
-            }, null, 8, Ll)
-          ], 8, Cl),
+            }, null, 8, zl)
+          ], 8, Sl),
           c("radialGradient", {
-            id: `negative_grad_${y.value}`,
+            id: `negative_grad_${f.value}`,
             fy: "30%"
           }, [
             c("stop", {
               offset: "10%",
-              "stop-color": i(j)(e.value.style.chart.plots.evaluationColors.negative, e.value.style.chart.plots.gradient.intensity / 100)
-            }, null, 8, Nl),
+              "stop-color": i(Z)(e.value.style.chart.plots.evaluationColors.negative, e.value.style.chart.plots.gradient.intensity / 100)
+            }, null, 8, Dl),
             c("stop", {
               offset: "90%",
-              "stop-color": i(Y)(e.value.style.chart.plots.evaluationColors.negative, 0.1)
-            }, null, 8, Sl),
+              "stop-color": i(J)(e.value.style.chart.plots.evaluationColors.negative, 0.1)
+            }, null, 8, Il),
             c("stop", {
               offset: "100%",
               "stop-color": e.value.style.chart.plots.evaluationColors.negative
-            }, null, 8, Ml)
-          ], 8, Al),
+            }, null, 8, Ol)
+          ], 8, Tl),
           c("radialGradient", {
-            id: `neutral_grad_${y.value}`,
+            id: `neutral_grad_${f.value}`,
             fy: "30%"
           }, [
             c("stop", {
               offset: "10%",
-              "stop-color": i(j)(e.value.style.chart.plots.evaluationColors.neutral, e.value.style.chart.plots.gradient.intensity / 100)
-            }, null, 8, zl),
+              "stop-color": i(Z)(e.value.style.chart.plots.evaluationColors.neutral, e.value.style.chart.plots.gradient.intensity / 100)
+            }, null, 8, Hl),
             c("stop", {
               offset: "90%",
-              "stop-color": i(Y)(e.value.style.chart.plots.evaluationColors.neutral, 0.1)
-            }, null, 8, Tl),
+              "stop-color": i(J)(e.value.style.chart.plots.evaluationColors.neutral, 0.1)
+            }, null, 8, Pl),
             c("stop", {
               offset: "100%",
               "stop-color": e.value.style.chart.plots.evaluationColors.neutral
-            }, null, 8, Il)
-          ], 8, Xl)
+            }, null, 8, Gl)
+          ], 8, Fl)
         ]),
         (n(!0), v(C, null, A(k.value, (t, a) => (n(), v("g", {
           key: `plot_${a}_${t.id}`
         }, [
           c("defs", null, [
             c("linearGradient", {
-              id: `grad_pos_${y.value}`,
+              id: `grad_pos_${f.value}`,
               x1: "0%",
               x2: "100%",
               y1: "0%",
@@ -897,14 +928,14 @@ const Jt = ["id"], Kt = ["id"], Qt = ["xmlns", "viewBox"], el = ["x", "y", "widt
               c("stop", {
                 offset: "0%",
                 "stop-color": e.value.style.chart.plots.startColor
-              }, null, 8, Fl),
+              }, null, 8, Bl),
               c("stop", {
                 offset: "100%",
                 "stop-color": e.value.style.chart.plots.endColor
-              }, null, 8, Hl)
-            ], 8, Ol),
+              }, null, 8, Rl)
+            ], 8, El),
             c("linearGradient", {
-              id: `grad_neg_${y.value}`,
+              id: `grad_neg_${f.value}`,
               x1: "0%",
               x2: "100%",
               y1: "0%",
@@ -913,68 +944,68 @@ const Jt = ["id"], Kt = ["id"], Qt = ["xmlns", "viewBox"], el = ["x", "y", "widt
               c("stop", {
                 offset: "0%",
                 "stop-color": e.value.style.chart.plots.endColor
-              }, null, 8, Dl),
+              }, null, 8, Ul),
               c("stop", {
                 offset: "100%",
                 "stop-color": e.value.style.chart.plots.startColor
-              }, null, 8, Gl)
-            ], 8, Pl)
+              }, null, 8, Wl)
+            ], 8, Vl)
           ]),
-          ![void 0, null].includes(t.end) && ![void 0, null].includes(t.start) ? (n(), v("g", El, [
-            e.value.style.chart.plots.link.type === "curved" ? (n(), v("g", Rl, [
+          ![void 0, null].includes(t.end) && ![void 0, null].includes(t.start) ? (n(), v("g", ql, [
+            e.value.style.chart.plots.link.type === "curved" ? (n(), v("g", jl, [
               c("path", {
                 d: `M 
-                                ${t.startX},${t.y + M.value / 2} 
+                                ${t.startX},${t.y + z.value / 2} 
                                 C ${t.centerX},${t.y} ${t.centerX},${t.y} 
-                                ${t.endX},${t.y + M.value / 2}
-                                L ${t.endX},${t.y - M.value / 2}
+                                ${t.endX},${t.y + z.value / 2}
+                                L ${t.endX},${t.y - z.value / 2}
                                 C ${t.centerX},${t.y} ${t.centerX},${t.y}
-                                ${t.startX},${t.y - M.value / 2}
+                                ${t.startX},${t.y - z.value / 2}
                                 Z
                             `,
-                fill: e.value.style.chart.plots.evaluationColors.enable ? t.evaluationColor : t.endX > t.startX ? `url(#grad_pos_${y.value})` : `url(#grad_neg_${y.value})`
-              }, null, 8, Bl)
-            ])) : (n(), v("g", Vl, [
+                fill: e.value.style.chart.plots.evaluationColors.enable ? t.evaluationColor : t.endX > t.startX ? `url(#grad_pos_${f.value})` : `url(#grad_neg_${f.value})`
+              }, null, 8, Yl)
+            ])) : (n(), v("g", Zl, [
               c("rect", {
                 x: t.endX > t.startX ? t.startX : t.endX,
                 y: t.y - e.value.style.chart.plots.link.strokeWidth / 2,
                 height: Math.max(0.01, e.value.style.chart.plots.link.strokeWidth),
                 width: Math.max(0.01, Math.abs(t.endX - t.startX)),
-                fill: e.value.style.chart.plots.evaluationColors.enable ? t.evaluationColor : t.endX > t.startX ? `url(#grad_pos_${y.value})` : `url(#grad_neg_${y.value})`
-              }, null, 8, Ul)
+                fill: e.value.style.chart.plots.evaluationColors.enable ? t.evaluationColor : t.endX > t.startX ? `url(#grad_pos_${f.value})` : `url(#grad_neg_${f.value})`
+              }, null, 8, Jl)
             ]))
           ])) : b("", !0),
           [null, void 0].includes(t.start) ? b("", !0) : (n(), v("circle", {
             key: 1,
             cx: t.startX,
             cy: t.y,
-            r: M.value,
-            fill: e.value.style.chart.plots.gradient.show ? e.value.style.chart.plots.evaluationColors.enable ? t.evaluationGrad : `url(#start_grad_${y.value})` : e.value.style.chart.plots.evaluationColors.enable ? t.evaluationColor : e.value.style.chart.plots.startColor,
+            r: z.value,
+            fill: e.value.style.chart.plots.gradient.show ? e.value.style.chart.plots.evaluationColors.enable ? t.evaluationGrad : `url(#start_grad_${f.value})` : e.value.style.chart.plots.evaluationColors.enable ? t.evaluationColor : e.value.style.chart.plots.startColor,
             stroke: e.value.style.chart.plots.stroke,
             "stroke-width": e.value.style.chart.plots.strokeWidth
-          }, null, 8, Wl)),
+          }, null, 8, Kl)),
           [null, void 0].includes(t.end) ? b("", !0) : (n(), v("circle", {
             key: 2,
             cx: t.endX,
             cy: t.y,
-            r: M.value,
-            fill: e.value.style.chart.plots.gradient.show ? e.value.style.chart.plots.evaluationColors.enable ? t.evaluationGrad : `url(#end_grad_${y.value})` : e.value.style.chart.plots.evaluationColors.enable ? t.evaluationColor : e.value.style.chart.plots.endColor,
+            r: z.value,
+            fill: e.value.style.chart.plots.gradient.show ? e.value.style.chart.plots.evaluationColors.enable ? t.evaluationGrad : `url(#end_grad_${f.value})` : e.value.style.chart.plots.evaluationColors.enable ? t.evaluationColor : e.value.style.chart.plots.endColor,
             stroke: e.value.style.chart.plots.stroke,
             "stroke-width": e.value.style.chart.plots.strokeWidth
-          }, null, 8, ql))
+          }, null, 8, Ql))
         ]))), 128)),
-        e.value.style.chart.labels.startLabels.show ? (n(), v("g", jl, [
+        e.value.style.chart.labels.startLabels.show ? (n(), v("g", ea, [
           (n(!0), v(C, null, A(k.value, (t, a) => (n(), v("g", {
             key: `start_label_${a}_${t.id}`
           }, [
             [null, void 0].includes(t.start) ? b("", !0) : (n(), v("text", {
               key: 0,
               x: t.startX,
-              y: t.y + M.value * 2 + e.value.style.chart.labels.startLabels.fontSize / 2,
+              y: t.y + z.value * 2 + e.value.style.chart.labels.startLabels.fontSize / 2,
               fill: e.value.style.chart.plots.evaluationColors.enable && e.value.style.chart.labels.startLabels.useEvaluationColor ? t.evaluationColor : e.value.style.chart.labels.startLabels.useStartColor ? e.value.style.chart.plots.startColor : e.value.style.chart.labels.startLabels.color,
               "font-size": e.value.style.chart.labels.startLabels.fontSize,
               "text-anchor": "middle"
-            }, _(i(H)(
+            }, _(i(P)(
               e.value.style.chart.labels.formatter,
               t.start,
               i(w)({
@@ -984,21 +1015,21 @@ const Jt = ["id"], Kt = ["id"], Qt = ["xmlns", "viewBox"], el = ["x", "y", "widt
                 r: e.value.style.chart.labels.startLabels.rounding
               }),
               { datapoint: t, seriesIndex: a }
-            )), 9, Yl))
+            )), 9, ta))
           ]))), 128))
         ])) : b("", !0),
-        e.value.style.chart.labels.endLabels.show ? (n(), v("g", Zl, [
+        e.value.style.chart.labels.endLabels.show ? (n(), v("g", la, [
           (n(!0), v(C, null, A(k.value, (t, a) => (n(), v("g", {
             key: `end_label_${a}_${t.id}`
           }, [
             [null, void 0].includes(t.end) ? b("", !0) : (n(), v("text", {
               key: 0,
               x: t.endX,
-              y: t.y - (M.value * 2 - e.value.style.chart.labels.startLabels.fontSize / 3),
+              y: t.y - (z.value * 2 - e.value.style.chart.labels.startLabels.fontSize / 3),
               fill: e.value.style.chart.plots.evaluationColors.enable && e.value.style.chart.labels.endLabels.useEvaluationColor ? t.evaluationColor : e.value.style.chart.labels.endLabels.useEndColor ? e.value.style.chart.plots.endColor : e.value.style.chart.labels.endLabels.color,
               "font-size": e.value.style.chart.labels.endLabels.fontSize,
               "text-anchor": "middle"
-            }, _(i(H)(
+            }, _(i(P)(
               e.value.style.chart.labels.formatter,
               t.end,
               i(w)({
@@ -1008,7 +1039,7 @@ const Jt = ["id"], Kt = ["id"], Qt = ["xmlns", "viewBox"], el = ["x", "y", "widt
                 r: e.value.style.chart.labels.endLabels.rounding
               }),
               { datapoint: t, seriesIndex: a }
-            )), 9, Jl))
+            )), 9, aa))
           ]))), 128))
         ])) : b("", !0),
         c("g", null, [
@@ -1017,40 +1048,40 @@ const Jt = ["id"], Kt = ["id"], Qt = ["xmlns", "viewBox"], el = ["x", "y", "widt
             y: o.value.top + a * Math.max(0.1, o.value.rowHeight),
             width: Math.max(0.1, o.value.width),
             height: Math.max(0.1, o.value.rowHeight),
-            fill: O.value !== null && O.value === a ? i(st)(e.value.style.chart.highlighter.color, e.value.style.chart.highlighter.opacity) : "transparent",
-            onMouseenter: (u) => he({ datapoint: t, seriesIndex: a }),
-            onMouseleave: (u) => ye({ datapoint: t, seriesIndex: a }),
-            onClick: (u) => fe({ datapoint: t, seriesIndex: a })
-          }, null, 40, Kl))), 256))
+            fill: O.value !== null && O.value === a ? i(ut)(e.value.style.chart.highlighter.color, e.value.style.chart.highlighter.opacity) : "transparent",
+            onMouseenter: (u) => ge({ datapoint: t, seriesIndex: a }),
+            onMouseleave: (u) => me({ datapoint: t, seriesIndex: a }),
+            onClick: (u) => pe({ datapoint: t, seriesIndex: a })
+          }, null, 40, sa))), 256))
         ]),
-        p(l.$slots, "svg", { svg: o.value }, void 0, !0)
-      ], 14, Qt)),
-      l.$slots.watermark ? (n(), v("div", Ql, [
-        p(l.$slots, "watermark", te(le({ isPrinting: i(Te) || i(Ie) })), void 0, !0)
+        x(l.$slots, "svg", { svg: o.value }, void 0, !0)
+      ], 14, ol)),
+      l.$slots.watermark ? (n(), v("div", oa, [
+        x(l.$slots, "watermark", se(oe({ isPrinting: i(Fe) || i(He) })), void 0, !0)
       ])) : b("", !0),
       c("div", {
-        id: `legend-bottom-${y.value}`
-      }, null, 8, ea),
-      Ae.value ? (n(), T(Mt, {
+        id: `legend-bottom-${f.value}`
+      }, null, 8, na),
+      Xe.value ? (n(), I(Dt, {
         key: 5,
-        to: e.value.style.chart.legend.position === "top" ? `#legend-top-${y.value}` : `#legend-bottom-${y.value}`
+        to: e.value.style.chart.legend.position === "top" ? `#legend-top-${f.value}` : `#legend-bottom-${f.value}`
       }, [
         c("div", {
           ref_key: "chartLegend",
-          ref: _e
+          ref: $e
         }, [
-          e.value.style.chart.legend.show && Z.value ? (n(), T(Yt, {
-            key: `legend_${Le.value}`,
-            legendSet: Re.value,
-            config: mt.value,
+          e.value.style.chart.legend.show && K.value ? (n(), I(tl, {
+            key: `legend_${Me.value}`,
+            legendSet: We.value,
+            config: wt.value,
             clickable: !1
           }, {
-            item: x(({ legend: t }) => [
+            item: p(({ legend: t }) => [
               c("div", {
-                style: ee(`display:flex;align-items:center;gap:4px;font-size:${e.value.style.chart.legend.fontSize}px`)
+                style: ae(`display:flex;align-items:center;gap:4px;font-size:${e.value.style.chart.legend.fontSize}px`)
               }, [
                 (n(), v("svg", {
-                  xmlns: i(at),
+                  xmlns: i(rt),
                   viewBox: "0 0 20 20",
                   height: e.value.style.chart.legend.fontSize,
                   width: e.value.style.chart.legend.fontSize
@@ -1060,72 +1091,86 @@ const Jt = ["id"], Kt = ["id"], Qt = ["xmlns", "viewBox"], el = ["x", "y", "widt
                     cy: 10,
                     r: 9,
                     fill: t.color
-                  }, null, 8, la)
-                ], 8, ta)),
-                i(ne) ? b("", !0) : (n(), v(C, { key: 0 }, [
-                  Qe(_(t.name), 1)
+                  }, null, 8, ua)
+                ], 8, ra)),
+                i(ie) ? b("", !0) : (n(), v(C, { key: 0 }, [
+                  _e(_(t.name), 1)
                 ], 64))
               ], 4)
             ]),
             _: 1
-          }, 8, ["legendSet", "config"])) : p(l.$slots, "legend", {
+          }, 8, ["legendSet", "config"])) : x(l.$slots, "legend", {
             key: 1,
-            legend: Re.value
+            legend: We.value
           }, void 0, !0)
         ], 512)
       ], 8, ["to"])) : b("", !0),
       l.$slots.source ? (n(), v("div", {
         key: 6,
         ref_key: "source",
-        ref: ke,
+        ref: Le,
         dir: "auto"
       }, [
-        p(l.$slots, "source", {}, void 0, !0)
+        x(l.$slots, "source", {}, void 0, !0)
       ], 512)) : b("", !0),
-      Z.value ? (n(), T(i(ut), {
-        key: 7,
-        hideDetails: "",
-        config: {
-          open: D.value.showTable,
-          maxHeight: 1e4,
-          body: {
-            backgroundColor: e.value.style.chart.backgroundColor,
-            color: e.value.style.chart.color
-          },
-          head: {
-            backgroundColor: e.value.style.chart.backgroundColor,
-            color: e.value.style.chart.color
-          }
-        }
-      }, {
-        content: x(() => [
-          (n(), T(i(it), {
-            key: `table_${$e.value}`,
-            colNames: K.value.colNames,
-            head: K.value.head,
-            body: K.value.body,
-            config: K.value.config,
-            title: `${e.value.style.chart.title.text}${e.value.style.chart.title.subtitle.text ? ` : ${e.value.style.chart.title.subtitle.text}` : ""}`,
-            onClose: s[0] || (s[0] = (t) => D.value.showTable = !1)
+      K.value ? (n(), I(It(q.value.component), Ot({ key: 7 }, q.value.props, {
+        ref_key: "tableUnit",
+        ref: U,
+        onClose: s[2] || (s[2] = (t) => X.value.showTable = !1)
+      }), lt({
+        content: p(() => [
+          (n(), I(i(ft), {
+            key: `table_${Se.value}`,
+            colNames: ee.value.colNames,
+            head: ee.value.head,
+            body: ee.value.body,
+            config: ee.value.config,
+            title: e.value.table.useDialog ? "" : q.value.title,
+            withCloseButton: !e.value.table.useDialog,
+            onClose: s[1] || (s[1] = (t) => X.value.showTable = !1)
           }, {
-            th: x(({ th: t }) => [
+            th: p(({ th: t }) => [
               c("div", {
                 innerHTML: t,
                 style: { display: "flex", "align-items": "center" }
-              }, null, 8, aa)
+              }, null, 8, ia)
             ]),
-            td: x(({ td: t }) => [
-              Qe(_(t.name || t), 1)
+            td: p(({ td: t }) => [
+              _e(_(t.name || t), 1)
             ]),
             _: 1
-          }, 8, ["colNames", "head", "body", "config", "title"]))
+          }, 8, ["colNames", "head", "body", "config", "title", "withCloseButton"]))
         ]),
-        _: 1
-      }, 8, ["config"])) : b("", !0),
-      i(ne) ? (n(), T(Bt, { key: 8 })) : b("", !0)
-    ], 46, Jt));
+        _: 2
+      }, [
+        e.value.table.useDialog ? {
+          name: "title",
+          fn: p(() => [
+            _e(_(q.value.title), 1)
+          ]),
+          key: "0"
+        } : void 0,
+        e.value.table.useDialog ? {
+          name: "actions",
+          fn: p(() => [
+            c("button", {
+              tabindex: "0",
+              class: "vue-ui-user-options-button",
+              onClick: s[0] || (s[0] = (t) => ye(e.value.userOptions.callbacks.csv))
+            }, [
+              at(i(dt), {
+                name: "excel",
+                stroke: q.value.props.color
+              }, null, 8, ["stroke"])
+            ])
+          ]),
+          key: "1"
+        } : void 0
+      ]), 1040)) : b("", !0),
+      i(ie) ? (n(), I(Yt, { key: 8 })) : b("", !0)
+    ], 46, al));
   }
-}, pa = /* @__PURE__ */ Zt(sa, [["__scopeId", "data-v-3328933a"]]);
+}, $a = /* @__PURE__ */ ll(ca, [["__scopeId", "data-v-0a9a1b98"]]);
 export {
-  pa as default
+  $a as default
 };