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