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