vue-data-ui 3.0.0-next.7 → 3.0.0-next.70

package/dist/vue-ui-3d-bar-CtPXePUa.js

@@ -0,0 +1,1323 @@
+import { defineAsyncComponent as te, computed as S, ref as b, toRefs as yt, watch as Re, onMounted as kt, createElementBlock as c, openBlock as u, unref as n, normalizeStyle as I, normalizeClass as Ve, createBlock as J, createCommentVNode as p, createSlots as gt, withCtx as D, renderSlot as T, normalizeProps as re, guardReactiveProps as ue, createVNode as $t, createElementVNode as i, Fragment as C, renderList as M, toDisplayString as E, withKeys as He, withModifiers as Ue, mergeProps as Xe, createTextVNode as _t, nextTick as Ze } from "vue";
+import { u as mt, c as qe, t as bt, a as xt, p as ie, b as wt, d as Ct, e as Mt, o as Ft, f as de, g as $e, l as W, m as Ye, h as Pt, i as j, X as Tt, s as $, j as H, k as ce, n as Ke, q as ve, r as G, v as At, w as St } from "./index-CnY41r21.js";
+import { u as Je } from "./useNestedProp-DtUATNAU.js";
+import { u as Dt } from "./usePrinter-CJ1uZx0D.js";
+import { u as jt } from "./useUserOptionState-BIvW1Kz7.js";
+import { u as zt } from "./useChartAccessibility-9icAAmYg.js";
+import Ot from "./Title-feqCv0Si.js";
+import It from "./img-_RMhslMZ.js";
+import { t as Nt, u as Bt } from "./useResponsive-DfdjqQps.js";
+import { u as Lt, B as Et } from "./useLoading-D7YHNtLX.js";
+import { _ as Wt } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const Gt = ["id"], Rt = ["xmlns", "viewBox"], Vt = ["width", "height"], Ht = ["id"], Ut = ["stop-color"], Xt = ["stop-color"], Zt = ["id"], qt = ["stop-color"], Yt = ["stop-color"], 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 = ["stop-color"], rl = ["stop-color"], ul = ["stop-color"], il = { key: 1 }, dl = ["id"], cl = ["stop-color"], vl = ["stop-color"], hl = ["id"], fl = ["stop-color"], pl = ["stop-color"], yl = ["id"], kl = ["stop-color"], gl = ["stop-color"], $l = ["id"], _l = ["x", "y", "font-size", "font-weight", "fill"], ml = ["x", "y"], bl = ["cx", "cy", "stroke", "opacity"], xl = ["d", "stroke"], wl = ["d", "stroke"], Cl = { key: 4 }, Ml = { key: 0 }, Fl = ["stroke-dasharray", "d", "stroke", "stroke-width"], Pl = ["stroke-dasharray", "d", "stroke", "stroke-width"], Tl = ["stroke-dasharray", "d", "stroke", "stroke-width"], Al = ["stroke-dasharray", "d", "stroke", "stroke-width"], Sl = { key: 1 }, Dl = ["d", "stroke", "stroke-width", "fill"], jl = ["d", "stroke", "stroke-width", "fill"], zl = ["d", "stroke", "stroke-width", "fill"], Ol = { key: 2 }, Il = ["d", "fill", "onMouseenter", "onClick", "onMouseout"], Nl = ["d", "fill", "onMouseenter", "onClick", "onMouseout"], Bl = ["d", "fill", "onMouseenter", "onClick", "onMouseout"], Ll = ["d", "onMouseenter", "onClick", "onMouseout"], El = ["d"], Wl = ["d", "stroke"], Gl = ["onClick"], Rl = ["stroke", "d"], Vl = ["cx", "cy", "fill", "stroke"], Hl = ["x", "y", "width", "height"], Ul = ["x", "y", "width", "height"], Xl = { key: 3 }, Zl = ["d", "stroke"], ql = ["d", "fill", "stroke"], Yl = { key: 0 }, Kl = ["text-anchor", "x", "y", "fill", "font-size"], Jl = ["text-anchor", "x", "y", "fill", "font-size"], Ql = { key: 4 }, eo = ["d", "fill", "stroke"], to = { key: 5 }, lo = { key: 0 }, oo = ["stroke-dasharray", "d", "stroke", "stroke-width"], so = ["stroke-dasharray", "d", "stroke", "stroke-width"], ao = ["stroke-dasharray", "d", "stroke", "stroke-width"], no = ["stroke-dasharray", "d", "stroke", "stroke-width"], ro = ["d", "stroke", "stroke-width", "fill"], uo = ["d", "stroke", "stroke-width", "fill"], io = ["d"], co = { key: 1 }, vo = ["onClick"], ho = ["id"], fo = ["stop-color"], po = ["stop-color"], yo = ["id"], ko = ["stop-color"], go = ["stop-color"], $o = ["stop-color"], _o = ["stop-color"], mo = ["stop-color"], bo = ["onMouseenter", "onClick", "onMouseout", "d", "fill"], xo = ["onMouseenter", "onClick", "onMouseout", "d"], wo = ["onMouseenter", "onClick", "onMouseout", "d", "fill"], Co = ["onClick"], Mo = ["stroke", "d"], Fo = ["cx", "cy", "fill", "stroke"], Po = ["x", "y", "width", "height"], To = ["x", "y", "width", "height"], Ao = { key: 3 }, So = ["d", "stroke"], Do = ["d", "fill", "stroke"], jo = { key: 0 }, zo = ["text-anchor", "x", "y", "fill", "font-size"], Oo = ["text-anchor", "x", "y", "fill", "font-size"], Io = { key: 4 }, No = ["d", "fill", "stroke"], Bo = {
+  key: 3,
+  class: "vue-data-ui-watermark"
+}, Lo = ["innerHTML"], Eo = {
+  __name: "vue-ui-3d-bar",
+  props: {
+    config: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    dataset: {
+      type: Object,
+      default() {
+        return {};
+      }
+    }
+  },
+  emits: ["selectDatapoint"],
+  setup(Qe, { expose: et, emit: tt }) {
+    const lt = te(() => import("./vue-ui-accordion-CnLY8CrQ.js")), ot = te(() => import("./DataTable-CKpA_OA_.js")), st = te(() => import("./PackageVersion-CBHvscRY.js")), at = te(() => import("./PenAndPaper-BCcfYvgR.js")), nt = te(() => import("./UserOptions-CGnAZpYs.js")), { vue_ui_3d_bar: rt } = mt(), A = Qe, le = tt, _e = S(() => !!A.dataset && Object.keys(A.dataset).length), F = b(qe()), ut = b(null), R = b(null), z = b(!1), me = b(0), be = b(0), xe = b(null), Q = b(null), oe = b(null), we = b(null), ee = b(!1), t = b(fe()), { loading: U, FINAL_DATASET: O } = Lt({
+      ...yt(A),
+      FINAL_CONFIG: t,
+      prepareConfig: fe,
+      callback: () => {
+        Promise.resolve().then(async () => {
+          await Ze(), je();
+        });
+      },
+      skeletonDataset: {
+        series: [
+          {
+            name: "_",
+            value: 21,
+            breakdown: [
+              { name: "_", value: 13 },
+              { name: "_", value: 8 }
+            ]
+          },
+          {
+            name: "_",
+            value: 13,
+            breakdown: [
+              { name: "_", value: 8 },
+              { name: "_", value: 5 }
+            ]
+          },
+          {
+            name: "_",
+            value: 8,
+            breakdown: [
+              { name: "_", value: 5 },
+              { name: "_", value: 3 }
+            ]
+          }
+        ]
+      },
+      skeletonConfig: bt({
+        defaultConfig: t.value,
+        userConfig: {
+          customPalette: ["#808080", "#ADADAD", "#DBDBDB"],
+          userOptions: { show: !1 },
+          table: { show: !1 },
+          style: {
+            chart: {
+              backgroundColor: "#99999930",
+              color: "#6A6A6A",
+              bar: {
+                color: "#ADADAD",
+                stroke: "#6A6A6A"
+              },
+              box: {
+                stroke: "#6A6A6A"
+              }
+            }
+          }
+        }
+      })
+    }), { userOptionsVisible: he, setUserOptionsVisibility: Ce, keepUserOptionState: Me } = jt({ config: t.value }), { svgRef: Fe } = zt({ config: t.value.style.chart.title });
+    function fe() {
+      const a = Je({
+        userConfig: A.config,
+        defaultConfig: rt
+      });
+      return a.theme ? {
+        ...Je({
+          userConfig: wt.vue_ui_3d_bar[a.theme] || A.config,
+          defaultConfig: a
+        }),
+        customPalette: xt[a.theme] || ie
+      } : a;
+    }
+    Re(() => A.config, (a) => {
+      U.value || (t.value = fe()), he.value = !t.value.userOptions.showOnChartHover, ze(), me.value += 1, be.value += 1, X.value.showTable = t.value.table.show;
+    }, { deep: !0 });
+    const { isPrinting: Pe, isImaging: Te, generatePdf: Ae, generateImage: Se } = Dt({
+      elementId: `3d_bar_${F.value}`,
+      fileName: t.value.style.chart.title.text || "vue-ui-3d-bar",
+      options: t.value.userOptions.print
+    }), it = S(() => Ct(t.value.customPalette)), X = b({
+      showTable: t.value.table.show
+    });
+    Re(t, () => {
+      X.value = {
+        showTable: t.value.table.show
+      };
+    }, { immediate: !0 });
+    const x = S(() => O.value.series && O.value.series.length), pe = b(t.value.style.chart.box.dimensions.width * (x.value ? 2 : 1)), De = b(t.value.style.chart.box.dimensions.height), o = S(() => ({
+      height: De.value,
+      width: pe.value,
+      absoluteWidth: pe.value,
+      top: t.value.style.chart.box.dimensions.top,
+      bottom: t.value.style.chart.box.dimensions.bottom,
+      left: t.value.style.chart.box.dimensions.left,
+      right: t.value.style.chart.box.dimensions.right,
+      perspective: t.value.style.chart.box.dimensions.perspective
+    })), w = S(() => {
+      if (x.value) {
+        const a = O.value.series.map((l) => l.value || 0).reduce((l, d) => l + d, 0), s = O.value.series.map((l, d) => ({
+          ...l,
+          seriesIndex: d,
+          id: qe(),
+          proportion: (l.value || 0) / a,
+          color: Mt(l.color) || it.value[d] || ie[d] || ie[d % ie.length],
+          breakdown: l.breakdown ? l.breakdown.sort((r, k) => k.value - r.value) : null
+        })).sort((l, d) => d.value - l.value), e = [];
+        let v = 0;
+        for (let l = 0; l < s.length; l += 1)
+          e.push({
+            ...s[l],
+            fill: dt(v, s[l].proportion, s[l].breakdown, s[l].color)
+          }), v += s[l].proportion;
+        return e;
+      }
+      return null;
+    }), N = S(() => {
+      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}`,
+        left: `M${a},${o.value.top} ${o.value.left},${o.value.top + o.value.perspective} ${o.value.left},${o.value.height - o.value.bottom - o.value.perspective} ${a},${o.value.height - o.value.bottom}`,
+        side: `M${a},${o.value.height - o.value.bottom} ${a},${o.value.top + o.value.perspective * 2}`,
+        topSides: `M${o.value.left},${o.value.top + o.value.perspective} ${a},${o.value.top + o.value.perspective * 2} ${o.value.width - o.value.right},${o.value.top + o.value.perspective}`,
+        tubeTop: `M${o.value.left},${o.value.top + o.value.perspective} C ${o.value.left},${o.value.top - o.value.perspective / 3} ${o.value.width - o.value.right},${o.value.top - o.value.perspective / 3} ${o.value.width - o.value.right},${o.value.top + o.value.perspective} C ${o.value.width - o.value.right},${o.value.top + o.value.perspective * 2.3} ${o.value.left},${o.value.top + o.value.perspective * 2.3} ${o.value.left},${o.value.top + o.value.perspective}`,
+        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}`
+      };
+    }), Z = b(t.value.style.chart.animation.use ? 0 : O.value.percentage);
+    function je() {
+      let a = 0, s = t.value.style.chart.animation.speed, e = 5e-3 * t.value.style.chart.animation.acceleration;
+      function v() {
+        Z.value += s + a, a += e, Z.value < O.value.percentage ? requestAnimationFrame(v) : Z.value = O.value.percentage;
+      }
+      t.value.style.chart.animation.use && (Z.value = 0, v());
+    }
+    kt(() => {
+      ze(), je();
+    });
+    const se = S(() => !!t.value.debug);
+    function ze() {
+      if (Ft(A.dataset) ? de({
+        componentName: "VueUi3dBar",
+        type: "dataset",
+        debug: se.value
+      }) : A.dataset.series ? A.dataset.series.forEach((a, s) => {
+        $e({
+          datasetObject: a,
+          requiredAttributes: ["name", "value"]
+        }).forEach((e) => {
+          de({
+            componentName: "VueUi3dBar",
+            type: "datasetSerieAttribute",
+            property: e,
+            index: s,
+            debug: se.value
+          });
+        }), a.breakdown && a.breakdown.forEach((e, v) => {
+          $e({
+            datasetObject: e,
+            requiredAttributes: ["name", "value"]
+          }).forEach((l) => {
+            de({
+              componentName: "VueUi3dBar",
+              type: "datasetSerieAttribute",
+              property: l,
+              index: `${s} - ${v}`,
+              debug: se.value
+            });
+          });
+        });
+      }) : $e({
+        datasetObject: A.dataset,
+        requiredAttributes: ["percentage"]
+      }).forEach((a) => {
+        de({
+          componentName: "VueUi3dBar",
+          type: "datasetAttribute",
+          property: a,
+          debug: se.value
+        });
+      }), t.value.responsive) {
+        const a = Nt(() => {
+          const { width: s, height: e } = Bt({
+            chart: R.value,
+            title: t.value.style.chart.title.text ? xe.value : null,
+            source: we.value
+          });
+          requestAnimationFrame(() => {
+            De.value = e - 12, pe.value = s;
+          });
+        });
+        Q.value && (oe.value && Q.value.unobserve(oe.value), Q.value.disconnect()), Q.value = new ResizeObserver(a), oe.value = R.value.parentNode, Q.value.observe(oe.value);
+      }
+    }
+    const q = S(() => o.value.width / 4);
+    function dt(a, s, e, v) {
+      const l = o.value.height - o.value.bottom - o.value.top - o.value.perspective * 2, { width: d, height: r, bottom: k, right: L, left: g, perspective: y } = o.value, f = x.value ? d / 4 : d / 2, m = f * 2 + g, h = k + l * a, ge = r - h - y - l * s / 2, ht = ge > o.value.height / 2 ? "top" : "bottom", Le = r * 0.25, ft = !!e;
+      let Ee = null, We = null;
+      return ft && (e = e.map((Ge, pt) => ({
+        ...Ge,
+        value: Ge.value || 0,
+        color: W(v, pt / e.length)
+      })), Ee = Ye(
+        { series: e },
+        d / 2 + d / 5,
+        ht === "top" ? ge - Le : ge + Le,
+        d / 10,
+        d / 10,
+        1.99999,
+        2,
+        1,
+        360,
+        105.25,
+        d / 20
+      ), We = Ye(
+        { series: e },
+        d - m + d / 14,
+        r - h - y - l * s / 2,
+        d / 40,
+        d / 40,
+        1.99999,
+        2,
+        1,
+        360,
+        105.25,
+        d / 40
+      )), {
+        donut: Ee,
+        miniDonut: We,
+        donutR: d / 20,
+        CENTER_X: f,
+        sidePointer: {
+          x: d - m,
+          x2: d - m + d / 14,
+          xText: d - m + d / 9,
+          y: r - h - y - l * s / 2,
+          topY: r - h - y - 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 - m},${r - h - y - l * s} ${d - m},${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 - m},${r - h - y - l * s}`,
+        liningTopShade: `M${g},${r - h - y - l * s - 0.5} ${f},${r - h - l * s - 0.5} ${d - m},${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 - m},${r - h - y - l * s} Z`,
+        tubeTop: `M${g},${r - h - l * s - y} C ${g},${r - h - l * s - y * 2.5} ${d - m},${r - h - l * s - y * 2.5} ${d - m},${r - h - l * s - y} C ${d - m},${r - h - l * s + y / 2} ${g},${r - h - l * s + y / 2} ${g},${r - h - l * s - y}`,
+        bottomTubeTop: `M ${d - m - 0.5},${r - h - y} C ${d - m - 0.5},${r - h + y / 2} ${g},${r - h + y / 2} ${g + 0.5},${r - h - y}`,
+        tubeBody: `M
+        ${g},${r - h - l * s - y} 
+        C ${g},${r - h - l * s + y / 2} 
+        ${d - m},${r - h - l * s + y / 2} 
+        ${d - m},${r - h - l * s - y} 
+        L${d - m},${r - h - y}
+        C 
+        ${d - m},${r - h + y / 2}
+        ${g},${r - h + y / 2}
+        ${g},${r - h - y}Z`
+      };
+    }
+    const Y = S(() => {
+      const a = Pt(Z.value / 100), s = o.value.height - o.value.bottom - o.value.top - o.value.perspective * 2, { width: e, height: v, bottom: l, right: d, left: r, perspective: k } = o.value, L = x.value ? e / 4 : e / 2, g = x.value ? L * 2 + r : d, f = l + s * 0;
+      return {
+        right: `M${L},${v - f} ${L},${v - f - s * a} ${e - g},${v - f - k - s * a} ${e - g},${v - f - k}Z`,
+        left: `M${L},${v - f} ${L},${v - f - s * a} ${r}, ${v - f - k - s * a} ${r},${v - f - k}Z`,
+        top: `M${L},${v - f - s * a} ${r},${v - f - k - s * a} ${L},${v - f - k * 2 - s * a} ${e - g},${v - f - k - s * a} Z`,
+        tubeTop: `M${r},${v - f - s * a - k} C ${r},${v - f - s * a - k * 2.5} ${e - g},${v - f - s * a - k * 2.5} ${e - g},${v - f - s * a - k} C ${e - g},${v - f - s * a + k / 2} ${r},${v - f - s * a + k / 2} ${r},${v - f - s * a - k}`,
+        tubeBody: `M
+        ${r},${v - f - s * a - k} 
+        C ${r},${v - f - s * a + k / 2} 
+        ${e - g},${v - f - s * a + k / 2} 
+        ${e - g},${v - f - s * a - k} 
+        L${e - g},${v - k * 1.5}
+        C 
+        ${e - g},${v}
+        ${r},${v}
+        ${r},${v - f - k}Z`
+      };
+    }), _ = b(null);
+    function P(a, s = !1) {
+      t.value.events.datapointEnter && !s && t.value.events.datapointEnter({ datapoint: a, seriesIndex: a.seriesIndex }), t.value.events.datapointClick && s && t.value.events.datapointClick({ datapoint: a, seriesIndex: a.seriesIndex }), le("selectDatapoint", a), s || (_.value = a.id), s && z.value && (z.value = !1), s && !z.value && (z.value = !0);
+    }
+    function V(a) {
+      t.value.events.datapointLeave && t.value.events.datapointLeave({ datapoint: a, seriesIndex: a.seriesIndex }), !z.value && (_.value = null);
+    }
+    function K(a, s, e = !1) {
+      const v = O.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 / Oe(s)) ? 0 : a.value / Oe(s) * 100;
+      return e ? d : l.toFixed(0) + "%";
+    }
+    function Oe(a) {
+      return [...a].map((s) => s.value).reduce((s, e) => s + e, 0);
+    }
+    const ye = b(!1);
+    function Ie(a) {
+      ye.value = a;
+    }
+    function ct() {
+      return x.value ? w.value : O.value.percentage;
+    }
+    const B = S(() => {
+      if (x.value) {
+        const a = w.value.flatMap((e) => e.breakdown && e.breakdown.length ? [{ name: e.name, color: e.color }, ...e.breakdown.map((v, l) => ({
+          name: v.name,
+          color: W(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((v) => v.value)] : e.value);
+        return { head: a, body: s };
+      } else
+        return null;
+    });
+    function Ne(a = null) {
+      if (!x.value) {
+        console.warn("VueUi3dBar : CSV download is only available in stack mode (providing dataset.series instead of dataset.percentage)");
+        return;
+      }
+      Ze(() => {
+        const s = w.value.map((d) => d.value).reduce((d, r) => d + r, 0), e = B.value.head.map((d, r) => [[
+          d.name
+        ], [B.value.body[r]], [isNaN(B.value.body[r] / s) ? "-" : B.value.body[r] / s * 100]]), v = [[t.value.style.chart.title.text], [t.value.style.chart.title.subtitle.text], [[""], ["val"], ["%"]]].concat(e), l = At(v);
+        a ? a(l) : St({ csvContent: l, title: t.value.style.chart.title.text || "vue-ui-3d-bar" });
+      });
+    }
+    const ae = S(() => {
+      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>',
+        j({ p: t.value.style.chart.legend.prefix, v: a, s: t.value.style.chart.legend.suffix, r: t.value.table.td.roundingValue }),
+        "100%"
+      ], e = B.value.head.map((d, r) => {
+        const k = j({ p: t.value.style.chart.legend.prefix, v: B.value.body[r], s: t.value.style.chart.legend.suffix, r: t.value.table.td.roundingValue });
+        return [
+          {
+            color: d.color,
+            name: d.name
+          },
+          k,
+          isNaN(B.value.body[r] / a) ? "-" : j({
+            v: B.value.body[r] / a * 100,
+            s: "%",
+            r: t.value.table.td.roundingPercentage
+          })
+        ];
+      }), v = {
+        th: {
+          backgroundColor: t.value.table.th.backgroundColor,
+          color: t.value.table.th.color,
+          outline: t.value.table.th.outline
+        },
+        td: {
+          backgroundColor: t.value.table.td.backgroundColor,
+          color: t.value.table.td.color,
+          outline: t.value.table.td.outline
+        },
+        breakpoint: t.value.table.responsiveBreakpoint,
+        shape: t.value.style.shape === "tube" ? "circle" : "square"
+      };
+      return {
+        colNames: [
+          t.value.table.columnNames.series,
+          t.value.table.columnNames.value,
+          t.value.table.columnNames.percentage
+        ],
+        head: s,
+        body: e,
+        config: v
+      };
+    });
+    function Be() {
+      X.value.showTable = !X.value.showTable;
+    }
+    const ne = b(!1);
+    function ke() {
+      ne.value = !ne.value;
+    }
+    async function vt({ scale: a = 2 } = {}) {
+      if (!R.value) return;
+      const { width: s, height: e } = R.value.getBoundingClientRect(), v = s / e, { imageUri: l, base64: d } = await It({ domElement: R.value, base64: !0, img: !0, scale: a });
+      return {
+        imageUri: l,
+        base64: d,
+        title: t.value.style.chart.title.text,
+        width: s,
+        height: e,
+        aspectRatio: v
+      };
+    }
+    return et({
+      getImage: vt,
+      generateCsv: Ne,
+      generatePdf: Ae,
+      generateImage: Se,
+      getData: ct,
+      toggleTable: Be,
+      toggleAnnotator: ke,
+      toggleFullscreen: Ie
+    }), (a, s) => (u(), c("div", {
+      ref_key: "bar3dChart",
+      ref: R,
+      class: Ve("vue-ui-3d-bar"),
+      style: I(`font-family:${t.value.style.fontFamily};width:100%; text-align:center;background:${t.value.style.chart.backgroundColor}`),
+      id: `3d_bar_${F.value}`,
+      onMouseenter: s[8] || (s[8] = () => n(Ce)(!0)),
+      onMouseleave: s[9] || (s[9] = () => n(Ce)(!1))
+    }, [
+      t.value.userOptions.buttons.annotator ? (u(), J(n(at), {
+        key: 0,
+        svgRef: n(Fe),
+        backgroundColor: t.value.style.chart.backgroundColor,
+        color: t.value.style.chart.color,
+        active: ne.value,
+        onClose: ke
+      }, null, 8, ["svgRef", "backgroundColor", "color", "active"])) : p("", !0),
+      t.value.style.chart.title.text ? (u(), c("div", {
+        key: 1,
+        ref_key: "chartTitle",
+        ref: xe,
+        style: "width:100%;background:transparent"
+      }, [
+        (u(), J(Ot, {
+          key: `title_${me.value}`,
+          config: {
+            title: {
+              cy: "3dBar-div-title",
+              ...t.value.style.chart.title
+            },
+            subtitle: {
+              cy: "3dBar-div-subtitle",
+              ...t.value.style.chart.title.subtitle
+            }
+          }
+        }, null, 8, ["config"]))
+      ], 512)) : p("", !0),
+      t.value.userOptions.show && _e.value && (n(Me) || n(he)) ? (u(), J(n(nt), {
+        key: 2,
+        ref_key: "details",
+        ref: ut,
+        backgroundColor: t.value.style.chart.backgroundColor,
+        color: t.value.style.chart.color,
+        isPrinting: n(Pe),
+        isImaging: n(Te),
+        uid: F.value,
+        hasPdf: t.value.userOptions.buttons.pdf,
+        hasTable: !!x.value && t.value.userOptions.buttons.table,
+        hasXls: !!x.value && t.value.userOptions.buttons.csv,
+        hasImg: t.value.userOptions.buttons.img,
+        hasFullscreen: t.value.userOptions.buttons.fullscreen,
+        titles: { ...t.value.userOptions.buttonTitles },
+        chartElement: R.value,
+        position: t.value.userOptions.position,
+        hasAnnotator: t.value.userOptions.buttons.annotator,
+        isAnnotation: ne.value,
+        callbacks: t.value.userOptions.callbacks,
+        printScale: t.value.userOptions.print.scale,
+        onToggleFullscreen: Ie,
+        onGeneratePdf: n(Ae),
+        onGenerateCsv: Ne,
+        onGenerateImage: n(Se),
+        onToggleTable: Be,
+        onToggleAnnotator: ke,
+        style: I({
+          visibility: n(Me) ? n(he) ? "visible" : "hidden" : "visible"
+        })
+      }, gt({ _: 2 }, [
+        a.$slots.menuIcon ? {
+          name: "menuIcon",
+          fn: D(({ isOpen: e, color: v }) => [
+            T(a.$slots, "menuIcon", re(ue({ isOpen: e, color: v })), void 0, !0)
+          ]),
+          key: "0"
+        } : void 0,
+        a.$slots.optionPdf ? {
+          name: "optionPdf",
+          fn: D(() => [
+            T(a.$slots, "optionPdf", {}, void 0, !0)
+          ]),
+          key: "1"
+        } : void 0,
+        a.$slots.optionCsv ? {
+          name: "optionCsv",
+          fn: D(() => [
+            T(a.$slots, "optionCsv", {}, void 0, !0)
+          ]),
+          key: "2"
+        } : void 0,
+        a.$slots.optionImg ? {
+          name: "optionImg",
+          fn: D(() => [
+            T(a.$slots, "optionImg", {}, void 0, !0)
+          ]),
+          key: "3"
+        } : void 0,
+        a.$slots.optionTable ? {
+          name: "optionTable",
+          fn: D(() => [
+            T(a.$slots, "optionTable", {}, void 0, !0)
+          ]),
+          key: "4"
+        } : void 0,
+        a.$slots.optionFullscreen ? {
+          name: "optionFullscreen",
+          fn: D(({ toggleFullscreen: e, isFullscreen: v }) => [
+            T(a.$slots, "optionFullscreen", re(ue({ toggleFullscreen: e, isFullscreen: v })), void 0, !0)
+          ]),
+          key: "5"
+        } : void 0,
+        a.$slots.optionAnnotator ? {
+          name: "optionAnnotator",
+          fn: D(({ toggleAnnotator: e, isAnnotator: v }) => [
+            T(a.$slots, "optionAnnotator", re(ue({ toggleAnnotator: e, isAnnotator: v })), 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", "onGeneratePdf", "onGenerateImage", "style"])) : p("", !0),
+      (u(), c("svg", {
+        ref_key: "svgRef",
+        ref: Fe,
+        xmlns: n(Tt),
+        class: Ve({ "vue-data-ui-fullscreen--on": ye.value, "vue-data-ui-fulscreen--off": !ye.value, animated: t.value.useCssAnimation }),
+        viewBox: `0 0 ${o.value.absoluteWidth} ${o.value.height}`,
+        style: I(`max-width:100%; overflow: visible; background:transparent;color:${t.value.style.chart.color}`)
+      }, [
+        $t(n(st)),
+        a.$slots["chart-background"] ? (u(), c("foreignObject", {
+          key: 0,
+          x: 0,
+          y: 0,
+          width: o.value.absoluteWidth,
+          height: o.value.height,
+          style: {
+            pointerEvents: "none"
+          }
+        }, [
+          T(a.$slots, "chart-background", {}, void 0, !0)
+        ], 8, Vt)) : p("", !0),
+        i("defs", null, [
+          i("radialGradient", {
+            id: `gradient_top${F.value}`
+          }, [
+            i("stop", {
+              offset: "0%",
+              "stop-color": n($)(t.value.style.chart.backgroundColor, 0)
+            }, null, 8, Ut),
+            i("stop", {
+              offset: "100%",
+              "stop-color": t.value.style.chart.bar.color
+            }, null, 8, Xt)
+          ], 8, Ht),
+          i("radialGradient", {
+            id: `gradient_tube_top${F.value}`
+          }, [
+            i("stop", {
+              offset: "0%",
+              "stop-color": n($)(n(W)(t.value.style.chart.bar.color, 0.5), 80)
+            }, null, 8, qt),
+            i("stop", {
+              offset: "100%",
+              "stop-color": n($)(n(H)(t.value.style.chart.bar.color, 0.1), 80)
+            }, null, 8, Yt)
+          ], 8, Zt),
+          i("radialGradient", {
+            id: `gradient_left${F.value}`
+          }, [
+            i("stop", {
+              offset: "0%",
+              "stop-color": n($)(t.value.style.chart.backgroundColor, 0)
+            }, null, 8, Jt),
+            i("stop", {
+              offset: "100%",
+              "stop-color": n($)(t.value.style.chart.bar.color, 20)
+            }, null, 8, Qt)
+          ], 8, Kt),
+          i("radialGradient", {
+            id: `gradient_right${F.value}`
+          }, [
+            i("stop", {
+              offset: "0%",
+              "stop-color": n($)(t.value.style.chart.backgroundColor, 0)
+            }, null, 8, tl),
+            i("stop", {
+              offset: "100%",
+              "stop-color": n($)(t.value.style.chart.bar.color, 20)
+            }, null, 8, ll)
+          ], 8, el),
+          i("linearGradient", {
+            id: `gradient_tube_body${F.value}`,
+            x1: "0%",
+            y1: "0%",
+            x2: "100%",
+            y2: "0%"
+          }, [
+            i("stop", {
+              offset: "0%",
+              "stop-color": `${t.value.style.chart.bar.color}`
+            }, null, 8, sl),
+            i("stop", {
+              offset: "10%",
+              "stop-color": n($)(n(H)(t.value.style.chart.bar.color, 0.7), 100)
+            }, null, 8, al),
+            i("stop", {
+              offset: "25%",
+              "stop-color": n($)(n(H)(t.value.style.chart.bar.color, 0.5), 100)
+            }, null, 8, nl),
+            i("stop", {
+              offset: "75%",
+              "stop-color": n($)(t.value.style.chart.bar.color, 80)
+            }, null, 8, rl),
+            i("stop", {
+              offset: "100%",
+              "stop-color": n($)(n(W)(t.value.style.chart.bar.color, 0.7), 100)
+            }, null, 8, ul)
+          ], 8, ol)
+        ]),
+        x.value ? (u(), c("defs", il, [
+          (u(!0), c(C, null, M(w.value, (e) => (u(), c("radialGradient", {
+            id: `grad_top_${e.id}`
+          }, [
+            i("stop", {
+              offset: "0%",
+              "stop-color": n($)(n(W)(e.color, 0.5), 80)
+            }, null, 8, cl),
+            i("stop", {
+              offset: "100%",
+              "stop-color": e.color
+            }, null, 8, vl)
+          ], 8, dl))), 256)),
+          (u(!0), c(C, null, M(w.value, (e) => (u(), c("linearGradient", {
+            id: `grad_left_${e.id}`
+          }, [
+            i("stop", {
+              offset: "0%",
+              "stop-color": n($)(e.color, 80)
+            }, null, 8, fl),
+            i("stop", {
+              offset: "100%",
+              "stop-color": n($)(n(H)(e.color, 0.5), 100)
+            }, null, 8, pl)
+          ], 8, hl))), 256)),
+          (u(!0), c(C, null, M(w.value, (e) => (u(), c("linearGradient", {
+            id: `grad_right_${e.id}`
+          }, [
+            i("stop", {
+              offset: "2%",
+              "stop-color": n($)(n(W)(e.color, 0.5), 100)
+            }, null, 8, kl),
+            i("stop", {
+              offset: "100%",
+              "stop-color": n($)(e.color, 80)
+            }, null, 8, gl)
+          ], 8, yl))), 256)),
+          i("linearGradient", {
+            x1: "0%",
+            y1: "0%",
+            x2: "0%",
+            y2: "100%",
+            id: `vertical_line_${F.value}`
+          }, s[10] || (s[10] = [
+            i("stop", {
+              offset: "0%",
+              "stop-color": "#FFFFFF"
+            }, null, -1),
+            i("stop", {
+              offset: "100%",
+              "stop-color": "#FFFFFF33"
+            }, null, -1)
+          ]), 8, $l)
+        ])) : p("", !0),
+        t.value.style.chart.dataLabel.show && ![null, void 0].includes(A.dataset.percentage) && [null, void 0].includes(A.dataset.series) ? (u(), c("text", {
+          key: 2,
+          x: o.value.width / 2,
+          y: o.value.top - t.value.style.chart.dataLabel.fontSize / 2,
+          "font-size": t.value.style.chart.dataLabel.fontSize,
+          "font-weight": t.value.style.chart.dataLabel.bold ? "bold" : "normal",
+          fill: t.value.style.chart.dataLabel.color,
+          "text-anchor": "middle"
+        }, E(n(j)({
+          v: Z.value,
+          s: "%",
+          r: t.value.style.chart.dataLabel.rounding
+        })), 9, _l)) : p("", !0),
+        z.value ? (u(), c("g", {
+          key: 3,
+          role: "button",
+          tabindex: "0",
+          "aria-label": "Clear selection",
+          onClick: s[0] || (s[0] = (e) => {
+            z.value = !1, _.value = null;
+          }),
+          onKeydown: [
+            s[1] || (s[1] = He(Ue((e) => {
+              z.value = !1, _.value = null;
+            }, ["prevent"]), ["enter"])),
+            s[2] || (s[2] = He(Ue((e) => {
+              z.value = !1, _.value = null;
+            }, ["prevent"]), ["space"]))
+          ],
+          onFocus: s[3] || (s[3] = (e) => ee.value = !0),
+          onBlur: s[4] || (s[4] = (e) => ee.value = !1),
+          onMouseenter: s[5] || (s[5] = (e) => ee.value = !0),
+          onMouseleave: s[6] || (s[6] = (e) => ee.value = !1),
+          class: "svg-btn",
+          "data-dom-to-png-ignore": "",
+          style: { cursor: "pointer", outline: "none" }
+        }, [
+          s[11] || (s[11] = i("title", null, "Clear selection", -1)),
+          i("rect", {
+            x: q.value - 12,
+            y: o.value.top - 24,
+            width: 24,
+            height: 24,
+            fill: "transparent",
+            "pointer-events": "all"
+          }, null, 8, ml),
+          i("circle", {
+            cx: q.value,
+            cy: o.value.top - 12,
+            r: "10",
+            fill: "none",
+            stroke: t.value.style.chart.color,
+            "stroke-width": "2",
+            "vector-effect": "non-scaling-stroke",
+            opacity: ee.value ? 0.5 : 0
+          }, null, 8, bl),
+          i("path", {
+            d: `M${q.value - 6},${o.value.top - 18} ${q.value + 6},${o.value.top - 6}`,
+            stroke: t.value.style.chart.color,
+            "stroke-linecap": "round",
+            "stroke-width": "2",
+            "vector-effect": "non-scaling-stroke"
+          }, null, 8, xl),
+          i("path", {
+            d: `M${q.value + 6},${o.value.top - 18} ${q.value - 6},${o.value.top - 6}`,
+            stroke: t.value.style.chart.color,
+            "stroke-linecap": "round",
+            "stroke-width": "2",
+            "vector-effect": "non-scaling-stroke"
+          }, null, 8, wl)
+        ], 32)) : p("", !0),
+        !t.value.style.shape || t.value.style.shape === "bar" ? (u(), c("g", Cl, [
+          x.value ? p("", !0) : (u(), c("g", Ml, [
+            i("path", {
+              "stroke-dasharray": t.value.style.chart.box.strokeDasharray,
+              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, Fl),
+            i("path", {
+              "stroke-dasharray": t.value.style.chart.box.strokeDasharray,
+              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, Pl),
+            i("path", {
+              "stroke-dasharray": t.value.style.chart.box.strokeDasharray,
+              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, Tl),
+            i("path", {
+              "stroke-dasharray": t.value.style.chart.box.strokeDasharray,
+              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, Al)
+          ])),
+          x.value ? p("", !0) : (u(), c("g", Sl, [
+            i("path", {
+              d: Y.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${F.value})`
+            }, null, 8, Dl),
+            i("path", {
+              d: Y.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${F.value})`
+            }, null, 8, jl),
+            i("path", {
+              d: Y.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${F.value})`
+            }, null, 8, zl)
+          ])),
+          x.value ? (u(), c("g", Ol, [
+            (u(!0), c(C, null, M(w.value, (e, v) => (u(), c("g", {
+              style: I(`opacity:${_.value ? _.value === e.id ? 1 : 0.3 : 1}`),
+              class: "vue-ui-3d-bar-stack"
+            }, [
+              i("path", {
+                d: e.fill.right,
+                fill: `url(#grad_right_${e.id})`,
+                onMouseenter: (l) => P(e),
+                onClick: (l) => P(e, !0),
+                onMouseout: (l) => V(e)
+              }, null, 40, Il),
+              i("path", {
+                d: e.fill.left,
+                fill: `url(#grad_left_${e.id})`,
+                onMouseenter: (l) => P(e),
+                onClick: (l) => P(e, !0),
+                onMouseout: (l) => V(e)
+              }, null, 40, Nl),
+              i("path", {
+                d: e.fill.top,
+                fill: `url(#grad_top_${e.id})`,
+                onMouseenter: (l) => P(e),
+                onClick: (l) => P(e, !0),
+                onMouseout: (l) => V(e)
+              }, null, 40, Bl),
+              i("path", {
+                d: e.fill.liningTop,
+                stroke: "#FFFFFF",
+                "stroke-width": "0.5",
+                "stroke-linecap": "round",
+                fill: "none",
+                onMouseenter: (l) => P(e),
+                onClick: (l) => P(e, !0),
+                onMouseout: (l) => V(e)
+              }, null, 40, Ll),
+              i("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, El)
+            ], 4))), 256)),
+            (u(!0), c(C, null, M(w.value, (e, v) => (u(), c("g", null, [
+              v !== w.value.length - 1 ? (u(), c("path", {
+                key: 0,
+                d: e.fill.liningTopShade,
+                stroke: t.value.style.chart.bar.shadeColor,
+                "stroke-width": "0.5",
+                "stroke-linecap": "round",
+                fill: "none",
+                style: { "pointer-events": "none" }
+              }, null, 8, Wl)) : p("", !0)
+            ]))), 256)),
+            (u(!0), c(C, null, M(w.value, (e, v) => (u(), c("g", {
+              style: I(`opacity:${_.value ? _.value === e.id ? 1 : 0 : e.proportion * 100 > t.value.style.chart.legend.hideUnderPercentage ? 1 : 0}`),
+              onClick: (l) => le("selectDatapoint", e)
+            }, [
+              i("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.x2},${e.fill.sidePointer.y}`
+              }, null, 8, Rl),
+              !e.fill.miniDonut || _.value ? (u(), c("circle", {
+                key: 0,
+                cx: e.fill.sidePointer.x2,
+                cy: e.fill.sidePointer.y,
+                r: 2,
+                fill: e.color,
+                stroke: t.value.style.chart.backgroundColor
+              }, null, 8, Vl)) : p("", !0),
+              n(U) ? (u(), c("rect", {
+                key: 1,
+                x: e.fill.sidePointer.xText,
+                y: e.fill.sidePointer.y - t.value.style.chart.legend.fontSize / 2,
+                width: o.value.width / 3,
+                height: t.value.style.chart.legend.fontSize,
+                fill: "#6A6A6A80",
+                rx: "3"
+              }, null, 8, Hl)) : p("", !0),
+              n(U) ? p("", !0) : (u(), c("foreignObject", {
+                key: 2,
+                x: e.fill.sidePointer.xText,
+                y: e.fill.sidePointer.y - t.value.style.chart.legend.fontSize,
+                width: o.value.absoluteWidth / 3,
+                height: t.value.style.chart.legend.fontSize * 2,
+                style: { overflow: "visible", position: "relative" }
+              }, [
+                t.value.style.chart.legend.showDefault ? (u(), c("div", {
+                  key: 0,
+                  style: I(`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}`)
+                }, E(n(ce)(
+                  t.value.style.chart.dataLabel.formatter,
+                  e.value,
+                  `${e.name}: ${n(j)({ v: e.proportion * 100, s: "%", r: t.value.style.chart.legend.roundingPercentage })} (${n(j)({
+                    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: v, type: "barDatapoint" }
+                )), 5)) : p("", !0),
+                T(a.$slots, "legend", Xe({ ref_for: !0 }, { datapoint: e, config: t.value, dataset: w.value }), void 0, !0)
+              ], 8, Ul)),
+              e.fill.donut && _.value === e.id ? (u(), c("g", Xl, [
+                (u(!0), c(C, null, M(e.fill.donut, (l, d) => (u(), c("g", null, [
+                  K(l, e.fill.donut, !0) > 6 ? (u(), c("path", {
+                    key: 0,
+                    d: n(Ke)(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, Zl)) : p("", !0)
+                ]))), 256)),
+                (u(!0), c(C, null, M(e.fill.donut, (l, d) => (u(), c("path", {
+                  class: "vue-ui-donut-arc-path",
+                  d: l.arcSlice,
+                  fill: `${l.color}`,
+                  stroke: t.value.style.chart.backgroundColor,
+                  "stroke-width": 1
+                }, null, 8, ql))), 256)),
+                (u(!0), c(C, null, M(e.fill.donut, (l, d) => (u(), c("g", null, [
+                  K(l, e.fill.donut, !0) > 6 ? (u(), c("g", Yl, [
+                    i("text", {
+                      "text-anchor": n(G)(l, !0, 0).anchor,
+                      x: n(G)(l, !0, 2).x,
+                      y: n(ve)(l, 12, 12),
+                      fill: t.value.style.chart.legend.color,
+                      "font-size": t.value.style.chart.legend.fontSize / 1.5
+                    }, E(n(ce)(
+                      t.value.style.chart.dataLabel.formatter,
+                      l.value,
+                      `${K(l, e.fill.donut)} (${n(j)({
+                        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: d, type: "donutDatapoint" }
+                    )), 9, Kl),
+                    i("text", {
+                      "text-anchor": n(G)(l).anchor,
+                      x: n(G)(l, !0, 2).x,
+                      y: n(ve)(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
+                    }, E(l.name), 9, Jl)
+                  ])) : p("", !0)
+                ]))), 256))
+              ])) : p("", !0),
+              e.fill.miniDonut && !_.value ? (u(), c("g", Ql, [
+                (u(!0), c(C, null, M(e.fill.miniDonut, (l, d) => (u(), c("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, eo))), 256))
+              ])) : p("", !0)
+            ], 12, Gl))), 256))
+          ])) : p("", !0)
+        ])) : p("", !0),
+        t.value.style.shape === "tube" ? (u(), c("g", to, [
+          x.value ? p("", !0) : (u(), c("g", lo, [
+            i("path", {
+              "stroke-dasharray": t.value.style.chart.box.strokeDasharray,
+              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, oo),
+            i("path", {
+              "stroke-dasharray": t.value.style.chart.box.strokeDasharray,
+              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, so),
+            i("path", {
+              "stroke-dasharray": t.value.style.chart.box.strokeDasharray,
+              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, ao),
+            i("path", {
+              "stroke-dasharray": t.value.style.chart.box.strokeDasharray,
+              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, no),
+            i("path", {
+              d: Y.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_tube_top${F.value})`
+            }, null, 8, ro),
+            i("path", {
+              d: Y.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${F.value})`
+            }, null, 8, uo),
+            i("path", {
+              d: Y.value.tubeTop,
+              stroke: "#FFFFFF",
+              "stroke-width": 0.5,
+              "stroke-linejoin": "round",
+              "stroke-linecap": "round",
+              fill: "none"
+            }, null, 8, io)
+          ])),
+          x.value ? (u(), c("g", co, [
+            (u(!0), c(C, null, M(w.value, (e, v) => (u(), c("g", {
+              style: I(`opacity:${_.value ? _.value === e.id ? 1 : 0.3 : 1}`),
+              class: "vue-ui-3d-bar-stack",
+              onClick: (l) => le("selectDatapoint", e)
+            }, [
+              i("defs", null, [
+                i("radialGradient", {
+                  id: `gradient_tube_top_${e.id}`,
+                  fx: "10%",
+                  cy: "55%"
+                }, [
+                  i("stop", {
+                    offset: "0%",
+                    "stop-color": n($)(n(W)(e.color, 0.5), 80)
+                  }, null, 8, fo),
+                  i("stop", {
+                    offset: "100%",
+                    "stop-color": n($)(n(H)(e.color, 0.1), 80)
+                  }, null, 8, po)
+                ], 8, ho),
+                i("linearGradient", {
+                  id: `gradient_tube_body_${e.id}`,
+                  x1: "0%",
+                  y1: "0%",
+                  x2: "100%",
+                  y2: "0%"
+                }, [
+                  i("stop", {
+                    offset: "0%",
+                    "stop-color": `${e.color}`
+                  }, null, 8, ko),
+                  i("stop", {
+                    offset: "10%",
+                    "stop-color": n($)(n(H)(e.color, 0.7), 100)
+                  }, null, 8, go),
+                  i("stop", {
+                    offset: "25%",
+                    "stop-color": n($)(n(H)(e.color, 0.5), 100)
+                  }, null, 8, $o),
+                  i("stop", {
+                    offset: "75%",
+                    "stop-color": n($)(e.color, 80)
+                  }, null, 8, _o),
+                  i("stop", {
+                    offset: "100%",
+                    "stop-color": n($)(n(W)(e.color, 0.7), 100)
+                  }, null, 8, mo)
+                ], 8, yo)
+              ]),
+              i("path", {
+                onMouseenter: (l) => P(e),
+                onClick: (l) => P(e, !0),
+                onMouseout: (l) => V(e),
+                d: e.fill.tubeBody,
+                stroke: "#FFFFFF",
+                "stroke-width": 0.5,
+                "stroke-linejoin": "round",
+                "stroke-linecap": "round",
+                fill: `url(#gradient_tube_body_${e.id})`
+              }, null, 40, bo),
+              v > 0 ? (u(), c("path", {
+                key: 0,
+                onMouseenter: (l) => P(e),
+                onClick: (l) => P(e, !0),
+                onMouseout: (l) => V(e),
+                d: e.fill.bottomTubeTop,
+                stroke: "#000000",
+                "stroke-width": 0.5,
+                "stroke-linejoin": "round",
+                "stroke-linecap": "round",
+                fill: "none"
+              }, null, 40, xo)) : p("", !0),
+              i("path", {
+                onMouseenter: (l) => P(e),
+                onClick: (l) => P(e, !0),
+                onMouseout: (l) => V(e),
+                d: e.fill.tubeTop,
+                stroke: "#FFFFFF",
+                "stroke-width": 0.5,
+                "stroke-linejoin": "round",
+                "stroke-linecap": "round",
+                fill: `url(#gradient_tube_top_${e.id})`
+              }, null, 40, wo)
+            ], 12, vo))), 256)),
+            (u(!0), c(C, null, M(w.value, (e, v) => (u(), c("g", {
+              style: I(`opacity:${_.value ? _.value === e.id ? 1 : 0 : e.proportion * 100 > t.value.style.chart.legend.hideUnderPercentage ? 1 : 0}`),
+              onClick: (l) => le("selectDatapoint", e)
+            }, [
+              i("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.x2},${e.fill.sidePointer.y}`
+              }, null, 8, Mo),
+              !e.fill.miniDonut || _.value ? (u(), c("circle", {
+                key: 0,
+                cx: e.fill.sidePointer.x2,
+                cy: e.fill.sidePointer.y,
+                r: 2,
+                fill: e.color,
+                stroke: t.value.style.chart.backgroundColor
+              }, null, 8, Fo)) : p("", !0),
+              n(U) ? (u(), c("rect", {
+                key: 1,
+                x: e.fill.sidePointer.xText,
+                y: e.fill.sidePointer.y - t.value.style.chart.legend.fontSize / 2,
+                width: o.value.width / 3,
+                height: t.value.style.chart.legend.fontSize,
+                fill: "#6A6A6A80",
+                rx: "3"
+              }, null, 8, Po)) : p("", !0),
+              n(U) ? p("", !0) : (u(), c("foreignObject", {
+                key: 2,
+                x: e.fill.sidePointer.xText,
+                y: e.fill.sidePointer.y - t.value.style.chart.legend.fontSize,
+                width: o.value.absoluteWidth / 3,
+                height: t.value.style.chart.legend.fontSize * 2,
+                style: { overflow: "visible", position: "relative" }
+              }, [
+                t.value.style.chart.legend.showDefault ? (u(), c("div", {
+                  key: 0,
+                  style: I(`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}`)
+                }, E(n(ce)(
+                  t.value.style.chart.dataLabel.formatter,
+                  e.value,
+                  `${e.name}: ${n(j)({ v: e.proportion * 100, s: "%", r: t.value.style.chart.legend.roundingPercentage })} (${n(j)({
+                    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: v, type: "barDatapoint" }
+                )), 5)) : p("", !0),
+                T(a.$slots, "legend", Xe({ ref_for: !0 }, { datapoint: e, config: t.value, dataset: w.value }), void 0, !0)
+              ], 8, To)),
+              e.fill.donut && _.value === e.id ? (u(), c("g", Ao, [
+                (u(!0), c(C, null, M(e.fill.donut, (l, d) => (u(), c("g", null, [
+                  K(l, e.fill.donut, !0) > 6 ? (u(), c("path", {
+                    key: 0,
+                    d: n(Ke)(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, So)) : p("", !0)
+                ]))), 256)),
+                (u(!0), c(C, null, M(e.fill.donut, (l, d) => (u(), c("path", {
+                  class: "vue-ui-donut-arc-path",
+                  d: l.arcSlice,
+                  fill: `${l.color}`,
+                  stroke: t.value.style.chart.backgroundColor,
+                  "stroke-width": 1
+                }, null, 8, Do))), 256)),
+                (u(!0), c(C, null, M(e.fill.donut, (l, d) => (u(), c("g", null, [
+                  K(l, e.fill.donut, !0) > 6 ? (u(), c("g", jo, [
+                    i("text", {
+                      "text-anchor": n(G)(l, !0, 0).anchor,
+                      x: n(G)(l, !0, 2).x,
+                      y: n(ve)(l, 12, 12),
+                      fill: t.value.style.chart.legend.color,
+                      "font-size": t.value.style.chart.legend.fontSize / 1.5
+                    }, E(n(ce)(
+                      t.value.style.chart.dataLabel.formatter,
+                      l.value,
+                      `${K(l, e.fill.donut)} (${n(j)({
+                        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: d, type: "donutDatapoint" }
+                    )), 9, zo),
+                    i("text", {
+                      "text-anchor": n(G)(l).anchor,
+                      x: n(G)(l, !0, 2).x,
+                      y: n(ve)(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
+                    }, E(l.name), 9, Oo)
+                  ])) : p("", !0)
+                ]))), 256))
+              ])) : p("", !0),
+              e.fill.miniDonut && !_.value ? (u(), c("g", Io, [
+                (u(!0), c(C, null, M(e.fill.miniDonut, (l, d) => (u(), c("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, No))), 256))
+              ])) : p("", !0)
+            ], 12, Co))), 256))
+          ])) : p("", !0)
+        ])) : p("", !0),
+        T(a.$slots, "svg", { svg: o.value }, void 0, !0)
+      ], 14, Rt)),
+      a.$slots.watermark ? (u(), c("div", Bo, [
+        T(a.$slots, "watermark", re(ue({ isPrinting: n(Pe) || n(Te) })), void 0, !0)
+      ])) : p("", !0),
+      a.$slots.source ? (u(), c("div", {
+        key: 4,
+        ref_key: "source",
+        ref: we,
+        dir: "auto"
+      }, [
+        T(a.$slots, "source", {}, void 0, !0)
+      ], 512)) : p("", !0),
+      _e.value && x.value ? (u(), J(n(lt), {
+        key: 5,
+        hideDetails: "",
+        config: {
+          open: X.value.showTable,
+          maxHeight: 1e4,
+          body: {
+            backgroundColor: t.value.style.chart.backgroundColor,
+            color: t.value.style.chart.color
+          },
+          head: {
+            backgroundColor: t.value.style.chart.backgroundColor,
+            color: t.value.style.chart.color
+          }
+        }
+      }, {
+        content: D(() => [
+          (u(), J(n(ot), {
+            key: `table_${be.value}`,
+            colNames: ae.value.colNames,
+            head: ae.value.head,
+            body: ae.value.body,
+            config: ae.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[7] || (s[7] = (e) => X.value.showTable = !1)
+          }, {
+            th: D(({ th: e }) => [
+              i("div", {
+                innerHTML: e,
+                style: { display: "flex", "align-items": "center" }
+              }, null, 8, Lo)
+            ]),
+            td: D(({ td: e }) => [
+              _t(E(e.name || e), 1)
+            ]),
+            _: 1
+          }, 8, ["colNames", "head", "body", "config", "title"]))
+        ]),
+        _: 1
+      }, 8, ["config"])) : p("", !0),
+      n(U) ? (u(), J(Et, { key: 6 })) : p("", !0)
+    ], 44, Gt));
+  }
+}, Qo = /* @__PURE__ */ Wt(Eo, [["__scopeId", "data-v-8f46be8e"]]);
+export {
+  Qo as default
+};