vue-data-ui 2.3.74 → 2.3.76

package/dist/{vue-ui-3d-bar-CnoPOJHm.js → vue-ui-3d-bar-CcTMIHiB.js}

@@ -1,31 +1,31 @@
-import { computed as P, ref as B, onMounted as Be, openBlock as n, createElementBlock as i, normalizeClass as ge, normalizeStyle as j, createVNode as _e, createCommentVNode as k, createBlock as ae, unref as h, createSlots as Ie, withCtx as I, renderSlot as S, normalizeProps as R, guardReactiveProps as Y, createElementVNode as r, Fragment as $, renderList as g, toDisplayString as M, createTextVNode as Le, nextTick as Oe, pushScopeId as We, popScopeId as Ge } from "vue";
-import { u as Ve, c as me, t as Ae, a as Ue, p as J, b as Ee, d as T, o as He, e as K, g as ne, l as A, m as xe, f as D, X as Ze, h as Q, i as ee, j as be, k as L, n as te, q as qe, r as Xe } from "./index-C8SH0f2u.js";
-import { _ as Re } from "./Title-DZjnxQdN.js";
-import { u as Ye, U as Je } from "./usePrinter-Dj50NAxo.js";
-import Ke from "./vue-ui-skeleton-B4eWLjH3.js";
-import { D as Qe } from "./DataTable-CKdV-L0e.js";
-import et from "./vue-ui-accordion-YHleIgkV.js";
-import { u as we } from "./useNestedProp-lS_T5lM3.js";
-import { _ as tt } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const le = (U) => (We("data-v-06e93dd9"), U = U(), Ge(), U), lt = ["id"], ot = ["xmlns", "viewBox"], st = ["id"], at = ["stop-color"], nt = ["stop-color"], rt = ["id"], ut = ["stop-color"], it = ["stop-color"], dt = ["id"], ct = ["stop-color"], ht = ["stop-color"], vt = ["id"], ft = ["stop-color"], pt = ["stop-color"], yt = ["stop-color"], kt = { key: 0 }, $t = ["id"], gt = ["stop-color"], _t = ["stop-color"], mt = ["id"], xt = ["stop-color"], bt = ["stop-color"], wt = ["id"], Ct = ["stop-color"], Ft = ["stop-color"], Mt = ["id"], Pt = /* @__PURE__ */ le(() => /* @__PURE__ */ r("stop", {
+import { computed as P, ref as D, watch as Oe, onMounted as We, openBlock as r, createElementBlock as i, normalizeClass as be, normalizeStyle as j, createBlock as H, createCommentVNode as y, unref as h, createSlots as Ge, withCtx as I, renderSlot as T, normalizeProps as Y, guardReactiveProps as J, createElementVNode as u, Fragment as g, renderList as _, toDisplayString as M, createTextVNode as Ve, nextTick as Ae, pushScopeId as Ue, popScopeId as Ee } from "vue";
+import { u as He, c as we, t as Ze, a as qe, p as K, b as Xe, d as z, o as Re, e as Q, g as ne, l as A, m as Ce, f as S, X as Ye, h as ee, i as te, j as Fe, k as L, n as le, q as Je, r as Ke } from "./index-CaV1s-yZ.js";
+import { _ as Qe } from "./Title-gUz6GDA3.js";
+import { u as et, U as tt } from "./usePrinter-rvJyT65A.js";
+import lt from "./vue-ui-skeleton-CvFX_ExX.js";
+import { D as ot } from "./DataTable-e2fnfjXV.js";
+import st from "./vue-ui-accordion-CpzGQ63y.js";
+import { u as Me } from "./useNestedProp-tWCzZrLx.js";
+import { _ as at } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const oe = (U) => (Ue("data-v-11451b65"), U = U(), Ee(), U), nt = ["id"], rt = ["xmlns", "viewBox"], ut = ["id"], it = ["stop-color"], dt = ["stop-color"], ct = ["id"], ht = ["stop-color"], vt = ["stop-color"], ft = ["id"], pt = ["stop-color"], yt = ["stop-color"], kt = ["id"], $t = ["stop-color"], gt = ["stop-color"], _t = ["stop-color"], mt = { key: 0 }, xt = ["id"], bt = ["stop-color"], wt = ["stop-color"], Ct = ["id"], Ft = ["stop-color"], Mt = ["stop-color"], Pt = ["id"], Dt = ["stop-color"], St = ["stop-color"], jt = ["id"], Tt = /* @__PURE__ */ oe(() => /* @__PURE__ */ u("stop", {
   offset: "0%",
   "stop-color": "#FFFFFF"
-}, null, -1)), Dt = /* @__PURE__ */ le(() => /* @__PURE__ */ r("stop", {
+}, null, -1)), zt = /* @__PURE__ */ oe(() => /* @__PURE__ */ u("stop", {
   offset: "100%",
   "stop-color": "#FFFFFF33"
-}, null, -1)), jt = [
-  Pt,
-  Dt
-], St = ["x", "y", "font-size", "font-weight", "fill"], Tt = ["x", "y"], zt = ["d", "stroke"], Nt = ["d", "stroke"], Bt = { key: 3 }, It = { key: 0 }, Lt = ["stroke-dasharray", "d", "stroke", "stroke-width"], Ot = ["stroke-dasharray", "d", "stroke", "stroke-width"], Wt = ["stroke-dasharray", "d", "stroke", "stroke-width"], Gt = ["stroke-dasharray", "d", "stroke", "stroke-width"], Vt = { key: 1 }, At = ["d", "stroke", "stroke-width", "fill"], Ut = ["d", "stroke", "stroke-width", "fill"], Et = ["d", "stroke", "stroke-width", "fill"], Ht = { key: 2 }, Zt = ["d", "fill", "onMouseenter", "onClick"], qt = ["d", "fill", "onMouseenter", "onClick"], Xt = ["d", "fill", "onMouseenter", "onClick"], Rt = ["d", "onMouseenter", "onClick"], Yt = ["d"], Jt = ["d", "stroke"], Kt = ["onClick"], Qt = ["stroke", "d"], el = ["cx", "cy", "fill", "stroke"], tl = ["x", "y", "width", "height"], ll = { key: 1 }, ol = ["d", "stroke"], sl = ["d", "fill", "stroke"], al = ["id"], nl = ["stop-color"], rl = /* @__PURE__ */ le(() => /* @__PURE__ */ r("stop", {
+}, null, -1)), Nt = [
+  Tt,
+  zt
+], Bt = ["x", "y", "font-size", "font-weight", "fill"], It = ["x", "y"], Lt = ["d", "stroke"], Ot = ["d", "stroke"], Wt = { key: 3 }, Gt = { key: 0 }, Vt = ["stroke-dasharray", "d", "stroke", "stroke-width"], At = ["stroke-dasharray", "d", "stroke", "stroke-width"], Ut = ["stroke-dasharray", "d", "stroke", "stroke-width"], Et = ["stroke-dasharray", "d", "stroke", "stroke-width"], Ht = { key: 1 }, Zt = ["d", "stroke", "stroke-width", "fill"], qt = ["d", "stroke", "stroke-width", "fill"], Xt = ["d", "stroke", "stroke-width", "fill"], Rt = { key: 2 }, Yt = ["d", "fill", "onMouseenter", "onClick"], Jt = ["d", "fill", "onMouseenter", "onClick"], Kt = ["d", "fill", "onMouseenter", "onClick"], Qt = ["d", "onMouseenter", "onClick"], el = ["d"], tl = ["d", "stroke"], ll = ["onClick"], ol = ["stroke", "d"], sl = ["cx", "cy", "fill", "stroke"], al = ["x", "y", "width", "height"], nl = { key: 1 }, rl = ["d", "stroke"], ul = ["d", "fill", "stroke"], il = ["id"], dl = ["stop-color"], cl = /* @__PURE__ */ oe(() => /* @__PURE__ */ u("stop", {
   offset: "77%",
   "stop-color": "#FFFFFF20"
-}, null, -1)), ul = ["stop-color"], il = ["cx", "cy", "fill"], dl = ["cx", "cy", "fill"], cl = { key: 0 }, hl = ["text-anchor", "x", "y", "fill", "font-size"], vl = ["text-anchor", "x", "y", "fill", "font-size"], fl = { key: 2 }, pl = ["d", "fill", "stroke"], yl = { key: 4 }, kl = { key: 0 }, $l = ["stroke-dasharray", "d", "stroke", "stroke-width"], gl = ["stroke-dasharray", "d", "stroke", "stroke-width"], _l = ["stroke-dasharray", "d", "stroke", "stroke-width"], ml = ["stroke-dasharray", "d", "stroke", "stroke-width"], xl = ["d", "stroke", "stroke-width", "fill"], bl = ["d", "stroke", "stroke-width", "fill"], wl = { key: 1 }, Cl = ["onClick"], Fl = ["id"], Ml = ["stop-color"], Pl = ["stop-color"], Dl = ["id"], jl = ["stop-color"], Sl = ["stop-color"], Tl = ["stop-color"], zl = ["stop-color"], Nl = ["stop-color"], Bl = ["onMouseenter", "onClick", "d", "fill"], Il = ["onMouseenter", "onClick", "d"], Ll = ["onMouseenter", "onClick", "d", "fill"], Ol = ["onClick"], Wl = ["stroke", "d"], Gl = ["cx", "cy", "fill", "stroke"], Vl = ["x", "y", "width", "height"], Al = { key: 1 }, Ul = ["d", "stroke"], El = ["d", "fill", "stroke"], Hl = ["id"], Zl = ["stop-color"], ql = /* @__PURE__ */ le(() => /* @__PURE__ */ r("stop", {
+}, null, -1)), hl = ["stop-color"], vl = ["cx", "cy", "fill"], fl = ["cx", "cy", "fill"], pl = { key: 0 }, yl = ["text-anchor", "x", "y", "fill", "font-size"], kl = ["text-anchor", "x", "y", "fill", "font-size"], $l = { key: 2 }, gl = ["d", "fill", "stroke"], _l = { key: 4 }, ml = { key: 0 }, xl = ["stroke-dasharray", "d", "stroke", "stroke-width"], bl = ["stroke-dasharray", "d", "stroke", "stroke-width"], wl = ["stroke-dasharray", "d", "stroke", "stroke-width"], Cl = ["stroke-dasharray", "d", "stroke", "stroke-width"], Fl = ["d", "stroke", "stroke-width", "fill"], Ml = ["d", "stroke", "stroke-width", "fill"], Pl = { key: 1 }, Dl = ["onClick"], Sl = ["id"], jl = ["stop-color"], Tl = ["stop-color"], zl = ["id"], Nl = ["stop-color"], Bl = ["stop-color"], Il = ["stop-color"], Ll = ["stop-color"], Ol = ["stop-color"], Wl = ["onMouseenter", "onClick", "d", "fill"], Gl = ["onMouseenter", "onClick", "d"], Vl = ["onMouseenter", "onClick", "d", "fill"], Al = ["onClick"], Ul = ["stroke", "d"], El = ["cx", "cy", "fill", "stroke"], Hl = ["x", "y", "width", "height"], Zl = { key: 1 }, ql = ["d", "stroke"], Xl = ["d", "fill", "stroke"], Rl = ["id"], Yl = ["stop-color"], Jl = /* @__PURE__ */ oe(() => /* @__PURE__ */ u("stop", {
   offset: "77%",
   "stop-color": "#FFFFFF20"
-}, null, -1)), Xl = ["stop-color"], Rl = ["cx", "cy", "fill"], Yl = ["cx", "cy", "fill"], Jl = { key: 0 }, Kl = ["text-anchor", "x", "y", "fill", "font-size"], Ql = ["text-anchor", "x", "y", "fill", "font-size"], eo = { key: 2 }, to = ["d", "fill", "stroke"], lo = {
+}, null, -1)), Kl = ["stop-color"], Ql = ["cx", "cy", "fill"], eo = ["cx", "cy", "fill"], to = { key: 0 }, lo = ["text-anchor", "x", "y", "fill", "font-size"], oo = ["text-anchor", "x", "y", "fill", "font-size"], so = { key: 2 }, ao = ["d", "fill", "stroke"], no = {
   key: 3,
   class: "vue-data-ui-watermark"
-}, oo = ["innerHTML"], so = {
+}, ro = ["innerHTML"], uo = {
   __name: "vue-ui-3d-bar",
   props: {
     config: {
@@ -42,25 +42,33 @@ const le = (U) => (We("data-v-06e93dd9"), U = U(), Ge(), U), lt = ["id"], ot = [
     }
   },
   emits: ["selectDatapoint"],
-  setup(U, { expose: Ce, emit: H }) {
-    const _ = U, { vue_ui_3d_bar: Fe } = Ve(), Z = P(() => !!_.dataset && Object.keys(_.dataset).length), x = B(me()), Me = B(null), re = B(null), O = B(!1), t = P(() => {
-      const d = we({
-        userConfig: _.config,
-        defaultConfig: Fe
+  setup(U, { expose: Pe, emit: Z }) {
+    const $ = U, { vue_ui_3d_bar: De } = He(), q = P(() => !!$.dataset && Object.keys($.dataset).length), m = D(we()), Se = D(null), re = D(null), O = D(!1), ue = D(0), ie = D(0), t = P({
+      get: () => de(),
+      set: (a) => a
+    });
+    function de() {
+      const a = Me({
+        userConfig: $.config,
+        defaultConfig: De
       });
-      return d.theme ? {
-        ...we({
-          userConfig: Ae.vue_ui_3d_bar[d.theme] || _.config,
-          defaultConfig: d
+      return a.theme ? {
+        ...Me({
+          userConfig: Ze.vue_ui_3d_bar[a.theme] || $.config,
+          defaultConfig: a
         }),
-        customPalette: Ue[d.theme] || J
-      } : d;
-    }), { isPrinting: ue, isImaging: ie, generatePdf: de, generateImage: ce } = Ye({
-      elementId: `3d_bar_${x.value}`,
+        customPalette: qe[a.theme] || K
+      } : a;
+    }
+    Oe(() => $.config, (a) => {
+      t.value = de(), pe(), ue.value += 1, ie.value += 1;
+    }, { deep: !0 });
+    const { isPrinting: ce, isImaging: he, generatePdf: ve, generateImage: fe } = et({
+      elementId: `3d_bar_${m.value}`,
       fileName: t.value.style.chart.title.text || "vue-ui-3d-bar"
-    }), Pe = P(() => Ee(t.value.customPalette)), q = B({
+    }), je = P(() => Xe(t.value.customPalette)), X = D({
       showTable: t.value.table.show
-    }), C = P(() => _.dataset.series && _.dataset.series.length), o = P(() => ({
+    }), C = P(() => $.dataset.series && $.dataset.series.length), o = P(() => ({
       height: t.value.style.chart.box.dimensions.height,
       width: t.value.style.chart.box.dimensions.width,
       absoluteWidth: t.value.style.chart.box.dimensions.width * (C.value ? 2 : 1),
@@ -71,23 +79,23 @@ const le = (U) => (We("data-v-06e93dd9"), U = U(), Ge(), U), lt = ["id"], ot = [
       perspective: t.value.style.chart.box.dimensions.perspective
     })), w = P(() => {
       if (C.value) {
-        const d = _.dataset.series.map((l) => l.value || 0).reduce((l, a) => l + a, 0), s = _.dataset.series.map((l, a) => ({
+        const a = $.dataset.series.map((l) => l.value || 0).reduce((l, n) => l + n, 0), s = $.dataset.series.map((l, n) => ({
           ...l,
-          id: me(),
-          proportion: (l.value || 0) / d,
-          color: T(l.color) || Pe.value[a] || J[a] || J[a % J.length],
-          breakdown: l.breakdown ? l.breakdown.sort((u, y) => y.value - u.value) : null
-        })).sort((l, a) => a.value - l.value), e = [];
+          id: we(),
+          proportion: (l.value || 0) / a,
+          color: z(l.color) || je.value[n] || K[n] || K[n % K.length],
+          breakdown: l.breakdown ? l.breakdown.sort((d, k) => k.value - d.value) : null
+        })).sort((l, n) => n.value - l.value), e = [];
         let c = 0;
         for (let l = 0; l < s.length; l += 1)
           e.push({
             ...s[l],
-            fill: De(c, s[l].proportion, s[l].breakdown, s[l].color)
+            fill: Te(c, s[l].proportion, s[l].breakdown, s[l].color)
           }), c += s[l].proportion;
         return e;
       }
       return null;
-    }), z = P(() => ({
+    }), N = P(() => ({
       right: `M${o.value.width / 2},${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} ${o.value.width / 2},${o.value.height - o.value.bottom}`,
       left: `M${o.value.width / 2},${o.value.top} ${o.value.left},${o.value.top + o.value.perspective} ${o.value.left},${o.value.height - o.value.bottom - o.value.perspective} ${o.value.width / 2},${o.value.height - o.value.bottom}`,
       side: `M${o.value.width / 2},${o.value.height - o.value.bottom} ${o.value.width / 2},${o.value.top + o.value.perspective * 2}`,
@@ -96,62 +104,65 @@ const le = (U) => (We("data-v-06e93dd9"), U = U(), Ge(), U), lt = ["id"], ot = [
       tubeLeft: `M${o.value.left},${o.value.top + o.value.perspective} ${o.value.left},${o.value.height - o.value.bottom - o.value.perspective}`,
       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}`
-    })), G = B(t.value.style.chart.animation.use ? 0 : _.dataset.percentage);
-    Be(() => {
-      He(_.dataset) ? K({
+    })), G = D(t.value.style.chart.animation.use ? 0 : $.dataset.percentage);
+    We(() => {
+      pe();
+      let a = 0, s = t.value.style.chart.animation.speed, e = 5e-3 * t.value.style.chart.animation.acceleration;
+      function c() {
+        G.value += s + a, a += e, G.value < $.dataset.percentage ? requestAnimationFrame(c) : G.value = $.dataset.percentage;
+      }
+      t.value.style.chart.animation.use && (G.value = 0, c());
+    });
+    function pe() {
+      Re($.dataset) ? Q({
         componentName: "VueUi3dBar",
         type: "dataset"
-      }) : _.dataset.series ? _.dataset.series.forEach((l, a) => {
+      }) : $.dataset.series ? $.dataset.series.forEach((a, s) => {
         ne({
-          datasetObject: l,
+          datasetObject: a,
           requiredAttributes: ["name", "value"]
-        }).forEach((u) => {
-          K({
+        }).forEach((e) => {
+          Q({
             componentName: "VueUi3dBar",
             type: "datasetSerieAttribute",
-            property: u,
-            index: a
+            property: e,
+            index: s
           });
-        }), l.breakdown && l.breakdown.forEach((u, y) => {
+        }), a.breakdown && a.breakdown.forEach((e, c) => {
           ne({
-            datasetObject: u,
+            datasetObject: e,
             requiredAttributes: ["name", "value"]
-          }).forEach((m) => {
-            K({
+          }).forEach((l) => {
+            Q({
               componentName: "VueUi3dBar",
               type: "datasetSerieAttribute",
-              property: m,
-              index: `${a} - ${y}`
+              property: l,
+              index: `${s} - ${c}`
             });
           });
         });
       }) : ne({
-        datasetObject: _.dataset,
+        datasetObject: $.dataset,
         requiredAttributes: ["percentage"]
-      }).forEach((l) => {
-        K({
+      }).forEach((a) => {
+        Q({
           componentName: "VueUi3dBar",
           type: "datasetAttribute",
-          property: l
+          property: a
         });
       });
-      let d = 0, s = t.value.style.chart.animation.speed, e = 5e-3 * t.value.style.chart.animation.acceleration;
-      function c() {
-        G.value += s + d, d += e, G.value < _.dataset.percentage ? requestAnimationFrame(c) : G.value = _.dataset.percentage;
-      }
-      t.value.style.chart.animation.use && (G.value = 0, c());
-    });
-    function De(d, s, e, c) {
-      const l = o.value.height - o.value.bottom - o.value.top - o.value.perspective * 2, { width: a, height: u, bottom: y, right: m, left: f, perspective: p } = o.value, v = y + l * d, se = u - v - p - l * s / 2, Te = se > o.value.height / 2 ? "top" : "bottom", pe = 64, ze = !!e;
-      let ye = null, ke = null;
-      return ze && (e = e.map(($e, Ne) => ({
-        ...$e,
-        value: $e.value || 0,
-        color: A(c, Ne / e.length)
-      })), ye = xe(
+    }
+    function Te(a, s, e, c) {
+      const l = o.value.height - o.value.bottom - o.value.top - o.value.perspective * 2, { width: n, height: d, bottom: k, right: b, left: f, perspective: p } = o.value, v = k + l * a, ae = d - v - p - l * s / 2, Be = ae > o.value.height / 2 ? "top" : "bottom", ge = 64, Ie = !!e;
+      let _e = null, me = null;
+      return Ie && (e = e.map((xe, Le) => ({
+        ...xe,
+        value: xe.value || 0,
+        color: A(c, Le / e.length)
+      })), _e = Ce(
         { series: e },
-        a + o.value.absoluteWidth / 4 - 14,
-        Te === "top" ? se - pe : se + pe,
+        n + o.value.absoluteWidth / 4 - 14,
+        Be === "top" ? ae - ge : ae + ge,
         28,
         28,
         1.99999,
@@ -160,10 +171,10 @@ const le = (U) => (We("data-v-06e93dd9"), U = U(), Ge(), U), lt = ["id"], ot = [
         360,
         105.25,
         14
-      ), ke = xe(
+      ), me = Ce(
         { series: e },
-        a - m + 20,
-        u - v - p - l * s / 2,
+        n - b + 20,
+        d - v - p - l * s / 2,
         6,
         6,
         1.99999,
@@ -173,114 +184,114 @@ const le = (U) => (We("data-v-06e93dd9"), U = U(), Ge(), U), lt = ["id"], ot = [
         105.25,
         6
       )), {
-        donut: ye,
-        miniDonut: ke,
+        donut: _e,
+        miniDonut: me,
         sidePointer: {
-          x: a - m,
-          y: u - v - p - l * s / 2,
-          topY: u - v - p - l * s,
+          x: n - b,
+          y: d - v - p - l * s / 2,
+          topY: d - v - p - l * s,
           height: l * s
         },
-        apexBottom: { y: u - v, x: a / 2 },
-        apexTop: { y: u - v - l * s, x: a / 2 },
-        right: `M${a / 2},${u - v} ${a / 2},${u - v - l * s} ${a - m},${u - v - p - l * s} ${a - m},${u - v - p}Z`,
-        left: `M${a / 2},${u - v} ${a / 2},${u - v - l * s} ${f}, ${u - v - p - l * s} ${f},${u - v - p}Z`,
-        liningTop: `M${f},${u - v - p - l * s} ${a / 2},${u - v - l * s} ${a - m},${u - v - p - l * s}`,
-        liningTopShade: `M${f},${u - v - p - l * s - 0.5} ${a / 2},${u - v - l * s - 0.5} ${a - m},${u - v - p - l * s - 0.5}`,
-        top: `M${a / 2},${u - v - l * s} ${f},${u - v - p - l * s} ${a / 2},${u - v - p * 2 - l * s} ${a - m},${u - v - p - l * s} Z`,
-        tubeTop: `M${f},${u - v - l * s - p} C ${f},${u - v - l * s - p * 2.5} ${a - m},${u - v - l * s - p * 2.5} ${a - m},${u - v - l * s - p} C ${a - m},${u - v - l * s + p / 2} ${f},${u - v - l * s + p / 2} ${f},${u - v - l * s - p}`,
-        bottomTubeTop: `M ${a - m - 0.5},${u - v - p} C ${a - m - 0.5},${u - v + p / 2} ${f},${u - v + p / 2} ${f + 0.5},${u - v - p}`,
+        apexBottom: { y: d - v, x: n / 2 },
+        apexTop: { y: d - v - l * s, x: n / 2 },
+        right: `M${n / 2},${d - v} ${n / 2},${d - v - l * s} ${n - b},${d - v - p - l * s} ${n - b},${d - v - p}Z`,
+        left: `M${n / 2},${d - v} ${n / 2},${d - v - l * s} ${f}, ${d - v - p - l * s} ${f},${d - v - p}Z`,
+        liningTop: `M${f},${d - v - p - l * s} ${n / 2},${d - v - l * s} ${n - b},${d - v - p - l * s}`,
+        liningTopShade: `M${f},${d - v - p - l * s - 0.5} ${n / 2},${d - v - l * s - 0.5} ${n - b},${d - v - p - l * s - 0.5}`,
+        top: `M${n / 2},${d - v - l * s} ${f},${d - v - p - l * s} ${n / 2},${d - v - p * 2 - l * s} ${n - b},${d - v - p - l * s} Z`,
+        tubeTop: `M${f},${d - v - l * s - p} C ${f},${d - v - l * s - p * 2.5} ${n - b},${d - v - l * s - p * 2.5} ${n - b},${d - v - l * s - p} C ${n - b},${d - v - l * s + p / 2} ${f},${d - v - l * s + p / 2} ${f},${d - v - l * s - p}`,
+        bottomTubeTop: `M ${n - b - 0.5},${d - v - p} C ${n - b - 0.5},${d - v + p / 2} ${f},${d - v + p / 2} ${f + 0.5},${d - v - p}`,
         tubeBody: `M
-        ${f},${u - v - l * s - p} 
-        C ${f},${u - v - l * s + p / 2} 
-        ${a - m},${u - v - l * s + p / 2} 
-        ${a - m},${u - v - l * s - p} 
-        L${a - m},${u - v - p}
+        ${f},${d - v - l * s - p} 
+        C ${f},${d - v - l * s + p / 2} 
+        ${n - b},${d - v - l * s + p / 2} 
+        ${n - b},${d - v - l * s - p} 
+        L${n - b},${d - v - p}
         C 
-        ${a - m},${u - v + p / 2}
-        ${f},${u - v + p / 2}
-        ${f},${u - v - p}Z`
+        ${n - b},${d - v + p / 2}
+        ${f},${d - v + p / 2}
+        ${f},${d - v - p}Z`
       };
     }
     const E = P(() => {
-      const d = G.value / 100, s = o.value.height - o.value.bottom - o.value.top - o.value.perspective * 2, { width: e, height: c, bottom: l, right: a, left: u, perspective: y } = o.value, f = l + s * 0;
+      const a = G.value / 100, s = o.value.height - o.value.bottom - o.value.top - o.value.perspective * 2, { width: e, height: c, bottom: l, right: n, left: d, perspective: k } = o.value, f = l + s * 0;
       return {
-        right: `M${e / 2},${c - f} ${e / 2},${c - f - s * d} ${e - a},${c - f - y - s * d} ${e - a},${c - f - y}Z`,
-        left: `M${e / 2},${c - f} ${e / 2},${c - f - s * d} ${u}, ${c - f - y - s * d} ${u},${c - f - y}Z`,
-        top: `M${e / 2},${c - f - s * d} ${u},${c - f - y - s * d} ${e / 2},${c - f - y * 2 - s * d} ${e - a},${c - f - y - s * d} Z`,
-        tubeTop: `M${u},${c - f - s * d - y} C ${u},${c - f - s * d - y * 2.5} ${e - a},${c - f - s * d - y * 2.5} ${e - a},${c - f - s * d - y} C ${e - a},${c - f - s * d + y / 2} ${u},${c - f - s * d + y / 2} ${u},${c - f - s * d - y}`,
+        right: `M${e / 2},${c - f} ${e / 2},${c - f - s * a} ${e - n},${c - f - k - s * a} ${e - n},${c - f - k}Z`,
+        left: `M${e / 2},${c - f} ${e / 2},${c - f - s * a} ${d}, ${c - f - k - s * a} ${d},${c - f - k}Z`,
+        top: `M${e / 2},${c - f - s * a} ${d},${c - f - k - s * a} ${e / 2},${c - f - k * 2 - s * a} ${e - n},${c - f - k - s * a} Z`,
+        tubeTop: `M${d},${c - f - s * a - k} C ${d},${c - f - s * a - k * 2.5} ${e - n},${c - f - s * a - k * 2.5} ${e - n},${c - f - s * a - k} C ${e - n},${c - f - s * a + k / 2} ${d},${c - f - s * a + k / 2} ${d},${c - f - s * a - k}`,
         tubeBody: `M
-        ${u},${c - f - s * d - y} 
-        C ${u},${c - f - s * d + y / 2} 
-        ${e - a},${c - f - s * d + y / 2} 
-        ${e - a},${c - f - s * d - y} 
-        L${e - a},${c - y * 1.5}
+        ${d},${c - f - s * a - k} 
+        C ${d},${c - f - s * a + k / 2} 
+        ${e - n},${c - f - s * a + k / 2} 
+        ${e - n},${c - f - s * a - k} 
+        L${e - n},${c - k * 1.5}
         C 
-        ${e - a},${c}
-        ${u},${c}
-        ${u},${c - f - y}Z`
+        ${e - n},${c}
+        ${d},${c}
+        ${d},${c - f - k}Z`
       };
-    }), b = B(null);
-    function F(d, s = !1) {
-      H("selectDatapoint", d), s || (b.value = d.id), s && O.value && (O.value = !1), s && !O.value && (O.value = !0);
+    }), x = D(null);
+    function F(a, s = !1) {
+      Z("selectDatapoint", a), s || (x.value = a.id), s && O.value && (O.value = !1), s && !O.value && (O.value = !0);
     }
     function W() {
-      O.value || (b.value = null);
+      O.value || (x.value = null);
     }
-    function V(d, s, e = !1) {
-      const c = _.dataset.series.map((u) => u.value || 0).reduce((u, y) => u + y, 0), l = isNaN(d.value / c) ? 0 : d.value / c * 100, a = isNaN(d.value / he(s)) ? 0 : d.value / he(s) * 100;
-      return e ? a : l.toFixed(0) + "%";
+    function V(a, s, e = !1) {
+      const c = $.dataset.series.map((d) => d.value || 0).reduce((d, k) => d + k, 0), l = isNaN(a.value / c) ? 0 : a.value / c * 100, n = isNaN(a.value / ye(s)) ? 0 : a.value / ye(s) * 100;
+      return e ? n : l.toFixed(0) + "%";
     }
-    function he(d) {
-      return [...d].map((s) => s.value).reduce((s, e) => s + e, 0);
+    function ye(a) {
+      return [...a].map((s) => s.value).reduce((s, e) => s + e, 0);
     }
-    const oe = B(!1);
-    function je(d) {
-      oe.value = d;
+    const se = D(!1);
+    function ze(a) {
+      se.value = a;
     }
-    function Se() {
-      return C.value ? w.value : _.dataset.percentage;
+    function Ne() {
+      return C.value ? w.value : $.dataset.percentage;
     }
-    const N = P(() => {
+    const B = P(() => {
       if (C.value) {
-        const d = w.value.flatMap((e) => e.breakdown && e.breakdown.length ? [{ name: e.name, color: e.color }, ...e.breakdown.map((c, l) => ({
+        const a = w.value.flatMap((e) => e.breakdown && e.breakdown.length ? [{ name: e.name, color: e.color }, ...e.breakdown.map((c, l) => ({
           name: c.name,
           color: A(e.color, l / e.breakdown.length)
         }))] : {
           name: e.name,
           color: e.color
         }), s = w.value.flatMap((e) => e.breakdown && e.breakdown.length ? [e.value, ...e.breakdown.map((c) => c.value)] : e.value);
-        return { head: d, body: s };
+        return { head: a, body: s };
       } else
         return null;
     });
-    function ve() {
+    function ke() {
       if (!C.value) {
         console.warn("VueUi3dBar : CSV download is only available in stack mode (providing dataset.series instead of dataset.percentage)");
         return;
       }
-      Oe(() => {
-        const d = w.value.map((l) => l.value).reduce((l, a) => l + a, 0), s = N.value.head.map((l, a) => [[
+      Ae(() => {
+        const a = w.value.map((l) => l.value).reduce((l, n) => l + n, 0), s = B.value.head.map((l, n) => [[
           l.name
-        ], [N.value.body[a]], [isNaN(N.value.body[a] / d) ? "-" : N.value.body[a] / d * 100]]), e = [[t.value.style.chart.title.text], [t.value.style.chart.title.subtitle.text], [[""], ["val"], ["%"]]].concat(s), c = qe(e);
-        Xe({ csvContent: c, title: t.value.style.chart.title.text || "vue-ui-3d-bar" });
+        ], [B.value.body[n]], [isNaN(B.value.body[n] / a) ? "-" : B.value.body[n] / a * 100]]), e = [[t.value.style.chart.title.text], [t.value.style.chart.title.subtitle.text], [[""], ["val"], ["%"]]].concat(s), c = Je(e);
+        Ke({ csvContent: c, title: t.value.style.chart.title.text || "vue-ui-3d-bar" });
       });
     }
-    const X = P(() => {
-      const d = w.value.map((a) => a.value).reduce((a, u) => a + u, 0), s = [
+    const R = P(() => {
+      const a = w.value.map((n) => n.value).reduce((n, d) => n + d, 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>',
-        D({ p: t.value.style.chart.legend.prefix, v: d, s: t.value.style.chart.legend.suffix, r: t.value.table.td.roundingValue }),
+        S({ p: t.value.style.chart.legend.prefix, v: a, s: t.value.style.chart.legend.suffix, r: t.value.table.td.roundingValue }),
         "100%"
-      ], e = N.value.head.map((a, u) => {
-        const y = D({ p: t.value.style.chart.legend.prefix, v: N.value.body[u], s: t.value.style.chart.legend.suffix, r: t.value.table.td.roundingValue });
+      ], e = B.value.head.map((n, d) => {
+        const k = S({ p: t.value.style.chart.legend.prefix, v: B.value.body[d], s: t.value.style.chart.legend.suffix, r: t.value.table.td.roundingValue });
         return [
           {
-            color: a.color,
-            name: a.name
+            color: n.color,
+            name: n.name
           },
-          y,
-          isNaN(N.value.body[u] / d) ? "-" : D({
-            v: N.value.body[u] / d * 100,
+          k,
+          isNaN(B.value.body[d] / a) ? "-" : S({
+            v: B.value.body[d] / a * 100,
             s: "%",
             r: t.value.table.td.roundingPercentage
           })
@@ -310,27 +321,28 @@ const le = (U) => (We("data-v-06e93dd9"), U = U(), Ge(), U), lt = ["id"], ot = [
         config: c
       };
     });
-    function fe() {
-      q.value.showTable = !q.value.showTable;
+    function $e() {
+      X.value.showTable = !X.value.showTable;
     }
-    return Ce({
-      generateCsv: ve,
-      generatePdf: de,
-      generateImage: ce,
-      getData: Se,
-      toggleTable: fe
-    }), (d, s) => (n(), i("div", {
+    return Pe({
+      generateCsv: ke,
+      generatePdf: ve,
+      generateImage: fe,
+      getData: Ne,
+      toggleTable: $e
+    }), (a, s) => (r(), i("div", {
       ref_key: "bar3dChart",
       ref: re,
-      class: ge("vue-ui-3d-bar"),
+      class: be("vue-ui-3d-bar"),
       style: j(`font-family:${t.value.style.fontFamily};width:100%; text-align:center;background:${t.value.style.chart.backgroundColor}`),
-      id: `3d_bar_${x.value}`
+      id: `3d_bar_${m.value}`
     }, [
-      t.value.style.chart.title.text ? (n(), i("div", {
+      t.value.style.chart.title.text ? (r(), i("div", {
         key: 0,
         style: j(`width:100%;background:${t.value.style.chart.backgroundColor}`)
       }, [
-        _e(Re, {
+        (r(), H(Qe, {
+          key: `title_${ue.value}`,
           config: {
             title: {
               cy: "3dBar-div-title",
@@ -341,17 +353,17 @@ const le = (U) => (We("data-v-06e93dd9"), U = U(), Ge(), U), lt = ["id"], ot = [
               ...t.value.style.chart.title.subtitle
             }
           }
-        }, null, 8, ["config"])
-      ], 4)) : k("", !0),
-      t.value.userOptions.show && Z.value ? (n(), ae(Je, {
+        }, null, 8, ["config"]))
+      ], 4)) : y("", !0),
+      t.value.userOptions.show && q.value ? (r(), H(tt, {
         key: 1,
         ref_key: "details",
-        ref: Me,
+        ref: Se,
         backgroundColor: t.value.style.chart.backgroundColor,
         color: t.value.style.chart.color,
-        isPrinting: h(ue),
-        isImaging: h(ie),
-        uid: x.value,
+        isPrinting: h(ce),
+        isImaging: h(he),
+        uid: m.value,
         hasPdf: t.value.userOptions.buttons.pdf,
         hasTable: !!C.value && t.value.userOptions.buttons.table,
         hasXls: !!C.value && t.value.userOptions.buttons.csv,
@@ -359,159 +371,159 @@ const le = (U) => (We("data-v-06e93dd9"), U = U(), Ge(), U), lt = ["id"], ot = [
         hasFullscreen: t.value.userOptions.buttons.fullscreen,
         titles: { ...t.value.userOptions.buttonTitles },
         chartElement: re.value,
-        onToggleFullscreen: je,
-        onGeneratePdf: h(de),
-        onGenerateCsv: ve,
-        onGenerateImage: h(ce),
-        onToggleTable: fe
-      }, Ie({ _: 2 }, [
-        d.$slots.optionPdf ? {
+        onToggleFullscreen: ze,
+        onGeneratePdf: h(ve),
+        onGenerateCsv: ke,
+        onGenerateImage: h(fe),
+        onToggleTable: $e
+      }, Ge({ _: 2 }, [
+        a.$slots.optionPdf ? {
           name: "optionPdf",
           fn: I(() => [
-            S(d.$slots, "optionPdf", {}, void 0, !0)
+            T(a.$slots, "optionPdf", {}, void 0, !0)
           ]),
           key: "0"
         } : void 0,
-        d.$slots.optionCsv ? {
+        a.$slots.optionCsv ? {
           name: "optionCsv",
           fn: I(() => [
-            S(d.$slots, "optionCsv", {}, void 0, !0)
+            T(a.$slots, "optionCsv", {}, void 0, !0)
           ]),
           key: "1"
         } : void 0,
-        d.$slots.optionImg ? {
+        a.$slots.optionImg ? {
           name: "optionImg",
           fn: I(() => [
-            S(d.$slots, "optionImg", {}, void 0, !0)
+            T(a.$slots, "optionImg", {}, void 0, !0)
           ]),
           key: "2"
         } : void 0,
-        d.$slots.optionTable ? {
+        a.$slots.optionTable ? {
           name: "optionTable",
           fn: I(() => [
-            S(d.$slots, "optionTable", {}, void 0, !0)
+            T(a.$slots, "optionTable", {}, void 0, !0)
           ]),
           key: "3"
         } : void 0,
-        d.$slots.optionFullscreen ? {
+        a.$slots.optionFullscreen ? {
           name: "optionFullscreen",
           fn: I(({ toggleFullscreen: e, isFullscreen: c }) => [
-            S(d.$slots, "optionFullscreen", R(Y({ toggleFullscreen: e, isFullscreen: c })), void 0, !0)
+            T(a.$slots, "optionFullscreen", Y(J({ toggleFullscreen: e, isFullscreen: c })), void 0, !0)
           ]),
           key: "4"
         } : void 0
-      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasPdf", "hasTable", "hasXls", "hasImg", "hasFullscreen", "titles", "chartElement", "onGeneratePdf", "onGenerateImage"])) : k("", !0),
-      Z.value ? (n(), i("svg", {
+      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasPdf", "hasTable", "hasXls", "hasImg", "hasFullscreen", "titles", "chartElement", "onGeneratePdf", "onGenerateImage"])) : y("", !0),
+      q.value ? (r(), i("svg", {
         key: 2,
-        xmlns: h(Ze),
-        class: ge({ "vue-data-ui-fullscreen--on": oe.value, "vue-data-ui-fulscreen--off": !oe.value }),
+        xmlns: h(Ye),
+        class: be({ "vue-data-ui-fullscreen--on": se.value, "vue-data-ui-fulscreen--off": !se.value }),
         viewBox: `0 0 ${o.value.absoluteWidth} ${o.value.height}`,
         style: j(`max-width:100%; overflow: visible; background:${t.value.style.chart.backgroundColor};color:${t.value.style.chart.color}`)
       }, [
-        r("defs", null, [
-          r("radialGradient", {
-            id: `gradient_top${x.value}`
+        u("defs", null, [
+          u("radialGradient", {
+            id: `gradient_top${m.value}`
           }, [
-            r("stop", {
+            u("stop", {
               offset: "0%",
-              "stop-color": `${h(T)(t.value.style.chart.backgroundColor)}00`
-            }, null, 8, at),
-            r("stop", {
+              "stop-color": `${h(z)(t.value.style.chart.backgroundColor)}00`
+            }, null, 8, it),
+            u("stop", {
               offset: "100%",
               "stop-color": `${t.value.style.chart.bar.color}`
-            }, null, 8, nt)
-          ], 8, st),
-          r("radialGradient", {
-            id: `gradient_left${x.value}`
+            }, null, 8, dt)
+          ], 8, ut),
+          u("radialGradient", {
+            id: `gradient_left${m.value}`
           }, [
-            r("stop", {
+            u("stop", {
               offset: "0%",
-              "stop-color": `${h(T)(t.value.style.chart.backgroundColor)}00`
-            }, null, 8, ut),
-            r("stop", {
+              "stop-color": `${h(z)(t.value.style.chart.backgroundColor)}00`
+            }, null, 8, ht),
+            u("stop", {
               offset: "100%",
               "stop-color": `${t.value.style.chart.bar.color}33`
-            }, null, 8, it)
-          ], 8, rt),
-          r("radialGradient", {
-            id: `gradient_right${x.value}`
+            }, null, 8, vt)
+          ], 8, ct),
+          u("radialGradient", {
+            id: `gradient_right${m.value}`
           }, [
-            r("stop", {
+            u("stop", {
               offset: "0%",
-              "stop-color": `${h(T)(t.value.style.chart.backgroundColor)}00`
-            }, null, 8, ct),
-            r("stop", {
+              "stop-color": `${h(z)(t.value.style.chart.backgroundColor)}00`
+            }, null, 8, pt),
+            u("stop", {
               offset: "100%",
               "stop-color": `${t.value.style.chart.bar.color}33`
-            }, null, 8, ht)
-          ], 8, dt),
-          r("linearGradient", {
-            id: `gradient_tube_body${x.value}`,
+            }, null, 8, yt)
+          ], 8, ft),
+          u("linearGradient", {
+            id: `gradient_tube_body${m.value}`,
             x1: "0%",
             y1: "0%",
             x2: "100%",
             y2: "0%"
           }, [
-            r("stop", {
+            u("stop", {
               offset: "0%",
               "stop-color": `${t.value.style.chart.bar.color}`
-            }, null, 8, ft),
-            r("stop", {
+            }, null, 8, $t),
+            u("stop", {
               offset: "75%",
-              "stop-color": `${h(T)(t.value.style.chart.backgroundColor)}00`
-            }, null, 8, pt),
-            r("stop", {
+              "stop-color": `${h(z)(t.value.style.chart.backgroundColor)}00`
+            }, null, 8, gt),
+            u("stop", {
               offset: "100%",
               "stop-color": `${t.value.style.chart.bar.color}66`
-            }, null, 8, yt)
-          ], 8, vt)
+            }, null, 8, _t)
+          ], 8, kt)
         ]),
-        C.value ? (n(), i("defs", kt, [
-          (n(!0), i($, null, g(w.value, (e) => (n(), i("radialGradient", {
+        C.value ? (r(), i("defs", mt, [
+          (r(!0), i(g, null, _(w.value, (e) => (r(), i("radialGradient", {
             id: `grad_top_${e.id}`
           }, [
-            r("stop", {
+            u("stop", {
               offset: "0%",
               "stop-color": `${h(A)(e.color, 0.5)}DD`
-            }, null, 8, gt),
-            r("stop", {
+            }, null, 8, bt),
+            u("stop", {
               offset: "100%",
               "stop-color": `${e.color}`
-            }, null, 8, _t)
-          ], 8, $t))), 256)),
-          (n(!0), i($, null, g(w.value, (e) => (n(), i("linearGradient", {
+            }, null, 8, wt)
+          ], 8, xt))), 256)),
+          (r(!0), i(g, null, _(w.value, (e) => (r(), i("linearGradient", {
             id: `grad_left_${e.id}`
           }, [
-            r("stop", {
+            u("stop", {
               offset: "0%",
               "stop-color": `${e.color}DD`
-            }, null, 8, xt),
-            r("stop", {
+            }, null, 8, Ft),
+            u("stop", {
               offset: "100%",
-              "stop-color": `${h(Q)(e.color, 0.5)}FF`
-            }, null, 8, bt)
-          ], 8, mt))), 256)),
-          (n(!0), i($, null, g(w.value, (e) => (n(), i("linearGradient", {
+              "stop-color": `${h(ee)(e.color, 0.5)}FF`
+            }, null, 8, Mt)
+          ], 8, Ct))), 256)),
+          (r(!0), i(g, null, _(w.value, (e) => (r(), i("linearGradient", {
             id: `grad_right_${e.id}`
           }, [
-            r("stop", {
+            u("stop", {
               offset: "2%",
               "stop-color": `${h(A)(e.color, 0.5)}FF`
-            }, null, 8, Ct),
-            r("stop", {
+            }, null, 8, Dt),
+            u("stop", {
               offset: "100%",
               "stop-color": `${e.color}DD`
-            }, null, 8, Ft)
-          ], 8, wt))), 256)),
-          r("linearGradient", {
+            }, null, 8, St)
+          ], 8, Pt))), 256)),
+          u("linearGradient", {
             x1: "0%",
             y1: "0%",
             x2: "0%",
             y2: "100%",
-            id: `vertical_line_${x.value}`
-          }, jt, 8, Mt)
-        ])) : k("", !0),
-        t.value.style.chart.dataLabel.show && ![null, void 0].includes(_.dataset.percentage) && [null, void 0].includes(_.dataset.series) ? (n(), i("text", {
+            id: `vertical_line_${m.value}`
+          }, Nt, 8, jt)
+        ])) : y("", !0),
+        t.value.style.chart.dataLabel.show && ![null, void 0].includes($.dataset.percentage) && [null, void 0].includes($.dataset.series) ? (r(), i("text", {
           key: 1,
           x: o.value.width / 2,
           y: o.value.top - t.value.style.chart.dataLabel.fontSize / 2,
@@ -519,131 +531,131 @@ const le = (U) => (We("data-v-06e93dd9"), U = U(), Ge(), U), lt = ["id"], ot = [
           "font-weight": t.value.style.chart.dataLabel.bold ? "bold" : "normal",
           fill: t.value.style.chart.dataLabel.color,
           "text-anchor": "middle"
-        }, M(h(D)({
+        }, M(h(S)({
           v: G.value,
           s: "%",
           r: t.value.style.chart.dataLabel.rounding
-        })), 9, St)) : k("", !0),
-        O.value ? (n(), i("g", {
+        })), 9, Bt)) : y("", !0),
+        O.value ? (r(), i("g", {
           key: 2,
           onClick: s[0] || (s[0] = (e) => {
-            O.value = !1, b.value = null;
+            O.value = !1, x.value = null;
           }),
           "data-html2canvas-ignore": "",
           style: { cursor: "pointer" }
         }, [
-          r("rect", {
+          u("rect", {
             x: o.value.width / 2 - 6,
             y: o.value.top - 20,
             height: 12,
             width: 12,
             fill: "transparent"
-          }, null, 8, Tt),
-          r("path", {
+          }, null, 8, It),
+          u("path", {
             d: `M${o.value.width / 2 - 6},${o.value.top - 20} ${o.value.width / 2 + 6},${o.value.top - 9}`,
             stroke: t.value.style.chart.color,
             "stroke-linecap": "round",
             "stroke-width": "1"
-          }, null, 8, zt),
-          r("path", {
+          }, null, 8, Lt),
+          u("path", {
             d: `M${o.value.width / 2 + 6},${o.value.top - 20} ${o.value.width / 2 - 6},${o.value.top - 9}`,
             stroke: t.value.style.chart.color,
             "stroke-linecap": "round",
             "stroke-width": "1"
-          }, null, 8, Nt)
-        ])) : k("", !0),
-        !t.value.style.shape || t.value.style.shape === "bar" ? (n(), i("g", Bt, [
-          C.value ? k("", !0) : (n(), i("g", It, [
-            r("path", {
+          }, null, 8, Ot)
+        ])) : y("", !0),
+        !t.value.style.shape || t.value.style.shape === "bar" ? (r(), i("g", Wt, [
+          C.value ? y("", !0) : (r(), i("g", Gt, [
+            u("path", {
               "stroke-dasharray": t.value.style.chart.box.strokeDasharray,
-              d: z.value.right,
+              d: N.value.right,
               stroke: t.value.style.chart.box.stroke,
               "stroke-width": t.value.style.chart.box.strokeWidth,
               "stroke-linejoin": "round",
               "stroke-linecap": "round",
               fill: "none"
-            }, null, 8, Lt),
-            r("path", {
+            }, null, 8, Vt),
+            u("path", {
               "stroke-dasharray": t.value.style.chart.box.strokeDasharray,
-              d: z.value.left,
+              d: N.value.left,
               stroke: t.value.style.chart.box.stroke,
               "stroke-width": t.value.style.chart.box.strokeWidth,
               "stroke-linejoin": "round",
               "stroke-linecap": "round",
               fill: "none"
-            }, null, 8, Ot),
-            r("path", {
+            }, null, 8, At),
+            u("path", {
               "stroke-dasharray": t.value.style.chart.box.strokeDasharray,
-              d: z.value.side,
+              d: N.value.side,
               stroke: t.value.style.chart.box.stroke,
               "stroke-width": t.value.style.chart.box.strokeWidth,
               "stroke-linejoin": "round",
               "stroke-linecap": "round",
               fill: "none"
-            }, null, 8, Wt),
-            r("path", {
+            }, null, 8, Ut),
+            u("path", {
               "stroke-dasharray": t.value.style.chart.box.strokeDasharray,
-              d: z.value.topSides,
+              d: N.value.topSides,
               stroke: t.value.style.chart.box.stroke,
               "stroke-width": t.value.style.chart.box.strokeWidth,
               "stroke-linejoin": "round",
               "stroke-linecap": "round",
               fill: "none"
-            }, null, 8, Gt)
+            }, null, 8, Et)
           ])),
-          C.value ? k("", !0) : (n(), i("g", Vt, [
-            r("path", {
+          C.value ? y("", !0) : (r(), i("g", Ht, [
+            u("path", {
               d: E.value.right,
               stroke: t.value.style.chart.bar.stroke,
               "stroke-width": t.value.style.chart.bar.strokeWidth,
               "stroke-linejoin": "round",
               "stroke-linecap": "round",
-              fill: `url(#gradient_right${x.value})`
-            }, null, 8, At),
-            r("path", {
+              fill: `url(#gradient_right${m.value})`
+            }, null, 8, Zt),
+            u("path", {
               d: E.value.left,
               stroke: t.value.style.chart.bar.stroke,
               "stroke-width": t.value.style.chart.bar.strokeWidth,
               "stroke-linejoin": "round",
               "stroke-linecap": "round",
-              fill: `url(#gradient_left${x.value})`
-            }, null, 8, Ut),
-            r("path", {
+              fill: `url(#gradient_left${m.value})`
+            }, null, 8, qt),
+            u("path", {
               d: E.value.top,
               stroke: t.value.style.chart.bar.stroke,
               "stroke-width": t.value.style.chart.bar.strokeWidth,
               "stroke-linejoin": "round",
               "stroke-linecap": "round",
-              fill: `url(#gradient_top${x.value})`
-            }, null, 8, Et)
+              fill: `url(#gradient_top${m.value})`
+            }, null, 8, Xt)
           ])),
-          C.value ? (n(), i("g", Ht, [
-            (n(!0), i($, null, g(w.value, (e, c) => (n(), i("g", {
-              style: j(`opacity:${b.value ? b.value === e.id ? 1 : 0.3 : 1}`),
+          C.value ? (r(), i("g", Rt, [
+            (r(!0), i(g, null, _(w.value, (e, c) => (r(), i("g", {
+              style: j(`opacity:${x.value ? x.value === e.id ? 1 : 0.3 : 1}`),
               class: "vue-ui-3d-bar-stack"
             }, [
-              r("path", {
+              u("path", {
                 d: e.fill.right,
                 fill: `url(#grad_right_${e.id})`,
                 onMouseenter: (l) => F(e),
                 onClick: (l) => F(e, !0),
                 onMouseout: W
-              }, null, 40, Zt),
-              r("path", {
+              }, null, 40, Yt),
+              u("path", {
                 d: e.fill.left,
                 fill: `url(#grad_left_${e.id})`,
                 onMouseenter: (l) => F(e),
                 onClick: (l) => F(e, !0),
                 onMouseout: W
-              }, null, 40, qt),
-              r("path", {
+              }, null, 40, Jt),
+              u("path", {
                 d: e.fill.top,
                 fill: `url(#grad_top_${e.id})`,
                 onMouseenter: (l) => F(e),
                 onClick: (l) => F(e, !0),
                 onMouseout: W
-              }, null, 40, Xt),
-              r("path", {
+              }, null, 40, Kt),
+              u("path", {
                 d: e.fill.liningTop,
                 stroke: "#FFFFFF",
                 "stroke-width": "0.5",
@@ -652,16 +664,16 @@ const le = (U) => (We("data-v-06e93dd9"), U = U(), Ge(), U), lt = ["id"], ot = [
                 onMouseenter: (l) => F(e),
                 onClick: (l) => F(e, !0),
                 onMouseout: W
-              }, null, 40, Rt),
-              r("path", {
+              }, null, 40, Qt),
+              u("path", {
                 d: `M ${e.fill.apexTop.x},${e.fill.apexTop.y} ${e.fill.apexBottom.x},${e.fill.apexBottom.y}`,
                 stroke: "#FFFFFF",
                 "stroke-width": "0.5",
                 "stroke-linecap": "round"
-              }, null, 8, Yt)
+              }, null, 8, el)
             ], 4))), 256)),
-            (n(!0), i($, null, g(w.value, (e, c) => (n(), i("g", null, [
-              c !== w.value.length - 1 ? (n(), i("path", {
+            (r(!0), i(g, null, _(w.value, (e, c) => (r(), i("g", null, [
+              c !== w.value.length - 1 ? (r(), i("path", {
                 key: 0,
                 d: e.fill.liningTopShade,
                 stroke: t.value.style.chart.bar.shadeColor,
@@ -669,246 +681,246 @@ const le = (U) => (We("data-v-06e93dd9"), U = U(), Ge(), U), lt = ["id"], ot = [
                 "stroke-linecap": "round",
                 fill: "none",
                 style: { "pointer-events": "none" }
-              }, null, 8, Jt)) : k("", !0)
+              }, null, 8, tl)) : y("", !0)
             ]))), 256)),
-            (n(!0), i($, null, g(w.value, (e, c) => (n(), i("g", {
-              style: j(`opacity:${b.value ? b.value === e.id ? 1 : 0 : e.proportion * 100 > t.value.style.chart.legend.hideUnderPercentage ? 1 : 0}`),
-              onClick: (l) => H("selectDatapoint", e)
+            (r(!0), i(g, null, _(w.value, (e, c) => (r(), i("g", {
+              style: j(`opacity:${x.value ? x.value === e.id ? 1 : 0 : e.proportion * 100 > t.value.style.chart.legend.hideUnderPercentage ? 1 : 0}`),
+              onClick: (l) => Z("selectDatapoint", e)
             }, [
-              r("path", {
+              u("path", {
                 stroke: t.value.style.chart.color,
                 "stroke-dasharray": "1",
                 "stroke-width": "0.5",
                 "stroke-linecap": "round",
                 d: `M${e.fill.sidePointer.x},${e.fill.sidePointer.y} ${e.fill.sidePointer.x + 20},${e.fill.sidePointer.y}`
-              }, null, 8, Qt),
-              !e.fill.miniDonut || b.value ? (n(), i("circle", {
+              }, null, 8, ol),
+              !e.fill.miniDonut || x.value ? (r(), i("circle", {
                 key: 0,
                 cx: e.fill.sidePointer.x + 20,
                 cy: e.fill.sidePointer.y,
                 r: 2,
                 fill: e.color,
                 stroke: t.value.style.chart.backgroundColor
-              }, null, 8, el)) : k("", !0),
-              (n(), i("foreignObject", {
+              }, null, 8, sl)) : y("", !0),
+              (r(), i("foreignObject", {
                 x: e.fill.sidePointer.x + 30,
                 y: e.fill.sidePointer.y - t.value.style.chart.legend.fontSize,
                 width: o.value.absoluteWidth / 2 - 12,
                 height: t.value.style.chart.legend.fontSize * 2,
                 style: { overflow: "visible", position: "relative" }
               }, [
-                t.value.style.chart.legend.showDefault ? (n(), i("div", {
+                t.value.style.chart.legend.showDefault ? (r(), i("div", {
                   key: 0,
                   style: j(`height: 100%; width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; align-items:center;justify-content: flex-start; font-size:${t.value.style.chart.legend.fontSize}px; text-align:left; line-height: ${t.value.style.chart.legend.fontSize}px; color:${t.value.style.chart.legend.color}`)
-                }, M(e.name) + ": " + M(h(D)({ v: e.proportion * 100, s: "%", r: t.value.style.chart.legend.roundingPercentage })) + " (" + M(h(ee)(
+                }, M(e.name) + ": " + M(h(S)({ v: e.proportion * 100, s: "%", r: t.value.style.chart.legend.roundingPercentage })) + " (" + M(h(te)(
                   t.value.style.chart.dataLabel.formatter,
                   e.value,
-                  h(D)({
+                  h(S)({
                     p: t.value.style.chart.legend.prefix,
                     v: e.value,
                     s: t.value.style.chart.legend.suffix,
                     r: t.value.style.chart.legend.roundingValue
                   }),
                   { datapoint: e, seriesIndex: c }
-                )) + ") ", 5)) : k("", !0),
-                S(d.$slots, "legend", R(Y({ datapoint: e, config: t.value, dataset: w.value })), void 0, !0)
-              ], 8, tl)),
-              e.fill.donut && b.value === e.id ? (n(), i("g", ll, [
-                (n(!0), i($, null, g(e.fill.donut, (l, a) => (n(), i("g", null, [
-                  V(l, e.fill.donut, !0) > 6 ? (n(), i("path", {
+                )) + ") ", 5)) : y("", !0),
+                T(a.$slots, "legend", Y(J({ datapoint: e, config: t.value, dataset: w.value })), void 0, !0)
+              ], 8, al)),
+              e.fill.donut && x.value === e.id ? (r(), i("g", nl, [
+                (r(!0), i(g, null, _(e.fill.donut, (l, n) => (r(), i("g", null, [
+                  V(l, e.fill.donut, !0) > 6 ? (r(), i("path", {
                     key: 0,
-                    d: h(be)(l, { x: l.cx, y: l.cy }, 0, 8, !1, !0, 0.5),
+                    d: h(Fe)(l, { x: l.cx, y: l.cy }, 0, 8, !1, !0, 0.5),
                     stroke: l.color,
                     class: "vue-ui-donut-arc-path",
                     "stroke-width": "0.5",
                     "stroke-linecap": "round",
                     "stroke-linejoin": "round",
                     fill: "none"
-                  }, null, 8, ol)) : k("", !0)
+                  }, null, 8, rl)) : y("", !0)
                 ]))), 256)),
-                (n(!0), i($, null, g(e.fill.donut, (l, a) => (n(), i("path", {
+                (r(!0), i(g, null, _(e.fill.donut, (l, n) => (r(), i("path", {
                   class: "vue-ui-donut-arc-path",
                   d: l.arcSlice,
                   fill: `${l.color}`,
                   stroke: t.value.style.chart.backgroundColor,
                   "stroke-width": 1
-                }, null, 8, sl))), 256)),
-                r("defs", null, [
-                  r("radialGradient", {
-                    id: `hollow_gradient_${x.value}`
+                }, null, 8, ul))), 256)),
+                u("defs", null, [
+                  u("radialGradient", {
+                    id: `hollow_gradient_${m.value}`
                   }, [
-                    r("stop", {
+                    u("stop", {
                       offset: "0%",
-                      "stop-color": `${h(T)(t.value.style.chart.backgroundColor)}00`
-                    }, null, 8, nl),
-                    rl,
-                    r("stop", {
+                      "stop-color": `${h(z)(t.value.style.chart.backgroundColor)}00`
+                    }, null, 8, dl),
+                    cl,
+                    u("stop", {
                       offset: "100%",
-                      "stop-color": `${h(T)(t.value.style.chart.backgroundColor)}00`
-                    }, null, 8, ul)
-                  ], 8, al)
+                      "stop-color": `${h(z)(t.value.style.chart.backgroundColor)}00`
+                    }, null, 8, hl)
+                  ], 8, il)
                 ]),
-                (n(!0), i($, null, g(e.fill.donut, (l, a) => (n(), i("circle", {
+                (r(!0), i(g, null, _(e.fill.donut, (l, n) => (r(), i("circle", {
                   class: "vue-ui-donut-arc-path",
                   cx: l.cx,
                   cy: l.cy,
                   r: 28,
-                  fill: `url(#hollow_gradient_${x.value})`
-                }, null, 8, il))), 256)),
-                (n(!0), i($, null, g(e.fill.donut, (l, a) => (n(), i("circle", {
+                  fill: `url(#hollow_gradient_${m.value})`
+                }, null, 8, vl))), 256)),
+                (r(!0), i(g, null, _(e.fill.donut, (l, n) => (r(), i("circle", {
                   class: "vue-ui-donut-arc-path",
                   cx: l.cx,
                   cy: l.cy,
                   r: 14,
                   fill: t.value.style.chart.backgroundColor
-                }, null, 8, dl))), 256)),
-                (n(!0), i($, null, g(e.fill.donut, (l, a) => (n(), i("g", null, [
-                  V(l, e.fill.donut, !0) > 6 ? (n(), i("g", cl, [
-                    r("text", {
+                }, null, 8, fl))), 256)),
+                (r(!0), i(g, null, _(e.fill.donut, (l, n) => (r(), i("g", null, [
+                  V(l, e.fill.donut, !0) > 6 ? (r(), i("g", pl, [
+                    u("text", {
                       "text-anchor": h(L)(l, !0, 0).anchor,
                       x: h(L)(l, !0, 2).x,
-                      y: h(te)(l, 12, 12),
+                      y: h(le)(l, 12, 12),
                       fill: t.value.style.chart.legend.color,
                       "font-size": t.value.style.chart.legend.fontSize / 1.5
-                    }, M(V(l, e.fill.donut)) + " (" + M(h(ee)(
+                    }, M(V(l, e.fill.donut)) + " (" + M(h(te)(
                       t.value.style.chart.dataLabel.formatter,
                       l.value,
-                      h(D)({
+                      h(S)({
                         p: t.value.style.chart.legend.prefix,
                         v: l.value,
                         s: t.value.style.chart.legend.suffix,
                         r: t.value.style.chart.legend.roundingValue
                       }),
-                      { datapoint: l, seriesIndex: a }
-                    )) + ") ", 9, hl),
-                    r("text", {
+                      { datapoint: l, seriesIndex: n }
+                    )) + ") ", 9, yl),
+                    u("text", {
                       "text-anchor": h(L)(l).anchor,
                       x: h(L)(l, !0, 2).x,
-                      y: h(te)(l, 12, 12) + t.value.style.chart.legend.fontSize / 1.5,
+                      y: h(le)(l, 12, 12) + t.value.style.chart.legend.fontSize / 1.5,
                       fill: t.value.style.chart.legend.color,
                       "font-size": t.value.style.chart.legend.fontSize / 1.5
-                    }, M(l.name), 9, vl)
-                  ])) : k("", !0)
+                    }, M(l.name), 9, kl)
+                  ])) : y("", !0)
                 ]))), 256))
-              ])) : k("", !0),
-              e.fill.miniDonut && !b.value ? (n(), i("g", fl, [
-                (n(!0), i($, null, g(e.fill.miniDonut, (l, a) => (n(), i("path", {
+              ])) : y("", !0),
+              e.fill.miniDonut && !x.value ? (r(), i("g", $l, [
+                (r(!0), i(g, null, _(e.fill.miniDonut, (l, n) => (r(), i("path", {
                   class: "vue-ui-donut-arc-path",
                   d: l.arcSlice,
                   fill: `${l.color}`,
                   stroke: t.value.style.chart.backgroundColor,
                   "stroke-width": 0.5
-                }, null, 8, pl))), 256))
-              ])) : k("", !0)
-            ], 12, Kt))), 256))
-          ])) : k("", !0)
-        ])) : k("", !0),
-        t.value.style.shape === "tube" ? (n(), i("g", yl, [
-          C.value ? k("", !0) : (n(), i("g", kl, [
-            r("path", {
+                }, null, 8, gl))), 256))
+              ])) : y("", !0)
+            ], 12, ll))), 256))
+          ])) : y("", !0)
+        ])) : y("", !0),
+        t.value.style.shape === "tube" ? (r(), i("g", _l, [
+          C.value ? y("", !0) : (r(), i("g", ml, [
+            u("path", {
               "stroke-dasharray": t.value.style.chart.box.strokeDasharray,
-              d: z.value.tubeTop,
+              d: N.value.tubeTop,
               stroke: t.value.style.chart.box.stroke,
               "stroke-width": t.value.style.chart.box.strokeWidth,
               "stroke-linejoin": "round",
               "stroke-linecap": "round",
               fill: "none"
-            }, null, 8, $l),
-            r("path", {
+            }, null, 8, xl),
+            u("path", {
               "stroke-dasharray": t.value.style.chart.box.strokeDasharray,
-              d: z.value.tubeLeft,
+              d: N.value.tubeLeft,
               stroke: t.value.style.chart.box.stroke,
               "stroke-width": t.value.style.chart.box.strokeWidth,
               "stroke-linejoin": "round",
               "stroke-linecap": "round",
               fill: "none"
-            }, null, 8, gl),
-            r("path", {
+            }, null, 8, bl),
+            u("path", {
               "stroke-dasharray": t.value.style.chart.box.strokeDasharray,
-              d: z.value.tubeRight,
+              d: N.value.tubeRight,
               stroke: t.value.style.chart.box.stroke,
               "stroke-width": t.value.style.chart.box.strokeWidth,
               "stroke-linejoin": "round",
               "stroke-linecap": "round",
               fill: "none"
-            }, null, 8, _l),
-            r("path", {
+            }, null, 8, wl),
+            u("path", {
               "stroke-dasharray": t.value.style.chart.box.strokeDasharray,
-              d: z.value.tubeBottom,
+              d: N.value.tubeBottom,
               stroke: t.value.style.chart.box.stroke,
               "stroke-width": t.value.style.chart.box.strokeWidth,
               "stroke-linejoin": "round",
               "stroke-linecap": "round",
               fill: "none"
-            }, null, 8, ml),
-            r("path", {
+            }, null, 8, Cl),
+            u("path", {
               d: E.value.tubeTop,
               stroke: t.value.style.chart.bar.stroke,
               "stroke-width": t.value.style.chart.bar.strokeWidth,
               "stroke-linejoin": "round",
               "stroke-linecap": "round",
-              fill: `url(#gradient_top${x.value})`
-            }, null, 8, xl),
-            r("path", {
+              fill: `url(#gradient_top${m.value})`
+            }, null, 8, Fl),
+            u("path", {
               d: E.value.tubeBody,
               stroke: t.value.style.chart.bar.stroke,
               "stroke-width": t.value.style.chart.bar.strokeWidth,
               "stroke-linejoin": "round",
               "stroke-linecap": "round",
-              fill: `url(#gradient_tube_body${x.value})`
-            }, null, 8, bl)
+              fill: `url(#gradient_tube_body${m.value})`
+            }, null, 8, Ml)
           ])),
-          C.value ? (n(), i("g", wl, [
-            (n(!0), i($, null, g(w.value, (e, c) => (n(), i("g", {
-              style: j(`opacity:${b.value ? b.value === e.id ? 1 : 0.3 : 1}`),
+          C.value ? (r(), i("g", Pl, [
+            (r(!0), i(g, null, _(w.value, (e, c) => (r(), i("g", {
+              style: j(`opacity:${x.value ? x.value === e.id ? 1 : 0.3 : 1}`),
               class: "vue-ui-3d-bar-stack",
-              onClick: (l) => H("selectDatapoint", e)
+              onClick: (l) => Z("selectDatapoint", e)
             }, [
-              r("defs", null, [
-                r("radialGradient", {
+              u("defs", null, [
+                u("radialGradient", {
                   id: `gradient_tube_top_${e.id}`,
                   fx: "10%",
                   cy: "55%"
                 }, [
-                  r("stop", {
+                  u("stop", {
                     offset: "0%",
                     "stop-color": `${h(A)(e.color, 0.5)}DD`
-                  }, null, 8, Ml),
-                  r("stop", {
+                  }, null, 8, jl),
+                  u("stop", {
                     offset: "100%",
-                    "stop-color": `${h(Q)(e.color, 0.1)}DD`
-                  }, null, 8, Pl)
-                ], 8, Fl),
-                r("linearGradient", {
+                    "stop-color": `${h(ee)(e.color, 0.1)}DD`
+                  }, null, 8, Tl)
+                ], 8, Sl),
+                u("linearGradient", {
                   id: `gradient_tube_body_${e.id}`,
                   x1: "0%",
                   y1: "0%",
                   x2: "100%",
                   y2: "0%"
                 }, [
-                  r("stop", {
+                  u("stop", {
                     offset: "0%",
                     "stop-color": `${e.color}`
-                  }, null, 8, jl),
-                  r("stop", {
+                  }, null, 8, Nl),
+                  u("stop", {
                     offset: "10%",
-                    "stop-color": `${h(Q)(e.color, 0.7)}FF`
-                  }, null, 8, Sl),
-                  r("stop", {
+                    "stop-color": `${h(ee)(e.color, 0.7)}FF`
+                  }, null, 8, Bl),
+                  u("stop", {
                     offset: "25%",
-                    "stop-color": `${h(Q)(e.color, 0.5)}FF`
-                  }, null, 8, Tl),
-                  r("stop", {
+                    "stop-color": `${h(ee)(e.color, 0.5)}FF`
+                  }, null, 8, Il),
+                  u("stop", {
                     offset: "75%",
                     "stop-color": `${e.color}DD`
-                  }, null, 8, zl),
-                  r("stop", {
+                  }, null, 8, Ll),
+                  u("stop", {
                     offset: "100%",
                     "stop-color": `${h(A)(e.color, 0.7)}FF`
-                  }, null, 8, Nl)
-                ], 8, Dl)
+                  }, null, 8, Ol)
+                ], 8, zl)
               ]),
-              r("path", {
+              u("path", {
                 onMouseenter: (l) => F(e),
                 onClick: (l) => F(e, !0),
                 onMouseout: W,
@@ -918,8 +930,8 @@ const le = (U) => (We("data-v-06e93dd9"), U = U(), Ge(), U), lt = ["id"], ot = [
                 "stroke-linejoin": "round",
                 "stroke-linecap": "round",
                 fill: `url(#gradient_tube_body_${e.id})`
-              }, null, 40, Bl),
-              c > 0 ? (n(), i("path", {
+              }, null, 40, Wl),
+              c > 0 ? (r(), i("path", {
                 key: 0,
                 onMouseenter: (l) => F(e),
                 onClick: (l) => F(e, !0),
@@ -930,8 +942,8 @@ const le = (U) => (We("data-v-06e93dd9"), U = U(), Ge(), U), lt = ["id"], ot = [
                 "stroke-linejoin": "round",
                 "stroke-linecap": "round",
                 fill: "none"
-              }, null, 40, Il)) : k("", !0),
-              r("path", {
+              }, null, 40, Gl)) : y("", !0),
+              u("path", {
                 onMouseenter: (l) => F(e),
                 onClick: (l) => F(e, !0),
                 onMouseout: W,
@@ -941,146 +953,146 @@ const le = (U) => (We("data-v-06e93dd9"), U = U(), Ge(), U), lt = ["id"], ot = [
                 "stroke-linejoin": "round",
                 "stroke-linecap": "round",
                 fill: `url(#gradient_tube_top_${e.id})`
-              }, null, 40, Ll)
-            ], 12, Cl))), 256)),
-            (n(!0), i($, null, g(w.value, (e, c) => (n(), i("g", {
-              style: j(`opacity:${b.value ? b.value === e.id ? 1 : 0 : e.proportion * 100 > t.value.style.chart.legend.hideUnderPercentage ? 1 : 0}`),
-              onClick: (l) => H("selectDatapoint", e)
+              }, null, 40, Vl)
+            ], 12, Dl))), 256)),
+            (r(!0), i(g, null, _(w.value, (e, c) => (r(), i("g", {
+              style: j(`opacity:${x.value ? x.value === e.id ? 1 : 0 : e.proportion * 100 > t.value.style.chart.legend.hideUnderPercentage ? 1 : 0}`),
+              onClick: (l) => Z("selectDatapoint", e)
             }, [
-              r("path", {
+              u("path", {
                 stroke: t.value.style.chart.color,
                 "stroke-dasharray": "1",
                 "stroke-width": "0.5",
                 "stroke-linecap": "round",
                 d: `M${e.fill.sidePointer.x},${e.fill.sidePointer.y} ${e.fill.sidePointer.x + 20},${e.fill.sidePointer.y}`
-              }, null, 8, Wl),
-              !e.fill.miniDonut || b.value ? (n(), i("circle", {
+              }, null, 8, Ul),
+              !e.fill.miniDonut || x.value ? (r(), i("circle", {
                 key: 0,
                 cx: e.fill.sidePointer.x + 20,
                 cy: e.fill.sidePointer.y,
                 r: 2,
                 fill: e.color,
                 stroke: t.value.style.chart.backgroundColor
-              }, null, 8, Gl)) : k("", !0),
-              (n(), i("foreignObject", {
+              }, null, 8, El)) : y("", !0),
+              (r(), i("foreignObject", {
                 x: e.fill.sidePointer.x + 30,
                 y: e.fill.sidePointer.y - t.value.style.chart.legend.fontSize,
                 width: o.value.absoluteWidth / 2 - 12,
                 height: t.value.style.chart.legend.fontSize * 2,
                 style: { overflow: "visible", position: "relative" }
               }, [
-                t.value.style.chart.legend.showDefault ? (n(), i("div", {
+                t.value.style.chart.legend.showDefault ? (r(), i("div", {
                   key: 0,
                   style: j(`height: 100%; width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; align-items:center;justify-content: flex-start; font-size:${t.value.style.chart.legend.fontSize}px; text-align:left; line-height: ${t.value.style.chart.legend.fontSize}px; color:${t.value.style.chart.legend.color}`)
-                }, M(e.name) + ": " + M(h(D)({ v: e.proportion * 100, s: "%", r: t.value.style.chart.legend.roundingPercentage })) + " (" + M(h(ee)(
+                }, M(e.name) + ": " + M(h(S)({ v: e.proportion * 100, s: "%", r: t.value.style.chart.legend.roundingPercentage })) + " (" + M(h(te)(
                   t.value.style.chart.dataLabel.formatter,
                   e.value,
-                  h(D)({
+                  h(S)({
                     p: t.value.style.chart.legend.prefix,
                     v: e.value,
                     s: t.value.style.chart.legend.suffix,
                     r: t.value.style.chart.legend.roundingValue
                   }),
                   { datapoint: e, seriesIndex: c }
-                )) + ") ", 5)) : k("", !0),
-                S(d.$slots, "legend", R(Y({ datapoint: e, config: t.value, dataset: w.value })), void 0, !0)
-              ], 8, Vl)),
-              e.fill.donut && b.value === e.id ? (n(), i("g", Al, [
-                (n(!0), i($, null, g(e.fill.donut, (l, a) => (n(), i("g", null, [
-                  V(l, e.fill.donut, !0) > 6 ? (n(), i("path", {
+                )) + ") ", 5)) : y("", !0),
+                T(a.$slots, "legend", Y(J({ datapoint: e, config: t.value, dataset: w.value })), void 0, !0)
+              ], 8, Hl)),
+              e.fill.donut && x.value === e.id ? (r(), i("g", Zl, [
+                (r(!0), i(g, null, _(e.fill.donut, (l, n) => (r(), i("g", null, [
+                  V(l, e.fill.donut, !0) > 6 ? (r(), i("path", {
                     key: 0,
-                    d: h(be)(l, { x: l.cx, y: l.cy }, 0, 8, !1, !0, 0.5),
+                    d: h(Fe)(l, { x: l.cx, y: l.cy }, 0, 8, !1, !0, 0.5),
                     stroke: l.color,
                     class: "vue-ui-donut-arc-path",
                     "stroke-width": "0.5",
                     "stroke-linecap": "round",
                     "stroke-linejoin": "round",
                     fill: "none"
-                  }, null, 8, Ul)) : k("", !0)
+                  }, null, 8, ql)) : y("", !0)
                 ]))), 256)),
-                (n(!0), i($, null, g(e.fill.donut, (l, a) => (n(), i("path", {
+                (r(!0), i(g, null, _(e.fill.donut, (l, n) => (r(), i("path", {
                   class: "vue-ui-donut-arc-path",
                   d: l.arcSlice,
                   fill: `${l.color}`,
                   stroke: t.value.style.chart.backgroundColor,
                   "stroke-width": 1
-                }, null, 8, El))), 256)),
-                r("defs", null, [
-                  r("radialGradient", {
-                    id: `hollow_gradient_${x.value}`
+                }, null, 8, Xl))), 256)),
+                u("defs", null, [
+                  u("radialGradient", {
+                    id: `hollow_gradient_${m.value}`
                   }, [
-                    r("stop", {
+                    u("stop", {
                       offset: "0%",
-                      "stop-color": `${h(T)(t.value.style.chart.backgroundColor)}00`
-                    }, null, 8, Zl),
-                    ql,
-                    r("stop", {
+                      "stop-color": `${h(z)(t.value.style.chart.backgroundColor)}00`
+                    }, null, 8, Yl),
+                    Jl,
+                    u("stop", {
                       offset: "100%",
-                      "stop-color": `${h(T)(t.value.style.chart.backgroundColor)}00`
-                    }, null, 8, Xl)
-                  ], 8, Hl)
+                      "stop-color": `${h(z)(t.value.style.chart.backgroundColor)}00`
+                    }, null, 8, Kl)
+                  ], 8, Rl)
                 ]),
-                (n(!0), i($, null, g(e.fill.donut, (l, a) => (n(), i("circle", {
+                (r(!0), i(g, null, _(e.fill.donut, (l, n) => (r(), i("circle", {
                   class: "vue-ui-donut-arc-path",
                   cx: l.cx,
                   cy: l.cy,
                   r: 28,
-                  fill: `url(#hollow_gradient_${x.value})`
-                }, null, 8, Rl))), 256)),
-                (n(!0), i($, null, g(e.fill.donut, (l, a) => (n(), i("circle", {
+                  fill: `url(#hollow_gradient_${m.value})`
+                }, null, 8, Ql))), 256)),
+                (r(!0), i(g, null, _(e.fill.donut, (l, n) => (r(), i("circle", {
                   class: "vue-ui-donut-arc-path",
                   cx: l.cx,
                   cy: l.cy,
                   r: 14,
                   fill: t.value.style.chart.backgroundColor
-                }, null, 8, Yl))), 256)),
-                (n(!0), i($, null, g(e.fill.donut, (l, a) => (n(), i("g", null, [
-                  V(l, e.fill.donut, !0) > 6 ? (n(), i("g", Jl, [
-                    r("text", {
+                }, null, 8, eo))), 256)),
+                (r(!0), i(g, null, _(e.fill.donut, (l, n) => (r(), i("g", null, [
+                  V(l, e.fill.donut, !0) > 6 ? (r(), i("g", to, [
+                    u("text", {
                       "text-anchor": h(L)(l, !0, 0).anchor,
                       x: h(L)(l, !0, 2).x,
-                      y: h(te)(l, 12, 12),
+                      y: h(le)(l, 12, 12),
                       fill: t.value.style.chart.legend.color,
                       "font-size": t.value.style.chart.legend.fontSize / 1.5
-                    }, M(V(l, e.fill.donut)) + " (" + M(h(ee)(
+                    }, M(V(l, e.fill.donut)) + " (" + M(h(te)(
                       t.value.style.chart.dataLabel.formatter,
                       l.value,
-                      h(D)({
+                      h(S)({
                         p: t.value.style.chart.legend.prefix,
                         v: l.value,
                         s: t.value.style.chart.legend.suffix,
                         r: t.value.style.chart.legend.roundingValue
                       }),
-                      { datapoint: l, seriesIndex: a }
-                    )) + ") ", 9, Kl),
-                    r("text", {
+                      { datapoint: l, seriesIndex: n }
+                    )) + ") ", 9, lo),
+                    u("text", {
                       "text-anchor": h(L)(l).anchor,
                       x: h(L)(l, !0, 2).x,
-                      y: h(te)(l, 12, 12) + t.value.style.chart.legend.fontSize / 1.5,
+                      y: h(le)(l, 12, 12) + t.value.style.chart.legend.fontSize / 1.5,
                       fill: t.value.style.chart.legend.color,
                       "font-size": t.value.style.chart.legend.fontSize / 1.5
-                    }, M(l.name), 9, Ql)
-                  ])) : k("", !0)
+                    }, M(l.name), 9, oo)
+                  ])) : y("", !0)
                 ]))), 256))
-              ])) : k("", !0),
-              e.fill.miniDonut && !b.value ? (n(), i("g", eo, [
-                (n(!0), i($, null, g(e.fill.miniDonut, (l, a) => (n(), i("path", {
+              ])) : y("", !0),
+              e.fill.miniDonut && !x.value ? (r(), i("g", so, [
+                (r(!0), i(g, null, _(e.fill.miniDonut, (l, n) => (r(), i("path", {
                   class: "vue-ui-donut-arc-path",
                   d: l.arcSlice,
                   fill: `${l.color}`,
                   stroke: t.value.style.chart.backgroundColor,
                   "stroke-width": 0.5
-                }, null, 8, to))), 256))
-              ])) : k("", !0)
-            ], 12, Ol))), 256))
-          ])) : k("", !0)
-        ])) : k("", !0),
-        S(d.$slots, "svg", { svg: o.value }, void 0, !0)
-      ], 14, ot)) : k("", !0),
-      d.$slots.watermark ? (n(), i("div", lo, [
-        S(d.$slots, "watermark", R(Y({ isPrinting: h(ue) || h(ie) })), void 0, !0)
-      ])) : k("", !0),
-      Z.value ? k("", !0) : (n(), ae(Ke, {
+                }, null, 8, ao))), 256))
+              ])) : y("", !0)
+            ], 12, Al))), 256))
+          ])) : y("", !0)
+        ])) : y("", !0),
+        T(a.$slots, "svg", { svg: o.value }, void 0, !0)
+      ], 14, rt)) : y("", !0),
+      a.$slots.watermark ? (r(), i("div", no, [
+        T(a.$slots, "watermark", Y(J({ isPrinting: h(ce) || h(he) })), void 0, !0)
+      ])) : y("", !0),
+      q.value ? y("", !0) : (r(), H(lt, {
         key: 4,
         config: {
           type: "bar3d",
@@ -1092,11 +1104,11 @@ const le = (U) => (We("data-v-06e93dd9"), U = U(), Ge(), U), lt = ["id"], ot = [
           }
         }
       }, null, 8, ["config"])),
-      Z.value && C.value ? (n(), ae(et, {
+      q.value && C.value ? (r(), H(st, {
         key: 5,
         hideDetails: "",
         config: {
-          open: q.value.showTable,
+          open: X.value.showTable,
           maxHeight: 1e4,
           body: {
             backgroundColor: t.value.style.chart.backgroundColor,
@@ -1109,31 +1121,32 @@ const le = (U) => (We("data-v-06e93dd9"), U = U(), Ge(), U), lt = ["id"], ot = [
         }
       }, {
         content: I(() => [
-          _e(Qe, {
-            colNames: X.value.colNames,
-            head: X.value.head,
-            body: X.value.body,
-            config: X.value.config,
+          (r(), H(ot, {
+            key: `table_${ie.value}`,
+            colNames: R.value.colNames,
+            head: R.value.head,
+            body: R.value.body,
+            config: R.value.config,
             title: `${t.value.style.chart.title.text}${t.value.style.chart.title.subtitle.text ? ` : ${t.value.style.chart.title.subtitle.text}` : ""}`,
-            onClose: s[1] || (s[1] = (e) => q.value.showTable = !1)
+            onClose: s[1] || (s[1] = (e) => X.value.showTable = !1)
           }, {
             th: I(({ th: e }) => [
-              r("div", {
+              u("div", {
                 innerHTML: e,
                 style: { display: "flex", "align-items": "center" }
-              }, null, 8, oo)
+              }, null, 8, ro)
             ]),
             td: I(({ td: e }) => [
-              Le(M(e.name || e), 1)
+              Ve(M(e.name || e), 1)
             ]),
             _: 1
-          }, 8, ["colNames", "head", "body", "config", "title"])
+          }, 8, ["colNames", "head", "body", "config", "title"]))
         ]),
         _: 1
-      }, 8, ["config"])) : k("", !0)
-    ], 12, lt));
+      }, 8, ["config"])) : y("", !0)
+    ], 12, nt));
   }
-}, po = /* @__PURE__ */ tt(so, [["__scopeId", "data-v-06e93dd9"]]);
+}, go = /* @__PURE__ */ at(uo, [["__scopeId", "data-v-11451b65"]]);
 export {
-  po as default
+  go as default
 };