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