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