vue-data-ui 2.3.2 → 2.3.4

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

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