import { computed as v, ref as s, watch as ke, onMounted as Be, onBeforeUnmount as Ue, openBlock as n, createElementBlock as u, normalizeClass as B, normalizeStyle as U, unref as i, createBlock as C, createCommentVNode as f, createSlots as Xe, withCtx as g, renderSlot as h, normalizeProps as S, guardReactiveProps as M, createVNode as we, Fragment as F, renderList as N, createElementVNode as O, toDisplayString as P, createTextVNode as Ge, nextTick as Ee } from "vue";
import { u as He, c as We, t as je, a as qe, p as $e, b as Je, o as Ke, e as K, d as Qe, X as Ze, f as R, i as Q, x as Ce, q as et, r as tt, y as at } from "./index-BVNcFEqn.js";
import { t as lt, u as ot } from "./useResponsive-CoxXLe23.js";
import { _ as rt } from "./Title-DyUTj8GI.js";
import { u as nt, U as st } from "./usePrinter-Bcfs_I6G.js";
import { L as ut } from "./Legend-DGUxLqhs.js";
import { D as it } from "./DataTable-DX_jYNWG.js";
import { _ as ct } from "./Tooltip-B-0uEV3l.js";
import dt from "./vue-ui-skeleton-Bgf16k10.js";
import vt from "./vue-ui-accordion-GNblUy42.js";
import { u as xe } from "./useNestedProp-D79dWdel.js";
import { _ as ht } from "./PackageVersion-B9_Ed72C.js";
import { P as ft } from "./PenAndPaper-CzjoEhsO.js";
import { u as gt } from "./useUserOptionState-BIvW1Kz7.js";
import { _ as pt } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const yt = ["id"], mt = ["xmlns", "viewBox"], bt = ["width", "height"], kt = ["cx", "cy", "r", "stroke", "stroke-width", "stroke-dasharray", "stroke-dashoffset"], wt = ["cx", "cy", "r", "stroke", "stroke-width", "stroke-dasharray", "stroke-dashoffset"], $t = ["id"], Ct = ["stdDeviation"], xt = ["filter"], Tt = ["cx", "cy", "r", "stroke-width", "stroke-dasharray", "stroke-dashoffset"], _t = ["cx", "cy", "r", "stroke-width", "stroke-dasharray", "stroke-dashoffset", "onMouseenter"], Ot = { key: 2 }, Pt = ["onMouseenter"], At = ["x", "y", "font-size", "fill", "font-weight"], It = {
  key: 5,
  class: "vue-data-ui-watermark"
}, St = ["onClick"], Mt = ["innerHTML"], Ft = {
  __name: "vue-ui-onion",
  props: {
    config: {
      type: Object,
      default() {
        return {};
      }
    },
    dataset: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  emits: ["selectLegend"],
  setup(Te, { expose: _e, emit: Oe }) {
    const k = Te, { vue_ui_onion: Pe } = He(), D = v(() => !!k.dataset && k.dataset.length), x = s(We()), Ae = s(null), Z = s(0), L = s(!1), X = s(""), y = s([]), T = s(null), ee = s(null), te = s(null), ae = s(null), le = s(null), oe = s(0), re = s(0), ne = s(0), e = v({
      get: () => ie(),
      set: (t) => t
    }), { userOptionsVisible: G, setUserOptionsVisibility: se, keepUserOptionState: ue } = gt({ config: e.value });
    function ie() {
      const t = xe({
        userConfig: k.config,
        defaultConfig: Pe
      });
      return t.theme ? {
        ...xe({
          userConfig: je.vue_ui_onion[t.theme] || k.config,
          defaultConfig: t
        }),
        customPalette: qe[t.theme] || $e
      } : t;
    }
    ke(() => k.config, (t) => {
      e.value = ie(), G.value = !e.value.showOnChartHover, fe(), oe.value += 1, re.value += 1, ne.value += 1;
    }, { deep: !0 });
    const { isPrinting: ce, isImaging: de, generatePdf: ve, generateImage: he } = nt({
      elementId: `vue-ui-onion_${x.value}`,
      fileName: e.value.style.chart.title.text || "vue-ui-onion"
    }), Ie = v(() => e.value.userOptions.show && !e.value.style.chart.title.text), Se = v(() => Je(e.value.customPalette)), w = 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
    }), V = s(null);
    Be(() => {
      fe();
    });
    function fe() {
      if (Ke(k.dataset) && K({
        componentName: "VueUiOnion",
        type: "dataset"
      }), e.value.responsive) {
        const o = lt(() => {
          const { width: a, height: l } = ot({
            chart: T.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
          });
          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;
        });
        V.value = new ResizeObserver(o), V.value.observe(T.value.parentNode);
      }
    }
    Ue(() => {
      V.value && V.value.disconnect();
    });
    const c = v(() => ({
      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
    })), d = v(() => (k.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
      });
    }), 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) || Se.value[o] || $e[o],
        id: a,
        shape: "circle",
        opacity: y.value.includes(a) ? 0.5 : 1,
        absoluteIndex: o,
        segregate: () => ge(a),
        isSegregated: y.value.includes(a)
      };
    }))), A = s(d.value), Me = v(() => e.value.useStartAnimation), Fe = s(null), Ne = v(() => Math.max(...d.value.map((t) => t.percentage))), E = s(!1);
    ke(() => d.value, Re, { immediate: !0 });
    function Re() {
      if (Me.value && !E.value) {
        let o = function() {
          t >= Ne.value ? (cancelAnimationFrame(Fe.value), A.value = d.value, E.value = !0) : (A.value = d.value.map((a) => ({
            ...a,
            percentage: t < a.targetPercentage ? t : a.targetPercentage
          })), t += 1, requestAnimationFrame(o), E.value = !0);
        };
        A.value = d.value.map((a) => ({
          ...a,
          percentage: 0
        }));
        let t = 0;
        o();
      } else
        A.value = d.value;
    }
    const De = v(() => ({
      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" : ""
    })), Le = v(() => d.value.filter((t) => !y.value.includes(t.id)).length), $ = v(() => {
      const t = Math.min(c.value.width, c.value.height) / 2 / d.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 = v(() => A.value.filter((t) => !y.value.includes(t.id)).map((t, o) => {
      const a = (c.value.maxRadius - $.value.track) / Le.value / 2 * (1 + o), l = c.value.centerY - a;
      return {
        percentage: t.percentage || 0,
        ...t,
        labelY: l,
        radius: a,
        path: Ve(a, t.percentage || 0)
      };
    }));
    function Ve(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 ${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()
      };
    }
    function ge(t) {
      y.value.includes(t) ? y.value = y.value.filter((o) => o !== t) : y.value.push(t), Oe("selectLegend", m.value);
    }
    function ze() {
      return m.value;
    }
    const H = v(() => {
      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 };
    }), z = v(() => {
      const t = H.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 pe() {
      Ee(() => {
        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 = et(l);
        tt({ csvContent: p, title: e.value.style.chart.title.text || "vue-ui-onion" });
      });
    }
    const b = s(void 0), _ = s(!1);
    function Ye(t) {
      _.value = t, Z.value += 1;
    }
    const W = s(null);
    function ye({ datapoint: t, seriesIndex: o, show: a = !0 }) {
      const l = t.absoluteIndex;
      b.value = o, W.value = {
        datapoint: t,
        seriesIndex: l,
        series: d.value,
        config: e.value
      }, L.value = a;
      let p = "";
      const I = e.value.style.chart.tooltip.customFormat;
      if (Ce(I) && at(() => I({
        seriesIndex: l,
        datapoint: t,
        series: d.value,
        config: e.value
      })))
        X.value = I({
          seriesIndex: l,
          datapoint: t,
          series: d.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 me() {
      w.value.showTable = !w.value.showTable;
    }
    function be() {
      w.value.showTooltip = !w.value.showTooltip;
    }
    const Y = s(!1);
    function j() {
      Y.value = !Y.value;
    }
    return _e({
      getData: ze,
      generatePdf: ve,
      generateCsv: pe,
      generateImage: he,
      toggleTable: me,
      toggleTooltip: be,
      toggleAnnotator: j
    }), (t, o) => (n(), u("div", {
      class: B(`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: U(`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(se)(!0)),
      onMouseleave: o[5] || (o[5] = () => i(se)(!1))
    }, [
      e.value.userOptions.buttons.annotator ? (n(), C(ft, {
        key: 0,
        parent: T.value,
        backgroundColor: e.value.style.chart.backgroundColor,
        color: e.value.style.chart.color,
        active: Y.value,
        onClose: j
      }, null, 8, ["parent", "backgroundColor", "color", "active"])) : f("", !0),
      Ie.value ? (n(), 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)) : f("", !0),
      e.value.style.chart.title.text ? (n(), u("div", {
        key: 2,
        ref_key: "chartTitle",
        ref: ee,
        style: "width:100%;background:transparent"
      }, [
        (n(), 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)) : f("", !0),
      e.value.userOptions.show && D.value && (i(ue) || i(G)) ? (n(), C(st, {
        ref_key: "details",
        ref: Ae,
        key: `user_options${Z.value}`,
        backgroundColor: e.value.style.chart.backgroundColor,
        color: e.value.style.chart.color,
        isImaging: i(de),
        isPrinting: i(ce),
        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: w.value.showTooltip,
        titles: { ...e.value.userOptions.buttonTitles },
        chartElement: T.value,
        position: e.value.userOptions.position,
        hasAnnotator: e.value.userOptions.buttons.annotator,
        isAnnotation: Y.value,
        onToggleFullscreen: Ye,
        onGeneratePdf: i(ve),
        onGenerateCsv: pe,
        onGenerateImage: i(he),
        onToggleTable: me,
        onToggleTooltip: be,
        onToggleAnnotator: j,
        style: U({
          visibility: i(ue) ? i(G) ? "visible" : "hidden" : "visible"
        })
      }, Xe({ _: 2 }, [
        t.$slots.optionTooltip ? {
          name: "optionTooltip",
          fn: g(() => [
            h(t.$slots, "optionTooltip", {}, void 0, !0)
          ]),
          key: "0"
        } : void 0,
        t.$slots.optionPdf ? {
          name: "optionPdf",
          fn: g(() => [
            h(t.$slots, "optionPdf", {}, void 0, !0)
          ]),
          key: "1"
        } : void 0,
        t.$slots.optionCsv ? {
          name: "optionCsv",
          fn: g(() => [
            h(t.$slots, "optionCsv", {}, void 0, !0)
          ]),
          key: "2"
        } : void 0,
        t.$slots.optionImg ? {
          name: "optionImg",
          fn: g(() => [
            h(t.$slots, "optionImg", {}, void 0, !0)
          ]),
          key: "3"
        } : void 0,
        t.$slots.optionTable ? {
          name: "optionTable",
          fn: g(() => [
            h(t.$slots, "optionTable", {}, void 0, !0)
          ]),
          key: "4"
        } : void 0,
        t.$slots.optionFullscreen ? {
          name: "optionFullscreen",
          fn: g(({ toggleFullscreen: a, isFullscreen: l }) => [
            h(t.$slots, "optionFullscreen", S(M({ toggleFullscreen: a, isFullscreen: l })), void 0, !0)
          ]),
          key: "5"
        } : void 0,
        t.$slots.optionAnnotator ? {
          name: "optionAnnotator",
          fn: g(({ toggleAnnotator: a, isAnnotator: l }) => [
            h(t.$slots, "optionAnnotator", S(M({ 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", "style"])) : f("", !0),
      D.value ? (n(), u("svg", {
        key: 4,
        xmlns: i(Ze),
        class: B({ "vue-data-ui-fullscreen--on": _.value, "vue-data-ui-fulscreen--off": !_.value }),
        viewBox: `0 0 ${r.value.width <= 0 ? 10 : r.value.width} ${r.value.height <= 0 ? 10 : r.value.height}`,
        style: U(`max-width:100%;overflow:visible;background:transparent;color:${e.value.style.chart.color}`)
      }, [
        we(ht),
        t.$slots["chart-background"] ? (n(), u("foreignObject", {
          key: 0,
          x: 0,
          y: 0,
          width: r.value.width <= 0 ? 10 : r.value.width,
          height: r.value.height <= 0 ? 10 : r.value.height,
          style: {
            pointerEvents: "none"
          }
        }, [
          h(t.$slots, "chart-background", {}, void 0, !0)
        ], 8, bt)) : f("", !0),
        (n(!0), u(F, null, N(m.value, (a, l) => (n(), 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: B({ "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, kt))), 256)),
        (n(!0), u(F, null, N(m.value, (a, l) => (n(), 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: B({ "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, wt))), 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, Ct)
          ], 8, $t)
        ]),
        e.value.style.chart.useGradient ? (n(), u("g", {
          key: 1,
          filter: `url(#blur_${x.value})`
        }, [
          (n(!0), u(F, null, N(m.value, (a, l) => (n(), 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, Tt))), 256))
        ], 8, xt)) : f("", !0),
        (n(!0), u(F, null, N(m.value, (a, l) => (n(), u("circle", {
          "data-cy-trap": "",
          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) => ye({
            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", Ot, [
          (n(!0), u(F, null, N(m.value, (a, l) => (n(), u("g", {
            onMouseenter: (p) => ye({
              datapoint: a,
              show: !0,
              seriesIndex: l
            }),
            onMouseleave: o[1] || (o[1] = (p) => {
              b.value = void 0, L.value = !1;
            })
          }, [
            y.value.includes(a.id) ? f("", !0) : (n(), u("text", {
              key: 0,
              x: r.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(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 ? i(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 ? `: ${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, At))
          ], 40, Pt))), 256))
        ])) : f("", !0),
        h(t.$slots, "svg", { svg: r.value }, void 0, !0)
      ], 14, mt)) : f("", !0),
      t.$slots.watermark ? (n(), u("div", It, [
        h(t.$slots, "watermark", S(M({ isPrinting: i(ce) || i(de) })), void 0, !0)
      ])) : f("", !0),
      D.value ? f("", !0) : (n(), C(dt, {
        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 ? (n(), C(ut, {
          key: `legend_${ne.value}`,
          legendSet: d.value,
          config: De.value,
          onClickMarker: o[2] || (o[2] = ({ legend: a }) => ge(a.id))
        }, {
          item: g(({ legend: a }) => [
            O("div", {
              "data-cy-legend-item": "",
              onClick: (l) => a.segregate(),
              style: U(`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, St)
          ]),
          _: 1
        }, 8, ["legendSet", "config"])) : h(t.$slots, "legend", {
          key: 1,
          legend: d.value
        }, void 0, !0)
      ], 512),
      t.$slots.source ? (n(), u("div", {
        key: 7,
        ref_key: "source",
        ref: ae,
        dir: "auto"
      }, [
        h(t.$slots, "source", {}, void 0, !0)
      ], 512)) : f("", !0),
      we(ct, {
        show: w.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: i(Ce)(e.value.style.chart.tooltip.customFormat)
      }, {
        "tooltip-before": g(() => [
          h(t.$slots, "tooltip-before", S(M({ ...W.value })), void 0, !0)
        ]),
        "tooltip-after": g(() => [
          h(t.$slots, "tooltip-after", S(M({ ...W.value })), void 0, !0)
        ]),
        _: 3
      }, 8, ["show", "backgroundColor", "color", "borderRadius", "borderColor", "borderWidth", "fontSize", "backgroundOpacity", "position", "offsetY", "parent", "content", "isFullscreen", "isCustom"]),
      D.value ? (n(), C(vt, {
        key: 8,
        hideDetails: "",
        config: {
          open: w.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: g(() => [
          (n(), C(it, {
            key: `table_${re.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) => w.value.showTable = !1)
          }, {
            th: g(({ th: a }) => [
              Ge(P(a), 1)
            ]),
            td: g(({ td: a }) => [
              O("div", { innerHTML: a }, null, 8, Mt)
            ]),
            _: 1
          }, 8, ["colNames", "head", "body", "config", "title"]))
        ]),
        _: 1
      }, 8, ["config"])) : f("", !0)
    ], 46, yt));
  }
}, qt = /* @__PURE__ */ pt(Ft, [["__scopeId", "data-v-2f5427dd"]]);
export {
  qt as default
};
