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

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

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