vue-data-ui 3.4.9 → 3.5.1

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

@@ -0,0 +1,1681 @@
+import { defineAsyncComponent as le, useSlots as _l, computed as f, shallowRef as Q, ref as p, onMounted as Tt, onBeforeUnmount as Pt, toRefs as Cl, watch as ye, createElementBlock as r, openBlock as s, normalizeStyle as C, normalizeClass as We, createBlock as ae, createCommentVNode as v, renderSlot as y, createElementVNode as h, createVNode as Te, unref as u, withCtx as b, normalizeProps as N, guardReactiveProps as Y, createSlots as qe, Fragment as k, renderList as I, mergeProps as He, toDisplayString as U, withDirectives as Ft, createTextVNode as Pe, vShow as It, Teleport as Al, resolveDynamicComponent as Sl, nextTick as Tl } from "vue";
+import { o as Lt, f as je, g as Pl, c as Fl, t as Il, e as Ll, x as Ml, h as Mt, p as ie, a as W, d as X, T as zt, Z as zl, X as Ol, s as Fe, i as Dl, V as Nl, _ as P, W as ge, Y as $, $ as Ot, l as Yl, b as Xl, O as Qe, P as Bl, Q as Vl, G as El, a0 as Dt } from "./lib-C_mNZmhD.js";
+import { t as Rl, u as Gl } from "./useResponsive-DfdjqQps.js";
+import { u as Ul, a as Nt } from "./useNestedProp-DjGXw6S9.js";
+import { u as Wl } from "./usePrinter-DTzqpYKF.js";
+import { u as ql, B as Hl } from "./BaseScanner-BgWxam9d.js";
+import { u as jl } from "./useSvgExport-DrjCWun4.js";
+import { u as Ql } from "./useUserOptionState-BIvW1Kz7.js";
+import { u as Zl } from "./useChartAccessibility-9icAAmYg.js";
+import Jl from "./img-BecE5qXd.js";
+import { _ as Kl } from "./Shape-CNXKB8O0.js";
+import ea from "./Title-isbiM8i8.js";
+import { t as ta } from "./themes-AUNCOb2G.js";
+import la from "./Legend-G6GMcdAc.js";
+import { _ as aa } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const oa = ["id"], na = ["id"], sa = ["xmlns", "viewBox"], ua = ["width", "height"], ra = { key: 1 }, ia = ["id"], va = ["stop-color"], da = ["offset", "stop-color"], ca = ["offset", "stop-color"], ha = ["stop-color"], fa = { key: 2 }, ya = ["id", "cx", "cy"], ga = ["stop-color", "stop-opacity"], pa = ["stop-color"], ma = ["id"], ba = ["id"], wa = ["id"], ka = ["flood-color"], xa = ["id"], $a = ["flood-color"], _a = ["d", "stroke", "filter"], Ca = ["d", "stroke", "filter"], Aa = ["cx", "cy", "r", "fill", "filter"], Sa = { key: 6 }, Ta = ["stroke", "d"], Pa = ["d", "fill", "stroke", "stroke-width", "filter"], Fa = { key: 0 }, Ia = ["d", "fill", "stroke", "stroke-width", "filter"], La = { key: 0 }, Ma = ["stroke", "d"], za = { key: 0 }, Oa = ["d", "stroke", "stroke-width", "filter"], Da = { key: 1 }, Na = ["d", "fill", "stroke", "stroke-width", "filter"], Ya = ["d", "fill", "stroke", "stroke-width", "filter"], Xa = { key: 1 }, Ba = ["cx", "cy", "r", "fill", "stroke", "stroke-width"], Va = ["cx", "cy", "r", "fill", "stroke", "stroke-width"], Ea = { key: 0 }, Ra = ["d", "fill", "stroke", "stroke-width"], Ga = ["cx", "cy", "r", "stroke"], Ua = ["cx", "cy", "r", "fill"], Wa = ["cx", "cy", "r"], qa = { key: 0 }, Ha = ["d", "stroke", "fill", "onMouseenter", "onMouseleave", "onClick"], ja = { key: 1 }, Qa = ["cx", "cy", "r"], Za = ["x", "y", "fill", "font-size"], Ja = ["x", "y", "fill", "font-size"], Ka = ["x", "y", "fill", "font-size"], eo = ["x", "y", "fill", "font-size"], to = ["filter"], lo = { key: 0 }, ao = ["x", "y"], oo = { key: 1 }, no = ["cx", "cy", "fill", "stroke", "filter", "onClick", "onMouseenter", "onMouseleave"], so = ["cx", "cy", "fill", "stroke", "filter", "onClick", "onMouseenter", "onMouseleave"], uo = ["text-anchor", "x", "y", "fill", "font-size", "onClick", "onMouseenter", "onMouseleave"], ro = ["text-anchor", "x", "y", "fill", "font-size", "onClick", "innerHTML"], io = ["text-anchor", "x", "y", "fill", "font-size", "onClick", "onMouseenter", "onMouseleave"], vo = ["text-anchor", "x", "y", "fill", "font-size", "onClick", "innerHTML"], co = { key: 2 }, ho = ["x", "y", "width"], fo = ["x", "y", "width"], yo = {
+  key: 4,
+  class: "vue-data-ui-watermark"
+}, go = ["id"], po = ["onClick"], mo = {
+  key: 7,
+  class: "vue-ui-donut-hollow"
+}, bo = ["innerHTML"], wo = {
+  __name: "vue-ui-donut",
+  props: {
+    config: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    dataset: {
+      type: Array,
+      default() {
+        return [];
+      }
+    }
+  },
+  emits: ["selectLegend", "selectDatapoint"],
+  setup(Ze, { expose: Yt, emit: Xt }) {
+    const Bt = le(() => import("./Tooltip-oWCO1HKy.js")), Vt = le(() => import("./BaseIcon-BmMbm4d0.js")), Et = le(() => import("./vue-ui-accordion-CqhVCfc2.js")), Rt = le(() => import("./DataTable-BT7VF2ua.js")), Gt = le(() => import("./PenAndPaper-SZQIAgkg.js")), Ut = le(() => import("./UserOptions-CGnQt6Fd.js")), Wt = le(() => import("./PackageVersion-DQvyATVa.js")), qt = le(() => import("./BaseDraggableDialog-ymf2sfB8.js")), { vue_ui_donut: Ht } = Ul(), jt = _l(), x = Ze, we = f({
+      get() {
+        return !!x.dataset && x.dataset.length;
+      },
+      set(t) {
+        return t;
+      }
+    }), B = Q(null), ke = p(null), Qt = p(null), Zt = p(null), Je = Q(null), Ke = Q(null), Z = Q(null), ve = Q(null), et = Q(null), tt = Q(null), lt = p(0), at = p(0), ot = p(0), nt = p(!1), pe = p(null), Ie = p(null), xe = f({
+      get: () => e.value.style.chart.layout.labels.percentage.fontSize,
+      set: (t) => t
+    }), J = f({
+      get: () => e.value.style.chart.layout.labels.name.fontSize,
+      set: (t) => t
+    });
+    let Le = !1;
+    const q = () => {
+      !e.value.autoSize || Le || (Le = !0, requestAnimationFrame(() => {
+        Le = !1;
+        const t = e.value, a = ke.value, l = oe.value;
+        if (!t.autoSize || !a || !l) return;
+        const [o, i, c, w] = l.getAttribute("viewBox").split(" ").map(Number), A = { x: o, y: i, width: c, height: w }, O = [
+          {
+            selector: ".vue-data-ui-datalabel-value",
+            baseSize: t.style.chart.layout.labels.percentage.fontSize,
+            minSize: t.style.chart.layout.labels.percentage.minFontSize,
+            sizeRef: xe
+          },
+          {
+            selector: ".vue-data-ui-datalabel-name",
+            baseSize: t.style.chart.layout.labels.name.fontSize,
+            minSize: t.style.chart.layout.labels.name.minFontSize,
+            sizeRef: J
+          }
+        ];
+        O.map((G) => a.querySelectorAll(G.selector).length).reduce((G, te) => G + te, 0) !== 0 && O.forEach(({ selector: G, baseSize: te, minSize: Ue, sizeRef: kl }) => {
+          a.querySelectorAll(G).forEach((xl) => {
+            const $l = Yl({
+              el: xl,
+              bounds: A,
+              currentFontSize: te,
+              minFontSize: Ue,
+              attempts: 200,
+              padding: 1
+            });
+            kl.value = $l;
+          });
+        });
+      }));
+    };
+    Tt(async () => {
+      nt.value = !0, st(), requestAnimationFrame(q);
+    });
+    let Me;
+    Tt(() => {
+      B.value && (Me = new ResizeObserver((t) => {
+        for (const a of t) {
+          const { width: l, height: o } = a.contentRect;
+          if (l > 0 && o > 0) {
+            q();
+            break;
+          }
+        }
+      }), Me.observe(B.value.parentElement));
+    }), Pt(() => {
+      Me?.disconnect();
+    }), Pt(() => {
+      Z.value && (ve.value && Z.value.unobserve(ve.value), Z.value.disconnect());
+    });
+    const ze = f(() => !!e.value.debug);
+    function st() {
+      if (Lt(x.dataset) ? (je({
+        componentName: "VueUiDonut",
+        type: "dataset",
+        debug: ze.value
+      }), we.value = !1, _e.value = !0) : (x.dataset.forEach((t, a) => {
+        Pl({
+          datasetObject: t,
+          requiredAttributes: ["name", "values"]
+        }).forEach((l) => {
+          je({
+            componentName: "VueUiDonut",
+            type: "datasetSerieAttribute",
+            property: l,
+            index: a,
+            debug: ze.value
+          }), we.value = !1, _e.value = !0;
+        });
+      }), x.dataset.forEach((t, a) => {
+        (!t.name || t.name === "") && je({
+          componentName: "VueUiDonut",
+          type: "datasetAttributeEmpty",
+          property: "name",
+          index: a,
+          debug: ze.value
+        });
+      })), Lt(x.dataset) || (_e.value = e.value.loading), e.value.responsive) {
+        const t = Rl(() => {
+          const { width: a, height: l } = Gl({
+            chart: B.value,
+            title: e.value.style.chart.title.text ? Je.value : null,
+            legend: e.value.style.chart.legend.show ? Ke.value : null,
+            source: et.value,
+            noTitle: tt.value,
+            padding: e.value.autoSize ? void 0 : dt.value
+          });
+          requestAnimationFrame(() => {
+            n.value.width = a, n.value.height = l, q();
+          });
+        });
+        Z.value && (ve.value && Z.value.unobserve(ve.value), Z.value.disconnect()), Z.value = new ResizeObserver(t), ve.value = B.value.parentNode, Z.value.observe(ve.value);
+      }
+    }
+    const g = p(Fl());
+    p(null);
+    const Oe = p(!1), De = p(""), V = p(null), ut = p(0);
+    function Ne() {
+      const t = Nt({
+        userConfig: x.config,
+        defaultConfig: Ht
+      });
+      let a = {};
+      return t.theme ? a = {
+        ...Nt({
+          userConfig: ta.vue_ui_donut[t.theme] || x.config,
+          defaultConfig: t
+        }),
+        customPalette: Xl[t.theme] || ie
+      } : a = t, x.config && Qe(x.config, "events.datapointEnter") ? a.events.datapointEnter = x.config.events.datapointEnter : a.events.datapointEnter = null, x.config && Qe(x.config, "events.datapointLeave") ? a.events.datapointLeave = x.config.events.datapointLeave : a.events.datapointLeave = null, x.config && Qe(x.config, "events.datapointClick") ? a.events.datapointClick = x.config.events.datapointClick : a.events.datapointClick = null, a;
+    }
+    const e = p(Ne()), { loading: $e, FINAL_DATASET: de, manualLoading: _e, skeletonDataset: Jt } = ql({
+      ...Cl(x),
+      FINAL_CONFIG: e,
+      prepareConfig: Ne,
+      skeletonDataset: [
+        {
+          name: "",
+          values: [3],
+          color: "#BABABA"
+        },
+        {
+          name: "",
+          values: [2],
+          color: "#AAAAAA"
+        },
+        {
+          name: "",
+          values: [1],
+          color: "#CACACA"
+        }
+      ],
+      skeletonConfig: Il({
+        defaultConfig: e.value,
+        userConfig: {
+          useCssAnimation: !1,
+          table: { show: !1 },
+          startAnimation: {
+            show: !1
+          },
+          userOptions: { show: !1 },
+          style: {
+            chart: {
+              backgroundColor: "#99999930",
+              layout: {
+                labels: {
+                  dataLabels: { show: !1 },
+                  hollow: {
+                    average: { show: !1 },
+                    total: { show: !1 }
+                  },
+                  value: { show: !1 }
+                }
+              },
+              legend: {
+                backgroundColor: "transparent",
+                showValue: !1,
+                showPercentage: !1
+              },
+              title: {
+                color: "#1A1A1A",
+                subtitle: {
+                  color: "#5A5A5A"
+                }
+              }
+            }
+          }
+        }
+      })
+    }), S = p(!0), H = Q([]);
+    function Kt(t, a = 1e3, l = 50) {
+      return new Promise((o) => {
+        const i = t.length;
+        H.value = Array(i).fill(0);
+        let c = 0;
+        t.forEach((w, A) => {
+          setTimeout(() => {
+            const O = performance.now();
+            function D(G) {
+              const te = Math.min((G - O) / a, 1), Ue = Dt(te);
+              H.value[A] = w * Ue, H.value = [...H.value], te < 1 ? (requestAnimationFrame(D), requestAnimationFrame(q)) : (H.value[A] = w, H.value = [...H.value], c += 1, c === i && o(), requestAnimationFrame(q));
+            }
+            requestAnimationFrame(D);
+          }, A * l);
+        });
+      });
+    }
+    const rt = p(!1);
+    ye(
+      () => $e.value,
+      async (t) => {
+        if (t || rt.value) return;
+        const a = de.value === Jt, l = e.value.startAnimation?.show;
+        if (!a && l) {
+          rt.value = !0;
+          const o = de.value.map(
+            (i) => i.values.reduce((c, w) => c + w, 0)
+          );
+          await Kt(
+            o,
+            e.value.startAnimation.durationMs,
+            e.value.startAnimation.staggerMs
+          );
+        }
+        S.value = !1;
+      },
+      { immediate: !0 }
+    );
+    const { userOptionsVisible: Ye, setUserOptionsVisibility: it, keepUserOptionState: vt } = Ql({ config: e.value }), { svgRef: oe } = Zl({ config: e.value.style.chart.title });
+    function el() {
+      it(!0);
+    }
+    function tl() {
+      it(!1);
+    }
+    ye(() => x.config, (t) => {
+      $e.value || (e.value = Ne()), Ye.value = !e.value.userOptions.showOnChartHover, st(), lt.value += 1, at.value += 1, ot.value += 1, m.value.dataLabels.show = e.value.style.chart.layout.labels.dataLabels.show, m.value.showTable = e.value.table.show, m.value.showTooltip = e.value.style.chart.tooltip.show, n.value.height = e.value.style.chart.height, n.value.width = e.value.style.chart.width;
+    }, { deep: !0 });
+    const dt = f(() => {
+      const { top: t, right: a, bottom: l, left: o } = e.value.style.chart.padding;
+      return {
+        css: `padding:${t}px ${a}px ${l}px ${o}px`,
+        top: t,
+        right: a,
+        bottom: l,
+        left: o
+      };
+    }), { isPrinting: ct, isImaging: ht, generatePdf: ft, generateImage: yt } = Wl({
+      elementId: `donut__${g.value}`,
+      fileName: e.value.style.chart.title.text || "vue-ui-donut",
+      options: e.value.userOptions.print
+    }), ll = f(() => e.value.userOptions.show && !e.value.style.chart.title.text), gt = f(() => Ll(e.value.customPalette)), m = p({
+      dataLabels: {
+        show: e.value.style.chart.layout.labels.dataLabels.show
+      },
+      showTable: e.value.table.show,
+      showTooltip: e.value.style.chart.tooltip.show
+    });
+    ye(e, () => {
+      m.value = {
+        dataLabels: {
+          show: e.value.style.chart.layout.labels.dataLabels.show
+        },
+        showTable: e.value.table.show,
+        showTooltip: e.value.style.chart.tooltip.show
+      };
+    }, { immediate: !0 });
+    const n = p({
+      height: e.value.style.chart.height,
+      width: e.value.style.chart.width
+    }), ne = f(() => {
+      if (e.value.pie)
+        return _.value;
+      const t = e.value.style.chart.layout.donut.strokeWidth / 512, a = Math.min(n.value.width, n.value.height) * t, l = a > _.value ? _.value : a;
+      return Math.max(l, 12 * (1 + t));
+    }), pt = Xt, L = f(() => de.value.map((t, a) => ({
+      name: t.name,
+      color: Mt(t.color) || gt.value[a] || ie[a] || ie[a % ie.length],
+      value: Ml(t.values.reduce((l, o) => l + o, 0)),
+      absoluteValues: t.values,
+      comment: t.comment || "",
+      patternIndex: a,
+      seriesIndex: a,
+      ghost: !1,
+      pattern: `pattern_${g.value}_${a}`
+    })));
+    ye(() => x.dataset, (t) => {
+      Array.isArray(t) && t.length > 0 && (_e.value = !1);
+    }, { immediate: !0 });
+    const M = Q(L.value);
+    ye(() => L.value, (t) => {
+      M.value = t, requestAnimationFrame(q);
+    });
+    function al() {
+      return L.value.map((t) => ({
+        name: t.name,
+        color: t.color,
+        value: t.value
+      }));
+    }
+    const z = p([]), se = p(!1);
+    function mt({ from: t, to: a, duration: l, onUpdate: o, onDone: i, easing: c = Dt }) {
+      const w = performance.now();
+      function A(O) {
+        const D = Math.min((O - w) / l, 1), G = c(D), te = t + (a - t) * G;
+        o(te, D), D < 1 ? requestAnimationFrame(A) : (o(a, 1), i && i());
+      }
+      requestAnimationFrame(A);
+    }
+    function Ce(t) {
+      const a = L.value.find((i, c) => c === t);
+      let o = M.value.find((i, c) => c === t).value;
+      if (z.value.includes(t)) {
+        let c = function() {
+          M.value = M.value.map(
+            (A, O) => t === O ? { ...A, value: i } : A
+          );
+        }, w = function() {
+          se.value = !0, mt({
+            from: o,
+            to: i,
+            duration: e.value.serieToggleAnimation.durationMs,
+            onUpdate: (A, O) => {
+              M.value = M.value.map(
+                (D, G) => t === G ? { ...D, value: A } : D
+              ), requestAnimationFrame(q);
+            },
+            onDone: () => {
+              c(), se.value = !1;
+            }
+          });
+        };
+        z.value = z.value.filter((A) => A !== t);
+        const i = a.value;
+        e.value.serieToggleAnimation.show && e.value.type === "classic" ? w() : (c(), requestAnimationFrame(q));
+      } else if (z.value.length < L.value.length - 1) {
+        let i = function() {
+          z.value.push(t), M.value = M.value.map(
+            (w, A) => t === A ? { ...w, value: 0 } : w
+          );
+        }, c = function() {
+          se.value = !0, mt({
+            from: o,
+            to: 0,
+            duration: e.value.serieToggleAnimation.durationMs,
+            onUpdate: (w, A) => {
+              M.value = M.value.map(
+                (O, D) => t === D ? { ...O, value: w } : O
+              ), requestAnimationFrame(q);
+            },
+            onDone: () => {
+              i(), requestAnimationFrame(q), se.value = !1;
+            }
+          });
+        };
+        e.value.serieToggleAnimation.show && e.value.type === "classic" ? c() : i();
+      }
+      pt("selectLegend", j.value.map((i) => ({
+        name: i.name,
+        color: i.color,
+        value: i.value
+      })));
+    }
+    function bt(t) {
+      if (!L.value.length)
+        return e.value.debug && console.warn("VueUiDonut - There are no series to show."), null;
+      const a = L.value.find((l) => l.name === t);
+      return a || (e.value.debug && console.warn(`VueUiDonut - Series name not found "${t}"`), null);
+    }
+    function ol(t) {
+      const a = bt(t);
+      a !== null && z.value.includes(a.seriesIndex) && Ce(a.seriesIndex);
+    }
+    function nl(t) {
+      const a = bt(t);
+      a !== null && (z.value.includes(a.seriesIndex) || Ce(a.seriesIndex));
+    }
+    const sl = f(() => de.value.reduce((t, a) => t + a.values.reduce((l, o) => l + o, 0), 0)), j = f(() => {
+      if (S.value && !$e.value) {
+        const t = H.value.map((l, o) => ({
+          ...L.value[o],
+          value: l,
+          color: L.value[o].color,
+          ghost: !1
+        })), a = sl.value - H.value.reduce((l, o) => l + o, 0);
+        return a > 0 && t.push({
+          name: "__ghost__",
+          value: a,
+          color: "transparent",
+          ghost: !0
+        }), t;
+      } else
+        return M.value.forEach((t, a) => {
+          if ([null, void 0].includes(t.values))
+            return {
+              ...t,
+              values: []
+            };
+        }), M.value.map((t, a) => ({
+          ...t,
+          seriesIndex: a
+        })).filter((t, a) => !z.value.includes(a));
+    }), Xe = f(() => de.value.map((t, a) => {
+      const l = (t.values || []).reduce((i, c) => i + c, 0), o = l / de.value.map((i) => (i.values || []).reduce((c, w) => c + w, 0)).reduce((i, c) => i + c, 0);
+      return {
+        name: t.name,
+        color: Mt(t.color) || gt.value[a] || ie[a] || ie[a % ie.length],
+        value: l,
+        shape: "circle",
+        patternIndex: a,
+        proportion: o
+      };
+    }).map((t, a) => ({
+      ...t,
+      opacity: z.value.includes(a) ? 0.5 : 1,
+      segregate: () => !se.value && Ce(a),
+      isSegregated: z.value.includes(a),
+      display: `${t.name}${e.value.style.chart.legend.showPercentage || e.value.style.chart.legend.showValue ? ": " : ""}${e.value.style.chart.legend.showValue ? W(e.value.style.chart.layout.labels.value.formatter, t.value, X({
+        p: e.value.style.chart.layout.labels.dataLabels.prefix,
+        v: t.value,
+        s: e.value.style.chart.layout.labels.dataLabels.suffix,
+        r: e.value.style.chart.legend.roundingValue
+      }), { datapoint: t, index: a }) : ""}${e.value.style.chart.legend.showPercentage ? z.value.includes(a) ? `${e.value.style.chart.legend.showValue ? "(" : ""}${cl(t.proportion * 100)}%${e.value.style.chart.legend.showValue ? ")" : ""}` : `${e.value.style.chart.legend.showValue ? " (" : ""}${isNaN(t.value / F.value) ? "-" : W(e.value.style.chart.layout.labels.percentage.formatter, wt(t), X({
+        v: wt(t),
+        s: "%",
+        r: e.value.style.chart.legend.roundingPercentage
+      }))}${e.value.style.chart.legend.showValue ? ")" : ""}` : ""}`
+    }))), ul = f(() => ({
+      cy: "donut-div-legend",
+      backgroundColor: e.value.style.chart.legend.backgroundColor,
+      color: e.value.style.chart.legend.color,
+      fontSize: e.value.style.chart.legend.fontSize,
+      paddingBottom: 12,
+      fontWeight: e.value.style.chart.legend.bold ? "bold" : ""
+    })), _ = f(() => {
+      const t = e.value.style.chart.layout.donut.radiusRatio, a = Math.max(0.1, Math.min(0.50001, t)), l = Math.min(n.value.width * a, n.value.height * a);
+      return Math.max(12, l);
+    }), T = f(() => zt({ series: j.value }, n.value.width / 2, n.value.height / 2, _.value, _.value, 1.99999, 2, 1, 360, 105.25, ne.value)), rl = f(() => Math.abs(j.value.map((t) => t.value).reduce((t, a) => t + a, 0)) > 0), il = f(() => zt({
+      series: [
+        {
+          value: 1,
+          color: e.value.style.chart.layout.donut.emptyFill,
+          name: "_",
+          seriesIndex: 0,
+          patternIndex: -1,
+          ghost: !1,
+          absoluteValues: [1]
+        }
+      ]
+    }, n.value.width / 2, n.value.height / 2, _.value, _.value, 1.99999, 2, 1, 360, 105.25, ne.value)), E = f(() => T.value.filter((t) => !t.ghost)), d = f(() => {
+      const t = Math.max(...j.value.map((l) => l.value)), a = j.value.map((l) => l.value / t);
+      return zl({
+        series: a,
+        center: {
+          x: n.value.width / 2,
+          y: n.value.height / 2
+        },
+        maxRadius: Math.min(n.value.width, n.value.height) / 3,
+        hasGhost: S.value
+      });
+    });
+    function ce(t) {
+      return t.x > n.value.width / 2 + 6 ? "start" : t.x < n.value.width / 2 - 6 ? "end" : "middle";
+    }
+    function vl(t) {
+      return t.middlePoint.y > n.value.height / 2 ? P({ initX: t.middlePoint.x, initY: t.middlePoint.y, offset: 100, centerX: n.value.width / 2, centerY: n.value.height / 2 }).y : P({ initX: t.middlePoint.x, initY: t.middlePoint.y, offset: 0, centerX: n.value.width / 2, centerY: n.value.height / 2 }).y - 100;
+    }
+    function R(t) {
+      return t.proportion * 100 > e.value.style.chart.layout.labels.dataLabels.hideUnderValue;
+    }
+    function Be(t, a) {
+      const l = t.value / dl(a);
+      return isNaN(l) ? 0 : W(
+        e.value.style.chart.layout.labels.percentage.formatter,
+        l * 100,
+        X({
+          v: l * 100,
+          s: "%",
+          r: e.value.style.chart.layout.labels.percentage.rounding
+        }),
+        { datapoint: t }
+      );
+    }
+    function dl(t) {
+      return [...t].map((a) => a.value).reduce((a, l) => a + l, 0);
+    }
+    const F = f(() => j.value.map((t) => t.value).reduce((t, a) => t + a, 0)), Ve = f(() => F.value / j.value.length);
+    function wt(t) {
+      return se.value ? t.proportion * 100 : t.value / F.value * 100;
+    }
+    const Ee = p(null), me = p(!1);
+    function he({ datapoint: t, seriesIndex: a }) {
+      e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: t, seriesIndex: a }), Oe.value = !1, V.value = null;
+    }
+    function fe({ datapoint: t, relativeIndex: a, seriesIndex: l, show: o = !1 }) {
+      e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: t, seriesIndex: l }), Ee.value = { datapoint: t, seriesIndex: l, config: e.value, series: L.value }, Oe.value = o, V.value = a;
+      let i = "";
+      const c = e.value.style.chart.tooltip.customFormat;
+      if (me.value = !1, El(c))
+        try {
+          const w = c({
+            seriesIndex: l,
+            datapoint: t,
+            series: L.value,
+            config: e.value
+          });
+          typeof w == "string" && (De.value = w, me.value = !0);
+        } catch {
+          console.warn("Custom format cannot be applied."), me.value = !1;
+        }
+      if (!me.value) {
+        if (i += `<div style="width:100%;text-align:center;border-bottom:1px solid ${e.value.style.chart.tooltip.borderColor};padding-bottom:6px;margin-bottom:3px;">${t.name}</div>`, i += `<div style="display:flex;flex-direction:row;gap:6px;align-items:center;"><svg viewBox="0 0 60 60" height="14" width="14"><circle cx="30" cy="30" r="30" stroke="none" fill="${t.color}"/>${jt.pattern ? `<circle cx="30" cy="30" r="30" stroke="none" fill="url(#pattern_${g.value}_${l})"/>` : ""}</svg>`, e.value.style.chart.tooltip.showValue && (i += `<b>${W(
+          e.value.style.chart.layout.labels.value.formatter,
+          t.value,
+          X({
+            p: e.value.style.chart.layout.labels.dataLabels.prefix,
+            v: t.value,
+            s: e.value.style.chart.layout.labels.dataLabels.suffix,
+            r: e.value.style.chart.tooltip.roundingValue
+          }),
+          {
+            datapoint: t,
+            relativeIndex: a,
+            seriesIndex: l
+          }
+        )}</b>`), e.value.style.chart.tooltip.showPercentage) {
+          const w = W(
+            e.value.style.chart.layout.labels.percentage.formatter,
+            t.proportion * 100,
+            X({
+              v: t.proportion * 100,
+              s: "%",
+              r: e.value.style.chart.tooltip.roundingPercentage
+            }),
+            {
+              datapoint: t,
+              relativeIndex: a,
+              seriesIndex: l
+            }
+          );
+          e.value.style.chart.tooltip.showValue ? i += `<span>(${w})</span></div>` : i += `<b>${w}</b></div>`;
+        }
+        e.value.style.chart.comments.showInTooltip && t.comment && (i += `<div class="vue-data-ui-tooltip-comment" style="background:${t.color}20; padding: 6px; margin-bottom: 6px; margin-top:6px; border-left: 1px solid ${t.color}">${t.comment}</div>`), De.value = `<div>${i}</div>`;
+      }
+    }
+    function ue(t) {
+      return e.value.useBlurOnHover && ![null, void 0].includes(V.value) && V.value !== t ? `url(#blur_${g.value})` : "";
+    }
+    const K = f(() => {
+      const t = j.value.map((l) => ({
+        name: l.name,
+        color: l.color
+      })), a = j.value.map((l) => l.value);
+      return { head: t, body: a };
+    });
+    function Re(t = null) {
+      Tl(() => {
+        const a = K.value.head.map((i, c) => [[
+          i.name
+        ], [K.value.body[c]], [isNaN(K.value.body[c] / F.value) ? "-" : K.value.body[c] / F.value * 100]]), l = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [[""], ["val"], ["%"]]].concat(a), o = Bl(l);
+        t ? t(o) : Vl({ csvContent: o, title: e.value.style.chart.title.text || "vue-ui-donut" });
+      });
+    }
+    const Ae = f(() => {
+      const t = [
+        ' <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M18 16v2a1 1 0 0 1 -1 1h-11l6 -7l-6 -7h11a1 1 0 0 1 1 1v2" /></svg>',
+        X({ p: e.value.style.chart.layout.labels.dataLabels.prefix, v: F.value, s: e.value.style.chart.layout.labels.dataLabels.suffix, r: e.value.table.td.roundingValue }),
+        "100%"
+      ], a = K.value.head.map((i, c) => [
+        {
+          color: i.color,
+          name: i.name || "-"
+        },
+        K.value.body[c],
+        isNaN(K.value.body[c] / F.value) ? "-" : (K.value.body[c] / F.value * 100).toFixed(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: a,
+        config: l
+      };
+    }), re = p(!1);
+    function kt(t) {
+      re.value = t, ut.value += 1;
+    }
+    const xt = f(() => /^((?!chrome|android).)*safari/i.test(navigator.userAgent));
+    function cl(t) {
+      return t.toFixed(e.value.style.chart.legend.roundingPercentage).split("").map((a) => "-").join("");
+    }
+    function ee(t, a) {
+      e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: t, seriesIndex: t.seriesIndex }), pt("selectDatapoint", { datapoint: t, index: a });
+    }
+    function $t() {
+      m.value.showTable = !m.value.showTable;
+    }
+    function _t() {
+      m.value.dataLabels.show = !m.value.dataLabels.show;
+    }
+    function Ct() {
+      m.value.showTooltip = !m.value.showTooltip;
+    }
+    const Se = p(!1);
+    function Ge() {
+      Se.value = !Se.value;
+    }
+    async function hl({ scale: t = 2 } = {}) {
+      if (!B.value) return;
+      const { width: a, height: l } = B.value.getBoundingClientRect(), o = a / l, { imageUri: i, base64: c } = await Jl({ domElement: B.value, base64: !0, img: !0, scale: t });
+      return {
+        imageUri: i,
+        base64: c,
+        title: e.value.style.chart.title.text,
+        width: a,
+        height: l,
+        aspectRatio: o
+      };
+    }
+    function fl() {
+      if (!ke.value) return;
+      const { x: t, y: a, width: l, height: o } = ke.value.getBBox();
+      oe.value && oe.value.setAttribute("viewBox", `${t} ${a} ${l + Math.min(0, t)} ${o + Math.min(0, a)}`);
+    }
+    const be = f(() => {
+      const t = e.value.table.useDialog && !e.value.table.show, a = m.value.showTable;
+      return {
+        component: t ? qt : 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: re.value,
+          fullscreenParent: B.value,
+          forcedWidth: Math.min(500, window.innerWidth * 0.8)
+        } : {
+          hideDetails: !0,
+          config: {
+            open: a,
+            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
+            }
+          }
+        }
+      };
+    });
+    ye(() => m.value.showTable, (t) => {
+      e.value.table.show || (t && e.value.table.useDialog && pe.value ? pe.value.open() : "close" in pe.value && pe.value.close());
+    });
+    function At() {
+      m.value.showTable = !1, Ie.value && Ie.value.setTableIconState(!1);
+    }
+    const yl = f(() => Xe.value.map((t) => ({
+      ...t,
+      name: t.display
+    }))), gl = f(() => e.value.style.chart.backgroundColor), pl = f(() => e.value.style.chart.legend), ml = f(() => e.value.style.chart.title), { exportSvg: bl, getSvg: wl } = jl({
+      svg: oe,
+      title: ml,
+      legend: pl,
+      legendItems: yl,
+      backgroundColor: gl
+    });
+    async function St({ isCb: t }) {
+      if (t) {
+        const { blob: a, url: l, text: o, dataUrl: i } = await wl();
+        e.value.userOptions.callbacks.svg({ blob: a, url: l, text: o, dataUrl: i });
+      } else
+        bl();
+    }
+    return Yt({
+      autoSize: fl,
+      getData: al,
+      getImage: hl,
+      generatePdf: ft,
+      generateCsv: Re,
+      generateImage: yt,
+      generateSvg: St,
+      hideSeries: nl,
+      showSeries: ol,
+      toggleTable: $t,
+      toggleLabels: _t,
+      toggleTooltip: Ct,
+      toggleAnnotator: Ge,
+      toggleFullscreen: kt
+    }), (t, a) => (s(), r("div", {
+      ref_key: "donutChart",
+      ref: B,
+      class: We(`vue-data-ui-component vue-ui-donut ${re.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${e.value.useCssAnimation ? "" : "vue-ui-dna"}`),
+      style: C(`font-family:${e.value.style.fontFamily};width:100%; ${e.value.responsive ? "height:100%;" : ""} text-align:center;background:${e.value.style.chart.backgroundColor}`),
+      id: `donut__${g.value}`,
+      onMouseenter: el,
+      onMouseleave: tl
+    }, [
+      e.value.userOptions.buttons.annotator && u(oe) ? (s(), ae(u(Gt), {
+        key: 0,
+        color: e.value.style.chart.color,
+        backgroundColor: e.value.style.chart.backgroundColor,
+        active: Se.value,
+        svgRef: u(oe),
+        onClose: Ge
+      }, {
+        "annotator-action-close": b(() => [
+          y(t.$slots, "annotator-action-close", {}, void 0, !0)
+        ]),
+        "annotator-action-color": b(({ color: l }) => [
+          y(t.$slots, "annotator-action-color", N(Y({ color: l })), void 0, !0)
+        ]),
+        "annotator-action-draw": b(({ mode: l }) => [
+          y(t.$slots, "annotator-action-draw", N(Y({ mode: l })), void 0, !0)
+        ]),
+        "annotator-action-undo": b(({ disabled: l }) => [
+          y(t.$slots, "annotator-action-undo", N(Y({ disabled: l })), void 0, !0)
+        ]),
+        "annotator-action-redo": b(({ disabled: l }) => [
+          y(t.$slots, "annotator-action-redo", N(Y({ disabled: l })), void 0, !0)
+        ]),
+        "annotator-action-delete": b(({ disabled: l }) => [
+          y(t.$slots, "annotator-action-delete", N(Y({ disabled: l })), void 0, !0)
+        ]),
+        _: 3
+      }, 8, ["color", "backgroundColor", "active", "svgRef"])) : v("", !0),
+      y(t.$slots, "userConfig", {}, void 0, !0),
+      ll.value ? (s(), r("div", {
+        key: 1,
+        ref_key: "noTitle",
+        ref: tt,
+        class: "vue-data-ui-no-title-space",
+        style: "height:36px; width: 100%;background:transparent"
+      }, null, 512)) : v("", !0),
+      e.value.style.chart.title.text ? (s(), r("div", {
+        key: 2,
+        ref_key: "chartTitle",
+        ref: Je,
+        style: "width:100%;background:transparent;padding-bottom:24px"
+      }, [
+        (s(), ae(ea, {
+          key: `title_${lt.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)) : v("", !0),
+      h("div", {
+        id: `legend-top-${g.value}`
+      }, null, 8, na),
+      e.value.userOptions.show && we.value && (u(vt) || u(Ye)) ? (s(), ae(u(Ut), {
+        ref_key: "userOptionsRef",
+        ref: Ie,
+        key: `user_option_${ut.value}`,
+        backgroundColor: e.value.style.chart.backgroundColor,
+        color: e.value.style.chart.color,
+        isPrinting: u(ct),
+        isImaging: u(ht),
+        uid: g.value,
+        hasTooltip: e.value.style.chart.tooltip.show && e.value.userOptions.buttons.tooltip,
+        hasPdf: e.value.userOptions.buttons.pdf,
+        hasImg: e.value.userOptions.buttons.img,
+        hasSvg: e.value.userOptions.buttons.svg,
+        hasXls: e.value.userOptions.buttons.csv,
+        hasTable: e.value.userOptions.buttons.table,
+        hasLabel: e.value.userOptions.buttons.labels,
+        hasFullscreen: e.value.userOptions.buttons.fullscreen,
+        isFullscreen: re.value,
+        chartElement: B.value,
+        position: e.value.userOptions.position,
+        callbacks: e.value.userOptions.callbacks,
+        isTooltip: m.value.showTooltip,
+        titles: { ...e.value.userOptions.buttonTitles },
+        hasAnnotator: e.value.userOptions.buttons.annotator,
+        isAnnotation: Se.value,
+        printScale: e.value.userOptions.print.scale,
+        tableDialog: e.value.table.useDialog,
+        onToggleFullscreen: kt,
+        onGeneratePdf: u(ft),
+        onGenerateCsv: Re,
+        onGenerateImage: u(yt),
+        onGenerateSvg: St,
+        onToggleTable: $t,
+        onToggleLabels: _t,
+        onToggleTooltip: Ct,
+        onToggleAnnotator: Ge,
+        style: C({ visibility: u(vt) ? u(Ye) ? "visible" : "hidden" : "visible" })
+      }, qe({ _: 2 }, [
+        t.$slots.menuIcon ? {
+          name: "menuIcon",
+          fn: b(({ isOpen: l, color: o }) => [
+            y(t.$slots, "menuIcon", N(Y({ isOpen: l, color: o })), void 0, !0)
+          ]),
+          key: "0"
+        } : void 0,
+        t.$slots.optionTooltip ? {
+          name: "optionTooltip",
+          fn: b(() => [
+            y(t.$slots, "optionTooltip", {}, void 0, !0)
+          ]),
+          key: "1"
+        } : void 0,
+        t.$slots.optionPdf ? {
+          name: "optionPdf",
+          fn: b(() => [
+            y(t.$slots, "optionPdf", {}, void 0, !0)
+          ]),
+          key: "2"
+        } : void 0,
+        t.$slots.optionCsv ? {
+          name: "optionCsv",
+          fn: b(() => [
+            y(t.$slots, "optionCsv", {}, void 0, !0)
+          ]),
+          key: "3"
+        } : void 0,
+        t.$slots.optionImg ? {
+          name: "optionImg",
+          fn: b(() => [
+            y(t.$slots, "optionImg", {}, void 0, !0)
+          ]),
+          key: "4"
+        } : void 0,
+        t.$slots.optionSvg ? {
+          name: "optionSvg",
+          fn: b(() => [
+            y(t.$slots, "optionSvg", {}, void 0, !0)
+          ]),
+          key: "5"
+        } : void 0,
+        t.$slots.optionTable ? {
+          name: "optionTable",
+          fn: b(() => [
+            y(t.$slots, "optionTable", {}, void 0, !0)
+          ]),
+          key: "6"
+        } : void 0,
+        t.$slots.optionLabels ? {
+          name: "optionLabels",
+          fn: b(() => [
+            y(t.$slots, "optionLabels", {}, void 0, !0)
+          ]),
+          key: "7"
+        } : void 0,
+        t.$slots.optionFullscreen ? {
+          name: "optionFullscreen",
+          fn: b(({ toggleFullscreen: l, isFullscreen: o }) => [
+            y(t.$slots, "optionFullscreen", N(Y({ toggleFullscreen: l, isFullscreen: o })), void 0, !0)
+          ]),
+          key: "8"
+        } : void 0,
+        t.$slots.optionAnnotator ? {
+          name: "optionAnnotator",
+          fn: b(({ toggleAnnotator: l, isAnnotator: o }) => [
+            y(t.$slots, "optionAnnotator", N(Y({ toggleAnnotator: l, isAnnotator: o })), void 0, !0)
+          ]),
+          key: "9"
+        } : void 0
+      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasTooltip", "hasPdf", "hasImg", "hasSvg", "hasXls", "hasTable", "hasLabel", "hasFullscreen", "isFullscreen", "chartElement", "position", "callbacks", "isTooltip", "titles", "hasAnnotator", "isAnnotation", "printScale", "tableDialog", "onGeneratePdf", "onGenerateImage", "style"])) : v("", !0),
+      (s(), r("svg", {
+        ref_key: "svgRef",
+        ref: oe,
+        xmlns: u(Ol),
+        class: We({ "vue-data-ui-fullscreen--on": re.value, "vue-data-ui-fulscreen--off": !re.value, "vue-data-ui-svg": !0 }),
+        viewBox: `0 0 ${n.value.width <= 0 ? 10 : n.value.width} ${n.value.height <= 0 ? 10 : n.value.height}`,
+        style: C(`max-width:100%; overflow: visible; background:transparent;color:${e.value.style.chart.color};${dt.value.css}`)
+      }, [
+        h("g", {
+          ref_key: "G",
+          ref: ke,
+          class: "vue-data-ui-g"
+        }, [
+          Te(u(Wt)),
+          t.$slots["chart-background"] ? (s(), r("foreignObject", {
+            key: 0,
+            x: 0,
+            y: 0,
+            width: n.value.width <= 0 ? 10 : n.value.width,
+            height: n.value.height <= 0 ? 10 : n.value.height,
+            style: {
+              pointerEvents: "none"
+            }
+          }, [
+            y(t.$slots, "chart-background", {}, void 0, !0)
+          ], 8, ua)) : v("", !0),
+          e.value.type === "classic" && !isNaN(ne.value / _.value) ? (s(), r("defs", ra, [
+            e.value.style.chart.useGradient ? (s(), r("radialGradient", {
+              key: 0,
+              id: `gradient_${g.value}`
+            }, [
+              h("stop", {
+                offset: "0%",
+                "stop-color": u(Fe)(e.value.style.chart.backgroundColor, 0),
+                "stop-opacity": "0"
+              }, null, 8, va),
+              h("stop", {
+                offset: `${(1 - ne.value / _.value) * 100}%`,
+                "stop-color": u(Fe)("#FFFFFF", 0),
+                "stop-opacity": "0"
+              }, null, 8, da),
+              h("stop", {
+                offset: `${(1 - ne.value / _.value / 2) * 100}%`,
+                "stop-color": u(Fe)("#FFFFFF", e.value.style.chart.gradientIntensity)
+              }, null, 8, ca),
+              h("stop", {
+                offset: "100%",
+                "stop-color": u(Fe)(e.value.style.chart.backgroundColor, 0),
+                "stop-opacity": "0"
+              }, null, 8, ha)
+            ], 8, ia)) : v("", !0)
+          ])) : v("", !0),
+          e.value.type === "polar" ? (s(), r("defs", fa, [
+            (s(!0), r(k, null, I(d.value, (l, o) => (s(), r("radialGradient", {
+              id: `polar_gradient_${o}_${g.value}`,
+              cx: (isNaN(l.middlePoint.x / n.value.width * 100) ? 0 : l.middlePoint.x / n.value.width * 100) + "%",
+              cy: (isNaN(l.middlePoint.y / n.value.height * 100) ? 0 : l.middlePoint.y / n.value.height * 100) + "%",
+              r: "62%"
+            }, [
+              h("stop", {
+                offset: "0%",
+                "stop-color": u(Dl)(T.value[o].color, 0.05),
+                "stop-opacity": e.value.style.chart.gradientIntensity / 100
+              }, null, 8, ga),
+              h("stop", {
+                offset: "100%",
+                "stop-color": T.value[o].color
+              }, null, 8, pa)
+            ], 8, ya))), 256))
+          ])) : v("", !0),
+          h("defs", null, [
+            h("filter", {
+              id: `blur_${g.value}`,
+              x: "-50%",
+              y: "-50%",
+              width: "200%",
+              height: "200%"
+            }, [
+              h("feGaussianBlur", {
+                in: "SourceGraphic",
+                stdDeviation: 2,
+                id: `blur_std_${g.value}`
+              }, null, 8, ba),
+              a[5] || (a[5] = h("feColorMatrix", {
+                type: "saturate",
+                values: "0"
+              }, null, -1))
+            ], 8, ma),
+            h("filter", {
+              id: `shadow_${g.value}`,
+              "color-interpolation-filters": "sRGB"
+            }, [
+              h("feDropShadow", {
+                dx: "0",
+                dy: "0",
+                stdDeviation: "10",
+                "flood-opacity": "0.5",
+                "flood-color": e.value.style.chart.layout.donut.shadowColor
+              }, null, 8, ka)
+            ], 8, wa),
+            h("filter", {
+              id: `drop_shadow_${g.value}`,
+              "color-interpolation-filters": "sRGB",
+              x: "-50%",
+              y: "-50%",
+              width: "200%",
+              height: "200%"
+            }, [
+              h("feDropShadow", {
+                dx: "0",
+                dy: "0",
+                stdDeviation: "3",
+                "flood-opacity": "1",
+                "flood-color": e.value.style.chart.layout.donut.shadowColor
+              }, null, 8, $a)
+            ], 8, xa)
+          ]),
+          e.value.type === "classic" ? (s(!0), r(k, { key: 3 }, I(T.value.filter((l) => !l.ghost), (l, o) => (s(), r("g", null, [
+            R(l) && m.value.dataLabels.show ? (s(), r("path", {
+              key: 0,
+              d: u(Nl)(l, { x: n.value.width / 2, y: n.value.height / 2 }, 16, 16, !1, !1, ne.value, 12, e.value.style.chart.layout.curvedMarkers),
+              stroke: l.color,
+              "stroke-width": "1",
+              "stroke-linecap": "round",
+              "stroke-linejoin": "round",
+              fill: "none",
+              filter: ue(o)
+            }, null, 8, _a)) : v("", !0)
+          ]))), 256)) : v("", !0),
+          e.value.type === "polar" ? (s(!0), r(k, { key: 4 }, I(T.value.filter((l) => !l.ghost), (l, o) => (s(), r("g", null, [
+            R(l) && m.value.dataLabels.show ? (s(), r("path", {
+              key: 0,
+              d: `M ${u(P)({ initX: d.value[o].middlePoint.x, initY: d.value[o].middlePoint.y, offset: 24, centerX: n.value.width / 2, centerY: n.value.height / 2 }).x},${u(P)({ initX: d.value[o].middlePoint.x, initY: d.value[o].middlePoint.y, offset: 24, centerX: n.value.width / 2, centerY: n.value.height / 2 }).y} ${d.value[o].middlePoint.x},${d.value[o].middlePoint.y}`,
+              stroke: l.color,
+              "stroke-width": "1",
+              "stroke-linecap": "round",
+              "stroke-linejoin": "round",
+              fill: "none",
+              filter: ue(o),
+              style: C({
+                transition: S.value || !e.value.serieToggleAnimation.show ? "none" : `all ${e.value.serieToggleAnimation.durationMs}ms ease-in-out`
+              })
+            }, null, 12, Ca)) : v("", !0)
+          ]))), 256)) : v("", !0),
+          e.value.type === "classic" && e.value.style.chart.layout.donut.useShadow ? (s(), r("circle", {
+            key: 5,
+            cx: n.value.width / 2,
+            cy: n.value.height / 2,
+            r: _.value <= 0 ? 10 : _.value,
+            fill: e.value.style.chart.backgroundColor,
+            filter: `url(#shadow_${g.value})`
+          }, null, 8, Aa)) : v("", !0),
+          t.$slots.pattern ? (s(), r("g", Sa, [
+            (s(!0), r(k, null, I(Ze.dataset, (l, o) => (s(), r("defs", {
+              key: `pattern-${l.patternIndex}`
+            }, [
+              y(t.$slots, "pattern", He({ ref_for: !0 }, { seriesIndex: o, patternId: `pattern_${g.value}_${o}` }), void 0, !0)
+            ]))), 128))
+          ])) : v("", !0),
+          F.value && e.value.type === "classic" ? (s(), r(k, { key: 7 }, [
+            (s(!0), r(k, null, I(E.value, (l, o) => (s(), r("path", {
+              stroke: e.value.style.chart.backgroundColor,
+              d: l.arcSlice,
+              fill: "#FFFFFF"
+            }, null, 8, Ta))), 256)),
+            (s(!0), r(k, null, I(E.value, (l, o) => (s(), r("path", {
+              class: "vue-ui-donut-arc-path",
+              d: l.arcSlice,
+              fill: l.color,
+              stroke: e.value.style.chart.layout.donut.borderColorAuto ? e.value.style.chart.backgroundColor : e.value.style.chart.layout.donut.borderColor,
+              "stroke-width": e.value.style.chart.layout.donut.borderWidth,
+              filter: ue(o)
+            }, null, 8, Pa))), 256)),
+            t.$slots.pattern ? (s(), r("g", Fa, [
+              (s(!0), r(k, null, I(E.value, (l, o) => (s(), r("path", {
+                class: "vue-ui-donut-arc-path",
+                d: l.arcSlice,
+                fill: `url(#${l.pattern})`,
+                stroke: e.value.style.chart.layout.donut.borderColorAuto ? e.value.style.chart.backgroundColor : e.value.style.chart.layout.donut.borderColor,
+                "stroke-width": e.value.style.chart.layout.donut.borderWidth,
+                filter: ue(o)
+              }, null, 8, Ia))), 256))
+            ])) : v("", !0)
+          ], 64)) : v("", !0),
+          F.value && e.value.type === "polar" ? (s(), r(k, { key: 8 }, [
+            T.value.length > 1 ? (s(), r("g", La, [
+              (s(!0), r(k, null, I(E.value, (l, o) => (s(), r("path", {
+                stroke: e.value.style.chart.layout.donut.borderColorAuto ? e.value.style.chart.backgroundColor : e.value.style.chart.layout.donut.borderColor,
+                d: d.value[o].path,
+                fill: "#FFFFFF",
+                style: C({
+                  transition: S.value || !e.value.serieToggleAnimation.show ? "none" : `all ${e.value.serieToggleAnimation.durationMs}ms ease-in-out`
+                })
+              }, null, 12, Ma))), 256)),
+              e.value.style.chart.layout.donut.useShadow ? (s(), r("g", za, [
+                (s(!0), r(k, null, I(E.value, (l, o) => (s(), r("path", {
+                  class: "vue-ui-donut-arc-path",
+                  d: d.value[o].path,
+                  fill: "transparent",
+                  stroke: e.value.style.chart.layout.donut.borderColorAuto ? e.value.style.chart.backgroundColor : e.value.style.chart.layout.donut.borderColor,
+                  "stroke-width": e.value.style.chart.layout.donut.borderWidth,
+                  filter: `url(#drop_shadow_${g.value})`,
+                  style: C({
+                    transition: S.value || !e.value.serieToggleAnimation.show ? "none" : `all ${e.value.serieToggleAnimation.durationMs}ms ease-in-out`
+                  })
+                }, null, 12, Oa))), 256))
+              ])) : v("", !0),
+              t.$slots.pattern ? (s(), r("g", Da, [
+                (s(!0), r(k, null, I(E.value, (l, o) => (s(), r("path", {
+                  class: "vue-ui-donut-arc-path",
+                  d: d.value[o].path,
+                  fill: `url(#${l.pattern})`,
+                  stroke: e.value.style.chart.layout.donut.borderColorAuto ? e.value.style.chart.backgroundColor : e.value.style.chart.layout.donut.borderColor,
+                  "stroke-width": e.value.style.chart.layout.donut.borderWidth,
+                  filter: ue(o),
+                  style: C({
+                    transition: S.value || !e.value.serieToggleAnimation.show ? "none" : `all ${e.value.serieToggleAnimation.durationMs}ms ease-in-out`,
+                    transformOrigin: "center"
+                  })
+                }, null, 12, Na))), 256))
+              ])) : v("", !0),
+              (s(!0), r(k, null, I(E.value, (l, o) => (s(), r("path", {
+                class: "vue-ui-donut-arc-path",
+                d: d.value[o].path,
+                fill: e.value.style.chart.useGradient ? `url(#polar_gradient_${o}_${g.value})` : l.color,
+                stroke: e.value.style.chart.layout.donut.borderColorAuto ? e.value.style.chart.backgroundColor : e.value.style.chart.layout.donut.borderColor,
+                "stroke-width": e.value.style.chart.layout.donut.borderWidth,
+                filter: ue(o),
+                style: C({
+                  transition: S.value || !e.value.serieToggleAnimation.show ? "none" : `all ${e.value.serieToggleAnimation.durationMs}ms ease-in-out`
+                })
+              }, null, 12, Ya))), 256))
+            ])) : (s(), r("g", Xa, [
+              t.$slots.pattern ? (s(), r("circle", {
+                key: 0,
+                cx: n.value.width / 2,
+                cy: n.value.height / 2,
+                r: _.value,
+                fill: `url(#pattern_${g.value}_${T.value[0].patternIndex})`,
+                stroke: e.value.style.chart.backgroundColor,
+                "stroke-width": e.value.style.chart.layout.donut.borderWidth
+              }, null, 8, Ba)) : v("", !0),
+              h("circle", {
+                cx: n.value.width / 2,
+                cy: n.value.height / 2,
+                r: _.value,
+                fill: e.value.style.chart.useGradient ? `url(#polar_gradient_0_${g.value})` : T.value[0].color,
+                stroke: e.value.style.chart.backgroundColor,
+                "stroke-width": e.value.style.chart.layout.donut.borderWidth
+              }, null, 8, Va)
+            ]))
+          ], 64)) : (s(), r(k, { key: 9 }, [
+            e.value.type === "classic" && !rl.value ? (s(), r("g", Ea, [
+              (s(!0), r(k, null, I(il.value, (l, o) => (s(), r("path", {
+                class: "vue-ui-donut-arc-path",
+                d: l.arcSlice,
+                fill: l.color,
+                stroke: e.value.style.chart.backgroundColor,
+                "stroke-width": e.value.style.chart.layout.donut.borderWidth
+              }, null, 8, Ra))), 256))
+            ])) : v("", !0),
+            h("circle", {
+              cx: n.value.width / 2,
+              cy: n.value.height / 2,
+              r: _.value <= 0 ? 10 : _.value,
+              fill: "transparent",
+              stroke: e.value.style.chart.backgroundColor
+            }, null, 8, Ga)
+          ], 64)),
+          e.value.style.chart.useGradient && e.value.type === "classic" ? (s(), r("circle", {
+            key: 10,
+            cx: n.value.width / 2,
+            cy: n.value.height / 2,
+            r: (
+              /* This might require adjustments */
+              _.value <= 0 ? 10 : _.value
+            ),
+            fill: `url(#gradient_${g.value})`
+          }, null, 8, Ua)) : v("", !0),
+          h("circle", {
+            ref_key: "circle_hollow",
+            ref: Zt,
+            style: { pointerEvents: "none" },
+            fill: "none",
+            cx: n.value.width / 2,
+            cy: n.value.height / 2,
+            r: Math.max(0.1, ne.value * 1.7)
+          }, null, 8, Wa),
+          F.value ? (s(), r(k, { key: 11 }, [
+            T.value.length > 1 || e.value.type === "classic" ? (s(), r("g", qa, [
+              (s(!0), r(k, null, I(T.value.filter((l) => !l.ghost), (l, o) => (s(), r("path", {
+                d: e.value.type === "classic" ? l.arcSlice : d.value[o].path,
+                stroke: e.value.style.chart.layout.donut.borderColorAuto ? e.value.style.chart.backgroundColor : e.value.style.chart.layout.donut.borderColor,
+                fill: V.value === o ? e.value.style.chart.layout.donut.selectedColor : "transparent",
+                onMouseenter: (i) => fe({
+                  datapoint: l,
+                  relativeIndex: o,
+                  seriesIndex: l.seriesIndex,
+                  show: !0
+                }),
+                onMouseleave: (i) => he({ datapoint: l, seriesIndex: l.seriesIndex }),
+                onClick: (i) => ee(l, o)
+              }, null, 40, Ha))), 256))
+            ])) : (s(), r("g", ja, [
+              h("circle", {
+                cx: n.value.width / 2,
+                cy: n.value.height / 2,
+                r: _.value,
+                fill: "transparent",
+                onMouseenter: a[0] || (a[0] = (l) => fe({
+                  datapoint: T.value[0],
+                  relativeIndex: 0,
+                  seriesIndex: T.value[0].seriesIndex,
+                  show: !0
+                })),
+                onMouseleave: a[1] || (a[1] = (l) => he({ datapoint: T.value[0], seriesIndex: T.value[0].seriesIndex })),
+                onClick: a[2] || (a[2] = (l) => ee(T.value[0], t.i))
+              }, null, 40, Qa)
+            ]))
+          ], 64)) : v("", !0),
+          e.value.type === "classic" ? (s(), r("g", {
+            key: 12,
+            ref_key: "G_hollow",
+            ref: Qt,
+            class: "vue-data-ui-donut-hollow-labels"
+          }, [
+            e.value.style.chart.layout.labels.hollow.total.show ? (s(), r("text", {
+              key: 0,
+              "text-anchor": "middle",
+              x: n.value.width / 2,
+              y: n.value.height / 2 - (e.value.style.chart.layout.labels.hollow.average.show ? e.value.style.chart.layout.labels.hollow.total.fontSize : 0) + e.value.style.chart.layout.labels.hollow.total.offsetY,
+              fill: e.value.style.chart.layout.labels.hollow.total.color,
+              "font-size": e.value.style.chart.layout.labels.hollow.total.fontSize,
+              style: C(`font-weight:${e.value.style.chart.layout.labels.hollow.total.bold ? "bold" : ""}`)
+            }, U(e.value.style.chart.layout.labels.hollow.total.text), 13, Za)) : v("", !0),
+            e.value.style.chart.layout.labels.hollow.total.show ? (s(), r("text", {
+              key: 1,
+              "text-anchor": "middle",
+              x: n.value.width / 2,
+              y: n.value.height / 2 + e.value.style.chart.layout.labels.hollow.total.fontSize - (e.value.style.chart.layout.labels.hollow.average.show ? e.value.style.chart.layout.labels.hollow.total.fontSize : 0) + e.value.style.chart.layout.labels.hollow.total.value.offsetY,
+              fill: e.value.style.chart.layout.labels.hollow.total.value.color,
+              "font-size": e.value.style.chart.layout.labels.hollow.total.value.fontSize,
+              style: C(`font-weight:${e.value.style.chart.layout.labels.hollow.total.value.bold ? "bold" : ""}`)
+            }, U(u(W)(
+              e.value.style.chart.layout.labels.hollow.total.value.formatter,
+              F.value,
+              u(X)({
+                p: e.value.style.chart.layout.labels.hollow.total.value.prefix,
+                v: F.value,
+                s: e.value.style.chart.layout.labels.hollow.total.value.suffix
+              })
+            )), 13, Ja)) : v("", !0),
+            e.value.style.chart.layout.labels.hollow.average.show ? (s(), r("text", {
+              key: 2,
+              "text-anchor": "middle",
+              x: n.value.width / 2,
+              y: n.value.height / 2 + (e.value.style.chart.layout.labels.hollow.total.show ? e.value.style.chart.layout.labels.hollow.average.fontSize : 0) + e.value.style.chart.layout.labels.hollow.average.offsetY,
+              fill: e.value.style.chart.layout.labels.hollow.average.color,
+              "font-size": e.value.style.chart.layout.labels.hollow.average.fontSize,
+              style: C(`font-weight:${e.value.style.chart.layout.labels.hollow.average.bold ? "bold" : ""}`)
+            }, U(e.value.style.chart.layout.labels.hollow.average.text), 13, Ka)) : v("", !0),
+            e.value.style.chart.layout.labels.hollow.average.show ? (s(), r("text", {
+              key: 3,
+              "text-anchor": "middle",
+              x: n.value.width / 2,
+              y: n.value.height / 2 + (e.value.style.chart.layout.labels.hollow.total.show ? e.value.style.chart.layout.labels.hollow.average.fontSize : 0) + e.value.style.chart.layout.labels.hollow.average.fontSize + e.value.style.chart.layout.labels.hollow.average.value.offsetY,
+              fill: e.value.style.chart.layout.labels.hollow.average.value.color,
+              "font-size": e.value.style.chart.layout.labels.hollow.average.value.fontSize,
+              style: C(`font-weight:${e.value.style.chart.layout.labels.hollow.average.value.bold ? "bold" : ""}`)
+            }, U(se.value || S.value ? "--" : u(W)(
+              e.value.style.chart.layout.labels.hollow.average.value.formatter,
+              Ve.value,
+              u(X)({
+                p: e.value.style.chart.layout.labels.hollow.average.value.prefix,
+                v: Ve.value,
+                s: e.value.style.chart.layout.labels.hollow.average.value.suffix,
+                r: e.value.style.chart.layout.labels.hollow.average.value.rounding
+              })
+            )), 13, eo)) : v("", !0)
+          ], 512)) : v("", !0),
+          (s(!0), r(k, null, I(E.value.filter((l) => !l.ghost), (l, o) => (s(), r("g", {
+            filter: ue(o),
+            class: We({ animated: e.value.useCssAnimation }),
+            key: l.seriesIndex
+          }, [
+            e.value.style.chart.layout.labels.dataLabels.useLabelSlots ? (s(), r("g", lo, [
+              (s(), r("foreignObject", {
+                x: u($)(l, !0).anchor === "end" ? u($)(l).x - 120 : u($)(l, !0).anchor === "middle" ? u($)(l).x - 60 : u($)(l).x,
+                y: u(ge)(l) - (xt.value ? 20 : 0),
+                width: "120",
+                height: "60",
+                style: { overflow: "visible" }
+              }, [
+                h("div", null, [
+                  y(t.$slots, "dataLabel", He({ ref_for: !0 }, {
+                    datapoint: l,
+                    isBlur: !e.value.useBlurOnHover || [null, void 0].includes(V.value) || V.value === o,
+                    isSafari: xt.value,
+                    isVisible: R(l) && m.value.dataLabels.show,
+                    textAlign: u($)(l, !0, 16, !0).anchor,
+                    flexAlign: u($)(l, !0, 16).anchor,
+                    percentage: Be(l, E.value)
+                  }), void 0, !0)
+                ])
+              ], 8, ao))
+            ])) : (s(), r("g", oo, [
+              e.value.type === "classic" ? (s(), r(k, { key: 0 }, [
+                R(l) && m.value.dataLabels.show ? (s(), r("circle", {
+                  key: 0,
+                  cx: u($)(l).x,
+                  cy: u(ge)(l) - 3.5,
+                  fill: l.color,
+                  stroke: e.value.style.chart.backgroundColor,
+                  "stroke-width": 1,
+                  r: 3,
+                  filter: !e.value.useBlurOnHover || [null, void 0].includes(V.value) || V.value === o ? "" : `url(#blur_${g.value})`,
+                  onClick: (i) => ee(l, o),
+                  onMouseenter: (i) => fe({
+                    datapoint: l,
+                    relativeIndex: o,
+                    seriesIndex: l.seriesIndex,
+                    show: !0
+                  }),
+                  onMouseleave: (i) => he({ datapoint: l, seriesIndex: l.seriesIndex })
+                }, null, 40, no)) : v("", !0)
+              ], 64)) : v("", !0),
+              e.value.type === "polar" ? (s(), r(k, { key: 1 }, [
+                R(l) && m.value.dataLabels.show ? (s(), r("circle", {
+                  key: 0,
+                  cx: u(P)({ initX: d.value[o].middlePoint.x, initY: d.value[o].middlePoint.y, offset: 24, centerX: n.value.width / 2, centerY: n.value.height / 2 }).x,
+                  cy: u(P)({ initX: d.value[o].middlePoint.x, initY: d.value[o].middlePoint.y, offset: 24, centerX: n.value.width / 2, centerY: n.value.height / 2 }).y,
+                  fill: l.color,
+                  stroke: e.value.style.chart.backgroundColor,
+                  "stroke-width": 1,
+                  r: 3,
+                  filter: !e.value.useBlurOnHover || [null, void 0].includes(V.value) || V.value === o ? "" : `url(#blur_${g.value})`,
+                  onClick: (i) => ee(l, o),
+                  onMouseenter: (i) => fe({
+                    datapoint: l,
+                    relativeIndex: o,
+                    seriesIndex: l.seriesIndex,
+                    show: !0
+                  }),
+                  onMouseleave: (i) => he({ datapoint: l, seriesIndex: l.seriesIndex }),
+                  style: C({
+                    transition: S.value || !e.value.serieToggleAnimation.show ? "none" : `all ${e.value.serieToggleAnimation.durationMs}ms ease-in-out`
+                  })
+                }, null, 44, so)) : v("", !0)
+              ], 64)) : v("", !0),
+              e.value.type === "classic" ? (s(), r(k, { key: 2 }, [
+                Ft(h("text", {
+                  class: "vue-data-ui-datalabel-value",
+                  "text-anchor": u($)(l, !0, 12).anchor,
+                  x: u($)(l, !0, 12).x,
+                  y: u(ge)(l),
+                  fill: e.value.style.chart.layout.labels.percentage.color,
+                  "font-size": xe.value + "px",
+                  style: C(`font-weight:${e.value.style.chart.layout.labels.percentage.bold ? "bold" : ""}`),
+                  onClick: (i) => ee(l, o),
+                  onMouseenter: (i) => fe({
+                    datapoint: l,
+                    relativeIndex: o,
+                    seriesIndex: l.seriesIndex,
+                    show: !0
+                  }),
+                  onMouseleave: (i) => he({ datapoint: l, seriesIndex: l.seriesIndex })
+                }, U(Be(l, E.value)) + " " + U(e.value.style.chart.layout.labels.value.show ? `(${u(W)(
+                  e.value.style.chart.layout.labels.value.formatter,
+                  l.value,
+                  u(X)({
+                    p: e.value.style.chart.layout.labels.dataLabels.prefix,
+                    v: l.value,
+                    s: e.value.style.chart.layout.labels.dataLabels.suffix,
+                    r: e.value.style.chart.layout.labels.value.rounding
+                  }),
+                  { datapoint: l }
+                )})` : ""), 45, uo), [
+                  [It, R(l) && m.value.dataLabels.show]
+                ]),
+                Ft(h("text", {
+                  class: "vue-data-ui-datalabel-name",
+                  "text-anchor": u($)(l).anchor,
+                  x: u($)(l, !0, 12).x,
+                  y: u(ge)(l) + J.value * 1.2,
+                  fill: e.value.style.chart.layout.labels.name.color,
+                  "font-size": J.value + "px",
+                  style: C(`font-weight:${e.value.style.chart.layout.labels.name.bold ? "bold" : ""}`),
+                  onClick: (i) => ee(l, o),
+                  innerHTML: u(Ot)({
+                    content: l.name,
+                    fontSize: J.value,
+                    fill: e.value.style.chart.layout.labels.name.color,
+                    x: u($)(l, !0, 12).x,
+                    y: u(ge)(l) + J.value
+                  })
+                }, null, 12, ro), [
+                  [It, R(l) && m.value.dataLabels.show]
+                ]),
+                a[6] || (a[6] = Pe(' @mouseenter="useTooltip({ datapoint: arc, relativeIndex: i, seriesIndex: arc.seriesIndex, show: true })" @mouseleave="handleDatapointLeave({ datapoint: arc, seriesIndex: arc.seriesIndex })" /> ', -1))
+              ], 64)) : v("", !0),
+              e.value.type === "polar" ? (s(), r(k, { key: 3 }, [
+                R(l) && m.value.dataLabels.show ? (s(), r("text", {
+                  key: 0,
+                  class: "vue-data-ui-datalabel-value",
+                  "text-anchor": ce(d.value[o].middlePoint),
+                  x: u(P)({ initX: d.value[o].middlePoint.x, initY: d.value[o].middlePoint.y, offset: 42, centerX: n.value.width / 2, centerY: n.value.height / 2 }).x,
+                  y: u(P)({ initX: d.value[o].middlePoint.x, initY: d.value[o].middlePoint.y, offset: 42, centerX: n.value.width / 2, centerY: n.value.height / 2 }).y,
+                  fill: e.value.style.chart.layout.labels.percentage.color,
+                  "font-size": xe.value,
+                  style: C({
+                    transition: S.value || !e.value.serieToggleAnimation.show ? "none" : `all ${e.value.serieToggleAnimation.durationMs}ms ease-in-out`,
+                    fontWeight: e.value.style.chart.layout.labels.percentage.bold ? "bold" : "normal"
+                  }),
+                  onClick: (i) => ee(l, o),
+                  onMouseenter: (i) => fe({
+                    datapoint: l,
+                    relativeIndex: o,
+                    seriesIndex: l.seriesIndex,
+                    show: !0
+                  }),
+                  onMouseleave: (i) => he({ datapoint: l, seriesIndex: l.seriesIndex })
+                }, U(Be(l, E.value)) + " " + U(e.value.style.chart.layout.labels.value.show ? `(${u(W)(
+                  e.value.style.chart.layout.labels.value.formatter,
+                  l.value,
+                  u(X)({
+                    p: e.value.style.chart.layout.labels.dataLabels.prefix,
+                    v: l.value,
+                    s: e.value.style.chart.layout.labels.dataLabels.suffix,
+                    r: e.value.style.chart.layout.labels.value.rounding
+                  }),
+                  { datapoint: l }
+                )})` : ""), 45, io)) : v("", !0),
+                R(l) && m.value.dataLabels.show ? (s(), r("text", {
+                  key: 1,
+                  class: "vue-data-ui-datalabel-name",
+                  "text-anchor": ce(d.value[o].middlePoint),
+                  x: u(P)({ initX: d.value[o].middlePoint.x, initY: d.value[o].middlePoint.y, offset: 42, centerX: n.value.width / 2, centerY: n.value.height / 2 }).x,
+                  y: u(P)({ initX: d.value[o].middlePoint.x, initY: d.value[o].middlePoint.y, offset: 42, centerX: n.value.width / 2, centerY: n.value.height / 2 }).y + J.value * 1.2,
+                  fill: e.value.style.chart.layout.labels.name.color,
+                  "font-size": J.value,
+                  style: C({
+                    transition: S.value || !e.value.serieToggleAnimation.show ? "none" : `all ${e.value.serieToggleAnimation.durationMs}ms ease-in-out`,
+                    fontWeight: e.value.style.chart.layout.labels.name.bold ? "bold" : "normal"
+                  }),
+                  onClick: (i) => ee(l, o),
+                  innerHTML: u(Ot)({
+                    content: l.name,
+                    fontSize: xe.value,
+                    fill: e.value.style.chart.layout.labels.name.color,
+                    x: u(P)({ initX: d.value[o].middlePoint.x, initY: d.value[o].middlePoint.y, offset: 42, centerX: n.value.width / 2, centerY: n.value.height / 2 }).x,
+                    y: u(P)({ initX: d.value[o].middlePoint.x, initY: d.value[o].middlePoint.y, offset: 42, centerX: n.value.width / 2, centerY: n.value.height / 2 }).y + J.value * 1.2
+                  })
+                }, null, 12, vo)) : v("", !0),
+                a[7] || (a[7] = Pe(' @mouseenter="useTooltip({ datapoint: arc, relativeIndex: i, seriesIndex: arc.seriesIndex, show: true })" @mouseleave="handleDatapointLeave({ datapoint: arc, seriesIndex: arc.seriesIndex })" /> ', -1))
+              ], 64)) : v("", !0)
+            ])),
+            m.value.dataLabels.show && e.value.style.chart.comments.show && l.comment ? (s(), r("g", co, [
+              R(l) && e.value.type === "classic" ? (s(), r("foreignObject", {
+                key: 0,
+                x: e.value.style.chart.comments.offsetX + (u($)(l, !0).anchor === "end" ? u($)(l).x - e.value.style.chart.comments.width : u($)(l, !0).anchor === "middle" ? u($)(l).x - e.value.style.chart.comments.width / 2 : u($)(l).x),
+                y: u(ge)(l) + 24 + e.value.style.chart.comments.offsetY,
+                width: e.value.style.chart.comments.width,
+                height: "200",
+                style: { overflow: "visible", "pointer-events": "none" }
+              }, [
+                h("div", null, [
+                  y(t.$slots, "plot-comment", {
+                    plot: { ...l, textAlign: u($)(l, !0, 16, !0).anchor, flexAlign: u($)(l, !0, 16).anchor, isFirstLoad: S.value }
+                  }, void 0, !0)
+                ])
+              ], 8, ho)) : v("", !0),
+              R(l) && e.value.type === "polar" ? (s(), r("foreignObject", {
+                key: 1,
+                x: e.value.style.chart.comments.offsetX + (ce(d.value[o].middlePoint) === "end" ? u(P)({ initX: d.value[o].middlePoint.x, initY: d.value[o].middlePoint.y, offset: 42, centerX: n.value.width / 2, centerY: n.value.height / 2 }).x - e.value.style.chart.comments.width : ce(d.value[o].middlePoint) === "middle" ? u(P)({ initX: d.value[o].middlePoint.x, initY: d.value[o].middlePoint.y, offset: 42, centerX: n.value.width / 2, centerY: n.value.height / 2 }).x - e.value.style.chart.comments.width / 2 : u(P)({ initX: d.value[o].middlePoint.x, initY: d.value[o].middlePoint.y, offset: 42, centerX: n.value.width / 2, centerY: n.value.height / 2 }).x),
+                y: vl(d.value[o]) + e.value.style.chart.comments.offsetY,
+                width: e.value.style.chart.comments.width,
+                height: "200",
+                style: C({
+                  transition: S.value || !e.value.serieToggleAnimation.show ? "none" : `all ${e.value.serieToggleAnimation.durationMs}ms ease-in-out`,
+                  overflow: "visible",
+                  pointerEvents: "none"
+                })
+              }, [
+                h("div", null, [
+                  y(t.$slots, "plot-comment", {
+                    plot: { ...l, textAlign: ce(d.value[o].middlePoint), flexAlign: ce(d.value[o].middlePoint), isFirstLoad: S.value }
+                  }, void 0, !0)
+                ])
+              ], 12, fo)) : v("", !0)
+            ])) : v("", !0)
+          ], 10, to))), 128)),
+          y(t.$slots, "svg", { svg: n.value }, void 0, !0)
+        ], 512)
+      ], 14, sa)),
+      t.$slots.watermark ? (s(), r("div", yo, [
+        y(t.$slots, "watermark", N(Y({ isPrinting: u(ct) || u(ht) })), void 0, !0)
+      ])) : v("", !0),
+      h("div", {
+        id: `legend-bottom-${g.value}`
+      }, null, 8, go),
+      nt.value ? (s(), ae(Al, {
+        key: 5,
+        to: e.value.style.chart.legend.position === "top" ? `#legend-top-${g.value}` : `#legend-bottom-${g.value}`
+      }, [
+        h("div", {
+          ref_key: "chartLegend",
+          ref: Ke
+        }, [
+          e.value.style.chart.legend.show ? (s(), ae(la, {
+            key: `legend_${ot.value}`,
+            legendSet: Xe.value,
+            config: ul.value,
+            onClickMarker: a[3] || (a[3] = ({ i: l }) => Ce(l))
+          }, qe({
+            item: b(({ legend: l, index: o }) => [
+              h("div", {
+                style: C(`opacity:${z.value.includes(o) ? 0.5 : 1}`),
+                onClick: (i) => l.segregate()
+              }, U(l.display), 13, po)
+            ]),
+            _: 2
+          }, [
+            t.$slots.pattern ? {
+              name: "legend-pattern",
+              fn: b(({ legend: l, index: o }) => [
+                Te(Kl, {
+                  shape: l.shape,
+                  radius: 30,
+                  stroke: "none",
+                  plot: { x: 30, y: 30 },
+                  fill: `url(#pattern_${g.value}_${o})`
+                }, null, 8, ["shape", "fill"])
+              ]),
+              key: "0"
+            } : void 0
+          ]), 1032, ["legendSet", "config"])) : v("", !0),
+          y(t.$slots, "legend", { legend: Xe.value }, void 0, !0)
+        ], 512)
+      ], 8, ["to"])) : v("", !0),
+      t.$slots.source ? (s(), r("div", {
+        key: 6,
+        ref_key: "source",
+        ref: et,
+        dir: "auto"
+      }, [
+        y(t.$slots, "source", {}, void 0, !0)
+      ], 512)) : v("", !0),
+      t.$slots.hollow ? (s(), r("div", mo, [
+        y(t.$slots, "hollow", N(Y({
+          total: F.value,
+          average: Ve.value,
+          dataset: L.value
+        })), void 0, !0)
+      ])) : v("", !0),
+      Te(u(Bt), {
+        show: m.value.showTooltip && Oe.value,
+        backgroundColor: e.value.style.chart.tooltip.backgroundColor,
+        color: e.value.style.chart.tooltip.color,
+        fontSize: e.value.style.chart.tooltip.fontSize,
+        borderRadius: e.value.style.chart.tooltip.borderRadius,
+        borderColor: e.value.style.chart.tooltip.borderColor,
+        borderWidth: e.value.style.chart.tooltip.borderWidth,
+        backgroundOpacity: e.value.style.chart.tooltip.backgroundOpacity,
+        position: e.value.style.chart.tooltip.position,
+        offsetY: e.value.style.chart.tooltip.offsetY,
+        parent: B.value,
+        content: De.value,
+        isCustom: me.value,
+        isFullscreen: re.value,
+        smooth: e.value.style.chart.tooltip.smooth,
+        backdropFilter: e.value.style.chart.tooltip.backdropFilter,
+        smoothForce: e.value.style.chart.tooltip.smoothForce,
+        smoothSnapThreshold: e.value.style.chart.tooltip.smoothSnapThrehsold
+      }, {
+        "tooltip-before": b(() => [
+          y(t.$slots, "tooltip-before", N(Y({ ...Ee.value })), void 0, !0)
+        ]),
+        "tooltip-after": b(() => [
+          y(t.$slots, "tooltip-after", N(Y({ ...Ee.value })), void 0, !0)
+        ]),
+        _: 3
+      }, 8, ["show", "backgroundColor", "color", "fontSize", "borderRadius", "borderColor", "borderWidth", "backgroundOpacity", "position", "offsetY", "parent", "content", "isCustom", "isFullscreen", "smooth", "backdropFilter", "smoothForce", "smoothSnapThreshold"]),
+      we.value && e.value.userOptions.buttons.table ? (s(), ae(Sl(be.value.component), He({ key: 8 }, be.value.props, {
+        ref_key: "tableUnit",
+        ref: pe,
+        onClose: At
+      }), qe({
+        content: b(() => [
+          (s(), ae(u(Rt), {
+            key: `table_${at.value}`,
+            colNames: Ae.value.colNames,
+            head: Ae.value.head,
+            body: Ae.value.body,
+            config: Ae.value.config,
+            title: e.value.table.useDialog ? "" : be.value.title,
+            withCloseButton: !e.value.table.useDialog,
+            onClose: At
+          }, {
+            th: b(({ th: l }) => [
+              h("div", {
+                innerHTML: l,
+                style: { display: "flex", "align-items": "center" }
+              }, null, 8, bo)
+            ]),
+            td: b(({ td: l }) => [
+              Pe(U(l.name ? l.name : isNaN(Number(l)) ? l.includes("%") ? l : u(W)(
+                e.value.style.chart.layout.labels.percentage.formatter,
+                l,
+                u(X)({
+                  v: l,
+                  s: "%",
+                  r: e.value.style.chart.layout.labels.percentage.rounding
+                })
+              ) : u(W)(
+                e.value.style.chart.layout.labels.value.formatter,
+                l,
+                u(X)({
+                  p: e.value.style.chart.layout.labels.dataLabels.prefix,
+                  v: l,
+                  s: e.value.style.chart.layout.labels.dataLabels.suffix,
+                  r: e.value.style.chart.layout.labels.value.rounding
+                })
+              )), 1)
+            ]),
+            _: 1
+          }, 8, ["colNames", "head", "body", "config", "title", "withCloseButton"]))
+        ]),
+        _: 2
+      }, [
+        e.value.table.useDialog ? {
+          name: "title",
+          fn: b(() => [
+            Pe(U(be.value.title), 1)
+          ]),
+          key: "0"
+        } : void 0,
+        e.value.table.useDialog ? {
+          name: "actions",
+          fn: b(() => [
+            h("button", {
+              tabindex: "0",
+              class: "vue-ui-user-options-button",
+              onClick: a[4] || (a[4] = (l) => Re(e.value.userOptions.callbacks.csv))
+            }, [
+              Te(u(Vt), {
+                name: "excel",
+                stroke: be.value.props.color
+              }, null, 8, ["stroke"])
+            ])
+          ]),
+          key: "1"
+        } : void 0
+      ]), 1040)) : v("", !0),
+      u($e) ? (s(), ae(Hl, { key: 9 })) : v("", !0)
+    ], 46, oa));
+  }
+}, Do = /* @__PURE__ */ aa(wo, [["__scopeId", "data-v-a23e4322"]]);
+export {
+  Do as default
+};