vue-data-ui 3.17.13 → 3.18.0

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

@@ -1,1702 +0,0 @@
-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 b, normalizeProps as P, guardReactiveProps as S, createSlots as Dt, createVNode as Ke, 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 Xe } from "vue";
-import { j as zl, t as zt, m as Bl, p as He, o as El, q as oe, n as Ul, a8 as Y, s as Rl, a4 as qe, k as Le, l as D, X as Gl, u as Yl, a as Bt, a6 as Et, a7 as xe, B as Ut, T as Rt, a0 as Wl, a1 as Kl, U as Xl, ai as Gt, K as je } from "./lib-DMzrGQHK.js";
-import { b as Hl } from "./labelUtils-DX9oyq3C.js";
-import { t as ql, u as jl } from "./useResponsive-DfdjqQps.js";
-import { u as Jl } from "./useConfig-CG4HT3wS.js";
-import { u as Ql, B as Zl } from "./BaseScanner-C2j3TsSY.js";
-import { u as ea } from "./usePrinter-C4t8DdQ-.js";
-import { u as ta } from "./useSvgExport-BTG4hVPO.js";
-import { u as Je } from "./useNestedProp-DH0BEVVS.js";
-import { u as la } from "./useThemeCheck-C9Ccl7U9.js";
-import { u as aa } from "./useUserOptionState-B7Ej974k.js";
-import { u as oa } from "./useChartAccessibility-cp6XQtqi.js";
-import sa from "./img-CjTQXS0U.js";
-import na from "./Title-BbKoiBk2.js";
-import ua from "./vue_ui_nested_donuts-DvTrWT_C.js";
-import ra from "./Legend-DGN5lY60.js";
-import { A as ia } from "./A11yDataTable-BpmuNomI.js";
-import { B as da } from "./BaseLegendToggle-cMP8M2u0.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-Cvt7Fi0Q.js")), Ht = G(() => import("./BaseIcon-DX0hTWa-.js")), qt = G(() => import("./vue-ui-accordion-DFtpH_16.js")), jt = G(() => import("./DataTable-cMnb68Ik.js")), Jt = G(
-      () => import("./UserOptions-DVduN6X7.js")
-    ), Qt = G(
-      () => import("./PenAndPaper-CJDoB5H9.js")
-    ), Zt = G(
-      () => import("./PackageVersion-BfrCAH6_.js")
-    ), el = G(
-      () => import("./BaseDraggableDialog-Di8Hlru3.js")
-    ), { vue_ui_nested_donuts: tl } = Jl(), { isThemeValid: ll, warnInvalidTheme: al } = la(), I = Yt, Te = $({
-      get() {
-        return !!I.dataset && I.dataset.length;
-      },
-      set(t) {
-        return t;
-      }
-    }), f = h(zl()), se = h(!1), _e = h(""), ne = h(null), Qe = h(0), M = h(null), Ze = h(null), et = 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, Qe.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 = Je({
-        userConfig: I.config,
-        defaultConfig: tl
-      });
-      let s = {};
-      const l = t.theme;
-      if (l)
-        if (!ll.value(t))
-          al(t), s = t;
-        else {
-          const o = Je({
-            userConfig: ua[l] || I.config,
-            defaultConfig: t
-          });
-          s = {
-            ...Je({
-              userConfig: I.config,
-              defaultConfig: o
-            }),
-            customPalette: t.customPalette.length ? t.customPalette : Bl[l] || He
-          };
-        }
-      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(w) {
-              const x = Math.min((w - k) / s, 1), ve = Gt(x), he = d * ve;
-              K.value[c] = he, K.value = [...K.value];
-              const Ce = [];
-              let Ue = 0;
-              I.dataset.forEach((Ae, Re) => {
-                const _l = je(
-                  Ae.series.reduce(
-                    (Ye, We) => Ye + je(
-                      Y(We.values).reduce(
-                        (Sl, Il) => Sl + Il,
-                        0
-                      )
-                    ),
-                    0
-                  )
-                ), Pl = je(
-                  K.value.slice(Ue, Ue + Ae.series.length).reduce((Ye, We) => Ye + We, 0)
-                ), Ge = _l - Pl;
-                Ge > Number.MIN_VALUE && Ce.push({
-                  name: "__ghost__",
-                  arcOf: Ae.name,
-                  arcOfId: `${f.value}_${Re}`,
-                  id: `ghost_${f.value}_${Re}`,
-                  seriesIndex: -1,
-                  datasetIndex: Re,
-                  color: "transparent",
-                  value: Ge,
-                  fullValue: Ge,
-                  absoluteValues: [],
-                  ghost: !0
-                }), Ue += Ae.series.length;
-              }), ue.value = Ce, 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 Xe(), 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
-      }), Te.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 ? Ze.value : null,
-            legend: e.value.style.chart.legend.show ? et.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), w = n(i), x = t + (s - t) * w;
-        o(x, i), i < 1 ? requestAnimationFrame(c) : (o(s, 1), a && a());
-      }
-      requestAnimationFrame(c);
-    }
-    const m = 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) => !m.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] || He[a % He.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) => !m.value.includes(o.id)).map((o) => o.value).reduce((o, a) => o + a, 0);
-      return {
-        ...t,
-        total: l,
-        series: t.series.filter((o) => !m.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) => m.value.includes(l.id))) {
-        const l = new Set(s);
-        m.value = m.value.filter((o) => !l.has(o));
-      } else
-        m.value.push(...s);
-    }
-    function j(t) {
-      Ve("selectLegend", t);
-      const s = I.dataset.flatMap(
-        (i, w) => i.series.map((x, ve) => ({
-          value: Y(x.values).reduce((he, Ce) => he + Ce, 0),
-          id: `${f.value}_${w}_${ve}`,
-          arcOfId: `${f.value}_${w}`
-        }))
-      ).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,
-        m.value
-      );
-      m.value.includes(t.id) ? (m.value = m.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((w) => ({
-            ...w,
-            series: w.series.map(
-              (x) => x.id === t.id ? { ...x, value: i } : x
-            )
-          }));
-        }
-      }) : C.value = C.value.map((i) => ({
-        ...i,
-        series: i.series.map(
-          (w) => w.id === t.id ? { ...w, value: l } : w
-        )
-      }))) : k && (e.value.serieToggleAnimation.show ? bt({
-        from: n,
-        to: 0,
-        duration: e.value.serieToggleAnimation.durationMs,
-        onUpdate: (i) => {
-          C.value = C.value.map((w) => ({
-            ...w,
-            series: w.series.map(
-              (x) => x.id === t.id ? { ...x, value: i } : x
-            )
-          }));
-        },
-        onDone: () => {
-          m.value.push(t.id);
-        }
-      }) : (C.value = C.value.map((i) => ({
-        ...i,
-        series: i.series.map(
-          (w) => w.id === t.id ? { ...w, value: 0 } : w
-        )
-      })), m.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) => {
-        m.value.includes(l.id) && j({ id: l.id });
-      }) : m.value.includes(s.id) && j({ id: s.id }));
-    }
-    function cl(t) {
-      const s = wt(t);
-      s !== null && (Array.isArray(s) ? s.forEach((l) => {
-        m.value.includes(l.id) || j({ id: l.id });
-      }) : m.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 = qe(
-        {
-          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: qe(
-          { 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: qe(
-          { 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), ke = 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, ke.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
-        })
-      ))
-        _e.value = a({
-          seriesIndex: l,
-          datapoint: t,
-          series: C.value,
-          config: e.value
-        });
-      else {
-        let n = "";
-        if (e.value.style.chart.tooltip.showAllItemsAtIndex && m.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: Le(
-                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>${Le(
-            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>`);
-        _e.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 && m.value.length === 0)
-        return [null, void 0].includes(Q.value) || Q.value === s ? "" : `url(#blur_${f.value})`;
-      if (!e.value.style.chart.tooltip.showAllItemsAtIndex || m.value.length)
-        return [null, void 0].includes(le.value) || le.value === t.id ? "" : `url(#blur_${f.value})`;
-    }
-    const $e = $(() => O.value.map((t, s) => {
-      const l = t.series.filter(
-        (a) => !m.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 = Le(
-          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) || m.value.includes(a.id) ? "-" : D({
-          v: c / o * 100,
-          s: "%",
-          r: e.value.style.chart.legend.roundingPercentage
-        }), w = 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 ? ": " : ""}${w}`;
-        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: m.value.includes(a.id) ? 0.5 : 1,
-          segregate: () => j(a),
-          isSegregated: m.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 Me(t = null) {
-      Xe(() => {
-        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 ze() {
-      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 Be = h(null);
-    function gl() {
-      if (!Be.value) return;
-      const { x: t, y: s, width: l, height: o } = Be.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 = $(
-      () => $e.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 Xe();
-      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 w = F.value[N.value];
-        if (!w) return;
-        yt({
-          datapoint: w,
-          index: N.value,
-          seriesIndex: w.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 Ee = $(() => {
-      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: Me,
-      generateImage: gt,
-      generateSvg: It,
-      hideSeries: cl,
-      showSeries: dl,
-      toggleTable: Tt,
-      toggleLabels: _t,
-      toggleTooltip: Pt,
-      toggleAnnotator: ze,
-      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),
-      Ee.value?.rows?.length ? (u(), V(ia, {
-        key: 0,
-        uid: f.value,
-        head: Ee.value.headers,
-        body: Ee.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: ze
-      }, {
-        "annotator-action-close": y(() => [
-          b(t.$slots, "annotator-action-close", {}, void 0, !0)
-        ]),
-        "annotator-action-color": y(({ color: l }) => [
-          b(t.$slots, "annotator-action-color", P(S({ color: l })), void 0, !0)
-        ]),
-        "annotator-action-draw": y(({ mode: l }) => [
-          b(t.$slots, "annotator-action-draw", P(S({ mode: l })), void 0, !0)
-        ]),
-        "annotator-action-undo": y(({ disabled: l }) => [
-          b(t.$slots, "annotator-action-undo", P(S({ disabled: l })), void 0, !0)
-        ]),
-        "annotator-action-redo": y(({ disabled: l }) => [
-          b(t.$slots, "annotator-action-redo", P(S({ disabled: l })), void 0, !0)
-        ]),
-        "annotator-action-delete": y(({ disabled: l }) => [
-          b(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: Ze
-      }, [
-        (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 && Te.value && (v(ct) || v(Oe)) ? (u(), V(v(Jt), {
-        ref_key: "userOptionsRef",
-        ref: Pe,
-        key: `user_option_${Qe.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: Me,
-        onGenerateImage: Cl,
-        onGenerateSvg: It,
-        onToggleTable: Tt,
-        onToggleLabels: _t,
-        onToggleTooltip: Pt,
-        onToggleAnnotator: ze,
-        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 }) => [
-            b(t.$slots, "menuIcon", P(S({ isOpen: l, color: o })), void 0, !0)
-          ]),
-          key: "0"
-        } : void 0,
-        t.$slots.optionTooltip ? {
-          name: "optionTooltip",
-          fn: y(() => [
-            b(t.$slots, "optionTooltip", {}, void 0, !0)
-          ]),
-          key: "1"
-        } : void 0,
-        t.$slots.optionPdf ? {
-          name: "optionPdf",
-          fn: y(() => [
-            b(t.$slots, "optionPdf", {}, void 0, !0)
-          ]),
-          key: "2"
-        } : void 0,
-        t.$slots.optionCsv ? {
-          name: "optionCsv",
-          fn: y(() => [
-            b(t.$slots, "optionCsv", {}, void 0, !0)
-          ]),
-          key: "3"
-        } : void 0,
-        t.$slots.optionImg ? {
-          name: "optionImg",
-          fn: y(() => [
-            b(t.$slots, "optionImg", {}, void 0, !0)
-          ]),
-          key: "4"
-        } : void 0,
-        t.$slots.optionSvg ? {
-          name: "optionSvg",
-          fn: y(() => [
-            b(t.$slots, "optionSvg", {}, void 0, !0)
-          ]),
-          key: "5"
-        } : void 0,
-        t.$slots.optionTable ? {
-          name: "optionTable",
-          fn: y(() => [
-            b(t.$slots, "optionTable", {}, void 0, !0)
-          ]),
-          key: "6"
-        } : void 0,
-        t.$slots.optionLabels ? {
-          name: "optionLabels",
-          fn: y(() => [
-            b(t.$slots, "optionLabels", {}, void 0, !0)
-          ]),
-          key: "7"
-        } : void 0,
-        t.$slots.optionFullscreen ? {
-          name: "optionFullscreen",
-          fn: y(({ toggleFullscreen: l, isFullscreen: o }) => [
-            b(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 }) => [
-            b(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 }) => [
-            b(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: Be,
-            class: "vue-data-ui-g"
-          }, [
-            Ke(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"
-              }
-            }, [
-              b(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(xe)(a, !0).anchor,
-                    x: v(xe)(
-                      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(xe)(a, !0).anchor,
-                    x: v(xe)(
-                      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(Le)(
-                      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)),
-            b(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, [
-          b(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, [
-        b(t.$slots, "watermark", P(S({
-          isPrinting: v(De) || v(Ne) || ge.value || ye.value
-        })), void 0, !0)
-      ])) : A("", !0),
-      Ke(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: _e.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(() => [
-          b(t.$slots, "tooltip-before", P(S({ ...ke.value })), void 0, !0)
-        ]),
-        tooltip: y(() => [
-          b(t.$slots, "tooltip", P(S({ ...ke.value })), void 0, !0)
-        ]),
-        "tooltip-after": y(() => [
-          b(t.$slots, "tooltip-after", P(S({ ...ke.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 && (e.value.style.chart.legend.show || t.$slots.legend) ? (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: et,
-          class: Z({
-            "vue-ui-nested-donuts-legend": $e.value.length > 1
-          })
-        }, [
-          b(t.$slots, "legend", { legend: $e.value }, () => [
-            (u(!0), r(T, null, _($e.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:${m.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) => m.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))
-          ], !0)
-        ], 2)) : A("", !0)
-      ], 8, ["to"])) : A("", !0),
-      t.$slots.source ? (u(), r("div", {
-        key: 7,
-        ref_key: "source",
-        ref: tt,
-        dir: "auto"
-      }, [
-        b(t.$slots, "source", {}, void 0, !0)
-      ], 512)) : A("", !0),
-      Te.value && e.value.userOptions.buttons.table ? (u(), V(Vl(ce.value.component), Ml({ key: 8 }, 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) => Me(e.value.userOptions.callbacks.csv)),
-              style: pe({ cursor: H.value ? "pointer" : "default" })
-            }, [
-              Ke(v(Ht), {
-                name: "fileCsv",
-                stroke: ce.value.props.color
-              }, null, 8, ["stroke"])
-            ], 4)
-          ]),
-          key: "1"
-        } : void 0
-      ]), 1040)) : A("", !0),
-      b(t.$slots, "skeleton", {}, () => [
-        v(be) ? (u(), V(Zl, { key: 0 })) : A("", !0)
-      ], !0)
-    ], 46, va));
-  }
-}, vo = /* @__PURE__ */ ca(Wa, [["__scopeId", "data-v-7f94932f"]]);
-export {
-  vo as default
-};