vue-data-ui 3.0.23 → 3.1.0

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

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