vue-data-ui 3.17.13 → 3.18.0

package/dist/vue-ui-donut-BKegKHxj.js

@@ -1,2608 +0,0 @@
-import { computed as m, defineAsyncComponent as Me, useSlots as aa, shallowRef as Ie, ref as b, onMounted as vl, onBeforeUnmount as dl, toRefs as oa, watch as je, openBlock as u, createElementBlock as i, normalizeStyle as L, normalizeClass as qt, createElementVNode as w, toDisplayString as ye, createBlock as ge, createCommentVNode as d, unref as s, withCtx as _, renderSlot as k, normalizeProps as W, guardReactiveProps as j, createSlots as Wt, createVNode as Tt, Fragment as P, renderList as J, mergeProps as jt, withDirectives as Pt, vShow as St, Teleport as na, resolveDynamicComponent as sa, createTextVNode as hl, nextTick as fl } from "vue";
-import { o as yl, q as Kt, r as ua, j as ra, t as gl, n as ia, p as Re, K as ca, s as pl, k as pe, l as ve, a4 as ml, ax as va, X as da, u as Lt, v as ha, a5 as fa, ae as X, G as bl, a6 as we, a7 as A, as as wl, C as ya, m as ga, a0 as pa, a1 as ma, T as ba, ay as kl, ai as xl } from "./lib-DMzrGQHK.js";
-import { f as wa, b as ka } from "./labelUtils-DX9oyq3C.js";
-import { t as xa, u as $a } from "./useResponsive-DfdjqQps.js";
-import { u as Ca } from "./useConfig-CG4HT3wS.js";
-import { u as _a } from "./usePrinter-C4t8DdQ-.js";
-import { u as Aa, B as Ta } from "./BaseScanner-C2j3TsSY.js";
-import { u as Pa } from "./useSvgExport-BTG4hVPO.js";
-import { u as Qt } from "./useNestedProp-DH0BEVVS.js";
-import { u as Sa } from "./useThemeCheck-C9Ccl7U9.js";
-import { u as La } from "./useUserOptionState-B7Ej974k.js";
-import { u as Ma } from "./useChartAccessibility-cp6XQtqi.js";
-import Ia from "./img-CjTQXS0U.js";
-import { _ as Fa } from "./Shape-CxJ5_Rre.js";
-import za from "./Title-BbKoiBk2.js";
-import Oa from "./vue_ui_donut-CA4dgV8J.js";
-import Ya from "./Legend-DGN5lY60.js";
-import { A as Da } from "./A11yDataTable-BpmuNomI.js";
-import { B as Ba } from "./BaseLegendToggle-cMP8M2u0.js";
-import { _ as Xa } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-function Na(it) {
-  const {
-    FINAL_CONFIG: ct,
-    noGhostDonut: Mt,
-    svg: Ke,
-    padding: vt,
-    labels_inline_fontSize: It,
-    minSize: dt,
-    findArcMidpoint: Ft,
-    calcMarkerOffsetX: zt,
-    calcMarkerOffsetY: Ot,
-    animatingIndex: Yt,
-    segregated: Dt,
-    isSmallArc: Bt
-  } = it;
-  return { smallArcLayoutsClassic: m(() => {
-    if (ct.value.type !== "classic") return {};
-    const Qe = {}, E = Mt.value || [];
-    if (!E.length) return Qe;
-    const B = Ke.value.width / 2, M = Ke.value.height / 2, Fe = vt.value.top + 16, ht = Ke.value.height - vt.value.bottom - 16, Je = It.value, ft = Je / 3, yt = Je * 1.5, ne = 8, me = 6, Ze = B - (dt.value + me), et = B + (dt.value + me), gt = !!ct.value.style.chart.layout.curvedMarkers;
-    function pt({ midX: h, midY: g, bandX: f, bandY: C }) {
-      if (!gt)
-        return `M ${h} ${g} L ${h} ${C} L ${f} ${C}`;
-      const I = f < B ? -1 : 1, F = f - h, le = C - g, ae = Math.sqrt(F * F + le * le) || 1, ke = h - B, p = g - M, oe = Math.sqrt(
-        ke * ke + p * p
-      ) || 1, se = ke / oe, z = p / oe, Oe = oe + 9;
-      function e({ x: _e, y: de }) {
-        const re = _e - B, Z = de - M, Ae = Math.sqrt(
-          re * re + Z * Z
-        ) || 1;
-        if (Ae >= Oe) return { x: _e, y: de };
-        const Te = Oe / Ae;
-        return {
-          x: B + re * Te,
-          y: M + Z * Te
-        };
-      }
-      if (ae < 56) {
-        const _e = F / ae;
-        let re = -(le / ae), Z = _e;
-        const Ae = (h + f) * 0.5, Te = (g + C) * 0.5, K = Ae + re, kt = Te + Z, Nt = (K - B) * (K - B) + (kt - M) * (kt - M), He = Ae - re, Ge = Te - Z;
-        (He - B) * (He - B) + (Ge - M) * (Ge - M) > Nt && (re = -re, Z = -Z);
-        const at = 0.78, $t = h + F * at, Rt = g + le * at, qe = Math.max(
-          0,
-          Math.min(1, (ae - 18) / 44)
-        ), x = qe * qe * (3 - 2 * qe);
-        let n = 2.5 + x * 4, he = 1 + x * 2.5;
-        n *= 0.9;
-        const ot = {
-          x: $t + re * n + se * he,
-          y: Rt + Z * n + z * he
-        }, U = e(ot);
-        return `M ${h} ${g} Q ${U.x} ${U.y} ${f} ${C}`;
-      }
-      let $e = ae * 0.34;
-      $e < 20 && ($e = 20), $e > 46 && ($e = 46);
-      let ue = ae * 0.46;
-      ue < 22 && (ue = 22), ue > 70 && (ue = 70);
-      const Ye = {
-        x: h + se * $e,
-        y: g + z * $e
-      }, Ue = B + I * Math.max(Math.abs(f - B), Oe), Xt = {
-        x: f - I * Math.min(
-          ue,
-          Math.abs(Ue - f) * 0.75
-        ),
-        y: C
-      }, Y = e(Ye), Ce = e(Xt);
-      return `M ${h} ${g} C ${Y.x} ${Y.y} ${Ce.x} ${Ce.y} ${f} ${C}`;
-    }
-    function mt(h) {
-      const g = String(h ?? "").split(/\n/g), f = Math.max(0, g.length - 1), C = Je * 1.2, I = f * C;
-      return yt + I;
-    }
-    function bt({ arc: h, index: g }) {
-      const { x: f, y: C } = Ft(h.path), I = zt(h).x, F = Ot(h) - 3.5, le = mt(h.name);
-      return {
-        arc: h,
-        index: g,
-        midX: f,
-        midY: C,
-        inlineMarkerX: I,
-        inlineMarkerY: F,
-        labelHeight: le
-      };
-    }
-    function ze(h) {
-      const { arc: g } = h, f = g.seriesIndex ?? 0;
-      return Yt.value === f || Dt.value.includes(f) ? !1 : Bt(g, f);
-    }
-    function tt(h) {
-      const g = h.inlineMarkerY < M, f = h.inlineMarkerX < B;
-      return g && f ? "TL" : g && !f ? "TR" : !g && f ? "BL" : "BR";
-    }
-    function Ve(h, g) {
-      if (g.startsWith("T")) {
-        h.sort(
-          (C, I) => C.inlineMarkerY - I.inlineMarkerY || C.index - I.index
-        );
-        return;
-      }
-      h.sort(
-        (C, I) => I.inlineMarkerY - C.inlineMarkerY || C.index - I.index
-      );
-    }
-    function Ee({
-      side: h,
-      markerX: g,
-      markerY: f,
-      labelY: C,
-      connectorPath: I
-    }) {
-      return {
-        side: h,
-        labelX: h === "left" ? g - ne : g + ne,
-        labelY: C + ft,
-        textAnchor: h === "left" ? "end" : "start",
-        markerX: g,
-        markerY: f,
-        connectorPath: I
-      };
-    }
-    function H({
-      candidateList: h,
-      side: g,
-      bandMarkerX: f,
-      startY: C,
-      direction: I
-    }) {
-      let F = C;
-      h.forEach((le) => {
-        const { index: ae, midX: ke, midY: p, labelHeight: oe } = le;
-        let se;
-        I === "down" ? (se = F, F += oe) : (F -= oe, se = F);
-        const z = se, lt = pt({
-          midX: ke,
-          midY: p,
-          bandX: f,
-          bandY: z
-        });
-        Qe[ae] = Ee({
-          side: g,
-          markerX: f,
-          markerY: z,
-          labelY: se,
-          connectorPath: lt
-        });
-      });
-    }
-    const wt = E.map((h, g) => bt({ arc: h, index: g })).filter(ze), G = {
-      TL: [],
-      TR: [],
-      BL: [],
-      BR: []
-    };
-    return wt.forEach((h) => {
-      G[tt(h)].push(h);
-    }), Object.keys(G).forEach((h) => {
-      Ve(
-        G[h],
-        h
-      );
-    }), H({
-      candidateList: G.TL,
-      side: "left",
-      bandMarkerX: Ze,
-      startY: Fe,
-      direction: "down"
-    }), H({
-      candidateList: G.TR,
-      side: "right",
-      bandMarkerX: et,
-      startY: Fe,
-      direction: "down"
-    }), G.BL.length > 1 && H({
-      candidateList: G.BL,
-      side: "left",
-      bandMarkerX: Ze,
-      startY: ht,
-      direction: "up"
-    }), G.BR.length > 1 && H({
-      candidateList: G.BR,
-      side: "right",
-      bandMarkerX: et,
-      startY: ht,
-      direction: "up"
-    }), Qe;
-  }) };
-}
-const Ra = ["id"], Va = ["id"], Ea = ["id"], Ua = { style: { position: "relative" } }, Ha = ["xmlns", "aria-describedby", "viewBox"], Ga = ["width", "height"], qa = { key: 1 }, Wa = ["id"], ja = ["stop-color"], Ka = ["offset", "stop-color"], Qa = ["offset", "stop-color"], Ja = ["stop-color"], Za = { key: 2 }, eo = ["id", "cx", "cy"], to = ["stop-color", "stop-opacity"], lo = ["stop-color"], ao = ["id"], oo = ["id"], no = ["id"], so = ["flood-color"], uo = ["id"], ro = ["flood-color"], io = ["d", "stroke", "filter"], co = ["d", "stroke", "filter"], vo = ["cx", "cy", "r", "fill", "filter"], ho = { key: 6 }, fo = ["stroke", "d"], yo = ["d", "fill", "stroke", "stroke-width", "filter"], go = { key: 0 }, po = ["d", "fill", "stroke", "stroke-width", "filter"], mo = { key: 0 }, bo = ["stroke", "d"], wo = { key: 0 }, ko = ["d", "stroke", "stroke-width", "filter"], xo = { key: 1 }, $o = ["d", "fill", "stroke", "stroke-width", "filter"], Co = ["d", "fill", "stroke", "stroke-width", "filter"], _o = { key: 1 }, Ao = ["cx", "cy", "r", "fill", "stroke", "stroke-width"], To = ["cx", "cy", "r", "fill", "stroke", "stroke-width"], Po = { key: 0 }, So = ["d", "fill", "stroke", "stroke-width"], Lo = ["cx", "cy", "r", "stroke"], Mo = ["cx", "cy", "r", "fill"], Io = ["cx", "cy", "r"], Fo = { key: 0 }, zo = ["d", "stroke", "fill", "onMouseenter", "onMouseleave", "onClick"], Oo = { key: 1 }, Yo = ["cx", "cy", "r"], Do = ["x", "y", "fill", "font-size"], Bo = ["x", "y", "fill", "font-size"], Xo = ["x", "y", "fill", "font-size"], No = ["x", "y", "fill", "font-size"], Ro = ["filter", "opacity"], Vo = { key: 0 }, Eo = ["x", "y"], Uo = { key: 1 }, Ho = ["cx", "cy", "fill", "stroke", "filter", "onClick", "onMouseenter", "onMouseleave"], Go = ["text-anchor", "x", "y", "onClick", "onMouseenter", "onMouseleave", "innerHTML"], qo = ["text-anchor", "x", "y", "fill", "font-size", "onClick", "onMouseenter", "onMouseleave"], Wo = ["text-anchor", "x", "y", "fill", "font-size", "onClick", "onMouseenter", "onMouseleave", "innerHTML"], jo = ["cx", "cy", "fill", "stroke", "filter", "onClick", "onMouseenter", "onMouseleave"], Ko = ["text-anchor", "x", "y", "onClick", "onMouseenter", "onMouseleave", "innerHTML"], Qo = ["text-anchor", "x", "y", "fill", "font-size", "onClick", "onMouseenter", "onMouseleave"], Jo = ["text-anchor", "x", "y", "fill", "font-size", "onClick", "onMouseenter", "onMouseleave", "innerHTML"], Zo = { key: 2 }, en = ["x", "y", "width"], tn = ["x", "y", "width"], ln = {
-  key: 0,
-  style: { position: "absolute", top: "100%", left: "0", width: "100%" },
-  "data-dom-to-png-ignore": "",
-  "aria-hidden": "true"
-}, an = {
-  key: 5,
-  class: "vue-data-ui-watermark"
-}, on = ["id"], nn = ["onClick"], sn = {
-  key: 8,
-  class: "vue-ui-donut-hollow"
-}, un = ["innerHTML"], rn = {
-  __name: "vue-ui-donut",
-  props: {
-    config: {
-      type: Object,
-      default() {
-        return {};
-      }
-    },
-    dataset: {
-      type: Array,
-      default() {
-        return [];
-      }
-    }
-  },
-  emits: ["selectLegend", "selectDatapoint", "copyAlt"],
-  setup(it, { expose: ct, emit: Mt }) {
-    const Ke = Me(() => import("./Tooltip-Cvt7Fi0Q.js")), vt = Me(() => import("./BaseIcon-DX0hTWa-.js")), It = Me(() => import("./vue-ui-accordion-DFtpH_16.js")), dt = Me(() => import("./DataTable-cMnb68Ik.js")), Ft = Me(
-      () => import("./PenAndPaper-CJDoB5H9.js")
-    ), zt = Me(
-      () => import("./UserOptions-DVduN6X7.js")
-    ), Ot = Me(
-      () => import("./PackageVersion-BfrCAH6_.js")
-    ), Yt = Me(
-      () => import("./BaseDraggableDialog-Di8Hlru3.js")
-    ), { vue_ui_donut: Dt } = Ca(), { isThemeValid: Bt, warnInvalidTheme: Jt } = Sa(), Qe = aa(), E = it, B = m({
-      get() {
-        return !!E.dataset && E.dataset.length;
-      },
-      set(t) {
-        return t;
-      }
-    }), M = Ie(null), Fe = b(null), ht = b(null), Je = b(null), ft = Ie(null), yt = Ie(null), ne = Ie(null), me = Ie(null), Ze = Ie(null), et = Ie(null), gt = b(0), pt = b(0), mt = b(0), bt = b(!1), ze = b(null), tt = b(null), Ve = b(!1), Ee = b(!1), H = b(null), wt = b({ x: 0, y: 0 }), G = b("pointer"), h = b(!1), g = m({
-      get: () => e.value.style.chart.layout.labels.percentage.fontSize,
-      set: (t) => t
-    }), f = m({
-      get: () => e.value.style.chart.layout.labels.name.fontSize,
-      set: (t) => t
-    }), C = m({
-      get: () => e.value.style.chart.layout.labels.dataLabels.smallArcClusterFontSize,
-      set: (t) => t
-    });
-    let I = !1;
-    const F = () => {
-      !e.value.autoSize || I || (I = !0, requestAnimationFrame(() => {
-        I = !1;
-        const t = e.value, o = Fe.value, l = K.value;
-        if (!t.autoSize || !o || !l) return;
-        const [a, r, c, y] = l.getAttribute("viewBox").split(" ").map(Number), $ = { x: a, y: r, width: c, height: y }, D = [
-          {
-            selector: ".vue-data-ui-datalabel-value",
-            baseSize: t.style.chart.layout.labels.percentage.fontSize,
-            minSize: t.style.chart.layout.labels.percentage.minFontSize,
-            sizeRef: g
-          },
-          {
-            selector: ".vue-data-ui-datalabel-name",
-            baseSize: t.style.chart.layout.labels.name.fontSize,
-            minSize: t.style.chart.layout.labels.name.minFontSize,
-            sizeRef: f
-          },
-          {
-            selector: ".vue-data-ui-datalabel-inline",
-            baseSize: t.style.chart.layout.labels.dataLabels.smallArcClusterFontSize,
-            minSize: t.style.chart.layout.labels.name.minFontSize,
-            sizeRef: C
-          }
-        ];
-        D.map((V) => o.querySelectorAll(V.selector).length).reduce((V, Ne) => V + Ne, 0) !== 0 && D.forEach(({ selector: V, baseSize: Ne, minSize: Zl, sizeRef: ea }) => {
-          o.querySelectorAll(V).forEach((ta) => {
-            const la = ya({
-              el: ta,
-              bounds: $,
-              currentFontSize: Ne,
-              minFontSize: Zl,
-              attempts: 200,
-              padding: 1
-            });
-            ea.value = la;
-          });
-        });
-      }));
-    };
-    vl(async () => {
-      bt.value = !0, ke(), requestAnimationFrame(F);
-    });
-    let le;
-    vl(() => {
-      M.value && (le = new ResizeObserver((t) => {
-        for (const o of t) {
-          const { width: l, height: a } = o.contentRect;
-          if (l > 0 && a > 0) {
-            F();
-            break;
-          }
-        }
-      }), le.observe(M.value.parentElement));
-    }), dl(() => {
-      le?.disconnect();
-    }), dl(() => {
-      ne.value && (me.value && ne.value.unobserve(me.value), ne.value.disconnect());
-    });
-    const ae = m(() => !!e.value.debug);
-    function ke() {
-      if (yl(E.dataset) ? (Kt({
-        componentName: "VueUiDonut",
-        type: "dataset",
-        debug: ae.value
-      }), B.value = !1, Ue.value = !0) : (E.dataset.forEach((t, o) => {
-        ua({
-          datasetObject: t,
-          requiredAttributes: ["name", "values"]
-        }).forEach((l) => {
-          Kt({
-            componentName: "VueUiDonut",
-            type: "datasetSerieAttribute",
-            property: l,
-            index: o,
-            debug: ae.value
-          }), B.value = !1, Ue.value = !0;
-        });
-      }), E.dataset.forEach((t, o) => {
-        (!t.name || t.name === "") && Kt({
-          componentName: "VueUiDonut",
-          type: "datasetAttributeEmpty",
-          property: "name",
-          index: o,
-          debug: ae.value
-        });
-      })), yl(E.dataset) || (Ue.value = e.value.loading), e.value.responsive) {
-        const t = xa(() => {
-          const { width: o, height: l } = $a({
-            chart: M.value,
-            title: e.value.style.chart.title.text ? ft.value : null,
-            legend: e.value.style.chart.legend.show ? yt.value : null,
-            source: Ze.value,
-            noTitle: et.value,
-            padding: e.value.autoSize ? void 0 : He.value
-          });
-          requestAnimationFrame(() => {
-            n.value.width = o, n.value.height = l, F();
-          });
-        });
-        ne.value && (me.value && ne.value.unobserve(me.value), ne.value.disconnect()), ne.value = new ResizeObserver(t), me.value = M.value.parentNode, ne.value.observe(me.value);
-      }
-    }
-    const p = b(ra()), oe = b(!1), se = b(""), z = b(null), lt = b(0);
-    function Oe() {
-      const t = Qt({
-        userConfig: E.config,
-        defaultConfig: Dt
-      });
-      let o = {};
-      const l = t.theme;
-      if (!l)
-        o = t;
-      else if (!Bt.value(t))
-        Jt(t), o = t;
-      else {
-        const a = Qt({
-          userConfig: Oa[l] || E.config,
-          defaultConfig: t
-        });
-        o = {
-          ...Qt({
-            userConfig: E.config,
-            defaultConfig: a
-          }),
-          customPalette: t.customPalette.length ? t.customPalette : ga[l] || Re
-        };
-      }
-      return o;
-    }
-    const e = b(Oe()), xe = m(
-      () => e.value.userOptions.useCursorPointer
-    ), $e = m(() => gl({
-      defaultConfig: {
-        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"
-              }
-            }
-          }
-        }
-      },
-      userConfig: e.value.skeletonConfig ?? {}
-    })), { loading: ue, FINAL_DATASET: Ye, manualLoading: Ue, skeletonDataset: Xt } = Aa({
-      ...oa(E),
-      FINAL_CONFIG: e,
-      prepareConfig: Oe,
-      skeletonDataset: E.config?.skeletonDataset ?? [
-        {
-          name: "",
-          values: [3],
-          color: "#BABABA"
-        },
-        {
-          name: "",
-          values: [2],
-          color: "#AAAAAA"
-        },
-        {
-          name: "",
-          values: [1],
-          color: "#CACACA"
-        }
-      ],
-      skeletonConfig: gl({
-        defaultConfig: e.value,
-        userConfig: $e.value
-      })
-    }), Y = b(!0), Ce = b(0), _e = b(!1);
-    let de = null;
-    function re(t = 1e3) {
-      return new Promise((o) => {
-        const l = performance.now();
-        function a(r) {
-          const c = r - l, y = Math.min(
-            c / t,
-            1
-          ), $ = xl(y);
-          Ce.value = $, y < 1 ? de = requestAnimationFrame(a) : (Ce.value = 1, de = null, o());
-        }
-        de !== null && cancelAnimationFrame(de), Ce.value = 0, de = requestAnimationFrame(a);
-      });
-    }
-    je(
-      () => ue.value,
-      async (t) => {
-        if (t || _e.value)
-          return;
-        const o = Ye.value === Xt, l = e.value.startAnimation?.show;
-        if (!o && l) {
-          _e.value = !0;
-          const a = e.value.startAnimation.durationMs || 1e3;
-          await re(a);
-        } else
-          Ce.value = 1;
-        Y.value = !1;
-      },
-      { immediate: !0 }
-    );
-    const { userOptionsVisible: Z, setUserOptionsVisibility: Ae, keepUserOptionState: Te } = La({ config: e.value }), { svgRef: K } = Ma({
-      config: e.value.style.chart.title
-    });
-    function kt() {
-      Ae(!0);
-    }
-    function Nt() {
-      Ae(!1);
-    }
-    je(
-      () => E.config,
-      (t) => {
-        ue.value || (e.value = Oe()), Z.value = !e.value.userOptions.showOnChartHover, ke(), gt.value += 1, pt.value += 1, mt.value += 1, x.value.dataLabels.show = e.value.style.chart.layout.labels.dataLabels.show, x.value.showTable = e.value.table.show, x.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 He = m(() => {
-      const { top: t, right: o, bottom: l, left: a } = e.value.style.chart.padding;
-      return {
-        css: `padding:${t}px ${o}px ${l}px ${a}px`,
-        top: t,
-        right: o,
-        bottom: l,
-        left: a
-      };
-    }), { isPrinting: Ge, isImaging: xt, generatePdf: at, generateImage: $t } = _a({
-      elementId: `donut__${p.value}`,
-      fileName: e.value.style.chart.title.text || "vue-ui-donut",
-      options: e.value.userOptions.print
-    }), Rt = m(() => e.value.userOptions.show && !e.value.style.chart.title.text), qe = m(() => ia(e.value.customPalette)), x = b({
-      dataLabels: {
-        show: e.value.style.chart.layout.labels.dataLabels.show
-      },
-      showTable: e.value.table.show,
-      showTooltip: e.value.style.chart.tooltip.show
-    });
-    je(
-      e,
-      () => {
-        x.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
-    }), he = m(() => {
-      if (e.value.pie)
-        return O.value;
-      const t = e.value.style.chart.layout.donut.strokeWidth / 512, o = Math.min(n.value.width, n.value.height) * t, l = o > O.value ? O.value : o;
-      return Math.max(l, 12 * (1 + t));
-    }), ot = Mt, U = m(() => Ye.value.sort((t, o) => {
-      const l = Array.isArray(t.values) ? t.values.reduce((r, c) => r + c, 0) : t.value ?? 0, a = Array.isArray(o.values) ? o.values.reduce((r, c) => r + c, 0) : o.value ?? 0;
-      return t.ghost && !o.ghost ? 1 : o.ghost && !t.ghost ? -1 : a - l;
-    }).map((t, o) => ({
-      name: t.name,
-      color: pl(t.color) || qe.value[o] || Re[o] || Re[o % Re.length],
-      value: ca(t.values.reduce((l, a) => l + a, 0)),
-      absoluteValues: t.values,
-      comment: t.comment || "",
-      patternIndex: o,
-      seriesIndex: o,
-      ghost: !1,
-      pattern: `pattern_${p.value}_${o}`
-    })));
-    je(
-      () => E.dataset,
-      (t) => {
-        Array.isArray(t) && t.length > 0 && (Ue.value = !1);
-      },
-      { immediate: !0 }
-    );
-    const Q = Ie(U.value);
-    je(
-      () => U.value,
-      (t) => {
-        Q.value = t, requestAnimationFrame(F);
-      }
-    );
-    function $l() {
-      return U.value.map((t) => ({
-        name: t.name,
-        color: t.color,
-        value: t.value
-      }));
-    }
-    const N = b([]), Pe = b(!1), De = b(null);
-    function Zt({
-      from: t,
-      to: o,
-      duration: l,
-      onUpdate: a,
-      onDone: r,
-      easing: c = xl
-    }) {
-      const y = performance.now();
-      function $(D) {
-        const S = Math.min((D - y) / l, 1), V = c(S), Ne = t + (o - t) * V;
-        a(Ne, S), S < 1 ? requestAnimationFrame($) : (a(o, 1), r && r());
-      }
-      requestAnimationFrame($);
-    }
-    function Cl() {
-      N.value.length ? N.value = [] : nt.value.forEach((t, o) => {
-        N.value.push(o);
-      });
-    }
-    function Ct(t) {
-      const o = U.value.find((r, c) => c === t);
-      let a = Q.value.find((r, c) => c === t).value;
-      if (N.value.includes(t)) {
-        let c = function() {
-          Q.value = Q.value.map(
-            ($, D) => t === D ? { ...$, value: r } : $
-          );
-        }, y = function() {
-          Pe.value = !0, De.value = t, Zt({
-            from: a,
-            to: r,
-            duration: e.value.serieToggleAnimation.durationMs,
-            onUpdate: ($, D) => {
-              Q.value = Q.value.map(
-                (S, V) => t === V ? { ...S, value: $ } : S
-              ), requestAnimationFrame(F);
-            },
-            onDone: () => {
-              c(), Pe.value = !1, De.value = null;
-            }
-          });
-        };
-        N.value = N.value.filter(($) => $ !== t);
-        const r = o.value;
-        e.value.serieToggleAnimation.show && e.value.type === "classic" ? y() : (c(), requestAnimationFrame(F));
-      } else if (N.value.length < U.value.length - 1) {
-        let r = function() {
-          N.value.push(t), Q.value = Q.value.map(
-            (y, $) => t === $ ? { ...y, value: 0 } : y
-          );
-        }, c = function() {
-          Pe.value = !0, De.value = t, Zt({
-            from: a,
-            to: 0,
-            duration: e.value.serieToggleAnimation.durationMs,
-            onUpdate: (y, $) => {
-              Q.value = Q.value.map(
-                (D, S) => t === S ? { ...D, value: y } : D
-              ), requestAnimationFrame(F);
-            },
-            onDone: () => {
-              r(), requestAnimationFrame(F), Pe.value = !1, De.value = null;
-            }
-          });
-        };
-        e.value.serieToggleAnimation.show && e.value.type === "classic" ? c() : r();
-      }
-      ot(
-        "selectLegend",
-        be.value.map((r) => ({
-          name: r.name,
-          color: r.color,
-          value: r.value
-        }))
-      );
-    }
-    function el(t) {
-      if (!U.value.length)
-        return e.value.debug && console.warn("VueUiDonut - There are no series to show."), null;
-      const o = U.value.find((l) => l.name === t);
-      return o || (e.value.debug && console.warn(`VueUiDonut - Series name not found "${t}"`), null);
-    }
-    function _l(t) {
-      const o = el(t);
-      o !== null && N.value.includes(o.seriesIndex) && Ct(o.seriesIndex);
-    }
-    function Al(t) {
-      const o = el(t);
-      o !== null && (N.value.includes(o.seriesIndex) || Ct(o.seriesIndex));
-    }
-    const Tl = m(
-      () => Ye.value.reduce(
-        (t, o) => t + o.values.reduce((l, a) => l + a, 0),
-        0
-      )
-    ), be = m(() => {
-      if (Y.value && !ue.value) {
-        const t = Ce.value, o = U.value.map((a) => ({
-          ...a,
-          value: a.value * t,
-          color: a.color,
-          ghost: !1
-        })), l = Tl.value * (1 - t);
-        return l > 0 && o.push({
-          name: "__ghost__",
-          value: l,
-          color: "transparent",
-          ghost: !0
-        }), o;
-      } else
-        return Q.value.forEach((t) => {
-          if ([null, void 0].includes(t.values))
-            return {
-              ...t,
-              values: []
-            };
-        }), Q.value.map((t, o) => ({
-          ...t,
-          seriesIndex: o
-        })).filter(
-          (t, o) => !N.value.includes(o)
-        );
-    }), nt = m(() => Ye.value.map((t, o) => {
-      const l = (t.values || []).reduce((r, c) => r + c, 0), a = l / Ye.value.map((r) => (r.values || []).reduce((c, y) => c + y, 0)).reduce((r, c) => r + c, 0);
-      return {
-        name: t.name,
-        color: pl(t.color) || qe.value[o] || Re[o] || Re[o % Re.length],
-        value: l,
-        shape: "circle",
-        patternIndex: o,
-        proportion: a
-      };
-    }).map((t, o) => {
-      const l = pe(
-        e.value.style.chart.layout.labels.value.formatter,
-        t.value,
-        ve({
-          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: o }
-      ), a = pe(
-        e.value.style.chart.layout.labels.percentage.formatter,
-        ll(t),
-        ve({
-          v: ll(t),
-          s: "%",
-          r: e.value.style.chart.legend.roundingPercentage
-        })
-      ), r = Ut({
-        val: l,
-        percentage: N.value.includes(o) ? `${Xl(t.proportion * 100)}%` : a,
-        showVal: e.value.style.chart.legend.showValue,
-        showPercentage: e.value.style.chart.legend.showPercentage,
-        config: e.value.style.chart.legend
-      });
-      return {
-        ...t,
-        opacity: N.value.includes(o) ? 0.5 : 1,
-        segregate: () => !Pe.value && Ct(o),
-        isSegregated: N.value.includes(o),
-        display: `${t.name}${e.value.style.chart.legend.showPercentage || e.value.style.chart.legend.showValue ? ": " : ""}${r}`
-      };
-    })), Pl = m(() => ({
-      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" : ""
-    })), O = m(() => {
-      const t = e.value.style.chart.layout.donut.radiusRatio, o = Math.max(0.1, Math.min(0.50001, t)), l = Math.min(
-        n.value.width * o,
-        n.value.height * o
-      );
-      return Math.max(12, l);
-    }), q = m(() => ml(
-      { series: be.value },
-      n.value.width / 2,
-      n.value.height / 2,
-      O.value,
-      O.value,
-      1.99999,
-      2,
-      1,
-      360,
-      105.25,
-      he.value
-    )), Sl = m(() => Math.abs(
-      be.value.map((t) => t.value).reduce((t, o) => t + o, 0)
-    ) > 0), Ll = m(() => ml(
-      {
-        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,
-      O.value,
-      O.value,
-      1.99999,
-      2,
-      1,
-      360,
-      105.25,
-      he.value
-    )), T = m(
-      () => q.value.filter((t) => !t.ghost)
-    ), v = m(() => {
-      const t = Math.max(...be.value.map((l) => l.value)), o = be.value.map((l) => l.value / t);
-      return va({
-        series: o,
-        center: {
-          x: n.value.width / 2,
-          y: n.value.height / 2
-        },
-        maxRadius: Math.min(n.value.width, n.value.height) / 3,
-        hasGhost: Y.value
-      });
-    });
-    function Se(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 ? X({
-        initX: t.middlePoint.x,
-        initY: t.middlePoint.y,
-        offset: 100,
-        centerX: n.value.width / 2,
-        centerY: n.value.height / 2
-      }).y : X({
-        initX: t.middlePoint.x,
-        initY: t.middlePoint.y,
-        offset: 0,
-        centerX: n.value.width / 2,
-        centerY: n.value.height / 2
-      }).y - 100;
-    }
-    function ee(t) {
-      return t.proportion * 100 > e.value.style.chart.layout.labels.dataLabels.hideUnderValue;
-    }
-    function Il(t, o) {
-      const l = e.value.style.chart.layout.labels.dataLabels.hideUnderValue, a = e.value.style.chart.layout.labels.dataLabels.smallArcClusterThreshold, c = (zl.value[o] ?? t.proportion ?? 0) * 100;
-      return c > l && c <= a;
-    }
-    const { smallArcLayoutsClassic: R } = Na({
-      FINAL_CONFIG: e,
-      noGhostDonut: T,
-      svg: n,
-      padding: He,
-      labels_inline_fontSize: C,
-      minSize: O,
-      findArcMidpoint: kl,
-      calcMarkerOffsetX: A,
-      calcMarkerOffsetY: we,
-      animatingIndex: De,
-      segregated: N,
-      isSmallArc: Il
-    });
-    function tl(t, o) {
-      const l = t.value / Fl(o);
-      return isNaN(l) ? 0 : pe(
-        e.value.style.chart.layout.labels.percentage.formatter,
-        l * 100,
-        ve({
-          v: l * 100,
-          s: "%",
-          r: e.value.style.chart.layout.labels.percentage.rounding
-        }),
-        { datapoint: t }
-      );
-    }
-    function Fl(t) {
-      return [...t].map((o) => o.value).reduce((o, l) => o + l, 0);
-    }
-    const te = m(() => be.value.map((t) => t.value).reduce((t, o) => t + o, 0)), zl = m(() => {
-      const t = U.value.reduce((o, l) => o + l.value, 0);
-      return t <= 0 ? [] : U.value.map((o) => o.value / t);
-    }), Vt = m(() => te.value / be.value.length);
-    function ll(t) {
-      return Pe.value ? t.proportion * 100 : t.value / te.value * 100;
-    }
-    const _t = b(null), st = b(!1);
-    function fe({ datapoint: t, seriesIndex: o }) {
-      e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: t, seriesIndex: o }), oe.value = !1, z.value = null, H.value = null, G.value = "pointer";
-    }
-    function ie({
-      datapoint: t,
-      relativeIndex: o,
-      seriesIndex: l,
-      show: a = !1,
-      triggerMode: r = "pointer"
-    }) {
-      e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: t, seriesIndex: l }), G.value = r, H.value = o, _t.value = {
-        datapoint: t,
-        seriesIndex: l,
-        config: e.value,
-        series: U.value
-      }, oe.value = a, z.value = o;
-      let c = "";
-      const y = e.value.style.chart.tooltip.customFormat;
-      if (st.value = !1, ba(y))
-        try {
-          const $ = y({
-            seriesIndex: l,
-            datapoint: t,
-            series: U.value,
-            config: e.value
-          });
-          typeof $ == "string" && (se.value = $, st.value = !0);
-        } catch {
-          console.warn("Custom format cannot be applied."), st.value = !1;
-        }
-      st.value || (c += `<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>`, c += `<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}"/>${Qe.pattern ? `<circle cx="30" cy="30" r="30" stroke="none" fill="url(#pattern_${p.value}_${l})"/>` : ""}</svg>`, c += `<b>${Ut({
-        showVal: e.value.style.chart.tooltip.showValue,
-        showPercentage: e.value.style.chart.tooltip.showPercentage,
-        val: `<span>${pe(
-          e.value.style.chart.layout.labels.value.formatter,
-          t.value,
-          ve({
-            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: o,
-            seriesIndex: l
-          }
-        )}</span>`,
-        percentage: pe(
-          e.value.style.chart.layout.labels.percentage.formatter,
-          t.proportion * 100,
-          ve({
-            v: t.proportion * 100,
-            s: "%",
-            r: e.value.style.chart.tooltip.roundingPercentage
-          }),
-          {
-            datapoint: t,
-            relativeIndex: o,
-            seriesIndex: l
-          }
-        ),
-        config: e.value.style.chart.tooltip
-      })}</b></div>`, e.value.style.chart.comments.showInTooltip && t.comment && (c += `<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>`), se.value = `<div>${c}</div>`);
-    }
-    function Ol(t, o) {
-      const l = R.value[o];
-      if (l)
-        return {
-          textAnchor: l.textAnchor,
-          x: l.labelX,
-          y: l.labelY
-        };
-      const a = A(t, !0, 12);
-      return {
-        textAnchor: a.anchor,
-        x: a.x,
-        y: we(t)
-      };
-    }
-    function Yl(t, o, l) {
-      const { textAnchor: a, x: r } = Ol(t, o), c = At(t), y = `
-        <tspan
-            class="vue-data-ui-datalabel-inline"
-            fill="${e.value.style.chart.layout.labels.percentage.color}"
-            font-size="${l ? C.value : g.value}px"
-            style="font-weight:${e.value.style.chart.layout.labels.percentage.bold ? "bold" : ""}"
-        >${c}</tspan>
-    `, $ = String(t.name ?? "").split(/\n/g);
-      let D = "";
-      return $.forEach((S, V) => {
-        V === 0 ? D += `
-                <tspan
-                    class="${l ? "vue-data-ui-datalabel-inline" : "vue-data-ui-datalabel-name"}"
-                    fill="${e.value.style.chart.layout.labels.name.color}"
-                    font-size="${l ? C.value : f.value}px"
-                    style="font-weight:${e.value.style.chart.layout.labels.name.bold ? "bold" : ""}"
-                >${S}</tspan>
-            ` : D += `
-                <tspan
-                    class="${l ? "vue-data-ui-datalabel-inline" : "vue-data-ui-datalabel-name"}"
-                    x="${r}"
-                    dy="${(l ? C.value : f.value) * 1.2}"
-                    fill="${e.value.style.chart.layout.labels.name.color}"
-                    font-size="${l ? C.value : f.value}px"
-                    style="font-weight:${e.value.style.chart.layout.labels.name.bold ? "bold" : ""}"
-                >${S}</tspan>
-            `;
-      }), a === "end" ? `${e.value.style.chart.layout.labels.name.show ? D : ""}${y}` : `${y}${e.value.style.chart.layout.labels.name.show ? D : ""}`;
-    }
-    function Dl(t, o) {
-      const l = v.value[o].middlePoint, a = Se(l), r = X({
-        initX: l.x,
-        initY: l.y,
-        offset: 42,
-        centerX: n.value.width / 2,
-        centerY: n.value.height / 2
-      }), c = r.x;
-      r.y;
-      const y = At(t), $ = `
-        <tspan
-            class="vue-data-ui-datalabel-value"
-            fill="${e.value.style.chart.layout.labels.percentage.color}"
-            font-size="${g.value}px"
-            style="font-weight:${e.value.style.chart.layout.labels.percentage.bold ? "bold" : "normal"}"
-        >${y}</tspan>
-    `, D = String(t.name ?? "").split(/\n/g);
-      let S = "";
-      return D.forEach((V, Ne) => {
-        Ne === 0 ? S += `
-                <tspan
-                    class="vue-data-ui-datalabel-name"
-                    fill="${e.value.style.chart.layout.labels.name.color}"
-                    font-size="${f.value}px"
-                    style="font-weight:${e.value.style.chart.layout.labels.name.bold ? "bold" : "normal"}"
-                >${V}</tspan>
-            ` : S += `
-                <tspan
-                    class="vue-data-ui-datalabel-name"
-                    x="${c}"
-                    dy="${f.value * 1.2}"
-                    fill="${e.value.style.chart.layout.labels.name.color}"
-                    font-size="${f.value}px"
-                    style="font-weight:${e.value.style.chart.layout.labels.name.bold ? "bold" : "normal"}"
-                >${V}</tspan>
-            `;
-      }), a === "end" ? `${e.value.style.chart.layout.labels.name.show ? S : ""}${$}` : `${$}${e.value.style.chart.layout.labels.name.show ? S : ""}`;
-    }
-    function Be(t) {
-      return e.value.useBlurOnHover && ![null, void 0].includes(z.value) && z.value !== t ? `url(#blur_${p.value})` : "";
-    }
-    function Bl(t) {
-      if (!Pe.value || De.value === null || t.seriesIndex !== De.value)
-        return 1;
-      const o = (t.proportion ?? 0) * 100, l = e.value.style.chart.layout.labels.dataLabels.hideUnderValue, r = e.value.style.chart.layout.labels.dataLabels.smallArcClusterThreshold + 2, c = l;
-      return o >= r ? 1 : o <= c ? 0 : (o - c) / (r - c);
-    }
-    const Le = m(() => {
-      const t = be.value.map((l) => ({
-        name: l.name,
-        color: l.color
-      })), o = be.value.map((l) => l.value);
-      return { head: t, body: o };
-    });
-    function Et(t = null) {
-      fl(() => {
-        const o = Le.value.head.map((r, c) => [
-          [r.name],
-          [Le.value.body[c]],
-          [
-            isNaN(Le.value.body[c] / te.value) ? "-" : Le.value.body[c] / te.value * 100
-          ]
-        ]), l = [
-          [e.value.style.chart.title.text],
-          [e.value.style.chart.title.subtitle.text],
-          [[""], ["val"], ["%"]]
-        ].concat(o), a = pa(l);
-        t ? t(a) : ma({
-          csvContent: a,
-          title: e.value.style.chart.title.text || "vue-ui-donut"
-        });
-      });
-    }
-    const We = m(() => {
-      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>',
-        ve({
-          p: e.value.style.chart.layout.labels.dataLabels.prefix,
-          v: te.value,
-          s: e.value.style.chart.layout.labels.dataLabels.suffix,
-          r: e.value.table.td.roundingValue
-        }),
-        "100%"
-      ], o = Le.value.head.map((c, y) => [
-        {
-          color: c.color,
-          name: c.name || "-"
-        },
-        Le.value.body[y],
-        isNaN(Le.value.body[y] / te.value) ? "-" : (Le.value.body[y] / te.value * 100).toFixed(
-          e.value.table.td.roundingPercentage
-        ) + "%"
-      ]), l = o.map((c) => c.map((y, $) => $ === 0 ? y.name : y)), a = {
-        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: o,
-        a11yBody: l,
-        config: a
-      };
-    }), Xe = b(!1);
-    function al(t) {
-      Xe.value = t, lt.value += 1;
-    }
-    const ol = m(() => /^((?!chrome|android).)*safari/i.test(navigator.userAgent));
-    function Xl(t) {
-      return wa({
-        num: t,
-        rounding: e.value.style.chart.legend.roundingPercentage
-      });
-    }
-    function Ut({ val: t, percentage: o, showVal: l, showPercentage: a, config: r }) {
-      return ka({
-        config: r,
-        val: t,
-        percentage: o,
-        showVal: l,
-        showPercentage: a
-      });
-    }
-    function At(t) {
-      return Ut({
-        val: pe(
-          e.value.style.chart.layout.labels.value.formatter,
-          t.value,
-          ve({
-            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.layout.labels.value.rounding
-          }),
-          { datapoint: t }
-        ),
-        percentage: tl(t, T.value),
-        showVal: e.value.style.chart.layout.labels.value.show,
-        showPercentage: e.value.style.chart.layout.labels.percentage.show,
-        config: e.value.style.chart.layout.labels.dataLabels
-      });
-    }
-    function ce(t, o) {
-      e.value.events.datapointClick && e.value.events.datapointClick({
-        datapoint: t,
-        seriesIndex: t.seriesIndex
-      }), ot("selectDatapoint", { datapoint: t, index: o });
-    }
-    function nl() {
-      x.value.showTable = !x.value.showTable;
-    }
-    function sl() {
-      x.value.dataLabels.show = !x.value.dataLabels.show;
-    }
-    function ul() {
-      x.value.showTooltip = !x.value.showTooltip;
-    }
-    const ut = b(!1);
-    function Ht() {
-      ut.value = !ut.value;
-    }
-    async function Nl({ scale: t = 2 } = {}) {
-      if (!M.value) return;
-      const { width: o, height: l } = M.value.getBoundingClientRect(), a = o / l, { imageUri: r, base64: c } = await Ia({
-        domElement: M.value,
-        base64: !0,
-        img: !0,
-        scale: t
-      });
-      return {
-        imageUri: r,
-        base64: c,
-        title: e.value.style.chart.title.text,
-        width: o,
-        height: l,
-        aspectRatio: a
-      };
-    }
-    function Rl() {
-      if (!Fe.value) return;
-      const { x: t, y: o, width: l, height: a } = Fe.value.getBBox();
-      K.value && K.value.setAttribute(
-        "viewBox",
-        `${t} ${o} ${l + Math.min(0, t)} ${a + Math.min(0, o)}`
-      );
-    }
-    const rt = m(() => {
-      const t = e.value.table.useDialog && !e.value.table.show, o = x.value.showTable;
-      return {
-        component: t ? Yt : It,
-        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: Xe.value,
-          fullscreenParent: M.value,
-          forcedWidth: Math.min(500, window.innerWidth * 0.8),
-          isCursorPointer: xe.value
-        } : {
-          hideDetails: !0,
-          config: {
-            open: o,
-            maxHeight: 1e4,
-            body: {
-              backgroundColor: e.value.style.chart.backgroundColor,
-              color: e.value.style.chart.color
-            },
-            head: {
-              backgroundColor: e.value.style.chart.backgroundColor,
-              color: e.value.style.chart.color
-            }
-          }
-        }
-      };
-    });
-    je(
-      () => x.value.showTable,
-      (t) => {
-        e.value.table.show || (t && e.value.table.useDialog && ze.value ? ze.value.open() : "close" in ze.value && ze.value.close());
-      }
-    );
-    function rl() {
-      x.value.showTable = !1, tt.value && tt.value.setTableIconState(!1);
-    }
-    const Vl = m(() => nt.value.map((t) => ({
-      ...t,
-      name: t.display
-    }))), El = m(() => e.value.style.chart.backgroundColor), Ul = m(() => e.value.style.chart.legend), Hl = m(() => e.value.style.chart.title), { exportSvg: Gl, getSvg: ql } = Pa({
-      svg: K,
-      title: Hl,
-      legend: Ul,
-      legendItems: Vl,
-      backgroundColor: El
-    });
-    async function il({ isCb: t }) {
-      Ee.value = !0, await fl();
-      try {
-        if (t) {
-          const { blob: o, url: l, text: a, dataUrl: r } = await ql();
-          await Promise.resolve(
-            e.value.userOptions.callbacks.svg({
-              blob: o,
-              url: l,
-              text: a,
-              dataUrl: r
-            })
-          );
-        } else
-          await Promise.resolve(Gl());
-      } finally {
-        Ee.value = !1;
-      }
-    }
-    function Wl(t) {
-      if (t?.stage === "start") {
-        Ve.value = !0;
-        return;
-      }
-      if (t?.stage === "end") {
-        Ve.value = !1;
-        return;
-      }
-      $t();
-    }
-    async function cl() {
-      if (ot("copyAlt", {
-        config: e.value,
-        dataset: Q.value
-      }), !e.value.userOptions.callbacks.altCopy) {
-        console.warn(
-          "Vue Data UI - A callback must be set for `altCopy` in userOptions."
-        );
-        return;
-      }
-      await Promise.resolve(
-        e.value.userOptions.callbacks.altCopy({
-          config: e.value,
-          dataset: Q.value
-        })
-      );
-    }
-    function jl() {
-      H.value = null, h.value = !0;
-    }
-    function Kl() {
-      H.value = null, G.value = "pointer", oe.value = !1, z.value = null, h.value = !1;
-    }
-    function Ql(t) {
-      if (!K.value || ut.value || document.activeElement !== K.value || !T.value.length) return;
-      const o = ["ArrowLeft", "ArrowUp"].includes(t.key), l = ["ArrowRight", "ArrowDown"].includes(t.key), a = t.key === "Enter" || t.key === " ", r = t.key === "Escape";
-      if (!o && !l && !a && !r)
-        return;
-      if (t.preventDefault(), t.stopPropagation(), r) {
-        H.value = null, G.value = "pointer", oe.value = !1, z.value = null;
-        return;
-      }
-      if (a) {
-        if (H.value === null) return;
-        const V = T.value[H.value];
-        if (!V) return;
-        ce(V, H.value);
-        return;
-      }
-      let c = H.value;
-      const y = z.value, $ = c !== null && c >= 0 && c < T.value.length, D = y !== null && y >= 0 && y < T.value.length;
-      $ ? l ? (c += 1, c >= T.value.length && (c = 0)) : o && (c -= 1, c < 0 && (c = T.value.length - 1)) : D ? (c = l ? y + 1 : y - 1, c >= T.value.length && (c = 0), c < 0 && (c = T.value.length - 1)) : l ? c = 0 : c = T.value.length - 1;
-      const S = T.value[c];
-      S && (H.value = c, Jl(c), ie({
-        datapoint: S,
-        relativeIndex: c,
-        seriesIndex: S.seriesIndex,
-        show: !0,
-        triggerMode: "keyboard"
-      }));
-    }
-    function Jl(t) {
-      if (!Number.isFinite(t) || !K.value) return;
-      let o = n.value.width / 2, l = n.value.height / 2;
-      if (e.value.type === "classic") {
-        const r = T.value[t];
-        if (!r?.arcSlice) return;
-        const c = kl(r.arcSlice);
-        if (!c) return;
-        o = c.x, l = c.y;
-      } else {
-        const r = v.value[t]?.middlePoint;
-        if (!r) return;
-        o = r.x, l = r.y;
-      }
-      const a = K.value.getBoundingClientRect();
-      wt.value = {
-        x: a.left + o / n.value.width * a.width,
-        y: a.top + l / n.value.height * a.height
-      };
-    }
-    const Gt = m(() => {
-      const t = We.value?.colNames ?? [], o = We.value?.a11yBody ?? [];
-      return { headers: t, rows: o };
-    });
-    return ct({
-      autoSize: Rl,
-      getData: $l,
-      getImage: Nl,
-      generatePdf: at,
-      generateCsv: Et,
-      generateImage: $t,
-      generateSvg: il,
-      hideSeries: Al,
-      showSeries: _l,
-      toggleTable: nl,
-      toggleLabels: sl,
-      toggleTooltip: ul,
-      toggleAnnotator: Ht,
-      toggleFullscreen: al,
-      copyAlt: cl
-    }), (t, o) => (u(), i("div", {
-      ref_key: "donutChart",
-      ref: M,
-      class: qt(`vue-data-ui-component vue-ui-donut ${Xe.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${e.value.useCssAnimation ? "" : "vue-ui-dna"}`),
-      style: L(`font-family:${e.value.style.fontFamily};width:100%; ${e.value.responsive ? "height:100%;" : ""} text-align:center;background:${e.value.style.chart.backgroundColor}`),
-      id: `donut__${p.value}`,
-      onMouseenter: kt,
-      onMouseleave: Nt
-    }, [
-      w("div", {
-        id: `chart-instructions-${p.value}`,
-        class: "sr-only"
-      }, [
-        w("p", null, ye(e.value.a11y.translations.keyboardNavigation), 1)
-      ], 8, Va),
-      Gt.value?.rows?.length ? (u(), ge(Da, {
-        key: 0,
-        uid: p.value,
-        head: Gt.value.headers,
-        body: Gt.value.rows,
-        notice: e.value.a11y.translations.tableAvailable,
-        caption: e.value.a11y.translations.tableCaption
-      }, null, 8, ["uid", "head", "body", "notice", "caption"])) : d("", !0),
-      e.value.userOptions.buttons.annotator && s(K) ? (u(), ge(s(Ft), {
-        key: 1,
-        color: e.value.style.chart.color,
-        backgroundColor: e.value.style.chart.backgroundColor,
-        active: ut.value,
-        svgRef: s(K),
-        isCursorPointer: xe.value,
-        onClose: Ht
-      }, {
-        "annotator-action-close": _(() => [
-          k(t.$slots, "annotator-action-close", {}, void 0, !0)
-        ]),
-        "annotator-action-color": _(({ color: l }) => [
-          k(t.$slots, "annotator-action-color", W(j({ color: l })), void 0, !0)
-        ]),
-        "annotator-action-draw": _(({ mode: l }) => [
-          k(t.$slots, "annotator-action-draw", W(j({ mode: l })), void 0, !0)
-        ]),
-        "annotator-action-undo": _(({ disabled: l }) => [
-          k(t.$slots, "annotator-action-undo", W(j({ disabled: l })), void 0, !0)
-        ]),
-        "annotator-action-redo": _(({ disabled: l }) => [
-          k(t.$slots, "annotator-action-redo", W(j({ disabled: l })), void 0, !0)
-        ]),
-        "annotator-action-delete": _(({ disabled: l }) => [
-          k(t.$slots, "annotator-action-delete", W(j({ disabled: l })), void 0, !0)
-        ]),
-        _: 3
-      }, 8, ["color", "backgroundColor", "active", "svgRef", "isCursorPointer"])) : d("", !0),
-      k(t.$slots, "userConfig", {}, void 0, !0),
-      Rt.value ? (u(), i("div", {
-        key: 2,
-        ref_key: "noTitle",
-        ref: et,
-        class: "vue-data-ui-no-title-space",
-        style: "height:36px; width: 100%;background:transparent"
-      }, null, 512)) : d("", !0),
-      e.value.style.chart.title.text ? (u(), i("div", {
-        key: 3,
-        ref_key: "chartTitle",
-        ref: ft,
-        style: "width:100%;background:transparent;padding-bottom:24px"
-      }, [
-        (u(), ge(za, {
-          key: `title_${gt.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)) : d("", !0),
-      w("div", {
-        id: `legend-top-${p.value}`
-      }, null, 8, Ea),
-      e.value.userOptions.show && B.value && (s(Te) || s(Z)) ? (u(), ge(s(zt), {
-        ref_key: "userOptionsRef",
-        ref: tt,
-        key: `user_option_${lt.value}`,
-        backgroundColor: e.value.style.chart.backgroundColor,
-        color: e.value.style.chart.color,
-        isPrinting: s(Ge),
-        isImaging: s(xt),
-        uid: p.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,
-        hasAltCopy: e.value.userOptions.buttons.altCopy,
-        isFullscreen: Xe.value,
-        chartElement: M.value,
-        position: e.value.userOptions.position,
-        callbacks: e.value.userOptions.callbacks,
-        isTooltip: x.value.showTooltip,
-        titles: { ...e.value.userOptions.buttonTitles },
-        hasAnnotator: e.value.userOptions.buttons.annotator,
-        isAnnotation: ut.value,
-        printScale: e.value.userOptions.print.scale,
-        tableDialog: e.value.table.useDialog,
-        isCursorPointer: xe.value,
-        onToggleFullscreen: al,
-        onGeneratePdf: s(at),
-        onGenerateCsv: Et,
-        onGenerateImage: Wl,
-        onGenerateSvg: il,
-        onToggleTable: nl,
-        onToggleLabels: sl,
-        onToggleTooltip: ul,
-        onToggleAnnotator: Ht,
-        onCopyAlt: cl,
-        style: L({
-          visibility: s(Te) ? s(Z) ? "visible" : "hidden" : "visible"
-        })
-      }, Wt({ _: 2 }, [
-        t.$slots.menuIcon ? {
-          name: "menuIcon",
-          fn: _(({ isOpen: l, color: a }) => [
-            k(t.$slots, "menuIcon", W(j({ isOpen: l, color: a })), void 0, !0)
-          ]),
-          key: "0"
-        } : void 0,
-        t.$slots.optionTooltip ? {
-          name: "optionTooltip",
-          fn: _(() => [
-            k(t.$slots, "optionTooltip", {}, void 0, !0)
-          ]),
-          key: "1"
-        } : void 0,
-        t.$slots.optionPdf ? {
-          name: "optionPdf",
-          fn: _(() => [
-            k(t.$slots, "optionPdf", {}, void 0, !0)
-          ]),
-          key: "2"
-        } : void 0,
-        t.$slots.optionCsv ? {
-          name: "optionCsv",
-          fn: _(() => [
-            k(t.$slots, "optionCsv", {}, void 0, !0)
-          ]),
-          key: "3"
-        } : void 0,
-        t.$slots.optionImg ? {
-          name: "optionImg",
-          fn: _(() => [
-            k(t.$slots, "optionImg", {}, void 0, !0)
-          ]),
-          key: "4"
-        } : void 0,
-        t.$slots.optionSvg ? {
-          name: "optionSvg",
-          fn: _(() => [
-            k(t.$slots, "optionSvg", {}, void 0, !0)
-          ]),
-          key: "5"
-        } : void 0,
-        t.$slots.optionTable ? {
-          name: "optionTable",
-          fn: _(() => [
-            k(t.$slots, "optionTable", {}, void 0, !0)
-          ]),
-          key: "6"
-        } : void 0,
-        t.$slots.optionLabels ? {
-          name: "optionLabels",
-          fn: _(() => [
-            k(t.$slots, "optionLabels", {}, void 0, !0)
-          ]),
-          key: "7"
-        } : void 0,
-        t.$slots.optionFullscreen ? {
-          name: "optionFullscreen",
-          fn: _(({ toggleFullscreen: l, isFullscreen: a }) => [
-            k(t.$slots, "optionFullscreen", W(j({ toggleFullscreen: l, isFullscreen: a })), void 0, !0)
-          ]),
-          key: "8"
-        } : void 0,
-        t.$slots.optionAnnotator ? {
-          name: "optionAnnotator",
-          fn: _(({ toggleAnnotator: l, isAnnotator: a }) => [
-            k(t.$slots, "optionAnnotator", W(j({ toggleAnnotator: l, isAnnotator: a })), void 0, !0)
-          ]),
-          key: "9"
-        } : void 0,
-        t.$slots.optionAltCopy ? {
-          name: "optionAltCopy",
-          fn: _(({ altCopy: l }) => [
-            k(t.$slots, "optionAltCopy", W(j({ altCopy: l })), void 0, !0)
-          ]),
-          key: "10"
-        } : void 0
-      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasTooltip", "hasPdf", "hasImg", "hasSvg", "hasXls", "hasTable", "hasLabel", "hasFullscreen", "hasAltCopy", "isFullscreen", "chartElement", "position", "callbacks", "isTooltip", "titles", "hasAnnotator", "isAnnotation", "printScale", "tableDialog", "isCursorPointer", "onGeneratePdf", "style"])) : d("", !0),
-      w("div", Ua, [
-        (u(), i("svg", {
-          ref_key: "svgRef",
-          ref: K,
-          xmlns: s(da),
-          "aria-describedby": `chart-instructions-${p.value}`,
-          class: qt({
-            "vue-data-ui-fullscreen--on": Xe.value,
-            "vue-data-ui-fulscreen--off": !Xe.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: L(`max-width:100%; overflow: visible; background:transparent;color:${e.value.style.chart.color};${He.value.css}`),
-          tabindex: "0",
-          onFocus: jl,
-          onBlur: Kl,
-          onKeydown: Ql
-        }, [
-          w("g", {
-            ref_key: "G",
-            ref: Fe,
-            class: "vue-data-ui-g"
-          }, [
-            Tt(s(Ot)),
-            t.$slots["chart-background"] ? (u(), i("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"
-              }
-            }, [
-              k(t.$slots, "chart-background", {}, void 0, !0)
-            ], 8, Ga)) : d("", !0),
-            e.value.type === "classic" && !isNaN(he.value / O.value) ? (u(), i("defs", qa, [
-              e.value.style.chart.useGradient ? (u(), i("radialGradient", {
-                key: 0,
-                id: `gradient_${p.value}`
-              }, [
-                w("stop", {
-                  offset: "0%",
-                  "stop-color": s(Lt)(
-                    e.value.style.chart.backgroundColor,
-                    0
-                  ),
-                  "stop-opacity": "0"
-                }, null, 8, ja),
-                w("stop", {
-                  offset: `${(1 - he.value / O.value) * 100}%`,
-                  "stop-color": s(Lt)("#FFFFFF", 0),
-                  "stop-opacity": "0"
-                }, null, 8, Ka),
-                w("stop", {
-                  offset: `${(1 - he.value / O.value / 2) * 100}%`,
-                  "stop-color": s(Lt)(
-                    "#FFFFFF",
-                    e.value.style.chart.gradientIntensity
-                  )
-                }, null, 8, Qa),
-                w("stop", {
-                  offset: "100%",
-                  "stop-color": s(Lt)(
-                    e.value.style.chart.backgroundColor,
-                    0
-                  ),
-                  "stop-opacity": "0"
-                }, null, 8, Ja)
-              ], 8, Wa)) : d("", !0)
-            ])) : d("", !0),
-            e.value.type === "polar" ? (u(), i("defs", Za, [
-              (u(!0), i(P, null, J(v.value, (l, a) => (u(), i("radialGradient", {
-                id: `polar_gradient_${a}_${p.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%"
-              }, [
-                w("stop", {
-                  offset: "0%",
-                  "stop-color": s(ha)(q.value[a].color, 0.05),
-                  "stop-opacity": e.value.style.chart.gradientIntensity / 100
-                }, null, 8, to),
-                w("stop", {
-                  offset: "100%",
-                  "stop-color": q.value[a].color
-                }, null, 8, lo)
-              ], 8, eo))), 256))
-            ])) : d("", !0),
-            w("defs", null, [
-              w("filter", {
-                id: `blur_${p.value}`,
-                x: "-50%",
-                y: "-50%",
-                width: "200%",
-                height: "200%"
-              }, [
-                w("feGaussianBlur", {
-                  in: "SourceGraphic",
-                  stdDeviation: 2,
-                  id: `blur_std_${p.value}`
-                }, null, 8, oo),
-                o[5] || (o[5] = w("feColorMatrix", {
-                  type: "saturate",
-                  values: "0"
-                }, null, -1))
-              ], 8, ao),
-              w("filter", {
-                id: `shadow_${p.value}`,
-                "color-interpolation-filters": "sRGB"
-              }, [
-                w("feDropShadow", {
-                  dx: "0",
-                  dy: "0",
-                  stdDeviation: "10",
-                  "flood-opacity": "0.5",
-                  "flood-color": e.value.style.chart.layout.donut.shadowColor
-                }, null, 8, so)
-              ], 8, no),
-              w("filter", {
-                id: `drop_shadow_${p.value}`,
-                "color-interpolation-filters": "sRGB",
-                x: "-50%",
-                y: "-50%",
-                width: "200%",
-                height: "200%"
-              }, [
-                w("feDropShadow", {
-                  dx: "0",
-                  dy: "0",
-                  stdDeviation: "3",
-                  "flood-opacity": "1",
-                  "flood-color": e.value.style.chart.layout.donut.shadowColor
-                }, null, 8, ro)
-              ], 8, uo)
-            ]),
-            e.value.type === "classic" ? (u(!0), i(P, { key: 3 }, J(q.value.filter(
-              (l) => !l.ghost
-            ), (l, a) => (u(), i("g", null, [
-              ee(l) && x.value.dataLabels.show ? (u(), i("path", {
-                key: 0,
-                d: s(R)[a]?.connectorPath || s(fa)(
-                  l,
-                  { x: n.value.width / 2, y: n.value.height / 2 },
-                  16,
-                  16,
-                  !1,
-                  !1,
-                  he.value,
-                  12,
-                  e.value.style.chart.layout.curvedMarkers
-                ),
-                stroke: l.color,
-                "stroke-width": "1",
-                "stroke-linecap": "round",
-                "stroke-linejoin": "round",
-                fill: "none",
-                filter: Be(a)
-              }, null, 8, io)) : d("", !0)
-            ]))), 256)) : d("", !0),
-            e.value.type === "polar" ? (u(!0), i(P, { key: 4 }, J(q.value.filter(
-              (l) => !l.ghost
-            ), (l, a) => (u(), i("g", null, [
-              ee(l) && x.value.dataLabels.show ? (u(), i("path", {
-                key: 0,
-                d: `M ${s(X)({ initX: v.value[a].middlePoint.x, initY: v.value[a].middlePoint.y, offset: 24, centerX: n.value.width / 2, centerY: n.value.height / 2 }).x},${s(X)({ initX: v.value[a].middlePoint.x, initY: v.value[a].middlePoint.y, offset: 24, centerX: n.value.width / 2, centerY: n.value.height / 2 }).y} ${v.value[a].middlePoint.x},${v.value[a].middlePoint.y}`,
-                stroke: l.color,
-                "stroke-width": "1",
-                "stroke-linecap": "round",
-                "stroke-linejoin": "round",
-                fill: "none",
-                filter: Be(a),
-                style: L({
-                  transition: Y.value || !e.value.serieToggleAnimation.show ? "none" : `all ${e.value.serieToggleAnimation.durationMs}ms ease-in-out`
-                })
-              }, null, 12, co)) : d("", !0)
-            ]))), 256)) : d("", !0),
-            e.value.type === "classic" && e.value.style.chart.layout.donut.useShadow ? (u(), i("circle", {
-              key: 5,
-              cx: n.value.width / 2,
-              cy: n.value.height / 2,
-              r: O.value <= 0 ? 10 : O.value,
-              fill: e.value.style.chart.backgroundColor,
-              filter: `url(#shadow_${p.value})`
-            }, null, 8, vo)) : d("", !0),
-            t.$slots.pattern ? (u(), i("g", ho, [
-              (u(!0), i(P, null, J(it.dataset, (l, a) => (u(), i("defs", {
-                key: `pattern-${l.patternIndex}`
-              }, [
-                k(t.$slots, "pattern", jt({ ref_for: !0 }, {
-                  seriesIndex: a,
-                  patternId: `pattern_${p.value}_${a}`
-                }), void 0, !0)
-              ]))), 128))
-            ])) : d("", !0),
-            te.value && e.value.type === "classic" ? (u(), i(P, { key: 7 }, [
-              (u(!0), i(P, null, J(T.value, (l, a) => (u(), i("path", {
-                stroke: e.value.style.chart.backgroundColor,
-                d: l.arcSlice,
-                fill: "#FFFFFF"
-              }, null, 8, fo))), 256)),
-              (u(!0), i(P, null, J(T.value, (l, a) => (u(), i("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: Be(a)
-              }, null, 8, yo))), 256)),
-              t.$slots.pattern ? (u(), i("g", go, [
-                (u(!0), i(P, null, J(T.value, (l, a) => (u(), i("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: Be(a)
-                }, null, 8, po))), 256))
-              ])) : d("", !0)
-            ], 64)) : d("", !0),
-            te.value && e.value.type === "polar" ? (u(), i(P, { key: 8 }, [
-              q.value.length > 1 ? (u(), i("g", mo, [
-                (u(!0), i(P, null, J(T.value, (l, a) => (u(), i("path", {
-                  stroke: e.value.style.chart.layout.donut.borderColorAuto ? e.value.style.chart.backgroundColor : e.value.style.chart.layout.donut.borderColor,
-                  d: v.value[a].path,
-                  fill: "#FFFFFF",
-                  style: L({
-                    transition: Y.value || !e.value.serieToggleAnimation.show ? "none" : `all ${e.value.serieToggleAnimation.durationMs}ms ease-in-out`
-                  })
-                }, null, 12, bo))), 256)),
-                e.value.style.chart.layout.donut.useShadow ? (u(), i("g", wo, [
-                  (u(!0), i(P, null, J(T.value, (l, a) => (u(), i("path", {
-                    class: "vue-ui-donut-arc-path",
-                    d: v.value[a].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_${p.value})`,
-                    style: L({
-                      transition: Y.value || !e.value.serieToggleAnimation.show ? "none" : `all ${e.value.serieToggleAnimation.durationMs}ms ease-in-out`
-                    })
-                  }, null, 12, ko))), 256))
-                ])) : d("", !0),
-                t.$slots.pattern ? (u(), i("g", xo, [
-                  (u(!0), i(P, null, J(T.value, (l, a) => (u(), i("path", {
-                    class: "vue-ui-donut-arc-path",
-                    d: v.value[a].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: Be(a),
-                    style: L({
-                      transition: Y.value || !e.value.serieToggleAnimation.show ? "none" : `all ${e.value.serieToggleAnimation.durationMs}ms ease-in-out`,
-                      transformOrigin: "center"
-                    })
-                  }, null, 12, $o))), 256))
-                ])) : d("", !0),
-                (u(!0), i(P, null, J(T.value, (l, a) => (u(), i("path", {
-                  class: "vue-ui-donut-arc-path",
-                  d: v.value[a].path,
-                  fill: e.value.style.chart.useGradient ? `url(#polar_gradient_${a}_${p.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: Be(a),
-                  style: L({
-                    transition: Y.value || !e.value.serieToggleAnimation.show ? "none" : `all ${e.value.serieToggleAnimation.durationMs}ms ease-in-out`
-                  })
-                }, null, 12, Co))), 256))
-              ])) : (u(), i("g", _o, [
-                t.$slots.pattern ? (u(), i("circle", {
-                  key: 0,
-                  cx: n.value.width / 2,
-                  cy: n.value.height / 2,
-                  r: O.value,
-                  fill: `url(#pattern_${p.value}_${q.value[0].patternIndex})`,
-                  stroke: e.value.style.chart.backgroundColor,
-                  "stroke-width": e.value.style.chart.layout.donut.borderWidth
-                }, null, 8, Ao)) : d("", !0),
-                w("circle", {
-                  cx: n.value.width / 2,
-                  cy: n.value.height / 2,
-                  r: O.value,
-                  fill: e.value.style.chart.useGradient ? `url(#polar_gradient_0_${p.value})` : q.value[0].color,
-                  stroke: e.value.style.chart.backgroundColor,
-                  "stroke-width": e.value.style.chart.layout.donut.borderWidth
-                }, null, 8, To)
-              ]))
-            ], 64)) : (u(), i(P, { key: 9 }, [
-              e.value.type === "classic" && !Sl.value ? (u(), i("g", Po, [
-                (u(!0), i(P, null, J(Ll.value, (l, a) => (u(), i("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, So))), 256))
-              ])) : d("", !0),
-              w("circle", {
-                cx: n.value.width / 2,
-                cy: n.value.height / 2,
-                r: O.value <= 0 ? 10 : O.value,
-                fill: "transparent",
-                stroke: e.value.style.chart.backgroundColor
-              }, null, 8, Lo)
-            ], 64)),
-            e.value.style.chart.useGradient && e.value.type === "classic" ? (u(), i("circle", {
-              key: 10,
-              cx: n.value.width / 2,
-              cy: n.value.height / 2,
-              r: (
-                /* This might require adjustments */
-                O.value <= 0 ? 10 : O.value
-              ),
-              fill: `url(#gradient_${p.value})`
-            }, null, 8, Mo)) : d("", !0),
-            w("circle", {
-              ref_key: "circle_hollow",
-              ref: Je,
-              style: { pointerEvents: "none" },
-              fill: "none",
-              cx: n.value.width / 2,
-              cy: n.value.height / 2,
-              r: Math.max(0.1, he.value * 1.7)
-            }, null, 8, Io),
-            te.value ? (u(), i(P, { key: 11 }, [
-              q.value.length > 1 || e.value.type === "classic" ? (u(), i("g", Fo, [
-                (u(!0), i(P, null, J(q.value.filter(
-                  (l) => !l.ghost
-                ), (l, a) => (u(), i("path", {
-                  d: e.value.type === "classic" ? l.arcSlice : v.value[a].path,
-                  stroke: e.value.style.chart.layout.donut.borderColorAuto ? e.value.style.chart.backgroundColor : e.value.style.chart.layout.donut.borderColor,
-                  fill: z.value === a ? e.value.style.chart.layout.donut.selectedColor : "transparent",
-                  onMouseenter: (r) => ie({
-                    datapoint: l,
-                    relativeIndex: a,
-                    seriesIndex: l.seriesIndex,
-                    show: !0
-                  }),
-                  onMouseleave: (r) => fe({
-                    datapoint: l,
-                    seriesIndex: l.seriesIndex
-                  }),
-                  onClick: (r) => ce(l, a)
-                }, null, 40, zo))), 256))
-              ])) : (u(), i("g", Oo, [
-                w("circle", {
-                  cx: n.value.width / 2,
-                  cy: n.value.height / 2,
-                  r: O.value,
-                  fill: "transparent",
-                  onMouseenter: o[0] || (o[0] = (l) => ie({
-                    datapoint: q.value[0],
-                    relativeIndex: 0,
-                    seriesIndex: q.value[0].seriesIndex,
-                    show: !0
-                  })),
-                  onMouseleave: o[1] || (o[1] = (l) => fe({
-                    datapoint: q.value[0],
-                    seriesIndex: q.value[0].seriesIndex
-                  })),
-                  onClick: o[2] || (o[2] = (l) => ce(q.value[0], t.i))
-                }, null, 40, Yo)
-              ]))
-            ], 64)) : d("", !0),
-            e.value.type === "classic" ? (u(), i("g", {
-              key: 12,
-              ref_key: "G_hollow",
-              ref: ht,
-              class: "vue-data-ui-donut-hollow-labels"
-            }, [
-              e.value.style.chart.layout.labels.hollow.total.show ? (u(), i("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: L(`font-weight:${e.value.style.chart.layout.labels.hollow.total.bold ? "bold" : ""}`)
-              }, ye(e.value.style.chart.layout.labels.hollow.total.text), 13, Do)) : d("", !0),
-              e.value.style.chart.layout.labels.hollow.total.show ? (u(), i("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: L(`font-weight:${e.value.style.chart.layout.labels.hollow.total.value.bold ? "bold" : ""}`)
-              }, ye(s(pe)(
-                e.value.style.chart.layout.labels.hollow.total.value.formatter,
-                te.value,
-                s(ve)({
-                  p: e.value.style.chart.layout.labels.hollow.total.value.prefix,
-                  v: te.value,
-                  s: e.value.style.chart.layout.labels.hollow.total.value.suffix
-                })
-              )), 13, Bo)) : d("", !0),
-              e.value.style.chart.layout.labels.hollow.average.show ? (u(), i("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: L(`font-weight:${e.value.style.chart.layout.labels.hollow.average.bold ? "bold" : ""}`)
-              }, ye(e.value.style.chart.layout.labels.hollow.average.text), 13, Xo)) : d("", !0),
-              e.value.style.chart.layout.labels.hollow.average.show ? (u(), i("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: L(`font-weight:${e.value.style.chart.layout.labels.hollow.average.value.bold ? "bold" : ""}`)
-              }, ye(Pe.value || Y.value ? "--" : s(pe)(
-                e.value.style.chart.layout.labels.hollow.average.value.formatter,
-                s(bl)(Vt.value),
-                s(ve)({
-                  p: e.value.style.chart.layout.labels.hollow.average.value.prefix,
-                  v: s(bl)(Vt.value),
-                  s: e.value.style.chart.layout.labels.hollow.average.value.suffix,
-                  r: e.value.style.chart.layout.labels.hollow.average.value.rounding
-                })
-              )), 13, No)) : d("", !0)
-            ], 512)) : d("", !0),
-            (u(!0), i(P, null, J(T.value.filter(
-              (l) => !l.ghost
-            ), (l, a) => (u(), i("g", {
-              filter: Be(a),
-              class: qt({ animated: e.value.useCssAnimation }),
-              key: l.seriesIndex,
-              opacity: Bl(l)
-            }, [
-              e.value.style.chart.layout.labels.dataLabels.useLabelSlots ? (u(), i("g", Vo, [
-                (u(), i("foreignObject", {
-                  x: s(A)(l, !0).anchor === "end" ? s(A)(l).x - 120 : s(A)(l, !0).anchor === "middle" ? s(A)(l).x - 60 : s(A)(l).x,
-                  y: s(we)(l) - (ol.value ? 20 : 0),
-                  width: "120",
-                  height: "60",
-                  style: { overflow: "visible" }
-                }, [
-                  w("div", null, [
-                    k(t.$slots, "dataLabel", jt({ ref_for: !0 }, {
-                      datapoint: l,
-                      isBlur: !e.value.useBlurOnHover || [null, void 0].includes(
-                        z.value
-                      ) || z.value === a,
-                      isSafari: ol.value,
-                      isVisible: ee(l) && x.value.dataLabels.show,
-                      textAlign: s(A)(
-                        l,
-                        !0,
-                        16,
-                        !0
-                      ).anchor,
-                      flexAlign: s(A)(
-                        l,
-                        !0,
-                        16
-                      ).anchor,
-                      percentage: tl(
-                        l,
-                        T.value
-                      )
-                    }), void 0, !0)
-                  ])
-                ], 8, Eo))
-              ])) : (u(), i("g", Uo, [
-                e.value.type === "classic" ? (u(), i(P, { key: 0 }, [
-                  ee(l) && x.value.dataLabels.show ? (u(), i("circle", {
-                    key: 0,
-                    cx: s(R)[a]?.markerX ?? s(A)(l).x,
-                    cy: s(R)[a]?.markerY ?? s(we)(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(
-                      z.value
-                    ) || z.value === a ? "" : `url(#blur_${p.value})`,
-                    onClick: (r) => ce(l, a),
-                    onMouseenter: (r) => ie({
-                      datapoint: l,
-                      relativeIndex: a,
-                      seriesIndex: l.seriesIndex,
-                      show: !0
-                    }),
-                    onMouseleave: (r) => fe({
-                      datapoint: l,
-                      seriesIndex: l.seriesIndex
-                    })
-                  }, null, 40, Ho)) : d("", !0),
-                  e.value.style.chart.layout.labels.dataLabels.oneLine || s(R)[a] ? Pt((u(), i("text", {
-                    key: 1,
-                    class: "vue-data-ui-datalabel-inline",
-                    "text-anchor": s(R)[a]?.textAnchor || s(A)(l, !0, 12).anchor,
-                    x: s(R)[a]?.labelX ?? s(A)(l, !0, 12).x,
-                    y: s(R)[a]?.labelY ?? s(we)(l),
-                    onClick: (r) => ce(l, a),
-                    onMouseenter: (r) => ie({
-                      datapoint: l,
-                      relativeIndex: a,
-                      seriesIndex: l.seriesIndex,
-                      show: !0
-                    }),
-                    onMouseleave: (r) => fe({
-                      datapoint: l,
-                      seriesIndex: l.seriesIndex
-                    }),
-                    innerHTML: Yl(
-                      l,
-                      a,
-                      !!s(R)[a]
-                    )
-                  }, null, 40, Go)), [
-                    [
-                      St,
-                      ee(l) && x.value.dataLabels.show
-                    ]
-                  ]) : (u(), i(P, { key: 2 }, [
-                    Pt(w("text", {
-                      class: "vue-data-ui-datalabel-value",
-                      "text-anchor": s(R)[a]?.textAnchor || s(A)(l, !0, 12).anchor,
-                      x: s(R)[a]?.labelX ?? s(A)(l, !0, 12).x,
-                      y: s(R)[a]?.labelY ?? s(we)(l),
-                      fill: e.value.style.chart.layout.labels.percentage.color,
-                      "font-size": g.value + "px",
-                      style: L(`font-weight:${e.value.style.chart.layout.labels.percentage.bold ? "bold" : ""}`),
-                      onClick: (r) => ce(l, a),
-                      onMouseenter: (r) => ie({
-                        datapoint: l,
-                        relativeIndex: a,
-                        seriesIndex: l.seriesIndex,
-                        show: !0
-                      }),
-                      onMouseleave: (r) => fe({
-                        datapoint: l,
-                        seriesIndex: l.seriesIndex
-                      })
-                    }, ye(At(l)), 45, qo), [
-                      [
-                        St,
-                        ee(l) && x.value.dataLabels.show
-                      ]
-                    ]),
-                    Pt(w("text", {
-                      class: "vue-data-ui-datalabel-name",
-                      "text-anchor": s(R)[a]?.textAnchor || s(A)(l).anchor,
-                      x: s(R)[a]?.labelX ?? s(A)(l, !0, 12).x,
-                      y: (s(R)[a]?.labelY ?? s(we)(l)) + f.value * 1.2,
-                      fill: e.value.style.chart.layout.labels.name.color,
-                      "font-size": f.value + "px",
-                      style: L(`font-weight:${e.value.style.chart.layout.labels.name.bold ? "bold" : ""}`),
-                      onClick: (r) => ce(l, a),
-                      onMouseenter: (r) => ie({
-                        datapoint: l,
-                        relativeIndex: a,
-                        seriesIndex: l.seriesIndex,
-                        show: !0
-                      }),
-                      onMouseleave: (r) => fe({
-                        datapoint: l,
-                        seriesIndex: l.seriesIndex
-                      }),
-                      innerHTML: s(wl)({
-                        content: l.name,
-                        fontSize: f.value,
-                        fill: e.value.style.chart.layout.labels.name.color,
-                        x: s(R)[a]?.labelX ?? s(A)(
-                          l,
-                          !0,
-                          12
-                        ).x,
-                        y: (s(R)[a]?.labelY ?? s(we)(
-                          l
-                        )) + f.value
-                      })
-                    }, null, 44, Wo), [
-                      [
-                        St,
-                        ee(l) && x.value.dataLabels.show && e.value.style.chart.layout.labels.name.show
-                      ]
-                    ])
-                  ], 64))
-                ], 64)) : d("", !0),
-                e.value.type === "polar" ? (u(), i(P, { key: 1 }, [
-                  ee(l) && x.value.dataLabels.show ? (u(), i("circle", {
-                    key: 0,
-                    cx: s(X)({
-                      initX: v.value[a].middlePoint.x,
-                      initY: v.value[a].middlePoint.y,
-                      offset: 24,
-                      centerX: n.value.width / 2,
-                      centerY: n.value.height / 2
-                    }).x,
-                    cy: s(X)({
-                      initX: v.value[a].middlePoint.x,
-                      initY: v.value[a].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(
-                      z.value
-                    ) || z.value === a ? "" : `url(#blur_${p.value})`,
-                    onClick: (r) => ce(l, a),
-                    onMouseenter: (r) => ie({
-                      datapoint: l,
-                      relativeIndex: a,
-                      seriesIndex: l.seriesIndex,
-                      show: !0
-                    }),
-                    onMouseleave: (r) => fe({
-                      datapoint: l,
-                      seriesIndex: l.seriesIndex
-                    }),
-                    style: L({
-                      transition: Y.value || !e.value.serieToggleAnimation.show ? "none" : `all ${e.value.serieToggleAnimation.durationMs}ms ease-in-out`
-                    })
-                  }, null, 44, jo)) : d("", !0),
-                  e.value.style.chart.layout.labels.dataLabels.oneLine ? Pt((u(), i("text", {
-                    key: 1,
-                    class: "vue-data-ui-datalabel-inline",
-                    "text-anchor": Se(
-                      v.value[a].middlePoint
-                    ),
-                    x: s(X)({
-                      initX: v.value[a].middlePoint.x,
-                      initY: v.value[a].middlePoint.y,
-                      offset: 42,
-                      centerX: n.value.width / 2,
-                      centerY: n.value.height / 2
-                    }).x,
-                    y: s(X)({
-                      initX: v.value[a].middlePoint.x,
-                      initY: v.value[a].middlePoint.y,
-                      offset: 42,
-                      centerX: n.value.width / 2,
-                      centerY: n.value.height / 2
-                    }).y,
-                    style: L({
-                      transition: Y.value || !e.value.serieToggleAnimation.show ? "none" : `all ${e.value.serieToggleAnimation.durationMs}ms ease-in-out`
-                    }),
-                    onClick: (r) => ce(l, a),
-                    onMouseenter: (r) => ie({
-                      datapoint: l,
-                      relativeIndex: a,
-                      seriesIndex: l.seriesIndex,
-                      show: !0
-                    }),
-                    onMouseleave: (r) => fe({
-                      datapoint: l,
-                      seriesIndex: l.seriesIndex
-                    }),
-                    innerHTML: Dl(l, a)
-                  }, null, 44, Ko)), [
-                    [
-                      St,
-                      ee(l) && x.value.dataLabels.show
-                    ]
-                  ]) : (u(), i(P, { key: 2 }, [
-                    ee(l) && x.value.dataLabels.show ? (u(), i("text", {
-                      key: 0,
-                      class: "vue-data-ui-datalabel-value",
-                      "text-anchor": Se(
-                        v.value[a].middlePoint
-                      ),
-                      x: s(X)({
-                        initX: v.value[a].middlePoint.x,
-                        initY: v.value[a].middlePoint.y,
-                        offset: 42,
-                        centerX: n.value.width / 2,
-                        centerY: n.value.height / 2
-                      }).x,
-                      y: s(X)({
-                        initX: v.value[a].middlePoint.x,
-                        initY: v.value[a].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": g.value,
-                      style: L({
-                        transition: Y.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: (r) => ce(l, a),
-                      onMouseenter: (r) => ie({
-                        datapoint: l,
-                        relativeIndex: a,
-                        seriesIndex: l.seriesIndex,
-                        show: !0
-                      }),
-                      onMouseleave: (r) => fe({
-                        datapoint: l,
-                        seriesIndex: l.seriesIndex
-                      })
-                    }, ye(At(l)), 45, Qo)) : d("", !0),
-                    ee(l) && x.value.dataLabels.show && e.value.style.chart.layout.labels.name.show ? (u(), i("text", {
-                      key: 1,
-                      class: "vue-data-ui-datalabel-name",
-                      "text-anchor": Se(
-                        v.value[a].middlePoint
-                      ),
-                      x: s(X)({
-                        initX: v.value[a].middlePoint.x,
-                        initY: v.value[a].middlePoint.y,
-                        offset: 42,
-                        centerX: n.value.width / 2,
-                        centerY: n.value.height / 2
-                      }).x,
-                      y: s(X)({
-                        initX: v.value[a].middlePoint.x,
-                        initY: v.value[a].middlePoint.y,
-                        offset: 42,
-                        centerX: n.value.width / 2,
-                        centerY: n.value.height / 2
-                      }).y + f.value * 1.2,
-                      fill: e.value.style.chart.layout.labels.name.color,
-                      "font-size": f.value,
-                      style: L({
-                        transition: Y.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: (r) => ce(l, a),
-                      onMouseenter: (r) => ie({
-                        datapoint: l,
-                        relativeIndex: a,
-                        seriesIndex: l.seriesIndex,
-                        show: !0
-                      }),
-                      onMouseleave: (r) => fe({
-                        datapoint: l,
-                        seriesIndex: l.seriesIndex
-                      }),
-                      innerHTML: s(wl)({
-                        content: l.name,
-                        fontSize: f.value,
-                        fill: e.value.style.chart.layout.labels.name.color,
-                        x: s(X)({
-                          initX: v.value[a].middlePoint.x,
-                          initY: v.value[a].middlePoint.y,
-                          offset: 42,
-                          centerX: n.value.width / 2,
-                          centerY: n.value.height / 2
-                        }).x,
-                        y: s(X)({
-                          initX: v.value[a].middlePoint.x,
-                          initY: v.value[a].middlePoint.y,
-                          offset: 42,
-                          centerX: n.value.width / 2,
-                          centerY: n.value.height / 2
-                        }).y + f.value * 1.2
-                      })
-                    }, null, 44, Jo)) : d("", !0)
-                  ], 64))
-                ], 64)) : d("", !0)
-              ])),
-              x.value.dataLabels.show && e.value.style.chart.comments.show && l.comment ? (u(), i("g", Zo, [
-                ee(l) && e.value.type === "classic" ? (u(), i("foreignObject", {
-                  key: 0,
-                  x: e.value.style.chart.comments.offsetX + (s(A)(l, !0).anchor === "end" ? s(A)(l).x - e.value.style.chart.comments.width : s(A)(l, !0).anchor === "middle" ? s(A)(l).x - e.value.style.chart.comments.width / 2 : s(A)(l).x),
-                  y: s(we)(l) + 24 + e.value.style.chart.comments.offsetY,
-                  width: e.value.style.chart.comments.width,
-                  height: "200",
-                  style: { overflow: "visible", "pointer-events": "none" }
-                }, [
-                  w("div", null, [
-                    k(t.$slots, "plot-comment", {
-                      plot: {
-                        ...l,
-                        textAlign: s(A)(
-                          l,
-                          !0,
-                          16,
-                          !0
-                        ).anchor,
-                        flexAlign: s(A)(
-                          l,
-                          !0,
-                          16
-                        ).anchor,
-                        isFirstLoad: Y.value
-                      }
-                    }, void 0, !0)
-                  ])
-                ], 8, en)) : d("", !0),
-                ee(l) && e.value.type === "polar" ? (u(), i("foreignObject", {
-                  key: 1,
-                  x: e.value.style.chart.comments.offsetX + (Se(
-                    v.value[a].middlePoint
-                  ) === "end" ? s(X)({
-                    initX: v.value[a].middlePoint.x,
-                    initY: v.value[a].middlePoint.y,
-                    offset: 42,
-                    centerX: n.value.width / 2,
-                    centerY: n.value.height / 2
-                  }).x - e.value.style.chart.comments.width : Se(
-                    v.value[a].middlePoint
-                  ) === "middle" ? s(X)({
-                    initX: v.value[a].middlePoint.x,
-                    initY: v.value[a].middlePoint.y,
-                    offset: 42,
-                    centerX: n.value.width / 2,
-                    centerY: n.value.height / 2
-                  }).x - e.value.style.chart.comments.width / 2 : s(X)({
-                    initX: v.value[a].middlePoint.x,
-                    initY: v.value[a].middlePoint.y,
-                    offset: 42,
-                    centerX: n.value.width / 2,
-                    centerY: n.value.height / 2
-                  }).x),
-                  y: Ml(v.value[a]) + e.value.style.chart.comments.offsetY,
-                  width: e.value.style.chart.comments.width,
-                  height: "200",
-                  style: L({
-                    transition: Y.value || !e.value.serieToggleAnimation.show ? "none" : `all ${e.value.serieToggleAnimation.durationMs}ms ease-in-out`,
-                    overflow: "visible",
-                    pointerEvents: "none"
-                  })
-                }, [
-                  w("div", null, [
-                    k(t.$slots, "plot-comment", {
-                      plot: {
-                        ...l,
-                        textAlign: Se(
-                          v.value[a].middlePoint
-                        ),
-                        flexAlign: Se(
-                          v.value[a].middlePoint
-                        ),
-                        isFirstLoad: Y.value
-                      }
-                    }, void 0, !0)
-                  ])
-                ], 12, tn)) : d("", !0)
-              ])) : d("", !0)
-            ], 10, Ro))), 128)),
-            k(t.$slots, "svg", {
-              svg: {
-                ...n.value,
-                isPrintingImg: s(Ge) | s(xt) | Ve.value,
-                isPrintingSvg: Ee.value
-              }
-            }, void 0, !0)
-          ], 512)
-        ], 46, Ha)),
-        t.$slots.hint ? (u(), i("div", ln, [
-          k(t.$slots, "hint", W(j({
-            hint: e.value.a11y.translations.keyboardNavigation,
-            isVisible: h.value
-          })), void 0, !0)
-        ])) : d("", !0)
-      ]),
-      t.$slots.watermark ? (u(), i("div", an, [
-        k(t.$slots, "watermark", W(j({
-          isPrinting: s(Ge) || s(xt) || Ve.value || Ee.value
-        })), void 0, !0)
-      ])) : d("", !0),
-      w("div", {
-        id: `legend-bottom-${p.value}`
-      }, null, 8, on),
-      bt.value && (e.value.style.chart.legend.show || t.$slots.legend) ? (u(), ge(na, {
-        key: 6,
-        to: e.value.style.chart.legend.position === "top" ? `#legend-top-${p.value}` : `#legend-bottom-${p.value}`
-      }, [
-        w("div", {
-          ref_key: "chartLegend",
-          ref: yt
-        }, [
-          k(t.$slots, "legend", { legend: nt.value }, () => [
-            e.value.style.chart.legend.show ? (u(), ge(Ya, {
-              key: `legend_${mt.value}`,
-              legendSet: nt.value,
-              config: Pl.value,
-              onClickMarker: o[3] || (o[3] = ({ i: l }) => Ct(l)),
-              isCursorPointer: xe.value
-            }, Wt({
-              item: _(({ legend: l, index: a }) => [
-                w("div", {
-                  style: L(`opacity:${N.value.includes(a) ? 0.5 : 1}`),
-                  onClick: (r) => l.segregate()
-                }, ye(l.display), 13, nn)
-              ]),
-              legendToggle: _(() => [
-                nt.value.length > 2 && e.value.style.chart.legend.selectAllToggle.show && !s(ue) ? (u(), ge(Ba, {
-                  key: 0,
-                  backgroundColor: e.value.style.chart.legend.selectAllToggle.backgroundColor,
-                  color: e.value.style.chart.legend.selectAllToggle.color,
-                  fontSize: e.value.style.chart.legend.fontSize,
-                  checked: N.value.length > 0,
-                  isCursorPointer: xe.value,
-                  onToggle: Cl
-                }, null, 8, ["backgroundColor", "color", "fontSize", "checked", "isCursorPointer"])) : d("", !0)
-              ]),
-              _: 2
-            }, [
-              t.$slots.pattern ? {
-                name: "legend-pattern",
-                fn: _(({ legend: l, index: a }) => [
-                  Tt(Fa, {
-                    shape: l.shape,
-                    radius: 30,
-                    stroke: "none",
-                    plot: { x: 30, y: 30 },
-                    fill: `url(#pattern_${p.value}_${a})`
-                  }, null, 8, ["shape", "fill"])
-                ]),
-                key: "0"
-              } : void 0
-            ]), 1032, ["legendSet", "config", "isCursorPointer"])) : d("", !0)
-          ], !0)
-        ], 512)
-      ], 8, ["to"])) : d("", !0),
-      t.$slots.source ? (u(), i("div", {
-        key: 7,
-        ref_key: "source",
-        ref: Ze,
-        dir: "auto"
-      }, [
-        k(t.$slots, "source", {}, void 0, !0)
-      ], 512)) : d("", !0),
-      t.$slots.hollow ? (u(), i("div", sn, [
-        k(t.$slots, "hollow", W(j({
-          total: te.value,
-          average: Vt.value,
-          dataset: U.value
-        })), void 0, !0)
-      ])) : d("", !0),
-      Tt(s(Ke), {
-        teleportTo: e.value.style.chart.tooltip.teleportTo,
-        show: x.value.showTooltip && oe.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: M.value,
-        content: se.value,
-        isCustom: st.value,
-        isFullscreen: Xe.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,
-        isA11yMode: G.value === "keyboard",
-        a11yPosition: wt.value
-      }, {
-        "tooltip-before": _(() => [
-          k(t.$slots, "tooltip-before", W(j({ ..._t.value })), void 0, !0)
-        ]),
-        tooltip: _(() => [
-          k(t.$slots, "tooltip", W(j({ ..._t.value })), void 0, !0)
-        ]),
-        "tooltip-after": _(() => [
-          k(t.$slots, "tooltip-after", W(j({ ..._t.value })), void 0, !0)
-        ]),
-        _: 3
-      }, 8, ["teleportTo", "show", "backgroundColor", "color", "fontSize", "borderRadius", "borderColor", "borderWidth", "backgroundOpacity", "position", "offsetY", "parent", "content", "isCustom", "isFullscreen", "smooth", "backdropFilter", "smoothForce", "smoothSnapThreshold", "isA11yMode", "a11yPosition"]),
-      B.value && e.value.userOptions.buttons.table ? (u(), ge(sa(rt.value.component), jt({ key: 9 }, rt.value.props, {
-        ref_key: "tableUnit",
-        ref: ze,
-        onClose: rl
-      }), Wt({
-        content: _(() => [
-          (u(), ge(s(dt), {
-            key: `table_${pt.value}`,
-            colNames: We.value.colNames,
-            head: We.value.head,
-            body: We.value.body,
-            config: We.value.config,
-            title: e.value.table.useDialog ? "" : rt.value.title,
-            withCloseButton: !e.value.table.useDialog,
-            isCursorPointer: xe.value,
-            onClose: rl
-          }, {
-            th: _(({ th: l }) => [
-              w("div", {
-                innerHTML: l,
-                style: { display: "flex", "align-items": "center" }
-              }, null, 8, un)
-            ]),
-            td: _(({ td: l }) => [
-              hl(ye(l.name ? l.name : isNaN(Number(l)) ? l.includes("%") ? l : s(pe)(
-                e.value.style.chart.layout.labels.percentage.formatter,
-                l,
-                s(ve)({
-                  v: l,
-                  s: "%",
-                  r: e.value.style.chart.layout.labels.percentage.rounding
-                })
-              ) : s(pe)(
-                e.value.style.chart.layout.labels.value.formatter,
-                l,
-                s(ve)({
-                  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", "isCursorPointer"]))
-        ]),
-        _: 2
-      }, [
-        e.value.table.useDialog ? {
-          name: "title",
-          fn: _(() => [
-            hl(ye(rt.value.title), 1)
-          ]),
-          key: "0"
-        } : void 0,
-        e.value.table.useDialog ? {
-          name: "actions",
-          fn: _(() => [
-            w("button", {
-              tabindex: "0",
-              class: "vue-ui-user-options-button",
-              onClick: o[4] || (o[4] = (l) => Et(e.value.userOptions.callbacks.csv)),
-              style: L({ cursor: xe.value ? "pointer" : "default" })
-            }, [
-              Tt(s(vt), {
-                name: "fileCsv",
-                stroke: rt.value.props.color
-              }, null, 8, ["stroke"])
-            ], 4)
-          ]),
-          key: "1"
-        } : void 0
-      ]), 1040)) : d("", !0),
-      k(t.$slots, "skeleton", {}, () => [
-        s(ue) ? (u(), ge(Ta, { key: 0 })) : d("", !0)
-      ], !0)
-    ], 46, Ra));
-  }
-}, Ln = /* @__PURE__ */ Xa(rn, [["__scopeId", "data-v-6fd375e6"]]);
-export {
-  Ln as default
-};