vue-data-ui 3.15.12 → 3.16.1

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

@@ -0,0 +1,2229 @@
+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 K, guardReactiveProps as Q, createSlots as Wt, createVNode as At, Fragment as P, renderList as J, mergeProps as jt, withDirectives as Tt, vShow as Pt, 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 St, 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-DBptbyyI.js";
+import { f as wa, b as ka } from "./labelUtils-CqTHa20R.js";
+import { t as xa, u as $a } from "./useResponsive-DfdjqQps.js";
+import { u as Ca } from "./useConfig-DO94Aj5s.js";
+import { u as _a } from "./usePrinter-CEpYU3r5.js";
+import { u as Aa, B as Ta } from "./BaseScanner-BhhkKVoj.js";
+import { u as Pa } from "./useSvgExport-ByUukOZt.js";
+import { u as Qt } from "./useNestedProp-Bf5XFbs8.js";
+import { u as Sa } from "./useThemeCheck-D1ZYXUwG.js";
+import { u as La } from "./useUserOptionState-BIvW1Kz7.js";
+import { u as Ma } from "./useChartAccessibility-9icAAmYg.js";
+import Ia from "./img-LXxMLmCg.js";
+import { _ as Fa } from "./Shape-BKRUOeKk.js";
+import za from "./Title-BeMKE1cj.js";
+import Oa from "./vue_ui_donut-CA4dgV8J.js";
+import Ya from "./Legend-CS7Xo5LK.js";
+import { A as Da } from "./A11yDataTable-KcVAX2cP.js";
+import { B as Ba } from "./BaseLegendToggle-BQVIawmA.js";
+import { _ as Xa } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+function Na(it) {
+  const {
+    FINAL_CONFIG: ct,
+    noGhostDonut: Lt,
+    svg: Ke,
+    padding: vt,
+    labels_inline_fontSize: Mt,
+    minSize: dt,
+    findArcMidpoint: It,
+    calcMarkerOffsetX: Ft,
+    calcMarkerOffsetY: zt,
+    animatingIndex: Ot,
+    segregated: Yt,
+    isSmallArc: Dt
+  } = it;
+  return { smallArcLayoutsClassic: m(() => {
+    if (ct.value.type !== "classic") return {};
+    const Qe = {}, E = Lt.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 = Mt.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, W = Ae + re, kt = Te + Z, Xt = (W - B) * (W - B) + (kt - M) * (kt - M), He = Ae - re, Ge = Te - Z;
+        (He - B) * (He - B) + (Ge - M) * (Ge - M) > Xt && (re = -re, Z = -Z);
+        const at = 0.78, $t = h + F * at, Nt = 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: Nt + 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), Bt = {
+        x: f - I * Math.min(ue, Math.abs(Ue - f) * 0.75),
+        y: C
+      }, Y = e(Ye), Ce = e(Bt);
+      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 } = It(h.path), I = Ft(h).x, F = zt(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 Ot.value === f || Yt.value.includes(f) ? !1 : Dt(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: Lt }) {
+    const Ke = Me(() => import("./Tooltip-Bf-kM3_A.js")), vt = Me(() => import("./BaseIcon-Cb3zzG6s.js")), Mt = Me(() => import("./vue-ui-accordion-nvggWcGN.js")), dt = Me(() => import("./DataTable-DT2kIdQ6.js")), It = Me(() => import("./PenAndPaper-Ct3qJ4lA.js")), Ft = Me(() => import("./UserOptions-rW2fRf3V.js")), zt = Me(() => import("./PackageVersion-DPO-OOVI.js")), Ot = Me(() => import("./BaseDraggableDialog-CIb-iD9g.js")), { vue_ui_donut: Yt } = Ca(), { isThemeValid: Dt, 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 = W.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: Yt
+      });
+      let o = {};
+      const l = t.theme;
+      if (!l)
+        o = t;
+      else if (!Dt.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: Bt } = 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 === Bt, 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: W } = Ma({ config: e.value.style.chart.title });
+    function kt() {
+      Ae(!0);
+    }
+    function Xt() {
+      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
+    }), Nt = 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 = Lt, 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 j = Ie(U.value);
+    je(() => U.value, (t) => {
+      j.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 = j.value.find((r, c) => c === t).value;
+      if (N.value.includes(t)) {
+        let c = function() {
+          j.value = j.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) => {
+              j.value = j.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), j.value = j.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, $) => {
+              j.value = j.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 j.value.forEach((t) => {
+          if ([null, void 0].includes(t.values))
+            return {
+              ...t,
+              values: []
+            };
+        }), j.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);
+    }), Rt = m(() => te.value / be.value.length);
+    function ll(t) {
+      return Pe.value ? t.proportion * 100 : t.value / te.value * 100;
+    }
+    const Vt = 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, Vt.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 = _t(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 = _t(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 _t(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();
+      W.value && W.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 ? Ot : Mt,
+        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: W,
+      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: j.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: j.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 (!W.value || ut.value || document.activeElement !== W.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) || !W.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 = W.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: Xt
+    }, [
+      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(W) ? (u(), ge(s(It), {
+        key: 1,
+        color: e.value.style.chart.color,
+        backgroundColor: e.value.style.chart.backgroundColor,
+        active: ut.value,
+        svgRef: s(W),
+        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", K(Q({ color: l })), void 0, !0)
+        ]),
+        "annotator-action-draw": _(({ mode: l }) => [
+          k(t.$slots, "annotator-action-draw", K(Q({ mode: l })), void 0, !0)
+        ]),
+        "annotator-action-undo": _(({ disabled: l }) => [
+          k(t.$slots, "annotator-action-undo", K(Q({ disabled: l })), void 0, !0)
+        ]),
+        "annotator-action-redo": _(({ disabled: l }) => [
+          k(t.$slots, "annotator-action-redo", K(Q({ disabled: l })), void 0, !0)
+        ]),
+        "annotator-action-delete": _(({ disabled: l }) => [
+          k(t.$slots, "annotator-action-delete", K(Q({ disabled: l })), void 0, !0)
+        ]),
+        _: 3
+      }, 8, ["color", "backgroundColor", "active", "svgRef", "isCursorPointer"])) : d("", !0),
+      k(t.$slots, "userConfig", {}, void 0, !0),
+      Nt.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(Ft), {
+        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", K(Q({ 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", K(Q({ 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", K(Q({ toggleAnnotator: l, isAnnotator: a })), void 0, !0)
+          ]),
+          key: "9"
+        } : void 0,
+        t.$slots.optionAltCopy ? {
+          name: "optionAltCopy",
+          fn: _(({ altCopy: l }) => [
+            k(t.$slots, "optionAltCopy", K(Q({ 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: W,
+          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"
+          }, [
+            At(s(zt)),
+            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(St)(e.value.style.chart.backgroundColor, 0),
+                  "stop-opacity": "0"
+                }, null, 8, ja),
+                w("stop", {
+                  offset: `${(1 - he.value / O.value) * 100}%`,
+                  "stop-color": s(St)("#FFFFFF", 0),
+                  "stop-opacity": "0"
+                }, null, 8, Ka),
+                w("stop", {
+                  offset: `${(1 - he.value / O.value / 2) * 100}%`,
+                  "stop-color": s(St)("#FFFFFF", e.value.style.chart.gradientIntensity)
+                }, null, 8, Qa),
+                w("stop", {
+                  offset: "100%",
+                  "stop-color": s(St)(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)(Rt.value),
+                s(ve)({
+                  p: e.value.style.chart.layout.labels.hollow.average.value.prefix,
+                  v: s(bl)(Rt.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] ? Tt((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)), [
+                    [Pt, ee(l) && x.value.dataLabels.show]
+                  ]) : (u(), i(P, { key: 2 }, [
+                    Tt(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(_t(l)), 45, qo), [
+                      [Pt, ee(l) && x.value.dataLabels.show]
+                    ]),
+                    Tt(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), [
+                      [Pt, 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 ? Tt((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)), [
+                    [Pt, 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(_t(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", K(Q({ 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", K(Q({ 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 ? (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
+        }, [
+          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 }) => [
+                At(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),
+          k(t.$slots, "legend", { legend: nt.value }, void 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", K(Q({
+          total: te.value,
+          average: Rt.value,
+          dataset: U.value
+        })), void 0, !0)
+      ])) : d("", !0),
+      At(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", K(Q({ ...Vt.value })), void 0, !0)
+        ]),
+        "tooltip-after": _(() => [
+          k(t.$slots, "tooltip-after", K(Q({ ...Vt.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" })
+            }, [
+              At(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-af8588d0"]]);
+export {
+  Ln as default
+};