vue-data-ui 3.15.12 → 3.16.1

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

@@ -0,0 +1,1595 @@
+import { defineAsyncComponent as G, computed as $, ref as h, toRefs as Ol, watch as fe, onMounted as Fl, shallowRef as Ft, onBeforeUnmount as Dl, openBlock as u, createElementBlock as r, unref as v, normalizeStyle as pe, normalizeClass as Z, createElementVNode as g, toDisplayString as E, createBlock as V, createCommentVNode as A, withCtx as y, renderSlot as w, normalizeProps as P, guardReactiveProps as S, createSlots as Dt, createVNode as Xe, Fragment as T, renderList as _, withDirectives as Nt, vShow as Vt, Teleport as Nl, resolveDynamicComponent as Vl, mergeProps as Ml, createTextVNode as Mt, nextTick as He } from "vue";
+import { j as zl, t as zt, m as Bl, p as qe, o as El, q as oe, n as Ul, a8 as Y, s as Rl, a4 as je, k as Ae, l as D, X as Gl, u as Yl, a as Bt, a6 as Et, a7 as Le, B as Ut, T as Rt, a0 as Wl, a1 as Kl, U as Xl, ai as Gt, K as Je } from "./lib-DBptbyyI.js";
+import { b as Hl } from "./labelUtils-CqTHa20R.js";
+import { t as ql, u as jl } from "./useResponsive-DfdjqQps.js";
+import { u as Jl } from "./useConfig-DO94Aj5s.js";
+import { u as Ql, B as Zl } from "./BaseScanner-BhhkKVoj.js";
+import { u as ea } from "./usePrinter-CEpYU3r5.js";
+import { u as ta } from "./useSvgExport-ByUukOZt.js";
+import { u as Qe } from "./useNestedProp-Bf5XFbs8.js";
+import { u as la } from "./useThemeCheck-D1ZYXUwG.js";
+import { u as aa } from "./useUserOptionState-BIvW1Kz7.js";
+import { u as oa } from "./useChartAccessibility-9icAAmYg.js";
+import sa from "./img-LXxMLmCg.js";
+import na from "./Title-BeMKE1cj.js";
+import ua from "./vue_ui_nested_donuts-DvTrWT_C.js";
+import ra from "./Legend-CS7Xo5LK.js";
+import { A as ia } from "./A11yDataTable-KcVAX2cP.js";
+import { B as da } from "./BaseLegendToggle-BQVIawmA.js";
+import { _ as ca } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const va = ["id"], ha = ["id"], fa = ["id"], pa = { style: { position: "relative" } }, ga = ["xmlns", "aria-describedby", "viewBox"], ya = ["width", "height"], ba = ["id"], ma = ["offset", "stop-color"], wa = ["offset", "stop-opacity"], ka = ["id"], $a = ["id"], Ca = ["id"], Aa = ["flood-color"], La = ["id", "d"], xa = ["d", "fill", "stroke", "stroke-width", "filter"], Ta = ["d", "fill", "stroke", "stroke-width"], _a = { key: 1 }, Pa = ["d", "fill"], Sa = { key: 2 }, Ia = ["font-size", "font-weight", "fill", "dy"], Oa = ["href"], Fa = ["x", "y", "font-size", "font-weight", "fill"], Da = { key: 3 }, Na = ["filter"], Va = ["opacity", "text-anchor", "x", "y", "fill", "font-size", "font-weight"], Ma = ["opacity", "text-anchor", "x", "y", "fill", "font-size", "font-weight"], za = ["d", "fill", "onMouseenter", "onClick", "onMouseleave"], Ba = {
+  key: 0,
+  style: { position: "absolute", top: "100%", left: "0", width: "100%" },
+  "data-dom-to-png-ignore": "",
+  "aria-hidden": "true"
+}, Ea = {
+  key: 5,
+  class: "vue-data-ui-watermark"
+}, Ua = ["id"], Ra = {
+  key: 0,
+  class: "vue-ui-nested-donuts-legend-title"
+}, Ga = ["onClick"], Ya = ["innerHTML"], Wa = {
+  __name: "vue-ui-nested-donuts",
+  props: {
+    config: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    dataset: {
+      type: Array,
+      default() {
+        return [];
+      }
+    }
+  },
+  emits: ["selectLegend", "selectDatapoint", "copyAlt"],
+  setup(Yt, { expose: Wt, emit: Kt }) {
+    const Xt = G(() => import("./Tooltip-Bf-kM3_A.js")), Ht = G(() => import("./BaseIcon-Cb3zzG6s.js")), qt = G(() => import("./vue-ui-accordion-nvggWcGN.js")), jt = G(() => import("./DataTable-DT2kIdQ6.js")), Jt = G(() => import("./UserOptions-rW2fRf3V.js")), Qt = G(() => import("./PenAndPaper-Ct3qJ4lA.js")), Zt = G(() => import("./PackageVersion-DPO-OOVI.js")), el = G(() => import("./BaseDraggableDialog-CIb-iD9g.js")), { vue_ui_nested_donuts: tl } = Jl(), { isThemeValid: ll, warnInvalidTheme: al } = la(), I = Yt, xe = $({
+      get() {
+        return !!I.dataset && I.dataset.length;
+      },
+      set(t) {
+        return t;
+      }
+    }), f = h(zl()), se = h(!1), Te = h(""), ne = h(null), Ze = h(0), M = h(null), et = h(null), _e = h(null), tt = h(null), lt = h(null), at = h(0), ot = h(0), st = h(0), W = h(!0), K = h([]), ue = h([]), nt = h(!1), re = h(null), Pe = h(null), ge = h(!1), ye = h(!1), N = h(null), ut = h({ x: 0, y: 0 }), ie = h("pointer"), Se = h(!1), X = h(!1);
+    function rt(t) {
+      X.value = t, Ze.value += 1;
+    }
+    const e = h(Fe()), H = $(() => e.value.userOptions.useCursorPointer), it = {
+      name: "",
+      series: [
+        {
+          name: "",
+          values: [3],
+          color: "#BABABA"
+        },
+        {
+          name: "",
+          values: [2],
+          color: "#AAAAAA"
+        },
+        {
+          name: "",
+          values: [1],
+          color: "#CACACA"
+        }
+      ]
+    }, ol = $(() => zt({
+      defaultConfig: {
+        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"
+              }
+            }
+          }
+        }
+      },
+      userConfig: e.value.skeletonConfig ?? {}
+    })), { loading: be, FINAL_DATASET: q, manualLoading: Ie } = Ql({
+      ...Ol(I),
+      FINAL_CONFIG: e,
+      prepareConfig: Fe,
+      callback: () => {
+        Promise.resolve().then(async () => {
+          await ht();
+        });
+      },
+      skeletonDataset: I.config?.skeletonDataset ?? [it, it],
+      skeletonConfig: zt({
+        defaultConfig: e.value,
+        userConfig: ol.value
+      })
+    }), { userOptionsVisible: Oe, setUserOptionsVisibility: dt, keepUserOptionState: ct } = aa({ config: e.value }), { svgRef: z } = oa({
+      config: e.value.style.chart.title
+    });
+    function Fe() {
+      const t = Qe({
+        userConfig: I.config,
+        defaultConfig: tl
+      });
+      let s = {};
+      const l = t.theme;
+      if (l)
+        if (!ll.value(t))
+          al(t), s = t;
+        else {
+          const o = Qe({
+            userConfig: ua[l] || I.config,
+            defaultConfig: t
+          });
+          s = {
+            ...Qe({
+              userConfig: I.config,
+              defaultConfig: o
+            }),
+            customPalette: t.customPalette.length ? t.customPalette : Bl[l] || qe
+          };
+        }
+      else
+        s = t;
+      return s;
+    }
+    fe(
+      () => I.config,
+      (t) => {
+        be.value || (e.value = Fe()), Oe.value = !e.value.userOptions.showOnChartHover, ft(), at.value += 1, ot.value += 1, st.value += 1, L.value.dataLabels.show = e.value.style.chart.layout.labels.dataLabels.show, L.value.showTable = e.value.table.show, L.value.showTooltip = e.value.style.chart.tooltip.show, p.value.width = e.value.style.chart.width, p.value.height = e.value.style.chart.height;
+      },
+      { deep: !0 }
+    );
+    const vt = $(() => {
+      const { top: t, right: s, bottom: l, left: o } = e.value.style.chart.padding;
+      return {
+        css: `padding:${t}px ${s}px ${l}px ${o}px`,
+        top: t,
+        right: s,
+        bottom: l,
+        left: o
+      };
+    });
+    function sl(t, s = 1e3, l = 50) {
+      return new Promise((o) => {
+        const a = t.length;
+        K.value = Array(a).fill(0), ue.value = [];
+        let n = 0;
+        t.forEach((d, c) => {
+          setTimeout(() => {
+            const k = performance.now();
+            function i(m) {
+              const x = Math.min((m - k) / s, 1), ve = Gt(x), he = d * ve;
+              K.value[c] = he, K.value = [...K.value];
+              const $e = [];
+              let Re = 0;
+              I.dataset.forEach((Ce, Ge) => {
+                const _l = Je(Ce.series.reduce(
+                  (We, Ke) => We + Je(Y(Ke.values).reduce((Sl, Il) => Sl + Il, 0)),
+                  0
+                )), Pl = Je(K.value.slice(Re, Re + Ce.series.length).reduce((We, Ke) => We + Ke, 0)), Ye = _l - Pl;
+                Ye > Number.MIN_VALUE && $e.push({
+                  name: "__ghost__",
+                  arcOf: Ce.name,
+                  arcOfId: `${f.value}_${Ge}`,
+                  id: `ghost_${f.value}_${Ge}`,
+                  seriesIndex: -1,
+                  datasetIndex: Ge,
+                  color: "transparent",
+                  value: Ye,
+                  fullValue: Ye,
+                  absoluteValues: [],
+                  ghost: !0
+                }), Re += Ce.series.length;
+              }), ue.value = $e, x < 1 ? requestAnimationFrame(i) : (n += 1, n === a && o());
+            }
+            requestAnimationFrame(i);
+          }, c * l);
+        });
+      });
+    }
+    async function ht() {
+      if (e.value.startAnimation?.show) {
+        const s = q.value.flatMap((l) => l.series).map(
+          (l) => Y(l.values).reduce((o, a) => o + a, 0)
+        );
+        K.value = s.map(() => 0), W.value = !0, ue.value = q.value.map((l, o) => {
+          const a = l.series.reduce(
+            (n, d) => n + Y(d.values).reduce((c, k) => c + k, 0),
+            0
+          );
+          return {
+            name: "__ghost__",
+            arcOf: l.name,
+            arcOfId: `${f.value}_${o}`,
+            id: `ghost_${f.value}_${o}`,
+            seriesIndex: -1,
+            datasetIndex: o,
+            color: "transparent",
+            value: a,
+            fullValue: a,
+            absoluteValues: [],
+            ghost: !0
+          };
+        }), await He(), sl(
+          s,
+          e.value.startAnimation.durationMs,
+          e.value.startAnimation.staggerMs
+        ).then(() => {
+          W.value = !1, ue.value = [];
+        });
+      } else
+        W.value = !1;
+    }
+    Fl(async () => {
+      nt.value = !0, ft(), await ht();
+    });
+    const U = Ft(null), ee = Ft(null), te = $(() => !!e.value.debug);
+    function ft() {
+      if (El(I.dataset) ? (oe({
+        componentName: "VueUiNestedDonuts",
+        type: "dataset",
+        debug: te.value
+      }), xe.value = !1, Ie.value = !0) : Ie.value = e.value.loading, e.value.responsive) {
+        const t = ql(() => {
+          const { width: s, height: l } = jl({
+            chart: M.value,
+            title: e.value.style.chart.title.text ? et.value : null,
+            legend: e.value.style.chart.legend.show ? _e.value : null,
+            source: tt.value,
+            noTitle: lt.value,
+            padding: vt.value
+          });
+          requestAnimationFrame(() => {
+            p.value.width = s, p.value.height = l;
+          });
+        });
+        U.value && (ee.value && U.value.unobserve(ee.value), U.value.disconnect()), U.value = new ResizeObserver(t), ee.value = M.value.parentNode, U.value.observe(ee.value);
+      }
+    }
+    Dl(() => {
+      U.value && (ee.value && U.value.unobserve(ee.value), U.value.disconnect());
+    });
+    const { isPrinting: De, isImaging: Ne, generatePdf: pt, generateImage: gt } = ea({
+      elementId: `nested_donuts_${f.value}`,
+      fileName: e.value.style.chart.title.text || "vue-ui-nested-donuts",
+      options: e.value.userOptions.print
+    }), nl = $(() => e.value.userOptions.show && !e.value.style.chart.title.text), ul = $(() => Ul(e.value.customPalette)), L = h({
+      dataLabels: {
+        show: e.value.style.chart.layout.labels.dataLabels.show
+      },
+      showTable: e.value.table.show,
+      showTooltip: e.value.style.chart.tooltip.show
+    });
+    fe(e, () => {
+      L.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 p = h({
+      width: e.value.style.chart.width,
+      height: e.value.style.chart.height
+    }), Ve = Kt;
+    function yt({ datapoint: t, index: s, seriesIndex: l }) {
+      e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: t, seriesIndex: l }), Ve("selectDatapoint", { datapoint: t, index: s });
+    }
+    function bt({
+      from: t,
+      to: s,
+      duration: l,
+      onUpdate: o,
+      onDone: a,
+      easing: n = Gt
+    }) {
+      const d = performance.now();
+      function c(k) {
+        const i = Math.min((k - d) / l, 1), m = n(i), x = t + (s - t) * m;
+        o(x, i), i < 1 ? requestAnimationFrame(c) : (o(s, 1), a && a());
+      }
+      requestAnimationFrame(c);
+    }
+    const b = h([]), O = $(() => {
+      be.value, q.value.forEach((s, l) => {
+        [null, void 0].includes(s.name) && oe({
+          componentName: "VueUiNestedDonuts",
+          type: "datasetSerieAttribute",
+          property: "name",
+          index: l,
+          debug: te.value
+        }), [null, void 0].includes(s.series) ? oe({
+          componentName: "VueUiNestedDonuts",
+          type: "datasetSerieAttribute",
+          property: "series",
+          index: l,
+          debug: te.value
+        }) : s.series.length === 0 ? oe({
+          componentName: "VueUiNestedDonuts",
+          type: "datasetAttributeEmpty",
+          property: `series at index ${l}`,
+          debug: te.value
+        }) : s.series.forEach((o, a) => {
+          [null, void 0].includes(o.name) && oe({
+            componentName: "VueUiNestedDonuts",
+            type: "datasetSerieAttribute",
+            property: "name",
+            index: a,
+            key: "serie",
+            debug: te.value
+          }), [null, void 0].includes(o.values) && oe({
+            componentName: "VueUiNestedDonuts",
+            type: "datasetSerieAttribute",
+            property: "values",
+            index: a,
+            key: "serie",
+            debug: te.value
+          });
+        });
+      });
+      let t = 0;
+      return q.value.map((s, l) => ({
+        ...s,
+        total: s.series.filter((o) => !b.value.includes(o.id)).map((o) => Y(o.values).reduce((a, n) => a + n, 0)).reduce((o, a) => o + a, 0),
+        datasetIndex: l,
+        id: `${f.value}_${l}`,
+        series: s.series.map((o, a) => {
+          const n = Y(o.values).reduce((d, c) => d + c, 0);
+          return {
+            name: o.name,
+            arcOf: s.name,
+            arcOfId: `${f.value}_${l}`,
+            id: `${f.value}_${l}_${a}`,
+            seriesIndex: a,
+            datasetIndex: l,
+            color: Rl(o.color) || ul.value[a] || qe[a % qe.length],
+            value: W.value ? K.value[t++] ?? 0 : n,
+            absoluteValues: o.values || []
+          };
+        })
+      }));
+    });
+    fe(() => I.dataset, (t) => {
+      Array.isArray(t) && t.length > 0 && (Ie.value = !1);
+    }, { immediate: !0 });
+    const B = $(() => Math.min(p.value.height, p.value.width) * (e.value.style.chart.layout.donut.strokeWidth / 512)), mt = $(() => [...O.value].map((t, s) => {
+      const l = t.series.filter((o) => !b.value.includes(o.id)).map((o) => o.value).reduce((o, a) => o + a, 0);
+      return {
+        ...t,
+        total: l,
+        series: t.series.filter((o) => !b.value.includes(o.id)).map((o) => ({
+          ...o,
+          proportion: o.value / l
+        }))
+      };
+    }));
+    function rl(t, s, l) {
+      let o = 0;
+      for (let a = 0; a < t.length; a += 1)
+        l.includes(t[a]) && (o += 1);
+      return o < s;
+    }
+    const C = h(mt.value);
+    fe(
+      () => mt.value,
+      (t) => C.value = t
+    );
+    function il(t) {
+      const s = t.map((l) => l.id);
+      if (t.some((l) => b.value.includes(l.id))) {
+        const l = new Set(s);
+        b.value = b.value.filter((o) => !l.has(o));
+      } else
+        b.value.push(...s);
+    }
+    function j(t) {
+      Ve("selectLegend", t);
+      const s = I.dataset.flatMap(
+        (i, m) => i.series.map((x, ve) => ({
+          value: Y(x.values).reduce((he, $e) => he + $e, 0),
+          id: `${f.value}_${m}_${ve}`,
+          arcOfId: `${f.value}_${m}`
+        }))
+      ).find((i) => i.id === t.id);
+      if (!s) return;
+      const l = O.value.flatMap((i) => i.series).find((i) => i.id === t.id)?.value ?? 0, o = C.value.flatMap((i) => i.series).find((i) => i.id === t.id);
+      let n = o ? o.value : 0;
+      const d = O.value.find(
+        (i) => i.id === s.arcOfId
+      );
+      if (!d) return;
+      const c = d.series.map((i) => i.id), k = rl(
+        c,
+        c.length - 1,
+        b.value
+      );
+      b.value.includes(t.id) ? (b.value = b.value.filter((i) => i !== t.id), e.value.serieToggleAnimation.show ? bt({
+        from: n,
+        to: l,
+        duration: e.value.serieToggleAnimation.durationMs,
+        onUpdate: (i) => {
+          C.value = C.value.map((m) => ({
+            ...m,
+            series: m.series.map((x) => x.id === t.id ? { ...x, value: i } : x)
+          }));
+        }
+      }) : C.value = C.value.map((i) => ({
+        ...i,
+        series: i.series.map((m) => m.id === t.id ? { ...m, value: l } : m)
+      }))) : k && (e.value.serieToggleAnimation.show ? bt({
+        from: n,
+        to: 0,
+        duration: e.value.serieToggleAnimation.durationMs,
+        onUpdate: (i) => {
+          C.value = C.value.map((m) => ({
+            ...m,
+            series: m.series.map((x) => x.id === t.id ? { ...x, value: i } : x)
+          }));
+        },
+        onDone: () => {
+          b.value.push(t.id);
+        }
+      }) : (C.value = C.value.map((i) => ({
+        ...i,
+        series: i.series.map((m) => m.id === t.id ? { ...m, value: 0 } : m)
+      })), b.value.push(t.id)));
+    }
+    function wt(t) {
+      if (!O.value.length)
+        return e.value.debug && console.warn("VueUiNestedDonuts - There are no series to show."), null;
+      const s = O.value.flatMap((l) => l.series).filter((l) => l.name === t);
+      return s || (e.value.debug && console.warn(`VueUiNestedDonuts - Series name not found "${t}"`), null);
+    }
+    function dl(t) {
+      const s = wt(t);
+      s !== null && (Array.isArray(s) ? s.forEach((l) => {
+        b.value.includes(l.id) && j({ id: l.id });
+      }) : b.value.includes(s.id) && j({ id: s.id }));
+    }
+    function cl(t) {
+      const s = wt(t);
+      s !== null && (Array.isArray(s) ? s.forEach((l) => {
+        b.value.includes(l.id) || j({ id: l.id });
+      }) : b.value.includes(s.id) || j({ id: s.id }));
+    }
+    const me = $(() => B.value / O.value.length * e.value.style.chart.layout.donut.spacingRatio), kt = $(() => C.value.map((t, s) => B.value - s * B.value / O.value.length)), J = $(() => C.value.map((t, s) => {
+      const l = Math.abs(t.series.map((k) => k.value).reduce((k, i) => k + i, 0)) > 0, o = B.value - s * B.value / C.value.length, a = W.value ? ue.value.find((k) => k.datasetIndex === s) : null, n = [...t.series, ...a ? [a] : []].map((k) => ({
+        ...k,
+        value: k.value < 1e-11 ? Number.MIN_VALUE : k.value
+      })), d = je(
+        { series: [
+          { name: "_", color: e.value.style.chart.layout.donut.emptyFill, value: 1 }
+        ] },
+        p.value.width / 2,
+        p.value.height / 2,
+        o,
+        o,
+        1.99999,
+        2,
+        1,
+        360,
+        105.25,
+        me.value
+      ), c = `M ${p.value.width / 2},${p.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: l,
+        radius: o,
+        skeleton: d,
+        fullCirclePath: c,
+        donut: je(
+          { series: n },
+          p.value.width / 2,
+          p.value.height / 2,
+          o,
+          o,
+          1.99999,
+          2,
+          1,
+          360,
+          105.25,
+          me.value
+        )
+      };
+    })), $t = $(() => [...O.value].map((t, s) => {
+      const l = s * B.value / O.value.length;
+      return {
+        sizeRatio: l,
+        donut: je(
+          { series: [{ value: 1 }] },
+          p.value.width / 2,
+          p.value.height / 2,
+          B.value - l,
+          B.value - l,
+          1.99999,
+          2,
+          1,
+          360,
+          105.25,
+          B.value / O.value.length * e.value.style.chart.layout.donut.spacingRatio
+        )[0]
+      };
+    })), we = h(null), le = h(null), Q = h(null), Me = h(null);
+    function vl({ datapoint: t, seriesIndex: s }) {
+      e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: t, seriesIndex: s }), se.value = !1, we.value = null, ne.value = null, le.value = null, Q.value = null, N.value = null, ie.value = "pointer";
+    }
+    function Ct({
+      val: t,
+      percentage: s,
+      showVal: l,
+      showPercentage: o,
+      config: a
+    }) {
+      return Hl({
+        config: a,
+        val: t,
+        percentage: s,
+        showVal: l,
+        showPercentage: o
+      });
+    }
+    function At({ datapoint: t, _relativeIndex: s, seriesIndex: l, triggerMode: o = "pointer" }) {
+      e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: t, seriesIndex: l }), ie.value = o, N.value = l, we.value = t.arcOfId, le.value = t.id, Q.value = l, ne.value = t.id, Me.value = {
+        datapoint: t,
+        seriesIndex: l,
+        series: C.value,
+        config: e.value
+      };
+      const a = e.value.style.chart.tooltip.customFormat;
+      if (Rt(a) && Xl(
+        () => a({
+          seriesIndex: l,
+          datapoint: t,
+          series: C.value,
+          config: e.value
+        })
+      ))
+        Te.value = a({
+          seriesIndex: l,
+          datapoint: t,
+          series: C.value,
+          config: e.value
+        });
+      else {
+        let n = "";
+        if (e.value.style.chart.tooltip.showAllItemsAtIndex && b.value.length === 0) {
+          const d = C.value.map((c) => c.series.find((k) => k.seriesIndex === l));
+          d.forEach((c, k) => {
+            if (!c) return "";
+            n += `
+                    <div style="display:flex; flex-direction: column; justify-content:flex-start; align-items:flex-start;padding:6px 0; ${k < d.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>
+                            <b>
+                                ${Ct({
+              config: e.value.style.chart.tooltip,
+              showVal: e.value.style.chart.tooltip.showValue,
+              showPercentage: e.value.style.chart.tooltip.showPercentage,
+              val: Ae(
+                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: l }
+              ),
+              percentage: D({
+                v: c.proportion * 100,
+                s: "%",
+                r: e.value.style.chart.tooltip.roundingPercentage
+              })
+            })}
+                            </b>
+                        </span>
+                    </div>
+                `;
+          });
+        } else
+          n += `<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>`, n += `<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 && (n += `<b>${Ae(
+            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: l }
+          )}</b>`), e.value.style.chart.tooltip.showPercentage && (e.value.style.chart.tooltip.showValue ? n += `<span>(${D({
+            v: t.proportion * 100,
+            s: "%",
+            r: e.value.style.chart.tooltip.roundingPercentage
+          })})</span></div>` : n += `<b>${D({
+            v: t.proportion * 100,
+            s: "%",
+            r: e.value.style.chart.tooltip.roundingPercentage
+          })}</b></div>`);
+        Te.value = `<div style="font-size:${e.value.style.chart.tooltip.fontSize}px">${n}</div>`;
+      }
+      se.value = !0;
+    }
+    function Lt(t) {
+      return t.proportion * 100 > e.value.style.chart.layout.labels.dataLabels.hideUnderValue;
+    }
+    function xt(t, s) {
+      if (!e.value.useBlurOnHover)
+        return "";
+      if (e.value.style.chart.tooltip.showAllItemsAtIndex && b.value.length === 0)
+        return [null, void 0].includes(Q.value) || Q.value === s ? "" : `url(#blur_${f.value})`;
+      if (!e.value.style.chart.tooltip.showAllItemsAtIndex || b.value.length)
+        return [null, void 0].includes(le.value) || le.value === t.id ? "" : `url(#blur_${f.value})`;
+    }
+    const ke = $(() => O.value.map((t, s) => {
+      const l = t.series.filter(
+        (a) => !b.value.includes(a.id)
+      ), o = W.value ? l.map((a) => {
+        const n = q.value[s].series.findIndex(
+          (d) => d.name === a.name
+        );
+        return Y(
+          q.value[s].series[n].values
+        ).reduce((d, c) => d + c, 0);
+      }).reduce((a, n) => a + n, 0) : l.map((a) => a.value).reduce((a, n) => a + n, 0);
+      return t.series.map((a, n) => {
+        const d = Y(q.value[s].series[n].values).reduce(
+          (ve, he) => ve + he,
+          0
+        ), c = W.value ? d : a.value, k = Ae(
+          e.value.style.chart.layout.labels.dataLabels.formatter,
+          c,
+          D({
+            p: e.value.style.chart.layout.labels.dataLabels.prefix,
+            v: c,
+            s: e.value.style.chart.layout.labels.dataLabels.suffix,
+            r: e.value.style.chart.legend.roundingValue
+          }),
+          { datapoint: a, seriesIndex: n }
+        ), i = isNaN(c / o) || b.value.includes(a.id) ? "-" : D({
+          v: c / o * 100,
+          s: "%",
+          r: e.value.style.chart.legend.roundingPercentage
+        }), m = Ct({
+          val: k,
+          percentage: i,
+          showVal: e.value.style.chart.legend.showValue,
+          showPercentage: e.value.style.chart.legend.showPercentage,
+          config: e.value.style.chart.legend
+        }), x = `${a.name}${e.value.style.chart.legend.showPercentage || e.value.style.chart.legend.showValue ? ": " : ""}${m}`;
+        return {
+          name: a.name,
+          color: a.color,
+          value: c,
+          display: x,
+          svgDisplay: `${a.arcOf ? `${a.arcOf} - ` : ""}${x}`,
+          shape: "circle",
+          arcOf: a.arcOf,
+          id: a.id,
+          seriesIndex: n,
+          datasetIndex: s,
+          total: o,
+          opacity: b.value.includes(a.id) ? 0.5 : 1,
+          segregate: () => j(a),
+          isSegregated: b.value.includes(a.id)
+        };
+      });
+    })), hl = $(() => ({
+      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" : ""
+    })), R = $(() => {
+      const t = C.value.flatMap((l) => l.series.map((o) => ({
+        name: `${l.name} - ${o.name}`,
+        color: o.color,
+        total: l.total
+      }))), s = C.value.flatMap((l) => l.series.map((o) => o.value));
+      return { head: t, body: s };
+    });
+    function ze(t = null) {
+      He(() => {
+        const s = R.value.head.map((a, n) => [
+          [a.name],
+          [R.value.body[n]],
+          [
+            isNaN(R.value.body[n] / a.total) ? "-" : R.value.body[n] / a.total * 100
+          ]
+        ]), l = [
+          [e.value.style.chart.title.text],
+          [e.value.style.chart.title.subtitle.text],
+          [[""], ["val"], ["%"]]
+        ].concat(s), o = Wl(l);
+        t ? t(o) : Kl({
+          csvContent: o,
+          title: e.value.style.chart.title.text || "vue-ui-nested-donuts"
+        });
+      });
+    }
+    const ae = $(() => {
+      const t = [
+        e.value.table.columnNames.series,
+        e.value.table.columnNames.value,
+        e.value.table.columnNames.percentage
+      ], s = R.value.head.map((n, d) => {
+        const c = D({
+          p: e.value.style.chart.layout.labels.dataLabels.prefix,
+          v: R.value.body[d],
+          s: e.value.style.chart.layout.labels.dataLabels.suffix,
+          r: e.value.table.td.roundingValue
+        });
+        return [
+          {
+            color: n.color,
+            name: n.name
+          },
+          c,
+          isNaN(R.value.body[d] / n.total) ? "-" : D({
+            v: R.value.body[d] / n.total * 100,
+            s: "%",
+            r: e.value.table.td.roundingPercentage
+          })
+        ];
+      }), l = s.map((n) => n.map((d, c) => c === 0 ? d.name : d)), o = {
+        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,
+        a11yBody: l,
+        config: o
+      };
+    });
+    function fl() {
+      return O.value;
+    }
+    function Tt() {
+      L.value.showTable = !L.value.showTable;
+    }
+    function _t() {
+      L.value.dataLabels.show = !L.value.dataLabels.show;
+    }
+    function Pt() {
+      L.value.showTooltip = !L.value.showTooltip;
+    }
+    const de = h(!1);
+    function Be() {
+      de.value = !de.value;
+    }
+    async function pl({ scale: t = 2 } = {}) {
+      if (!M.value) return;
+      const { width: s, height: l } = M.value.getBoundingClientRect(), o = s / l, { imageUri: a, base64: n } = await sa({ domElement: M.value, base64: !0, img: !0, scale: t });
+      return {
+        imageUri: a,
+        base64: n,
+        title: e.value.style.chart.title.text,
+        width: s,
+        height: l,
+        aspectRatio: o
+      };
+    }
+    const Ee = h(null);
+    function gl() {
+      if (!Ee.value) return;
+      const { x: t, y: s, width: l, height: o } = Ee.value.getBBox();
+      z.value && z.value.setAttribute("viewBox", `${t} ${s} ${l + Math.min(0, t)} ${o + Math.min(0, s)}`);
+    }
+    const ce = $(() => {
+      const t = e.value.table.useDialog && !e.value.table.show, s = L.value.showTable;
+      return {
+        component: t ? el : qt,
+        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: X.value,
+          fullscreenParent: M.value,
+          forcedWidth: Math.min(800, window.innerWidth * 0.8),
+          isCursorPointer: H.value
+        } : {
+          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
+            }
+          }
+        }
+      };
+    });
+    fe(() => L.value.showTable, (t) => {
+      e.value.table.show || (t && e.value.table.useDialog && re.value ? re.value.open() : "close" in re.value && re.value.close());
+    });
+    function St() {
+      L.value.showTable = !1, Pe.value && Pe.value.setTableIconState(!1);
+    }
+    const yl = $(() => e.value.style.chart.backgroundColor), bl = $(() => e.value.style.chart.legend), ml = $(() => e.value.style.chart.title), wl = $(() => ke.value.flat().map((t) => ({
+      ...t,
+      name: t.svgDisplay
+    }))), { exportSvg: kl, getSvg: $l } = ta({
+      svg: z,
+      title: ml,
+      legend: bl,
+      legendItems: wl,
+      backgroundColor: yl
+    });
+    async function It({ isCb: t }) {
+      ye.value = !0, await He();
+      try {
+        if (t) {
+          const { blob: s, url: l, text: o, dataUrl: a } = await $l();
+          await Promise.resolve(e.value.userOptions.callbacks.svg({ blob: s, url: l, text: o, dataUrl: a }));
+        } else
+          await Promise.resolve(kl());
+      } finally {
+        ye.value = !1;
+      }
+    }
+    function Cl(t) {
+      if (t?.stage === "start") {
+        ge.value = !0;
+        return;
+      }
+      if (t?.stage === "end") {
+        ge.value = !1;
+        return;
+      }
+      gt();
+    }
+    async function Ot() {
+      if (Ve("copyAlt", {
+        config: e.value,
+        dataset: C.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: C.value
+      }));
+    }
+    const F = $(() => J.value.flatMap((t) => t.donut.filter((s) => !s.ghost)));
+    function Al() {
+      N.value = null, Se.value = !0;
+    }
+    function Ll() {
+      N.value = null, ie.value = "pointer", se.value = !1, we.value = null, ne.value = null, le.value = null, Q.value = null, Se.value = !1;
+    }
+    function xl(t) {
+      if (!z.value || de.value || document.activeElement !== z.value || !F.value.length) return;
+      const s = ["ArrowLeft", "ArrowUp"].includes(t.key), l = ["ArrowRight", "ArrowDown"].includes(t.key), o = t.key === "Enter" || t.key === " ", a = t.key === "Escape";
+      if (!s && !l && !o && !a) return;
+      if (t.preventDefault(), t.stopPropagation(), a) {
+        N.value = null, ie.value = "pointer", se.value = !1, we.value = null, ne.value = null, le.value = null, Q.value = null;
+        return;
+      }
+      if (o) {
+        if (N.value === null) return;
+        const m = F.value[N.value];
+        if (!m) return;
+        yt({
+          datapoint: m,
+          index: N.value,
+          seriesIndex: m.seriesIndex
+        });
+        return;
+      }
+      let n = N.value;
+      const d = Q.value, c = n !== null && n >= 0 && n < F.value.length, k = d !== null && d >= 0 && d < F.value.length;
+      c ? l ? (n += 1, n >= F.value.length && (n = 0)) : s && (n -= 1, n < 0 && (n = F.value.length - 1)) : k ? (n = l ? d + 1 : d - 1, n >= F.value.length && (n = 0), n < 0 && (n = F.value.length - 1)) : l ? n = 0 : n = F.value.length - 1;
+      const i = F.value[n];
+      i && (N.value = n, Tl(), At({
+        datapoint: i,
+        seriesIndex: i.seriesIndex,
+        triggerMode: "keyboard"
+      }));
+    }
+    function Tl() {
+      if (!z.value) return;
+      const t = z.value.getBoundingClientRect();
+      ut.value = {
+        x: t.left + t.width / 2,
+        y: t.top + t.height / 2
+      };
+    }
+    const Ue = $(() => {
+      const t = ae.value?.colNames ?? [], s = ae.value?.a11yBody ?? [];
+      return { headers: t, rows: s };
+    });
+    return Wt({
+      autoSize: gl,
+      getData: fl,
+      getImage: pl,
+      generatePdf: pt,
+      generateCsv: ze,
+      generateImage: gt,
+      generateSvg: It,
+      hideSeries: cl,
+      showSeries: dl,
+      toggleTable: Tt,
+      toggleLabels: _t,
+      toggleTooltip: Pt,
+      toggleAnnotator: Be,
+      toggleFullscreen: rt,
+      copyAlt: Ot
+    }), (t, s) => (u(), r("div", {
+      ref_key: "nestedDonutsChart",
+      ref: M,
+      class: Z(`vue-data-ui-component vue-ui-nested-donuts ${X.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${e.value.useCssAnimation ? "" : "vue-ui-dna"}`),
+      style: pe(`font-family:${e.value.style.fontFamily};width:100%; text-align:center;background:${e.value.style.chart.backgroundColor}`),
+      id: `nested_donuts_${f.value}`,
+      onMouseenter: s[2] || (s[2] = () => v(dt)(!0)),
+      onMouseleave: s[3] || (s[3] = () => v(dt)(!1))
+    }, [
+      g("div", {
+        id: `chart-instructions-${f.value}`,
+        class: "sr-only"
+      }, [
+        g("p", null, E(e.value.a11y.translations.keyboardNavigation), 1)
+      ], 8, ha),
+      Ue.value?.rows?.length ? (u(), V(ia, {
+        key: 0,
+        uid: f.value,
+        head: Ue.value.headers,
+        body: Ue.value.rows,
+        notice: e.value.a11y.translations.tableAvailable,
+        caption: e.value.a11y.translations.tableCaption
+      }, null, 8, ["uid", "head", "body", "notice", "caption"])) : A("", !0),
+      e.value.userOptions.buttons.annotator ? (u(), V(v(Qt), {
+        key: 1,
+        svgRef: v(z),
+        backgroundColor: e.value.style.chart.backgroundColor,
+        color: e.value.style.chart.color,
+        active: de.value,
+        isCursorPointer: H.value,
+        onClose: Be
+      }, {
+        "annotator-action-close": y(() => [
+          w(t.$slots, "annotator-action-close", {}, void 0, !0)
+        ]),
+        "annotator-action-color": y(({ color: l }) => [
+          w(t.$slots, "annotator-action-color", P(S({ color: l })), void 0, !0)
+        ]),
+        "annotator-action-draw": y(({ mode: l }) => [
+          w(t.$slots, "annotator-action-draw", P(S({ mode: l })), void 0, !0)
+        ]),
+        "annotator-action-undo": y(({ disabled: l }) => [
+          w(t.$slots, "annotator-action-undo", P(S({ disabled: l })), void 0, !0)
+        ]),
+        "annotator-action-redo": y(({ disabled: l }) => [
+          w(t.$slots, "annotator-action-redo", P(S({ disabled: l })), void 0, !0)
+        ]),
+        "annotator-action-delete": y(({ disabled: l }) => [
+          w(t.$slots, "annotator-action-delete", P(S({ disabled: l })), void 0, !0)
+        ]),
+        _: 3
+      }, 8, ["svgRef", "backgroundColor", "color", "active", "isCursorPointer"])) : A("", !0),
+      nl.value ? (u(), r("div", {
+        key: 2,
+        ref_key: "noTitle",
+        ref: lt,
+        class: "vue-data-ui-no-title-space",
+        style: "height:36px; width: 100%;background:transparent"
+      }, null, 512)) : A("", !0),
+      e.value.style.chart.title.text ? (u(), r("div", {
+        key: 3,
+        ref_key: "chartTitle",
+        ref: et
+      }, [
+        (u(), V(na, {
+          key: `title_${at.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)) : A("", !0),
+      g("div", {
+        id: `legend-top-${f.value}`
+      }, null, 8, fa),
+      e.value.userOptions.show && xe.value && (v(ct) || v(Oe)) ? (u(), V(v(Jt), {
+        ref_key: "userOptionsRef",
+        ref: Pe,
+        key: `user_option_${Ze.value}`,
+        backgroundColor: e.value.style.chart.backgroundColor,
+        color: e.value.style.chart.color,
+        isPrinting: v(De),
+        isImaging: v(Ne),
+        uid: f.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,
+        hasAltCopy: e.value.userOptions.buttons.altCopy,
+        isFullscreen: X.value,
+        isTooltip: L.value.showTooltip,
+        titles: { ...e.value.userOptions.buttonTitles },
+        chartElement: M.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,
+        isCursorPointer: H.value,
+        onToggleFullscreen: rt,
+        onGeneratePdf: v(pt),
+        onGenerateCsv: ze,
+        onGenerateImage: Cl,
+        onGenerateSvg: It,
+        onToggleTable: Tt,
+        onToggleLabels: _t,
+        onToggleTooltip: Pt,
+        onToggleAnnotator: Be,
+        onCopyAlt: Ot,
+        style: pe({
+          visibility: v(ct) ? v(Oe) ? "visible" : "hidden" : "visible"
+        })
+      }, Dt({ _: 2 }, [
+        t.$slots.menuIcon ? {
+          name: "menuIcon",
+          fn: y(({ isOpen: l, color: o }) => [
+            w(t.$slots, "menuIcon", P(S({ isOpen: l, color: o })), void 0, !0)
+          ]),
+          key: "0"
+        } : void 0,
+        t.$slots.optionTooltip ? {
+          name: "optionTooltip",
+          fn: y(() => [
+            w(t.$slots, "optionTooltip", {}, void 0, !0)
+          ]),
+          key: "1"
+        } : void 0,
+        t.$slots.optionPdf ? {
+          name: "optionPdf",
+          fn: y(() => [
+            w(t.$slots, "optionPdf", {}, void 0, !0)
+          ]),
+          key: "2"
+        } : void 0,
+        t.$slots.optionCsv ? {
+          name: "optionCsv",
+          fn: y(() => [
+            w(t.$slots, "optionCsv", {}, void 0, !0)
+          ]),
+          key: "3"
+        } : void 0,
+        t.$slots.optionImg ? {
+          name: "optionImg",
+          fn: y(() => [
+            w(t.$slots, "optionImg", {}, void 0, !0)
+          ]),
+          key: "4"
+        } : void 0,
+        t.$slots.optionSvg ? {
+          name: "optionSvg",
+          fn: y(() => [
+            w(t.$slots, "optionSvg", {}, void 0, !0)
+          ]),
+          key: "5"
+        } : void 0,
+        t.$slots.optionTable ? {
+          name: "optionTable",
+          fn: y(() => [
+            w(t.$slots, "optionTable", {}, void 0, !0)
+          ]),
+          key: "6"
+        } : void 0,
+        t.$slots.optionLabels ? {
+          name: "optionLabels",
+          fn: y(() => [
+            w(t.$slots, "optionLabels", {}, void 0, !0)
+          ]),
+          key: "7"
+        } : void 0,
+        t.$slots.optionFullscreen ? {
+          name: "optionFullscreen",
+          fn: y(({ toggleFullscreen: l, isFullscreen: o }) => [
+            w(t.$slots, "optionFullscreen", P(S({ toggleFullscreen: l, isFullscreen: o })), void 0, !0)
+          ]),
+          key: "8"
+        } : void 0,
+        t.$slots.optionAnnotator ? {
+          name: "optionAnnotator",
+          fn: y(({ toggleAnnotator: l, isAnnotator: o }) => [
+            w(t.$slots, "optionAnnotator", P(S({ toggleAnnotator: l, isAnnotator: o })), void 0, !0)
+          ]),
+          key: "9"
+        } : void 0,
+        t.$slots.optionAltCopy ? {
+          name: "optionAltCopy",
+          fn: y(({ altCopy: l }) => [
+            w(t.$slots, "optionAltCopy", P(S({ altCopy: l })), void 0, !0)
+          ]),
+          key: "10"
+        } : void 0
+      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasTooltip", "hasPdf", "hasXls", "hasImg", "hasSvg", "hasTable", "hasLabel", "hasFullscreen", "hasAltCopy", "isFullscreen", "isTooltip", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "tableDialog", "isCursorPointer", "onGeneratePdf", "style"])) : A("", !0),
+      g("div", pa, [
+        (u(), r("svg", {
+          ref_key: "svgRef",
+          ref: z,
+          xmlns: v(Gl),
+          "aria-describedby": `chart-instructions-${f.value}`,
+          class: Z({
+            "vue-data-ui-fullscreen--on": X.value,
+            "vue-data-ui-fulscreen--off": !X.value,
+            "vue-data-ui-svg": !0
+          }),
+          viewBox: `0 0 ${p.value.width <= 0 ? 1e-3 : p.value.width} ${p.value.height < 0 ? 1e-3 : p.value.height}`,
+          style: pe(`max-width:100%; overflow: visible; background:transparent;color:${e.value.style.chart.color};${vt.value.css}`),
+          tabindex: "0",
+          onFocus: Al,
+          onBlur: Ll,
+          onKeydown: xl
+        }, [
+          g("g", {
+            ref_key: "G",
+            ref: Ee,
+            class: "vue-data-ui-g"
+          }, [
+            Xe(v(Zt)),
+            t.$slots["chart-background"] ? (u(), r("foreignObject", {
+              key: 0,
+              x: 0,
+              y: 0,
+              width: p.value.width <= 0 ? 1e-3 : p.value.width,
+              height: p.value.height < 0 ? 1e-3 : p.value.height,
+              style: {
+                pointerEvents: "none"
+              }
+            }, [
+              w(t.$slots, "chart-background", {}, void 0, !0)
+            ], 8, ya)) : A("", !0),
+            g("defs", null, [
+              (u(!0), r(T, null, _($t.value, (l, o) => (u(), r("radialGradient", {
+                id: `radial_${f.value}_${o}`
+              }, [
+                s[4] || (s[4] = g("stop", {
+                  offset: "0%",
+                  "stop-color": "#FFFFFF",
+                  "stop-opacity": "0"
+                }, null, -1)),
+                g("stop", {
+                  offset: `${(1 - me.value / kt.value[o]) * 100}%`,
+                  "stop-color": v(Yl)("#FFFFFF", 0),
+                  "stop-opacity": "0"
+                }, null, 8, ma),
+                g("stop", {
+                  offset: `${(1 - me.value / kt.value[o] / 2) * 100}%`,
+                  "stop-color": "#FFFFFF",
+                  "stop-opacity": e.value.style.chart.gradientIntensity / 100
+                }, null, 8, wa),
+                s[5] || (s[5] = g("stop", {
+                  offset: "100%",
+                  "stop-color": "#FFFFFF",
+                  "stop-opacity": "0"
+                }, null, -1))
+              ], 8, ba))), 256))
+            ]),
+            g("defs", null, [
+              g("filter", {
+                id: `blur_${f.value}`,
+                x: "-50%",
+                y: "-50%",
+                width: "200%",
+                height: "200%"
+              }, [
+                g("feGaussianBlur", {
+                  in: "SourceGraphic",
+                  stdDeviation: 2,
+                  id: `blur_std_${f.value}`
+                }, null, 8, $a),
+                s[6] || (s[6] = g("feColorMatrix", {
+                  type: "saturate",
+                  values: "0"
+                }, null, -1))
+              ], 8, ka),
+              g("filter", {
+                id: `shadow_${f.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, Aa)
+              ], 8, Ca)
+            ]),
+            g("defs", null, [
+              (u(!0), r(T, null, _(J.value, (l, o) => (u(), r("path", {
+                key: `path-full-${o}`,
+                id: `path-full-${o}-${f.value}`,
+                d: l.fullCirclePath,
+                fill: "none"
+              }, null, 8, La))), 128))
+            ]),
+            (u(!0), r(T, null, _(J.value, (l, o) => (u(), r("g", null, [
+              l.hasData ? (u(!0), r(T, { key: 0 }, _(l.donut.filter((a) => !a.ghost), (a, n) => (u(), r("g", null, [
+                g("path", {
+                  class: "vue-ui-donut-arc-path",
+                  d: a.arcSlice,
+                  fill: a.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: xt(a, n)
+                }, null, 8, xa)
+              ]))), 256)) : (u(!0), r(T, { key: 1 }, _(l.skeleton, (a, n) => (u(), r("g", null, [
+                g("path", {
+                  class: "vue-ui-donut-arc-path",
+                  d: a.arcSlice,
+                  fill: a.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, Ta)
+              ]))), 256))
+            ]))), 256)),
+            e.value.style.chart.useGradient ? (u(), r("g", _a, [
+              (u(!0), r(T, null, _($t.value, (l, o) => (u(), r("g", null, [
+                g("path", {
+                  d: l.donut.arcSlice,
+                  fill: `url(#radial_${f.value}_${o})`,
+                  stroke: "transparent",
+                  "stroke-width": "0"
+                }, null, 8, Pa)
+              ]))), 256))
+            ])) : A("", !0),
+            e.value.style.chart.layout.labels.dataLabels.showDonutName ? (u(), r("g", Sa, [
+              e.value.style.chart.layout.labels.dataLabels.curvedDonutName ? (u(!0), r(T, { key: 0 }, _(J.value, (l, o) => (u(), r("g", null, [
+                (u(!0), r(T, null, _(l.donut, (a, n) => (u(), r("g", null, [
+                  n === 0 && p.value.width && p.value.height ? (u(), r("text", {
+                    key: 0,
+                    class: Z({ 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}-${f.value}`,
+                      startOffset: "50%",
+                      "text-anchor": "middle",
+                      method: "align",
+                      spacing: "auto"
+                    }, E(e.value.style.chart.layout.labels.dataLabels.donutNameAbbreviation ? v(Bt)({
+                      source: l.name,
+                      length: e.value.style.chart.layout.labels.dataLabels.donutNameMaxAbbreviationSize
+                    }) : l.name), 9, Oa)
+                  ], 10, Ia)) : A("", !0)
+                ]))), 256))
+              ]))), 256)) : (u(!0), r(T, { key: 1 }, _(J.value, (l, o) => (u(), r("g", null, [
+                (u(!0), r(T, null, _(l.donut, (a, n) => (u(), r("g", null, [
+                  n === 0 && p.value.width && p.value.height ? (u(), r("text", {
+                    key: 0,
+                    class: Z({ animated: e.value.useCssAnimation }),
+                    x: p.value.width / 2,
+                    y: a.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
+                  }, E(e.value.style.chart.layout.labels.dataLabels.donutNameAbbreviation ? v(Bt)({
+                    source: l.name,
+                    length: e.value.style.chart.layout.labels.dataLabels.donutNameMaxAbbreviationSize
+                  }) : l.name), 11, Fa)) : A("", !0)
+                ]))), 256))
+              ]))), 256))
+            ])) : A("", !0),
+            e.value.style.chart.layout.labels.dataLabels.show ? (u(), r("g", Da, [
+              (u(!0), r(T, null, _(J.value, (l, o) => (u(), r("g", null, [
+                (u(!0), r(T, null, _(l.donut.filter((a) => !a.ghost), (a, n) => (u(), r("g", {
+                  filter: xt(a, n)
+                }, [
+                  Nt(g("text", {
+                    class: Z({ animated: e.value.useCssAnimation }),
+                    opacity: Lt(a) ? 1 : 0,
+                    "text-anchor": v(Le)(a, !0).anchor,
+                    x: v(Le)(
+                      a,
+                      !1,
+                      e.value.style.chart.layout.labels.dataLabels.offsetX
+                    ).x || 0,
+                    y: v(Et)(
+                      a,
+                      e.value.style.chart.layout.labels.dataLabels.offsetY,
+                      e.value.style.chart.layout.labels.dataLabels.offsetY
+                    ) + (e.value.style.chart.layout.labels.dataLabels.showValueFirst && e.value.style.chart.layout.labels.dataLabels.showValue ? e.value.style.chart.layout.labels.dataLabels.fontSize : 0),
+                    fill: e.value.style.chart.layout.labels.dataLabels.useSerieColor ? a.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"
+                  }, E(v(Ut)(
+                    v(D)({
+                      v: a.proportion * 100,
+                      s: "%",
+                      r: e.value.style.chart.layout.labels.dataLabels.roundingPercentage
+                    }),
+                    e.value.style.chart.layout.labels.dataLabels.usePercentageParens ? "(" : "",
+                    e.value.style.chart.layout.labels.dataLabels.usePercentageParens ? ")" : ""
+                  )), 11, Va), [
+                    [Vt, L.value.dataLabels.show && e.value.style.chart.layout.labels.dataLabels.showPercentage]
+                  ]),
+                  Nt(g("text", {
+                    class: Z({ animated: e.value.useCssAnimation }),
+                    opacity: Lt(a) ? 1 : 0,
+                    "text-anchor": v(Le)(a, !0).anchor,
+                    x: v(Le)(
+                      a,
+                      !1,
+                      e.value.style.chart.layout.labels.dataLabels.offsetX
+                    ).x || 0,
+                    y: v(Et)(
+                      a,
+                      e.value.style.chart.layout.labels.dataLabels.offsetY,
+                      e.value.style.chart.layout.labels.dataLabels.offsetY
+                    ) + (e.value.style.chart.layout.labels.dataLabels.showValueFirst || !e.value.style.chart.layout.labels.dataLabels.showPercentage ? 0 : e.value.style.chart.layout.labels.dataLabels.fontSize),
+                    fill: e.value.style.chart.layout.labels.dataLabels.useSerieColor ? a.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"
+                  }, E(v(Ut)(
+                    v(Ae)(
+                      e.value.style.chart.layout.labels.dataLabels.formatter,
+                      a.value,
+                      v(D)({
+                        p: e.value.style.chart.layout.labels.dataLabels.prefix,
+                        v: a.value,
+                        s: e.value.style.chart.layout.labels.dataLabels.suffix,
+                        r: e.value.style.chart.layout.labels.dataLabels.roundingValue
+                      }),
+                      { datapoint: a, seriesIndex: o, datapointIndex: n }
+                    ),
+                    e.value.style.chart.layout.labels.dataLabels.useValueParens ? "(" : "",
+                    e.value.style.chart.layout.labels.dataLabels.useValueParens ? ")" : ""
+                  )), 11, Ma), [
+                    [Vt, L.value.dataLabels.show && e.value.style.chart.layout.labels.dataLabels.showValue]
+                  ])
+                ], 8, Na))), 256))
+              ]))), 256))
+            ])) : A("", !0),
+            (u(!0), r(T, null, _(J.value, (l, o) => (u(), r("g", null, [
+              (u(!0), r(T, null, _(l.donut, (a, n) => (u(), r("g", null, [
+                g("path", {
+                  d: a.arcSlice,
+                  fill: ne.value === a.id ? e.value.style.chart.layout.donut.selectedColor : "transparent",
+                  onMouseenter: (d) => At({
+                    datapoint: a,
+                    relativeIndex: F.value.findIndex((c) => c.id === a.id),
+                    seriesIndex: a.seriesIndex
+                  }),
+                  onClick: (d) => yt({ datapoint: a, index: n, seriesIndex: a.seriesIndex }),
+                  onMouseleave: (d) => vl({ datapoint: a, seriesIndex: a.seriesIndex })
+                }, null, 40, za)
+              ]))), 256))
+            ]))), 256)),
+            w(t.$slots, "svg", {
+              svg: {
+                ...p.value,
+                isPrintingImg: v(De) | v(Ne) | ge.value,
+                isPrintingSvg: ye.value
+              }
+            }, void 0, !0)
+          ], 512)
+        ], 46, ga)),
+        t.$slots.hint ? (u(), r("div", Ba, [
+          w(t.$slots, "hint", P(S({ hint: e.value.a11y.translations.keyboardNavigation, isVisible: Se.value })), void 0, !0)
+        ])) : A("", !0)
+      ]),
+      t.$slots.watermark ? (u(), r("div", Ea, [
+        w(t.$slots, "watermark", P(S({ isPrinting: v(De) || v(Ne) || ge.value || ye.value })), void 0, !0)
+      ])) : A("", !0),
+      Xe(v(Xt), {
+        teleportTo: e.value.style.chart.tooltip.teleportTo,
+        show: L.value.showTooltip && se.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: M.value,
+        content: Te.value,
+        isFullscreen: X.value,
+        isCustom: v(Rt)(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,
+        isA11yMode: ie.value === "keyboard",
+        a11yPosition: ut.value
+      }, {
+        "tooltip-before": y(() => [
+          w(t.$slots, "tooltip-before", P(S({ ...Me.value })), void 0, !0)
+        ]),
+        "tooltip-after": y(() => [
+          w(t.$slots, "tooltip-after", P(S({ ...Me.value })), void 0, !0)
+        ]),
+        _: 3
+      }, 8, ["teleportTo", "show", "backgroundColor", "color", "borderRadius", "borderColor", "borderWidth", "fontSize", "backgroundOpacity", "position", "offsetY", "parent", "content", "isFullscreen", "isCustom", "smooth", "backdropFilter", "smoothForce", "smoothSnapThreshold", "isA11yMode", "a11yPosition"]),
+      g("div", {
+        id: `legend-bottom-${f.value}`
+      }, null, 8, Ua),
+      nt.value ? (u(), V(Nl, {
+        key: 6,
+        to: e.value.style.chart.legend.position === "top" ? `#legend-top-${f.value}` : `#legend-bottom-${f.value}`
+      }, [
+        e.value.style.chart.legend.show ? (u(), r("div", {
+          key: 0,
+          ref_key: "chartLegend",
+          ref: _e,
+          class: Z({ "vue-ui-nested-donuts-legend": ke.value.length > 1 })
+        }, [
+          (u(!0), r(T, null, _(ke.value, (l, o) => (u(), V(ra, {
+            key: `legend_${o}_${st.value}`,
+            legendSet: l,
+            config: hl.value,
+            isCursorPointer: H.value,
+            onClickMarker: s[0] || (s[0] = ({ legend: a }) => j(a))
+          }, {
+            legendTitle: y(({ titleSet: a }) => [
+              a[0] && a[0].arcOf ? (u(), r("div", Ra, E(a[0].arcOf), 1)) : A("", !0)
+            ]),
+            item: y(({ legend: a, index: n }) => [
+              g("div", {
+                onClick: (d) => j(a),
+                style: pe(`opacity:${b.value.includes(a.id) ? 0.5 : 1}`)
+              }, E(a.display), 13, Ga)
+            ]),
+            legendToggle: y(() => [
+              l.length > 2 && e.value.style.chart.legend.selectAllToggle.show && !v(be) ? (u(), V(da, {
+                key: `toggle-${o}`,
+                backgroundColor: e.value.style.chart.legend.selectAllToggle.backgroundColor,
+                color: e.value.style.chart.legend.selectAllToggle.color,
+                fontSize: e.value.style.chart.legend.fontSize,
+                checked: l.some((a) => b.value.includes(a.id)),
+                isCursorPointer: H.value,
+                onToggle: (a) => il(l)
+              }, null, 8, ["backgroundColor", "color", "fontSize", "checked", "isCursorPointer", "onToggle"])) : A("", !0)
+            ]),
+            _: 2
+          }, 1032, ["legendSet", "config", "isCursorPointer"]))), 128))
+        ], 2)) : A("", !0)
+      ], 8, ["to"])) : A("", !0),
+      e.value.style.chart.legend.show ? A("", !0) : (u(), r("div", {
+        key: 7,
+        ref_key: "chartLegend",
+        ref: _e
+      }, [
+        w(t.$slots, "legend", { legend: ke.value }, void 0, !0)
+      ], 512)),
+      t.$slots.source ? (u(), r("div", {
+        key: 8,
+        ref_key: "source",
+        ref: tt,
+        dir: "auto"
+      }, [
+        w(t.$slots, "source", {}, void 0, !0)
+      ], 512)) : A("", !0),
+      xe.value && e.value.userOptions.buttons.table ? (u(), V(Vl(ce.value.component), Ml({ key: 9 }, ce.value.props, {
+        ref_key: "tableUnit",
+        ref: re,
+        onClose: St
+      }), Dt({
+        content: y(() => [
+          (u(), V(v(jt), {
+            key: `table_${ot.value}`,
+            colNames: ae.value.colNames,
+            head: ae.value.head,
+            body: ae.value.body,
+            config: ae.value.config,
+            title: e.value.table.useDialog ? "" : ce.value.title,
+            withCloseButton: !e.value.table.useDialog,
+            isCursorPointer: H.value,
+            onClose: St
+          }, {
+            th: y(({ th: l }) => [
+              g("div", {
+                innerHTML: l,
+                style: { display: "flex", "align-items": "center" }
+              }, null, 8, Ya)
+            ]),
+            td: y(({ td: l }) => [
+              Mt(E(l.name || l), 1)
+            ]),
+            _: 1
+          }, 8, ["colNames", "head", "body", "config", "title", "withCloseButton", "isCursorPointer"]))
+        ]),
+        _: 2
+      }, [
+        e.value.table.useDialog ? {
+          name: "title",
+          fn: y(() => [
+            Mt(E(ce.value.title), 1)
+          ]),
+          key: "0"
+        } : void 0,
+        e.value.table.useDialog ? {
+          name: "actions",
+          fn: y(() => [
+            g("button", {
+              tabindex: "0",
+              class: "vue-ui-user-options-button",
+              onClick: s[1] || (s[1] = (l) => ze(e.value.userOptions.callbacks.csv)),
+              style: pe({ cursor: H.value ? "pointer" : "default" })
+            }, [
+              Xe(v(Ht), {
+                name: "fileCsv",
+                stroke: ce.value.props.color
+              }, null, 8, ["stroke"])
+            ], 4)
+          ]),
+          key: "1"
+        } : void 0
+      ]), 1040)) : A("", !0),
+      w(t.$slots, "skeleton", {}, () => [
+        v(be) ? (u(), V(Zl, { key: 0 })) : A("", !0)
+      ], !0)
+    ], 46, va));
+  }
+}, vo = /* @__PURE__ */ ca(Wa, [["__scopeId", "data-v-37af710e"]]);
+export {
+  vo as default
+};