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