import { computed as d, ref as s, watch as ye, onMounted as ze, onBeforeUnmount as Ye, openBlock as n, createElementBlock as u, normalizeClass as V, normalizeStyle as q, createBlock as C, createCommentVNode as g, unref as v, createSlots as Be, withCtx as h, renderSlot as f, normalizeProps as S, guardReactiveProps as F, createVNode as me, Fragment as M, renderList as N, createElementVNode as O, toDisplayString as P, createTextVNode as Ve, nextTick as Xe } from "vue";
import { u as Ge, c as Ue, t as Ee, a as He, p as be, b as We, o as je, e as J, d as qe, X as Je, f as R, i as K, x as ke, q as Ke, r as Qe, y as Ze } from "./index-Cm2_6s9o.js";
import { t as et, u as tt } from "./useResponsive-CoxXLe23.js";
import { _ as at } from "./Title-Coit3NcT.js";
import { u as lt, U as ot } from "./usePrinter-Cx8U1e30.js";
import { L as rt } from "./Legend-DRozxv9L.js";
import { D as nt } from "./DataTable-NGi-FgLM.js";
import { _ as st } from "./Tooltip-BBgfUr4a.js";
import ut from "./vue-ui-skeleton-BUS6A44x.js";
import it from "./vue-ui-accordion-CxrNF8BI.js";
import { u as $e } from "./useNestedProp-BYPZJNhi.js";
import { _ as ct } from "./PackageVersion-CTMY4zeY.js";
import { P as dt } from "./PenAndPaper-DJ_d10S-.js";
import { _ as vt } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const ht = ["id"], ft = ["xmlns", "viewBox"], gt = ["cx", "cy", "r", "stroke", "stroke-width", "stroke-dasharray", "stroke-dashoffset"], pt = ["cx", "cy", "r", "stroke", "stroke-width", "stroke-dasharray", "stroke-dashoffset"], yt = ["id"], mt = ["stdDeviation"], bt = ["filter"], kt = ["cx", "cy", "r", "stroke-width", "stroke-dasharray", "stroke-dashoffset"], $t = ["cx", "cy", "r", "stroke-width", "stroke-dasharray", "stroke-dashoffset", "onMouseenter"], wt = { key: 1 }, Ct = ["onMouseenter"], xt = ["x", "y", "font-size", "fill", "font-weight"], Tt = {
  key: 5,
  class: "vue-data-ui-watermark"
}, _t = ["onClick"], Ot = ["innerHTML"], Pt = {
  __name: "vue-ui-onion",
  props: {
    config: {
      type: Object,
      default() {
        return {};
      }
    },
    dataset: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  emits: ["selectLegend"],
  setup(we, { expose: Ce, emit: xe }) {
    const k = we, { vue_ui_onion: Te } = Ge(), D = d(() => !!k.dataset && k.dataset.length), x = s(Ue()), _e = s(null), Q = s(0), L = s(!1), X = s(""), y = s([]), T = s(null), Z = s(null), ee = s(null), te = s(null), ae = s(null), le = s(0), oe = s(0), re = s(0), e = d({
      get: () => ne(),
      set: (t) => t
    });
    function ne() {
      const t = $e({
        userConfig: k.config,
        defaultConfig: Te
      });
      return t.theme ? {
        ...$e({
          userConfig: Ee.vue_ui_onion[t.theme] || k.config,
          defaultConfig: t
        }),
        customPalette: He[t.theme] || be
      } : t;
    }
    ye(() => k.config, (t) => {
      e.value = ne(), de(), le.value += 1, oe.value += 1, re.value += 1;
    }, { deep: !0 });
    const { isPrinting: se, isImaging: ue, generatePdf: ie, generateImage: ce } = lt({
      elementId: `vue-ui-onion_${x.value}`,
      fileName: e.value.style.chart.title.text || "vue-ui-onion"
    }), Oe = d(() => e.value.userOptions.show && !e.value.style.chart.title.text), Pe = d(() => We(e.value.customPalette)), $ = s({
      showTable: e.value.table.show,
      showTooltip: e.value.style.chart.tooltip.show
    }), r = s({
      height: 512,
      width: 512,
      padding: {
        top: 64,
        left: 64,
        right: 64,
        bottom: 64
      },
      minRadius: 64
    }), z = s(null);
    ze(() => {
      de();
    });
    function de() {
      if (je(k.dataset) && J({
        componentName: "VueUiOnion",
        type: "dataset"
      }), e.value.responsive) {
        const o = et(() => {
          const { width: a, height: l } = tt({
            chart: T.value,
            title: e.value.style.chart.title.text ? Z.value : null,
            legend: e.value.style.chart.legend.show ? ee.value : null,
            source: te.value,
            noTitle: ae.value
          });
          r.value.width = a, r.value.height = l, r.value.padding.top = Math.max(a, l) * 0.125, r.value.padding.right = Math.max(a, l) * 0.125, r.value.padding.bottom = Math.max(a, l) * 0.125, r.value.padding.left = Math.max(a, l) * 0.125, r.value.minRadius = Math.min(a, l) * 0.125;
        });
        z.value = new ResizeObserver(o), z.value.observe(T.value.parentNode);
      }
    }
    Ye(() => {
      z.value && z.value.disconnect();
    });
    const i = d(() => ({
      top: r.value.padding.top,
      left: r.value.padding.left,
      right: r.value.width - r.value.padding.right,
      bottom: r.value.height - r.value.padding.bottom,
      centerX: r.value.width / 2,
      centerY: r.value.height / 2,
      width: r.value.width - r.value.padding.right - r.value.padding.left,
      height: r.value.height - r.value.padding.bottom - r.value.padding.top,
      minRadius: r.value.minRadius,
      maxRadius: Math.min(r.value.width, r.value.height) - r.value.padding.top * 2
    })), c = d(() => (k.dataset.forEach((t, o) => {
      [null, void 0].includes(t.name) && J({
        componentName: "VueUiOnion",
        type: "datasetSerieAttribute",
        property: "name",
        index: o
      }), [void 0].includes(t.percentage) && J({
        componentName: "VueUiOnion",
        type: "datasetSerieAttribute",
        property: "percentage",
        index: o
      });
    }), k.dataset.map((t, o) => {
      const a = `onion_serie_${o}_${x.value}`;
      return {
        ...t,
        percentage: t.percentage || 0,
        targetPercentage: t.percentage || 0,
        color: qe(t.color) || Pe.value[o] || be[o],
        id: a,
        shape: "circle",
        opacity: y.value.includes(a) ? 0.5 : 1,
        absoluteIndex: o,
        segregate: () => ve(a),
        isSegregated: y.value.includes(a)
      };
    }))), A = s(c.value), Ae = d(() => e.value.useStartAnimation), Ie = s(null), Se = d(() => Math.max(...c.value.map((t) => t.percentage))), G = s(!1);
    ye(() => c.value, Fe, { immediate: !0 });
    function Fe() {
      if (Ae.value && !G.value) {
        let o = function() {
          t >= Se.value ? (cancelAnimationFrame(Ie.value), A.value = c.value, G.value = !0) : (A.value = c.value.map((a) => ({
            ...a,
            percentage: t < a.targetPercentage ? t : a.targetPercentage
          })), t += 1, requestAnimationFrame(o), G.value = !0);
        };
        A.value = c.value.map((a) => ({
          ...a,
          percentage: 0
        }));
        let t = 0;
        o();
      } else
        A.value = c.value;
    }
    const Me = d(() => ({
      cy: "onion-div-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" : ""
    })), Ne = d(() => c.value.filter((t) => !y.value.includes(t.id)).length), w = d(() => {
      const t = Math.min(i.value.width, i.value.height) / 2 / c.value.length;
      return {
        gutter: (t > e.value.style.chart.layout.maxThickness ? e.value.style.chart.layout.maxThickness : t) * e.value.style.chart.layout.gutter.width,
        track: (t > e.value.style.chart.layout.maxThickness ? e.value.style.chart.layout.maxThickness : t) * e.value.style.chart.layout.track.width
      };
    }), m = d(() => A.value.filter((t) => !y.value.includes(t.id)).map((t, o) => {
      const a = (i.value.maxRadius - w.value.track) / Ne.value / 2 * (1 + o), l = i.value.centerY - a;
      return {
        percentage: t.percentage || 0,
        ...t,
        labelY: l,
        radius: a,
        path: Re(a, t.percentage || 0)
      };
    }));
    function Re(t, o) {
      const a = 2 * Math.PI * t, l = a * 0.75, p = `${l} ${a}`, I = l * (1 - o / 100);
      return {
        bgDashArray: `${l} ${a}`,
        bgDashOffset: 0,
        dashArray: p,
        dashOffset: I,
        fullOffset: 0,
        active: `
            M ${i.value.centerX},${i.value.centerY - t} 
            A ${t},${t} 0 1 1 
            ${i.value.centerX + t * Math.cos(Math.PI * 3 / 4)},${i.value.centerY + t * Math.sin(Math.PI * 3 / 4)}
        `.trim()
      };
    }
    function ve(t) {
      y.value.includes(t) ? y.value = y.value.filter((o) => o !== t) : y.value.push(t), xe("selectLegend", m.value);
    }
    function De() {
      return m.value;
    }
    const U = d(() => {
      const t = [e.value.table.translations.serie, e.value.table.translations.percentage, e.value.table.translations.value], o = m.value.map((a) => [
        a.name,
        a.percentage,
        a.value
      ]);
      return { head: t, body: o };
    }), Y = d(() => {
      const t = U.value.head, o = m.value.map((l) => [
        `<span style="color:${l.color}">⬤</span> ${l.name}`,
        `${Number(l.percentage ?? 0).toFixed(e.value.table.td.roundingPercentage).toLocaleString()}%`,
        `${l.prefix || ""}${[null, void 0, NaN, "NaN"].includes(l.value) ? "-" : l.value.toFixed(e.value.table.td.roundingValue).toLocaleString()}${l.suffix || ""}`
      ]), 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 { head: t, body: o, config: a, colNames: t };
    });
    function he() {
      Xe(() => {
        const t = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [""]], o = U.value.head, a = U.value.body, l = t.concat([o]).concat(a), p = Ke(l);
        Qe({ csvContent: p, title: e.value.style.chart.title.text || "vue-ui-onion" });
      });
    }
    const b = s(void 0), _ = s(!1);
    function Le(t) {
      _.value = t, Q.value += 1;
    }
    const E = s(null);
    function fe({ datapoint: t, seriesIndex: o, show: a = !0 }) {
      const l = t.absoluteIndex;
      b.value = o, E.value = {
        datapoint: t,
        seriesIndex: l,
        series: c.value,
        config: e.value
      }, L.value = a;
      let p = "";
      const I = e.value.style.chart.tooltip.customFormat;
      if (ke(I) && Ze(() => I({
        seriesIndex: l,
        datapoint: t,
        series: c.value,
        config: e.value
      })))
        X.value = I({
          seriesIndex: l,
          datapoint: t,
          series: c.value,
          config: e.value
        });
      else {
        const W = e.value.style.chart.tooltip.showPercentage, j = e.value.style.chart.tooltip.showValue;
        p += `<div style="width: 100%; border-bottom: 1px solid ${e.value.style.chart.tooltip.borderColor}; padding-bottom: 6px;margin-bottom:3px;display:flex;flex-direction:row;gap:3px;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><span></span>${t.name}</span></div>`, p += `<div style="width:100%;text-align:left;"><b>${W ? R({ p: "", v: t.percentage, s: "%", r: e.value.style.chart.tooltip.roundingPercentage }) : ""}</b> ${W && j ? "(" : ""}${j ? K(
          e.value.style.chart.layout.labels.value.formatter,
          t.value,
          R({
            p: t.prefix || "",
            v: t.value,
            s: t.suffix || "",
            r: e.value.style.chart.tooltip.roundingValue
          }),
          { datapoint: t, seriesIndex: o }
        ) : ""}${W && j ? ")" : ""}</div>`, X.value = `<div>${p}</div>`;
      }
    }
    function ge() {
      $.value.showTable = !$.value.showTable;
    }
    function pe() {
      $.value.showTooltip = !$.value.showTooltip;
    }
    const B = s(!1);
    function H() {
      B.value = !B.value;
    }
    return Ce({
      getData: De,
      generatePdf: ie,
      generateCsv: he,
      generateImage: ce,
      toggleTable: ge,
      toggleTooltip: pe,
      toggleAnnotator: H
    }), (t, o) => (n(), u("div", {
      class: V(`vue-ui-onion ${_.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${e.value.useCssAnimation ? "" : "vue-ui-dna"}`),
      ref_key: "onionChart",
      ref: T,
      id: `vue-ui-onion_${x.value}`,
      style: q(`font-family:${e.value.style.fontFamily};width:100%; ${e.value.responsive ? "height: 100%;" : ""} text-align:center;background:${e.value.style.chart.backgroundColor}`)
    }, [
      e.value.userOptions.buttons.annotator ? (n(), C(dt, {
        key: 0,
        parent: T.value,
        backgroundColor: e.value.style.chart.backgroundColor,
        color: e.value.style.chart.color,
        active: B.value,
        onClose: H
      }, null, 8, ["parent", "backgroundColor", "color", "active"])) : g("", !0),
      Oe.value ? (n(), u("div", {
        key: 1,
        ref_key: "noTitle",
        ref: ae,
        class: "vue-data-ui-no-title-space",
        style: "height:36px; width: 100%;background:transparent"
      }, null, 512)) : g("", !0),
      e.value.style.chart.title.text ? (n(), u("div", {
        key: 2,
        ref_key: "chartTitle",
        ref: Z,
        style: "width:100%;background:transparent"
      }, [
        (n(), C(at, {
          key: `title_${le.value}`,
          config: {
            title: {
              cy: "onion-div-title",
              ...e.value.style.chart.title
            },
            subtitle: {
              cy: "onion-div-subtitle",
              ...e.value.style.chart.title.subtitle
            }
          }
        }, null, 8, ["config"]))
      ], 512)) : g("", !0),
      e.value.userOptions.show && D.value ? (n(), C(ot, {
        ref_key: "details",
        ref: _e,
        key: `user_options${Q.value}`,
        backgroundColor: e.value.style.chart.backgroundColor,
        color: e.value.style.chart.color,
        isImaging: v(ue),
        isPrinting: v(se),
        uid: x.value,
        hasTooltip: e.value.userOptions.buttons.tooltip && e.value.style.chart.tooltip.show,
        hasPdf: e.value.userOptions.buttons.pdf,
        hasImg: e.value.userOptions.buttons.img,
        hasXls: e.value.userOptions.buttons.csv,
        hasTable: e.value.userOptions.buttons.table,
        hasFullscreen: e.value.userOptions.buttons.fullscreen,
        isFullscreen: _.value,
        isTooltip: $.value.showTooltip,
        titles: { ...e.value.userOptions.buttonTitles },
        chartElement: T.value,
        position: e.value.userOptions.position,
        hasAnnotator: e.value.userOptions.buttons.annotator,
        isAnnotation: B.value,
        onToggleFullscreen: Le,
        onGeneratePdf: v(ie),
        onGenerateCsv: he,
        onGenerateImage: v(ce),
        onToggleTable: ge,
        onToggleTooltip: pe,
        onToggleAnnotator: H
      }, Be({ _: 2 }, [
        t.$slots.optionTooltip ? {
          name: "optionTooltip",
          fn: h(() => [
            f(t.$slots, "optionTooltip", {}, void 0, !0)
          ]),
          key: "0"
        } : void 0,
        t.$slots.optionPdf ? {
          name: "optionPdf",
          fn: h(() => [
            f(t.$slots, "optionPdf", {}, void 0, !0)
          ]),
          key: "1"
        } : void 0,
        t.$slots.optionCsv ? {
          name: "optionCsv",
          fn: h(() => [
            f(t.$slots, "optionCsv", {}, void 0, !0)
          ]),
          key: "2"
        } : void 0,
        t.$slots.optionImg ? {
          name: "optionImg",
          fn: h(() => [
            f(t.$slots, "optionImg", {}, void 0, !0)
          ]),
          key: "3"
        } : void 0,
        t.$slots.optionTable ? {
          name: "optionTable",
          fn: h(() => [
            f(t.$slots, "optionTable", {}, void 0, !0)
          ]),
          key: "4"
        } : void 0,
        t.$slots.optionFullscreen ? {
          name: "optionFullscreen",
          fn: h(({ toggleFullscreen: a, isFullscreen: l }) => [
            f(t.$slots, "optionFullscreen", S(F({ toggleFullscreen: a, isFullscreen: l })), void 0, !0)
          ]),
          key: "5"
        } : void 0,
        t.$slots.optionAnnotator ? {
          name: "optionAnnotator",
          fn: h(({ toggleAnnotator: a, isAnnotator: l }) => [
            f(t.$slots, "optionAnnotator", S(F({ toggleAnnotator: a, isAnnotator: l })), void 0, !0)
          ]),
          key: "6"
        } : void 0
      ]), 1032, ["backgroundColor", "color", "isImaging", "isPrinting", "uid", "hasTooltip", "hasPdf", "hasImg", "hasXls", "hasTable", "hasFullscreen", "isFullscreen", "isTooltip", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "onGeneratePdf", "onGenerateImage"])) : g("", !0),
      D.value ? (n(), u("svg", {
        key: 4,
        xmlns: v(Je),
        class: V({ "vue-data-ui-fullscreen--on": _.value, "vue-data-ui-fulscreen--off": !_.value }),
        viewBox: `0 0 ${r.value.width <= 0 ? 1e-4 : r.value.width} ${r.value.height <= 0 ? 1e-4 : r.value.height}`,
        style: q(`max-width:100%;overflow:visible;background:transparent;color:${e.value.style.chart.color}`)
      }, [
        me(ct),
        (n(!0), u(M, null, N(m.value, (a, l) => (n(), u("circle", {
          cx: i.value.centerX,
          cy: i.value.centerY,
          r: a.radius <= 0 ? 1e-4 : a.radius,
          stroke: e.value.style.chart.layout.gutter.color,
          "stroke-width": w.value.gutter,
          fill: "none",
          "stroke-dasharray": a.path.bgDashArray,
          "stroke-dashoffset": a.path.fullOffset,
          "stroke-linecap": "round",
          class: V({ "vue-ui-onion-path": !0, "vue-ui-onion-blur": e.value.useBlurOnHover && ![null, void 0].includes(b.value) && b.value !== l }),
          style: { transform: "rotate(-90deg)", "transform-origin": "50% 50%" }
        }, null, 10, gt))), 256)),
        (n(!0), u(M, null, N(m.value, (a, l) => (n(), u("circle", {
          cx: i.value.centerX,
          cy: i.value.centerY,
          r: a.radius < 0 ? 1e-4 : a.radius,
          stroke: `${a.color}`,
          "stroke-width": w.value.track,
          fill: "none",
          "stroke-dasharray": a.path.dashArray,
          "stroke-dashoffset": a.path.dashOffset,
          class: V({ "vue-ui-onion-path": !0, "vue-ui-onion-blur": e.value.useBlurOnHover && ![null, void 0].includes(b.value) && b.value !== l }),
          "stroke-linecap": "round",
          style: { transform: "rotate(-90deg)", "transform-origin": "50% 50%" }
        }, null, 10, pt))), 256)),
        O("defs", null, [
          O("filter", {
            id: `blur_${x.value}`,
            x: "-50%",
            y: "-50%",
            width: "200%",
            height: "200%"
          }, [
            O("feGaussianBlur", {
              in: "SourceGraphic",
              stdDeviation: 100 / e.value.style.chart.gradientIntensity
            }, null, 8, mt)
          ], 8, yt)
        ]),
        e.value.style.chart.useGradient ? (n(), u("g", {
          key: 0,
          filter: `url(#blur_${x.value})`
        }, [
          (n(!0), u(M, null, N(m.value, (a, l) => (n(), u("circle", {
            cx: i.value.centerX,
            cy: i.value.centerY,
            r: a.radius <= 0 ? 1e-4 : a.radius,
            stroke: "white",
            "stroke-width": w.value.track / 3,
            fill: "none",
            "stroke-linecap": "round",
            "stroke-dasharray": a.path.dashArray,
            "stroke-dashoffset": a.path.dashOffset,
            style: { transform: "rotate(-90deg)", "transform-origin": "50% 50%" }
          }, null, 8, kt))), 256))
        ], 8, bt)) : g("", !0),
        (n(!0), u(M, null, N(m.value, (a, l) => (n(), u("circle", {
          "data-cy-trap": "",
          cx: i.value.centerX,
          cy: i.value.centerY,
          r: a.radius <= 0 ? 1e-4 : a.radius,
          stroke: "transparent",
          "stroke-width": Math.max(w.value.track, w.value.gutter),
          fill: "none",
          "stroke-dasharray": a.path.bgDashArray,
          "stroke-dashoffset": a.path.fullOffset,
          "stroke-linecap": "round",
          class: "vue-ui-onion-path",
          style: { transform: "rotate(-90deg)", "transform-origin": "50% 50%" },
          onMouseenter: (p) => fe({
            datapoint: a,
            show: !0,
            seriesIndex: l
          }),
          onMouseleave: o[0] || (o[0] = (p) => {
            b.value = void 0, L.value = !1;
          })
        }, null, 40, $t))), 256)),
        e.value.style.chart.layout.labels.show ? (n(), u("g", wt, [
          (n(!0), u(M, null, N(m.value, (a, l) => (n(), u("g", {
            onMouseenter: (p) => fe({
              datapoint: a,
              show: !0,
              seriesIndex: l
            }),
            onMouseleave: o[1] || (o[1] = (p) => {
              b.value = void 0, L.value = !1;
            })
          }, [
            y.value.includes(a.id) ? g("", !0) : (n(), u("text", {
              key: 0,
              x: r.value.width / 2 - w.value.gutter * 0.8 + e.value.style.chart.layout.labels.offsetX,
              y: a.labelY + e.value.style.chart.layout.labels.offsetY,
              "text-anchor": "end",
              "font-size": e.value.style.chart.layout.labels.fontSize,
              fill: e.value.useBlurOnHover && ![null, void 0].includes(b.value) && b.value === l ? a.color : e.value.style.chart.layout.labels.color,
              "font-weight": e.value.style.chart.layout.labels.bold ? "bold" : "normal"
            }, P(a.name ? a.name + ": " : "") + " " + P(e.value.style.chart.layout.labels.percentage.show ? v(R)({
              v: a.percentage,
              s: "%",
              r: e.value.style.chart.layout.labels.roundingPercentage
            }) : "") + " " + P(!e.value.style.chart.layout.labels.percentage.show && e.value.style.chart.layout.labels.value.show ? `: ${v(K)(
              e.value.style.chart.layout.labels.value.formatter,
              a.value,
              v(R)({
                p: a.prefix || "",
                v: a.value || 0,
                s: a.suffix || "",
                r: e.value.style.chart.layout.labels.roundingValue
              }),
              { datapoint: a, seriesIndex: l }
            )}` : `${e.value.style.chart.layout.labels.value.show && a.value ? `(${v(K)(
              e.value.style.chart.layout.labels.value.formatter,
              a.value,
              v(R)({
                p: a.prefix || "",
                v: a.value || 0,
                s: a.suffix || "",
                r: e.value.style.chart.layout.labels.roundingValue
              }),
              { datapoint: a, seriesIndex: l }
            )})` : ""}`), 9, xt))
          ], 40, Ct))), 256))
        ])) : g("", !0),
        f(t.$slots, "svg", { svg: r.value }, void 0, !0)
      ], 14, ft)) : g("", !0),
      t.$slots.watermark ? (n(), u("div", Tt, [
        f(t.$slots, "watermark", S(F({ isPrinting: v(se) || v(ue) })), void 0, !0)
      ])) : g("", !0),
      D.value ? g("", !0) : (n(), C(ut, {
        key: 6,
        config: {
          type: "onion",
          style: {
            backgroundColor: e.value.style.chart.backgroundColor,
            onion: {
              color: e.value.style.chart.layout.gutter.color
            }
          }
        }
      }, null, 8, ["config"])),
      O("div", {
        ref_key: "chartLegend",
        ref: ee
      }, [
        e.value.style.chart.legend.show ? (n(), C(rt, {
          key: `legend_${re.value}`,
          legendSet: c.value,
          config: Me.value,
          onClickMarker: o[2] || (o[2] = ({ legend: a }) => ve(a.id))
        }, {
          item: h(({ legend: a }) => [
            O("div", {
              "data-cy-legend-item": "",
              onClick: (l) => a.segregate(),
              style: q(`opacity:${y.value.includes(a.id) ? 0.5 : 1}`)
            }, P(a.name ? a.name + ": " : "") + " " + P((a.percentage || 0).toFixed(e.value.style.chart.legend.roundingPercentage)) + "% ", 13, _t)
          ]),
          _: 1
        }, 8, ["legendSet", "config"])) : f(t.$slots, "legend", {
          key: 1,
          legend: c.value
        }, void 0, !0)
      ], 512),
      t.$slots.source ? (n(), u("div", {
        key: 7,
        ref_key: "source",
        ref: te,
        dir: "auto"
      }, [
        f(t.$slots, "source", {}, void 0, !0)
      ], 512)) : g("", !0),
      me(st, {
        show: $.value.showTooltip && L.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: T.value,
        content: X.value,
        isFullscreen: _.value,
        isCustom: v(ke)(e.value.style.chart.tooltip.customFormat)
      }, {
        "tooltip-before": h(() => [
          f(t.$slots, "tooltip-before", S(F({ ...E.value })), void 0, !0)
        ]),
        "tooltip-after": h(() => [
          f(t.$slots, "tooltip-after", S(F({ ...E.value })), void 0, !0)
        ]),
        _: 3
      }, 8, ["show", "backgroundColor", "color", "borderRadius", "borderColor", "borderWidth", "fontSize", "backgroundOpacity", "position", "offsetY", "parent", "content", "isFullscreen", "isCustom"]),
      D.value ? (n(), C(it, {
        key: 8,
        hideDetails: "",
        config: {
          open: $.value.showTable,
          maxHeight: 1e4,
          head: {
            backgroundColor: e.value.style.chart.backgroundColor,
            color: e.value.style.chart.color
          },
          body: {
            backgroundColor: e.value.style.chart.backgroundColor,
            color: e.value.style.chart.color
          }
        }
      }, {
        content: h(() => [
          (n(), C(nt, {
            key: `table_${oe.value}`,
            colNames: Y.value.colNames,
            head: Y.value.head,
            body: Y.value.body,
            config: Y.value.config,
            title: `${e.value.style.chart.title.text}${e.value.style.chart.title.subtitle.text ? ` : ${e.value.style.chart.title.subtitle.text}` : ""}`,
            onClose: o[3] || (o[3] = (a) => $.value.showTable = !1)
          }, {
            th: h(({ th: a }) => [
              Ve(P(a), 1)
            ]),
            td: h(({ td: a }) => [
              O("div", { innerHTML: a }, null, 8, Ot)
            ]),
            _: 1
          }, 8, ["colNames", "head", "body", "config", "title"]))
        ]),
        _: 1
      }, 8, ["config"])) : g("", !0)
    ], 14, ht));
  }
}, Gt = /* @__PURE__ */ vt(Pt, [["__scopeId", "data-v-05f7df3d"]]);
export {
  Gt as default
};
