vue-data-ui 3.15.12 → 3.16.1

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

@@ -1,1045 +0,0 @@
-import { defineAsyncComponent as D, computed as d, ref as u, toRefs as Ut, watch as Y, shallowRef as je, onMounted as Et, onBeforeUnmount as Yt, openBlock as r, createElementBlock as g, unref as s, normalizeStyle as F, normalizeClass as Q, createBlock as x, withCtx as i, renderSlot as v, normalizeProps as k, guardReactiveProps as C, createCommentVNode as m, createElementVNode as _, createSlots as qe, createVNode as fe, Fragment as X, renderList as G, toDisplayString as Z, Teleport as Xt, resolveDynamicComponent as Gt, mergeProps as Ht, createTextVNode as Je, nextTick as pe } from "vue";
-import { j as Wt, t as Ke, m as jt, p as Qe, n as qt, o as Ze, q as me, s as Jt, k as ye, l as B, X as Kt, T as et, a0 as Qt, a1 as Zt, U as ea } from "./lib-GwPnJSrY.js";
-import { b as ta } from "./labelUtils-CTXUc3V9.js";
-import { t as aa, u as la } from "./useResponsive-DfdjqQps.js";
-import { u as oa } from "./useConfig-CIgyKZ6R.js";
-import { u as na, B as sa } from "./BaseScanner-BhhkKVoj.js";
-import { u as ra } from "./usePrinter-DiK5R6k-.js";
-import { u as ua } from "./useSvgExport-ByUukOZt.js";
-import { u as be } from "./useNestedProp-BBT0mbHh.js";
-import { u as ia } from "./useThemeCheck-D1ZYXUwG.js";
-import { u as ca } from "./useUserOptionState-BIvW1Kz7.js";
-import { u as va } from "./useChartAccessibility-9icAAmYg.js";
-import { u as da } from "./useAutoSizeLabelsInsideViewbox-80fzdfxt.js";
-import ga from "./img-BYYzY_QU.js";
-import ha from "./Title-BfyrP-jp.js";
-import fa from "./Legend-1LMMsPxL.js";
-import pa from "./vue_ui_onion-CxWH9_OZ.js";
-import { B as ma } from "./BaseLegendToggle-Y61xahI4.js";
-import { _ as ya } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const ba = ["id"], ka = ["id"], Ca = ["xmlns", "viewBox"], wa = ["width", "height"], $a = ["cx", "cy", "r", "stroke", "stroke-width", "stroke-dasharray", "stroke-dashoffset"], Ta = ["cx", "cy", "r", "stroke", "stroke-width", "stroke-dasharray", "stroke-dashoffset"], Pa = ["id"], Sa = ["stdDeviation"], Oa = ["filter"], xa = ["cx", "cy", "r", "stroke-width", "stroke-dasharray", "stroke-dashoffset"], Aa = ["cx", "cy", "r", "stroke-width", "stroke-dasharray", "stroke-dashoffset", "onMouseenter", "onMouseleave", "onClick"], Ia = { key: 2 }, Da = ["onMouseenter", "onMouseleave", "onClick"], Fa = ["x", "y", "font-size", "fill", "font-weight"], _a = {
-  key: 4,
-  class: "vue-data-ui-watermark"
-}, La = ["id"], Ma = ["onClick"], Ra = ["innerHTML"], za = {
-  __name: "vue-ui-onion",
-  props: {
-    config: {
-      type: Object,
-      default() {
-        return {};
-      }
-    },
-    dataset: {
-      type: Array,
-      default() {
-        return [];
-      }
-    }
-  },
-  emits: ["selectLegend", "copyAlt"],
-  setup(tt, { expose: at, emit: lt }) {
-    const ot = D(() => import("./Tooltip-DL3QgjZf.js")), nt = D(() => import("./BaseIcon-CNx8Tzl5.js")), st = D(() => import("./vue-ui-accordion-BGHTqIBt.js")), rt = D(() => import("./DataTable-Bo1pmAqG.js")), ut = D(() => import("./UserOptions-CrLqEimB.js")), it = D(() => import("./PenAndPaper-DWV1FMIi.js")), ct = D(() => import("./PackageVersion-DN9d0ME5.js")), vt = D(() => import("./BaseDraggableDialog-DSpKTn3R.js")), { vue_ui_onion: dt } = oa(), { isThemeValid: gt, warnInvalidTheme: ht } = ia(), w = tt, ke = d(() => !!w.dataset && w.dataset.length), P = u(Wt()), ft = u(null), Ce = u(0), ee = u(!1), te = u(""), h = u([]), S = u(null), we = u(null), $e = u(null), Te = u(null), Pe = u(null), Se = u(0), Oe = u(0), xe = u(0), O = u(!1), Ae = u(!1), N = u(null), H = u(!1), W = u(!1), e = u(oe()), L = d(() => e.value.userOptions.useCursorPointer), pt = d(() => Ke({
-      defaultConfig: {
-        userOptions: { show: !1 },
-        table: { show: !1 },
-        style: {
-          chart: {
-            backgroundColor: "#99999930",
-            layout: {
-              gutter: {
-                color: "#99999950"
-              },
-              labels: { show: !1 }
-            },
-            legend: {
-              backgroundColor: "transparent"
-            }
-          }
-        }
-      },
-      userConfig: e.value.skeletonConfig ?? {}
-    })), { loading: $, FINAL_DATASET: Ie, manualLoading: ae } = na({
-      ...Ut(w),
-      FINAL_CONFIG: e,
-      prepareConfig: oe,
-      callback: () => {
-        Promise.resolve().then(async () => {
-          await pe(), ze();
-        });
-      },
-      skeletonDataset: w.config?.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: Ke({
-        defaultConfig: e.value,
-        userConfig: pt.value
-      })
-    }), { userOptionsVisible: le, setUserOptionsVisibility: De, keepUserOptionState: Fe } = ca({ config: e.value }), { svgRef: j } = va({ config: e.value.style.chart.title });
-    function oe() {
-      const t = be({
-        userConfig: w.config,
-        defaultConfig: dt
-      }), l = t.theme;
-      if (!l) return t;
-      if (!gt.value(t))
-        return ht(t), t;
-      const a = be({
-        userConfig: pa[l] || w.config,
-        defaultConfig: t
-      }), o = be({
-        userConfig: w.config,
-        defaultConfig: a
-      });
-      return {
-        ...o,
-        customPalette: o.customPalette.length ? o.customPalette : jt[l] || Qe
-      };
-    }
-    Y(() => w.config, (t) => {
-      $.value || (e.value = oe()), le.value = !e.value.userOptions.showOnChartHover, Re(), Se.value += 1, Oe.value += 1, xe.value += 1, y.value.showTable = e.value.table.show, y.value.showTooltip = e.value.style.chart.tooltip.show;
-    }, { deep: !0 });
-    const { isPrinting: ne, isImaging: se, generatePdf: _e, generateImage: Le } = ra({
-      elementId: `vue-ui-onion_${P.value}`,
-      fileName: e.value.style.chart.title.text || "vue-ui-onion",
-      options: e.value.userOptions.print
-    }), mt = d(() => e.value.userOptions.show && !e.value.style.chart.title.text), yt = d(() => qt(e.value.customPalette)), y = u({
-      showTable: e.value.table.show,
-      showTooltip: e.value.style.chart.tooltip.show
-    });
-    Y(e, () => {
-      y.value = {
-        showTable: e.value.table.show,
-        showTooltip: e.value.style.chart.tooltip.show
-      };
-    }, { immediate: !0 });
-    const n = u({
-      height: 512,
-      width: 512,
-      padding: {
-        top: 64,
-        left: 64,
-        right: 64,
-        bottom: 64
-      },
-      minRadius: 64
-    }), A = je(null), z = je(null);
-    Et(() => {
-      Ae.value = !0, Re();
-    });
-    const bt = d({
-      get: () => e.value.style.chart.layout.labels.fontSize,
-      set: (t) => t
-    }), { autoSizeLabels: Me } = da({
-      svgRef: j,
-      fontSize: e.value.style.chart.layout.labels.fontSize,
-      minFontSize: e.value.style.chart.layout.labels.minFontSize,
-      sizeRef: bt,
-      labelClass: ".vue-ui-onion-label"
-    }), kt = d(() => e.value.debug);
-    let re = null;
-    function Re() {
-      if (Ze(w.dataset) && (me({
-        componentName: "VueUiOnion",
-        type: "dataset",
-        debug: kt.value
-      }), ae.value = !0), Ze(w.dataset) || (ae.value = e.value.loading), e.value.responsive) {
-        const l = aa(() => {
-          re && clearTimeout(re), O.value = !0;
-          let { width: a, height: o } = la({
-            chart: S.value,
-            title: e.value.style.chart.title.text ? we.value : null,
-            legend: e.value.style.chart.legend.show ? $e.value : null,
-            source: Te.value,
-            noTitle: Pe.value
-          });
-          o -= 12, requestAnimationFrame(async () => {
-            n.value.width = a, n.value.height = o, n.value.padding.top = Math.max(a, o) * 0.125, n.value.padding.right = Math.max(a, o) * 0.125, n.value.padding.bottom = Math.max(a, o) * 0.125, n.value.padding.left = Math.max(a, o) * 0.125, n.value.minRadius = Math.min(a, o) * 0.125, re = setTimeout(() => {
-              O.value = !1, Me();
-            }, 0);
-          });
-        });
-        A.value && (z.value && A.value.unobserve(z.value), A.value.disconnect()), A.value = new ResizeObserver(l), z.value = S.value.parentNode, A.value.observe(z.value);
-      }
-      requestAnimationFrame(Me);
-    }
-    Yt(() => {
-      A.value && (z.value && A.value.unobserve(z.value), A.value.disconnect());
-    });
-    const f = 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
-    })), p = d(() => (Ie.value.forEach((t, l) => {
-      [null, void 0].includes(t.name) && me({
-        componentName: "VueUiOnion",
-        type: "datasetSerieAttribute",
-        property: "name",
-        index: l
-      }), [void 0].includes(t.percentage) && me({
-        componentName: "VueUiOnion",
-        type: "datasetSerieAttribute",
-        property: "percentage",
-        index: l
-      });
-    }), Ie.value.map((t, l) => {
-      const a = `onion_serie_${l}_${P.value}`;
-      return {
-        ...t,
-        percentage: t.percentage || 0,
-        targetPercentage: t.percentage || 0,
-        color: Jt(t.color) || yt.value[l] || Qe[l],
-        id: a,
-        shape: "circle",
-        opacity: h.value.includes(a) ? 0.5 : 1,
-        absoluteIndex: l,
-        segregate: () => q(a),
-        isSegregated: h.value.includes(a)
-      };
-    }))), V = d(() => p.value.map((t, l) => {
-      const a = e.value.style.chart.legend.showValue, o = e.value.style.chart.legend.showPercentage, c = ye(
-        e.value.style.chart.layout.labels.value.formatter,
-        t.value,
-        B({
-          p: t.prefix || "",
-          v: t.value,
-          s: t.suffix || "",
-          r: e.value.style.chart.legend.roundingValue
-        })
-      ), b = B({
-        v: t.percentage ?? 0,
-        s: "%",
-        r: e.value.style.chart.legend.roundingPercentage
-      }), he = ve({
-        showVal: a,
-        showPercentage: o,
-        val: c,
-        percentage: b,
-        config: e.value.style.chart.legend
-      });
-      return {
-        ...t,
-        display: `${t.name}${a || o ? ": " : ""}${he}`
-      };
-    })), U = u(p.value), Ct = d(() => e.value.useStartAnimation), wt = u(null), $t = d(() => Math.max(...p.value.map((t) => t.percentage))), ue = u(!1);
-    Y(() => p.value, ze, { immediate: !0, deep: !0 }), Y(() => w.dataset, (t) => {
-      Array.isArray(t) && t.length > 0 && (ae.value = !1);
-    }, { deep: !0 });
-    function ze() {
-      if (Ct.value && !ue.value && !$.value) {
-        let l = function() {
-          t >= $t.value ? (cancelAnimationFrame(wt.value), U.value = p.value, ue.value = !0) : (U.value = p.value.map((a) => ({
-            ...a,
-            percentage: t < a.targetPercentage ? t : a.targetPercentage
-          })), t += 1, requestAnimationFrame(l), ue.value = !0);
-        };
-        U.value = p.value.map((a) => ({
-          ...a,
-          percentage: 0
-        }));
-        let t = 0;
-        l();
-      } else
-        U.value = p.value;
-    }
-    const Tt = 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" : ""
-    })), Pt = d(() => p.value.filter((t) => !h.value.includes(t.id)).length), M = d(() => {
-      const t = Math.min(f.value.width, f.value.height) / 2 / p.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
-      };
-    }), T = d(() => U.value.filter((t) => !h.value.includes(t.id)).map((t, l) => {
-      const a = (f.value.maxRadius - M.value.track) / Pt.value / 2 * (1 + l), o = f.value.centerY - a;
-      return {
-        percentage: t.percentage || 0,
-        ...t,
-        labelY: o,
-        radius: a,
-        path: St(a, t.percentage || 0)
-      };
-    }));
-    function St(t, l) {
-      const a = 2 * Math.PI * t, o = a * 0.75, c = `${o} ${a}`, b = o * (1 - l / 100);
-      return {
-        bgDashArray: `${o} ${a}`,
-        bgDashOffset: 0,
-        dashArray: c,
-        dashOffset: b,
-        fullOffset: 0,
-        active: `
-            M ${f.value.centerX},${f.value.centerY - t} 
-            A ${t},${t} 0 1 1 
-            ${f.value.centerX + t * Math.cos(Math.PI * 3 / 4)},${f.value.centerY + t * Math.sin(Math.PI * 3 / 4)}
-        `.trim()
-      };
-    }
-    const Be = lt;
-    function Ot() {
-      h.value.length ? h.value = [] : V.value.forEach((t) => {
-        h.value.push(t.id);
-      });
-    }
-    function q(t) {
-      if (h.value.includes(t))
-        h.value = h.value.filter((l) => l !== t);
-      else {
-        if (h.value.length === p.value.length - 1) return;
-        h.value.push(t);
-      }
-      Be("selectLegend", T.value);
-    }
-    function Ne(t) {
-      if (!p.value.length)
-        return e.value.debug && console.warn("VueUiOnion - There are no series to show."), null;
-      const l = p.value.find((a) => a.name === t);
-      return l || (e.value.debug && console.warn(`VueUiOnion - Series name not found "${t}"`), null);
-    }
-    function xt(t) {
-      const l = Ne(t);
-      l !== null && h.value.includes(l.id) && q(l.id);
-    }
-    function At(t) {
-      const l = Ne(t);
-      l !== null && (h.value.includes(l.id) || q(l.id));
-    }
-    function It() {
-      return T.value;
-    }
-    const ie = d(() => {
-      const t = [e.value.table.translations.serie, e.value.table.translations.percentage, e.value.table.translations.value], l = T.value.map((a) => [
-        a.name,
-        a.percentage,
-        a.value
-      ]);
-      return { head: t, body: l };
-    }), J = d(() => {
-      const t = ie.value.head, l = T.value.map((o) => [
-        `<span style="color:${o.color}">⬤</span> ${o.name}`,
-        `${Number(o.percentage ?? 0).toFixed(e.value.table.td.roundingPercentage).toLocaleString()}%`,
-        `${o.prefix || ""}${[null, void 0, NaN, "NaN"].includes(o.value) ? "-" : o.value.toFixed(e.value.table.td.roundingValue).toLocaleString()}${o.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: l, config: a, colNames: t };
-    });
-    function ce(t = null) {
-      pe(() => {
-        const l = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [""]], a = ie.value.head, o = ie.value.body, c = l.concat([a]).concat(o), b = Qt(c);
-        t ? t(b) : Zt({ csvContent: b, title: e.value.style.chart.title.text || "vue-ui-onion" });
-      });
-    }
-    const I = u(void 0), R = u(!1);
-    function Ve(t) {
-      R.value = t, Ce.value += 1;
-    }
-    function Ue({ datapoint: t }) {
-      e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: t, seriesIndex: t.absoluteIndex });
-    }
-    function Ee({ datapoint: t }) {
-      I.value = void 0, ee.value = !1, e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: t, seriesIndex: t.absoluteIndex });
-    }
-    function ve({
-      val: t,
-      percentage: l,
-      showVal: a,
-      showPercentage: o,
-      config: c
-    }) {
-      return ta({
-        config: c,
-        val: t,
-        percentage: l,
-        showVal: a,
-        showPercentage: o
-      });
-    }
-    function Dt(t, l) {
-      const a = e.value.style.chart.layout.labels.value.show, o = e.value.style.chart.layout.labels.percentage.show, c = ve({
-        config: e.value.style.chart.layout.labels,
-        showVal: a,
-        showPercentage: o,
-        val: ye(
-          e.value.style.chart.layout.labels.value.formatter,
-          t.value,
-          B({
-            p: t.prefix || "",
-            v: t.value || 0,
-            s: t.suffix || "",
-            r: e.value.style.chart.layout.labels.roundingValue
-          }),
-          { datapoint: t, seriesIndex: l }
-        ),
-        percentage: B({
-          v: t.percentage,
-          s: "%",
-          r: e.value.style.chart.layout.labels.roundingPercentage
-        })
-      });
-      return `${t.name}${a || o ? ": " : ""}${c}`;
-    }
-    const de = u(null);
-    function Ye({ datapoint: t, seriesIndex: l, show: a = !0 }) {
-      e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: t, seriesIndex: t.absoluteIndex });
-      const o = t.absoluteIndex;
-      I.value = l, de.value = {
-        datapoint: t,
-        seriesIndex: o,
-        series: p.value,
-        config: e.value
-      }, ee.value = a;
-      let c = "";
-      const b = e.value.style.chart.tooltip.customFormat;
-      if (et(b) && ea(() => b({
-        seriesIndex: o,
-        datapoint: t,
-        series: p.value,
-        config: e.value
-      })))
-        te.value = b({
-          seriesIndex: o,
-          datapoint: t,
-          series: p.value,
-          config: e.value
-        });
-      else {
-        const he = e.value.style.chart.tooltip.showPercentage, Vt = e.value.style.chart.tooltip.showValue;
-        c += `<div style="width:100%;text-align:center;border-bottom:1px solid ${e.value.style.chart.tooltip.borderColor};padding-bottom:6px;margin-bottom:3px;">${t.name}</div>`, c += `<div style="display:flex;flex-direction:row;gap:6px;align-items:center;"><svg viewBox="0 0 60 60" height="14" width="14"><circle cx="30" cy="30" r="30" stroke="none" fill="${t.color}"/></svg>`, c += `<b>${ve({
-          config: e.value.style.chart.tooltip,
-          showVal: Vt,
-          showPercentage: he,
-          val: `<span>${ye(
-            e.value.style.chart.layout.labels.value.formatter,
-            t.value,
-            B({
-              p: t.prefix || "",
-              v: t.value,
-              s: t.suffix || "",
-              r: e.value.style.chart.tooltip.roundingValue
-            }),
-            {
-              datapoint: t,
-              seriesIndex: l
-            }
-          )}</span>`,
-          percentage: B({
-            v: t.percentage,
-            s: "%",
-            r: e.value.style.chart.tooltip.roundingPercentage
-          })
-        })}</b></div>`, te.value = `<div>${c}</div>`;
-      }
-    }
-    function Xe() {
-      y.value.showTable = !y.value.showTable;
-    }
-    function Ge() {
-      y.value.showTooltip = !y.value.showTooltip;
-    }
-    const K = u(!1);
-    function ge() {
-      K.value = !K.value;
-    }
-    async function Ft({ scale: t = 2 } = {}) {
-      if (!S.value) return;
-      const { width: l, height: a } = S.value.getBoundingClientRect(), o = l / a, { imageUri: c, base64: b } = await ga({ domElement: S.value, base64: !0, img: !0, scale: t });
-      return {
-        imageUri: c,
-        base64: b,
-        title: e.value.style.chart.title.text,
-        width: l,
-        height: a,
-        aspectRatio: o
-      };
-    }
-    const E = d(() => {
-      const t = e.value.table.useDialog && !e.value.table.show, l = y.value.showTable;
-      return {
-        component: t ? vt : st,
-        title: `${e.value.style.chart.title.text}${e.value.style.chart.title.subtitle.text ? `: ${e.value.style.chart.title.subtitle.text}` : ""}`,
-        props: t ? {
-          backgroundColor: e.value.table.th.backgroundColor,
-          color: e.value.table.th.color,
-          headerColor: e.value.table.th.color,
-          headerBg: e.value.table.th.backgroundColor,
-          isFullscreen: R.value,
-          fullscreenParent: S.value,
-          forcedWidth: Math.min(600, window.innerWidth * 0.8),
-          isCursorPointer: L.value
-        } : {
-          hideDetails: !0,
-          config: {
-            open: l,
-            maxHeight: 1e4,
-            body: {
-              backgroundColor: e.value.style.chart.backgroundColor,
-              color: e.value.style.chart.color
-            },
-            head: {
-              backgroundColor: e.value.style.chart.backgroundColor,
-              color: e.value.style.chart.color
-            }
-          }
-        }
-      };
-    });
-    Y(() => y.value.showTable, (t) => {
-      e.value.table.show || (t && e.value.table.useDialog && N.value ? N.value.open() : "close" in N.value && N.value.close());
-    });
-    const _t = d(() => V.value.map((t) => ({
-      ...t,
-      name: t.display
-    }))), Lt = d(() => e.value.style.chart.backgroundColor), Mt = d(() => e.value.style.chart.legend), Rt = d(() => e.value.style.chart.title), { exportSvg: zt, getSvg: Bt } = ua({
-      svg: j,
-      title: Rt,
-      legend: Mt,
-      legendItems: _t,
-      backgroundColor: Lt
-    });
-    async function He({ isCb: t }) {
-      W.value = !0, await pe();
-      try {
-        if (t) {
-          const { blob: l, url: a, text: o, dataUrl: c } = await Bt();
-          await Promise.resolve(e.value.userOptions.callbacks.svg({ blob: l, url: a, text: o, dataUrl: c }));
-        } else
-          await Promise.resolve(zt());
-      } finally {
-        W.value = !1;
-      }
-    }
-    function Nt(t) {
-      if (t?.stage === "start") {
-        H.value = !0;
-        return;
-      }
-      if (t?.stage === "end") {
-        H.value = !1;
-        return;
-      }
-      Le();
-    }
-    async function We() {
-      if (Be("copyAlt", {
-        config: e.value,
-        dataset: T.value
-      }), !e.value.userOptions.callbacks.altCopy) {
-        console.warn("Vue Data UI - A callback must be set for `altCopy` in userOptions.");
-        return;
-      }
-      await Promise.resolve(e.value.userOptions.callbacks.altCopy({
-        config: e.value,
-        dataset: T.value
-      }));
-    }
-    return at({
-      getData: It,
-      getImage: Ft,
-      generatePdf: _e,
-      generateCsv: ce,
-      generateImage: Le,
-      generateSvg: He,
-      hideSeries: At,
-      showSeries: xt,
-      toggleTable: Xe,
-      toggleTooltip: Ge,
-      toggleAnnotator: ge,
-      toggleFullscreen: Ve,
-      copyAlt: We
-    }), (t, l) => (r(), g("div", {
-      class: Q(`vue-data-ui-component vue-ui-onion ${R.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${e.value.useCssAnimation ? "" : "vue-ui-dna"}`),
-      ref_key: "onionChart",
-      ref: S,
-      id: `vue-ui-onion_${P.value}`,
-      style: F(`font-family:${e.value.style.fontFamily};width:100%; ${e.value.responsive ? "height: 100%;" : ""} text-align:center;background:${e.value.style.chart.backgroundColor}`),
-      onMouseenter: l[4] || (l[4] = () => s(De)(!0)),
-      onMouseleave: l[5] || (l[5] = () => s(De)(!1))
-    }, [
-      e.value.userOptions.buttons.annotator ? (r(), x(s(it), {
-        key: 0,
-        svgRef: s(j),
-        backgroundColor: e.value.style.chart.backgroundColor,
-        color: e.value.style.chart.color,
-        active: K.value,
-        isCursorPointer: L.value,
-        onClose: ge
-      }, {
-        "annotator-action-close": i(() => [
-          v(t.$slots, "annotator-action-close", {}, void 0, !0)
-        ]),
-        "annotator-action-color": i(({ color: a }) => [
-          v(t.$slots, "annotator-action-color", k(C({ color: a })), void 0, !0)
-        ]),
-        "annotator-action-draw": i(({ mode: a }) => [
-          v(t.$slots, "annotator-action-draw", k(C({ mode: a })), void 0, !0)
-        ]),
-        "annotator-action-undo": i(({ disabled: a }) => [
-          v(t.$slots, "annotator-action-undo", k(C({ disabled: a })), void 0, !0)
-        ]),
-        "annotator-action-redo": i(({ disabled: a }) => [
-          v(t.$slots, "annotator-action-redo", k(C({ disabled: a })), void 0, !0)
-        ]),
-        "annotator-action-delete": i(({ disabled: a }) => [
-          v(t.$slots, "annotator-action-delete", k(C({ disabled: a })), void 0, !0)
-        ]),
-        _: 3
-      }, 8, ["svgRef", "backgroundColor", "color", "active", "isCursorPointer"])) : m("", !0),
-      mt.value ? (r(), g("div", {
-        key: 1,
-        ref_key: "noTitle",
-        ref: Pe,
-        class: "vue-data-ui-no-title-space",
-        style: "height:36px; width: 100%;background:transparent"
-      }, null, 512)) : m("", !0),
-      e.value.style.chart.title.text ? (r(), g("div", {
-        key: 2,
-        ref_key: "chartTitle",
-        ref: we,
-        style: "width:100%;background:transparent"
-      }, [
-        (r(), x(ha, {
-          key: `title_${Se.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)) : m("", !0),
-      _("div", {
-        id: `legend-top-${P.value}`
-      }, null, 8, ka),
-      e.value.userOptions.show && ke.value && (s(Fe) || s(le)) ? (r(), x(s(ut), {
-        ref_key: "details",
-        ref: ft,
-        key: `user_options${Ce.value}`,
-        backgroundColor: e.value.style.chart.backgroundColor,
-        color: e.value.style.chart.color,
-        isImaging: s(se),
-        isPrinting: s(ne),
-        uid: P.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,
-        hasSvg: e.value.userOptions.buttons.svg,
-        hasXls: e.value.userOptions.buttons.csv,
-        hasTable: e.value.userOptions.buttons.table,
-        hasFullscreen: e.value.userOptions.buttons.fullscreen,
-        hasAltCopy: e.value.userOptions.buttons.altCopy,
-        isFullscreen: R.value,
-        isTooltip: y.value.showTooltip,
-        titles: { ...e.value.userOptions.buttonTitles },
-        chartElement: S.value,
-        position: e.value.userOptions.position,
-        hasAnnotator: e.value.userOptions.buttons.annotator,
-        isAnnotation: K.value,
-        callbacks: e.value.userOptions.callbacks,
-        printScale: e.value.userOptions.print.scale,
-        tableDialog: e.value.table.useDialog,
-        isCursorPointer: L.value,
-        onToggleFullscreen: Ve,
-        onGeneratePdf: s(_e),
-        onGenerateCsv: ce,
-        onGenerateImage: Nt,
-        onGenerateSvg: He,
-        onToggleTable: Xe,
-        onToggleTooltip: Ge,
-        onToggleAnnotator: ge,
-        onCopyAlt: We,
-        style: F({
-          visibility: s(Fe) ? s(le) ? "visible" : "hidden" : "visible"
-        })
-      }, qe({ _: 2 }, [
-        t.$slots.menuIcon ? {
-          name: "menuIcon",
-          fn: i(({ isOpen: a, color: o }) => [
-            v(t.$slots, "menuIcon", k(C({ isOpen: a, color: o })), void 0, !0)
-          ]),
-          key: "0"
-        } : void 0,
-        t.$slots.optionTooltip ? {
-          name: "optionTooltip",
-          fn: i(() => [
-            v(t.$slots, "optionTooltip", {}, void 0, !0)
-          ]),
-          key: "1"
-        } : void 0,
-        t.$slots.optionPdf ? {
-          name: "optionPdf",
-          fn: i(() => [
-            v(t.$slots, "optionPdf", {}, void 0, !0)
-          ]),
-          key: "2"
-        } : void 0,
-        t.$slots.optionCsv ? {
-          name: "optionCsv",
-          fn: i(() => [
-            v(t.$slots, "optionCsv", {}, void 0, !0)
-          ]),
-          key: "3"
-        } : void 0,
-        t.$slots.optionImg ? {
-          name: "optionImg",
-          fn: i(() => [
-            v(t.$slots, "optionImg", {}, void 0, !0)
-          ]),
-          key: "4"
-        } : void 0,
-        t.$slots.optionSvg ? {
-          name: "optionSvg",
-          fn: i(() => [
-            v(t.$slots, "optionSvg", {}, void 0, !0)
-          ]),
-          key: "5"
-        } : void 0,
-        t.$slots.optionTable ? {
-          name: "optionTable",
-          fn: i(() => [
-            v(t.$slots, "optionTable", {}, void 0, !0)
-          ]),
-          key: "6"
-        } : void 0,
-        t.$slots.optionFullscreen ? {
-          name: "optionFullscreen",
-          fn: i(({ toggleFullscreen: a, isFullscreen: o }) => [
-            v(t.$slots, "optionFullscreen", k(C({ toggleFullscreen: a, isFullscreen: o })), void 0, !0)
-          ]),
-          key: "7"
-        } : void 0,
-        t.$slots.optionAnnotator ? {
-          name: "optionAnnotator",
-          fn: i(({ toggleAnnotator: a, isAnnotator: o }) => [
-            v(t.$slots, "optionAnnotator", k(C({ toggleAnnotator: a, isAnnotator: o })), void 0, !0)
-          ]),
-          key: "8"
-        } : void 0,
-        t.$slots.optionAltCopy ? {
-          name: "optionAltCopy",
-          fn: i(({ altCopy: a }) => [
-            v(t.$slots, "optionAltCopy", k(C({ altCopy: a })), void 0, !0)
-          ]),
-          key: "9"
-        } : void 0
-      ]), 1032, ["backgroundColor", "color", "isImaging", "isPrinting", "uid", "hasTooltip", "hasPdf", "hasImg", "hasSvg", "hasXls", "hasTable", "hasFullscreen", "hasAltCopy", "isFullscreen", "isTooltip", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "tableDialog", "isCursorPointer", "onGeneratePdf", "style"])) : m("", !0),
-      (r(), g("svg", {
-        ref_key: "svgRef",
-        ref: j,
-        xmlns: s(Kt),
-        class: Q({ "vue-data-ui-fullscreen--on": R.value, "vue-data-ui-fulscreen--off": !R.value, resizing: O.value }),
-        viewBox: `0 0 ${n.value.width <= 0 ? 10 : n.value.width} ${n.value.height <= 0 ? 10 : n.value.height}`,
-        style: F(`max-width:100%;overflow:visible;background:transparent;color:${e.value.style.chart.color}`)
-      }, [
-        fe(s(ct)),
-        t.$slots["chart-background"] ? (r(), g("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"
-          }
-        }, [
-          v(t.$slots, "chart-background", {}, void 0, !0)
-        ], 8, wa)) : m("", !0),
-        (r(!0), g(X, null, G(T.value, (a, o) => (r(), g("circle", {
-          cx: f.value.centerX,
-          cy: f.value.centerY,
-          r: a.radius <= 0 ? 1e-4 : a.radius,
-          stroke: e.value.style.chart.layout.gutter.color,
-          "stroke-width": M.value.gutter,
-          fill: "none",
-          "stroke-dasharray": a.path.bgDashArray,
-          "stroke-dashoffset": a.path.fullOffset,
-          "stroke-linecap": "round",
-          class: Q({ "vue-ui-onion-path": !0, "vue-ui-onion-blur": e.value.useBlurOnHover && ![null, void 0].includes(I.value) && I.value !== o }),
-          style: F({
-            transform: "rotate(-90deg)",
-            transformOrigin: "50% 50%",
-            transition: O.value || s($) ? "none" : "all 0.3s ease-in-out !important",
-            animation: O.value || s($) ? "none" : "xyAnimation 0.5s ease-in"
-          })
-        }, null, 14, $a))), 256)),
-        (r(!0), g(X, null, G(T.value, (a, o) => (r(), g("circle", {
-          cx: f.value.centerX,
-          cy: f.value.centerY,
-          r: a.radius < 0 ? 1e-4 : a.radius,
-          stroke: `${a.color}`,
-          "stroke-width": M.value.track,
-          fill: "none",
-          "stroke-dasharray": a.path.dashArray,
-          "stroke-dashoffset": a.path.dashOffset,
-          class: Q({ "vue-ui-onion-path": !0, "vue-ui-onion-blur": e.value.useBlurOnHover && ![null, void 0].includes(I.value) && I.value !== o }),
-          "stroke-linecap": "round",
-          style: F({
-            transform: "rotate(-90deg)",
-            transformOrigin: "50% 50%",
-            transition: O.value || s($) ? "none" : "all 0.3s ease-in-out !important",
-            animation: O.value || s($) ? "none" : "xyAnimation 0.5s ease-in"
-          })
-        }, null, 14, Ta))), 256)),
-        _("defs", null, [
-          _("filter", {
-            id: `blur_${P.value}`,
-            x: "-50%",
-            y: "-50%",
-            width: "200%",
-            height: "200%"
-          }, [
-            _("feGaussianBlur", {
-              in: "SourceGraphic",
-              stdDeviation: 100 / e.value.style.chart.gradientIntensity
-            }, null, 8, Sa)
-          ], 8, Pa)
-        ]),
-        e.value.style.chart.useGradient ? (r(), g("g", {
-          key: 1,
-          filter: `url(#blur_${P.value})`
-        }, [
-          (r(!0), g(X, null, G(T.value, (a, o) => (r(), g("circle", {
-            cx: f.value.centerX,
-            cy: f.value.centerY,
-            r: a.radius <= 0 ? 1e-4 : a.radius,
-            stroke: "white",
-            "stroke-width": M.value.track / 3,
-            fill: "none",
-            "stroke-linecap": "round",
-            "stroke-dasharray": a.path.dashArray,
-            "stroke-dashoffset": a.path.dashOffset,
-            style: F({
-              transform: "rotate(-90deg)",
-              transformOrigin: "50% 50%",
-              transition: O.value || s($) ? "none" : "all 0.3s ease-in-out !important",
-              animation: O.value || s($) ? "none" : "xyAnimation 0.5s ease-in"
-            })
-          }, null, 12, xa))), 256))
-        ], 8, Oa)) : m("", !0),
-        (r(!0), g(X, null, G(T.value, (a, o) => (r(), g("circle", {
-          cx: f.value.centerX,
-          cy: f.value.centerY,
-          r: a.radius <= 0 ? 1e-4 : a.radius,
-          stroke: "transparent",
-          "stroke-width": Math.max(M.value.track, M.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: (c) => Ye({
-            datapoint: a,
-            show: !0,
-            seriesIndex: o
-          }),
-          onMouseleave: (c) => Ee({ datapoint: a }),
-          onClick: (c) => Ue({ datapoint: a })
-        }, null, 40, Aa))), 256)),
-        e.value.style.chart.layout.labels.show ? (r(), g("g", Ia, [
-          (r(!0), g(X, null, G(T.value, (a, o) => (r(), g("g", {
-            onMouseenter: (c) => Ye({
-              datapoint: a,
-              show: !0,
-              seriesIndex: o
-            }),
-            onMouseleave: (c) => Ee({ datapoint: a }),
-            onClick: (c) => Ue({ datapoint: a })
-          }, [
-            h.value.includes(a.id) ? m("", !0) : (r(), g("text", {
-              key: 0,
-              class: "vue-ui-onion-label",
-              x: n.value.width / 2 - M.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(I.value) && I.value === o ? a.color : e.value.style.chart.layout.labels.color,
-              "font-weight": e.value.style.chart.layout.labels.bold ? "bold" : "normal"
-            }, Z(Dt(a, o)), 9, Fa))
-          ], 40, Da))), 256))
-        ])) : m("", !0),
-        v(t.$slots, "svg", {
-          svg: {
-            ...n.value,
-            isPrintingImg: s(ne) | s(se) | H.value,
-            isPrintingSvg: W.value
-          }
-        }, void 0, !0)
-      ], 14, Ca)),
-      t.$slots.watermark ? (r(), g("div", _a, [
-        v(t.$slots, "watermark", k(C({ isPrinting: s(ne) || s(se) || H.value || W.value })), void 0, !0)
-      ])) : m("", !0),
-      _("div", {
-        id: `legend-bottom-${P.value}`
-      }, null, 8, La),
-      Ae.value ? (r(), x(Xt, {
-        key: 5,
-        to: e.value.style.chart.legend.position === "top" ? `#legend-top-${P.value}` : `#legend-bottom-${P.value}`
-      }, [
-        _("div", {
-          ref_key: "chartLegend",
-          ref: $e
-        }, [
-          e.value.style.chart.legend.show ? (r(), x(fa, {
-            key: `legend_${xe.value}`,
-            legendSet: V.value,
-            config: Tt.value,
-            isCursorPointer: L.value,
-            onClickMarker: l[0] || (l[0] = ({ legend: a }) => q(a.id))
-          }, {
-            item: i(({ legend: a }) => [
-              s($) ? m("", !0) : (r(), g("div", {
-                key: 0,
-                "data-cy-legend-item": "",
-                onClick: (o) => a.segregate(),
-                style: F(`opacity:${h.value.includes(a.id) ? 0.5 : 1}`)
-              }, Z(a.display), 13, Ma))
-            ]),
-            legendToggle: i(() => [
-              V.value.length > 2 && e.value.style.chart.legend.selectAllToggle.show && !s($) ? (r(), x(ma, {
-                key: 0,
-                backgroundColor: e.value.style.chart.legend.selectAllToggle.backgroundColor,
-                color: e.value.style.chart.legend.selectAllToggle.color,
-                fontSize: e.value.style.chart.legend.fontSize,
-                checked: h.value.length > 0,
-                isCursorPointer: L.value,
-                onToggle: Ot
-              }, null, 8, ["backgroundColor", "color", "fontSize", "checked", "isCursorPointer"])) : m("", !0)
-            ]),
-            _: 1
-          }, 8, ["legendSet", "config", "isCursorPointer"])) : v(t.$slots, "legend", {
-            key: 1,
-            legend: V.value
-          }, void 0, !0)
-        ], 512)
-      ], 8, ["to"])) : m("", !0),
-      t.$slots.source ? (r(), g("div", {
-        key: 6,
-        ref_key: "source",
-        ref: Te,
-        dir: "auto"
-      }, [
-        v(t.$slots, "source", {}, void 0, !0)
-      ], 512)) : m("", !0),
-      fe(s(ot), {
-        teleportTo: e.value.style.chart.tooltip.teleportTo,
-        show: y.value.showTooltip && ee.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: S.value,
-        content: te.value,
-        isFullscreen: R.value,
-        isCustom: s(et)(e.value.style.chart.tooltip.customFormat),
-        smooth: e.value.style.chart.tooltip.smooth,
-        backdropFilter: e.value.style.chart.tooltip.backdropFilter,
-        smoothForce: e.value.style.chart.tooltip.smoothForce,
-        smoothSnapThreshold: e.value.style.chart.tooltip.smoothSnapThreshold
-      }, {
-        "tooltip-before": i(() => [
-          v(t.$slots, "tooltip-before", k(C({ ...de.value })), void 0, !0)
-        ]),
-        "tooltip-after": i(() => [
-          v(t.$slots, "tooltip-after", k(C({ ...de.value })), void 0, !0)
-        ]),
-        _: 3
-      }, 8, ["teleportTo", "show", "backgroundColor", "color", "borderRadius", "borderColor", "borderWidth", "fontSize", "backgroundOpacity", "position", "offsetY", "parent", "content", "isFullscreen", "isCustom", "smooth", "backdropFilter", "smoothForce", "smoothSnapThreshold"]),
-      ke.value && e.value.userOptions.buttons.table ? (r(), x(Gt(E.value.component), Ht({ key: 7 }, E.value.props, {
-        ref_key: "tableUnit",
-        ref: N,
-        onClose: l[3] || (l[3] = (a) => y.value.showTable = !1)
-      }), qe({
-        content: i(() => [
-          (r(), x(s(rt), {
-            key: `table_${Oe.value}`,
-            colNames: J.value.colNames,
-            head: J.value.head,
-            body: J.value.body,
-            config: J.value.config,
-            title: e.value.table.useDialog ? "" : E.value.title,
-            withCloseButton: !e.value.table.useDialog,
-            isCursorPointer: L.value,
-            onClose: l[2] || (l[2] = (a) => y.value.showTable = !1)
-          }, {
-            th: i(({ th: a }) => [
-              Je(Z(a), 1)
-            ]),
-            td: i(({ td: a }) => [
-              _("div", { innerHTML: a }, null, 8, Ra)
-            ]),
-            _: 1
-          }, 8, ["colNames", "head", "body", "config", "title", "withCloseButton", "isCursorPointer"]))
-        ]),
-        _: 2
-      }, [
-        e.value.table.useDialog ? {
-          name: "title",
-          fn: i(() => [
-            Je(Z(E.value.title), 1)
-          ]),
-          key: "0"
-        } : void 0,
-        e.value.table.useDialog ? {
-          name: "actions",
-          fn: i(() => [
-            _("button", {
-              tabindex: "0",
-              class: "vue-ui-user-options-button",
-              onClick: l[1] || (l[1] = (a) => ce(e.value.userOptions.callbacks.csv)),
-              style: F({ cursor: L.value ? "pointer" : "default" })
-            }, [
-              fe(s(nt), {
-                name: "fileCsv",
-                stroke: E.value.props.color
-              }, null, 8, ["stroke"])
-            ], 4)
-          ]),
-          key: "1"
-        } : void 0
-      ]), 1040)) : m("", !0),
-      v(t.$slots, "skeleton", {}, () => [
-        s($) ? (r(), x(sa, { key: 0 })) : m("", !0)
-      ], !0)
-    ], 46, ba));
-  }
-}, ll = /* @__PURE__ */ ya(za, [["__scopeId", "data-v-9f33c2d6"]]);
-export {
-  ll as default
-};