vue-data-ui 3.0.0-next.9 → 3.0.0

package/dist/vue-ui-onion-Dh2J9GV0.js

@@ -0,0 +1,776 @@
+import { defineAsyncComponent as M, computed as d, ref as r, toRefs as vt, watch as X, shallowRef as Re, onMounted as dt, onBeforeUnmount as ht, createElementBlock as i, openBlock as u, unref as s, normalizeStyle as A, normalizeClass as G, createBlock as I, createCommentVNode as g, createElementVNode as L, createVNode as ze, createSlots as ft, withCtx as p, renderSlot as h, normalizeProps as R, guardReactiveProps as z, Fragment as B, renderList as V, toDisplayString as N, createTextVNode as pt, nextTick as Ne } from "vue";
+import { u as gt, c as mt, t as yt, a as bt, p as De, b as kt, d as wt, o as Le, f as ne, e as Ct, X as $t, i as Y, k as se, y as Be, v as xt, w as Tt, z as Ot } from "./index-BtNwOUja.js";
+import { t as _t, u as At } from "./useResponsive-DfdjqQps.js";
+import { u as Ve } from "./useNestedProp-f2H3m6Yj.js";
+import { u as It } from "./usePrinter-DUNjpQNe.js";
+import { u as St } from "./useUserOptionState-BIvW1Kz7.js";
+import { u as Pt } from "./useChartAccessibility-9icAAmYg.js";
+import Ft from "./Title-BGu6gEd2.js";
+import Mt from "./Legend-BUk0WvWJ.js";
+import Rt from "./img-DrR839Ot.js";
+import { u as zt, B as Nt } from "./useLoading-D7YHNtLX.js";
+import { u as Dt } from "./useAutoSizeLabelsInsideViewbox-FmDQyX4z.js";
+import { _ as Lt } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const Bt = ["id"], Vt = ["xmlns", "viewBox"], Yt = ["width", "height"], Et = ["cx", "cy", "r", "stroke", "stroke-width", "stroke-dasharray", "stroke-dashoffset"], Ut = ["cx", "cy", "r", "stroke", "stroke-width", "stroke-dasharray", "stroke-dashoffset"], Xt = ["id"], Gt = ["stdDeviation"], Ht = ["filter"], Wt = ["cx", "cy", "r", "stroke-width", "stroke-dasharray", "stroke-dashoffset"], jt = ["cx", "cy", "r", "stroke-width", "stroke-dasharray", "stroke-dashoffset", "onMouseenter", "onMouseleave", "onClick"], qt = { key: 2 }, Jt = ["onMouseenter", "onMouseleave", "onClick"], Kt = ["x", "y", "font-size", "fill", "font-weight"], Qt = {
+  key: 4,
+  class: "vue-data-ui-watermark"
+}, Zt = ["onClick"], ea = ["innerHTML"], ta = {
+  __name: "vue-ui-onion",
+  props: {
+    config: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    dataset: {
+      type: Array,
+      default() {
+        return [];
+      }
+    }
+  },
+  emits: ["selectLegend"],
+  setup(Ye, { expose: Ee, emit: Ue }) {
+    const Xe = M(() => import("./vue-ui-accordion-BKUrAowe.js")), Ge = M(() => import("./DataTable-BSSXpM7w.js")), He = M(() => import("./PackageVersion-CJ6Vd7V5.js")), We = M(() => import("./PenAndPaper-D3zudcNI.js")), je = M(() => import("./Tooltip-Bh2zYSoM.js")), qe = M(() => import("./UserOptions-Ck8fz9f4.js")), { vue_ui_onion: Je } = gt(), w = Ye, ue = d(() => !!w.dataset && w.dataset.length), S = r(mt()), Ke = r(null), re = r(0), H = r(!1), W = r(""), y = r([]), x = r(null), ie = r(null), ce = r(null), ve = r(null), de = r(null), he = r(0), fe = r(0), pe = r(0), C = r(!1), e = r(K()), { loading: b, FINAL_DATASET: ge, manualLoading: j } = zt({
+      ...vt(w),
+      FINAL_CONFIG: e,
+      prepareConfig: K,
+      callback: () => {
+        Promise.resolve().then(async () => {
+          await Ne(), Te();
+        });
+      },
+      skeletonDataset: [
+        { name: "_", percentage: 50, value: 1, color: "#DBDBDB" },
+        { name: "_", percentage: 50, value: 1, color: "#C4C4C4" },
+        { name: "_", percentage: 50, value: 1, color: "#ADADAD" },
+        { name: "_", percentage: 50, value: 1, color: "#969696" }
+      ],
+      skeletonConfig: yt({
+        defaultConfig: e.value,
+        userConfig: {
+          userOptions: { show: !1 },
+          table: { show: !1 },
+          style: {
+            chart: {
+              backgroundColor: "#99999930",
+              layout: {
+                gutter: {
+                  color: "#99999950"
+                },
+                labels: { show: !1 }
+              },
+              legend: {
+                backgroundColor: "transparent"
+              }
+            }
+          }
+        }
+      })
+    }), { userOptionsVisible: q, setUserOptionsVisibility: me, keepUserOptionState: ye } = St({ config: e.value }), { svgRef: J } = Pt({ config: e.value.style.chart.title });
+    function K() {
+      const t = Ve({
+        userConfig: w.config,
+        defaultConfig: Je
+      });
+      return t.theme ? {
+        ...Ve({
+          userConfig: kt.vue_ui_onion[t.theme] || w.config,
+          defaultConfig: t
+        }),
+        customPalette: bt[t.theme] || De
+      } : t;
+    }
+    X(() => w.config, (t) => {
+      b.value || (e.value = K()), q.value = !e.value.userOptions.showOnChartHover, xe(), he.value += 1, fe.value += 1, pe.value += 1, m.value.showTable = e.value.table.show, m.value.showTooltip = e.value.style.chart.tooltip.show;
+    }, { deep: !0 });
+    const { isPrinting: be, isImaging: ke, generatePdf: we, generateImage: Ce } = It({
+      elementId: `vue-ui-onion_${S.value}`,
+      fileName: e.value.style.chart.title.text || "vue-ui-onion",
+      options: e.value.userOptions.print
+    }), Qe = d(() => e.value.userOptions.show && !e.value.style.chart.title.text), Ze = d(() => wt(e.value.customPalette)), m = r({
+      showTable: e.value.table.show,
+      showTooltip: e.value.style.chart.tooltip.show
+    });
+    X(e, () => {
+      m.value = {
+        showTable: e.value.table.show,
+        showTooltip: e.value.style.chart.tooltip.show
+      };
+    }, { immediate: !0 });
+    const n = r({
+      height: 512,
+      width: 512,
+      padding: {
+        top: 64,
+        left: 64,
+        right: 64,
+        bottom: 64
+      },
+      minRadius: 64
+    }), T = Re(null), P = Re(null);
+    dt(() => {
+      xe();
+    });
+    const et = d({
+      get: () => e.value.style.chart.layout.labels.fontSize,
+      set: (t) => t
+    }), { autoSizeLabels: $e } = Dt({
+      svgRef: J,
+      fontSize: e.value.style.chart.layout.labels.fontSize,
+      minFontSize: e.value.style.chart.layout.labels.minFontSize,
+      sizeRef: et,
+      labelClass: ".vue-ui-onion-label"
+    }), tt = d(() => e.value.debug);
+    let Q = null;
+    function xe() {
+      if (Le(w.dataset) && (ne({
+        componentName: "VueUiOnion",
+        type: "dataset",
+        debug: tt.value
+      }), j.value = !0), Le(w.dataset) || (j.value = e.value.loading), e.value.responsive) {
+        const o = _t(() => {
+          Q && clearTimeout(Q), C.value = !0;
+          let { width: a, height: l } = At({
+            chart: x.value,
+            title: e.value.style.chart.title.text ? ie.value : null,
+            legend: e.value.style.chart.legend.show ? ce.value : null,
+            source: ve.value,
+            noTitle: de.value
+          });
+          l -= 12, requestAnimationFrame(async () => {
+            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, Q = setTimeout(() => {
+              C.value = !1, $e();
+            }, 0);
+          });
+        });
+        T.value && (P.value && T.value.unobserve(P.value), T.value.disconnect()), T.value = new ResizeObserver(o), P.value = x.value.parentNode, T.value.observe(P.value);
+      }
+      requestAnimationFrame($e);
+    }
+    ht(() => {
+      T.value && (P.value && T.value.unobserve(P.value), T.value.disconnect());
+    });
+    const c = d(() => ({
+      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
+    })), f = d(() => (ge.value.forEach((t, o) => {
+      [null, void 0].includes(t.name) && ne({
+        componentName: "VueUiOnion",
+        type: "datasetSerieAttribute",
+        property: "name",
+        index: o
+      }), [void 0].includes(t.percentage) && ne({
+        componentName: "VueUiOnion",
+        type: "datasetSerieAttribute",
+        property: "percentage",
+        index: o
+      });
+    }), ge.value.map((t, o) => {
+      const a = `onion_serie_${o}_${S.value}`;
+      return {
+        ...t,
+        percentage: t.percentage || 0,
+        targetPercentage: t.percentage || 0,
+        color: Ct(t.color) || Ze.value[o] || De[o],
+        id: a,
+        shape: "circle",
+        opacity: y.value.includes(a) ? 0.5 : 1,
+        absoluteIndex: o,
+        segregate: () => Oe(a),
+        isSegregated: y.value.includes(a)
+      };
+    }))), D = r(f.value), at = d(() => e.value.useStartAnimation), lt = r(null), ot = d(() => Math.max(...f.value.map((t) => t.percentage))), Z = r(!1);
+    X(() => f.value, Te, { immediate: !0, deep: !0 }), X(() => w.dataset, (t) => {
+      Array.isArray(t) && t.length > 0 && (j.value = !1);
+    }, { deep: !0 });
+    function Te() {
+      if (at.value && !Z.value && !b.value) {
+        let o = function() {
+          t >= ot.value ? (cancelAnimationFrame(lt.value), D.value = f.value, Z.value = !0) : (D.value = f.value.map((a) => ({
+            ...a,
+            percentage: t < a.targetPercentage ? t : a.targetPercentage
+          })), t += 1, requestAnimationFrame(o), Z.value = !0);
+        };
+        D.value = f.value.map((a) => ({
+          ...a,
+          percentage: 0
+        }));
+        let t = 0;
+        o();
+      } else
+        D.value = f.value;
+    }
+    const nt = 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" : ""
+    })), st = d(() => f.value.filter((t) => !y.value.includes(t.id)).length), _ = d(() => {
+      const t = Math.min(c.value.width, c.value.height) / 2 / f.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
+      };
+    }), $ = d(() => D.value.filter((t) => !y.value.includes(t.id)).map((t, o) => {
+      const a = (c.value.maxRadius - _.value.track) / st.value / 2 * (1 + o), l = c.value.centerY - a;
+      return {
+        percentage: t.percentage || 0,
+        ...t,
+        labelY: l,
+        radius: a,
+        path: ut(a, t.percentage || 0)
+      };
+    }));
+    function ut(t, o) {
+      const a = 2 * Math.PI * t, l = a * 0.75, v = `${l} ${a}`, k = l * (1 - o / 100);
+      return {
+        bgDashArray: `${l} ${a}`,
+        bgDashOffset: 0,
+        dashArray: v,
+        dashOffset: k,
+        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 rt = Ue;
+    function Oe(t) {
+      y.value.includes(t) ? y.value = y.value.filter((o) => o !== t) : y.value.push(t), rt("selectLegend", $.value);
+    }
+    function it() {
+      return $.value;
+    }
+    const ee = d(() => {
+      const t = [e.value.table.translations.serie, e.value.table.translations.percentage, e.value.table.translations.value], o = $.value.map((a) => [
+        a.name,
+        a.percentage,
+        a.value
+      ]);
+      return { head: t, body: o };
+    }), E = d(() => {
+      const t = ee.value.head, o = $.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 _e(t = null) {
+      Ne(() => {
+        const o = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [""]], a = ee.value.head, l = ee.value.body, v = o.concat([a]).concat(l), k = xt(v);
+        t ? t(k) : Tt({ csvContent: k, title: e.value.style.chart.title.text || "vue-ui-onion" });
+      });
+    }
+    const O = r(void 0), F = r(!1);
+    function Ae(t) {
+      F.value = t, re.value += 1;
+    }
+    function Ie({ datapoint: t }) {
+      e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: t, seriesIndex: t.absoluteIndex });
+    }
+    function Se({ datapoint: t }) {
+      O.value = void 0, H.value = !1, e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: t, seriesIndex: t.absoluteIndex });
+    }
+    const te = r(null);
+    function Pe({ datapoint: t, seriesIndex: o, show: a = !0 }) {
+      e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: t, seriesIndex: t.absoluteIndex });
+      const l = t.absoluteIndex;
+      O.value = o, te.value = {
+        datapoint: t,
+        seriesIndex: l,
+        series: f.value,
+        config: e.value
+      }, H.value = a;
+      let v = "";
+      const k = e.value.style.chart.tooltip.customFormat;
+      if (Be(k) && Ot(() => k({
+        seriesIndex: l,
+        datapoint: t,
+        series: f.value,
+        config: e.value
+      })))
+        W.value = k({
+          seriesIndex: l,
+          datapoint: t,
+          series: f.value,
+          config: e.value
+        });
+      else {
+        const le = e.value.style.chart.tooltip.showPercentage, oe = e.value.style.chart.tooltip.showValue;
+        v += `<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>`, v += `<div style="width:100%;text-align:left;"><b>${le ? Y({ p: "", v: t.percentage, s: "%", r: e.value.style.chart.tooltip.roundingPercentage }) : ""}</b> ${le && oe ? "(" : ""}${oe ? se(
+          e.value.style.chart.layout.labels.value.formatter,
+          t.value,
+          Y({
+            p: t.prefix || "",
+            v: t.value,
+            s: t.suffix || "",
+            r: e.value.style.chart.tooltip.roundingValue
+          }),
+          { datapoint: t, seriesIndex: o }
+        ) : ""}${le && oe ? ")" : ""}</div>`, W.value = `<div>${v}</div>`;
+      }
+    }
+    function Fe() {
+      m.value.showTable = !m.value.showTable;
+    }
+    function Me() {
+      m.value.showTooltip = !m.value.showTooltip;
+    }
+    const U = r(!1);
+    function ae() {
+      U.value = !U.value;
+    }
+    async function ct({ scale: t = 2 } = {}) {
+      if (!x.value) return;
+      const { width: o, height: a } = x.value.getBoundingClientRect(), l = o / a, { imageUri: v, base64: k } = await Rt({ domElement: x.value, base64: !0, img: !0, scale: t });
+      return {
+        imageUri: v,
+        base64: k,
+        title: e.value.style.chart.title.text,
+        width: o,
+        height: a,
+        aspectRatio: l
+      };
+    }
+    return Ee({
+      getData: it,
+      getImage: ct,
+      generatePdf: we,
+      generateCsv: _e,
+      generateImage: Ce,
+      toggleTable: Fe,
+      toggleTooltip: Me,
+      toggleAnnotator: ae,
+      toggleFullscreen: Ae
+    }), (t, o) => (u(), i("div", {
+      class: G(`vue-ui-onion ${F.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${e.value.useCssAnimation ? "" : "vue-ui-dna"}`),
+      ref_key: "onionChart",
+      ref: x,
+      id: `vue-ui-onion_${S.value}`,
+      style: A(`font-family:${e.value.style.fontFamily};width:100%; ${e.value.responsive ? "height: 100%;" : ""} text-align:center;background:${e.value.style.chart.backgroundColor}`),
+      onMouseenter: o[2] || (o[2] = () => s(me)(!0)),
+      onMouseleave: o[3] || (o[3] = () => s(me)(!1))
+    }, [
+      e.value.userOptions.buttons.annotator ? (u(), I(s(We), {
+        key: 0,
+        svgRef: s(J),
+        backgroundColor: e.value.style.chart.backgroundColor,
+        color: e.value.style.chart.color,
+        active: U.value,
+        onClose: ae
+      }, null, 8, ["svgRef", "backgroundColor", "color", "active"])) : g("", !0),
+      Qe.value ? (u(), i("div", {
+        key: 1,
+        ref_key: "noTitle",
+        ref: de,
+        class: "vue-data-ui-no-title-space",
+        style: "height:36px; width: 100%;background:transparent"
+      }, null, 512)) : g("", !0),
+      e.value.style.chart.title.text ? (u(), i("div", {
+        key: 2,
+        ref_key: "chartTitle",
+        ref: ie,
+        style: "width:100%;background:transparent"
+      }, [
+        (u(), I(Ft, {
+          key: `title_${he.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 && ue.value && (s(ye) || s(q)) ? (u(), I(s(qe), {
+        ref_key: "details",
+        ref: Ke,
+        key: `user_options${re.value}`,
+        backgroundColor: e.value.style.chart.backgroundColor,
+        color: e.value.style.chart.color,
+        isImaging: s(ke),
+        isPrinting: s(be),
+        uid: S.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: F.value,
+        isTooltip: m.value.showTooltip,
+        titles: { ...e.value.userOptions.buttonTitles },
+        chartElement: x.value,
+        position: e.value.userOptions.position,
+        hasAnnotator: e.value.userOptions.buttons.annotator,
+        isAnnotation: U.value,
+        callbacks: e.value.userOptions.callbacks,
+        printScale: e.value.userOptions.print.scale,
+        onToggleFullscreen: Ae,
+        onGeneratePdf: s(we),
+        onGenerateCsv: _e,
+        onGenerateImage: s(Ce),
+        onToggleTable: Fe,
+        onToggleTooltip: Me,
+        onToggleAnnotator: ae,
+        style: A({
+          visibility: s(ye) ? s(q) ? "visible" : "hidden" : "visible"
+        })
+      }, ft({ _: 2 }, [
+        t.$slots.menuIcon ? {
+          name: "menuIcon",
+          fn: p(({ isOpen: a, color: l }) => [
+            h(t.$slots, "menuIcon", R(z({ isOpen: a, color: l })), void 0, !0)
+          ]),
+          key: "0"
+        } : void 0,
+        t.$slots.optionTooltip ? {
+          name: "optionTooltip",
+          fn: p(() => [
+            h(t.$slots, "optionTooltip", {}, void 0, !0)
+          ]),
+          key: "1"
+        } : void 0,
+        t.$slots.optionPdf ? {
+          name: "optionPdf",
+          fn: p(() => [
+            h(t.$slots, "optionPdf", {}, void 0, !0)
+          ]),
+          key: "2"
+        } : void 0,
+        t.$slots.optionCsv ? {
+          name: "optionCsv",
+          fn: p(() => [
+            h(t.$slots, "optionCsv", {}, void 0, !0)
+          ]),
+          key: "3"
+        } : void 0,
+        t.$slots.optionImg ? {
+          name: "optionImg",
+          fn: p(() => [
+            h(t.$slots, "optionImg", {}, void 0, !0)
+          ]),
+          key: "4"
+        } : void 0,
+        t.$slots.optionTable ? {
+          name: "optionTable",
+          fn: p(() => [
+            h(t.$slots, "optionTable", {}, void 0, !0)
+          ]),
+          key: "5"
+        } : void 0,
+        t.$slots.optionFullscreen ? {
+          name: "optionFullscreen",
+          fn: p(({ toggleFullscreen: a, isFullscreen: l }) => [
+            h(t.$slots, "optionFullscreen", R(z({ toggleFullscreen: a, isFullscreen: l })), void 0, !0)
+          ]),
+          key: "6"
+        } : void 0,
+        t.$slots.optionAnnotator ? {
+          name: "optionAnnotator",
+          fn: p(({ toggleAnnotator: a, isAnnotator: l }) => [
+            h(t.$slots, "optionAnnotator", R(z({ 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", "callbacks", "printScale", "onGeneratePdf", "onGenerateImage", "style"])) : g("", !0),
+      (u(), i("svg", {
+        ref_key: "svgRef",
+        ref: J,
+        xmlns: s($t),
+        class: G({ "vue-data-ui-fullscreen--on": F.value, "vue-data-ui-fulscreen--off": !F.value, resizing: C.value }),
+        viewBox: `0 0 ${n.value.width <= 0 ? 10 : n.value.width} ${n.value.height <= 0 ? 10 : n.value.height}`,
+        style: A(`max-width:100%;overflow:visible;background:transparent;color:${e.value.style.chart.color}`)
+      }, [
+        ze(s(He)),
+        t.$slots["chart-background"] ? (u(), i("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"
+          }
+        }, [
+          h(t.$slots, "chart-background", {}, void 0, !0)
+        ], 8, Yt)) : g("", !0),
+        (u(!0), i(B, null, V($.value, (a, l) => (u(), i("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: G({ "vue-ui-onion-path": !0, "vue-ui-onion-blur": e.value.useBlurOnHover && ![null, void 0].includes(O.value) && O.value !== l }),
+          style: A({
+            transform: "rotate(-90deg)",
+            transformOrigin: "50% 50%",
+            transition: C.value || s(b) ? "none" : "all 0.3s ease-in-out !important",
+            animation: C.value || s(b) ? "none" : "xyAnimation 0.5s ease-in"
+          })
+        }, null, 14, Et))), 256)),
+        (u(!0), i(B, null, V($.value, (a, l) => (u(), i("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: G({ "vue-ui-onion-path": !0, "vue-ui-onion-blur": e.value.useBlurOnHover && ![null, void 0].includes(O.value) && O.value !== l }),
+          "stroke-linecap": "round",
+          style: A({
+            transform: "rotate(-90deg)",
+            transformOrigin: "50% 50%",
+            transition: C.value || s(b) ? "none" : "all 0.3s ease-in-out !important",
+            animation: C.value || s(b) ? "none" : "xyAnimation 0.5s ease-in"
+          })
+        }, null, 14, Ut))), 256)),
+        L("defs", null, [
+          L("filter", {
+            id: `blur_${S.value}`,
+            x: "-50%",
+            y: "-50%",
+            width: "200%",
+            height: "200%"
+          }, [
+            L("feGaussianBlur", {
+              in: "SourceGraphic",
+              stdDeviation: 100 / e.value.style.chart.gradientIntensity
+            }, null, 8, Gt)
+          ], 8, Xt)
+        ]),
+        e.value.style.chart.useGradient ? (u(), i("g", {
+          key: 1,
+          filter: `url(#blur_${S.value})`
+        }, [
+          (u(!0), i(B, null, V($.value, (a, l) => (u(), i("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: A({
+              transform: "rotate(-90deg)",
+              transformOrigin: "50% 50%",
+              transition: C.value || s(b) ? "none" : "all 0.3s ease-in-out !important",
+              animation: C.value || s(b) ? "none" : "xyAnimation 0.5s ease-in"
+            })
+          }, null, 12, Wt))), 256))
+        ], 8, Ht)) : g("", !0),
+        (u(!0), i(B, null, V($.value, (a, l) => (u(), i("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)",
+            transformOrigin: "50% 50%"
+          },
+          onMouseenter: (v) => Pe({
+            datapoint: a,
+            show: !0,
+            seriesIndex: l
+          }),
+          onMouseleave: (v) => Se({ datapoint: a }),
+          onClick: (v) => Ie({ datapoint: a })
+        }, null, 40, jt))), 256)),
+        e.value.style.chart.layout.labels.show ? (u(), i("g", qt, [
+          (u(!0), i(B, null, V($.value, (a, l) => (u(), i("g", {
+            onMouseenter: (v) => Pe({
+              datapoint: a,
+              show: !0,
+              seriesIndex: l
+            }),
+            onMouseleave: (v) => Se({ datapoint: a }),
+            onClick: (v) => Ie({ datapoint: a })
+          }, [
+            y.value.includes(a.id) ? g("", !0) : (u(), i("text", {
+              key: 0,
+              class: "vue-ui-onion-label",
+              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(O.value) && O.value === l ? a.color : e.value.style.chart.layout.labels.color,
+              "font-weight": e.value.style.chart.layout.labels.bold ? "bold" : "normal"
+            }, N(a.name ? a.name + ": " : "") + " " + N(e.value.style.chart.layout.labels.percentage.show ? s(Y)({
+              v: a.percentage,
+              s: "%",
+              r: e.value.style.chart.layout.labels.roundingPercentage
+            }) : "") + " " + N(!e.value.style.chart.layout.labels.percentage.show && e.value.style.chart.layout.labels.value.show ? `: ${s(se)(
+              e.value.style.chart.layout.labels.value.formatter,
+              a.value,
+              s(Y)({
+                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 ? `(${s(se)(
+              e.value.style.chart.layout.labels.value.formatter,
+              a.value,
+              s(Y)({
+                p: a.prefix || "",
+                v: a.value || 0,
+                s: a.suffix || "",
+                r: e.value.style.chart.layout.labels.roundingValue
+              }),
+              { datapoint: a, seriesIndex: l }
+            )})` : ""}`), 9, Kt))
+          ], 40, Jt))), 256))
+        ])) : g("", !0),
+        h(t.$slots, "svg", { svg: n.value }, void 0, !0)
+      ], 14, Vt)),
+      t.$slots.watermark ? (u(), i("div", Qt, [
+        h(t.$slots, "watermark", R(z({ isPrinting: s(be) || s(ke) })), void 0, !0)
+      ])) : g("", !0),
+      L("div", {
+        ref_key: "chartLegend",
+        ref: ce
+      }, [
+        e.value.style.chart.legend.show ? (u(), I(Mt, {
+          key: `legend_${pe.value}`,
+          legendSet: f.value,
+          config: nt.value,
+          onClickMarker: o[0] || (o[0] = ({ legend: a }) => Oe(a.id))
+        }, {
+          item: p(({ legend: a }) => [
+            s(b) ? g("", !0) : (u(), i("div", {
+              key: 0,
+              "data-cy-legend-item": "",
+              onClick: (l) => a.segregate(),
+              style: A(`opacity:${y.value.includes(a.id) ? 0.5 : 1}`)
+            }, N(a.name ? a.name + ": " : "") + " " + N((a.percentage || 0).toFixed(e.value.style.chart.legend.roundingPercentage)) + "% ", 13, Zt))
+          ]),
+          _: 1
+        }, 8, ["legendSet", "config"])) : h(t.$slots, "legend", {
+          key: 1,
+          legend: f.value
+        }, void 0, !0)
+      ], 512),
+      t.$slots.source ? (u(), i("div", {
+        key: 5,
+        ref_key: "source",
+        ref: ve,
+        dir: "auto"
+      }, [
+        h(t.$slots, "source", {}, void 0, !0)
+      ], 512)) : g("", !0),
+      ze(s(je), {
+        show: m.value.showTooltip && H.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: x.value,
+        content: W.value,
+        isFullscreen: F.value,
+        isCustom: s(Be)(e.value.style.chart.tooltip.customFormat),
+        smooth: e.value.style.chart.tooltip.smooth,
+        backdropFilter: e.value.style.chart.tooltip.backdropFilter
+      }, {
+        "tooltip-before": p(() => [
+          h(t.$slots, "tooltip-before", R(z({ ...te.value })), void 0, !0)
+        ]),
+        "tooltip-after": p(() => [
+          h(t.$slots, "tooltip-after", R(z({ ...te.value })), void 0, !0)
+        ]),
+        _: 3
+      }, 8, ["show", "backgroundColor", "color", "borderRadius", "borderColor", "borderWidth", "fontSize", "backgroundOpacity", "position", "offsetY", "parent", "content", "isFullscreen", "isCustom", "smooth", "backdropFilter"]),
+      ue.value ? (u(), I(s(Xe), {
+        key: 6,
+        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: p(() => [
+          (u(), I(s(Ge), {
+            key: `table_${fe.value}`,
+            colNames: E.value.colNames,
+            head: E.value.head,
+            body: E.value.body,
+            config: E.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[1] || (o[1] = (a) => m.value.showTable = !1)
+          }, {
+            th: p(({ th: a }) => [
+              pt(N(a), 1)
+            ]),
+            td: p(({ td: a }) => [
+              L("div", { innerHTML: a }, null, 8, ea)
+            ]),
+            _: 1
+          }, 8, ["colNames", "head", "body", "config", "title"]))
+        ]),
+        _: 1
+      }, 8, ["config"])) : g("", !0),
+      s(b) ? (u(), I(Nt, { key: 7 })) : g("", !0)
+    ], 46, Bt));
+  }
+}, pa = /* @__PURE__ */ Lt(ta, [["__scopeId", "data-v-4cb88669"]]);
+export {
+  pa as default
+};