vue-data-ui 3.5.2 → 3.7.0

package/dist/vue-ui-nested-donuts-B5OpvmJ9.js

@@ -0,0 +1,1454 @@
+import { defineAsyncComponent as z, computed as k, ref as v, toRefs as Cl, watch as ae, onMounted as kl, shallowRef as kt, onBeforeUnmount as wl, createElementBlock as r, openBlock as n, unref as i, normalizeStyle as he, normalizeClass as M, createBlock as U, createCommentVNode as L, createElementVNode as g, createVNode as Pe, withCtx as p, renderSlot as y, normalizeProps as O, guardReactiveProps as N, createSlots as wt, Fragment as x, renderList as F, toDisplayString as P, withDirectives as At, vShow as $t, Teleport as Al, resolveDynamicComponent as $l, mergeProps as Ll, createTextVNode as Lt, nextTick as _t } from "vue";
+import { c as _l, t as xl, i as Fl, p as Ve, W as Be, o as Sl, g as J, j as Tl, a5 as R, l as Dl, Z as ze, a as oe, d as D, X as Ol, s as Nl, S as xt, $ as Me, a0 as K, x as Ft, u as Il, q as El, R as Pl, a4 as St, M as Ue } from "./lib-C5BH09_g.js";
+import { t as Vl, u as Bl } from "./useResponsive-DfdjqQps.js";
+import { u as zl, a as Re } from "./useNestedProp-CWo6bftQ.js";
+import { u as Ml, B as Ul } from "./BaseScanner-BgWxam9d.js";
+import { u as Rl } from "./usePrinter-DCJzEiS8.js";
+import { u as Gl } from "./useSvgExport-DrjCWun4.js";
+import { u as Yl } from "./useThemeCheck-DGJ31Vi5.js";
+import { u as Wl } from "./useUserOptionState-BIvW1Kz7.js";
+import { u as Xl } from "./useChartAccessibility-9icAAmYg.js";
+import ql from "./img-DUzJeMlr.js";
+import Hl from "./Title-DfFUb9hd.js";
+import jl from "./Legend-Web3GjlR.js";
+import { _ as Zl } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const Tt = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", layout: { donut: { emptyFill: "#3A3A3A" }, labels: { dataLabels: { color: "#CCCCCC" } } }, legend: { backgroundColor: "#1A1A1A", color: "#CCCCCC" }, title: { color: "#CCCCCC", subtitle: { color: "#757575" } }, tooltip: { backgroundColor: "#1A1A1A", backgroundOpacity: 70, color: "#CCCCCC", borderColor: "#5A5A5A" } } }, table: { th: { backgroundColor: "#1A1A1A", color: "#CCCCCC" }, td: { backgroundColor: "#1A1A1A", color: "#CCCCCC" } } }, Dt = { style: { chart: { backgroundColor: "#FFF8E1", color: "#424242", layout: { labels: { dataLabels: { color: "#424242" } } }, legend: { backgroundColor: "#FFF8E1", color: "#424242" }, title: { color: "#424242", subtitle: { color: "#757575" } }, tooltip: { backgroundColor: "#FFECB3", backgroundOpacity: 30, color: "#424242", borderColor: "#FF8A65" } } }, table: { th: { backgroundColor: "#FFF8E1", color: "#424242" }, td: { backgroundColor: "#FFF8E1", color: "#424242" } } }, Ot = { style: { chart: { backgroundColor: "#1E1E1E", color: "#BDBDBD", layout: { labels: { dataLabels: { color: "#BDBDBD" } } }, legend: { backgroundColor: "#1E1E1E", color: "#BDBDBD" }, title: { color: "#FFF8E1", subtitle: { color: "#BDBDBD" } }, tooltip: { backgroundColor: "#1E1E1E", backgroundOpacity: 30, color: "#FFF8E1", borderColor: "#FF8A65" } } }, table: { th: { backgroundColor: "#1E1E1E", color: "#BDBDBD" }, td: { backgroundColor: "#1E1E1E", color: "#BDBDBD" } } }, Nt = { style: { chart: { backgroundColor: "#1A1A1A", color: "#99AA99", layout: { labels: { dataLabels: { color: "#AACCAA" } } }, legend: { backgroundColor: "#1A1A1A", color: "#99AA99" }, title: { color: "#66CC66", subtitle: { color: "#99AA99" } }, tooltip: { backgroundColor: "#2A2F2A", color: "#AACCAA", borderColor: "#66CC66" } } }, table: { th: { backgroundColor: "#1A1A1A", color: "#99AA99" }, td: { backgroundColor: "#1A1A1A", color: "#AACCAA" } } }, It = { style: { chart: { backgroundColor: "#fbfafa", color: "#8A9892", layout: { labels: { dataLabels: { color: "#A0AC94" } } }, legend: { backgroundColor: "#fbfafa", color: "#99AA99" }, title: { color: "#8A9892", subtitle: { color: "#99AA99" } }, tooltip: { backgroundColor: "#fbfafa", color: "#8A9892" } } }, table: { th: { backgroundColor: "#fbfafa", color: "#8F837A" }, td: { backgroundColor: "#fbfafa", color: "#8F837A" } } }, Et = { style: { chart: { backgroundColor: "#f6f6fb", color: "#50606C", layout: { labels: { dataLabels: { color: "#61747E" } } }, legend: { backgroundColor: "#f6f6fb", color: "#61747E" }, title: { color: "#50606C", subtitle: { color: "#718890" } }, tooltip: { backgroundColor: "#f6f6fb", color: "#50606C" } } }, table: { th: { backgroundColor: "#f6f6fb", color: "#50606C" }, td: { backgroundColor: "#f6f6fb", color: "#50606C" } } }, Pt = {
+  default: {},
+  dark: Tt,
+  celebration: Dt,
+  celebrationNight: Ot,
+  hack: Nt,
+  zen: It,
+  concrete: Et
+}, Ya = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  celebration: Dt,
+  celebrationNight: Ot,
+  concrete: Et,
+  dark: Tt,
+  default: Pt,
+  hack: Nt,
+  zen: It
+}, Symbol.toStringTag, { value: "Module" })), Jl = ["id"], Kl = ["id"], Ql = ["xmlns", "viewBox"], ea = ["width", "height"], ta = ["id"], la = ["offset", "stop-color"], aa = ["offset", "stop-opacity"], oa = ["id"], sa = ["id"], na = ["id"], ua = ["flood-color"], ra = ["id", "d"], ia = ["d", "fill", "stroke", "stroke-width", "filter"], da = ["d", "fill", "stroke", "stroke-width"], ca = { key: 1 }, va = ["d", "fill"], ha = { key: 2 }, fa = ["font-size", "font-weight", "fill", "dy"], ba = ["href"], ga = ["x", "y", "font-size", "font-weight", "fill"], pa = { key: 3 }, ya = ["filter"], ma = ["opacity", "text-anchor", "x", "y", "fill", "font-size", "font-weight"], Ca = ["opacity", "text-anchor", "x", "y", "fill", "font-size", "font-weight"], ka = ["text-anchor", "x", "y", "fill", "font-size", "font-weight"], wa = ["d", "fill", "onMouseenter", "onClick", "onMouseleave"], Aa = {
+  key: 4,
+  class: "vue-data-ui-watermark"
+}, $a = ["id"], La = {
+  key: 0,
+  class: "vue-ui-nested-donuts-legend-title"
+}, _a = ["onClick"], xa = ["innerHTML"], Fa = {
+  __name: "vue-ui-nested-donuts",
+  props: {
+    config: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    dataset: {
+      type: Array,
+      default() {
+        return [];
+      }
+    }
+  },
+  emits: ["selectLegend", "selectDatapoint"],
+  setup(Vt, { expose: Bt, emit: zt }) {
+    const Mt = z(() => import("./Tooltip-WD0Ros6G.js")), Ut = z(() => import("./BaseIcon-CofSxalQ.js")), Rt = z(() => import("./vue-ui-accordion-DSdZUn2C.js")), Gt = z(() => import("./DataTable-CHaOCmsE.js")), Yt = z(() => import("./UserOptions-B3I-s3Lw.js")), Wt = z(() => import("./PenAndPaper-HCZQTkqi.js")), Xt = z(() => import("./PackageVersion-Bq_mtsqr.js")), qt = z(() => import("./BaseDraggableDialog-CRF94NJQ.js")), { vue_ui_nested_donuts: Ht } = zl(), { isThemeValid: jt, warnInvalidTheme: Zt } = Yl(), w = Vt, fe = k({
+      get() {
+        return !!w.dataset && w.dataset.length;
+      },
+      set(t) {
+        return t;
+      }
+    }), b = v(_l()), be = v(!1), ge = v(""), pe = v(null), Ge = v(0), I = v(null), Ye = v(null), ye = v(null), We = v(null), Xe = v(null), qe = v(0), He = v(0), je = v(0), G = v(!0), Y = v([]), Q = v([]), Ze = v(!1), ee = v(null), me = v(null), W = v(!1);
+    function Je(t) {
+      W.value = t, Ge.value += 1;
+    }
+    const e = v(Ae()), Ke = {
+      name: "",
+      series: [
+        {
+          name: "",
+          values: [3],
+          color: "#BABABA"
+        },
+        {
+          name: "",
+          values: [2],
+          color: "#AAAAAA"
+        },
+        {
+          name: "",
+          values: [1],
+          color: "#CACACA"
+        }
+      ]
+    }, { loading: Ce, FINAL_DATASET: X, manualLoading: ke } = Ml({
+      ...Cl(w),
+      FINAL_CONFIG: e,
+      prepareConfig: Ae,
+      callback: () => {
+        Promise.resolve().then(async () => {
+          await lt();
+        });
+      },
+      skeletonDataset: [Ke, Ke],
+      skeletonConfig: xl({
+        defaultConfig: e.value,
+        userConfig: {
+          useCssAnimation: !1,
+          table: { show: !1 },
+          startAnimation: { show: !1 },
+          userOptions: { show: !1 },
+          style: {
+            chart: {
+              backgroundColor: "#99999930",
+              layout: {
+                labels: {
+                  dataLabels: { show: !1 }
+                }
+              },
+              legend: { backgroundColor: "transparent", showValue: !1, showPercentage: !1 },
+              title: {
+                color: "#1A1A1A",
+                subtitle: {
+                  color: "#5A5A5A"
+                }
+              }
+            }
+          }
+        }
+      })
+    }), { userOptionsVisible: we, setUserOptionsVisibility: Qe, keepUserOptionState: et } = Wl({ config: e.value }), { svgRef: te } = Xl({
+      config: e.value.style.chart.title
+    });
+    function Ae() {
+      const t = Re({
+        userConfig: w.config,
+        defaultConfig: Ht
+      });
+      let s = {};
+      const a = t.theme;
+      if (a)
+        if (!jt.value(t))
+          Zt(t), s = t;
+        else {
+          const o = Re({
+            userConfig: Pt[a] || w.config,
+            defaultConfig: t
+          });
+          s = {
+            ...Re({
+              userConfig: w.config,
+              defaultConfig: o
+            }),
+            customPalette: t.customPalette.length ? t.customPalette : Fl[a] || Ve
+          };
+        }
+      else
+        s = t;
+      return w.config && Be(w.config, "events.datapointEnter") ? s.events.datapointEnter = w.config.events.datapointEnter : s.events.datapointEnter = null, w.config && Be(w.config, "events.datapointLeave") ? s.events.datapointLeave = w.config.events.datapointLeave : s.events.datapointLeave = null, w.config && Be(w.config, "events.datapointClick") ? s.events.datapointClick = w.config.events.datapointClick : s.events.datapointClick = null, s;
+    }
+    ae(
+      () => w.config,
+      (t) => {
+        Ce.value || (e.value = Ae()), we.value = !e.value.userOptions.showOnChartHover, at(), qe.value += 1, He.value += 1, je.value += 1, _.value.dataLabels.show = e.value.style.chart.layout.labels.dataLabels.show, _.value.showTable = e.value.table.show, _.value.showTooltip = e.value.style.chart.tooltip.show, h.value.width = e.value.style.chart.width, h.value.height = e.value.style.chart.height;
+      },
+      { deep: !0 }
+    );
+    const tt = k(() => {
+      const { top: t, right: s, bottom: a, left: o } = e.value.style.chart.padding;
+      return {
+        css: `padding:${t}px ${s}px ${a}px ${o}px`,
+        top: t,
+        right: s,
+        bottom: a,
+        left: o
+      };
+    });
+    function Jt(t, s = 1e3, a = 50) {
+      return new Promise((o) => {
+        const l = t.length;
+        Y.value = Array(l).fill(0), Q.value = [];
+        let u = 0;
+        t.forEach((c, f) => {
+          setTimeout(() => {
+            const A = performance.now();
+            function d(m) {
+              const S = Math.min((m - A) / s, 1), Se = St(S), Te = c * Se;
+              Y.value[f] = Te, Y.value = [...Y.value];
+              const ce = [];
+              let De = 0;
+              w.dataset.forEach((ve, Oe) => {
+                const gl = Ue(ve.series.reduce(
+                  (Ie, Ee) => Ie + Ue(R(Ee.values).reduce((yl, ml) => yl + ml, 0)),
+                  0
+                )), pl = Ue(Y.value.slice(De, De + ve.series.length).reduce((Ie, Ee) => Ie + Ee, 0)), Ne = gl - pl;
+                Ne > Number.MIN_VALUE && ce.push({
+                  name: "__ghost__",
+                  arcOf: ve.name,
+                  arcOfId: `${b.value}_${Oe}`,
+                  id: `ghost_${b.value}_${Oe}`,
+                  seriesIndex: -1,
+                  datasetIndex: Oe,
+                  color: "transparent",
+                  value: Ne,
+                  fullValue: Ne,
+                  absoluteValues: [],
+                  ghost: !0
+                }), De += ve.series.length;
+              }), Q.value = ce, S < 1 ? requestAnimationFrame(d) : (u += 1, u === l && o());
+            }
+            requestAnimationFrame(d);
+          }, f * a);
+        });
+      });
+    }
+    async function lt() {
+      if (e.value.startAnimation?.show) {
+        const s = X.value.flatMap((a) => a.series).map(
+          (a) => R(a.values).reduce((o, l) => o + l, 0)
+        );
+        Y.value = s.map(() => 0), G.value = !0, Q.value = X.value.map((a, o) => {
+          const l = a.series.reduce(
+            (u, c) => u + R(c.values).reduce((f, A) => f + A, 0),
+            0
+          );
+          return {
+            name: "__ghost__",
+            arcOf: a.name,
+            arcOfId: `${b.value}_${o}`,
+            id: `ghost_${b.value}_${o}`,
+            seriesIndex: -1,
+            datasetIndex: o,
+            color: "transparent",
+            value: l,
+            fullValue: l,
+            absoluteValues: [],
+            ghost: !0
+          };
+        }), await _t(), Jt(
+          s,
+          e.value.startAnimation.durationMs,
+          e.value.startAnimation.staggerMs
+        ).then(() => {
+          G.value = !1, Q.value = [];
+        });
+      } else
+        G.value = !1;
+    }
+    kl(async () => {
+      Ze.value = !0, at(), await lt();
+    });
+    const V = kt(null), H = kt(null), j = k(() => !!e.value.debug);
+    function at() {
+      if (Sl(w.dataset) ? (J({
+        componentName: "VueUiNestedDonuts",
+        type: "dataset",
+        debug: j.value
+      }), fe.value = !1, ke.value = !0) : ke.value = e.value.loading, e.value.responsive) {
+        const t = Vl(() => {
+          const { width: s, height: a } = Bl({
+            chart: I.value,
+            title: e.value.style.chart.title.text ? Ye.value : null,
+            legend: e.value.style.chart.legend.show ? ye.value : null,
+            source: We.value,
+            noTitle: Xe.value,
+            padding: tt.value
+          });
+          requestAnimationFrame(() => {
+            h.value.width = s, h.value.height = a;
+          });
+        });
+        V.value && (H.value && V.value.unobserve(H.value), V.value.disconnect()), V.value = new ResizeObserver(t), H.value = I.value.parentNode, V.value.observe(H.value);
+      }
+    }
+    wl(() => {
+      V.value && (H.value && V.value.unobserve(H.value), V.value.disconnect());
+    });
+    const { isPrinting: ot, isImaging: st, generatePdf: nt, generateImage: ut } = Rl({
+      elementId: `nested_donuts_${b.value}`,
+      fileName: e.value.style.chart.title.text || "vue-ui-nested-donuts",
+      options: e.value.userOptions.print
+    }), Kt = k(() => e.value.userOptions.show && !e.value.style.chart.title.text), Qt = k(() => Tl(e.value.customPalette)), _ = v({
+      dataLabels: {
+        show: e.value.style.chart.layout.labels.dataLabels.show
+      },
+      showTable: e.value.table.show,
+      showTooltip: e.value.style.chart.tooltip.show
+    });
+    ae(e, () => {
+      _.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 h = v({
+      width: e.value.style.chart.width,
+      height: e.value.style.chart.height
+    }), rt = zt;
+    function el({ datapoint: t, index: s, seriesIndex: a }) {
+      e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: t, seriesIndex: a }), rt("selectDatapoint", { datapoint: t, index: s });
+    }
+    function it({
+      from: t,
+      to: s,
+      duration: a,
+      onUpdate: o,
+      onDone: l,
+      easing: u = St
+    }) {
+      const c = performance.now();
+      function f(A) {
+        const d = Math.min((A - c) / a, 1), m = u(d), S = t + (s - t) * m;
+        o(S, d), d < 1 ? requestAnimationFrame(f) : (o(s, 1), l && l());
+      }
+      requestAnimationFrame(f);
+    }
+    const C = v([]), T = k(() => {
+      Ce.value, X.value.forEach((s, a) => {
+        [null, void 0].includes(s.name) && J({
+          componentName: "VueUiNestedDonuts",
+          type: "datasetSerieAttribute",
+          property: "name",
+          index: a,
+          debug: j.value
+        }), [null, void 0].includes(s.series) ? J({
+          componentName: "VueUiNestedDonuts",
+          type: "datasetSerieAttribute",
+          property: "series",
+          index: a,
+          debug: j.value
+        }) : s.series.length === 0 ? J({
+          componentName: "VueUiNestedDonuts",
+          type: "datasetAttributeEmpty",
+          property: `series at index ${a}`,
+          debug: j.value
+        }) : s.series.forEach((o, l) => {
+          [null, void 0].includes(o.name) && J({
+            componentName: "VueUiNestedDonuts",
+            type: "datasetSerieAttribute",
+            property: "name",
+            index: l,
+            key: "serie",
+            debug: j.value
+          }), [null, void 0].includes(o.values) && J({
+            componentName: "VueUiNestedDonuts",
+            type: "datasetSerieAttribute",
+            property: "values",
+            index: l,
+            key: "serie",
+            debug: j.value
+          });
+        });
+      });
+      let t = 0;
+      return X.value.map((s, a) => ({
+        ...s,
+        total: s.series.filter((o) => !C.value.includes(o.id)).map((o) => R(o.values).reduce((l, u) => l + u, 0)).reduce((o, l) => o + l, 0),
+        datasetIndex: a,
+        id: `${b.value}_${a}`,
+        series: s.series.map((o, l) => {
+          const u = R(o.values).reduce((c, f) => c + f, 0);
+          return {
+            name: o.name,
+            arcOf: s.name,
+            arcOfId: `${b.value}_${a}`,
+            id: `${b.value}_${a}_${l}`,
+            seriesIndex: l,
+            datasetIndex: a,
+            color: Dl(o.color) || Qt.value[l] || Ve[l % Ve.length],
+            value: G.value ? Y.value[t++] ?? 0 : u,
+            absoluteValues: o.values || []
+          };
+        })
+      }));
+    });
+    ae(() => w.dataset, (t) => {
+      Array.isArray(t) && t.length > 0 && (ke.value = !1);
+    }, { immediate: !0 });
+    const E = k(() => Math.min(h.value.height, h.value.width) * (e.value.style.chart.layout.donut.strokeWidth / 512)), dt = k(() => [...T.value].map((t, s) => {
+      const a = t.series.filter((o) => !C.value.includes(o.id)).map((o) => o.value).reduce((o, l) => o + l, 0);
+      return {
+        ...t,
+        total: a,
+        series: t.series.filter((o) => !C.value.includes(o.id)).map((o) => ({
+          ...o,
+          proportion: o.value / a
+        }))
+      };
+    }));
+    function tl(t, s, a) {
+      let o = 0;
+      for (let l = 0; l < t.length; l += 1)
+        a.includes(t[l]) && (o += 1);
+      return o < s;
+    }
+    const $ = v(dt.value);
+    ae(
+      () => dt.value,
+      (t) => $.value = t
+    );
+    function q(t) {
+      rt("selectLegend", t);
+      const s = w.dataset.flatMap(
+        (d, m) => d.series.map((S, Se) => ({
+          value: R(S.values).reduce((Te, ce) => Te + ce, 0),
+          id: `${b.value}_${m}_${Se}`,
+          arcOfId: `${b.value}_${m}`
+        }))
+      ).find((d) => d.id === t.id);
+      if (!s) return;
+      const a = T.value.flatMap((d) => d.series).find((d) => d.id === t.id)?.value ?? 0, o = $.value.flatMap((d) => d.series).find((d) => d.id === t.id);
+      let u = o ? o.value : 0;
+      const c = T.value.find(
+        (d) => d.id === s.arcOfId
+      );
+      if (!c) return;
+      const f = c.series.map((d) => d.id), A = tl(
+        f,
+        f.length - 1,
+        C.value
+      );
+      C.value.includes(t.id) ? (C.value = C.value.filter((d) => d !== t.id), e.value.serieToggleAnimation.show ? it({
+        from: u,
+        to: a,
+        duration: e.value.serieToggleAnimation.durationMs,
+        onUpdate: (d) => {
+          $.value = $.value.map((m) => ({
+            ...m,
+            series: m.series.map((S) => S.id === t.id ? { ...S, value: d } : S)
+          }));
+        }
+      }) : $.value = $.value.map((d) => ({
+        ...d,
+        series: d.series.map((m) => m.id === t.id ? { ...m, value: a } : m)
+      }))) : A && (e.value.serieToggleAnimation.show ? it({
+        from: u,
+        to: 0,
+        duration: e.value.serieToggleAnimation.durationMs,
+        onUpdate: (d) => {
+          $.value = $.value.map((m) => ({
+            ...m,
+            series: m.series.map((S) => S.id === t.id ? { ...S, value: d } : S)
+          }));
+        },
+        onDone: () => {
+          C.value.push(t.id);
+        }
+      }) : ($.value = $.value.map((d) => ({
+        ...d,
+        series: d.series.map((m) => m.id === t.id ? { ...m, value: 0 } : m)
+      })), C.value.push(t.id)));
+    }
+    function ct(t) {
+      if (!T.value.length)
+        return e.value.debug && console.warn("VueUiNestedDonuts - There are no series to show."), null;
+      const s = T.value.flatMap((a) => a.series).filter((a) => a.name === t);
+      return s || (e.value.debug && console.warn(`VueUiNestedDonuts - Series name not found "${t}"`), null);
+    }
+    function ll(t) {
+      const s = ct(t);
+      s !== null && (Array.isArray(s) ? s.forEach((a) => {
+        C.value.includes(a.id) && q({ id: a.id });
+      }) : C.value.includes(s.id) && q({ id: s.id }));
+    }
+    function al(t) {
+      const s = ct(t);
+      s !== null && (Array.isArray(s) ? s.forEach((a) => {
+        C.value.includes(a.id) || q({ id: a.id });
+      }) : C.value.includes(s.id) || q({ id: s.id }));
+    }
+    const se = k(() => E.value / T.value.length * e.value.style.chart.layout.donut.spacingRatio), vt = k(() => $.value.map((t, s) => E.value - s * E.value / T.value.length)), Z = k(() => $.value.map((t, s) => {
+      const a = Math.abs(t.series.map((A) => A.value).reduce((A, d) => A + d, 0)) > 0, o = E.value - s * E.value / $.value.length, l = G.value ? Q.value.find((A) => A.datasetIndex === s) : null, u = [...t.series, ...l ? [l] : []].map((A) => ({
+        ...A,
+        value: A.value < 1e-11 ? Number.MIN_VALUE : A.value
+      })), c = ze(
+        { series: [
+          { name: "_", color: e.value.style.chart.layout.donut.emptyFill, value: 1 }
+        ] },
+        h.value.width / 2,
+        h.value.height / 2,
+        o,
+        o,
+        1.99999,
+        2,
+        1,
+        360,
+        105.25,
+        se.value
+      ), f = `M ${h.value.width / 2},${h.value.height / 2 + o}
+            a ${o},${o} 0 1,1 0,${-2 * o}
+            a ${o},${o} 0 1,1 0,${2 * o}`;
+      return {
+        ...t,
+        hasData: a,
+        radius: o,
+        skeleton: c,
+        fullCirclePath: f,
+        donut: ze(
+          { series: u },
+          h.value.width / 2,
+          h.value.height / 2,
+          o,
+          o,
+          1.99999,
+          2,
+          1,
+          360,
+          105.25,
+          se.value
+        )
+      };
+    })), ht = k(() => [...T.value].map((t, s) => {
+      const a = s * E.value / T.value.length;
+      return {
+        sizeRatio: a,
+        donut: ze(
+          { series: [{ value: 1 }] },
+          h.value.width / 2,
+          h.value.height / 2,
+          E.value - a,
+          E.value - a,
+          1.99999,
+          2,
+          1,
+          360,
+          105.25,
+          E.value / T.value.length * e.value.style.chart.layout.donut.spacingRatio
+        )[0]
+      };
+    })), ft = v(null), ne = v(null), ue = v(null), $e = v(null);
+    function ol({ datapoint: t, seriesIndex: s }) {
+      e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: t, seriesIndex: s }), be.value = !1, ft.value = null, pe.value = null, ne.value = null, ue.value = null;
+    }
+    function sl({ datapoint: t, _relativeIndex: s, seriesIndex: a }) {
+      e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: t, seriesIndex: a }), ft.value = t.arcOfId, ne.value = t.id, ue.value = a, pe.value = t.id, $e.value = {
+        datapoint: t,
+        seriesIndex: a,
+        series: $.value,
+        config: e.value
+      };
+      const o = e.value.style.chart.tooltip.customFormat;
+      if (Ft(o) && Pl(
+        () => o({
+          seriesIndex: a,
+          datapoint: t,
+          series: $.value,
+          config: e.value
+        })
+      ))
+        ge.value = o({
+          seriesIndex: a,
+          datapoint: t,
+          series: $.value,
+          config: e.value
+        });
+      else {
+        let l = "";
+        if (e.value.style.chart.tooltip.showAllItemsAtIndex && C.value.length === 0) {
+          const u = $.value.map((c) => c.series.find((f) => f.seriesIndex === a));
+          u.forEach((c, f) => {
+            if (!c) return "";
+            l += `
+                    <div style="display:flex; flex-direction: column; justify-content:flex-start; align-items:flex-start;padding:6px 0; ${f < u.length - 1 ? `border-bottom:1px solid ${e.value.style.chart.tooltip.borderColor}` : ""}">
+                        <div style="display:flex; flex-direction: row; gap: 3px; justify-content:flex-start; align-items:center;">
+                            <svg viewBox="0 0 20 20" height="${e.value.style.chart.tooltip.fontSize}" width="${e.value.style.chart.tooltip.fontSize}">
+                                <circle cx="10" cy="10" r="10" fill="${c.color}"/>
+                            </svg>
+                            <span>
+                                ${c.arcOf ?? ""} - ${c.name}
+                            </span>
+                        </div>
+                        <span>
+                            ${e.value.style.chart.tooltip.showValue ? `<b>${oe(
+              e.value.style.chart.layout.labels.dataLabels.formatter,
+              t.value,
+              D({
+                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, seriesIndex: a }
+            )}
+                        </b>` : ""}
+                            ${e.value.style.chart.tooltip.showPercentage ? `(${D({
+              v: c.proportion * 100,
+              s: "%",
+              r: e.value.style.chart.tooltip.roundingPercentage
+            })})` : ""}
+                        </span>
+                    </div>
+                `;
+          });
+        } else
+          l += `<div style="width:100%;text-align:center;border-bottom:1px solid ${e.value.style.chart.tooltip.borderColor};padding-bottom:6px;margin-bottom:3px;">${t.arcOf ?? ""} - ${t.name}</div>`, l += `<div style="display:flex;flex-direction:row;gap:6px;align-items:center;"><svg viewBox="0 0 12 12" height="14" width="14"><circle cx="6" cy="6" r="6" stroke="none" fill="${t.color}"/></svg>`, e.value.style.chart.tooltip.showValue && (l += `<b>${oe(
+            e.value.style.chart.layout.labels.dataLabels.formatter,
+            t.value,
+            D({
+              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, seriesIndex: a }
+          )}</b>`), e.value.style.chart.tooltip.showPercentage && (e.value.style.chart.tooltip.showValue ? l += `<span>(${D({
+            v: t.proportion * 100,
+            s: "%",
+            r: e.value.style.chart.tooltip.roundingPercentage
+          })})</span></div>` : l += `<b>${D({
+            v: t.proportion * 100,
+            s: "%",
+            r: e.value.style.chart.tooltip.roundingPercentage
+          })}</b></div>`);
+        ge.value = `<div style="font-size:${e.value.style.chart.tooltip.fontSize}px">${l}</div>`;
+      }
+      be.value = !0;
+    }
+    function Le(t) {
+      return t.proportion * 100 > e.value.style.chart.layout.labels.dataLabels.hideUnderValue;
+    }
+    function bt(t, s) {
+      if (!e.value.useBlurOnHover)
+        return "";
+      if (e.value.style.chart.tooltip.showAllItemsAtIndex && C.value.length === 0)
+        return [null, void 0].includes(ue.value) || ue.value === s ? "" : `url(#blur_${b.value})`;
+      if (!e.value.style.chart.tooltip.showAllItemsAtIndex || C.value.length)
+        return [null, void 0].includes(ne.value) || ne.value === t.id ? "" : `url(#blur_${b.value})`;
+    }
+    const re = k(() => T.value.map((t, s) => {
+      const a = t.series.filter(
+        (l) => !C.value.includes(l.id)
+      ), o = G.value ? a.map((l) => {
+        const u = X.value[s].series.findIndex(
+          (c) => c.name === l.name
+        );
+        return R(
+          X.value[s].series[u].values
+        ).reduce((c, f) => c + f, 0);
+      }).reduce((l, u) => l + u, 0) : a.map((l) => l.value).reduce((l, u) => l + u, 0);
+      return t.series.map((l, u) => {
+        const c = R(X.value[s].series[u].values).reduce(
+          (d, m) => d + m,
+          0
+        ), f = G.value ? c : l.value, A = `${l.name}${e.value.style.chart.legend.showPercentage || e.value.style.chart.legend.showValue ? ": " : ""}${e.value.style.chart.legend.showValue ? oe(
+          e.value.style.chart.layout.labels.dataLabels.formatter,
+          f,
+          D({
+            p: e.value.style.chart.layout.labels.dataLabels.prefix,
+            v: f,
+            s: e.value.style.chart.layout.labels.dataLabels.suffix,
+            r: e.value.style.chart.legend.roundingValue
+          }),
+          { datapoint: l, seriesIndex: u }
+        ) : ""}${e.value.style.chart.legend.showPercentage ? C.value.includes(l.id) ? `${e.value.style.chart.legend.showValue ? "(" : ""}- %${e.value.style.chart.legend.showValue ? ")" : ""}` : `${e.value.style.chart.legend.showValue ? "(" : ""}${isNaN(f / o) ? "-" : D({
+          v: f / o * 100,
+          s: "%",
+          r: e.value.style.chart.legend.roundingPercentage
+        })}${e.value.style.chart.legend.showValue ? ")" : ""}` : ""}`;
+        return {
+          name: l.name,
+          color: l.color,
+          value: f,
+          display: A,
+          svgDisplay: `${l.arcOf ? `${l.arcOf} - ` : ""}${A}`,
+          shape: "circle",
+          arcOf: l.arcOf,
+          id: l.id,
+          seriesIndex: u,
+          datasetIndex: s,
+          total: o,
+          opacity: C.value.includes(l.id) ? 0.5 : 1,
+          segregate: () => q(l),
+          isSegregated: C.value.includes(l.id)
+        };
+      });
+    })), nl = k(() => ({
+      cy: "nested-donuts-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" : ""
+    })), B = k(() => {
+      const t = $.value.flatMap((a) => a.series.map((o) => ({
+        name: `${a.name} - ${o.name}`,
+        color: o.color,
+        total: a.total
+      }))), s = $.value.flatMap((a) => a.series.map((o) => o.value));
+      return { head: t, body: s };
+    });
+    function _e(t = null) {
+      _t(() => {
+        const s = B.value.head.map((l, u) => [
+          [l.name],
+          [B.value.body[u]],
+          [
+            isNaN(B.value.body[u] / l.total) ? "-" : B.value.body[u] / l.total * 100
+          ]
+        ]), a = [
+          [e.value.style.chart.title.text],
+          [e.value.style.chart.title.subtitle.text],
+          [[""], ["val"], ["%"]]
+        ].concat(s), o = Il(a);
+        t ? t(o) : El({
+          csvContent: o,
+          title: e.value.style.chart.title.text || "vue-ui-nested-donuts"
+        });
+      });
+    }
+    const ie = k(() => {
+      const t = [
+        e.value.table.columnNames.series,
+        e.value.table.columnNames.value,
+        e.value.table.columnNames.percentage
+      ], s = B.value.head.map((l, u) => {
+        const c = D({
+          p: e.value.style.chart.layout.labels.dataLabels.prefix,
+          v: B.value.body[u],
+          s: e.value.style.chart.layout.labels.dataLabels.suffix,
+          r: e.value.table.td.roundingValue
+        });
+        return [
+          {
+            color: l.color,
+            name: l.name
+          },
+          c,
+          isNaN(B.value.body[u] / l.total) ? "-" : D({
+            v: B.value.body[u] / l.total * 100,
+            s: "%",
+            r: e.value.table.td.roundingPercentage
+          })
+        ];
+      }), 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: s,
+        config: a
+      };
+    });
+    function ul() {
+      return T.value;
+    }
+    function gt() {
+      _.value.showTable = !_.value.showTable;
+    }
+    function pt() {
+      _.value.dataLabels.show = !_.value.dataLabels.show;
+    }
+    function yt() {
+      _.value.showTooltip = !_.value.showTooltip;
+    }
+    const de = v(!1);
+    function xe() {
+      de.value = !de.value;
+    }
+    async function rl({ scale: t = 2 } = {}) {
+      if (!I.value) return;
+      const { width: s, height: a } = I.value.getBoundingClientRect(), o = s / a, { imageUri: l, base64: u } = await ql({ domElement: I.value, base64: !0, img: !0, scale: t });
+      return {
+        imageUri: l,
+        base64: u,
+        title: e.value.style.chart.title.text,
+        width: s,
+        height: a,
+        aspectRatio: o
+      };
+    }
+    const Fe = v(null);
+    function il() {
+      if (!Fe.value) return;
+      const { x: t, y: s, width: a, height: o } = Fe.value.getBBox();
+      te.value && te.value.setAttribute("viewBox", `${t} ${s} ${a + Math.min(0, t)} ${o + Math.min(0, s)}`);
+    }
+    const le = k(() => {
+      const t = e.value.table.useDialog && !e.value.table.show, s = _.value.showTable;
+      return {
+        component: t ? qt : Rt,
+        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: W.value,
+          fullscreenParent: I.value,
+          forcedWidth: Math.min(800, window.innerWidth * 0.8)
+        } : {
+          hideDetails: !0,
+          config: {
+            open: s,
+            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
+            }
+          }
+        }
+      };
+    });
+    ae(() => _.value.showTable, (t) => {
+      e.value.table.show || (t && e.value.table.useDialog && ee.value ? ee.value.open() : "close" in ee.value && ee.value.close());
+    });
+    function mt() {
+      _.value.showTable = !1, me.value && me.value.setTableIconState(!1);
+    }
+    const dl = k(() => e.value.style.chart.backgroundColor), cl = k(() => e.value.style.chart.legend), vl = k(() => e.value.style.chart.title), hl = k(() => re.value.flat().map((t) => ({
+      ...t,
+      name: t.svgDisplay
+    }))), { exportSvg: fl, getSvg: bl } = Gl({
+      svg: te,
+      title: vl,
+      legend: cl,
+      legendItems: hl,
+      backgroundColor: dl
+    });
+    async function Ct({ isCb: t }) {
+      if (t) {
+        const { blob: s, url: a, text: o, dataUrl: l } = await bl();
+        e.value.userOptions.callbacks.svg({ blob: s, url: a, text: o, dataUrl: l });
+      } else
+        fl();
+    }
+    return Bt({
+      autoSize: il,
+      getData: ul,
+      getImage: rl,
+      generatePdf: nt,
+      generateCsv: _e,
+      generateImage: ut,
+      generateSvg: Ct,
+      hideSeries: al,
+      showSeries: ll,
+      toggleTable: gt,
+      toggleLabels: pt,
+      toggleTooltip: yt,
+      toggleAnnotator: xe,
+      toggleFullscreen: Je
+    }), (t, s) => (n(), r("div", {
+      ref_key: "nestedDonutsChart",
+      ref: I,
+      class: M(`vue-data-ui-component vue-ui-nested-donuts ${W.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${e.value.useCssAnimation ? "" : "vue-ui-dna"}`),
+      style: he(`font-family:${e.value.style.fontFamily};width:100%; text-align:center;background:${e.value.style.chart.backgroundColor}`),
+      id: `nested_donuts_${b.value}`,
+      onMouseenter: s[2] || (s[2] = () => i(Qe)(!0)),
+      onMouseleave: s[3] || (s[3] = () => i(Qe)(!1))
+    }, [
+      e.value.userOptions.buttons.annotator ? (n(), U(i(Wt), {
+        key: 0,
+        svgRef: i(te),
+        backgroundColor: e.value.style.chart.backgroundColor,
+        color: e.value.style.chart.color,
+        active: de.value,
+        onClose: xe
+      }, {
+        "annotator-action-close": p(() => [
+          y(t.$slots, "annotator-action-close", {}, void 0, !0)
+        ]),
+        "annotator-action-color": p(({ color: a }) => [
+          y(t.$slots, "annotator-action-color", O(N({ color: a })), void 0, !0)
+        ]),
+        "annotator-action-draw": p(({ mode: a }) => [
+          y(t.$slots, "annotator-action-draw", O(N({ mode: a })), void 0, !0)
+        ]),
+        "annotator-action-undo": p(({ disabled: a }) => [
+          y(t.$slots, "annotator-action-undo", O(N({ disabled: a })), void 0, !0)
+        ]),
+        "annotator-action-redo": p(({ disabled: a }) => [
+          y(t.$slots, "annotator-action-redo", O(N({ disabled: a })), void 0, !0)
+        ]),
+        "annotator-action-delete": p(({ disabled: a }) => [
+          y(t.$slots, "annotator-action-delete", O(N({ disabled: a })), void 0, !0)
+        ]),
+        _: 3
+      }, 8, ["svgRef", "backgroundColor", "color", "active"])) : L("", !0),
+      Kt.value ? (n(), r("div", {
+        key: 1,
+        ref_key: "noTitle",
+        ref: Xe,
+        class: "vue-data-ui-no-title-space",
+        style: "height:36px; width: 100%;background:transparent"
+      }, null, 512)) : L("", !0),
+      e.value.style.chart.title.text ? (n(), r("div", {
+        key: 2,
+        ref_key: "chartTitle",
+        ref: Ye
+      }, [
+        (n(), U(Hl, {
+          key: `title_${qe.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)) : L("", !0),
+      g("div", {
+        id: `legend-top-${b.value}`
+      }, null, 8, Kl),
+      e.value.userOptions.show && fe.value && (i(et) || i(we)) ? (n(), U(i(Yt), {
+        ref_key: "userOptionsRef",
+        ref: me,
+        key: `user_option_${Ge.value}`,
+        backgroundColor: e.value.style.chart.backgroundColor,
+        color: e.value.style.chart.color,
+        isPrinting: i(ot),
+        isImaging: i(st),
+        uid: b.value,
+        hasTooltip: e.value.userOptions.buttons.tooltip && e.value.style.chart.tooltip.show,
+        hasPdf: e.value.userOptions.buttons.pdf,
+        hasXls: e.value.userOptions.buttons.csv,
+        hasImg: e.value.userOptions.buttons.img,
+        hasSvg: e.value.userOptions.buttons.svg,
+        hasTable: e.value.userOptions.buttons.table,
+        hasLabel: e.value.userOptions.buttons.labels,
+        hasFullscreen: e.value.userOptions.buttons.fullscreen,
+        isFullscreen: W.value,
+        isTooltip: _.value.showTooltip,
+        titles: { ...e.value.userOptions.buttonTitles },
+        chartElement: I.value,
+        position: e.value.userOptions.position,
+        hasAnnotator: e.value.userOptions.buttons.annotator,
+        isAnnotation: de.value,
+        callbacks: e.value.userOptions.callbacks,
+        printScale: e.value.userOptions.print.scale,
+        tableDialog: e.value.table.useDialog,
+        onToggleFullscreen: Je,
+        onGeneratePdf: i(nt),
+        onGenerateCsv: _e,
+        onGenerateImage: i(ut),
+        onGenerateSvg: Ct,
+        onToggleTable: gt,
+        onToggleLabels: pt,
+        onToggleTooltip: yt,
+        onToggleAnnotator: xe,
+        style: he({
+          visibility: i(et) ? i(we) ? "visible" : "hidden" : "visible"
+        })
+      }, wt({ _: 2 }, [
+        t.$slots.menuIcon ? {
+          name: "menuIcon",
+          fn: p(({ isOpen: a, color: o }) => [
+            y(t.$slots, "menuIcon", O(N({ isOpen: a, color: o })), void 0, !0)
+          ]),
+          key: "0"
+        } : void 0,
+        t.$slots.optionTooltip ? {
+          name: "optionTooltip",
+          fn: p(() => [
+            y(t.$slots, "optionTooltip", {}, void 0, !0)
+          ]),
+          key: "1"
+        } : void 0,
+        t.$slots.optionPdf ? {
+          name: "optionPdf",
+          fn: p(() => [
+            y(t.$slots, "optionPdf", {}, void 0, !0)
+          ]),
+          key: "2"
+        } : void 0,
+        t.$slots.optionCsv ? {
+          name: "optionCsv",
+          fn: p(() => [
+            y(t.$slots, "optionCsv", {}, void 0, !0)
+          ]),
+          key: "3"
+        } : void 0,
+        t.$slots.optionImg ? {
+          name: "optionImg",
+          fn: p(() => [
+            y(t.$slots, "optionImg", {}, void 0, !0)
+          ]),
+          key: "4"
+        } : void 0,
+        t.$slots.optionSvg ? {
+          name: "optionSvg",
+          fn: p(() => [
+            y(t.$slots, "optionSvg", {}, void 0, !0)
+          ]),
+          key: "5"
+        } : void 0,
+        t.$slots.optionTable ? {
+          name: "optionTable",
+          fn: p(() => [
+            y(t.$slots, "optionTable", {}, void 0, !0)
+          ]),
+          key: "6"
+        } : void 0,
+        t.$slots.optionLabels ? {
+          name: "optionLabels",
+          fn: p(() => [
+            y(t.$slots, "optionLabels", {}, void 0, !0)
+          ]),
+          key: "7"
+        } : void 0,
+        t.$slots.optionFullscreen ? {
+          name: "optionFullscreen",
+          fn: p(({ toggleFullscreen: a, isFullscreen: o }) => [
+            y(t.$slots, "optionFullscreen", O(N({ toggleFullscreen: a, isFullscreen: o })), void 0, !0)
+          ]),
+          key: "8"
+        } : void 0,
+        t.$slots.optionAnnotator ? {
+          name: "optionAnnotator",
+          fn: p(({ toggleAnnotator: a, isAnnotator: o }) => [
+            y(t.$slots, "optionAnnotator", O(N({ toggleAnnotator: a, isAnnotator: o })), void 0, !0)
+          ]),
+          key: "9"
+        } : void 0
+      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasTooltip", "hasPdf", "hasXls", "hasImg", "hasSvg", "hasTable", "hasLabel", "hasFullscreen", "isFullscreen", "isTooltip", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "tableDialog", "onGeneratePdf", "onGenerateImage", "style"])) : L("", !0),
+      (n(), r("svg", {
+        ref_key: "svgRef",
+        ref: te,
+        xmlns: i(Ol),
+        class: M({
+          "vue-data-ui-fullscreen--on": W.value,
+          "vue-data-ui-fulscreen--off": !W.value,
+          "vue-data-ui-svg": !0
+        }),
+        viewBox: `0 0 ${h.value.width <= 0 ? 1e-3 : h.value.width} ${h.value.height < 0 ? 1e-3 : h.value.height}`,
+        style: he(`max-width:100%; overflow: visible; background:transparent;color:${e.value.style.chart.color};${tt.value.css}`)
+      }, [
+        g("g", {
+          ref_key: "G",
+          ref: Fe,
+          class: "vue-data-ui-g"
+        }, [
+          Pe(i(Xt)),
+          t.$slots["chart-background"] ? (n(), r("foreignObject", {
+            key: 0,
+            x: 0,
+            y: 0,
+            width: h.value.width <= 0 ? 1e-3 : h.value.width,
+            height: h.value.height < 0 ? 1e-3 : h.value.height,
+            style: {
+              pointerEvents: "none"
+            }
+          }, [
+            y(t.$slots, "chart-background", {}, void 0, !0)
+          ], 8, ea)) : L("", !0),
+          g("defs", null, [
+            (n(!0), r(x, null, F(ht.value, (a, o) => (n(), r("radialGradient", {
+              id: `radial_${b.value}_${o}`
+            }, [
+              s[4] || (s[4] = g("stop", {
+                offset: "0%",
+                "stop-color": "#FFFFFF",
+                "stop-opacity": "0"
+              }, null, -1)),
+              g("stop", {
+                offset: `${(1 - se.value / vt.value[o]) * 100}%`,
+                "stop-color": i(Nl)("#FFFFFF", 0),
+                "stop-opacity": "0"
+              }, null, 8, la),
+              g("stop", {
+                offset: `${(1 - se.value / vt.value[o] / 2) * 100}%`,
+                "stop-color": "#FFFFFF",
+                "stop-opacity": e.value.style.chart.gradientIntensity / 100
+              }, null, 8, aa),
+              s[5] || (s[5] = g("stop", {
+                offset: "100%",
+                "stop-color": "#FFFFFF",
+                "stop-opacity": "0"
+              }, null, -1))
+            ], 8, ta))), 256))
+          ]),
+          g("defs", null, [
+            g("filter", {
+              id: `blur_${b.value}`,
+              x: "-50%",
+              y: "-50%",
+              width: "200%",
+              height: "200%"
+            }, [
+              g("feGaussianBlur", {
+                in: "SourceGraphic",
+                stdDeviation: 2,
+                id: `blur_std_${b.value}`
+              }, null, 8, sa),
+              s[6] || (s[6] = g("feColorMatrix", {
+                type: "saturate",
+                values: "0"
+              }, null, -1))
+            ], 8, oa),
+            g("filter", {
+              id: `shadow_${b.value}`,
+              "color-interpolation-filters": "sRGB"
+            }, [
+              g("feDropShadow", {
+                dx: "0",
+                dy: "0",
+                stdDeviation: "10",
+                "flood-opacity": "0.5",
+                "flood-color": e.value.style.chart.layout.donut.shadowColor
+              }, null, 8, ua)
+            ], 8, na)
+          ]),
+          g("defs", null, [
+            (n(!0), r(x, null, F(Z.value, (a, o) => (n(), r("path", {
+              key: `path-full-${o}`,
+              id: `path-full-${o}-${b.value}`,
+              d: a.fullCirclePath,
+              fill: "none"
+            }, null, 8, ra))), 128))
+          ]),
+          (n(!0), r(x, null, F(Z.value, (a, o) => (n(), r("g", null, [
+            a.hasData ? (n(!0), r(x, { key: 0 }, F(a.donut.filter((l) => !l.ghost), (l, u) => (n(), r("g", null, [
+              g("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: bt(l, u)
+              }, null, 8, ia)
+            ]))), 256)) : (n(!0), r(x, { key: 1 }, F(a.skeleton, (l, u) => (n(), r("g", null, [
+              g("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
+              }, null, 8, da)
+            ]))), 256))
+          ]))), 256)),
+          e.value.style.chart.useGradient ? (n(), r("g", ca, [
+            (n(!0), r(x, null, F(ht.value, (a, o) => (n(), r("g", null, [
+              g("path", {
+                d: a.donut.arcSlice,
+                fill: `url(#radial_${b.value}_${o})`,
+                stroke: "transparent",
+                "stroke-width": "0"
+              }, null, 8, va)
+            ]))), 256))
+          ])) : L("", !0),
+          e.value.style.chart.layout.labels.dataLabels.showDonutName ? (n(), r("g", ha, [
+            e.value.style.chart.layout.labels.dataLabels.curvedDonutName ? (n(!0), r(x, { key: 0 }, F(Z.value, (a, o) => (n(), r("g", null, [
+              (n(!0), r(x, null, F(a.donut, (l, u) => (n(), r("g", null, [
+                u === 0 && h.value.width && h.value.height ? (n(), r("text", {
+                  key: 0,
+                  class: M({ animated: e.value.useCssAnimation }),
+                  "text-anchor": "middle",
+                  "font-size": e.value.style.chart.layout.labels.dataLabels.fontSize,
+                  "font-weight": e.value.style.chart.layout.labels.dataLabels.boldDonutName ? "bold" : "normal",
+                  fill: e.value.style.chart.layout.labels.dataLabels.color,
+                  dy: e.value.style.chart.layout.labels.dataLabels.donutNameOffsetY
+                }, [
+                  g("textPath", {
+                    href: `#path-full-${o}-${b.value}`,
+                    startOffset: "50%",
+                    "text-anchor": "middle",
+                    method: "align",
+                    spacing: "auto"
+                  }, P(e.value.style.chart.layout.labels.dataLabels.donutNameAbbreviation ? i(xt)({
+                    source: a.name,
+                    length: e.value.style.chart.layout.labels.dataLabels.donutNameMaxAbbreviationSize
+                  }) : a.name), 9, ba)
+                ], 10, fa)) : L("", !0)
+              ]))), 256))
+            ]))), 256)) : (n(!0), r(x, { key: 1 }, F(Z.value, (a, o) => (n(), r("g", null, [
+              (n(!0), r(x, null, F(a.donut, (l, u) => (n(), r("g", null, [
+                u === 0 && h.value.width && h.value.height ? (n(), r("text", {
+                  key: 0,
+                  class: M({ animated: e.value.useCssAnimation }),
+                  x: h.value.width / 2,
+                  y: l.startY - e.value.style.chart.layout.labels.dataLabels.fontSize + e.value.style.chart.layout.labels.dataLabels.donutNameOffsetY,
+                  "text-anchor": "middle",
+                  "font-size": e.value.style.chart.layout.labels.dataLabels.fontSize,
+                  "font-weight": e.value.style.chart.layout.labels.dataLabels.boldDonutName ? "bold" : "normal",
+                  fill: e.value.style.chart.layout.labels.dataLabels.color
+                }, P(e.value.style.chart.layout.labels.dataLabels.donutNameAbbreviation ? i(xt)({
+                  source: a.name,
+                  length: e.value.style.chart.layout.labels.dataLabels.donutNameMaxAbbreviationSize
+                }) : a.name), 11, ga)) : L("", !0)
+              ]))), 256))
+            ]))), 256))
+          ])) : L("", !0),
+          e.value.style.chart.layout.labels.dataLabels.show ? (n(), r("g", pa, [
+            (n(!0), r(x, null, F(Z.value, (a, o) => (n(), r("g", null, [
+              (n(!0), r(x, null, F(a.donut.filter((l) => !l.ghost), (l, u) => (n(), r("g", {
+                filter: bt(l, u)
+              }, [
+                At(g("text", {
+                  class: M({ animated: e.value.useCssAnimation }),
+                  opacity: Le(l) ? 1 : 0,
+                  "text-anchor": i(K)(l, !0).anchor,
+                  x: i(K)(
+                    l,
+                    !1,
+                    e.value.style.chart.layout.labels.dataLabels.offsetX
+                  ).x || 0,
+                  y: i(Me)(
+                    l,
+                    e.value.style.chart.layout.labels.dataLabels.offsetY,
+                    e.value.style.chart.layout.labels.dataLabels.offsetY
+                  ),
+                  fill: e.value.style.chart.layout.labels.dataLabels.useSerieColor ? l.color : e.value.style.chart.layout.labels.dataLabels.color,
+                  "font-size": e.value.style.chart.layout.labels.dataLabels.fontSize,
+                  "font-weight": e.value.style.chart.layout.labels.dataLabels.boldPercentage ? "bold" : "normal"
+                }, P(i(D)({
+                  v: l.proportion * 100,
+                  s: "%",
+                  r: e.value.style.chart.layout.labels.dataLabels.roundingPercentage
+                })), 11, ma), [
+                  [
+                    $t,
+                    _.value.dataLabels.show && e.value.style.chart.layout.labels.dataLabels.showPercentage
+                  ]
+                ]),
+                At(g("text", {
+                  class: M({ animated: e.value.useCssAnimation }),
+                  opacity: Le(l) ? 1 : 0,
+                  "text-anchor": i(K)(l, !0).anchor,
+                  x: i(K)(
+                    l,
+                    !1,
+                    e.value.style.chart.layout.labels.dataLabels.offsetX
+                  ).x || 0,
+                  y: i(Me)(
+                    l,
+                    e.value.style.chart.layout.labels.dataLabels.offsetY,
+                    e.value.style.chart.layout.labels.dataLabels.offsetY
+                  ) + e.value.style.chart.layout.labels.dataLabels.fontSize,
+                  fill: e.value.style.chart.layout.labels.dataLabels.useSerieColor ? l.color : e.value.style.chart.layout.labels.dataLabels.color,
+                  "font-size": e.value.style.chart.layout.labels.dataLabels.fontSize,
+                  "font-weight": e.value.style.chart.layout.labels.dataLabels.boldValue ? "bold" : "normal"
+                }, " (" + P(i(oe)(
+                  e.value.style.chart.layout.labels.dataLabels.formatter,
+                  l.value,
+                  i(D)({
+                    p: e.value.style.chart.layout.labels.dataLabels.prefix,
+                    v: l.value,
+                    s: e.value.style.chart.layout.labels.dataLabels.suffix,
+                    r: e.value.style.chart.layout.labels.dataLabels.roundingValue
+                  }),
+                  { datapoint: l, seriesIndex: o, datapointIndex: u }
+                )) + ") ", 11, Ca), [
+                  [
+                    $t,
+                    _.value.dataLabels.show && e.value.style.chart.layout.labels.dataLabels.showPercentage && e.value.style.chart.layout.labels.dataLabels.showValue
+                  ]
+                ]),
+                Le(l) && _.value.dataLabels.show && !e.value.style.chart.layout.labels.dataLabels.showPercentage && e.value.style.chart.layout.labels.dataLabels.showValue ? (n(), r("text", {
+                  key: 0,
+                  class: M({ animated: e.value.useCssAnimation }),
+                  "text-anchor": i(K)(l, !0).anchor,
+                  x: i(K)(
+                    l,
+                    !1,
+                    e.value.style.chart.layout.labels.dataLabels.offsetX
+                  ).x || 0,
+                  y: i(Me)(
+                    l,
+                    e.value.style.chart.layout.labels.dataLabels.offsetY,
+                    e.value.style.chart.layout.labels.dataLabels.offsetY
+                  ),
+                  fill: e.value.style.chart.layout.labels.dataLabels.useSerieColor ? l.color : e.value.style.chart.layout.labels.dataLabels.color,
+                  "font-size": e.value.style.chart.layout.labels.dataLabels.fontSize,
+                  "font-weight": e.value.style.chart.layout.labels.dataLabels.boldValue ? "bold" : "normal"
+                }, P(i(oe)(
+                  e.value.style.chart.layout.labels.dataLabels.formatter,
+                  l.value,
+                  i(D)({
+                    p: e.value.style.chart.layout.labels.dataLabels.prefix,
+                    v: l.value,
+                    s: e.value.style.chart.layout.labels.dataLabels.suffix,
+                    r: e.value.style.chart.layout.labels.dataLabels.roundingValue
+                  }),
+                  { datapoint: l, seriesIndex: o, datapointIndex: u }
+                )), 11, ka)) : L("", !0)
+              ], 8, ya))), 256))
+            ]))), 256))
+          ])) : L("", !0),
+          (n(!0), r(x, null, F(Z.value, (a, o) => (n(), r("g", null, [
+            (n(!0), r(x, null, F(a.donut, (l, u) => (n(), r("g", null, [
+              g("path", {
+                d: l.arcSlice,
+                fill: pe.value === l.id ? e.value.style.chart.layout.donut.selectedColor : "transparent",
+                onMouseenter: (c) => sl({
+                  datapoint: l,
+                  seriesIndex: l.seriesIndex
+                }),
+                onClick: (c) => el({ datapoint: l, index: u, seriesIndex: l.seriesIndex }),
+                onMouseleave: (c) => ol({ datapoint: l, seriesIndex: l.seriesIndex })
+              }, null, 40, wa)
+            ]))), 256))
+          ]))), 256)),
+          y(t.$slots, "svg", { svg: h.value }, void 0, !0)
+        ], 512)
+      ], 14, Ql)),
+      t.$slots.watermark ? (n(), r("div", Aa, [
+        y(t.$slots, "watermark", O(N({ isPrinting: i(ot) || i(st) })), void 0, !0)
+      ])) : L("", !0),
+      Pe(i(Mt), {
+        show: _.value.showTooltip && be.value,
+        backgroundColor: e.value.style.chart.tooltip.backgroundColor,
+        color: e.value.style.chart.tooltip.color,
+        borderRadius: e.value.style.chart.tooltip.borderRadius,
+        borderColor: e.value.style.chart.tooltip.borderColor,
+        borderWidth: e.value.style.chart.tooltip.borderWidth,
+        fontSize: e.value.style.chart.tooltip.fontSize,
+        backgroundOpacity: e.value.style.chart.tooltip.backgroundOpacity,
+        position: e.value.style.chart.tooltip.position,
+        offsetY: e.value.style.chart.tooltip.offsetY,
+        parent: I.value,
+        content: ge.value,
+        isFullscreen: W.value,
+        isCustom: i(Ft)(e.value.style.chart.tooltip.customFormat),
+        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.smoothSnapThreshold
+      }, {
+        "tooltip-before": p(() => [
+          y(t.$slots, "tooltip-before", O(N({ ...$e.value })), void 0, !0)
+        ]),
+        "tooltip-after": p(() => [
+          y(t.$slots, "tooltip-after", O(N({ ...$e.value })), void 0, !0)
+        ]),
+        _: 3
+      }, 8, ["show", "backgroundColor", "color", "borderRadius", "borderColor", "borderWidth", "fontSize", "backgroundOpacity", "position", "offsetY", "parent", "content", "isFullscreen", "isCustom", "smooth", "backdropFilter", "smoothForce", "smoothSnapThreshold"]),
+      g("div", {
+        id: `legend-bottom-${b.value}`
+      }, null, 8, $a),
+      Ze.value ? (n(), U(Al, {
+        key: 5,
+        to: e.value.style.chart.legend.position === "top" ? `#legend-top-${b.value}` : `#legend-bottom-${b.value}`
+      }, [
+        e.value.style.chart.legend.show ? (n(), r("div", {
+          key: 0,
+          ref_key: "chartLegend",
+          ref: ye,
+          class: M({ "vue-ui-nested-donuts-legend": re.value.length > 1 })
+        }, [
+          (n(!0), r(x, null, F(re.value, (a, o) => (n(), U(jl, {
+            key: `legend_${o}_${je.value}`,
+            legendSet: a,
+            config: nl.value,
+            onClickMarker: s[0] || (s[0] = ({ legend: l }) => q(l))
+          }, {
+            legendTitle: p(({ titleSet: l }) => [
+              l[0] && l[0].arcOf ? (n(), r("div", La, P(l[0].arcOf), 1)) : L("", !0)
+            ]),
+            item: p(({ legend: l, index: u }) => [
+              g("div", {
+                onClick: (c) => q(l),
+                style: he(`opacity:${C.value.includes(l.id) ? 0.5 : 1}`)
+              }, P(l.display), 13, _a)
+            ]),
+            _: 1
+          }, 8, ["legendSet", "config"]))), 128))
+        ], 2)) : L("", !0)
+      ], 8, ["to"])) : L("", !0),
+      e.value.style.chart.legend.show ? L("", !0) : (n(), r("div", {
+        key: 6,
+        ref_key: "chartLegend",
+        ref: ye
+      }, [
+        y(t.$slots, "legend", { legend: re.value }, void 0, !0)
+      ], 512)),
+      t.$slots.source ? (n(), r("div", {
+        key: 7,
+        ref_key: "source",
+        ref: We,
+        dir: "auto"
+      }, [
+        y(t.$slots, "source", {}, void 0, !0)
+      ], 512)) : L("", !0),
+      fe.value && e.value.userOptions.buttons.table ? (n(), U($l(le.value.component), Ll({ key: 8 }, le.value.props, {
+        ref_key: "tableUnit",
+        ref: ee,
+        onClose: mt
+      }), wt({
+        content: p(() => [
+          (n(), U(i(Gt), {
+            key: `table_${He.value}`,
+            colNames: ie.value.colNames,
+            head: ie.value.head,
+            body: ie.value.body,
+            config: ie.value.config,
+            title: e.value.table.useDialog ? "" : le.value.title,
+            withCloseButton: !e.value.table.useDialog,
+            onClose: mt
+          }, {
+            th: p(({ th: a }) => [
+              g("div", {
+                innerHTML: a,
+                style: { display: "flex", "align-items": "center" }
+              }, null, 8, xa)
+            ]),
+            td: p(({ td: a }) => [
+              Lt(P(a.name || a), 1)
+            ]),
+            _: 1
+          }, 8, ["colNames", "head", "body", "config", "title", "withCloseButton"]))
+        ]),
+        _: 2
+      }, [
+        e.value.table.useDialog ? {
+          name: "title",
+          fn: p(() => [
+            Lt(P(le.value.title), 1)
+          ]),
+          key: "0"
+        } : void 0,
+        e.value.table.useDialog ? {
+          name: "actions",
+          fn: p(() => [
+            g("button", {
+              tabindex: "0",
+              class: "vue-ui-user-options-button",
+              onClick: s[1] || (s[1] = (a) => _e(e.value.userOptions.callbacks.csv))
+            }, [
+              Pe(i(Ut), {
+                name: "excel",
+                stroke: le.value.props.color
+              }, null, 8, ["stroke"])
+            ])
+          ]),
+          key: "1"
+        } : void 0
+      ]), 1040)) : L("", !0),
+      i(Ce) ? (n(), U(Ul, { key: 9 })) : L("", !0)
+    ], 46, Jl));
+  }
+}, Sa = /* @__PURE__ */ Zl(Fa, [["__scopeId", "data-v-1468fc43"]]), Wa = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  default: Sa
+}, Symbol.toStringTag, { value: "Module" }));
+export {
+  Ya as a,
+  Wa as b,
+  Sa as v
+};