import { computed as L, ref as c, onMounted as Ue, onBeforeUnmount as Re, watch as Ee, openBlock as u, createElementBlock as n, normalizeClass as P, normalizeStyle as se, createVNode as ue, createCommentVNode as y, createBlock as H, unref as r, createSlots as Ge, withCtx as m, renderSlot as _, normalizeProps as q, guardReactiveProps as J, createElementVNode as b, Fragment as w, renderList as $, toDisplayString as F, createTextVNode as K, nextTick as Ye, pushScopeId as Xe, popScopeId as We } from "vue";
import { u as He, c as qe, t as Je, a as Ke, p as Q, o as Qe, e as O, b as Ze, F as Ce, d as je, m as Ne, f as C, X as et, H as tt, k as A, n as ne, i as R, x as Se, y as lt, q as at, r as ot } from "./index-CguVaFlt.js";
import { t as st, u as ut } from "./useResponsive-NZB-WLRF.js";
import { _ as nt } from "./Title-DbTGPg4G.js";
import { u as rt, U as it } from "./usePrinter-ClsMRVJG.js";
import { D as dt } from "./DataTable-BwHWRlRZ.js";
import { _ as ct } from "./Tooltip-u79R5W5y.js";
import { L as vt } from "./Legend-CsVEDSh6.js";
import ht from "./vue-ui-skeleton-ChHLL5Hw.js";
import ft from "./vue-ui-accordion-w15FGKRN.js";
import { u as Te } from "./useNestedProp-BbEbJmgv.js";
import { _ as yt } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const re = (V) => (Xe("data-v-7f596bd8"), V = V(), We(), V), bt = ["id"], pt = ["xmlns", "viewBox"], gt = ["id", "fr"], mt = /* @__PURE__ */ re(() => /* @__PURE__ */ b("stop", {
  offset: "0%",
  "stop-color": "#FFFFFF",
  "stop-opacity": "0"
}, null, -1)), wt = ["offset", "stop-opacity"], xt = /* @__PURE__ */ re(() => /* @__PURE__ */ b("stop", {
  offset: "100%",
  "stop-color": "#FFFFFF",
  "stop-opacity": "0"
}, null, -1)), kt = ["id"], Lt = ["id"], _t = /* @__PURE__ */ re(() => /* @__PURE__ */ b("feColorMatrix", {
  type: "saturate",
  values: "0"
}, null, -1)), $t = ["id"], Ct = ["flood-color"], Nt = ["cx", "cy", "r", "fill", "filter"], St = ["d", "fill", "stroke", "stroke-width", "filter"], Tt = { key: 0 }, Ft = ["d", "fill"], It = { key: 1 }, Dt = ["x", "y", "font-size", "font-weight", "fill"], zt = { key: 2 }, Pt = ["filter"], Ot = ["text-anchor", "x", "y", "fill", "font-size", "font-weight"], At = ["text-anchor", "x", "y", "fill", "font-size", "font-weight"], Vt = ["text-anchor", "x", "y", "fill", "font-size", "font-weight"], Mt = ["d", "fill", "onMouseenter", "onClick"], Bt = {
  key: 3,
  class: "vue-data-ui-watermark"
}, Ut = {
  key: 0,
  class: "vue-ui-nested-donuts-legend-title"
}, Rt = ["onClick"], Et = ["innerHTML"], Gt = {
  __name: "vue-ui-nested-donuts",
  props: {
    config: {
      type: Object,
      default() {
        return {};
      }
    },
    dataset: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  emits: ["selectLegend", "selectDatapoint"],
  setup(V, { expose: Fe, emit: ie }) {
    const D = V, { vue_ui_nested_donuts: Ie } = He(), E = L(() => !!D.dataset && D.dataset.length), p = c(qe()), Z = c(!1), j = c(""), De = c(null), de = c(0), M = c(null), ce = c(null), ee = c(null), B = c(!1);
    function ze(t) {
      B.value = t, de.value += 1;
    }
    const e = L(() => {
      const t = Te({
        userConfig: D.config,
        defaultConfig: Ie
      });
      return t.theme ? {
        ...Te({
          userConfig: Je.vue_ui_nested_donuts[t.theme] || D.config,
          defaultConfig: t
        }),
        customPalette: Ke[t.theme] || Q
      } : t;
    }), G = c(null);
    Ue(() => {
      if (Qe(D.dataset) && O({
        componentName: "VueUiNestedDonuts",
        type: "dataset"
      }), e.value.responsive) {
        const t = st(() => {
          const { width: s, height: l } = ut({
            chart: M.value,
            title: e.value.style.chart.title.text ? ce.value : null,
            legend: e.value.style.chart.legend.show ? ee.value : null
          });
          v.value.width = s, v.value.height = l;
        });
        G.value = new ResizeObserver(t), G.value.observe(M.value.parentNode);
      }
    }), Re(() => {
      G.value && G.value.disconnect();
    });
    const { isPrinting: ve, isImaging: he, generatePdf: fe, generateImage: ye } = rt({
      elementId: `nested_donuts_${p.value}`,
      fileName: e.value.style.chart.title.text || "vue-ui-nested-donuts"
    }), Pe = L(() => Ze(e.value.customPalette)), x = c({
      dataLabels: {
        show: e.value.style.chart.layout.labels.dataLabels.show
      },
      showTable: e.value.table.show,
      showTooltip: e.value.style.chart.tooltip.show
    }), v = c({
      height: 512,
      width: 512
    });
    function Oe({ datapoint: t, index: s }) {
      ie("selectDatapoint", { datapoint: t, index: s });
    }
    const f = c([]), N = L(() => (D.dataset.forEach((t, s) => {
      [null, void 0].includes(t.name) && O({
        componentName: "VueUiNestedDonuts",
        type: "datasetSerieAttribute",
        property: "name",
        index: s
      }), [null, void 0].includes(t.series) ? O({
        componentName: "VueUiNestedDonuts",
        type: "datasetSerieAttribute",
        property: "series",
        index: s
      }) : t.series.length === 0 ? O({
        componentName: "VueUiNestedDonuts",
        type: "datasetAttributeEmpty",
        property: `series at index ${s}`
      }) : t.series.forEach((l, a) => {
        [null, void 0].includes(l.name) && O({
          componentName: "VueUiNestedDonuts",
          type: "datasetSerieAttribute",
          property: "name",
          index: a,
          key: "serie"
        }), [null, void 0].includes(l.values) && O({
          componentName: "VueUiNestedDonuts",
          type: "datasetSerieAttribute",
          property: "values",
          index: a,
          key: "serie"
        });
      });
    }), D.dataset.map((t, s) => ({
      ...t,
      total: t.series.filter((l) => !f.value.includes(l.id)).map((l) => Ce(l.values).reduce((a, o) => a + o, 0)).reduce((l, a) => l + a, 0),
      datasetIndex: s,
      id: `${p.value}_${s}`,
      series: t.series.map((l, a) => ({
        name: l.name,
        arcOf: t.name,
        arcOfId: `${p.value}_${s}`,
        id: `${p.value}_${s}_${a}`,
        seriesIndex: a,
        datasetIndex: s,
        color: je(l.color) || Pe.value[a] || Q[a] || Q[a % Q.length],
        value: Ce(l.values).reduce((o, i) => o + i, 0),
        absoluteValues: l.values || []
      }))
    }))));
    c(e.value.style.chart.layout.donut.strokeWidth);
    const S = L(() => Math.min(v.value.height, v.value.width) * (e.value.style.chart.layout.donut.strokeWidth / 512)), be = L(() => [...N.value].map((t, s) => {
      const l = t.series.filter((a) => !f.value.includes(a.id)).map((a) => a.value).reduce((a, o) => a + o, 0);
      return {
        ...t,
        total: l,
        series: t.series.filter((a) => !f.value.includes(a.id)).map((a) => ({
          ...a,
          proportion: a.value / l
        }))
      };
    }));
    function Ae(t, s, l) {
      let a = 0;
      for (let o = 0; o < t.length; o += 1)
        l.includes(t[o]) && (a += 1);
      return a < s;
    }
    const h = c(be.value);
    Ee(() => be.value, (t) => h.value = t);
    const pe = c(null), ge = c(null);
    function te(t) {
      ie("selectLegend", t);
      const s = N.value.flatMap((d) => d.series).find((d) => d.id === t.id), l = h.value.flatMap((d) => d.series).find((d) => d.id === t.id);
      let o = l ? l.value : 0;
      const i = N.value.find((d) => d.id === s.arcOfId).series.map((d) => d.id), g = Ae(i, i.length - 1, f.value);
      if (f.value.includes(t.id)) {
        let d = function() {
          o > s.value ? (cancelAnimationFrame(pe.value), h.value = h.value.map((k) => ({
            ...k,
            series: k.series.map((T) => T.id == t.id ? {
              ...T,
              value: s.value
            } : T)
          }))) : (o += s.value * 0.025, h.value = h.value.map((k) => ({
            ...k,
            series: k.series.map((T) => T.id === t.id ? {
              ...T,
              value: o
            } : T)
          })), pe.value = requestAnimationFrame(d));
        };
        f.value = f.value.filter((k) => k !== t.id), d();
      } else if (g) {
        let d = function() {
          o < 0.1 ? (cancelAnimationFrame(ge.value), f.value.push(t.id), h.value = h.value.map((k, T) => ({
            ...k,
            series: k.series.map((z) => z.id === t.id ? {
              ...z,
              value: 0
            } : z)
          }))) : (o /= 1.1, h.value = h.value.map((k, T) => ({
            ...k,
            series: k.series.map((z) => z.id === t.id ? {
              ...z,
              value: o
            } : z)
          })), ge.value = requestAnimationFrame(d));
        };
        d();
      }
    }
    const U = L(() => h.value.map((t, s) => {
      const l = s * S.value / N.value.length;
      return {
        ...t,
        radius: S.value - l,
        donut: Ne(
          { series: t.series },
          v.value.width / 2,
          v.value.height / 2,
          S.value - l,
          S.value - l,
          1.99999,
          2,
          1,
          360,
          105.25,
          S.value / N.value.length * e.value.style.chart.layout.donut.spacingRatio
        )
      };
    })), me = L(() => [...N.value].map((t, s) => {
      const l = s * S.value / N.value.length;
      return {
        sizeRatio: l,
        donut: Ne(
          { series: [{ value: 1 }] },
          v.value.width / 2,
          v.value.height / 2,
          S.value - l,
          S.value - l,
          1.99999,
          2,
          1,
          360,
          105.25,
          S.value / N.value.length * e.value.style.chart.layout.donut.spacingRatio
        )[0]
      };
    })), we = c(null), Y = c(null), X = c(null), le = c(null);
    function Ve({ datapoint: t, _relativeIndex: s, seriesIndex: l }) {
      we.value = t.arcOfId, Y.value = t.id, X.value = l, le.value = {
        datapoint: t,
        seriesIndex: l,
        series: h.value,
        config: e.value
      };
      const a = e.value.style.chart.tooltip.customFormat;
      if (Se(a) && lt(() => a({
        seriesIndex: l,
        datapoint: t,
        series: h.value,
        config: e.value
      })))
        j.value = a({
          seriesIndex: l,
          datapoint: t,
          series: h.value,
          config: e.value
        });
      else {
        let o = "";
        if (e.value.style.chart.tooltip.showAllItemsAtIndex && f.value.length === 0) {
          const i = h.value.map((g) => g.series.find((d) => d.seriesIndex === l));
          i.forEach((g, d) => {
            if (!g) return "";
            o += `
                    <div style="display:flex; flex-direction: column; justify-content:flex-start; align-items:flex-start;padding:6px 0; ${d < i.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="${g.color}"/>
                            </svg>
                            <span>
                                ${g.arcOf ?? ""} - ${g.name}
                            </span>
                        </div>
                        <span>
                            ${e.value.style.chart.tooltip.showValue ? `<b>${R(
              e.value.style.chart.layout.labels.dataLabels.formatter,
              t.value,
              C({
                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 ? `(${C({
              v: g.proportion * 100,
              s: "%",
              r: e.value.style.chart.tooltip.roundingPercentage
            })})` : ""}
                        </span>
                    </div>
                `;
          });
        } else
          o += `<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>`, o += `<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 && (o += `<b>${R(
            e.value.style.chart.layout.labels.dataLabels.formatter,
            t.value,
            C({
              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 ? o += `<span>(${C({
            v: t.proportion * 100,
            s: "%",
            r: e.value.style.chart.tooltip.roundingPercentage
          })})</span></div>` : o += `<b>${C({
            v: t.proportion * 100,
            s: "%",
            r: e.value.style.chart.tooltip.roundingPercentage
          })}</b></div>`);
        j.value = `<div style="font-size:${e.value.style.chart.tooltip.fontSize}px">${o}</div>`;
      }
      Z.value = !0;
    }
    function ae(t) {
      return t.proportion * 100 > e.value.style.chart.layout.labels.dataLabels.hideUnderValue;
    }
    function xe(t, s) {
      if (!e.value.useBlurOnHover)
        return "";
      if (e.value.style.chart.tooltip.showAllItemsAtIndex && f.value.length === 0)
        return [null, void 0].includes(X.value) || X.value === s ? "" : `url(#blur_${p.value})`;
      if (!e.value.style.chart.tooltip.showAllItemsAtIndex || f.value.length)
        return [null, void 0].includes(Y.value) || Y.value === t.id ? "" : `url(#blur_${p.value})`;
    }
    const oe = L(() => N.value.map((t, s) => t.series.map((l, a) => ({
      name: l.name,
      color: l.color,
      value: l.value,
      shape: "circle",
      arcOf: l.arcOf,
      id: l.id,
      seriesIndex: a,
      datasetIndex: s,
      total: t.series.filter((o) => !f.value.includes(o.id)).map((o) => o.value).reduce((o, i) => o + i, 0)
    })).map((l) => ({
      ...l,
      opacity: f.value.includes(l.id) ? 0.5 : 1,
      segregate: () => te(l),
      isSegregated: f.value.includes(l.id)
    })))), Me = L(() => ({
      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" : ""
    })), I = L(() => {
      const t = h.value.flatMap((l) => l.series.map((a) => ({
        name: `${l.name} - ${a.name}`,
        color: a.color,
        total: l.total
      }))), s = h.value.flatMap((l) => l.series.map((a) => a.value));
      return { head: t, body: s };
    });
    function ke() {
      Ye(() => {
        const t = I.value.head.map((a, o) => [[
          a.name
        ], [I.value.body[o]], [isNaN(I.value.body[o] / a.total) ? "-" : I.value.body[o] / a.total * 100]]), s = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [[""], ["val"], ["%"]]].concat(t), l = at(s);
        ot({ csvContent: l, title: e.value.style.chart.title.text || "vue-ui-nested-donuts" });
      });
    }
    const W = L(() => {
      const t = [
        e.value.table.columnNames.series,
        e.value.table.columnNames.value,
        e.value.table.columnNames.percentage
      ], s = I.value.head.map((o, i) => {
        const g = C({ p: e.value.style.chart.layout.labels.dataLabels.prefix, v: I.value.body[i], s: e.value.style.chart.layout.labels.dataLabels.suffix, r: e.value.table.td.roundingValue });
        return [
          {
            color: o.color,
            name: o.name
          },
          g,
          isNaN(I.value.body[i] / o.total) ? "-" : C({
            v: I.value.body[i] / o.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 Be() {
      return N.value;
    }
    function Le() {
      x.value.showTable = !x.value.showTable;
    }
    function _e() {
      x.value.dataLabels.show = !x.value.dataLabels.show;
    }
    function $e() {
      x.value.showTooltip = !x.value.showTooltip;
    }
    return Fe({
      getData: Be,
      generatePdf: fe,
      generateCsv: ke,
      generateImage: ye,
      toggleTable: Le,
      toggleLabels: _e,
      toggleTooltip: $e
    }), (t, s) => (u(), n("div", {
      ref_key: "nestedDonutsChart",
      ref: M,
      class: P(`vue-ui-nested-donuts ${B.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${e.value.useCssAnimation ? "" : "vue-ui-dna"}`),
      style: se(`font-family:${e.value.style.fontFamily};width:100%; text-align:center;${!e.value.style.chart.title.text && e.value.userOptions.show ? "padding-top:36px" : ""};background:${e.value.style.chart.backgroundColor}`),
      id: `nested_donuts_${p.value}`
    }, [
      e.value.style.chart.title.text ? (u(), n("div", {
        key: 0,
        ref_key: "chartTitle",
        ref: ce
      }, [
        ue(nt, {
          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)) : y("", !0),
      e.value.userOptions.show && E.value ? (u(), H(it, {
        ref: "details",
        key: `user_option_${de.value}`,
        backgroundColor: e.value.style.chart.backgroundColor,
        color: e.value.style.chart.color,
        isPrinting: r(ve),
        isImaging: r(he),
        uid: p.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,
        hasTable: e.value.userOptions.buttons.table,
        hasLabel: e.value.userOptions.buttons.labels,
        hasFullscreen: e.value.userOptions.buttons.fullscreen,
        isFullscreen: B.value,
        isTooltip: x.value.showTooltip,
        titles: { ...e.value.userOptions.buttonTitles },
        chartElement: M.value,
        onToggleFullscreen: ze,
        onGeneratePdf: r(fe),
        onGenerateCsv: ke,
        onGenerateImage: r(ye),
        onToggleTable: Le,
        onToggleLabels: _e,
        onToggleTooltip: $e
      }, Ge({ _: 2 }, [
        t.$slots.optionTooltip ? {
          name: "optionTooltip",
          fn: m(() => [
            _(t.$slots, "optionTooltip", {}, void 0, !0)
          ]),
          key: "0"
        } : void 0,
        t.$slots.optionPdf ? {
          name: "optionPdf",
          fn: m(() => [
            _(t.$slots, "optionPdf", {}, void 0, !0)
          ]),
          key: "1"
        } : void 0,
        t.$slots.optionCsv ? {
          name: "optionCsv",
          fn: m(() => [
            _(t.$slots, "optionCsv", {}, void 0, !0)
          ]),
          key: "2"
        } : void 0,
        t.$slots.optionImg ? {
          name: "optionImg",
          fn: m(() => [
            _(t.$slots, "optionImg", {}, void 0, !0)
          ]),
          key: "3"
        } : void 0,
        t.$slots.optionTable ? {
          name: "optionTable",
          fn: m(() => [
            _(t.$slots, "optionTable", {}, void 0, !0)
          ]),
          key: "4"
        } : void 0,
        t.$slots.optionLabels ? {
          name: "optionLabels",
          fn: m(() => [
            _(t.$slots, "optionLabels", {}, void 0, !0)
          ]),
          key: "5"
        } : void 0,
        t.$slots.optionFullscreen ? {
          name: "optionFullscreen",
          fn: m(({ toggleFullscreen: l, isFullscreen: a }) => [
            _(t.$slots, "optionFullscreen", q(J({ toggleFullscreen: l, isFullscreen: a })), void 0, !0)
          ]),
          key: "6"
        } : void 0
      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasTooltip", "hasPdf", "hasXls", "hasImg", "hasTable", "hasLabel", "hasFullscreen", "isFullscreen", "isTooltip", "titles", "chartElement", "onGeneratePdf", "onGenerateImage"])) : y("", !0),
      E.value ? (u(), n("svg", {
        key: 2,
        xmlns: r(et),
        class: P({ "vue-data-ui-fullscreen--on": B.value, "vue-data-ui-fulscreen--off": !B.value }),
        viewBox: `0 0 ${v.value.width <= 0 ? 1e-3 : v.value.width} ${v.value.height < 0 ? 1e-3 : v.value.height}`,
        style: se(`max-width:100%; overflow: visible; background:${e.value.style.chart.backgroundColor};color:${e.value.style.chart.color}`)
      }, [
        b("defs", null, [
          (u(!0), n(w, null, $(me.value, (l, a) => (u(), n("radialGradient", {
            id: `radial_${p.value}_${a}`,
            cx: "50%",
            cy: "50%",
            r: "50%",
            fr: 30 - 1 * (a + 1) + "%"
          }, [
            mt,
            b("stop", {
              offset: 70 - 20 * a + "%",
              "stop-color": "#FFFFFF",
              "stop-opacity": e.value.style.chart.gradientIntensity / 100
            }, null, 8, wt),
            xt
          ], 8, gt))), 256))
        ]),
        b("defs", null, [
          b("filter", {
            id: `blur_${p.value}`,
            x: "-50%",
            y: "-50%",
            width: "200%",
            height: "200%"
          }, [
            b("feGaussianBlur", {
              in: "SourceGraphic",
              stdDeviation: 2,
              id: `blur_std_${p.value}`
            }, null, 8, Lt),
            _t
          ], 8, kt),
          b("filter", {
            id: `shadow_${p.value}`,
            "color-interpolation-filters": "sRGB"
          }, [
            b("feDropShadow", {
              dx: "0",
              dy: "0",
              stdDeviation: "10",
              "flood-opacity": "0.5",
              "flood-color": e.value.style.chart.layout.donut.shadowColor
            }, null, 8, Ct)
          ], 8, $t)
        ]),
        (u(!0), n(w, null, $(U.value, (l) => (u(), n("circle", {
          cx: v.value.width / 2,
          cy: v.value.height / 2,
          r: l.radius < 0 ? 1e-5 : l.radius,
          fill: e.value.style.chart.backgroundColor,
          filter: e.value.style.chart.layout.donut.useShadow ? `url(#shadow_${p.value})` : ""
        }, null, 8, Nt))), 256)),
        (u(!0), n(w, null, $(U.value, (l, a) => (u(), n("g", null, [
          (u(!0), n(w, null, $(l.donut, (o, i) => (u(), n("g", null, [
            b("path", {
              class: "vue-ui-donut-arc-path",
              d: o.arcSlice,
              fill: `${o.color}CC`,
              stroke: e.value.style.chart.backgroundColor,
              "stroke-width": e.value.style.chart.layout.donut.borderWidth,
              filter: xe(o, i)
            }, null, 8, St)
          ]))), 256))
        ]))), 256)),
        e.value.style.chart.useGradient ? (u(), n("g", Tt, [
          (u(!0), n(w, null, $(me.value, (l, a) => (u(), n("g", null, [
            b("path", {
              d: l.donut.arcSlice,
              fill: `url(#radial_${p.value}_${a})`,
              stroke: "transparent",
              "stroke-width": "0"
            }, null, 8, Ft)
          ]))), 256))
        ])) : y("", !0),
        e.value.style.chart.layout.labels.dataLabels.showDonutName ? (u(), n("g", It, [
          (u(!0), n(w, null, $(U.value, (l, a) => (u(), n("g", null, [
            (u(!0), n(w, null, $(l.donut, (o, i) => (u(), n("g", null, [
              i === 0 && v.value.width && v.value.height ? (u(), n("text", {
                key: 0,
                class: P({ animated: e.value.useCssAnimation }),
                x: v.value.width / 2,
                y: o.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
              }, F(e.value.style.chart.layout.labels.dataLabels.donutNameAbbreviation ? r(tt)({ source: l.name, length: e.value.style.chart.layout.labels.dataLabels.donutNameMaxAbbreviationSize }) : l.name), 11, Dt)) : y("", !0)
            ]))), 256))
          ]))), 256))
        ])) : y("", !0),
        e.value.style.chart.layout.labels.dataLabels.show ? (u(), n("g", zt, [
          (u(!0), n(w, null, $(U.value, (l, a) => (u(), n("g", null, [
            (u(!0), n(w, null, $(l.donut, (o, i) => (u(), n("g", {
              filter: xe(o, i)
            }, [
              ae(o) && x.value.dataLabels.show && e.value.style.chart.layout.labels.dataLabels.showPercentage ? (u(), n("text", {
                key: 0,
                class: P({ animated: e.value.useCssAnimation }),
                "text-anchor": r(A)(o, !0).anchor,
                x: r(A)(o, !1, e.value.style.chart.layout.labels.dataLabels.offsetX).x || 0,
                y: r(ne)(o, e.value.style.chart.layout.labels.dataLabels.offsetY, e.value.style.chart.layout.labels.dataLabels.offsetY),
                fill: e.value.style.chart.layout.labels.dataLabels.useSerieColor ? o.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"
              }, F(r(C)({ v: o.proportion * 100, s: "%", r: e.value.style.chart.layout.labels.dataLabels.roundingPercentage })), 11, Ot)) : y("", !0),
              ae(o) && x.value.dataLabels.show && e.value.style.chart.layout.labels.dataLabels.showPercentage && e.value.style.chart.layout.labels.dataLabels.showValue ? (u(), n("text", {
                key: 1,
                class: P({ animated: e.value.useCssAnimation }),
                "text-anchor": r(A)(o, !0).anchor,
                x: r(A)(o, !1, e.value.style.chart.layout.labels.dataLabels.offsetX).x || 0,
                y: r(ne)(o, e.value.style.chart.layout.labels.dataLabels.offsetY, e.value.style.chart.layout.labels.dataLabels.offsetY) + e.value.style.chart.layout.labels.dataLabels.fontSize,
                fill: e.value.style.chart.layout.labels.dataLabels.useSerieColor ? o.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"
              }, " (" + F(r(R)(
                e.value.style.chart.layout.labels.dataLabels.formatter,
                o.value,
                r(C)({
                  p: e.value.style.chart.layout.labels.dataLabels.prefix,
                  v: o.value,
                  s: e.value.style.chart.layout.labels.dataLabels.suffix,
                  r: e.value.style.chart.layout.labels.dataLabels.roundingValue
                }),
                { datapoint: o, seriesIndex: a, datapointIndex: i }
              )) + ") ", 11, At)) : y("", !0),
              ae(o) && x.value.dataLabels.show && !e.value.style.chart.layout.labels.dataLabels.showPercentage && e.value.style.chart.layout.labels.dataLabels.showValue ? (u(), n("text", {
                key: 2,
                class: P({ animated: e.value.useCssAnimation }),
                "text-anchor": r(A)(o, !0).anchor,
                x: r(A)(o, !1, e.value.style.chart.layout.labels.dataLabels.offsetX).x || 0,
                y: r(ne)(o, e.value.style.chart.layout.labels.dataLabels.offsetY, e.value.style.chart.layout.labels.dataLabels.offsetY),
                fill: e.value.style.chart.layout.labels.dataLabels.useSerieColor ? o.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"
              }, F(r(R)(
                e.value.style.chart.layout.labels.dataLabels.formatter,
                o.value,
                r(C)({
                  p: e.value.style.chart.layout.labels.dataLabels.prefix,
                  v: o.value,
                  s: e.value.style.chart.layout.labels.dataLabels.suffix,
                  r: e.value.style.chart.layout.labels.dataLabels.roundingValue
                }),
                { datapoint: o, seriesIndex: a, datapointIndex: i }
              )), 11, Vt)) : y("", !0)
            ], 8, Pt))), 256))
          ]))), 256))
        ])) : y("", !0),
        (u(!0), n(w, null, $(U.value, (l, a) => (u(), n("g", null, [
          (u(!0), n(w, null, $(l.donut, (o, i) => (u(), n("g", null, [
            b("path", {
              "data-cy-donut-trap": "",
              d: o.arcSlice,
              fill: De.value === a ? "rgba(0,0,0,0.1)" : "transparent",
              onMouseenter: (g) => Ve({
                datapoint: o,
                relativeIndex: a,
                seriesIndex: o.seriesIndex
              }),
              onClick: (g) => Oe({ datapoint: o, index: i }),
              onMouseleave: s[0] || (s[0] = (g) => {
                Z.value = !1, we.value = null, Y.value = null, X.value = null;
              })
            }, null, 40, Mt)
          ]))), 256))
        ]))), 256)),
        _(t.$slots, "svg", { svg: v.value }, void 0, !0)
      ], 14, pt)) : y("", !0),
      t.$slots.watermark ? (u(), n("div", Bt, [
        _(t.$slots, "watermark", q(J({ isPrinting: r(ve) || r(he) })), void 0, !0)
      ])) : y("", !0),
      E.value ? y("", !0) : (u(), H(ht, {
        key: 4,
        config: {
          type: "donut",
          style: {
            backgroundColor: e.value.style.chart.backgroundColor,
            donut: {
              color: "#CCCCCC"
            }
          }
        }
      }, null, 8, ["config"])),
      ue(ct, {
        show: x.value.showTooltip && Z.value,
        backgroundColor: e.value.style.chart.tooltip.backgroundColor,
        color: e.value.style.chart.tooltip.color,
        borderRadius: e.value.style.chart.tooltip.borderRadius,
        borderColor: e.value.style.chart.tooltip.borderColor,
        borderWidth: e.value.style.chart.tooltip.borderWidth,
        fontSize: e.value.style.chart.tooltip.fontSize,
        backgroundOpacity: e.value.style.chart.tooltip.backgroundOpacity,
        position: e.value.style.chart.tooltip.position,
        offsetY: e.value.style.chart.tooltip.offsetY,
        parent: M.value,
        content: j.value,
        isCustom: r(Se)(e.value.style.chart.tooltip.customFormat)
      }, {
        "tooltip-before": m(() => [
          _(t.$slots, "tooltip-before", q(J({ ...le.value })), void 0, !0)
        ]),
        "tooltip-after": m(() => [
          _(t.$slots, "tooltip-after", q(J({ ...le.value })), void 0, !0)
        ]),
        _: 3
      }, 8, ["show", "backgroundColor", "color", "borderRadius", "borderColor", "borderWidth", "fontSize", "backgroundOpacity", "position", "offsetY", "parent", "content", "isCustom"]),
      e.value.style.chart.legend.show ? (u(), n("div", {
        key: 5,
        ref_key: "chartLegend",
        ref: ee,
        class: P({ "vue-ui-nested-donuts-legend": oe.value.length > 1 })
      }, [
        (u(!0), n(w, null, $(oe.value, (l) => (u(), H(vt, {
          legendSet: l,
          config: Me.value,
          onClickMarker: s[1] || (s[1] = ({ legend: a }) => te(a))
        }, {
          legendTitle: m(({ titleSet: a }) => [
            a[0] && a[0].arcOf ? (u(), n("div", Ut, F(a[0].arcOf), 1)) : y("", !0)
          ]),
          item: m(({ legend: a, index: o }) => [
            b("div", {
              onClick: (i) => te(a),
              style: se(`opacity:${f.value.includes(a.id) ? 0.5 : 1}`)
            }, [
              K(F(a.name) + ": " + F(r(R)(
                e.value.style.chart.layout.labels.dataLabels.formatter,
                a.value,
                r(C)({
                  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.legend.roundingValue
                }),
                { datapoint: a, seriesIndex: o }
              )) + " ", 1),
              f.value.includes(a.id) ? (u(), n(w, { key: 1 }, [
                K(" ( - % ) ")
              ], 64)) : (u(), n(w, { key: 0 }, [
                K(" (" + F(isNaN(a.value / a.total) ? "-" : r(C)({ v: a.value / a.total * 100, s: "%", r: e.value.style.chart.legend.roundingPercentage })) + ") ", 1)
              ], 64))
            ], 12, Rt)
          ]),
          _: 2
        }, 1032, ["legendSet", "config"]))), 256))
      ], 2)) : y("", !0),
      e.value.style.chart.legend.show ? y("", !0) : (u(), n("div", {
        key: 6,
        ref_key: "chartLegend",
        ref: ee
      }, [
        _(t.$slots, "legend", { legend: oe.value }, void 0, !0)
      ], 512)),
      E.value ? (u(), H(ft, {
        key: 7,
        hideDetails: "",
        config: {
          open: x.value.showTable,
          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
          }
        }
      }, {
        content: m(() => [
          ue(dt, {
            colNames: W.value.colNames,
            head: W.value.head,
            body: W.value.body,
            config: W.value.config,
            title: `${e.value.style.chart.title.text}${e.value.style.chart.title.subtitle.text ? ` : ${e.value.style.chart.title.subtitle.text}` : ""}`,
            onClose: s[2] || (s[2] = (l) => x.value.showTable = !1)
          }, {
            th: m(({ th: l }) => [
              b("div", {
                innerHTML: l,
                style: { display: "flex", "align-items": "center" }
              }, null, 8, Et)
            ]),
            td: m(({ td: l }) => [
              K(F(l.name || l), 1)
            ]),
            _: 1
          }, 8, ["colNames", "head", "body", "config", "title"])
        ]),
        _: 1
      }, 8, ["config"])) : y("", !0)
    ], 14, bt));
  }
}, ll = /* @__PURE__ */ yt(Gt, [["__scopeId", "data-v-7f596bd8"]]);
export {
  ll as default
};
