vue-data-ui 3.15.12 → 3.16.1

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

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