vue-data-ui 3.8.3 → 3.8.5

package/dist/vue-ui-donut-CoG8zI-8.js

@@ -1,1713 +0,0 @@
-import { defineAsyncComponent as le, useSlots as Ll, computed as f, shallowRef as J, ref as b, onMounted as Tt, onBeforeUnmount as Pt, toRefs as Ml, watch as ye, createElementBlock as r, openBlock as s, normalizeStyle as _, normalizeClass as qe, createBlock as oe, createCommentVNode as c, renderSlot as y, createElementVNode as h, createVNode as Se, unref as u, withCtx as m, normalizeProps as O, guardReactiveProps as E, createSlots as We, Fragment as k, renderList as D, mergeProps as je, toDisplayString as U, withDirectives as Dt, createTextVNode as Te, vShow as It, Teleport as Bl, resolveDynamicComponent as zl, nextTick as Ol } from "vue";
-import { o as Lt, g as He, k as El, c as Nl, t as Yl, j as Xl, T as Vl, l as Mt, p as ie, a as q, d as N, a2 as Bt, a6 as Rl, X as Gl, s as Pe, h as Ul, a3 as ql, a7 as T, a4 as ge, a5 as x, a8 as zt, f as Wl, i as jl, a0 as Je, u as Hl, q as Jl, x as Kl, a9 as Ot } from "./lib-qMPkcvmh.js";
-import { t as Ql, u as Zl } from "./useResponsive-DfdjqQps.js";
-import { u as eo, a as Ke } from "./useNestedProp-DH2Pjkde.js";
-import { u as to } from "./usePrinter-CjGh4mFJ.js";
-import { u as lo, B as oo } from "./BaseScanner-BgWxam9d.js";
-import { u as ao } from "./useSvgExport-DrjCWun4.js";
-import { u as no } from "./useThemeCheck-DGJ31Vi5.js";
-import { u as so } from "./useUserOptionState-BIvW1Kz7.js";
-import { u as uo } from "./useChartAccessibility-9icAAmYg.js";
-import ro from "./img-CwrkWkkl.js";
-import { _ as io } from "./Shape-BEGGcaL8.js";
-import co from "./Title-CWX8otQg.js";
-import vo from "./Legend-Djkw4FGq.js";
-import { _ as ho } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const Et = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", layout: { labels: { percentage: { color: "#CCCCCC" }, name: { color: "#CCCCCC" }, hollow: { total: { color: "#CCCCCC", value: { color: "#CCCCCC" } }, average: { color: "#CCCCCC", value: { color: "#CCCCCC" } } } } }, legend: { backgroundColor: "#1A1A1A", color: "#CCCCCC" }, title: { color: "#CCCCCC", subtitle: { color: "#757575" } }, tooltip: { backgroundColor: "#1A1A1A", backgroundOpacity: 70, color: "#CCCCCC", borderColor: "#5A5A5A" } } }, table: { th: { backgroundColor: "#1A1A1A", color: "#CCCCCC" }, td: { backgroundColor: "#1A1A1A", color: "#CCCCCC" } } }, Nt = { style: { chart: { backgroundColor: "#FFF8E1", color: "#424242", layout: { labels: { percentage: { color: "#424242" }, name: { color: "#424242" }, hollow: { total: { color: "#424242", value: { color: "#424242" } }, average: { color: "#424242", value: { color: "#424242" } } } } }, legend: { backgroundColor: "#FFF8E1", color: "#424242" }, title: { color: "#424242", subtitle: { color: "#757575" } }, tooltip: { backgroundColor: "#FFECB3", backgroundOpacity: 30, color: "#424242", borderColor: "#FF8A65" } } }, table: { th: { backgroundColor: "#FFF8E1", color: "#424242" }, td: { backgroundColor: "#FFF8E1", color: "#424242" } } }, Yt = { style: { chart: { backgroundColor: "#1E1E1E", color: "#BDBDBD", layout: { labels: { percentage: { color: "#BDBDBD" }, name: { color: "#BDBDBD" }, hollow: { total: { color: "#BDBDBD", value: { color: "#BDBDBD" } }, average: { color: "#BDBDBD", value: { color: "#BDBDBD" } } } } }, legend: { backgroundColor: "#1E1E1E", color: "#BDBDBD" }, title: { color: "#FFF8E1", subtitle: { color: "#BDBDBD" } }, tooltip: { backgroundColor: "#1E1E1E", backgroundOpacity: 30, color: "#FFF8E1", borderColor: "#FF8A65" } } }, table: { th: { backgroundColor: "#1E1E1E", color: "#BDBDBD" }, td: { backgroundColor: "#1E1E1E", color: "#BDBDBD" } } }, Xt = { style: { chart: { backgroundColor: "#f6f6fb", color: "#50606C", layout: { labels: { percentage: { color: "#61747E" }, name: { color: "#8A9892" }, hollow: { total: { color: "#8A9892", value: { color: "#61747E" } }, average: { color: "#8A9892", value: { color: "#61747E" } } } } }, legend: { backgroundColor: "#f6f6fb", color: "#61747E" }, title: { color: "#50606C", subtitle: { color: "#718890" } }, tooltip: { backgroundColor: "#f6f6fb", color: "#50606C" } } }, table: { th: { backgroundColor: "#f6f6fb", color: "#50606C" }, td: { backgroundColor: "#f6f6fb", color: "#50606C" } } }, Vt = { style: { chart: { backgroundColor: "#1A1A1A", color: "#99AA99", layout: { labels: { percentage: { color: "#AACCAA" }, name: { color: "#99CC99" }, hollow: { total: { color: "#99CC99", value: { color: "#AACCAA" } }, average: { color: "#99CC99", value: { color: "#AACCAA" } } } } }, legend: { backgroundColor: "#1A1A1A", color: "#99AA99" }, title: { color: "#66CC66", subtitle: { color: "#99AA99" } }, tooltip: { backgroundColor: "#2A2F2A", color: "#AACCAA", borderColor: "#66CC66" } } }, table: { th: { backgroundColor: "#1A1A1A", color: "#99AA99" }, td: { backgroundColor: "#1A1A1A", color: "#AACCAA" } } }, Rt = { style: { chart: { backgroundColor: "#fbfafa", color: "#8A9892", layout: { labels: { percentage: { color: "#A0AC94" }, name: { color: "#8A9892" }, hollow: { total: { color: "#8A9892", value: { color: "#A0AC94" } }, average: { color: "#8A9892", value: { color: "#A0AC94" } } } } }, legend: { backgroundColor: "#fbfafa", color: "#99AA99" }, title: { color: "#8A9892", subtitle: { color: "#99AA99" } }, tooltip: { backgroundColor: "#fbfafa", color: "#8A9892" } } }, table: { th: { backgroundColor: "#fbfafa", color: "#8F837A" }, td: { backgroundColor: "#fbfafa", color: "#8F837A" } } }, Gt = {
-  default: {},
-  dark: Et,
-  celebration: Nt,
-  celebrationNight: Yt,
-  concrete: Xt,
-  hack: Vt,
-  zen: Rt
-}, qa = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
-  __proto__: null,
-  celebration: Nt,
-  celebrationNight: Yt,
-  concrete: Xt,
-  dark: Et,
-  default: Gt,
-  hack: Vt,
-  zen: Rt
-}, Symbol.toStringTag, { value: "Module" })), fo = ["id"], yo = ["id"], go = ["xmlns", "viewBox"], po = ["width", "height"], bo = { key: 1 }, mo = ["id"], wo = ["stop-color"], ko = ["offset", "stop-color"], Co = ["offset", "stop-color"], xo = ["stop-color"], Ao = { key: 2 }, _o = ["id", "cx", "cy"], $o = ["stop-color", "stop-opacity"], Fo = ["stop-color"], So = ["id"], To = ["id"], Po = ["id"], Do = ["flood-color"], Io = ["id"], Lo = ["flood-color"], Mo = ["d", "stroke", "filter"], Bo = ["d", "stroke", "filter"], zo = ["cx", "cy", "r", "fill", "filter"], Oo = { key: 6 }, Eo = ["stroke", "d"], No = ["d", "fill", "stroke", "stroke-width", "filter"], Yo = { key: 0 }, Xo = ["d", "fill", "stroke", "stroke-width", "filter"], Vo = { key: 0 }, Ro = ["stroke", "d"], Go = { key: 0 }, Uo = ["d", "stroke", "stroke-width", "filter"], qo = { key: 1 }, Wo = ["d", "fill", "stroke", "stroke-width", "filter"], jo = ["d", "fill", "stroke", "stroke-width", "filter"], Ho = { key: 1 }, Jo = ["cx", "cy", "r", "fill", "stroke", "stroke-width"], Ko = ["cx", "cy", "r", "fill", "stroke", "stroke-width"], Qo = { key: 0 }, Zo = ["d", "fill", "stroke", "stroke-width"], ea = ["cx", "cy", "r", "stroke"], ta = ["cx", "cy", "r", "fill"], la = ["cx", "cy", "r"], oa = { key: 0 }, aa = ["d", "stroke", "fill", "onMouseenter", "onMouseleave", "onClick"], na = { key: 1 }, sa = ["cx", "cy", "r"], ua = ["x", "y", "fill", "font-size"], ra = ["x", "y", "fill", "font-size"], ia = ["x", "y", "fill", "font-size"], ca = ["x", "y", "fill", "font-size"], va = ["filter"], da = { key: 0 }, ha = ["x", "y"], fa = { key: 1 }, ya = ["cx", "cy", "fill", "stroke", "filter", "onClick", "onMouseenter", "onMouseleave"], ga = ["cx", "cy", "fill", "stroke", "filter", "onClick", "onMouseenter", "onMouseleave"], pa = ["text-anchor", "x", "y", "fill", "font-size", "onClick", "onMouseenter", "onMouseleave"], ba = ["text-anchor", "x", "y", "fill", "font-size", "onClick", "innerHTML"], ma = ["text-anchor", "x", "y", "fill", "font-size", "onClick", "onMouseenter", "onMouseleave"], wa = ["text-anchor", "x", "y", "fill", "font-size", "onClick", "innerHTML"], ka = { key: 2 }, Ca = ["x", "y", "width"], xa = ["x", "y", "width"], Aa = {
-  key: 4,
-  class: "vue-data-ui-watermark"
-}, _a = ["id"], $a = ["onClick"], Fa = {
-  key: 7,
-  class: "vue-ui-donut-hollow"
-}, Sa = ["innerHTML"], Ta = {
-  __name: "vue-ui-donut",
-  props: {
-    config: {
-      type: Object,
-      default() {
-        return {};
-      }
-    },
-    dataset: {
-      type: Array,
-      default() {
-        return [];
-      }
-    }
-  },
-  emits: ["selectLegend", "selectDatapoint"],
-  setup(Qe, { expose: Ut, emit: qt }) {
-    const Wt = le(() => import("./Tooltip-OHx7yHlS.js")), jt = le(() => import("./BaseIcon-CALhpING.js")), Ht = le(() => import("./vue-ui-accordion-DiNnR-ZE.js")), Jt = le(() => import("./DataTable-Ca1twcf7.js")), Kt = le(() => import("./PenAndPaper-DscVdZ1u.js")), Qt = le(() => import("./UserOptions-ChRXLqps.js")), Zt = le(() => import("./PackageVersion-C8V4NAR4.js")), el = le(() => import("./BaseDraggableDialog-BYwNgX3M.js")), { vue_ui_donut: tl } = eo(), { isThemeValid: ll, warnInvalidTheme: ol } = no(), al = Ll(), C = Qe, we = f({
-      get() {
-        return !!C.dataset && C.dataset.length;
-      },
-      set(t) {
-        return t;
-      }
-    }), Y = J(null), ke = b(null), nl = b(null), sl = b(null), Ze = J(null), et = J(null), K = J(null), ce = J(null), tt = J(null), lt = J(null), ot = b(0), at = b(0), nt = b(0), st = b(!1), pe = b(null), De = b(null), Ce = f({
-      get: () => e.value.style.chart.layout.labels.percentage.fontSize,
-      set: (t) => t
-    }), Q = f({
-      get: () => e.value.style.chart.layout.labels.name.fontSize,
-      set: (t) => t
-    });
-    let Ie = !1;
-    const W = () => {
-      !e.value.autoSize || Ie || (Ie = !0, requestAnimationFrame(() => {
-        Ie = !1;
-        const t = e.value, a = ke.value, l = ae.value;
-        if (!t.autoSize || !a || !l) return;
-        const [o, i, d, w] = l.getAttribute("viewBox").split(" ").map(Number), $ = { x: o, y: i, width: d, height: w }, B = [
-          {
-            selector: ".vue-data-ui-datalabel-value",
-            baseSize: t.style.chart.layout.labels.percentage.fontSize,
-            minSize: t.style.chart.layout.labels.percentage.minFontSize,
-            sizeRef: Ce
-          },
-          {
-            selector: ".vue-data-ui-datalabel-name",
-            baseSize: t.style.chart.layout.labels.name.fontSize,
-            minSize: t.style.chart.layout.labels.name.minFontSize,
-            sizeRef: Q
-          }
-        ];
-        B.map((G) => a.querySelectorAll(G.selector).length).reduce((G, te) => G + te, 0) !== 0 && B.forEach(({ selector: G, baseSize: te, minSize: Ue, sizeRef: Pl }) => {
-          a.querySelectorAll(G).forEach((Dl) => {
-            const Il = Wl({
-              el: Dl,
-              bounds: $,
-              currentFontSize: te,
-              minFontSize: Ue,
-              attempts: 200,
-              padding: 1
-            });
-            Pl.value = Il;
-          });
-        });
-      }));
-    };
-    Tt(async () => {
-      st.value = !0, ut(), requestAnimationFrame(W);
-    });
-    let Le;
-    Tt(() => {
-      Y.value && (Le = new ResizeObserver((t) => {
-        for (const a of t) {
-          const { width: l, height: o } = a.contentRect;
-          if (l > 0 && o > 0) {
-            W();
-            break;
-          }
-        }
-      }), Le.observe(Y.value.parentElement));
-    }), Pt(() => {
-      Le?.disconnect();
-    }), Pt(() => {
-      K.value && (ce.value && K.value.unobserve(ce.value), K.value.disconnect());
-    });
-    const Me = f(() => !!e.value.debug);
-    function ut() {
-      if (Lt(C.dataset) ? (He({
-        componentName: "VueUiDonut",
-        type: "dataset",
-        debug: Me.value
-      }), we.value = !1, Ae.value = !0) : (C.dataset.forEach((t, a) => {
-        El({
-          datasetObject: t,
-          requiredAttributes: ["name", "values"]
-        }).forEach((l) => {
-          He({
-            componentName: "VueUiDonut",
-            type: "datasetSerieAttribute",
-            property: l,
-            index: a,
-            debug: Me.value
-          }), we.value = !1, Ae.value = !0;
-        });
-      }), C.dataset.forEach((t, a) => {
-        (!t.name || t.name === "") && He({
-          componentName: "VueUiDonut",
-          type: "datasetAttributeEmpty",
-          property: "name",
-          index: a,
-          debug: Me.value
-        });
-      })), Lt(C.dataset) || (Ae.value = e.value.loading), e.value.responsive) {
-        const t = Ql(() => {
-          const { width: a, height: l } = Zl({
-            chart: Y.value,
-            title: e.value.style.chart.title.text ? Ze.value : null,
-            legend: e.value.style.chart.legend.show ? et.value : null,
-            source: tt.value,
-            noTitle: lt.value,
-            padding: e.value.autoSize ? void 0 : dt.value
-          });
-          requestAnimationFrame(() => {
-            n.value.width = a, n.value.height = l, W();
-          });
-        });
-        K.value && (ce.value && K.value.unobserve(ce.value), K.value.disconnect()), K.value = new ResizeObserver(t), ce.value = Y.value.parentNode, K.value.observe(ce.value);
-      }
-    }
-    const g = b(Nl()), Be = b(!1), ze = b(""), X = b(null), rt = b(0);
-    function Oe() {
-      const t = Ke({
-        userConfig: C.config,
-        defaultConfig: tl
-      });
-      let a = {};
-      const l = t.theme;
-      if (!l)
-        a = t;
-      else if (!ll.value(t))
-        ol(t), a = t;
-      else {
-        const o = Ke({
-          userConfig: Gt[l] || C.config,
-          defaultConfig: t
-        });
-        a = {
-          ...Ke({
-            userConfig: C.config,
-            defaultConfig: o
-          }),
-          customPalette: t.customPalette.length ? t.customPalette : jl[l] || ie
-        };
-      }
-      return C.config && Je(C.config, "events.datapointEnter") ? a.events.datapointEnter = C.config.events.datapointEnter : a.events.datapointEnter = null, C.config && Je(C.config, "events.datapointLeave") ? a.events.datapointLeave = C.config.events.datapointLeave : a.events.datapointLeave = null, C.config && Je(C.config, "events.datapointClick") ? a.events.datapointClick = C.config.events.datapointClick : a.events.datapointClick = null, a;
-    }
-    const e = b(Oe()), { loading: xe, FINAL_DATASET: ve, manualLoading: Ae, skeletonDataset: ul } = lo({
-      ...Ml(C),
-      FINAL_CONFIG: e,
-      prepareConfig: Oe,
-      skeletonDataset: [
-        {
-          name: "",
-          values: [3],
-          color: "#BABABA"
-        },
-        {
-          name: "",
-          values: [2],
-          color: "#AAAAAA"
-        },
-        {
-          name: "",
-          values: [1],
-          color: "#CACACA"
-        }
-      ],
-      skeletonConfig: Yl({
-        defaultConfig: e.value,
-        userConfig: {
-          useCssAnimation: !1,
-          table: { show: !1 },
-          startAnimation: {
-            show: !1
-          },
-          userOptions: { show: !1 },
-          style: {
-            chart: {
-              backgroundColor: "#99999930",
-              layout: {
-                labels: {
-                  dataLabels: { show: !1 },
-                  hollow: {
-                    average: { show: !1 },
-                    total: { show: !1 }
-                  },
-                  value: { show: !1 }
-                }
-              },
-              legend: {
-                backgroundColor: "transparent",
-                showValue: !1,
-                showPercentage: !1
-              },
-              title: {
-                color: "#1A1A1A",
-                subtitle: {
-                  color: "#5A5A5A"
-                }
-              }
-            }
-          }
-        }
-      })
-    }), F = b(!0), j = J([]);
-    function rl(t, a = 1e3, l = 50) {
-      return new Promise((o) => {
-        const i = t.length;
-        j.value = Array(i).fill(0);
-        let d = 0;
-        t.forEach((w, $) => {
-          setTimeout(() => {
-            const B = performance.now();
-            function z(G) {
-              const te = Math.min((G - B) / a, 1), Ue = Ot(te);
-              j.value[$] = w * Ue, j.value = [...j.value], te < 1 ? (requestAnimationFrame(z), requestAnimationFrame(W)) : (j.value[$] = w, j.value = [...j.value], d += 1, d === i && o(), requestAnimationFrame(W));
-            }
-            requestAnimationFrame(z);
-          }, $ * l);
-        });
-      });
-    }
-    const it = b(!1);
-    ye(
-      () => xe.value,
-      async (t) => {
-        if (t || it.value) return;
-        const a = ve.value === ul, l = e.value.startAnimation?.show;
-        if (!a && l) {
-          it.value = !0;
-          const o = ve.value.map(
-            (i) => i.values.reduce((d, w) => d + w, 0)
-          );
-          await rl(
-            o,
-            e.value.startAnimation.durationMs,
-            e.value.startAnimation.staggerMs
-          );
-        }
-        F.value = !1;
-      },
-      { immediate: !0 }
-    );
-    const { userOptionsVisible: Ee, setUserOptionsVisibility: ct, keepUserOptionState: vt } = so({ config: e.value }), { svgRef: ae } = uo({ config: e.value.style.chart.title });
-    function il() {
-      ct(!0);
-    }
-    function cl() {
-      ct(!1);
-    }
-    ye(() => C.config, (t) => {
-      xe.value || (e.value = Oe()), Ee.value = !e.value.userOptions.showOnChartHover, ut(), ot.value += 1, at.value += 1, nt.value += 1, p.value.dataLabels.show = e.value.style.chart.layout.labels.dataLabels.show, p.value.showTable = e.value.table.show, p.value.showTooltip = e.value.style.chart.tooltip.show, n.value.height = e.value.style.chart.height, n.value.width = e.value.style.chart.width;
-    }, { deep: !0 });
-    const dt = f(() => {
-      const { top: t, right: a, bottom: l, left: o } = e.value.style.chart.padding;
-      return {
-        css: `padding:${t}px ${a}px ${l}px ${o}px`,
-        top: t,
-        right: a,
-        bottom: l,
-        left: o
-      };
-    }), { isPrinting: ht, isImaging: ft, generatePdf: yt, generateImage: gt } = to({
-      elementId: `donut__${g.value}`,
-      fileName: e.value.style.chart.title.text || "vue-ui-donut",
-      options: e.value.userOptions.print
-    }), vl = f(() => e.value.userOptions.show && !e.value.style.chart.title.text), pt = f(() => Xl(e.value.customPalette)), p = b({
-      dataLabels: {
-        show: e.value.style.chart.layout.labels.dataLabels.show
-      },
-      showTable: e.value.table.show,
-      showTooltip: e.value.style.chart.tooltip.show
-    });
-    ye(e, () => {
-      p.value = {
-        dataLabels: {
-          show: e.value.style.chart.layout.labels.dataLabels.show
-        },
-        showTable: e.value.table.show,
-        showTooltip: e.value.style.chart.tooltip.show
-      };
-    }, { immediate: !0 });
-    const n = b({
-      height: e.value.style.chart.height,
-      width: e.value.style.chart.width
-    }), ne = f(() => {
-      if (e.value.pie)
-        return A.value;
-      const t = e.value.style.chart.layout.donut.strokeWidth / 512, a = Math.min(n.value.width, n.value.height) * t, l = a > A.value ? A.value : a;
-      return Math.max(l, 12 * (1 + t));
-    }), bt = qt, I = f(() => ve.value.map((t, a) => ({
-      name: t.name,
-      color: Mt(t.color) || pt.value[a] || ie[a] || ie[a % ie.length],
-      value: Vl(t.values.reduce((l, o) => l + o, 0)),
-      absoluteValues: t.values,
-      comment: t.comment || "",
-      patternIndex: a,
-      seriesIndex: a,
-      ghost: !1,
-      pattern: `pattern_${g.value}_${a}`
-    })));
-    ye(() => C.dataset, (t) => {
-      Array.isArray(t) && t.length > 0 && (Ae.value = !1);
-    }, { immediate: !0 });
-    const L = J(I.value);
-    ye(() => I.value, (t) => {
-      L.value = t, requestAnimationFrame(W);
-    });
-    function dl() {
-      return I.value.map((t) => ({
-        name: t.name,
-        color: t.color,
-        value: t.value
-      }));
-    }
-    const M = b([]), se = b(!1);
-    function mt({ from: t, to: a, duration: l, onUpdate: o, onDone: i, easing: d = Ot }) {
-      const w = performance.now();
-      function $(B) {
-        const z = Math.min((B - w) / l, 1), G = d(z), te = t + (a - t) * G;
-        o(te, z), z < 1 ? requestAnimationFrame($) : (o(a, 1), i && i());
-      }
-      requestAnimationFrame($);
-    }
-    function _e(t) {
-      const a = I.value.find((i, d) => d === t);
-      let o = L.value.find((i, d) => d === t).value;
-      if (M.value.includes(t)) {
-        let d = function() {
-          L.value = L.value.map(
-            ($, B) => t === B ? { ...$, value: i } : $
-          );
-        }, w = function() {
-          se.value = !0, mt({
-            from: o,
-            to: i,
-            duration: e.value.serieToggleAnimation.durationMs,
-            onUpdate: ($, B) => {
-              L.value = L.value.map(
-                (z, G) => t === G ? { ...z, value: $ } : z
-              ), requestAnimationFrame(W);
-            },
-            onDone: () => {
-              d(), se.value = !1;
-            }
-          });
-        };
-        M.value = M.value.filter(($) => $ !== t);
-        const i = a.value;
-        e.value.serieToggleAnimation.show && e.value.type === "classic" ? w() : (d(), requestAnimationFrame(W));
-      } else if (M.value.length < I.value.length - 1) {
-        let i = function() {
-          M.value.push(t), L.value = L.value.map(
-            (w, $) => t === $ ? { ...w, value: 0 } : w
-          );
-        }, d = function() {
-          se.value = !0, mt({
-            from: o,
-            to: 0,
-            duration: e.value.serieToggleAnimation.durationMs,
-            onUpdate: (w, $) => {
-              L.value = L.value.map(
-                (B, z) => t === z ? { ...B, value: w } : B
-              ), requestAnimationFrame(W);
-            },
-            onDone: () => {
-              i(), requestAnimationFrame(W), se.value = !1;
-            }
-          });
-        };
-        e.value.serieToggleAnimation.show && e.value.type === "classic" ? d() : i();
-      }
-      bt("selectLegend", H.value.map((i) => ({
-        name: i.name,
-        color: i.color,
-        value: i.value
-      })));
-    }
-    function wt(t) {
-      if (!I.value.length)
-        return e.value.debug && console.warn("VueUiDonut - There are no series to show."), null;
-      const a = I.value.find((l) => l.name === t);
-      return a || (e.value.debug && console.warn(`VueUiDonut - Series name not found "${t}"`), null);
-    }
-    function hl(t) {
-      const a = wt(t);
-      a !== null && M.value.includes(a.seriesIndex) && _e(a.seriesIndex);
-    }
-    function fl(t) {
-      const a = wt(t);
-      a !== null && (M.value.includes(a.seriesIndex) || _e(a.seriesIndex));
-    }
-    const yl = f(() => ve.value.reduce((t, a) => t + a.values.reduce((l, o) => l + o, 0), 0)), H = f(() => {
-      if (F.value && !xe.value) {
-        const t = j.value.map((l, o) => ({
-          ...I.value[o],
-          value: l,
-          color: I.value[o].color,
-          ghost: !1
-        })), a = yl.value - j.value.reduce((l, o) => l + o, 0);
-        return a > 0 && t.push({
-          name: "__ghost__",
-          value: a,
-          color: "transparent",
-          ghost: !0
-        }), t;
-      } else
-        return L.value.forEach((t, a) => {
-          if ([null, void 0].includes(t.values))
-            return {
-              ...t,
-              values: []
-            };
-        }), L.value.map((t, a) => ({
-          ...t,
-          seriesIndex: a
-        })).filter((t, a) => !M.value.includes(a));
-    }), Ne = f(() => ve.value.map((t, a) => {
-      const l = (t.values || []).reduce((i, d) => i + d, 0), o = l / ve.value.map((i) => (i.values || []).reduce((d, w) => d + w, 0)).reduce((i, d) => i + d, 0);
-      return {
-        name: t.name,
-        color: Mt(t.color) || pt.value[a] || ie[a] || ie[a % ie.length],
-        value: l,
-        shape: "circle",
-        patternIndex: a,
-        proportion: o
-      };
-    }).map((t, a) => ({
-      ...t,
-      opacity: M.value.includes(a) ? 0.5 : 1,
-      segregate: () => !se.value && _e(a),
-      isSegregated: M.value.includes(a),
-      display: `${t.name}${e.value.style.chart.legend.showPercentage || e.value.style.chart.legend.showValue ? ": " : ""}${e.value.style.chart.legend.showValue ? q(e.value.style.chart.layout.labels.value.formatter, t.value, N({
-        p: e.value.style.chart.layout.labels.dataLabels.prefix,
-        v: t.value,
-        s: e.value.style.chart.layout.labels.dataLabels.suffix,
-        r: e.value.style.chart.legend.roundingValue
-      }), { datapoint: t, index: a }) : ""}${e.value.style.chart.legend.showPercentage ? M.value.includes(a) ? `${e.value.style.chart.legend.showValue ? "(" : ""}${kl(t.proportion * 100)}%${e.value.style.chart.legend.showValue ? ")" : ""}` : `${e.value.style.chart.legend.showValue ? " (" : ""}${isNaN(t.value / P.value) ? "-" : q(e.value.style.chart.layout.labels.percentage.formatter, kt(t), N({
-        v: kt(t),
-        s: "%",
-        r: e.value.style.chart.legend.roundingPercentage
-      }))}${e.value.style.chart.legend.showValue ? ")" : ""}` : ""}`
-    }))), gl = f(() => ({
-      cy: "donut-div-legend",
-      backgroundColor: e.value.style.chart.legend.backgroundColor,
-      color: e.value.style.chart.legend.color,
-      fontSize: e.value.style.chart.legend.fontSize,
-      paddingBottom: 12,
-      fontWeight: e.value.style.chart.legend.bold ? "bold" : ""
-    })), A = f(() => {
-      const t = e.value.style.chart.layout.donut.radiusRatio, a = Math.max(0.1, Math.min(0.50001, t)), l = Math.min(n.value.width * a, n.value.height * a);
-      return Math.max(12, l);
-    }), S = f(() => Bt({ series: H.value }, n.value.width / 2, n.value.height / 2, A.value, A.value, 1.99999, 2, 1, 360, 105.25, ne.value)), pl = f(() => Math.abs(H.value.map((t) => t.value).reduce((t, a) => t + a, 0)) > 0), bl = f(() => Bt({
-      series: [
-        {
-          value: 1,
-          color: e.value.style.chart.layout.donut.emptyFill,
-          name: "_",
-          seriesIndex: 0,
-          patternIndex: -1,
-          ghost: !1,
-          absoluteValues: [1]
-        }
-      ]
-    }, n.value.width / 2, n.value.height / 2, A.value, A.value, 1.99999, 2, 1, 360, 105.25, ne.value)), V = f(() => S.value.filter((t) => !t.ghost)), v = f(() => {
-      const t = Math.max(...H.value.map((l) => l.value)), a = H.value.map((l) => l.value / t);
-      return Rl({
-        series: a,
-        center: {
-          x: n.value.width / 2,
-          y: n.value.height / 2
-        },
-        maxRadius: Math.min(n.value.width, n.value.height) / 3,
-        hasGhost: F.value
-      });
-    });
-    function de(t) {
-      return t.x > n.value.width / 2 + 6 ? "start" : t.x < n.value.width / 2 - 6 ? "end" : "middle";
-    }
-    function ml(t) {
-      return t.middlePoint.y > n.value.height / 2 ? T({ initX: t.middlePoint.x, initY: t.middlePoint.y, offset: 100, centerX: n.value.width / 2, centerY: n.value.height / 2 }).y : T({ initX: t.middlePoint.x, initY: t.middlePoint.y, offset: 0, centerX: n.value.width / 2, centerY: n.value.height / 2 }).y - 100;
-    }
-    function R(t) {
-      return t.proportion * 100 > e.value.style.chart.layout.labels.dataLabels.hideUnderValue;
-    }
-    function Ye(t, a) {
-      const l = t.value / wl(a);
-      return isNaN(l) ? 0 : q(
-        e.value.style.chart.layout.labels.percentage.formatter,
-        l * 100,
-        N({
-          v: l * 100,
-          s: "%",
-          r: e.value.style.chart.layout.labels.percentage.rounding
-        }),
-        { datapoint: t }
-      );
-    }
-    function wl(t) {
-      return [...t].map((a) => a.value).reduce((a, l) => a + l, 0);
-    }
-    const P = f(() => H.value.map((t) => t.value).reduce((t, a) => t + a, 0)), Xe = f(() => P.value / H.value.length);
-    function kt(t) {
-      return se.value ? t.proportion * 100 : t.value / P.value * 100;
-    }
-    const Ve = b(null), be = b(!1);
-    function he({ datapoint: t, seriesIndex: a }) {
-      e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: t, seriesIndex: a }), Be.value = !1, X.value = null;
-    }
-    function fe({ datapoint: t, relativeIndex: a, seriesIndex: l, show: o = !1 }) {
-      e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: t, seriesIndex: l }), Ve.value = { datapoint: t, seriesIndex: l, config: e.value, series: I.value }, Be.value = o, X.value = a;
-      let i = "";
-      const d = e.value.style.chart.tooltip.customFormat;
-      if (be.value = !1, Kl(d))
-        try {
-          const w = d({
-            seriesIndex: l,
-            datapoint: t,
-            series: I.value,
-            config: e.value
-          });
-          typeof w == "string" && (ze.value = w, be.value = !0);
-        } catch {
-          console.warn("Custom format cannot be applied."), be.value = !1;
-        }
-      if (!be.value) {
-        if (i += `<div style="width:100%;text-align:center;border-bottom:1px solid ${e.value.style.chart.tooltip.borderColor};padding-bottom:6px;margin-bottom:3px;">${t.name}</div>`, i += `<div style="display:flex;flex-direction:row;gap:6px;align-items:center;"><svg viewBox="0 0 60 60" height="14" width="14"><circle cx="30" cy="30" r="30" stroke="none" fill="${t.color}"/>${al.pattern ? `<circle cx="30" cy="30" r="30" stroke="none" fill="url(#pattern_${g.value}_${l})"/>` : ""}</svg>`, e.value.style.chart.tooltip.showValue && (i += `<b>${q(
-          e.value.style.chart.layout.labels.value.formatter,
-          t.value,
-          N({
-            p: e.value.style.chart.layout.labels.dataLabels.prefix,
-            v: t.value,
-            s: e.value.style.chart.layout.labels.dataLabels.suffix,
-            r: e.value.style.chart.tooltip.roundingValue
-          }),
-          {
-            datapoint: t,
-            relativeIndex: a,
-            seriesIndex: l
-          }
-        )}</b>`), e.value.style.chart.tooltip.showPercentage) {
-          const w = q(
-            e.value.style.chart.layout.labels.percentage.formatter,
-            t.proportion * 100,
-            N({
-              v: t.proportion * 100,
-              s: "%",
-              r: e.value.style.chart.tooltip.roundingPercentage
-            }),
-            {
-              datapoint: t,
-              relativeIndex: a,
-              seriesIndex: l
-            }
-          );
-          e.value.style.chart.tooltip.showValue ? i += `<span>(${w})</span></div>` : i += `<b>${w}</b></div>`;
-        }
-        e.value.style.chart.comments.showInTooltip && t.comment && (i += `<div class="vue-data-ui-tooltip-comment" style="background:${t.color}20; padding: 6px; margin-bottom: 6px; margin-top:6px; border-left: 1px solid ${t.color}">${t.comment}</div>`), ze.value = `<div>${i}</div>`;
-      }
-    }
-    function ue(t) {
-      return e.value.useBlurOnHover && ![null, void 0].includes(X.value) && X.value !== t ? `url(#blur_${g.value})` : "";
-    }
-    const Z = f(() => {
-      const t = H.value.map((l) => ({
-        name: l.name,
-        color: l.color
-      })), a = H.value.map((l) => l.value);
-      return { head: t, body: a };
-    });
-    function Re(t = null) {
-      Ol(() => {
-        const a = Z.value.head.map((i, d) => [[
-          i.name
-        ], [Z.value.body[d]], [isNaN(Z.value.body[d] / P.value) ? "-" : Z.value.body[d] / P.value * 100]]), l = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [[""], ["val"], ["%"]]].concat(a), o = Hl(l);
-        t ? t(o) : Jl({ csvContent: o, title: e.value.style.chart.title.text || "vue-ui-donut" });
-      });
-    }
-    const $e = f(() => {
-      const t = [
-        ' <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>',
-        N({ p: e.value.style.chart.layout.labels.dataLabels.prefix, v: P.value, s: e.value.style.chart.layout.labels.dataLabels.suffix, r: e.value.table.td.roundingValue }),
-        "100%"
-      ], a = Z.value.head.map((i, d) => [
-        {
-          color: i.color,
-          name: i.name || "-"
-        },
-        Z.value.body[d],
-        isNaN(Z.value.body[d] / P.value) ? "-" : (Z.value.body[d] / P.value * 100).toFixed(e.value.table.td.roundingPercentage) + "%"
-      ]), l = {
-        th: {
-          backgroundColor: e.value.table.th.backgroundColor,
-          color: e.value.table.th.color,
-          outline: e.value.table.th.outline
-        },
-        td: {
-          backgroundColor: e.value.table.td.backgroundColor,
-          color: e.value.table.td.color,
-          outline: e.value.table.td.outline
-        },
-        breakpoint: e.value.table.responsiveBreakpoint
-      };
-      return {
-        colNames: [
-          e.value.table.columnNames.series,
-          e.value.table.columnNames.value,
-          e.value.table.columnNames.percentage
-        ],
-        head: t,
-        body: a,
-        config: l
-      };
-    }), re = b(!1);
-    function Ct(t) {
-      re.value = t, rt.value += 1;
-    }
-    const xt = f(() => /^((?!chrome|android).)*safari/i.test(navigator.userAgent));
-    function kl(t) {
-      return t.toFixed(e.value.style.chart.legend.roundingPercentage).split("").map((a) => "-").join("");
-    }
-    function ee(t, a) {
-      e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: t, seriesIndex: t.seriesIndex }), bt("selectDatapoint", { datapoint: t, index: a });
-    }
-    function At() {
-      p.value.showTable = !p.value.showTable;
-    }
-    function _t() {
-      p.value.dataLabels.show = !p.value.dataLabels.show;
-    }
-    function $t() {
-      p.value.showTooltip = !p.value.showTooltip;
-    }
-    const Fe = b(!1);
-    function Ge() {
-      Fe.value = !Fe.value;
-    }
-    async function Cl({ scale: t = 2 } = {}) {
-      if (!Y.value) return;
-      const { width: a, height: l } = Y.value.getBoundingClientRect(), o = a / l, { imageUri: i, base64: d } = await ro({ domElement: Y.value, base64: !0, img: !0, scale: t });
-      return {
-        imageUri: i,
-        base64: d,
-        title: e.value.style.chart.title.text,
-        width: a,
-        height: l,
-        aspectRatio: o
-      };
-    }
-    function xl() {
-      if (!ke.value) return;
-      const { x: t, y: a, width: l, height: o } = ke.value.getBBox();
-      ae.value && ae.value.setAttribute("viewBox", `${t} ${a} ${l + Math.min(0, t)} ${o + Math.min(0, a)}`);
-    }
-    const me = f(() => {
-      const t = e.value.table.useDialog && !e.value.table.show, a = p.value.showTable;
-      return {
-        component: t ? el : Ht,
-        title: `${e.value.style.chart.title.text}${e.value.style.chart.title.subtitle.text ? `: ${e.value.style.chart.title.subtitle.text}` : ""}`,
-        props: t ? {
-          backgroundColor: e.value.table.th.backgroundColor,
-          color: e.value.table.th.color,
-          headerColor: e.value.table.th.color,
-          headerBg: e.value.table.th.backgroundColor,
-          isFullscreen: re.value,
-          fullscreenParent: Y.value,
-          forcedWidth: Math.min(500, window.innerWidth * 0.8)
-        } : {
-          hideDetails: !0,
-          config: {
-            open: a,
-            maxHeight: 1e4,
-            body: {
-              backgroundColor: e.value.style.chart.backgroundColor,
-              color: e.value.style.chart.color
-            },
-            head: {
-              backgroundColor: e.value.style.chart.backgroundColor,
-              color: e.value.style.chart.color
-            }
-          }
-        }
-      };
-    });
-    ye(() => p.value.showTable, (t) => {
-      e.value.table.show || (t && e.value.table.useDialog && pe.value ? pe.value.open() : "close" in pe.value && pe.value.close());
-    });
-    function Ft() {
-      p.value.showTable = !1, De.value && De.value.setTableIconState(!1);
-    }
-    const Al = f(() => Ne.value.map((t) => ({
-      ...t,
-      name: t.display
-    }))), _l = f(() => e.value.style.chart.backgroundColor), $l = f(() => e.value.style.chart.legend), Fl = f(() => e.value.style.chart.title), { exportSvg: Sl, getSvg: Tl } = ao({
-      svg: ae,
-      title: Fl,
-      legend: $l,
-      legendItems: Al,
-      backgroundColor: _l
-    });
-    async function St({ isCb: t }) {
-      if (t) {
-        const { blob: a, url: l, text: o, dataUrl: i } = await Tl();
-        e.value.userOptions.callbacks.svg({ blob: a, url: l, text: o, dataUrl: i });
-      } else
-        Sl();
-    }
-    return Ut({
-      autoSize: xl,
-      getData: dl,
-      getImage: Cl,
-      generatePdf: yt,
-      generateCsv: Re,
-      generateImage: gt,
-      generateSvg: St,
-      hideSeries: fl,
-      showSeries: hl,
-      toggleTable: At,
-      toggleLabels: _t,
-      toggleTooltip: $t,
-      toggleAnnotator: Ge,
-      toggleFullscreen: Ct
-    }), (t, a) => (s(), r("div", {
-      ref_key: "donutChart",
-      ref: Y,
-      class: qe(`vue-data-ui-component vue-ui-donut ${re.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${e.value.useCssAnimation ? "" : "vue-ui-dna"}`),
-      style: _(`font-family:${e.value.style.fontFamily};width:100%; ${e.value.responsive ? "height:100%;" : ""} text-align:center;background:${e.value.style.chart.backgroundColor}`),
-      id: `donut__${g.value}`,
-      onMouseenter: il,
-      onMouseleave: cl
-    }, [
-      e.value.userOptions.buttons.annotator && u(ae) ? (s(), oe(u(Kt), {
-        key: 0,
-        color: e.value.style.chart.color,
-        backgroundColor: e.value.style.chart.backgroundColor,
-        active: Fe.value,
-        svgRef: u(ae),
-        onClose: Ge
-      }, {
-        "annotator-action-close": m(() => [
-          y(t.$slots, "annotator-action-close", {}, void 0, !0)
-        ]),
-        "annotator-action-color": m(({ color: l }) => [
-          y(t.$slots, "annotator-action-color", O(E({ color: l })), void 0, !0)
-        ]),
-        "annotator-action-draw": m(({ mode: l }) => [
-          y(t.$slots, "annotator-action-draw", O(E({ mode: l })), void 0, !0)
-        ]),
-        "annotator-action-undo": m(({ disabled: l }) => [
-          y(t.$slots, "annotator-action-undo", O(E({ disabled: l })), void 0, !0)
-        ]),
-        "annotator-action-redo": m(({ disabled: l }) => [
-          y(t.$slots, "annotator-action-redo", O(E({ disabled: l })), void 0, !0)
-        ]),
-        "annotator-action-delete": m(({ disabled: l }) => [
-          y(t.$slots, "annotator-action-delete", O(E({ disabled: l })), void 0, !0)
-        ]),
-        _: 3
-      }, 8, ["color", "backgroundColor", "active", "svgRef"])) : c("", !0),
-      y(t.$slots, "userConfig", {}, void 0, !0),
-      vl.value ? (s(), r("div", {
-        key: 1,
-        ref_key: "noTitle",
-        ref: lt,
-        class: "vue-data-ui-no-title-space",
-        style: "height:36px; width: 100%;background:transparent"
-      }, null, 512)) : c("", !0),
-      e.value.style.chart.title.text ? (s(), r("div", {
-        key: 2,
-        ref_key: "chartTitle",
-        ref: Ze,
-        style: "width:100%;background:transparent;padding-bottom:24px"
-      }, [
-        (s(), oe(co, {
-          key: `title_${ot.value}`,
-          config: {
-            title: {
-              cy: "donut-div-title",
-              ...e.value.style.chart.title
-            },
-            subtitle: {
-              cy: "donut-div-subtitle",
-              ...e.value.style.chart.title.subtitle
-            }
-          }
-        }, null, 8, ["config"]))
-      ], 512)) : c("", !0),
-      h("div", {
-        id: `legend-top-${g.value}`
-      }, null, 8, yo),
-      e.value.userOptions.show && we.value && (u(vt) || u(Ee)) ? (s(), oe(u(Qt), {
-        ref_key: "userOptionsRef",
-        ref: De,
-        key: `user_option_${rt.value}`,
-        backgroundColor: e.value.style.chart.backgroundColor,
-        color: e.value.style.chart.color,
-        isPrinting: u(ht),
-        isImaging: u(ft),
-        uid: g.value,
-        hasTooltip: e.value.style.chart.tooltip.show && e.value.userOptions.buttons.tooltip,
-        hasPdf: e.value.userOptions.buttons.pdf,
-        hasImg: e.value.userOptions.buttons.img,
-        hasSvg: e.value.userOptions.buttons.svg,
-        hasXls: e.value.userOptions.buttons.csv,
-        hasTable: e.value.userOptions.buttons.table,
-        hasLabel: e.value.userOptions.buttons.labels,
-        hasFullscreen: e.value.userOptions.buttons.fullscreen,
-        isFullscreen: re.value,
-        chartElement: Y.value,
-        position: e.value.userOptions.position,
-        callbacks: e.value.userOptions.callbacks,
-        isTooltip: p.value.showTooltip,
-        titles: { ...e.value.userOptions.buttonTitles },
-        hasAnnotator: e.value.userOptions.buttons.annotator,
-        isAnnotation: Fe.value,
-        printScale: e.value.userOptions.print.scale,
-        tableDialog: e.value.table.useDialog,
-        onToggleFullscreen: Ct,
-        onGeneratePdf: u(yt),
-        onGenerateCsv: Re,
-        onGenerateImage: u(gt),
-        onGenerateSvg: St,
-        onToggleTable: At,
-        onToggleLabels: _t,
-        onToggleTooltip: $t,
-        onToggleAnnotator: Ge,
-        style: _({ visibility: u(vt) ? u(Ee) ? "visible" : "hidden" : "visible" })
-      }, We({ _: 2 }, [
-        t.$slots.menuIcon ? {
-          name: "menuIcon",
-          fn: m(({ isOpen: l, color: o }) => [
-            y(t.$slots, "menuIcon", O(E({ isOpen: l, color: o })), void 0, !0)
-          ]),
-          key: "0"
-        } : void 0,
-        t.$slots.optionTooltip ? {
-          name: "optionTooltip",
-          fn: m(() => [
-            y(t.$slots, "optionTooltip", {}, void 0, !0)
-          ]),
-          key: "1"
-        } : void 0,
-        t.$slots.optionPdf ? {
-          name: "optionPdf",
-          fn: m(() => [
-            y(t.$slots, "optionPdf", {}, void 0, !0)
-          ]),
-          key: "2"
-        } : void 0,
-        t.$slots.optionCsv ? {
-          name: "optionCsv",
-          fn: m(() => [
-            y(t.$slots, "optionCsv", {}, void 0, !0)
-          ]),
-          key: "3"
-        } : void 0,
-        t.$slots.optionImg ? {
-          name: "optionImg",
-          fn: m(() => [
-            y(t.$slots, "optionImg", {}, void 0, !0)
-          ]),
-          key: "4"
-        } : void 0,
-        t.$slots.optionSvg ? {
-          name: "optionSvg",
-          fn: m(() => [
-            y(t.$slots, "optionSvg", {}, void 0, !0)
-          ]),
-          key: "5"
-        } : void 0,
-        t.$slots.optionTable ? {
-          name: "optionTable",
-          fn: m(() => [
-            y(t.$slots, "optionTable", {}, void 0, !0)
-          ]),
-          key: "6"
-        } : void 0,
-        t.$slots.optionLabels ? {
-          name: "optionLabels",
-          fn: m(() => [
-            y(t.$slots, "optionLabels", {}, void 0, !0)
-          ]),
-          key: "7"
-        } : void 0,
-        t.$slots.optionFullscreen ? {
-          name: "optionFullscreen",
-          fn: m(({ toggleFullscreen: l, isFullscreen: o }) => [
-            y(t.$slots, "optionFullscreen", O(E({ toggleFullscreen: l, isFullscreen: o })), void 0, !0)
-          ]),
-          key: "8"
-        } : void 0,
-        t.$slots.optionAnnotator ? {
-          name: "optionAnnotator",
-          fn: m(({ toggleAnnotator: l, isAnnotator: o }) => [
-            y(t.$slots, "optionAnnotator", O(E({ toggleAnnotator: l, isAnnotator: o })), void 0, !0)
-          ]),
-          key: "9"
-        } : void 0
-      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasTooltip", "hasPdf", "hasImg", "hasSvg", "hasXls", "hasTable", "hasLabel", "hasFullscreen", "isFullscreen", "chartElement", "position", "callbacks", "isTooltip", "titles", "hasAnnotator", "isAnnotation", "printScale", "tableDialog", "onGeneratePdf", "onGenerateImage", "style"])) : c("", !0),
-      (s(), r("svg", {
-        ref_key: "svgRef",
-        ref: ae,
-        xmlns: u(Gl),
-        class: qe({ "vue-data-ui-fullscreen--on": re.value, "vue-data-ui-fulscreen--off": !re.value, "vue-data-ui-svg": !0 }),
-        viewBox: `0 0 ${n.value.width <= 0 ? 10 : n.value.width} ${n.value.height <= 0 ? 10 : n.value.height}`,
-        style: _(`max-width:100%; overflow: visible; background:transparent;color:${e.value.style.chart.color};${dt.value.css}`)
-      }, [
-        h("g", {
-          ref_key: "G",
-          ref: ke,
-          class: "vue-data-ui-g"
-        }, [
-          Se(u(Zt)),
-          t.$slots["chart-background"] ? (s(), r("foreignObject", {
-            key: 0,
-            x: 0,
-            y: 0,
-            width: n.value.width <= 0 ? 10 : n.value.width,
-            height: n.value.height <= 0 ? 10 : n.value.height,
-            style: {
-              pointerEvents: "none"
-            }
-          }, [
-            y(t.$slots, "chart-background", {}, void 0, !0)
-          ], 8, po)) : c("", !0),
-          e.value.type === "classic" && !isNaN(ne.value / A.value) ? (s(), r("defs", bo, [
-            e.value.style.chart.useGradient ? (s(), r("radialGradient", {
-              key: 0,
-              id: `gradient_${g.value}`
-            }, [
-              h("stop", {
-                offset: "0%",
-                "stop-color": u(Pe)(e.value.style.chart.backgroundColor, 0),
-                "stop-opacity": "0"
-              }, null, 8, wo),
-              h("stop", {
-                offset: `${(1 - ne.value / A.value) * 100}%`,
-                "stop-color": u(Pe)("#FFFFFF", 0),
-                "stop-opacity": "0"
-              }, null, 8, ko),
-              h("stop", {
-                offset: `${(1 - ne.value / A.value / 2) * 100}%`,
-                "stop-color": u(Pe)("#FFFFFF", e.value.style.chart.gradientIntensity)
-              }, null, 8, Co),
-              h("stop", {
-                offset: "100%",
-                "stop-color": u(Pe)(e.value.style.chart.backgroundColor, 0),
-                "stop-opacity": "0"
-              }, null, 8, xo)
-            ], 8, mo)) : c("", !0)
-          ])) : c("", !0),
-          e.value.type === "polar" ? (s(), r("defs", Ao, [
-            (s(!0), r(k, null, D(v.value, (l, o) => (s(), r("radialGradient", {
-              id: `polar_gradient_${o}_${g.value}`,
-              cx: (isNaN(l.middlePoint.x / n.value.width * 100) ? 0 : l.middlePoint.x / n.value.width * 100) + "%",
-              cy: (isNaN(l.middlePoint.y / n.value.height * 100) ? 0 : l.middlePoint.y / n.value.height * 100) + "%",
-              r: "62%"
-            }, [
-              h("stop", {
-                offset: "0%",
-                "stop-color": u(Ul)(S.value[o].color, 0.05),
-                "stop-opacity": e.value.style.chart.gradientIntensity / 100
-              }, null, 8, $o),
-              h("stop", {
-                offset: "100%",
-                "stop-color": S.value[o].color
-              }, null, 8, Fo)
-            ], 8, _o))), 256))
-          ])) : c("", !0),
-          h("defs", null, [
-            h("filter", {
-              id: `blur_${g.value}`,
-              x: "-50%",
-              y: "-50%",
-              width: "200%",
-              height: "200%"
-            }, [
-              h("feGaussianBlur", {
-                in: "SourceGraphic",
-                stdDeviation: 2,
-                id: `blur_std_${g.value}`
-              }, null, 8, To),
-              a[5] || (a[5] = h("feColorMatrix", {
-                type: "saturate",
-                values: "0"
-              }, null, -1))
-            ], 8, So),
-            h("filter", {
-              id: `shadow_${g.value}`,
-              "color-interpolation-filters": "sRGB"
-            }, [
-              h("feDropShadow", {
-                dx: "0",
-                dy: "0",
-                stdDeviation: "10",
-                "flood-opacity": "0.5",
-                "flood-color": e.value.style.chart.layout.donut.shadowColor
-              }, null, 8, Do)
-            ], 8, Po),
-            h("filter", {
-              id: `drop_shadow_${g.value}`,
-              "color-interpolation-filters": "sRGB",
-              x: "-50%",
-              y: "-50%",
-              width: "200%",
-              height: "200%"
-            }, [
-              h("feDropShadow", {
-                dx: "0",
-                dy: "0",
-                stdDeviation: "3",
-                "flood-opacity": "1",
-                "flood-color": e.value.style.chart.layout.donut.shadowColor
-              }, null, 8, Lo)
-            ], 8, Io)
-          ]),
-          e.value.type === "classic" ? (s(!0), r(k, { key: 3 }, D(S.value.filter((l) => !l.ghost), (l, o) => (s(), r("g", null, [
-            R(l) && p.value.dataLabels.show ? (s(), r("path", {
-              key: 0,
-              d: u(ql)(l, { x: n.value.width / 2, y: n.value.height / 2 }, 16, 16, !1, !1, ne.value, 12, e.value.style.chart.layout.curvedMarkers),
-              stroke: l.color,
-              "stroke-width": "1",
-              "stroke-linecap": "round",
-              "stroke-linejoin": "round",
-              fill: "none",
-              filter: ue(o)
-            }, null, 8, Mo)) : c("", !0)
-          ]))), 256)) : c("", !0),
-          e.value.type === "polar" ? (s(!0), r(k, { key: 4 }, D(S.value.filter((l) => !l.ghost), (l, o) => (s(), r("g", null, [
-            R(l) && p.value.dataLabels.show ? (s(), r("path", {
-              key: 0,
-              d: `M ${u(T)({ initX: v.value[o].middlePoint.x, initY: v.value[o].middlePoint.y, offset: 24, centerX: n.value.width / 2, centerY: n.value.height / 2 }).x},${u(T)({ initX: v.value[o].middlePoint.x, initY: v.value[o].middlePoint.y, offset: 24, centerX: n.value.width / 2, centerY: n.value.height / 2 }).y} ${v.value[o].middlePoint.x},${v.value[o].middlePoint.y}`,
-              stroke: l.color,
-              "stroke-width": "1",
-              "stroke-linecap": "round",
-              "stroke-linejoin": "round",
-              fill: "none",
-              filter: ue(o),
-              style: _({
-                transition: F.value || !e.value.serieToggleAnimation.show ? "none" : `all ${e.value.serieToggleAnimation.durationMs}ms ease-in-out`
-              })
-            }, null, 12, Bo)) : c("", !0)
-          ]))), 256)) : c("", !0),
-          e.value.type === "classic" && e.value.style.chart.layout.donut.useShadow ? (s(), r("circle", {
-            key: 5,
-            cx: n.value.width / 2,
-            cy: n.value.height / 2,
-            r: A.value <= 0 ? 10 : A.value,
-            fill: e.value.style.chart.backgroundColor,
-            filter: `url(#shadow_${g.value})`
-          }, null, 8, zo)) : c("", !0),
-          t.$slots.pattern ? (s(), r("g", Oo, [
-            (s(!0), r(k, null, D(Qe.dataset, (l, o) => (s(), r("defs", {
-              key: `pattern-${l.patternIndex}`
-            }, [
-              y(t.$slots, "pattern", je({ ref_for: !0 }, { seriesIndex: o, patternId: `pattern_${g.value}_${o}` }), void 0, !0)
-            ]))), 128))
-          ])) : c("", !0),
-          P.value && e.value.type === "classic" ? (s(), r(k, { key: 7 }, [
-            (s(!0), r(k, null, D(V.value, (l, o) => (s(), r("path", {
-              stroke: e.value.style.chart.backgroundColor,
-              d: l.arcSlice,
-              fill: "#FFFFFF"
-            }, null, 8, Eo))), 256)),
-            (s(!0), r(k, null, D(V.value, (l, o) => (s(), r("path", {
-              class: "vue-ui-donut-arc-path",
-              d: l.arcSlice,
-              fill: l.color,
-              stroke: e.value.style.chart.layout.donut.borderColorAuto ? e.value.style.chart.backgroundColor : e.value.style.chart.layout.donut.borderColor,
-              "stroke-width": e.value.style.chart.layout.donut.borderWidth,
-              filter: ue(o)
-            }, null, 8, No))), 256)),
-            t.$slots.pattern ? (s(), r("g", Yo, [
-              (s(!0), r(k, null, D(V.value, (l, o) => (s(), r("path", {
-                class: "vue-ui-donut-arc-path",
-                d: l.arcSlice,
-                fill: `url(#${l.pattern})`,
-                stroke: e.value.style.chart.layout.donut.borderColorAuto ? e.value.style.chart.backgroundColor : e.value.style.chart.layout.donut.borderColor,
-                "stroke-width": e.value.style.chart.layout.donut.borderWidth,
-                filter: ue(o)
-              }, null, 8, Xo))), 256))
-            ])) : c("", !0)
-          ], 64)) : c("", !0),
-          P.value && e.value.type === "polar" ? (s(), r(k, { key: 8 }, [
-            S.value.length > 1 ? (s(), r("g", Vo, [
-              (s(!0), r(k, null, D(V.value, (l, o) => (s(), r("path", {
-                stroke: e.value.style.chart.layout.donut.borderColorAuto ? e.value.style.chart.backgroundColor : e.value.style.chart.layout.donut.borderColor,
-                d: v.value[o].path,
-                fill: "#FFFFFF",
-                style: _({
-                  transition: F.value || !e.value.serieToggleAnimation.show ? "none" : `all ${e.value.serieToggleAnimation.durationMs}ms ease-in-out`
-                })
-              }, null, 12, Ro))), 256)),
-              e.value.style.chart.layout.donut.useShadow ? (s(), r("g", Go, [
-                (s(!0), r(k, null, D(V.value, (l, o) => (s(), r("path", {
-                  class: "vue-ui-donut-arc-path",
-                  d: v.value[o].path,
-                  fill: "transparent",
-                  stroke: e.value.style.chart.layout.donut.borderColorAuto ? e.value.style.chart.backgroundColor : e.value.style.chart.layout.donut.borderColor,
-                  "stroke-width": e.value.style.chart.layout.donut.borderWidth,
-                  filter: `url(#drop_shadow_${g.value})`,
-                  style: _({
-                    transition: F.value || !e.value.serieToggleAnimation.show ? "none" : `all ${e.value.serieToggleAnimation.durationMs}ms ease-in-out`
-                  })
-                }, null, 12, Uo))), 256))
-              ])) : c("", !0),
-              t.$slots.pattern ? (s(), r("g", qo, [
-                (s(!0), r(k, null, D(V.value, (l, o) => (s(), r("path", {
-                  class: "vue-ui-donut-arc-path",
-                  d: v.value[o].path,
-                  fill: `url(#${l.pattern})`,
-                  stroke: e.value.style.chart.layout.donut.borderColorAuto ? e.value.style.chart.backgroundColor : e.value.style.chart.layout.donut.borderColor,
-                  "stroke-width": e.value.style.chart.layout.donut.borderWidth,
-                  filter: ue(o),
-                  style: _({
-                    transition: F.value || !e.value.serieToggleAnimation.show ? "none" : `all ${e.value.serieToggleAnimation.durationMs}ms ease-in-out`,
-                    transformOrigin: "center"
-                  })
-                }, null, 12, Wo))), 256))
-              ])) : c("", !0),
-              (s(!0), r(k, null, D(V.value, (l, o) => (s(), r("path", {
-                class: "vue-ui-donut-arc-path",
-                d: v.value[o].path,
-                fill: e.value.style.chart.useGradient ? `url(#polar_gradient_${o}_${g.value})` : l.color,
-                stroke: e.value.style.chart.layout.donut.borderColorAuto ? e.value.style.chart.backgroundColor : e.value.style.chart.layout.donut.borderColor,
-                "stroke-width": e.value.style.chart.layout.donut.borderWidth,
-                filter: ue(o),
-                style: _({
-                  transition: F.value || !e.value.serieToggleAnimation.show ? "none" : `all ${e.value.serieToggleAnimation.durationMs}ms ease-in-out`
-                })
-              }, null, 12, jo))), 256))
-            ])) : (s(), r("g", Ho, [
-              t.$slots.pattern ? (s(), r("circle", {
-                key: 0,
-                cx: n.value.width / 2,
-                cy: n.value.height / 2,
-                r: A.value,
-                fill: `url(#pattern_${g.value}_${S.value[0].patternIndex})`,
-                stroke: e.value.style.chart.backgroundColor,
-                "stroke-width": e.value.style.chart.layout.donut.borderWidth
-              }, null, 8, Jo)) : c("", !0),
-              h("circle", {
-                cx: n.value.width / 2,
-                cy: n.value.height / 2,
-                r: A.value,
-                fill: e.value.style.chart.useGradient ? `url(#polar_gradient_0_${g.value})` : S.value[0].color,
-                stroke: e.value.style.chart.backgroundColor,
-                "stroke-width": e.value.style.chart.layout.donut.borderWidth
-              }, null, 8, Ko)
-            ]))
-          ], 64)) : (s(), r(k, { key: 9 }, [
-            e.value.type === "classic" && !pl.value ? (s(), r("g", Qo, [
-              (s(!0), r(k, null, D(bl.value, (l, o) => (s(), r("path", {
-                class: "vue-ui-donut-arc-path",
-                d: l.arcSlice,
-                fill: l.color,
-                stroke: e.value.style.chart.backgroundColor,
-                "stroke-width": e.value.style.chart.layout.donut.borderWidth
-              }, null, 8, Zo))), 256))
-            ])) : c("", !0),
-            h("circle", {
-              cx: n.value.width / 2,
-              cy: n.value.height / 2,
-              r: A.value <= 0 ? 10 : A.value,
-              fill: "transparent",
-              stroke: e.value.style.chart.backgroundColor
-            }, null, 8, ea)
-          ], 64)),
-          e.value.style.chart.useGradient && e.value.type === "classic" ? (s(), r("circle", {
-            key: 10,
-            cx: n.value.width / 2,
-            cy: n.value.height / 2,
-            r: (
-              /* This might require adjustments */
-              A.value <= 0 ? 10 : A.value
-            ),
-            fill: `url(#gradient_${g.value})`
-          }, null, 8, ta)) : c("", !0),
-          h("circle", {
-            ref_key: "circle_hollow",
-            ref: sl,
-            style: { pointerEvents: "none" },
-            fill: "none",
-            cx: n.value.width / 2,
-            cy: n.value.height / 2,
-            r: Math.max(0.1, ne.value * 1.7)
-          }, null, 8, la),
-          P.value ? (s(), r(k, { key: 11 }, [
-            S.value.length > 1 || e.value.type === "classic" ? (s(), r("g", oa, [
-              (s(!0), r(k, null, D(S.value.filter((l) => !l.ghost), (l, o) => (s(), r("path", {
-                d: e.value.type === "classic" ? l.arcSlice : v.value[o].path,
-                stroke: e.value.style.chart.layout.donut.borderColorAuto ? e.value.style.chart.backgroundColor : e.value.style.chart.layout.donut.borderColor,
-                fill: X.value === o ? e.value.style.chart.layout.donut.selectedColor : "transparent",
-                onMouseenter: (i) => fe({
-                  datapoint: l,
-                  relativeIndex: o,
-                  seriesIndex: l.seriesIndex,
-                  show: !0
-                }),
-                onMouseleave: (i) => he({ datapoint: l, seriesIndex: l.seriesIndex }),
-                onClick: (i) => ee(l, o)
-              }, null, 40, aa))), 256))
-            ])) : (s(), r("g", na, [
-              h("circle", {
-                cx: n.value.width / 2,
-                cy: n.value.height / 2,
-                r: A.value,
-                fill: "transparent",
-                onMouseenter: a[0] || (a[0] = (l) => fe({
-                  datapoint: S.value[0],
-                  relativeIndex: 0,
-                  seriesIndex: S.value[0].seriesIndex,
-                  show: !0
-                })),
-                onMouseleave: a[1] || (a[1] = (l) => he({ datapoint: S.value[0], seriesIndex: S.value[0].seriesIndex })),
-                onClick: a[2] || (a[2] = (l) => ee(S.value[0], t.i))
-              }, null, 40, sa)
-            ]))
-          ], 64)) : c("", !0),
-          e.value.type === "classic" ? (s(), r("g", {
-            key: 12,
-            ref_key: "G_hollow",
-            ref: nl,
-            class: "vue-data-ui-donut-hollow-labels"
-          }, [
-            e.value.style.chart.layout.labels.hollow.total.show ? (s(), r("text", {
-              key: 0,
-              "text-anchor": "middle",
-              x: n.value.width / 2,
-              y: n.value.height / 2 - (e.value.style.chart.layout.labels.hollow.average.show ? e.value.style.chart.layout.labels.hollow.total.fontSize : 0) + e.value.style.chart.layout.labels.hollow.total.offsetY,
-              fill: e.value.style.chart.layout.labels.hollow.total.color,
-              "font-size": e.value.style.chart.layout.labels.hollow.total.fontSize,
-              style: _(`font-weight:${e.value.style.chart.layout.labels.hollow.total.bold ? "bold" : ""}`)
-            }, U(e.value.style.chart.layout.labels.hollow.total.text), 13, ua)) : c("", !0),
-            e.value.style.chart.layout.labels.hollow.total.show ? (s(), r("text", {
-              key: 1,
-              "text-anchor": "middle",
-              x: n.value.width / 2,
-              y: n.value.height / 2 + e.value.style.chart.layout.labels.hollow.total.fontSize - (e.value.style.chart.layout.labels.hollow.average.show ? e.value.style.chart.layout.labels.hollow.total.fontSize : 0) + e.value.style.chart.layout.labels.hollow.total.value.offsetY,
-              fill: e.value.style.chart.layout.labels.hollow.total.value.color,
-              "font-size": e.value.style.chart.layout.labels.hollow.total.value.fontSize,
-              style: _(`font-weight:${e.value.style.chart.layout.labels.hollow.total.value.bold ? "bold" : ""}`)
-            }, U(u(q)(
-              e.value.style.chart.layout.labels.hollow.total.value.formatter,
-              P.value,
-              u(N)({
-                p: e.value.style.chart.layout.labels.hollow.total.value.prefix,
-                v: P.value,
-                s: e.value.style.chart.layout.labels.hollow.total.value.suffix
-              })
-            )), 13, ra)) : c("", !0),
-            e.value.style.chart.layout.labels.hollow.average.show ? (s(), r("text", {
-              key: 2,
-              "text-anchor": "middle",
-              x: n.value.width / 2,
-              y: n.value.height / 2 + (e.value.style.chart.layout.labels.hollow.total.show ? e.value.style.chart.layout.labels.hollow.average.fontSize : 0) + e.value.style.chart.layout.labels.hollow.average.offsetY,
-              fill: e.value.style.chart.layout.labels.hollow.average.color,
-              "font-size": e.value.style.chart.layout.labels.hollow.average.fontSize,
-              style: _(`font-weight:${e.value.style.chart.layout.labels.hollow.average.bold ? "bold" : ""}`)
-            }, U(e.value.style.chart.layout.labels.hollow.average.text), 13, ia)) : c("", !0),
-            e.value.style.chart.layout.labels.hollow.average.show ? (s(), r("text", {
-              key: 3,
-              "text-anchor": "middle",
-              x: n.value.width / 2,
-              y: n.value.height / 2 + (e.value.style.chart.layout.labels.hollow.total.show ? e.value.style.chart.layout.labels.hollow.average.fontSize : 0) + e.value.style.chart.layout.labels.hollow.average.fontSize + e.value.style.chart.layout.labels.hollow.average.value.offsetY,
-              fill: e.value.style.chart.layout.labels.hollow.average.value.color,
-              "font-size": e.value.style.chart.layout.labels.hollow.average.value.fontSize,
-              style: _(`font-weight:${e.value.style.chart.layout.labels.hollow.average.value.bold ? "bold" : ""}`)
-            }, U(se.value || F.value ? "--" : u(q)(
-              e.value.style.chart.layout.labels.hollow.average.value.formatter,
-              Xe.value,
-              u(N)({
-                p: e.value.style.chart.layout.labels.hollow.average.value.prefix,
-                v: Xe.value,
-                s: e.value.style.chart.layout.labels.hollow.average.value.suffix,
-                r: e.value.style.chart.layout.labels.hollow.average.value.rounding
-              })
-            )), 13, ca)) : c("", !0)
-          ], 512)) : c("", !0),
-          (s(!0), r(k, null, D(V.value.filter((l) => !l.ghost), (l, o) => (s(), r("g", {
-            filter: ue(o),
-            class: qe({ animated: e.value.useCssAnimation }),
-            key: l.seriesIndex
-          }, [
-            e.value.style.chart.layout.labels.dataLabels.useLabelSlots ? (s(), r("g", da, [
-              (s(), r("foreignObject", {
-                x: u(x)(l, !0).anchor === "end" ? u(x)(l).x - 120 : u(x)(l, !0).anchor === "middle" ? u(x)(l).x - 60 : u(x)(l).x,
-                y: u(ge)(l) - (xt.value ? 20 : 0),
-                width: "120",
-                height: "60",
-                style: { overflow: "visible" }
-              }, [
-                h("div", null, [
-                  y(t.$slots, "dataLabel", je({ ref_for: !0 }, {
-                    datapoint: l,
-                    isBlur: !e.value.useBlurOnHover || [null, void 0].includes(X.value) || X.value === o,
-                    isSafari: xt.value,
-                    isVisible: R(l) && p.value.dataLabels.show,
-                    textAlign: u(x)(l, !0, 16, !0).anchor,
-                    flexAlign: u(x)(l, !0, 16).anchor,
-                    percentage: Ye(l, V.value)
-                  }), void 0, !0)
-                ])
-              ], 8, ha))
-            ])) : (s(), r("g", fa, [
-              e.value.type === "classic" ? (s(), r(k, { key: 0 }, [
-                R(l) && p.value.dataLabels.show ? (s(), r("circle", {
-                  key: 0,
-                  cx: u(x)(l).x,
-                  cy: u(ge)(l) - 3.5,
-                  fill: l.color,
-                  stroke: e.value.style.chart.backgroundColor,
-                  "stroke-width": 1,
-                  r: 3,
-                  filter: !e.value.useBlurOnHover || [null, void 0].includes(X.value) || X.value === o ? "" : `url(#blur_${g.value})`,
-                  onClick: (i) => ee(l, o),
-                  onMouseenter: (i) => fe({
-                    datapoint: l,
-                    relativeIndex: o,
-                    seriesIndex: l.seriesIndex,
-                    show: !0
-                  }),
-                  onMouseleave: (i) => he({ datapoint: l, seriesIndex: l.seriesIndex })
-                }, null, 40, ya)) : c("", !0)
-              ], 64)) : c("", !0),
-              e.value.type === "polar" ? (s(), r(k, { key: 1 }, [
-                R(l) && p.value.dataLabels.show ? (s(), r("circle", {
-                  key: 0,
-                  cx: u(T)({ initX: v.value[o].middlePoint.x, initY: v.value[o].middlePoint.y, offset: 24, centerX: n.value.width / 2, centerY: n.value.height / 2 }).x,
-                  cy: u(T)({ initX: v.value[o].middlePoint.x, initY: v.value[o].middlePoint.y, offset: 24, centerX: n.value.width / 2, centerY: n.value.height / 2 }).y,
-                  fill: l.color,
-                  stroke: e.value.style.chart.backgroundColor,
-                  "stroke-width": 1,
-                  r: 3,
-                  filter: !e.value.useBlurOnHover || [null, void 0].includes(X.value) || X.value === o ? "" : `url(#blur_${g.value})`,
-                  onClick: (i) => ee(l, o),
-                  onMouseenter: (i) => fe({
-                    datapoint: l,
-                    relativeIndex: o,
-                    seriesIndex: l.seriesIndex,
-                    show: !0
-                  }),
-                  onMouseleave: (i) => he({ datapoint: l, seriesIndex: l.seriesIndex }),
-                  style: _({
-                    transition: F.value || !e.value.serieToggleAnimation.show ? "none" : `all ${e.value.serieToggleAnimation.durationMs}ms ease-in-out`
-                  })
-                }, null, 44, ga)) : c("", !0)
-              ], 64)) : c("", !0),
-              e.value.type === "classic" ? (s(), r(k, { key: 2 }, [
-                Dt(h("text", {
-                  class: "vue-data-ui-datalabel-value",
-                  "text-anchor": u(x)(l, !0, 12).anchor,
-                  x: u(x)(l, !0, 12).x,
-                  y: u(ge)(l),
-                  fill: e.value.style.chart.layout.labels.percentage.color,
-                  "font-size": Ce.value + "px",
-                  style: _(`font-weight:${e.value.style.chart.layout.labels.percentage.bold ? "bold" : ""}`),
-                  onClick: (i) => ee(l, o),
-                  onMouseenter: (i) => fe({
-                    datapoint: l,
-                    relativeIndex: o,
-                    seriesIndex: l.seriesIndex,
-                    show: !0
-                  }),
-                  onMouseleave: (i) => he({ datapoint: l, seriesIndex: l.seriesIndex })
-                }, U(Ye(l, V.value)) + " " + U(e.value.style.chart.layout.labels.value.show ? `(${u(q)(
-                  e.value.style.chart.layout.labels.value.formatter,
-                  l.value,
-                  u(N)({
-                    p: e.value.style.chart.layout.labels.dataLabels.prefix,
-                    v: l.value,
-                    s: e.value.style.chart.layout.labels.dataLabels.suffix,
-                    r: e.value.style.chart.layout.labels.value.rounding
-                  }),
-                  { datapoint: l }
-                )})` : ""), 45, pa), [
-                  [It, R(l) && p.value.dataLabels.show]
-                ]),
-                Dt(h("text", {
-                  class: "vue-data-ui-datalabel-name",
-                  "text-anchor": u(x)(l).anchor,
-                  x: u(x)(l, !0, 12).x,
-                  y: u(ge)(l) + Q.value * 1.2,
-                  fill: e.value.style.chart.layout.labels.name.color,
-                  "font-size": Q.value + "px",
-                  style: _(`font-weight:${e.value.style.chart.layout.labels.name.bold ? "bold" : ""}`),
-                  onClick: (i) => ee(l, o),
-                  innerHTML: u(zt)({
-                    content: l.name,
-                    fontSize: Q.value,
-                    fill: e.value.style.chart.layout.labels.name.color,
-                    x: u(x)(l, !0, 12).x,
-                    y: u(ge)(l) + Q.value
-                  })
-                }, null, 12, ba), [
-                  [It, R(l) && p.value.dataLabels.show]
-                ]),
-                a[6] || (a[6] = Te(' @mouseenter="useTooltip({ datapoint: arc, relativeIndex: i, seriesIndex: arc.seriesIndex, show: true })" @mouseleave="handleDatapointLeave({ datapoint: arc, seriesIndex: arc.seriesIndex })" /> ', -1))
-              ], 64)) : c("", !0),
-              e.value.type === "polar" ? (s(), r(k, { key: 3 }, [
-                R(l) && p.value.dataLabels.show ? (s(), r("text", {
-                  key: 0,
-                  class: "vue-data-ui-datalabel-value",
-                  "text-anchor": de(v.value[o].middlePoint),
-                  x: u(T)({ initX: v.value[o].middlePoint.x, initY: v.value[o].middlePoint.y, offset: 42, centerX: n.value.width / 2, centerY: n.value.height / 2 }).x,
-                  y: u(T)({ initX: v.value[o].middlePoint.x, initY: v.value[o].middlePoint.y, offset: 42, centerX: n.value.width / 2, centerY: n.value.height / 2 }).y,
-                  fill: e.value.style.chart.layout.labels.percentage.color,
-                  "font-size": Ce.value,
-                  style: _({
-                    transition: F.value || !e.value.serieToggleAnimation.show ? "none" : `all ${e.value.serieToggleAnimation.durationMs}ms ease-in-out`,
-                    fontWeight: e.value.style.chart.layout.labels.percentage.bold ? "bold" : "normal"
-                  }),
-                  onClick: (i) => ee(l, o),
-                  onMouseenter: (i) => fe({
-                    datapoint: l,
-                    relativeIndex: o,
-                    seriesIndex: l.seriesIndex,
-                    show: !0
-                  }),
-                  onMouseleave: (i) => he({ datapoint: l, seriesIndex: l.seriesIndex })
-                }, U(Ye(l, V.value)) + " " + U(e.value.style.chart.layout.labels.value.show ? `(${u(q)(
-                  e.value.style.chart.layout.labels.value.formatter,
-                  l.value,
-                  u(N)({
-                    p: e.value.style.chart.layout.labels.dataLabels.prefix,
-                    v: l.value,
-                    s: e.value.style.chart.layout.labels.dataLabels.suffix,
-                    r: e.value.style.chart.layout.labels.value.rounding
-                  }),
-                  { datapoint: l }
-                )})` : ""), 45, ma)) : c("", !0),
-                R(l) && p.value.dataLabels.show ? (s(), r("text", {
-                  key: 1,
-                  class: "vue-data-ui-datalabel-name",
-                  "text-anchor": de(v.value[o].middlePoint),
-                  x: u(T)({ initX: v.value[o].middlePoint.x, initY: v.value[o].middlePoint.y, offset: 42, centerX: n.value.width / 2, centerY: n.value.height / 2 }).x,
-                  y: u(T)({ initX: v.value[o].middlePoint.x, initY: v.value[o].middlePoint.y, offset: 42, centerX: n.value.width / 2, centerY: n.value.height / 2 }).y + Q.value * 1.2,
-                  fill: e.value.style.chart.layout.labels.name.color,
-                  "font-size": Q.value,
-                  style: _({
-                    transition: F.value || !e.value.serieToggleAnimation.show ? "none" : `all ${e.value.serieToggleAnimation.durationMs}ms ease-in-out`,
-                    fontWeight: e.value.style.chart.layout.labels.name.bold ? "bold" : "normal"
-                  }),
-                  onClick: (i) => ee(l, o),
-                  innerHTML: u(zt)({
-                    content: l.name,
-                    fontSize: Ce.value,
-                    fill: e.value.style.chart.layout.labels.name.color,
-                    x: u(T)({ initX: v.value[o].middlePoint.x, initY: v.value[o].middlePoint.y, offset: 42, centerX: n.value.width / 2, centerY: n.value.height / 2 }).x,
-                    y: u(T)({ initX: v.value[o].middlePoint.x, initY: v.value[o].middlePoint.y, offset: 42, centerX: n.value.width / 2, centerY: n.value.height / 2 }).y + Q.value * 1.2
-                  })
-                }, null, 12, wa)) : c("", !0),
-                a[7] || (a[7] = Te(' @mouseenter="useTooltip({ datapoint: arc, relativeIndex: i, seriesIndex: arc.seriesIndex, show: true })" @mouseleave="handleDatapointLeave({ datapoint: arc, seriesIndex: arc.seriesIndex })" /> ', -1))
-              ], 64)) : c("", !0)
-            ])),
-            p.value.dataLabels.show && e.value.style.chart.comments.show && l.comment ? (s(), r("g", ka, [
-              R(l) && e.value.type === "classic" ? (s(), r("foreignObject", {
-                key: 0,
-                x: e.value.style.chart.comments.offsetX + (u(x)(l, !0).anchor === "end" ? u(x)(l).x - e.value.style.chart.comments.width : u(x)(l, !0).anchor === "middle" ? u(x)(l).x - e.value.style.chart.comments.width / 2 : u(x)(l).x),
-                y: u(ge)(l) + 24 + e.value.style.chart.comments.offsetY,
-                width: e.value.style.chart.comments.width,
-                height: "200",
-                style: { overflow: "visible", "pointer-events": "none" }
-              }, [
-                h("div", null, [
-                  y(t.$slots, "plot-comment", {
-                    plot: { ...l, textAlign: u(x)(l, !0, 16, !0).anchor, flexAlign: u(x)(l, !0, 16).anchor, isFirstLoad: F.value }
-                  }, void 0, !0)
-                ])
-              ], 8, Ca)) : c("", !0),
-              R(l) && e.value.type === "polar" ? (s(), r("foreignObject", {
-                key: 1,
-                x: e.value.style.chart.comments.offsetX + (de(v.value[o].middlePoint) === "end" ? u(T)({ initX: v.value[o].middlePoint.x, initY: v.value[o].middlePoint.y, offset: 42, centerX: n.value.width / 2, centerY: n.value.height / 2 }).x - e.value.style.chart.comments.width : de(v.value[o].middlePoint) === "middle" ? u(T)({ initX: v.value[o].middlePoint.x, initY: v.value[o].middlePoint.y, offset: 42, centerX: n.value.width / 2, centerY: n.value.height / 2 }).x - e.value.style.chart.comments.width / 2 : u(T)({ initX: v.value[o].middlePoint.x, initY: v.value[o].middlePoint.y, offset: 42, centerX: n.value.width / 2, centerY: n.value.height / 2 }).x),
-                y: ml(v.value[o]) + e.value.style.chart.comments.offsetY,
-                width: e.value.style.chart.comments.width,
-                height: "200",
-                style: _({
-                  transition: F.value || !e.value.serieToggleAnimation.show ? "none" : `all ${e.value.serieToggleAnimation.durationMs}ms ease-in-out`,
-                  overflow: "visible",
-                  pointerEvents: "none"
-                })
-              }, [
-                h("div", null, [
-                  y(t.$slots, "plot-comment", {
-                    plot: { ...l, textAlign: de(v.value[o].middlePoint), flexAlign: de(v.value[o].middlePoint), isFirstLoad: F.value }
-                  }, void 0, !0)
-                ])
-              ], 12, xa)) : c("", !0)
-            ])) : c("", !0)
-          ], 10, va))), 128)),
-          y(t.$slots, "svg", { svg: n.value }, void 0, !0)
-        ], 512)
-      ], 14, go)),
-      t.$slots.watermark ? (s(), r("div", Aa, [
-        y(t.$slots, "watermark", O(E({ isPrinting: u(ht) || u(ft) })), void 0, !0)
-      ])) : c("", !0),
-      h("div", {
-        id: `legend-bottom-${g.value}`
-      }, null, 8, _a),
-      st.value ? (s(), oe(Bl, {
-        key: 5,
-        to: e.value.style.chart.legend.position === "top" ? `#legend-top-${g.value}` : `#legend-bottom-${g.value}`
-      }, [
-        h("div", {
-          ref_key: "chartLegend",
-          ref: et
-        }, [
-          e.value.style.chart.legend.show ? (s(), oe(vo, {
-            key: `legend_${nt.value}`,
-            legendSet: Ne.value,
-            config: gl.value,
-            onClickMarker: a[3] || (a[3] = ({ i: l }) => _e(l))
-          }, We({
-            item: m(({ legend: l, index: o }) => [
-              h("div", {
-                style: _(`opacity:${M.value.includes(o) ? 0.5 : 1}`),
-                onClick: (i) => l.segregate()
-              }, U(l.display), 13, $a)
-            ]),
-            _: 2
-          }, [
-            t.$slots.pattern ? {
-              name: "legend-pattern",
-              fn: m(({ legend: l, index: o }) => [
-                Se(io, {
-                  shape: l.shape,
-                  radius: 30,
-                  stroke: "none",
-                  plot: { x: 30, y: 30 },
-                  fill: `url(#pattern_${g.value}_${o})`
-                }, null, 8, ["shape", "fill"])
-              ]),
-              key: "0"
-            } : void 0
-          ]), 1032, ["legendSet", "config"])) : c("", !0),
-          y(t.$slots, "legend", { legend: Ne.value }, void 0, !0)
-        ], 512)
-      ], 8, ["to"])) : c("", !0),
-      t.$slots.source ? (s(), r("div", {
-        key: 6,
-        ref_key: "source",
-        ref: tt,
-        dir: "auto"
-      }, [
-        y(t.$slots, "source", {}, void 0, !0)
-      ], 512)) : c("", !0),
-      t.$slots.hollow ? (s(), r("div", Fa, [
-        y(t.$slots, "hollow", O(E({
-          total: P.value,
-          average: Xe.value,
-          dataset: I.value
-        })), void 0, !0)
-      ])) : c("", !0),
-      Se(u(Wt), {
-        show: p.value.showTooltip && Be.value,
-        backgroundColor: e.value.style.chart.tooltip.backgroundColor,
-        color: e.value.style.chart.tooltip.color,
-        fontSize: e.value.style.chart.tooltip.fontSize,
-        borderRadius: e.value.style.chart.tooltip.borderRadius,
-        borderColor: e.value.style.chart.tooltip.borderColor,
-        borderWidth: e.value.style.chart.tooltip.borderWidth,
-        backgroundOpacity: e.value.style.chart.tooltip.backgroundOpacity,
-        position: e.value.style.chart.tooltip.position,
-        offsetY: e.value.style.chart.tooltip.offsetY,
-        parent: Y.value,
-        content: ze.value,
-        isCustom: be.value,
-        isFullscreen: re.value,
-        smooth: e.value.style.chart.tooltip.smooth,
-        backdropFilter: e.value.style.chart.tooltip.backdropFilter,
-        smoothForce: e.value.style.chart.tooltip.smoothForce,
-        smoothSnapThreshold: e.value.style.chart.tooltip.smoothSnapThrehsold
-      }, {
-        "tooltip-before": m(() => [
-          y(t.$slots, "tooltip-before", O(E({ ...Ve.value })), void 0, !0)
-        ]),
-        "tooltip-after": m(() => [
-          y(t.$slots, "tooltip-after", O(E({ ...Ve.value })), void 0, !0)
-        ]),
-        _: 3
-      }, 8, ["show", "backgroundColor", "color", "fontSize", "borderRadius", "borderColor", "borderWidth", "backgroundOpacity", "position", "offsetY", "parent", "content", "isCustom", "isFullscreen", "smooth", "backdropFilter", "smoothForce", "smoothSnapThreshold"]),
-      we.value && e.value.userOptions.buttons.table ? (s(), oe(zl(me.value.component), je({ key: 8 }, me.value.props, {
-        ref_key: "tableUnit",
-        ref: pe,
-        onClose: Ft
-      }), We({
-        content: m(() => [
-          (s(), oe(u(Jt), {
-            key: `table_${at.value}`,
-            colNames: $e.value.colNames,
-            head: $e.value.head,
-            body: $e.value.body,
-            config: $e.value.config,
-            title: e.value.table.useDialog ? "" : me.value.title,
-            withCloseButton: !e.value.table.useDialog,
-            onClose: Ft
-          }, {
-            th: m(({ th: l }) => [
-              h("div", {
-                innerHTML: l,
-                style: { display: "flex", "align-items": "center" }
-              }, null, 8, Sa)
-            ]),
-            td: m(({ td: l }) => [
-              Te(U(l.name ? l.name : isNaN(Number(l)) ? l.includes("%") ? l : u(q)(
-                e.value.style.chart.layout.labels.percentage.formatter,
-                l,
-                u(N)({
-                  v: l,
-                  s: "%",
-                  r: e.value.style.chart.layout.labels.percentage.rounding
-                })
-              ) : u(q)(
-                e.value.style.chart.layout.labels.value.formatter,
-                l,
-                u(N)({
-                  p: e.value.style.chart.layout.labels.dataLabels.prefix,
-                  v: l,
-                  s: e.value.style.chart.layout.labels.dataLabels.suffix,
-                  r: e.value.style.chart.layout.labels.value.rounding
-                })
-              )), 1)
-            ]),
-            _: 1
-          }, 8, ["colNames", "head", "body", "config", "title", "withCloseButton"]))
-        ]),
-        _: 2
-      }, [
-        e.value.table.useDialog ? {
-          name: "title",
-          fn: m(() => [
-            Te(U(me.value.title), 1)
-          ]),
-          key: "0"
-        } : void 0,
-        e.value.table.useDialog ? {
-          name: "actions",
-          fn: m(() => [
-            h("button", {
-              tabindex: "0",
-              class: "vue-ui-user-options-button",
-              onClick: a[4] || (a[4] = (l) => Re(e.value.userOptions.callbacks.csv))
-            }, [
-              Se(u(jt), {
-                name: "excel",
-                stroke: me.value.props.color
-              }, null, 8, ["stroke"])
-            ])
-          ]),
-          key: "1"
-        } : void 0
-      ]), 1040)) : c("", !0),
-      u(xe) ? (s(), oe(oo, { key: 9 })) : c("", !0)
-    ], 46, fo));
-  }
-}, Pa = /* @__PURE__ */ ho(Ta, [["__scopeId", "data-v-24401cdc"]]), Wa = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
-  __proto__: null,
-  default: Pa
-}, Symbol.toStringTag, { value: "Module" }));
-export {
-  Pa as V,
-  Wa as a,
-  qa as v
-};