vue-data-ui 3.15.12 → 3.16.1

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

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