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