vue-data-ui 3.2.8 → 3.3.1

package/dist/{vue-ui-3d-bar-Cf7zHemQ.js → vue-ui-3d-bar-Cml_eeEU.js}

@@ -1,19 +1,20 @@
-import { defineAsyncComponent as H, computed as D, ref as _, toRefs as wt, watch as xe, onMounted as Ct, createElementBlock as c, openBlock as u, unref as n, normalizeStyle as z, normalizeClass as qe, createBlock as Q, createCommentVNode as p, createSlots as Ye, withCtx as A, renderSlot as P, normalizeProps as de, guardReactiveProps as ce, createVNode as Ke, createElementVNode as i, Fragment as C, renderList as M, toDisplayString as j, withKeys as Je, withModifiers as Qe, mergeProps as we, resolveDynamicComponent as Mt, createTextVNode as et, nextTick as tt } from "vue";
-import { c as lt, t as Ft, b as Tt, p as ve, e as Pt, h as Dt, o as At, f as he, g as Ce, m as R, n as ot, q as St, d as B, X as Ot, s as $, r as X, a as fe, u as st, v as pe, w as G, x as Bt, y as It } from "./lib-BEpWEyMm.js";
-import { t as zt, u as jt } from "./useResponsive-DfdjqQps.js";
-import { u as Nt, a as at } from "./useNestedProp-BOk-tPdu.js";
-import { u as Lt, B as Wt } from "./BaseScanner-BgWxam9d.js";
-import { u as Et } from "./usePrinter-w23K-ezx.js";
-import { u as Rt } from "./useUserOptionState-BIvW1Kz7.js";
-import { u as Gt } from "./useChartAccessibility-9icAAmYg.js";
-import Vt from "./img-DjWwQXVS.js";
-import Ut from "./Title-DG2nloSB.js";
-import { t as Ht } from "./themes-Dw-dDudK.js";
-import { _ as Xt } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const Zt = ["id"], qt = ["xmlns", "viewBox"], Yt = ["width", "height"], Kt = ["id"], Jt = ["stop-color"], Qt = ["stop-color"], el = ["id"], tl = ["stop-color"], ll = ["stop-color"], ol = ["id"], sl = ["stop-color"], al = ["stop-color"], nl = ["id"], rl = ["stop-color"], ul = ["stop-color"], il = ["id"], dl = ["stop-color"], cl = ["stop-color"], vl = ["stop-color"], hl = ["stop-color"], fl = ["stop-color"], pl = { key: 1 }, yl = ["id"], kl = ["stop-color"], gl = ["stop-color"], $l = ["id"], _l = ["stop-color"], ml = ["stop-color"], bl = ["id"], xl = ["stop-color"], wl = ["stop-color"], Cl = ["id"], Ml = ["x", "y", "font-size", "font-weight", "fill"], Fl = ["x", "y"], Tl = ["cx", "cy", "stroke", "opacity"], Pl = ["d", "stroke"], Dl = ["d", "stroke"], Al = { key: 4 }, Sl = { key: 0 }, Ol = ["stroke-dasharray", "d", "stroke", "stroke-width"], Bl = ["stroke-dasharray", "d", "stroke", "stroke-width"], Il = ["stroke-dasharray", "d", "stroke", "stroke-width"], zl = ["stroke-dasharray", "d", "stroke", "stroke-width"], jl = { key: 1 }, Nl = ["d", "stroke", "stroke-width", "fill"], Ll = ["d", "stroke", "stroke-width", "fill"], Wl = ["d", "stroke", "stroke-width", "fill"], El = { key: 2 }, Rl = ["d", "fill", "onMouseenter", "onClick", "onMouseout"], Gl = ["d", "fill", "onMouseenter", "onClick", "onMouseout"], Vl = ["d", "fill", "onMouseenter", "onClick", "onMouseout"], Ul = ["d", "onMouseenter", "onClick", "onMouseout"], Hl = ["d"], Xl = ["d", "stroke"], Zl = ["onClick"], ql = ["stroke", "d"], Yl = ["cx", "cy", "fill", "stroke"], Kl = ["x", "y", "width", "height"], Jl = ["x", "y", "width", "height"], Ql = { key: 3 }, eo = ["d", "stroke"], to = ["d", "fill", "stroke"], lo = { key: 0 }, oo = ["text-anchor", "x", "y", "fill", "font-size"], so = ["text-anchor", "x", "y", "fill", "font-size"], ao = { key: 4 }, no = ["d", "fill", "stroke"], ro = { key: 5 }, uo = { key: 0 }, io = ["stroke-dasharray", "d", "stroke", "stroke-width"], co = ["stroke-dasharray", "d", "stroke", "stroke-width"], vo = ["stroke-dasharray", "d", "stroke", "stroke-width"], ho = ["stroke-dasharray", "d", "stroke", "stroke-width"], fo = ["d", "stroke", "stroke-width", "fill"], po = ["d", "stroke", "stroke-width", "fill"], yo = ["d"], ko = { key: 1 }, go = ["onClick"], $o = ["id"], _o = ["stop-color"], mo = ["stop-color"], bo = ["id"], xo = ["stop-color"], wo = ["stop-color"], Co = ["stop-color"], Mo = ["stop-color"], Fo = ["stop-color"], To = ["onMouseenter", "onClick", "onMouseout", "d", "fill"], Po = ["onMouseenter", "onClick", "onMouseout", "d"], Do = ["onMouseenter", "onClick", "onMouseout", "d", "fill"], Ao = ["onClick"], So = ["stroke", "d"], Oo = ["cx", "cy", "fill", "stroke"], Bo = ["x", "y", "width", "height"], Io = ["x", "y", "width", "height"], zo = { key: 3 }, jo = ["d", "stroke"], No = ["d", "fill", "stroke"], Lo = { key: 0 }, Wo = ["text-anchor", "x", "y", "fill", "font-size"], Eo = ["text-anchor", "x", "y", "fill", "font-size"], Ro = { key: 4 }, Go = ["d", "fill", "stroke"], Vo = {
+import { defineAsyncComponent as H, computed as P, ref as _, toRefs as Pt, watch as we, onMounted as Dt, createElementBlock as v, openBlock as u, unref as n, normalizeStyle as z, normalizeClass as Ye, createBlock as Q, createCommentVNode as p, createSlots as Ke, withCtx as S, renderSlot as D, normalizeProps as de, guardReactiveProps as ce, createVNode as Je, createElementVNode as i, Fragment as C, renderList as M, toDisplayString as j, withKeys as Qe, withModifiers as et, mergeProps as Ce, resolveDynamicComponent as St, createTextVNode as tt, nextTick as lt } from "vue";
+import { c as ot, t as At, b as Ot, p as ve, e as Bt, h as It, o as zt, f as he, g as Me, m as R, n as st, q as jt, d as B, X as Nt, s as $, r as X, a as fe, u as at, v as pe, w as G, x as Lt, y as Et } from "./lib-CEjkWSLj.js";
+import { t as Wt, u as Rt } from "./useResponsive-DfdjqQps.js";
+import { u as Gt, a as nt } from "./useNestedProp-Ce3PwN8T.js";
+import { u as Vt, B as Ut } from "./BaseScanner-BgWxam9d.js";
+import { u as Ht } from "./usePrinter-DJ1iH-F_.js";
+import { u as Xt } from "./useSvgExport-DrjCWun4.js";
+import { u as Zt } from "./useUserOptionState-BIvW1Kz7.js";
+import { u as qt } from "./useChartAccessibility-9icAAmYg.js";
+import Yt from "./img-J2dLIr8Y.js";
+import Kt from "./Title-Camz1Lce.js";
+import { t as Jt } from "./themes-Dw-dDudK.js";
+import { _ as Qt } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const el = ["id"], tl = ["xmlns", "viewBox"], ll = ["width", "height"], ol = ["id"], sl = ["stop-color"], al = ["stop-color"], nl = ["id"], rl = ["stop-color"], ul = ["stop-color"], il = ["id"], dl = ["stop-color"], cl = ["stop-color"], vl = ["id"], hl = ["stop-color"], fl = ["stop-color"], pl = ["id"], gl = ["stop-color"], yl = ["stop-color"], kl = ["stop-color"], $l = ["stop-color"], _l = ["stop-color"], ml = { key: 1 }, bl = ["id"], xl = ["stop-color"], wl = ["stop-color"], Cl = ["id"], Ml = ["stop-color"], Fl = ["stop-color"], Tl = ["id"], Pl = ["stop-color"], Dl = ["stop-color"], Sl = ["id"], Al = ["x", "y", "font-size", "font-weight", "fill"], Ol = ["x", "y"], Bl = ["cx", "cy", "stroke", "opacity"], Il = ["d", "stroke"], zl = ["d", "stroke"], jl = { key: 4 }, Nl = { key: 0 }, Ll = ["stroke-dasharray", "d", "stroke", "stroke-width"], El = ["stroke-dasharray", "d", "stroke", "stroke-width"], Wl = ["stroke-dasharray", "d", "stroke", "stroke-width"], Rl = ["stroke-dasharray", "d", "stroke", "stroke-width"], Gl = { key: 1 }, Vl = ["d", "stroke", "stroke-width", "fill"], Ul = ["d", "stroke", "stroke-width", "fill"], Hl = ["d", "stroke", "stroke-width", "fill"], Xl = { key: 2 }, Zl = ["d", "fill", "onMouseenter", "onClick", "onMouseout"], ql = ["d", "fill", "onMouseenter", "onClick", "onMouseout"], Yl = ["d", "fill", "onMouseenter", "onClick", "onMouseout"], Kl = ["d", "onMouseenter", "onClick", "onMouseout"], Jl = ["d"], Ql = ["d", "stroke"], eo = ["onClick"], to = ["stroke", "d"], lo = ["cx", "cy", "fill", "stroke"], oo = ["x", "y", "width", "height"], so = ["x", "y", "width", "height"], ao = { key: 3 }, no = ["d", "stroke"], ro = ["d", "fill", "stroke"], uo = { key: 0 }, io = ["text-anchor", "x", "y", "fill", "font-size"], co = ["text-anchor", "x", "y", "fill", "font-size"], vo = { key: 4 }, ho = ["d", "fill", "stroke"], fo = { key: 5 }, po = { key: 0 }, go = ["stroke-dasharray", "d", "stroke", "stroke-width"], yo = ["stroke-dasharray", "d", "stroke", "stroke-width"], ko = ["stroke-dasharray", "d", "stroke", "stroke-width"], $o = ["stroke-dasharray", "d", "stroke", "stroke-width"], _o = ["d", "stroke", "stroke-width", "fill"], mo = ["d", "stroke", "stroke-width", "fill"], bo = ["d"], xo = { key: 1 }, wo = ["onClick"], Co = ["id"], Mo = ["stop-color"], Fo = ["stop-color"], To = ["id"], Po = ["stop-color"], Do = ["stop-color"], So = ["stop-color"], Ao = ["stop-color"], Oo = ["stop-color"], Bo = ["onMouseenter", "onClick", "onMouseout", "d", "fill"], Io = ["onMouseenter", "onClick", "onMouseout", "d"], zo = ["onMouseenter", "onClick", "onMouseout", "d", "fill"], jo = ["onClick"], No = ["stroke", "d"], Lo = ["cx", "cy", "fill", "stroke"], Eo = ["x", "y", "width", "height"], Wo = ["x", "y", "width", "height"], Ro = { key: 3 }, Go = ["d", "stroke"], Vo = ["d", "fill", "stroke"], Uo = { key: 0 }, Ho = ["text-anchor", "x", "y", "fill", "font-size"], Xo = ["text-anchor", "x", "y", "fill", "font-size"], Zo = { key: 4 }, qo = ["d", "fill", "stroke"], Yo = {
   key: 3,
   class: "vue-data-ui-watermark"
-}, Uo = ["innerHTML"], Ho = {
+}, Ko = ["innerHTML"], Jo = {
   __name: "vue-ui-3d-bar",
   props: {
     config: {
@@ -30,14 +31,14 @@ const Zt = ["id"], qt = ["xmlns", "viewBox"], Yt = ["width", "height"], Kt = ["i
     }
   },
   emits: ["selectDatapoint"],
-  setup(nt, { expose: rt, emit: ut }) {
-    const it = H(() => import("./BaseIcon-Bz-1GQhu.js")), dt = H(() => import("./vue-ui-accordion-CDIzGCG1.js")), ct = H(() => import("./DataTable-BvjacRbw.js")), vt = H(() => import("./PenAndPaper-CR8q353D.js")), ht = H(() => import("./UserOptions-DsTgvAok.js")), ft = H(() => import("./PackageVersion-C40g0Rfc.js")), pt = H(() => import("./BaseDraggableDialog-CHhZIht2.js")), { vue_ui_3d_bar: yt } = Nt(), O = nt, se = ut, Me = D(() => !!O.dataset && Object.keys(O.dataset).length), F = _(lt()), N = _(null), I = _(!1), Fe = _(0), Te = _(0), Pe = _(null), ee = _(null), ae = _(null), De = _(null), te = _(!1), le = _(null), ye = _(null), e = _(ge()), { loading: Z, FINAL_DATASET: S } = Lt({
-      ...wt(O),
+  setup(rt, { expose: ut, emit: it }) {
+    const dt = H(() => import("./BaseIcon-eZbszQrv.js")), ct = H(() => import("./vue-ui-accordion-VTP418mC.js")), vt = H(() => import("./DataTable-yAMEyP6y.js")), ht = H(() => import("./PenAndPaper-Bo-lMUik.js")), ft = H(() => import("./UserOptions-CSja1SGU.js")), pt = H(() => import("./PackageVersion-BfykJm_B.js")), gt = H(() => import("./BaseDraggableDialog-CVGErydD.js")), { vue_ui_3d_bar: yt } = Gt(), O = rt, se = it, Fe = P(() => !!O.dataset && Object.keys(O.dataset).length), F = _(ot()), N = _(null), I = _(!1), Te = _(0), Pe = _(0), De = _(null), ee = _(null), ae = _(null), Se = _(null), te = _(!1), le = _(null), ge = _(null), e = _($e()), { loading: Z, FINAL_DATASET: A } = Vt({
+      ...Pt(O),
       FINAL_CONFIG: e,
-      prepareConfig: ge,
+      prepareConfig: $e,
       callback: () => {
         Promise.resolve().then(async () => {
-          await tt(), Le();
+          await lt(), Le();
         });
       },
       skeletonDataset: {
@@ -68,7 +69,7 @@ const Zt = ["id"], qt = ["xmlns", "viewBox"], Yt = ["width", "height"], Kt = ["i
           }
         ]
       },
-      skeletonConfig: Ft({
+      skeletonConfig: At({
         defaultConfig: e.value,
         userConfig: {
           customPalette: ["#808080", "#ADADAD", "#DBDBDB"],
@@ -89,64 +90,64 @@ const Zt = ["id"], qt = ["xmlns", "viewBox"], Yt = ["width", "height"], Kt = ["i
           }
         }
       })
-    }), { userOptionsVisible: ke, setUserOptionsVisibility: Ae, keepUserOptionState: Se } = Rt({ config: e.value }), { svgRef: Oe } = Gt({ config: e.value.style.chart.title });
-    function ge() {
-      const a = at({
+    }), { userOptionsVisible: ye, setUserOptionsVisibility: Ae, keepUserOptionState: Oe } = Zt({ config: e.value }), { svgRef: ke } = qt({ config: e.value.style.chart.title });
+    function $e() {
+      const a = nt({
         userConfig: O.config,
         defaultConfig: yt
       });
       return a.theme ? {
-        ...at({
-          userConfig: Ht.vue_ui_3d_bar[a.theme] || O.config,
+        ...nt({
+          userConfig: Jt.vue_ui_3d_bar[a.theme] || O.config,
           defaultConfig: a
         }),
-        customPalette: Tt[a.theme] || ve
+        customPalette: Ot[a.theme] || ve
       } : a;
     }
-    xe(() => O.config, (a) => {
-      Z.value || (e.value = ge()), ke.value = !e.value.userOptions.showOnChartHover, We(), Fe.value += 1, Te.value += 1, V.value.showTable = e.value.table.show;
+    we(() => O.config, (a) => {
+      Z.value || (e.value = $e()), ye.value = !e.value.userOptions.showOnChartHover, Ee(), Te.value += 1, Pe.value += 1, V.value.showTable = e.value.table.show;
     }, { deep: !0 });
-    const { isPrinting: Be, isImaging: Ie, generatePdf: ze, generateImage: je } = Et({
+    const { isPrinting: Be, isImaging: Ie, generatePdf: ze, generateImage: je } = Ht({
       elementId: `3d_bar_${F.value}`,
       fileName: e.value.style.chart.title.text || "vue-ui-3d-bar",
       options: e.value.userOptions.print
-    }), kt = D(() => Pt(e.value.customPalette)), V = _({
+    }), kt = P(() => Bt(e.value.customPalette)), V = _({
       showTable: e.value.table.show
     });
-    xe(e, () => {
+    we(e, () => {
       V.value = {
         showTable: e.value.table.show
       };
     }, { immediate: !0 });
-    const x = D(() => S.value.series && S.value.series.length), $e = _(e.value.style.chart.box.dimensions.width * (x.value ? 2 : 1)), Ne = _(e.value.style.chart.box.dimensions.height), o = D(() => ({
+    const x = P(() => A.value.series && A.value.series.length), _e = _(e.value.style.chart.box.dimensions.width * (x.value ? 2 : 1)), Ne = _(e.value.style.chart.box.dimensions.height), o = P(() => ({
       height: Ne.value,
-      width: $e.value,
-      absoluteWidth: $e.value,
+      width: _e.value,
+      absoluteWidth: _e.value,
       top: e.value.style.chart.box.dimensions.top,
       bottom: e.value.style.chart.box.dimensions.bottom,
       left: e.value.style.chart.box.dimensions.left,
       right: e.value.style.chart.box.dimensions.right,
       perspective: e.value.style.chart.box.dimensions.perspective
-    })), w = D(() => {
+    })), w = P(() => {
       if (x.value) {
-        const a = S.value.series.map((l) => l.value || 0).reduce((l, d) => l + d, 0), s = S.value.series.map((l, d) => ({
+        const a = A.value.series.map((l) => l.value || 0).reduce((l, d) => l + d, 0), s = A.value.series.map((l, d) => ({
           ...l,
           seriesIndex: d,
-          id: lt(),
+          id: ot(),
           proportion: (l.value || 0) / a,
-          color: Dt(l.color) || kt.value[d] || ve[d] || ve[d % ve.length],
-          breakdown: l.breakdown ? l.breakdown.sort((r, k) => k.value - r.value) : null
+          color: It(l.color) || kt.value[d] || ve[d] || ve[d % ve.length],
+          breakdown: l.breakdown ? l.breakdown.sort((r, y) => y.value - r.value) : null
         })).sort((l, d) => d.value - l.value), t = [];
-        let v = 0;
+        let c = 0;
         for (let l = 0; l < s.length; l += 1)
           t.push({
             ...s[l],
-            fill: gt(v, s[l].proportion, s[l].breakdown, s[l].color)
-          }), v += s[l].proportion;
+            fill: $t(c, s[l].proportion, s[l].breakdown, s[l].color)
+          }), c += s[l].proportion;
         return t;
       }
       return null;
-    }), L = D(() => {
+    }), L = P(() => {
       const a = o.value.width / 2;
       return {
         right: `M${a},${o.value.top} ${o.value.width - o.value.right}, ${o.value.top + o.value.perspective} ${o.value.width - o.value.right},${o.value.height - o.value.bottom - o.value.perspective} ${a},${o.value.height - o.value.bottom}`,
@@ -158,25 +159,25 @@ const Zt = ["id"], qt = ["xmlns", "viewBox"], Yt = ["width", "height"], Kt = ["i
         tubeRight: `M${o.value.width - o.value.right},${o.value.top + o.value.perspective} ${o.value.width - o.value.right},${o.value.height - o.value.bottom - o.value.perspective}`,
         tubeBottom: `M${o.value.width - o.value.right},${o.value.height - o.value.bottom - o.value.perspective} C ${o.value.width - o.value.right},${o.value.height} ${o.value.left},${o.value.height} ${o.value.left},${o.value.height - o.value.bottom - o.value.perspective}`
       };
-    }), q = _(e.value.style.chart.animation.use ? 0 : S.value.percentage);
+    }), q = _(e.value.style.chart.animation.use ? 0 : A.value.percentage);
     function Le() {
       let a = 0, s = e.value.style.chart.animation.speed, t = 5e-3 * e.value.style.chart.animation.acceleration;
-      function v() {
-        q.value += s + a, a += t, q.value < S.value.percentage ? requestAnimationFrame(v) : q.value = S.value.percentage;
+      function c() {
+        q.value += s + a, a += t, q.value < A.value.percentage ? requestAnimationFrame(c) : q.value = A.value.percentage;
       }
-      e.value.style.chart.animation.use && (q.value = 0, v());
+      e.value.style.chart.animation.use && (q.value = 0, c());
     }
-    Ct(() => {
-      We(), Le();
+    Dt(() => {
+      Ee(), Le();
     });
-    const ne = D(() => !!e.value.debug);
-    function We() {
-      if (At(O.dataset) ? he({
+    const ne = P(() => !!e.value.debug);
+    function Ee() {
+      if (zt(O.dataset) ? he({
         componentName: "VueUi3dBar",
         type: "dataset",
         debug: ne.value
       }) : O.dataset.series ? O.dataset.series.forEach((a, s) => {
-        Ce({
+        Me({
           datasetObject: a,
           requiredAttributes: ["name", "value"]
         }).forEach((t) => {
@@ -187,8 +188,8 @@ const Zt = ["id"], qt = ["xmlns", "viewBox"], Yt = ["width", "height"], Kt = ["i
             index: s,
             debug: ne.value
           });
-        }), a.breakdown && a.breakdown.forEach((t, v) => {
-          Ce({
+        }), a.breakdown && a.breakdown.forEach((t, c) => {
+          Me({
             datasetObject: t,
             requiredAttributes: ["name", "value"]
           }).forEach((l) => {
@@ -196,12 +197,12 @@ const Zt = ["id"], qt = ["xmlns", "viewBox"], Yt = ["width", "height"], Kt = ["i
               componentName: "VueUi3dBar",
               type: "datasetSerieAttribute",
               property: l,
-              index: `${s} - ${v}`,
+              index: `${s} - ${c}`,
               debug: ne.value
             });
           });
         });
-      }) : Ce({
+      }) : Me({
         datasetObject: O.dataset,
         requiredAttributes: ["percentage"]
       }).forEach((a) => {
@@ -212,31 +213,31 @@ const Zt = ["id"], qt = ["xmlns", "viewBox"], Yt = ["width", "height"], Kt = ["i
           debug: ne.value
         });
       }), e.value.responsive) {
-        const a = zt(() => {
-          const { width: s, height: t } = jt({
+        const a = Wt(() => {
+          const { width: s, height: t } = Rt({
             chart: N.value,
-            title: e.value.style.chart.title.text ? Pe.value : null,
-            source: De.value
+            title: e.value.style.chart.title.text ? De.value : null,
+            source: Se.value
           });
           requestAnimationFrame(() => {
-            Ne.value = t - 12, $e.value = s;
+            Ne.value = t - 12, _e.value = s;
           });
         });
         ee.value && (ae.value && ee.value.unobserve(ae.value), ee.value.disconnect()), ee.value = new ResizeObserver(a), ae.value = N.value.parentNode, ee.value.observe(ae.value);
       }
     }
-    const Y = D(() => o.value.width / 4);
-    function gt(a, s, t, v) {
-      const l = o.value.height - o.value.bottom - o.value.top - o.value.perspective * 2, { width: d, height: r, bottom: k, right: E, left: g, perspective: y } = o.value, f = x.value ? d / 4 : d / 2, b = f * 2 + g, h = k + l * a, be = r - h - y - l * s / 2, mt = be > o.value.height / 2 ? "top" : "bottom", Ue = r * 0.25, bt = !!t;
-      let He = null, Xe = null;
-      return bt && (t = t.map((Ze, xt) => ({
-        ...Ze,
-        value: Ze.value || 0,
-        color: R(v, xt / t.length)
-      })), He = ot(
+    const Y = P(() => o.value.width / 4);
+    function $t(a, s, t, c) {
+      const l = o.value.height - o.value.bottom - o.value.top - o.value.perspective * 2, { width: d, height: r, bottom: y, right: W, left: k, perspective: g } = o.value, f = x.value ? d / 4 : d / 2, b = f * 2 + k, h = y + l * a, xe = r - h - g - l * s / 2, Mt = xe > o.value.height / 2 ? "top" : "bottom", He = r * 0.25, Ft = !!t;
+      let Xe = null, Ze = null;
+      return Ft && (t = t.map((qe, Tt) => ({
+        ...qe,
+        value: qe.value || 0,
+        color: R(c, Tt / t.length)
+      })), Xe = st(
         { series: t },
         d / 2 + d / 5,
-        mt === "top" ? be - Ue : be + Ue,
+        Mt === "top" ? xe - He : xe + He,
         d / 10,
         d / 10,
         1.99999,
@@ -245,10 +246,10 @@ const Zt = ["id"], qt = ["xmlns", "viewBox"], Yt = ["width", "height"], Kt = ["i
         360,
         105.25,
         d / 20
-      ), Xe = ot(
+      ), Ze = st(
         { series: t },
         d - b + d / 14,
-        r - h - y - l * s / 2,
+        r - h - g - l * s / 2,
         d / 40,
         d / 40,
         1.99999,
@@ -258,56 +259,56 @@ const Zt = ["id"], qt = ["xmlns", "viewBox"], Yt = ["width", "height"], Kt = ["i
         105.25,
         d / 40
       )), {
-        donut: He,
-        miniDonut: Xe,
+        donut: Xe,
+        miniDonut: Ze,
         donutR: d / 20,
         CENTER_X: f,
         sidePointer: {
           x: d - b,
           x2: d - b + d / 14,
           xText: d - b + d / 9,
-          y: r - h - y - l * s / 2,
-          topY: r - h - y - l * s,
+          y: r - h - g - l * s / 2,
+          topY: r - h - g - l * s,
           height: l * s
         },
         apexBottom: { y: r - h, x: f },
         apexTop: { y: r - h - l * s, x: f },
-        right: `M${f},${r - h} ${f},${r - h - l * s} ${d - b},${r - h - y - l * s} ${d - b},${r - h - y}Z`,
-        left: `M${f},${r - h} ${f},${r - h - l * s} ${g}, ${r - h - y - l * s} ${g},${r - h - y}Z`,
-        liningTop: `M${g},${r - h - y - l * s} ${f},${r - h - l * s} ${d - b},${r - h - y - l * s}`,
-        liningTopShade: `M${g},${r - h - y - l * s - 0.5} ${f},${r - h - l * s - 0.5} ${d - b},${r - h - y - l * s - 0.5}`,
-        top: `M${f},${r - h - l * s} ${g},${r - h - y - l * s} ${f},${r - h - y * 2 - l * s} ${d - b},${r - h - y - l * s} Z`,
-        tubeTop: `M${g},${r - h - l * s - y} C ${g},${r - h - l * s - y * 2.5} ${d - b},${r - h - l * s - y * 2.5} ${d - b},${r - h - l * s - y} C ${d - b},${r - h - l * s + y / 2} ${g},${r - h - l * s + y / 2} ${g},${r - h - l * s - y}`,
-        bottomTubeTop: `M ${d - b - 0.5},${r - h - y} C ${d - b - 0.5},${r - h + y / 2} ${g},${r - h + y / 2} ${g + 0.5},${r - h - y}`,
+        right: `M${f},${r - h} ${f},${r - h - l * s} ${d - b},${r - h - g - l * s} ${d - b},${r - h - g}Z`,
+        left: `M${f},${r - h} ${f},${r - h - l * s} ${k}, ${r - h - g - l * s} ${k},${r - h - g}Z`,
+        liningTop: `M${k},${r - h - g - l * s} ${f},${r - h - l * s} ${d - b},${r - h - g - l * s}`,
+        liningTopShade: `M${k},${r - h - g - l * s - 0.5} ${f},${r - h - l * s - 0.5} ${d - b},${r - h - g - l * s - 0.5}`,
+        top: `M${f},${r - h - l * s} ${k},${r - h - g - l * s} ${f},${r - h - g * 2 - l * s} ${d - b},${r - h - g - l * s} Z`,
+        tubeTop: `M${k},${r - h - l * s - g} C ${k},${r - h - l * s - g * 2.5} ${d - b},${r - h - l * s - g * 2.5} ${d - b},${r - h - l * s - g} C ${d - b},${r - h - l * s + g / 2} ${k},${r - h - l * s + g / 2} ${k},${r - h - l * s - g}`,
+        bottomTubeTop: `M ${d - b - 0.5},${r - h - g} C ${d - b - 0.5},${r - h + g / 2} ${k},${r - h + g / 2} ${k + 0.5},${r - h - g}`,
         tubeBody: `M
-        ${g},${r - h - l * s - y} 
-        C ${g},${r - h - l * s + y / 2} 
-        ${d - b},${r - h - l * s + y / 2} 
-        ${d - b},${r - h - l * s - y} 
-        L${d - b},${r - h - y}
+        ${k},${r - h - l * s - g} 
+        C ${k},${r - h - l * s + g / 2} 
+        ${d - b},${r - h - l * s + g / 2} 
+        ${d - b},${r - h - l * s - g} 
+        L${d - b},${r - h - g}
         C 
-        ${d - b},${r - h + y / 2}
-        ${g},${r - h + y / 2}
-        ${g},${r - h - y}Z`
+        ${d - b},${r - h + g / 2}
+        ${k},${r - h + g / 2}
+        ${k},${r - h - g}Z`
       };
     }
-    const K = D(() => {
-      const a = St(q.value / 100), s = o.value.height - o.value.bottom - o.value.top - o.value.perspective * 2, { width: t, height: v, bottom: l, right: d, left: r, perspective: k } = o.value, E = x.value ? t / 4 : t / 2, g = x.value ? E * 2 + r : d, f = l + s * 0;
+    const K = P(() => {
+      const a = jt(q.value / 100), s = o.value.height - o.value.bottom - o.value.top - o.value.perspective * 2, { width: t, height: c, bottom: l, right: d, left: r, perspective: y } = o.value, W = x.value ? t / 4 : t / 2, k = x.value ? W * 2 + r : d, f = l + s * 0;
       return {
-        right: `M${E},${v - f} ${E},${v - f - s * a} ${t - g},${v - f - k - s * a} ${t - g},${v - f - k}Z`,
-        left: `M${E},${v - f} ${E},${v - f - s * a} ${r}, ${v - f - k - s * a} ${r},${v - f - k}Z`,
-        top: `M${E},${v - f - s * a} ${r},${v - f - k - s * a} ${E},${v - f - k * 2 - s * a} ${t - g},${v - f - k - s * a} Z`,
-        tubeTop: `M${r},${v - f - s * a - k} C ${r},${v - f - s * a - k * 2.5} ${t - g},${v - f - s * a - k * 2.5} ${t - g},${v - f - s * a - k} C ${t - g},${v - f - s * a + k / 2} ${r},${v - f - s * a + k / 2} ${r},${v - f - s * a - k}`,
+        right: `M${W},${c - f} ${W},${c - f - s * a} ${t - k},${c - f - y - s * a} ${t - k},${c - f - y}Z`,
+        left: `M${W},${c - f} ${W},${c - f - s * a} ${r}, ${c - f - y - s * a} ${r},${c - f - y}Z`,
+        top: `M${W},${c - f - s * a} ${r},${c - f - y - s * a} ${W},${c - f - y * 2 - s * a} ${t - k},${c - f - y - s * a} Z`,
+        tubeTop: `M${r},${c - f - s * a - y} C ${r},${c - f - s * a - y * 2.5} ${t - k},${c - f - s * a - y * 2.5} ${t - k},${c - f - s * a - y} C ${t - k},${c - f - s * a + y / 2} ${r},${c - f - s * a + y / 2} ${r},${c - f - s * a - y}`,
         tubeBody: `M
-        ${r},${v - f - s * a - k} 
-        C ${r},${v - f - s * a + k / 2} 
-        ${t - g},${v - f - s * a + k / 2} 
-        ${t - g},${v - f - s * a - k} 
-        L${t - g},${v - k * 1.5}
+        ${r},${c - f - s * a - y} 
+        C ${r},${c - f - s * a + y / 2} 
+        ${t - k},${c - f - s * a + y / 2} 
+        ${t - k},${c - f - s * a - y} 
+        L${t - k},${c - y * 1.5}
         C 
-        ${t - g},${v}
-        ${r},${v}
-        ${r},${v - f - k}Z`
+        ${t - k},${c}
+        ${r},${c}
+        ${r},${c - f - y}Z`
       };
     }), m = _(null);
     function T(a, s = !1) {
@@ -317,64 +318,64 @@ const Zt = ["id"], qt = ["xmlns", "viewBox"], Yt = ["width", "height"], Kt = ["i
       e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: a, seriesIndex: a.seriesIndex }), !I.value && (m.value = null);
     }
     function J(a, s, t = !1) {
-      const v = S.value.series.map((r) => r.value || 0).reduce((r, k) => r + k, 0), l = isNaN(a.value / v) ? 0 : a.value / v * 100, d = isNaN(a.value / Ee(s)) ? 0 : a.value / Ee(s) * 100;
+      const c = A.value.series.map((r) => r.value || 0).reduce((r, y) => r + y, 0), l = isNaN(a.value / c) ? 0 : a.value / c * 100, d = isNaN(a.value / We(s)) ? 0 : a.value / We(s) * 100;
       return t ? d : l.toFixed(0) + "%";
     }
-    function Ee(a) {
+    function We(a) {
       return [...a].map((s) => s.value).reduce((s, t) => s + t, 0);
     }
     const re = _(!1);
     function Re(a) {
       re.value = a;
     }
-    function $t() {
-      return x.value ? w.value : S.value.percentage;
+    function _t() {
+      return x.value ? w.value : A.value.percentage;
     }
-    const W = D(() => {
+    const E = P(() => {
       if (x.value) {
-        const a = w.value.flatMap((t) => t.breakdown && t.breakdown.length ? [{ name: t.name, color: t.color }, ...t.breakdown.map((v, l) => ({
-          name: v.name,
+        const a = w.value.flatMap((t) => t.breakdown && t.breakdown.length ? [{ name: t.name, color: t.color }, ...t.breakdown.map((c, l) => ({
+          name: c.name,
           color: R(t.color, l / t.breakdown.length)
         }))] : {
           name: t.name,
           color: t.color
-        }), s = w.value.flatMap((t) => t.breakdown && t.breakdown.length ? [t.value, ...t.breakdown.map((v) => v.value)] : t.value);
+        }), s = w.value.flatMap((t) => t.breakdown && t.breakdown.length ? [t.value, ...t.breakdown.map((c) => c.value)] : t.value);
         return { head: a, body: s };
       } else
         return null;
     });
-    function _e(a = null) {
+    function me(a = null) {
       if (!x.value) {
         console.warn("VueUi3dBar : CSV download is only available in stack mode (providing dataset.series instead of dataset.percentage)");
         return;
       }
-      tt(() => {
-        const s = w.value.map((d) => d.value).reduce((d, r) => d + r, 0), t = W.value.head.map((d, r) => [[
+      lt(() => {
+        const s = w.value.map((d) => d.value).reduce((d, r) => d + r, 0), t = E.value.head.map((d, r) => [[
           d.name
-        ], [W.value.body[r]], [isNaN(W.value.body[r] / s) ? "-" : W.value.body[r] / s * 100]]), v = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [[""], ["val"], ["%"]]].concat(t), l = Bt(v);
-        a ? a(l) : It({ csvContent: l, title: e.value.style.chart.title.text || "vue-ui-3d-bar" });
+        ], [E.value.body[r]], [isNaN(E.value.body[r] / s) ? "-" : E.value.body[r] / s * 100]]), c = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [[""], ["val"], ["%"]]].concat(t), l = Lt(c);
+        a ? a(l) : Et({ csvContent: l, title: e.value.style.chart.title.text || "vue-ui-3d-bar" });
       });
     }
-    const ue = D(() => {
+    const ue = P(() => {
       const a = w.value.map((d) => d.value).reduce((d, r) => d + r, 0), s = [
         ' <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M18 16v2a1 1 0 0 1 -1 1h-11l6 -7l-6 -7h11a1 1 0 0 1 1 1v2" /></svg>',
         B({ p: e.value.style.chart.legend.prefix, v: a, s: e.value.style.chart.legend.suffix, r: e.value.table.td.roundingValue }),
         "100%"
-      ], t = W.value.head.map((d, r) => {
-        const k = B({ p: e.value.style.chart.legend.prefix, v: W.value.body[r], s: e.value.style.chart.legend.suffix, r: e.value.table.td.roundingValue });
+      ], t = E.value.head.map((d, r) => {
+        const y = B({ p: e.value.style.chart.legend.prefix, v: E.value.body[r], s: e.value.style.chart.legend.suffix, r: e.value.table.td.roundingValue });
         return [
           {
             color: d.color,
             name: d.name
           },
-          k,
-          isNaN(W.value.body[r] / a) ? "-" : B({
-            v: W.value.body[r] / a * 100,
+          y,
+          isNaN(E.value.body[r] / a) ? "-" : B({
+            v: E.value.body[r] / a * 100,
             s: "%",
             r: e.value.table.td.roundingPercentage
           })
         ];
-      }), v = {
+      }), c = {
         th: {
           backgroundColor: e.value.table.th.backgroundColor,
           color: e.value.table.th.color,
@@ -396,32 +397,32 @@ const Zt = ["id"], qt = ["xmlns", "viewBox"], Yt = ["width", "height"], Kt = ["i
         ],
         head: s,
         body: t,
-        config: v
+        config: c
       };
     });
     function Ge() {
       V.value.showTable = !V.value.showTable;
     }
     const ie = _(!1);
-    function me() {
+    function be() {
       ie.value = !ie.value;
     }
-    async function _t({ scale: a = 2 } = {}) {
+    async function mt({ scale: a = 2 } = {}) {
       if (!N.value) return;
-      const { width: s, height: t } = N.value.getBoundingClientRect(), v = s / t, { imageUri: l, base64: d } = await Vt({ domElement: N.value, base64: !0, img: !0, scale: a });
+      const { width: s, height: t } = N.value.getBoundingClientRect(), c = s / t, { imageUri: l, base64: d } = await Yt({ domElement: N.value, base64: !0, img: !0, scale: a });
       return {
         imageUri: l,
         base64: d,
         title: e.value.style.chart.title.text,
         width: s,
         height: t,
-        aspectRatio: v
+        aspectRatio: c
       };
     }
-    const oe = D(() => {
+    const oe = P(() => {
       const a = e.value.table.useDialog && !e.value.table.show, s = V.value.showTable;
       return {
-        component: a ? pt : dt,
+        component: a ? gt : ct,
         title: `${e.value.style.chart.title.text}${e.value.style.chart.title.subtitle.text ? `: ${e.value.style.chart.title.subtitle.text}` : ""}`,
         props: a ? {
           backgroundColor: e.value.table.th.backgroundColor,
@@ -448,46 +449,59 @@ const Zt = ["id"], qt = ["xmlns", "viewBox"], Yt = ["width", "height"], Kt = ["i
         }
       };
     });
-    xe(() => V.value.showTable, (a) => {
+    we(() => V.value.showTable, (a) => {
       e.value.table.show || (a && e.value.table.useDialog && le.value ? le.value.open() : "close" in le.value && le.value.close());
     });
     function Ve() {
-      V.value.showTable = !1, ye.value && ye.value.setTableIconState(!1);
+      V.value.showTable = !1, ge.value && ge.value.setTableIconState(!1);
     }
-    return rt({
-      getImage: _t,
-      generateCsv: _e,
+    const bt = P(() => e.value.style.chart.backgroundColor), xt = P(() => e.value.style.chart.title), { exportSvg: wt, getSvg: Ct } = Xt({
+      svg: ke,
+      title: xt,
+      backgroundColor: bt
+    });
+    async function Ue({ isCb: a }) {
+      if (a) {
+        const { blob: s, url: t, text: c, dataUrl: l } = await Ct();
+        e.value.userOptions.callbacks.svg({ blob: s, url: t, text: c, dataUrl: l });
+      } else
+        wt();
+    }
+    return ut({
+      getImage: mt,
+      generateCsv: me,
       generatePdf: ze,
       generateImage: je,
-      getData: $t,
+      generateSvg: Ue,
+      getData: _t,
       toggleTable: Ge,
-      toggleAnnotator: me,
+      toggleAnnotator: be,
       toggleFullscreen: Re
-    }), (a, s) => (u(), c("div", {
+    }), (a, s) => (u(), v("div", {
       ref_key: "bar3dChart",
       ref: N,
-      class: qe("vue-data-ui-component vue-ui-3d-bar"),
+      class: Ye("vue-data-ui-component vue-ui-3d-bar"),
       style: z(`font-family:${e.value.style.fontFamily};width:100%; text-align:center;background:${e.value.style.chart.backgroundColor}`),
       id: `3d_bar_${F.value}`,
       onMouseenter: s[8] || (s[8] = () => n(Ae)(!0)),
       onMouseleave: s[9] || (s[9] = () => n(Ae)(!1))
     }, [
-      e.value.userOptions.buttons.annotator ? (u(), Q(n(vt), {
+      e.value.userOptions.buttons.annotator ? (u(), Q(n(ht), {
         key: 0,
-        svgRef: n(Oe),
+        svgRef: n(ke),
         backgroundColor: e.value.style.chart.backgroundColor,
         color: e.value.style.chart.color,
         active: ie.value,
-        onClose: me
+        onClose: be
       }, null, 8, ["svgRef", "backgroundColor", "color", "active"])) : p("", !0),
-      e.value.style.chart.title.text ? (u(), c("div", {
+      e.value.style.chart.title.text ? (u(), v("div", {
         key: 1,
         ref_key: "chartTitle",
-        ref: Pe,
+        ref: De,
         style: "width:100%;background:transparent"
       }, [
-        (u(), Q(Ut, {
-          key: `title_${Fe.value}`,
+        (u(), Q(Kt, {
+          key: `title_${Te.value}`,
           config: {
             title: {
               cy: "3dBar-div-title",
@@ -500,10 +514,10 @@ const Zt = ["id"], qt = ["xmlns", "viewBox"], Yt = ["width", "height"], Kt = ["i
           }
         }, null, 8, ["config"]))
       ], 512)) : p("", !0),
-      e.value.userOptions.show && Me.value && (n(Se) || n(ke)) ? (u(), Q(n(ht), {
+      e.value.userOptions.show && Fe.value && (n(Oe) || n(ye)) ? (u(), Q(n(ft), {
         key: 2,
         ref_key: "userOptionsRef",
-        ref: ye,
+        ref: ge,
         backgroundColor: e.value.style.chart.backgroundColor,
         color: e.value.style.chart.color,
         isPrinting: n(Be),
@@ -513,6 +527,7 @@ const Zt = ["id"], qt = ["xmlns", "viewBox"], Yt = ["width", "height"], Kt = ["i
         hasTable: !!x.value && e.value.userOptions.buttons.table,
         hasXls: !!x.value && e.value.userOptions.buttons.csv,
         hasImg: e.value.userOptions.buttons.img,
+        hasSvg: e.value.userOptions.buttons.svg,
         hasFullscreen: e.value.userOptions.buttons.fullscreen,
         titles: { ...e.value.userOptions.buttonTitles },
         chartElement: N.value,
@@ -524,74 +539,75 @@ const Zt = ["id"], qt = ["xmlns", "viewBox"], Yt = ["width", "height"], Kt = ["i
         tableDialog: e.value.table.useDialog,
         onToggleFullscreen: Re,
         onGeneratePdf: n(ze),
-        onGenerateCsv: _e,
+        onGenerateCsv: me,
         onGenerateImage: n(je),
+        onGenerateSvg: Ue,
         onToggleTable: Ge,
-        onToggleAnnotator: me,
+        onToggleAnnotator: be,
         style: z({
-          visibility: n(Se) ? n(ke) ? "visible" : "hidden" : "visible"
+          visibility: n(Oe) ? n(ye) ? "visible" : "hidden" : "visible"
         })
-      }, Ye({ _: 2 }, [
+      }, Ke({ _: 2 }, [
         a.$slots.menuIcon ? {
           name: "menuIcon",
-          fn: A(({ isOpen: t, color: v }) => [
-            P(a.$slots, "menuIcon", de(ce({ isOpen: t, color: v })), void 0, !0)
+          fn: S(({ isOpen: t, color: c }) => [
+            D(a.$slots, "menuIcon", de(ce({ isOpen: t, color: c })), void 0, !0)
           ]),
           key: "0"
         } : void 0,
         a.$slots.optionPdf ? {
           name: "optionPdf",
-          fn: A(() => [
-            P(a.$slots, "optionPdf", {}, void 0, !0)
+          fn: S(() => [
+            D(a.$slots, "optionPdf", {}, void 0, !0)
           ]),
           key: "1"
         } : void 0,
         a.$slots.optionCsv ? {
           name: "optionCsv",
-          fn: A(() => [
-            P(a.$slots, "optionCsv", {}, void 0, !0)
+          fn: S(() => [
+            D(a.$slots, "optionCsv", {}, void 0, !0)
           ]),
           key: "2"
         } : void 0,
         a.$slots.optionImg ? {
           name: "optionImg",
-          fn: A(() => [
-            P(a.$slots, "optionImg", {}, void 0, !0)
+          fn: S(() => [
+            D(a.$slots, "optionImg", {}, void 0, !0)
           ]),
           key: "3"
         } : void 0,
         a.$slots.optionTable ? {
           name: "optionTable",
-          fn: A(() => [
-            P(a.$slots, "optionTable", {}, void 0, !0)
+          fn: S(() => [
+            D(a.$slots, "optionTable", {}, void 0, !0)
           ]),
           key: "4"
         } : void 0,
         a.$slots.optionFullscreen ? {
           name: "optionFullscreen",
-          fn: A(({ toggleFullscreen: t, isFullscreen: v }) => [
-            P(a.$slots, "optionFullscreen", de(ce({ toggleFullscreen: t, isFullscreen: v })), void 0, !0)
+          fn: S(({ toggleFullscreen: t, isFullscreen: c }) => [
+            D(a.$slots, "optionFullscreen", de(ce({ toggleFullscreen: t, isFullscreen: c })), void 0, !0)
           ]),
           key: "5"
         } : void 0,
         a.$slots.optionAnnotator ? {
           name: "optionAnnotator",
-          fn: A(({ toggleAnnotator: t, isAnnotator: v }) => [
-            P(a.$slots, "optionAnnotator", de(ce({ toggleAnnotator: t, isAnnotator: v })), void 0, !0)
+          fn: S(({ toggleAnnotator: t, isAnnotator: c }) => [
+            D(a.$slots, "optionAnnotator", de(ce({ toggleAnnotator: t, isAnnotator: c })), void 0, !0)
           ]),
           key: "6"
         } : void 0
-      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasPdf", "hasTable", "hasXls", "hasImg", "hasFullscreen", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "tableDialog", "onGeneratePdf", "onGenerateImage", "style"])) : p("", !0),
-      (u(), c("svg", {
+      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasPdf", "hasTable", "hasXls", "hasImg", "hasSvg", "hasFullscreen", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "tableDialog", "onGeneratePdf", "onGenerateImage", "style"])) : p("", !0),
+      (u(), v("svg", {
         ref_key: "svgRef",
-        ref: Oe,
-        xmlns: n(Ot),
-        class: qe({ "vue-data-ui-fullscreen--on": re.value, "vue-data-ui-fulscreen--off": !re.value, animated: e.value.useCssAnimation }),
+        ref: ke,
+        xmlns: n(Nt),
+        class: Ye({ "vue-data-ui-fullscreen--on": re.value, "vue-data-ui-fulscreen--off": !re.value, animated: e.value.useCssAnimation }),
         viewBox: `0 0 ${o.value.absoluteWidth} ${o.value.height}`,
         style: z(`max-width:100%; overflow: visible; background:transparent;color:${e.value.style.chart.color}`)
       }, [
-        Ke(n(ft)),
-        a.$slots["chart-background"] ? (u(), c("foreignObject", {
+        Je(n(pt)),
+        a.$slots["chart-background"] ? (u(), v("foreignObject", {
           key: 0,
           x: 0,
           y: 0,
@@ -601,8 +617,8 @@ const Zt = ["id"], qt = ["xmlns", "viewBox"], Yt = ["width", "height"], Kt = ["i
             pointerEvents: "none"
           }
         }, [
-          P(a.$slots, "chart-background", {}, void 0, !0)
-        ], 8, Yt)) : p("", !0),
+          D(a.$slots, "chart-background", {}, void 0, !0)
+        ], 8, ll)) : p("", !0),
         i("defs", null, [
           i("radialGradient", {
             id: `gradient_top${F.value}`
@@ -610,48 +626,48 @@ const Zt = ["id"], qt = ["xmlns", "viewBox"], Yt = ["width", "height"], Kt = ["i
             i("stop", {
               offset: "0%",
               "stop-color": n($)(e.value.style.chart.backgroundColor, 0)
-            }, null, 8, Jt),
+            }, null, 8, sl),
             i("stop", {
               offset: "100%",
               "stop-color": e.value.style.chart.bar.color
-            }, null, 8, Qt)
-          ], 8, Kt),
+            }, null, 8, al)
+          ], 8, ol),
           i("radialGradient", {
             id: `gradient_tube_top${F.value}`
           }, [
             i("stop", {
               offset: "0%",
               "stop-color": n($)(n(R)(e.value.style.chart.bar.color, 0.5), 80)
-            }, null, 8, tl),
+            }, null, 8, rl),
             i("stop", {
               offset: "100%",
               "stop-color": n($)(n(X)(e.value.style.chart.bar.color, 0.1), 80)
-            }, null, 8, ll)
-          ], 8, el),
+            }, null, 8, ul)
+          ], 8, nl),
           i("radialGradient", {
             id: `gradient_left${F.value}`
           }, [
             i("stop", {
               offset: "0%",
               "stop-color": n($)(e.value.style.chart.backgroundColor, 0)
-            }, null, 8, sl),
+            }, null, 8, dl),
             i("stop", {
               offset: "100%",
               "stop-color": n($)(e.value.style.chart.bar.color, 20)
-            }, null, 8, al)
-          ], 8, ol),
+            }, null, 8, cl)
+          ], 8, il),
           i("radialGradient", {
             id: `gradient_right${F.value}`
           }, [
             i("stop", {
               offset: "0%",
               "stop-color": n($)(e.value.style.chart.backgroundColor, 0)
-            }, null, 8, rl),
+            }, null, 8, hl),
             i("stop", {
               offset: "100%",
               "stop-color": n($)(e.value.style.chart.bar.color, 20)
-            }, null, 8, ul)
-          ], 8, nl),
+            }, null, 8, fl)
+          ], 8, vl),
           i("linearGradient", {
             id: `gradient_tube_body${F.value}`,
             x1: "0%",
@@ -662,62 +678,62 @@ const Zt = ["id"], qt = ["xmlns", "viewBox"], Yt = ["width", "height"], Kt = ["i
             i("stop", {
               offset: "0%",
               "stop-color": `${e.value.style.chart.bar.color}`
-            }, null, 8, dl),
+            }, null, 8, gl),
             i("stop", {
               offset: "10%",
               "stop-color": n($)(n(X)(e.value.style.chart.bar.color, 0.7), 100)
-            }, null, 8, cl),
+            }, null, 8, yl),
             i("stop", {
               offset: "25%",
               "stop-color": n($)(n(X)(e.value.style.chart.bar.color, 0.5), 100)
-            }, null, 8, vl),
+            }, null, 8, kl),
             i("stop", {
               offset: "75%",
               "stop-color": n($)(e.value.style.chart.bar.color, 80)
-            }, null, 8, hl),
+            }, null, 8, $l),
             i("stop", {
               offset: "100%",
               "stop-color": n($)(n(R)(e.value.style.chart.bar.color, 0.7), 100)
-            }, null, 8, fl)
-          ], 8, il)
+            }, null, 8, _l)
+          ], 8, pl)
         ]),
-        x.value ? (u(), c("defs", pl, [
-          (u(!0), c(C, null, M(w.value, (t) => (u(), c("radialGradient", {
+        x.value ? (u(), v("defs", ml, [
+          (u(!0), v(C, null, M(w.value, (t) => (u(), v("radialGradient", {
             id: `grad_top_${t.id}`
           }, [
             i("stop", {
               offset: "0%",
               "stop-color": n($)(n(R)(t.color, 0.5), 80)
-            }, null, 8, kl),
+            }, null, 8, xl),
             i("stop", {
               offset: "100%",
               "stop-color": t.color
-            }, null, 8, gl)
-          ], 8, yl))), 256)),
-          (u(!0), c(C, null, M(w.value, (t) => (u(), c("linearGradient", {
+            }, null, 8, wl)
+          ], 8, bl))), 256)),
+          (u(!0), v(C, null, M(w.value, (t) => (u(), v("linearGradient", {
             id: `grad_left_${t.id}`
           }, [
             i("stop", {
               offset: "0%",
               "stop-color": n($)(t.color, 80)
-            }, null, 8, _l),
+            }, null, 8, Ml),
             i("stop", {
               offset: "100%",
               "stop-color": n($)(n(X)(t.color, 0.5), 100)
-            }, null, 8, ml)
-          ], 8, $l))), 256)),
-          (u(!0), c(C, null, M(w.value, (t) => (u(), c("linearGradient", {
+            }, null, 8, Fl)
+          ], 8, Cl))), 256)),
+          (u(!0), v(C, null, M(w.value, (t) => (u(), v("linearGradient", {
             id: `grad_right_${t.id}`
           }, [
             i("stop", {
               offset: "2%",
               "stop-color": n($)(n(R)(t.color, 0.5), 100)
-            }, null, 8, xl),
+            }, null, 8, Pl),
             i("stop", {
               offset: "100%",
               "stop-color": n($)(t.color, 80)
-            }, null, 8, wl)
-          ], 8, bl))), 256)),
+            }, null, 8, Dl)
+          ], 8, Tl))), 256)),
           i("linearGradient", {
             x1: "0%",
             y1: "0%",
@@ -733,9 +749,9 @@ const Zt = ["id"], qt = ["xmlns", "viewBox"], Yt = ["width", "height"], Kt = ["i
               offset: "100%",
               "stop-color": "#FFFFFF33"
             }, null, -1)
-          ])], 8, Cl)
+          ])], 8, Sl)
         ])) : p("", !0),
-        e.value.style.chart.dataLabel.show && ![null, void 0].includes(n(S).percentage) && [null, void 0].includes(n(S).series) ? (u(), c("text", {
+        e.value.style.chart.dataLabel.show && ![null, void 0].includes(n(A).percentage) && [null, void 0].includes(n(A).series) ? (u(), v("text", {
           key: 2,
           x: o.value.width / 2,
           y: o.value.top - e.value.style.chart.dataLabel.fontSize / 2,
@@ -747,8 +763,8 @@ const Zt = ["id"], qt = ["xmlns", "viewBox"], Yt = ["width", "height"], Kt = ["i
           v: q.value,
           s: "%",
           r: e.value.style.chart.dataLabel.rounding
-        })), 9, Ml)) : p("", !0),
-        I.value ? (u(), c("g", {
+        })), 9, Al)) : p("", !0),
+        I.value ? (u(), v("g", {
           key: 3,
           role: "button",
           tabindex: "0",
@@ -757,10 +773,10 @@ const Zt = ["id"], qt = ["xmlns", "viewBox"], Yt = ["width", "height"], Kt = ["i
             I.value = !1, m.value = null;
           }),
           onKeydown: [
-            s[1] || (s[1] = Je(Qe((t) => {
+            s[1] || (s[1] = Qe(et((t) => {
               I.value = !1, m.value = null;
             }, ["prevent"]), ["enter"])),
-            s[2] || (s[2] = Je(Qe((t) => {
+            s[2] || (s[2] = Qe(et((t) => {
               I.value = !1, m.value = null;
             }, ["prevent"]), ["space"]))
           ],
@@ -780,7 +796,7 @@ const Zt = ["id"], qt = ["xmlns", "viewBox"], Yt = ["width", "height"], Kt = ["i
             height: 24,
             fill: "transparent",
             "pointer-events": "all"
-          }, null, 8, Fl),
+          }, null, 8, Ol),
           i("circle", {
             cx: Y.value,
             cy: o.value.top - 12,
@@ -790,24 +806,24 @@ const Zt = ["id"], qt = ["xmlns", "viewBox"], Yt = ["width", "height"], Kt = ["i
             "stroke-width": "2",
             "vector-effect": "non-scaling-stroke",
             opacity: te.value ? 0.5 : 0
-          }, null, 8, Tl),
+          }, null, 8, Bl),
           i("path", {
             d: `M${Y.value - 6},${o.value.top - 18} ${Y.value + 6},${o.value.top - 6}`,
             stroke: e.value.style.chart.color,
             "stroke-linecap": "round",
             "stroke-width": "2",
             "vector-effect": "non-scaling-stroke"
-          }, null, 8, Pl),
+          }, null, 8, Il),
           i("path", {
             d: `M${Y.value + 6},${o.value.top - 18} ${Y.value - 6},${o.value.top - 6}`,
             stroke: e.value.style.chart.color,
             "stroke-linecap": "round",
             "stroke-width": "2",
             "vector-effect": "non-scaling-stroke"
-          }, null, 8, Dl)
+          }, null, 8, zl)
         ], 32)) : p("", !0),
-        !e.value.style.shape || e.value.style.shape === "bar" ? (u(), c("g", Al, [
-          x.value ? p("", !0) : (u(), c("g", Sl, [
+        !e.value.style.shape || e.value.style.shape === "bar" ? (u(), v("g", jl, [
+          x.value ? p("", !0) : (u(), v("g", Nl, [
             i("path", {
               "stroke-dasharray": e.value.style.chart.box.strokeDasharray,
               d: L.value.right,
@@ -816,7 +832,7 @@ const Zt = ["id"], qt = ["xmlns", "viewBox"], Yt = ["width", "height"], Kt = ["i
               "stroke-linejoin": "round",
               "stroke-linecap": "round",
               fill: "none"
-            }, null, 8, Ol),
+            }, null, 8, Ll),
             i("path", {
               "stroke-dasharray": e.value.style.chart.box.strokeDasharray,
               d: L.value.left,
@@ -825,7 +841,7 @@ const Zt = ["id"], qt = ["xmlns", "viewBox"], Yt = ["width", "height"], Kt = ["i
               "stroke-linejoin": "round",
               "stroke-linecap": "round",
               fill: "none"
-            }, null, 8, Bl),
+            }, null, 8, El),
             i("path", {
               "stroke-dasharray": e.value.style.chart.box.strokeDasharray,
               d: L.value.side,
@@ -834,7 +850,7 @@ const Zt = ["id"], qt = ["xmlns", "viewBox"], Yt = ["width", "height"], Kt = ["i
               "stroke-linejoin": "round",
               "stroke-linecap": "round",
               fill: "none"
-            }, null, 8, Il),
+            }, null, 8, Wl),
             i("path", {
               "stroke-dasharray": e.value.style.chart.box.strokeDasharray,
               d: L.value.topSides,
@@ -843,9 +859,9 @@ const Zt = ["id"], qt = ["xmlns", "viewBox"], Yt = ["width", "height"], Kt = ["i
               "stroke-linejoin": "round",
               "stroke-linecap": "round",
               fill: "none"
-            }, null, 8, zl)
+            }, null, 8, Rl)
           ])),
-          x.value ? p("", !0) : (u(), c("g", jl, [
+          x.value ? p("", !0) : (u(), v("g", Gl, [
             i("path", {
               d: K.value.right,
               stroke: e.value.style.chart.bar.stroke,
@@ -853,7 +869,7 @@ const Zt = ["id"], qt = ["xmlns", "viewBox"], Yt = ["width", "height"], Kt = ["i
               "stroke-linejoin": "round",
               "stroke-linecap": "round",
               fill: `url(#gradient_right${F.value})`
-            }, null, 8, Nl),
+            }, null, 8, Vl),
             i("path", {
               d: K.value.left,
               stroke: e.value.style.chart.bar.stroke,
@@ -861,7 +877,7 @@ const Zt = ["id"], qt = ["xmlns", "viewBox"], Yt = ["width", "height"], Kt = ["i
               "stroke-linejoin": "round",
               "stroke-linecap": "round",
               fill: `url(#gradient_left${F.value})`
-            }, null, 8, Ll),
+            }, null, 8, Ul),
             i("path", {
               d: K.value.top,
               stroke: e.value.style.chart.bar.stroke,
@@ -869,10 +885,10 @@ const Zt = ["id"], qt = ["xmlns", "viewBox"], Yt = ["width", "height"], Kt = ["i
               "stroke-linejoin": "round",
               "stroke-linecap": "round",
               fill: `url(#gradient_top${F.value})`
-            }, null, 8, Wl)
+            }, null, 8, Hl)
           ])),
-          x.value ? (u(), c("g", El, [
-            (u(!0), c(C, null, M(w.value, (t, v) => (u(), c("g", {
+          x.value ? (u(), v("g", Xl, [
+            (u(!0), v(C, null, M(w.value, (t, c) => (u(), v("g", {
               style: z(`opacity:${m.value ? m.value === t.id ? 1 : 0.3 : 1}`),
               class: "vue-ui-3d-bar-stack"
             }, [
@@ -882,21 +898,21 @@ const Zt = ["id"], qt = ["xmlns", "viewBox"], Yt = ["width", "height"], Kt = ["i
                 onMouseenter: (l) => T(t),
                 onClick: (l) => T(t, !0),
                 onMouseout: (l) => U(t)
-              }, null, 40, Rl),
+              }, null, 40, Zl),
               i("path", {
                 d: t.fill.left,
                 fill: `url(#grad_left_${t.id})`,
                 onMouseenter: (l) => T(t),
                 onClick: (l) => T(t, !0),
                 onMouseout: (l) => U(t)
-              }, null, 40, Gl),
+              }, null, 40, ql),
               i("path", {
                 d: t.fill.top,
                 fill: `url(#grad_top_${t.id})`,
                 onMouseenter: (l) => T(t),
                 onClick: (l) => T(t, !0),
                 onMouseout: (l) => U(t)
-              }, null, 40, Vl),
+              }, null, 40, Yl),
               i("path", {
                 d: t.fill.liningTop,
                 stroke: "#FFFFFF",
@@ -906,16 +922,16 @@ const Zt = ["id"], qt = ["xmlns", "viewBox"], Yt = ["width", "height"], Kt = ["i
                 onMouseenter: (l) => T(t),
                 onClick: (l) => T(t, !0),
                 onMouseout: (l) => U(t)
-              }, null, 40, Ul),
+              }, null, 40, Kl),
               i("path", {
                 d: `M ${t.fill.apexTop.x},${t.fill.apexTop.y} ${t.fill.apexBottom.x},${t.fill.apexBottom.y}`,
                 stroke: "#FFFFFF",
                 "stroke-width": "0.5",
                 "stroke-linecap": "round"
-              }, null, 8, Hl)
+              }, null, 8, Jl)
             ], 4))), 256)),
-            (u(!0), c(C, null, M(w.value, (t, v) => (u(), c("g", null, [
-              v !== w.value.length - 1 ? (u(), c("path", {
+            (u(!0), v(C, null, M(w.value, (t, c) => (u(), v("g", null, [
+              c !== w.value.length - 1 ? (u(), v("path", {
                 key: 0,
                 d: t.fill.liningTopShade,
                 stroke: e.value.style.chart.bar.shadeColor,
@@ -923,9 +939,9 @@ const Zt = ["id"], qt = ["xmlns", "viewBox"], Yt = ["width", "height"], Kt = ["i
                 "stroke-linecap": "round",
                 fill: "none",
                 style: { "pointer-events": "none" }
-              }, null, 8, Xl)) : p("", !0)
+              }, null, 8, Ql)) : p("", !0)
             ]))), 256)),
-            (u(!0), c(C, null, M(w.value, (t, v) => (u(), c("g", {
+            (u(!0), v(C, null, M(w.value, (t, c) => (u(), v("g", {
               style: z(`opacity:${m.value ? m.value === t.id ? 1 : 0 : t.proportion * 100 > e.value.style.chart.legend.hideUnderPercentage ? 1 : 0}`),
               onClick: (l) => se("selectDatapoint", t)
             }, [
@@ -935,16 +951,16 @@ const Zt = ["id"], qt = ["xmlns", "viewBox"], Yt = ["width", "height"], Kt = ["i
                 "stroke-width": "0.5",
                 "stroke-linecap": "round",
                 d: `M${t.fill.sidePointer.x},${t.fill.sidePointer.y} ${t.fill.sidePointer.x2},${t.fill.sidePointer.y}`
-              }, null, 8, ql),
-              !t.fill.miniDonut || m.value ? (u(), c("circle", {
+              }, null, 8, to),
+              !t.fill.miniDonut || m.value ? (u(), v("circle", {
                 key: 0,
                 cx: t.fill.sidePointer.x2,
                 cy: t.fill.sidePointer.y,
                 r: 2,
                 fill: t.color,
                 stroke: e.value.style.chart.backgroundColor
-              }, null, 8, Yl)) : p("", !0),
-              n(Z) ? (u(), c("rect", {
+              }, null, 8, lo)) : p("", !0),
+              n(Z) ? (u(), v("rect", {
                 key: 1,
                 x: t.fill.sidePointer.xText,
                 y: t.fill.sidePointer.y - e.value.style.chart.legend.fontSize / 2,
@@ -952,8 +968,8 @@ const Zt = ["id"], qt = ["xmlns", "viewBox"], Yt = ["width", "height"], Kt = ["i
                 height: e.value.style.chart.legend.fontSize,
                 fill: "#6A6A6A80",
                 rx: "3"
-              }, null, 8, Kl)) : p("", !0),
-              n(Z) ? p("", !0) : (u(), c("foreignObject", {
+              }, null, 8, oo)) : p("", !0),
+              n(Z) ? p("", !0) : (u(), v("foreignObject", {
                 key: 2,
                 x: t.fill.sidePointer.xText,
                 y: t.fill.sidePointer.y - e.value.style.chart.legend.fontSize,
@@ -961,7 +977,7 @@ const Zt = ["id"], qt = ["xmlns", "viewBox"], Yt = ["width", "height"], Kt = ["i
                 height: e.value.style.chart.legend.fontSize * 2,
                 style: { overflow: "visible", position: "relative" }
               }, [
-                e.value.style.chart.legend.showDefault ? (u(), c("div", {
+                e.value.style.chart.legend.showDefault ? (u(), v("div", {
                   key: 0,
                   style: z(`height: 100%; width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; align-items:center;justify-content: flex-start; font-size:${e.value.style.chart.legend.fontSize}px; text-align:left; line-height: ${e.value.style.chart.legend.fontSize}px; color:${e.value.style.chart.legend.color}`)
                 }, j(n(fe)(
@@ -973,32 +989,32 @@ const Zt = ["id"], qt = ["xmlns", "viewBox"], Yt = ["width", "height"], Kt = ["i
                     s: e.value.style.chart.legend.suffix,
                     r: e.value.style.chart.legend.roundingValue
                   })})`,
-                  { datapoint: t, seriesIndex: v, type: "barDatapoint" }
+                  { datapoint: t, seriesIndex: c, type: "barDatapoint" }
                 )), 5)) : p("", !0),
-                P(a.$slots, "legend", we({ ref_for: !0 }, { datapoint: t, config: e.value, dataset: w.value }), void 0, !0)
-              ], 8, Jl)),
-              t.fill.donut && m.value === t.id ? (u(), c("g", Ql, [
-                (u(!0), c(C, null, M(t.fill.donut, (l, d) => (u(), c("g", null, [
-                  J(l, t.fill.donut, !0) > 6 ? (u(), c("path", {
+                D(a.$slots, "legend", Ce({ ref_for: !0 }, { datapoint: t, config: e.value, dataset: w.value }), void 0, !0)
+              ], 8, so)),
+              t.fill.donut && m.value === t.id ? (u(), v("g", ao, [
+                (u(!0), v(C, null, M(t.fill.donut, (l, d) => (u(), v("g", null, [
+                  J(l, t.fill.donut, !0) > 6 ? (u(), v("path", {
                     key: 0,
-                    d: n(st)(l, { x: l.cx, y: l.cy }, 0, 8, !1, !0, 10),
+                    d: n(at)(l, { x: l.cx, y: l.cy }, 0, 8, !1, !0, 10),
                     stroke: l.color,
                     class: "vue-ui-donut-arc-path",
                     "stroke-width": "0.5",
                     "stroke-linecap": "round",
                     "stroke-linejoin": "round",
                     fill: "none"
-                  }, null, 8, eo)) : p("", !0)
+                  }, null, 8, no)) : p("", !0)
                 ]))), 256)),
-                (u(!0), c(C, null, M(t.fill.donut, (l, d) => (u(), c("path", {
+                (u(!0), v(C, null, M(t.fill.donut, (l, d) => (u(), v("path", {
                   class: "vue-ui-donut-arc-path",
                   d: l.arcSlice,
                   fill: `${l.color}`,
                   stroke: e.value.style.chart.backgroundColor,
                   "stroke-width": 1
-                }, null, 8, to))), 256)),
-                (u(!0), c(C, null, M(t.fill.donut, (l, d) => (u(), c("g", null, [
-                  J(l, t.fill.donut, !0) > 6 ? (u(), c("g", lo, [
+                }, null, 8, ro))), 256)),
+                (u(!0), v(C, null, M(t.fill.donut, (l, d) => (u(), v("g", null, [
+                  J(l, t.fill.donut, !0) > 6 ? (u(), v("g", uo, [
                     i("text", {
                       "text-anchor": n(G)(l, !0, 0).anchor,
                       x: n(G)(l, !0, 2).x,
@@ -1015,31 +1031,31 @@ const Zt = ["id"], qt = ["xmlns", "viewBox"], Yt = ["width", "height"], Kt = ["i
                         r: e.value.style.chart.legend.roundingValue
                       })})`,
                       { datapoint: l, seriesIndex: d, type: "donutDatapoint" }
-                    )), 9, oo),
+                    )), 9, io),
                     i("text", {
                       "text-anchor": n(G)(l).anchor,
                       x: n(G)(l, !0, 2).x,
                       y: n(pe)(l, 12, 12) + e.value.style.chart.legend.fontSize / 1.5,
                       fill: e.value.style.chart.legend.color,
                       "font-size": e.value.style.chart.legend.fontSize / 1.5
-                    }, j(l.name), 9, so)
+                    }, j(l.name), 9, co)
                   ])) : p("", !0)
                 ]))), 256))
               ])) : p("", !0),
-              t.fill.miniDonut && !m.value ? (u(), c("g", ao, [
-                (u(!0), c(C, null, M(t.fill.miniDonut, (l, d) => (u(), c("path", {
+              t.fill.miniDonut && !m.value ? (u(), v("g", vo, [
+                (u(!0), v(C, null, M(t.fill.miniDonut, (l, d) => (u(), v("path", {
                   class: "vue-ui-donut-arc-path",
                   d: l.arcSlice,
                   fill: `${l.color}`,
                   stroke: e.value.style.chart.backgroundColor,
                   "stroke-width": 0.5
-                }, null, 8, no))), 256))
+                }, null, 8, ho))), 256))
               ])) : p("", !0)
-            ], 12, Zl))), 256))
+            ], 12, eo))), 256))
           ])) : p("", !0)
         ])) : p("", !0),
-        e.value.style.shape === "tube" ? (u(), c("g", ro, [
-          x.value ? p("", !0) : (u(), c("g", uo, [
+        e.value.style.shape === "tube" ? (u(), v("g", fo, [
+          x.value ? p("", !0) : (u(), v("g", po, [
             i("path", {
               "stroke-dasharray": e.value.style.chart.box.strokeDasharray,
               d: L.value.tubeTop,
@@ -1048,7 +1064,7 @@ const Zt = ["id"], qt = ["xmlns", "viewBox"], Yt = ["width", "height"], Kt = ["i
               "stroke-linejoin": "round",
               "stroke-linecap": "round",
               fill: "none"
-            }, null, 8, io),
+            }, null, 8, go),
             i("path", {
               "stroke-dasharray": e.value.style.chart.box.strokeDasharray,
               d: L.value.tubeLeft,
@@ -1057,7 +1073,7 @@ const Zt = ["id"], qt = ["xmlns", "viewBox"], Yt = ["width", "height"], Kt = ["i
               "stroke-linejoin": "round",
               "stroke-linecap": "round",
               fill: "none"
-            }, null, 8, co),
+            }, null, 8, yo),
             i("path", {
               "stroke-dasharray": e.value.style.chart.box.strokeDasharray,
               d: L.value.tubeRight,
@@ -1066,7 +1082,7 @@ const Zt = ["id"], qt = ["xmlns", "viewBox"], Yt = ["width", "height"], Kt = ["i
               "stroke-linejoin": "round",
               "stroke-linecap": "round",
               fill: "none"
-            }, null, 8, vo),
+            }, null, 8, ko),
             i("path", {
               "stroke-dasharray": e.value.style.chart.box.strokeDasharray,
               d: L.value.tubeBottom,
@@ -1075,7 +1091,7 @@ const Zt = ["id"], qt = ["xmlns", "viewBox"], Yt = ["width", "height"], Kt = ["i
               "stroke-linejoin": "round",
               "stroke-linecap": "round",
               fill: "none"
-            }, null, 8, ho),
+            }, null, 8, $o),
             i("path", {
               d: K.value.tubeTop,
               stroke: e.value.style.chart.bar.stroke,
@@ -1083,7 +1099,7 @@ const Zt = ["id"], qt = ["xmlns", "viewBox"], Yt = ["width", "height"], Kt = ["i
               "stroke-linejoin": "round",
               "stroke-linecap": "round",
               fill: `url(#gradient_tube_top${F.value})`
-            }, null, 8, fo),
+            }, null, 8, _o),
             i("path", {
               d: K.value.tubeBody,
               stroke: e.value.style.chart.bar.stroke,
@@ -1091,7 +1107,7 @@ const Zt = ["id"], qt = ["xmlns", "viewBox"], Yt = ["width", "height"], Kt = ["i
               "stroke-linejoin": "round",
               "stroke-linecap": "round",
               fill: `url(#gradient_tube_body${F.value})`
-            }, null, 8, po),
+            }, null, 8, mo),
             i("path", {
               d: K.value.tubeTop,
               stroke: "#FFFFFF",
@@ -1099,10 +1115,10 @@ const Zt = ["id"], qt = ["xmlns", "viewBox"], Yt = ["width", "height"], Kt = ["i
               "stroke-linejoin": "round",
               "stroke-linecap": "round",
               fill: "none"
-            }, null, 8, yo)
+            }, null, 8, bo)
           ])),
-          x.value ? (u(), c("g", ko, [
-            (u(!0), c(C, null, M(w.value, (t, v) => (u(), c("g", {
+          x.value ? (u(), v("g", xo, [
+            (u(!0), v(C, null, M(w.value, (t, c) => (u(), v("g", {
               style: z(`opacity:${m.value ? m.value === t.id ? 1 : 0.3 : 1}`),
               class: "vue-ui-3d-bar-stack",
               onClick: (l) => se("selectDatapoint", t)
@@ -1116,12 +1132,12 @@ const Zt = ["id"], qt = ["xmlns", "viewBox"], Yt = ["width", "height"], Kt = ["i
                   i("stop", {
                     offset: "0%",
                     "stop-color": n($)(n(R)(t.color, 0.5), 80)
-                  }, null, 8, _o),
+                  }, null, 8, Mo),
                   i("stop", {
                     offset: "100%",
                     "stop-color": n($)(n(X)(t.color, 0.1), 80)
-                  }, null, 8, mo)
-                ], 8, $o),
+                  }, null, 8, Fo)
+                ], 8, Co),
                 i("linearGradient", {
                   id: `gradient_tube_body_${t.id}`,
                   x1: "0%",
@@ -1132,24 +1148,24 @@ const Zt = ["id"], qt = ["xmlns", "viewBox"], Yt = ["width", "height"], Kt = ["i
                   i("stop", {
                     offset: "0%",
                     "stop-color": `${t.color}`
-                  }, null, 8, xo),
+                  }, null, 8, Po),
                   i("stop", {
                     offset: "10%",
                     "stop-color": n($)(n(X)(t.color, 0.7), 100)
-                  }, null, 8, wo),
+                  }, null, 8, Do),
                   i("stop", {
                     offset: "25%",
                     "stop-color": n($)(n(X)(t.color, 0.5), 100)
-                  }, null, 8, Co),
+                  }, null, 8, So),
                   i("stop", {
                     offset: "75%",
                     "stop-color": n($)(t.color, 80)
-                  }, null, 8, Mo),
+                  }, null, 8, Ao),
                   i("stop", {
                     offset: "100%",
                     "stop-color": n($)(n(R)(t.color, 0.7), 100)
-                  }, null, 8, Fo)
-                ], 8, bo)
+                  }, null, 8, Oo)
+                ], 8, To)
               ]),
               i("path", {
                 onMouseenter: (l) => T(t),
@@ -1161,8 +1177,8 @@ const Zt = ["id"], qt = ["xmlns", "viewBox"], Yt = ["width", "height"], Kt = ["i
                 "stroke-linejoin": "round",
                 "stroke-linecap": "round",
                 fill: `url(#gradient_tube_body_${t.id})`
-              }, null, 40, To),
-              v > 0 ? (u(), c("path", {
+              }, null, 40, Bo),
+              c > 0 ? (u(), v("path", {
                 key: 0,
                 onMouseenter: (l) => T(t),
                 onClick: (l) => T(t, !0),
@@ -1173,7 +1189,7 @@ const Zt = ["id"], qt = ["xmlns", "viewBox"], Yt = ["width", "height"], Kt = ["i
                 "stroke-linejoin": "round",
                 "stroke-linecap": "round",
                 fill: "none"
-              }, null, 40, Po)) : p("", !0),
+              }, null, 40, Io)) : p("", !0),
               i("path", {
                 onMouseenter: (l) => T(t),
                 onClick: (l) => T(t, !0),
@@ -1184,9 +1200,9 @@ const Zt = ["id"], qt = ["xmlns", "viewBox"], Yt = ["width", "height"], Kt = ["i
                 "stroke-linejoin": "round",
                 "stroke-linecap": "round",
                 fill: `url(#gradient_tube_top_${t.id})`
-              }, null, 40, Do)
-            ], 12, go))), 256)),
-            (u(!0), c(C, null, M(w.value, (t, v) => (u(), c("g", {
+              }, null, 40, zo)
+            ], 12, wo))), 256)),
+            (u(!0), v(C, null, M(w.value, (t, c) => (u(), v("g", {
               style: z(`opacity:${m.value ? m.value === t.id ? 1 : 0 : t.proportion * 100 > e.value.style.chart.legend.hideUnderPercentage ? 1 : 0}`),
               onClick: (l) => se("selectDatapoint", t)
             }, [
@@ -1196,16 +1212,16 @@ const Zt = ["id"], qt = ["xmlns", "viewBox"], Yt = ["width", "height"], Kt = ["i
                 "stroke-width": "0.5",
                 "stroke-linecap": "round",
                 d: `M${t.fill.sidePointer.x},${t.fill.sidePointer.y} ${t.fill.sidePointer.x2},${t.fill.sidePointer.y}`
-              }, null, 8, So),
-              !t.fill.miniDonut || m.value ? (u(), c("circle", {
+              }, null, 8, No),
+              !t.fill.miniDonut || m.value ? (u(), v("circle", {
                 key: 0,
                 cx: t.fill.sidePointer.x2,
                 cy: t.fill.sidePointer.y,
                 r: 2,
                 fill: t.color,
                 stroke: e.value.style.chart.backgroundColor
-              }, null, 8, Oo)) : p("", !0),
-              n(Z) ? (u(), c("rect", {
+              }, null, 8, Lo)) : p("", !0),
+              n(Z) ? (u(), v("rect", {
                 key: 1,
                 x: t.fill.sidePointer.xText,
                 y: t.fill.sidePointer.y - e.value.style.chart.legend.fontSize / 2,
@@ -1213,8 +1229,8 @@ const Zt = ["id"], qt = ["xmlns", "viewBox"], Yt = ["width", "height"], Kt = ["i
                 height: e.value.style.chart.legend.fontSize,
                 fill: "#6A6A6A80",
                 rx: "3"
-              }, null, 8, Bo)) : p("", !0),
-              n(Z) ? p("", !0) : (u(), c("foreignObject", {
+              }, null, 8, Eo)) : p("", !0),
+              n(Z) ? p("", !0) : (u(), v("foreignObject", {
                 key: 2,
                 x: t.fill.sidePointer.xText,
                 y: t.fill.sidePointer.y - e.value.style.chart.legend.fontSize,
@@ -1222,7 +1238,7 @@ const Zt = ["id"], qt = ["xmlns", "viewBox"], Yt = ["width", "height"], Kt = ["i
                 height: e.value.style.chart.legend.fontSize * 2,
                 style: { overflow: "visible", position: "relative" }
               }, [
-                e.value.style.chart.legend.showDefault ? (u(), c("div", {
+                e.value.style.chart.legend.showDefault ? (u(), v("div", {
                   key: 0,
                   style: z(`height: 100%; width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; align-items:center;justify-content: flex-start; font-size:${e.value.style.chart.legend.fontSize}px; text-align:left; line-height: ${e.value.style.chart.legend.fontSize}px; color:${e.value.style.chart.legend.color}`)
                 }, j(n(fe)(
@@ -1234,32 +1250,32 @@ const Zt = ["id"], qt = ["xmlns", "viewBox"], Yt = ["width", "height"], Kt = ["i
                     s: e.value.style.chart.legend.suffix,
                     r: e.value.style.chart.legend.roundingValue
                   })})`,
-                  { datapoint: t, seriesIndex: v, type: "barDatapoint" }
+                  { datapoint: t, seriesIndex: c, type: "barDatapoint" }
                 )), 5)) : p("", !0),
-                P(a.$slots, "legend", we({ ref_for: !0 }, { datapoint: t, config: e.value, dataset: w.value }), void 0, !0)
-              ], 8, Io)),
-              t.fill.donut && m.value === t.id ? (u(), c("g", zo, [
-                (u(!0), c(C, null, M(t.fill.donut, (l, d) => (u(), c("g", null, [
-                  J(l, t.fill.donut, !0) > 6 ? (u(), c("path", {
+                D(a.$slots, "legend", Ce({ ref_for: !0 }, { datapoint: t, config: e.value, dataset: w.value }), void 0, !0)
+              ], 8, Wo)),
+              t.fill.donut && m.value === t.id ? (u(), v("g", Ro, [
+                (u(!0), v(C, null, M(t.fill.donut, (l, d) => (u(), v("g", null, [
+                  J(l, t.fill.donut, !0) > 6 ? (u(), v("path", {
                     key: 0,
-                    d: n(st)(l, { x: l.cx, y: l.cy }, 0, 8, !1, !0, 10),
+                    d: n(at)(l, { x: l.cx, y: l.cy }, 0, 8, !1, !0, 10),
                     stroke: l.color,
                     class: "vue-ui-donut-arc-path",
                     "stroke-width": "0.5",
                     "stroke-linecap": "round",
                     "stroke-linejoin": "round",
                     fill: "none"
-                  }, null, 8, jo)) : p("", !0)
+                  }, null, 8, Go)) : p("", !0)
                 ]))), 256)),
-                (u(!0), c(C, null, M(t.fill.donut, (l, d) => (u(), c("path", {
+                (u(!0), v(C, null, M(t.fill.donut, (l, d) => (u(), v("path", {
                   class: "vue-ui-donut-arc-path",
                   d: l.arcSlice,
                   fill: `${l.color}`,
                   stroke: e.value.style.chart.backgroundColor,
                   "stroke-width": 1
-                }, null, 8, No))), 256)),
-                (u(!0), c(C, null, M(t.fill.donut, (l, d) => (u(), c("g", null, [
-                  J(l, t.fill.donut, !0) > 6 ? (u(), c("g", Lo, [
+                }, null, 8, Vo))), 256)),
+                (u(!0), v(C, null, M(t.fill.donut, (l, d) => (u(), v("g", null, [
+                  J(l, t.fill.donut, !0) > 6 ? (u(), v("g", Uo, [
                     i("text", {
                       "text-anchor": n(G)(l, !0, 0).anchor,
                       x: n(G)(l, !0, 2).x,
@@ -1276,50 +1292,50 @@ const Zt = ["id"], qt = ["xmlns", "viewBox"], Yt = ["width", "height"], Kt = ["i
                         r: e.value.style.chart.legend.roundingValue
                       })})`,
                       { datapoint: l, seriesIndex: d, type: "donutDatapoint" }
-                    )), 9, Wo),
+                    )), 9, Ho),
                     i("text", {
                       "text-anchor": n(G)(l).anchor,
                       x: n(G)(l, !0, 2).x,
                       y: n(pe)(l, 12, 12) + e.value.style.chart.legend.fontSize / 1.5,
                       fill: e.value.style.chart.legend.color,
                       "font-size": e.value.style.chart.legend.fontSize / 1.5
-                    }, j(l.name), 9, Eo)
+                    }, j(l.name), 9, Xo)
                   ])) : p("", !0)
                 ]))), 256))
               ])) : p("", !0),
-              t.fill.miniDonut && !m.value ? (u(), c("g", Ro, [
-                (u(!0), c(C, null, M(t.fill.miniDonut, (l, d) => (u(), c("path", {
+              t.fill.miniDonut && !m.value ? (u(), v("g", Zo, [
+                (u(!0), v(C, null, M(t.fill.miniDonut, (l, d) => (u(), v("path", {
                   class: "vue-ui-donut-arc-path",
                   d: l.arcSlice,
                   fill: `${l.color}`,
                   stroke: e.value.style.chart.backgroundColor,
                   "stroke-width": 0.5
-                }, null, 8, Go))), 256))
+                }, null, 8, qo))), 256))
               ])) : p("", !0)
-            ], 12, Ao))), 256))
+            ], 12, jo))), 256))
           ])) : p("", !0)
         ])) : p("", !0),
-        P(a.$slots, "svg", { svg: o.value }, void 0, !0)
-      ], 14, qt)),
-      a.$slots.watermark ? (u(), c("div", Vo, [
-        P(a.$slots, "watermark", de(ce({ isPrinting: n(Be) || n(Ie) })), void 0, !0)
+        D(a.$slots, "svg", { svg: o.value }, void 0, !0)
+      ], 14, tl)),
+      a.$slots.watermark ? (u(), v("div", Yo, [
+        D(a.$slots, "watermark", de(ce({ isPrinting: n(Be) || n(Ie) })), void 0, !0)
       ])) : p("", !0),
-      a.$slots.source ? (u(), c("div", {
+      a.$slots.source ? (u(), v("div", {
         key: 4,
         ref_key: "source",
-        ref: De,
+        ref: Se,
         dir: "auto"
       }, [
-        P(a.$slots, "source", {}, void 0, !0)
+        D(a.$slots, "source", {}, void 0, !0)
       ], 512)) : p("", !0),
-      Me.value && x.value && e.value.userOptions.buttons.table ? (u(), Q(Mt(oe.value.component), we({ key: 5 }, oe.value.props, {
+      Fe.value && x.value && e.value.userOptions.buttons.table ? (u(), Q(St(oe.value.component), Ce({ key: 5 }, oe.value.props, {
         ref_key: "tableUnit",
         ref: le,
         onClose: Ve
-      }), Ye({
-        content: A(() => [
-          (u(), Q(n(ct), {
-            key: `table_${Te.value}`,
+      }), Ke({
+        content: S(() => [
+          (u(), Q(n(vt), {
+            key: `table_${Pe.value}`,
             colNames: ue.value.colNames,
             head: ue.value.head,
             body: ue.value.body,
@@ -1328,14 +1344,14 @@ const Zt = ["id"], qt = ["xmlns", "viewBox"], Yt = ["width", "height"], Kt = ["i
             withCloseButton: !e.value.table.useDialog,
             onClose: Ve
           }, {
-            th: A(({ th: t }) => [
+            th: S(({ th: t }) => [
               i("div", {
                 innerHTML: t,
                 style: { display: "flex", "align-items": "center" }
-              }, null, 8, Uo)
+              }, null, 8, Ko)
             ]),
-            td: A(({ td: t }) => [
-              et(j(t.name || t), 1)
+            td: S(({ td: t }) => [
+              tt(j(t.name || t), 1)
             ]),
             _: 1
           }, 8, ["colNames", "head", "body", "config", "title", "withCloseButton"]))
@@ -1344,20 +1360,20 @@ const Zt = ["id"], qt = ["xmlns", "viewBox"], Yt = ["width", "height"], Kt = ["i
       }, [
         e.value.table.useDialog ? {
           name: "title",
-          fn: A(() => [
-            et(j(oe.value.title), 1)
+          fn: S(() => [
+            tt(j(oe.value.title), 1)
           ]),
           key: "0"
         } : void 0,
         e.value.table.useDialog ? {
           name: "actions",
-          fn: A(() => [
+          fn: S(() => [
             i("button", {
               tabindex: "0",
               class: "vue-ui-user-options-button",
-              onClick: s[7] || (s[7] = (t) => _e(e.value.userOptions.callbacks.csv))
+              onClick: s[7] || (s[7] = (t) => me(e.value.userOptions.callbacks.csv))
             }, [
-              Ke(n(it), {
+              Je(n(dt), {
                 name: "excel",
                 stroke: oe.value.props.color
               }, null, 8, ["stroke"])
@@ -1366,10 +1382,10 @@ const Zt = ["id"], qt = ["xmlns", "viewBox"], Yt = ["width", "height"], Kt = ["i
           key: "1"
         } : void 0
       ]), 1040)) : p("", !0),
-      n(Z) ? (u(), Q(Wt, { key: 6 })) : p("", !0)
-    ], 44, Zt));
+      n(Z) ? (u(), Q(Ut, { key: 6 })) : p("", !0)
+    ], 44, el));
   }
-}, ns = /* @__PURE__ */ Xt(Ho, [["__scopeId", "data-v-970d7a95"]]);
+}, hs = /* @__PURE__ */ Qt(Jo, [["__scopeId", "data-v-a0759208"]]);
 export {
-  ns as default
+  hs as default
 };