vue-data-ui 3.17.13 → 3.18.1

package/dist/vue-ui-circle-pack-CQ8vF2XH.js

@@ -1,1076 +0,0 @@
-import { defineAsyncComponent as U, computed as w, ref as r, toRefs as Ut, watch as fe, onMounted as Vt, onBeforeUnmount as Gt, openBlock as d, createElementBlock as C, unref as v, normalizeStyle as ae, normalizeClass as _e, createElementVNode as O, toDisplayString as ne, createBlock as K, createCommentVNode as x, withCtx as m, renderSlot as c, normalizeProps as P, guardReactiveProps as S, createSlots as vt, createVNode as Oe, Fragment as W, renderList as Fe, mergeProps as pe, resolveDynamicComponent as Kt, createTextVNode as ct, nextTick as dt } from "vue";
-import { u as Yt } from "./useConfig-CG4HT3wS.js";
-import { j as ft, t as pt, m as De, p as he, o as jt, q as Xt, n as qt, s as Wt, l as ht, X as Ht, x as Zt, w as Jt, W as Ie, d as Qt, a0 as eo, a1 as to, T as oo, k as lo, a3 as ao } from "./lib-DMzrGQHK.js";
-import { u as no } from "./usePrinter-C4t8DdQ-.js";
-import { u as so, B as uo } from "./BaseScanner-C2j3TsSY.js";
-import { u as ro } from "./useSvgExport-BTG4hVPO.js";
-import { u as Ne } from "./useNestedProp-DH0BEVVS.js";
-import { u as io } from "./useThemeCheck-C9Ccl7U9.js";
-import { u as vo } from "./useUserOptionState-B7Ej974k.js";
-import { u as co } from "./useChartAccessibility-cp6XQtqi.js";
-import { t as fo, u as po } from "./useResponsive-DfdjqQps.js";
-import ho from "./img-CjTQXS0U.js";
-import yo from "./Title-BbKoiBk2.js";
-import bo from "./vue_ui_circle_pack-CLmw8nHe.js";
-import { A as mo } from "./A11yDataTable-BpmuNomI.js";
-import { _ as go } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-function ko(i, f = 0) {
-  const y = i.reduce(
-    (a, { x: s, r: h }) => Math.min(a, s - h - f),
-    1 / 0
-  ), g = i.reduce(
-    (a, { x: s, r: h }) => Math.max(a, s + h + f),
-    -1 / 0
-  ), p = i.reduce(
-    (a, { y: s, r: h }) => Math.min(a, s - h - f),
-    1 / 0
-  ), n = i.reduce(
-    (a, { y: s, r: h }) => Math.max(a, s + h + f),
-    -1 / 0
-  );
-  return [y, p, g - y, n - p];
-}
-function Co(i, f, y) {
-  const g = i._, p = i.next._, n = g.r + p.r, a = (g.x * p.r + p.x * g.r) / n, s = (g.y * p.r + p.y * g.r) / n;
-  return Math.max(Math.abs(a * y), Math.abs(s * f));
-}
-function wo(i, f, y) {
-  const g = Co, p = i.length;
-  if (!p) return i;
-  let n, a, s;
-  if (n = i[0], n.x = 0, n.y = 0, !(p > 1) || (a = i[1], n.x = -a.r, a.x = n.r, a.y = 0, !(p > 2))) return i;
-  yt(a, n, s = i[2]), n = new ye(n), a = new ye(a), s = new ye(s), n.next = s.previous = a, a.next = n.previous = s, s.next = a.previous = n;
-  e: for (let h = 3; h < p; ++h) {
-    yt(n._, a._, s = i[h]), s = new ye(s);
-    let T = a.next, B = n.previous, A = a._.r, H = n._.r;
-    do
-      if (A <= H) {
-        if (bt(T._, s._)) {
-          a = T, n.next = a, a.previous = n, --h;
-          continue e;
-        }
-        A += T._.r, T = T.next;
-      } else {
-        if (bt(B._, s._)) {
-          n = B, n.next = a, a.previous = n, --h;
-          continue e;
-        }
-        H += B._.r, B = B.previous;
-      }
-    while (T !== B.next);
-    s.previous = n, s.next = a, n.next = a.previous = a = s;
-    let se = g(n, y, f), ue;
-    for (; (s = s.next) !== a; )
-      (ue = g(s, y, f)) < se && (n = s, se = ue);
-    a = n.next;
-  }
-  return i;
-}
-function yt(i, f, y) {
-  const g = i.x - f.x, p = i.y - f.y, n = g * g + p * p;
-  if (n) {
-    const a = (f.r + y.r) ** 2, s = (i.r + y.r) ** 2;
-    if (a > s) {
-      const h = (n + s - a) / (2 * n), T = Math.sqrt(Math.max(0, s / n - h * h));
-      y.x = i.x - h * g - T * p, y.y = i.y - h * p + T * g;
-    } else {
-      const h = (n + a - s) / (2 * n), T = Math.sqrt(Math.max(0, a / n - h * h));
-      y.x = f.x + h * g - T * p, y.y = f.y + h * p + T * g;
-    }
-  } else
-    y.x = f.x + y.r, y.y = f.y;
-}
-function bt(i, f) {
-  const y = i.r + f.r - 1e-6, g = f.x - i.x, p = f.y - i.y;
-  return y > 0 && y * y > g * g + p * p;
-}
-class ye {
-  constructor(f) {
-    this._ = f, this.next = null, this.previous = null;
-  }
-}
-const $o = ["id"], xo = ["id"], To = ["xmlns", "aria-describedby", "viewBox"], Po = ["x", "y", "width", "height"], So = ["id"], Ao = ["stop-color"], _o = ["stop-color"], Oo = ["stop-color"], Fo = { key: 0 }, Do = ["x", "y", "width", "height", "stroke", "stroke-width", "fill", "rx", "onMouseenter", "onMouseout", "onClick"], Io = ["x", "y", "width", "height", "stroke", "stroke-width", "fill", "rx"], No = ["x", "y", "width", "height", "fill", "rx"], Mo = ["x", "y", "font-size", "fill", "font-weight"], Ro = ["x", "y", "font-size", "fill", "font-weight"], Bo = {
-  key: 0,
-  style: { position: "absolute", top: "100%", left: "0", width: "100%" },
-  "data-dom-to-png-ignore": "",
-  "aria-hidden": "true"
-}, Eo = {
-  key: 5,
-  class: "vue-data-ui-watermark"
-}, zo = ["innerHTML"], Lo = {
-  __name: "vue-ui-circle-pack",
-  props: {
-    config: {
-      type: Object,
-      default() {
-        return {};
-      }
-    },
-    dataset: {
-      type: Array,
-      default() {
-        return [];
-      }
-    }
-  },
-  emits: ["selectDatapoint", "copyAlt"],
-  setup(i, { expose: f, emit: y }) {
-    const g = U(() => import("./Tooltip-Cvt7Fi0Q.js")), p = U(() => import("./BaseIcon-DX0hTWa-.js")), n = U(() => import("./vue-ui-accordion-DFtpH_16.js")), a = U(() => import("./DataTable-cMnb68Ik.js")), s = U(
-      () => import("./UserOptions-DVduN6X7.js")
-    ), h = U(
-      () => import("./PenAndPaper-CJDoB5H9.js")
-    ), T = U(
-      () => import("./PackageVersion-BfrCAH6_.js")
-    ), B = U(
-      () => import("./BaseDraggableDialog-Di8Hlru3.js")
-    ), A = i, H = y, { vue_ui_circle_pack: se } = Yt(), { isThemeValid: ue, warnInvalidTheme: mt } = io(), Me = w(() => !!A.dataset && A.dataset.length), M = r(ft()), F = r(null), Re = r(null), Be = r(null), Ee = r(0), ze = r(0), Le = r(0), Ue = r(null), Y = r(null), be = r(null), re = r(!1), me = r(""), I = r(null), ie = r(!1), ve = r(!1), _ = r(null), Ve = r({ x: 0, y: 0 }), Z = r("pointer"), ge = r(!1), e = r(Ce()), J = w(
-      () => e.value.userOptions.useCursorPointer
-    ), gt = w(() => pt({
-      defaultConfig: {
-        userOptions: { show: !1 },
-        table: { show: !1 },
-        style: {
-          chart: {
-            backgroundColor: "#99999930",
-            circles: {
-              stroke: "#6A6A6A",
-              labels: {
-                name: { show: !1 },
-                value: { show: !1 }
-              }
-            }
-          }
-        }
-      },
-      userConfig: e.value.skeletonConfig ?? {}
-    })), { loading: Ge, FINAL_DATASET: Ke } = so({
-      ...Ut(A),
-      FINAL_CONFIG: e,
-      prepareConfig: Ce,
-      skeletonDataset: A.config?.skeletonDataset ?? [
-        { name: "_", value: 13, color: "#F2F2F2" },
-        { name: "_", value: 8, color: "#DBDBDB" },
-        { name: "_", value: 5, color: "#ADADAD" },
-        { name: "_", value: 3, color: "#969696" },
-        { name: "_", value: 2, color: "#808080" },
-        { name: "_", value: 1, color: "#696969" }
-      ],
-      skeletonConfig: pt({
-        defaultConfig: e.value,
-        userConfig: gt.value
-      })
-    }), { svgRef: N } = co({
-      config: e.value.style.chart.title
-    }), { userOptionsVisible: ke, setUserOptionsVisibility: Ye, keepUserOptionState: je } = vo({ config: e.value });
-    function Ce() {
-      const t = Ne({
-        userConfig: A.config,
-        defaultConfig: se
-      }), l = t.theme;
-      if (!l) return t;
-      if (!ue.value(t))
-        return mt(t), t;
-      const o = Ne({
-        userConfig: bo[l] || A.config,
-        defaultConfig: t
-      }), u = Ne({
-        userConfig: A.config,
-        defaultConfig: o
-      });
-      return {
-        ...u,
-        customPalette: u.customPalette.length ? u.customPalette : De[l] || he
-      };
-    }
-    fe(
-      () => A.config,
-      (t) => {
-        e.value = Ce(), ke.value = !e.value.userOptions.showOnChartHover, xe(), Ee.value += 1, ze.value += 1, D.value.showTable = e.value.table.show;
-      },
-      { deep: !0 }
-    );
-    const { isPrinting: we, isImaging: $e, generatePdf: Xe, generateImage: qe } = no({
-      elementId: `vue-ui-circle-pack_${M.value}`,
-      fileName: e.value.style.chart.title.text || "vue-ui-circle-pack",
-      options: e.value.userOptions.print
-    }), kt = w(() => e.value.userOptions.show && !e.value.style.chart.title.text), D = r({
-      showTable: e.value.table.show,
-      showTooltip: e.value.style.chart.tooltip.show
-    });
-    fe(
-      e,
-      () => {
-        D.value = {
-          showTable: e.value.table.show,
-          showTooltip: e.value.style.chart.tooltip.show
-        };
-      },
-      { immediate: !0 }
-    );
-    const Ct = r({ h: 10, w: 10 }), We = r([0, 0, 100, 100]), wt = w(() => e.value.debug), $t = w(() => {
-      const t = e.value.style?.chart || {};
-      return t.dimensions && typeof t.dimensions.width == "number" ? t.dimensions.width : typeof t.width == "number" ? t.width : 300;
-    }), xt = w(() => {
-      const t = e.value.style?.chart || {};
-      return t.dimensions && typeof t.dimensions.height == "number" ? t.dimensions.height : typeof t.height == "number" ? t.height : 300;
-    }), $ = r([]), E = r("0 0 100 100"), R = r(null), z = r(null);
-    function He(t, l) {
-      Ct.value = {
-        w: t,
-        h: l
-      };
-      const o = V.value.map((q) => ({ ...q }));
-      if (!o.length) {
-        $.value = [], We.value = [0, 0, t, l], E.value = `0 0 ${t} ${l}`;
-        return;
-      }
-      const u = wo(o, l, t), [b, k, L, X] = ko(u, 1), le = Math.min(
-        L ? t / L : 1,
-        X ? l / X : 1
-      ), zt = (t - L * le) / 2, Lt = (l - X * le) / 2;
-      $.value = u.map((q) => ({
-        ...q,
-        x: (q.x - b) * le + zt,
-        y: (q.y - k) * le + Lt,
-        r: q.r * le
-      })), We.value = [0, 0, t, l], E.value = `0 0 ${t} ${l}`;
-    }
-    function Tt() {
-      if (!e.value.responsive || !F.value) return;
-      const t = fo(() => {
-        const { width: l, height: o } = po({
-          chart: F.value,
-          title: e.value.style.chart.title.text ? Re.value : null,
-          legend: null,
-          source: Ue.value,
-          noTitle: Be.value
-        });
-        requestAnimationFrame(() => {
-          !l || !o || (N.value && (N.value.setAttribute("width", l), N.value.setAttribute("height", o)), He(l, o));
-        });
-      });
-      R.value && (z.value && R.value.unobserve(z.value), R.value.disconnect()), R.value = new ResizeObserver(t), z.value = F.value.parentNode || F.value, z.value && R.value.observe(z.value), t();
-    }
-    function Ze() {
-      R.value && (z.value && R.value.unobserve(z.value), R.value.disconnect(), R.value = null, z.value = null);
-    }
-    async function xe() {
-      jt(A.dataset) && Xt({
-        componentName: "VueUiCirclePack",
-        type: "dataset",
-        debug: wt.value
-      });
-      const t = $t.value, l = xt.value;
-      He(t, l), e.value.responsive ? Tt() : Ze();
-    }
-    Vt(xe), Gt(() => {
-      Ze();
-    }), fe(
-      () => Ke.value,
-      async (t) => {
-        await xe();
-      },
-      { deep: !0 }
-    );
-    const Pt = w(() => qt(e.value.customPalette)), V = w(() => Ke.value.map((t, l) => {
-      const o = Wt(t.color) || Pt.value[l] || De[e.value.theme || "default"][l % De[e.value.theme || "default"].length] || he[l] || he[l % he.length];
-      return {
-        ...t,
-        r: t.value,
-        id: ft(),
-        color: o
-      };
-    }).filter(
-      (t) => ![null, void 0, 1 / 0, -1 / 0].includes(t.value)
-    )), Q = w(() => $.value.length ? Math.max(...$.value.map((t) => t.r)) : 0);
-    function Je(t, l) {
-      return Q.value ? l / Q.value * t : 0;
-    }
-    function Qe(t, l) {
-      e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: t, seriesIndex: l }), !(Z.value === "keyboard" && I.value?.id === t?.id) && (re.value = !1, I.value = null, _.value = null, Z.value = "pointer");
-    }
-    function et(t, l) {
-      H("selectDatapoint", t), e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: t, seriesIndex: l });
-    }
-    const ce = r(null), ee = r(!1);
-    function tt(t, l, o = "pointer") {
-      I.value = t, _.value = l, Z.value = o, e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: t, seriesIndex: l }), ce.value = {
-        datapoint: t,
-        seriesIndex: l,
-        config: e.value,
-        series: V.value
-      }, re.value = !0;
-      const u = e.value.style.chart.tooltip.customFormat;
-      if (ee.value = !1, oo(u))
-        try {
-          const b = u({
-            seriesIndex: l,
-            datapoint: t,
-            series: V.value,
-            config: e.value
-          });
-          typeof b == "string" && (me.value = b, ee.value = !0);
-        } catch {
-          console.warn("Custom format cannot be applied."), ee.value = !1;
-        }
-      if (!ee.value) {
-        let b = "";
-        b += `
-            <div style="display:flex;align-items:center;gap:4px;">
-                <svg viewBox="0 0 10 10" height="${e.value.style.chart.tooltip.fontSize}" width="${e.value.style.chart.tooltip.fontSize}">
-                    <circle
-                        cx="5"
-                        cy="5"
-                        r="5"
-                        fill="${e.value.style.chart.circles.gradient.show ? `url(#${t.id})` : t.color}"
-                    />
-                </svg>
-                <span>${t.name}: <b>${Te(t)}</b></span>
-            </div>
-        `, me.value = b;
-      }
-    }
-    function Te(t) {
-      return lo(
-        e.value.style.chart.circles.labels.value.formatter,
-        t.value,
-        ht({
-          p: e.value.style.chart.circles.labels.value.prefix,
-          v: t.value,
-          s: e.value.style.chart.circles.labels.value.suffix,
-          r: e.value.style.chart.circles.labels.value.rounding
-        })
-      );
-    }
-    function ot(t) {
-      if (!t)
-        return 0;
-      const l = Te(t), o = t.r / (l.length || 1) * (l.length === 1 ? 1 : 2);
-      return Math.min(t.r / 2.5, o);
-    }
-    const G = r(!1);
-    function lt(t) {
-      G.value = t, Le.value += 1;
-    }
-    const te = r(!1);
-    function Pe() {
-      te.value = !te.value;
-    }
-    const de = w(() => {
-      const t = V.value.map((o) => ({
-        name: o.name,
-        value: o.value,
-        color: o.color
-      })).toSorted((o, u) => u.value - o.value), l = t.map((o) => o.value);
-      return { head: t, body: l };
-    });
-    function Se(t = null) {
-      dt(() => {
-        const l = de.value.head.map((b, k) => [[b.name], [de.value.body[k]]]), o = [
-          [e.value.style.chart.title.text],
-          [e.value.style.chart.title.subtitle.text],
-          [[""], [e.value.table.columnNames.value]]
-        ].concat(l), u = eo(o);
-        t ? t(u) : to({
-          csvContent: u,
-          title: e.value.style.chart.title.text || "vue-ui-circle-pack"
-        });
-      });
-    }
-    const j = w(() => {
-      const t = [
-        e.value.table.columnNames.datapoint,
-        e.value.table.columnNames.value
-      ], l = de.value.head.map((b, k) => {
-        const L = ht({
-          p: e.value.style.chart.circles.labels.value.prefix,
-          v: de.value.body[k],
-          s: e.value.style.chart.circles.labels.value.suffix,
-          r: e.value.style.chart.circles.labels.value.rounding
-        });
-        return [
-          {
-            color: b.color,
-            name: b.name
-          },
-          L
-        ];
-      }), o = {
-        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 {
-        colNames: [
-          e.value.table.columnNames.datapoint,
-          e.value.table.columnNames.value
-        ],
-        head: t,
-        body: l,
-        config: o
-      };
-    });
-    function at() {
-      D.value.showTable = !D.value.showTable;
-    }
-    function St() {
-      D.value.showTooltip = !D.value.showTooltip;
-    }
-    function At() {
-      return V.value;
-    }
-    async function _t({ scale: t = 2 } = {}) {
-      if (!F.value) return;
-      const { width: l, height: o } = F.value.getBoundingClientRect(), u = l / o, { imageUri: b, base64: k } = await ho({
-        domElement: F.value,
-        base64: !0,
-        img: !0,
-        scale: t
-      });
-      return {
-        imageUri: b,
-        base64: k,
-        title: e.value.style.chart.title.text,
-        width: l,
-        height: o,
-        aspectRatio: u
-      };
-    }
-    const oe = w(() => {
-      const t = e.value.table.useDialog && !e.value.table.show, l = D.value.showTable;
-      return {
-        component: t ? B : n,
-        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: G.value,
-          fullscreenParent: F.value,
-          forcedWidth: Math.min(500, window.innerWidth * 0.8),
-          isCursorPointer: J.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
-            }
-          }
-        }
-      };
-    });
-    fe(
-      () => D.value.showTable,
-      (t) => {
-        e.value.table.show || (t && e.value.table.useDialog && Y.value ? Y.value.open() : Y.value && "close" in Y.value && Y.value.close());
-      }
-    );
-    function nt() {
-      D.value.showTable = !1, be.value && be.value.setTableIconState(!1);
-    }
-    const Ot = w(() => e.value.style.chart.backgroundColor), Ft = w(() => e.value.style.chart.title), { exportSvg: Dt, getSvg: It } = ro({
-      svg: N,
-      title: Ft,
-      backgroundColor: Ot
-    });
-    async function st({ isCb: t }) {
-      ve.value = !0, await dt();
-      try {
-        if (t) {
-          const { blob: l, url: o, text: u, dataUrl: b } = await It();
-          await Promise.resolve(
-            e.value.userOptions.callbacks.svg({
-              blob: l,
-              url: o,
-              text: u,
-              dataUrl: b
-            })
-          );
-        } else
-          await Promise.resolve(Dt());
-      } finally {
-        ve.value = !1;
-      }
-    }
-    function Nt(t) {
-      if (t?.stage === "start") {
-        ie.value = !0;
-        return;
-      }
-      if (t?.stage === "end") {
-        ie.value = !1;
-        return;
-      }
-      qe();
-    }
-    async function ut() {
-      if (H("copyAlt", {
-        config: e.value,
-        dataset: V.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: V.value
-        })
-      );
-    }
-    function Mt(t) {
-      if (!Number.isFinite(t) || !N.value) return;
-      const l = $.value[t];
-      if (!l) return;
-      const o = ao(l.x, l.y, N.value);
-      o && (Ve.value = o);
-    }
-    function rt() {
-      if (_.value !== null) {
-        const t = $.value[_.value];
-        t && Qe(t, _.value);
-      }
-      _.value = null, Z.value = "pointer", re.value = !1, I.value = null;
-    }
-    function Rt() {
-      _.value = null, ge.value = !0;
-    }
-    function Bt() {
-      rt(), ge.value = !1;
-    }
-    function it(t, l) {
-      const o = $.value.length;
-      return o ? t === null || t < 0 || t >= o ? l === "next" ? 0 : o - 1 : l === "previous" ? (t - 1 + o) % o : (t + 1) % o : null;
-    }
-    function Et(t) {
-      if (!N.value || te.value || document.activeElement !== N.value || !$.value.length) return;
-      const l = ["ArrowLeft", "ArrowUp"].includes(t.key), o = ["ArrowRight", "ArrowDown"].includes(t.key), u = t.key === "Enter" || t.key === " ", b = t.key === "Escape";
-      if (!l && !o && !u && !b)
-        return;
-      if (t.preventDefault(), t.stopPropagation(), b) {
-        rt();
-        return;
-      }
-      if (u) {
-        if (_.value === null) return;
-        const X = $.value[_.value];
-        if (!X) return;
-        et(X, _.value);
-        return;
-      }
-      let k = _.value;
-      k === null || k < 0 || k >= $.value.length ? k = o ? 0 : $.value.length - 1 : o ? k = it(k, "next") : l && (k = it(k, "previous"));
-      const L = $.value[k];
-      L && (_.value = k, Mt(k), tt(L, k, "keyboard"));
-    }
-    const Ae = w(() => {
-      const t = j.value?.colNames ?? [], l = j.value?.body?.map((o) => [o[0]?.name ?? "", o[1]]) ?? [];
-      return { headers: t, rows: l };
-    });
-    return f({
-      getData: At,
-      getImage: _t,
-      generateCsv: Se,
-      generatePdf: Xe,
-      generateImage: qe,
-      generateSvg: st,
-      toggleTable: at,
-      toggleAnnotator: Pe,
-      toggleFullscreen: lt,
-      copyAlt: ut
-    }), (t, l) => (d(), C("div", {
-      id: `vue-ui-circle-pack_${M.value}`,
-      class: _e(`vue-data-ui-component vue-ui-circle-pack ${G.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${v(Ge) ? "loading" : ""}`),
-      ref_key: "circlePackChart",
-      ref: F,
-      style: ae(`font-family:${e.value.style.fontFamily};text-align:center;background:${e.value.style.chart.backgroundColor};`),
-      onMouseenter: l[1] || (l[1] = () => v(Ye)(!0)),
-      onMouseleave: l[2] || (l[2] = () => v(Ye)(!1))
-    }, [
-      O("div", {
-        id: `chart-instructions-${M.value}`,
-        class: "sr-only"
-      }, [
-        O("p", null, ne(e.value.a11y.translations.keyboardNavigation), 1)
-      ], 8, xo),
-      Ae.value?.rows?.length ? (d(), K(mo, {
-        key: 0,
-        uid: M.value,
-        head: Ae.value.headers,
-        body: Ae.value.rows,
-        notice: e.value.a11y.translations.tableAvailable,
-        caption: e.value.a11y.translations.tableCaption
-      }, null, 8, ["uid", "head", "body", "notice", "caption"])) : x("", !0),
-      e.value.userOptions.buttons.annotator ? (d(), K(v(h), {
-        key: 1,
-        svgRef: v(N),
-        backgroundColor: e.value.style.chart.backgroundColor,
-        color: e.value.style.chart.color,
-        active: te.value,
-        scale: Q.value / 100,
-        isCursorPointer: J.value,
-        onClose: Pe
-      }, {
-        "annotator-action-close": m(() => [
-          c(t.$slots, "annotator-action-close", {}, void 0, !0)
-        ]),
-        "annotator-action-color": m(({ color: o }) => [
-          c(t.$slots, "annotator-action-color", P(S({ color: o })), void 0, !0)
-        ]),
-        "annotator-action-draw": m(({ mode: o }) => [
-          c(t.$slots, "annotator-action-draw", P(S({ mode: o })), void 0, !0)
-        ]),
-        "annotator-action-undo": m(({ disabled: o }) => [
-          c(t.$slots, "annotator-action-undo", P(S({ disabled: o })), void 0, !0)
-        ]),
-        "annotator-action-redo": m(({ disabled: o }) => [
-          c(t.$slots, "annotator-action-redo", P(S({ disabled: o })), void 0, !0)
-        ]),
-        "annotator-action-delete": m(({ disabled: o }) => [
-          c(t.$slots, "annotator-action-delete", P(S({ disabled: o })), void 0, !0)
-        ]),
-        _: 3
-      }, 8, ["svgRef", "backgroundColor", "color", "active", "scale", "isCursorPointer"])) : x("", !0),
-      c(t.$slots, "userConfig", {}, void 0, !0),
-      kt.value ? (d(), C("div", {
-        key: 2,
-        ref_key: "noTitle",
-        ref: Be,
-        class: "vue-data-ui-no-title-space",
-        style: "height:36px; width: 100%;background:transparent"
-      }, null, 512)) : x("", !0),
-      e.value.style.chart.title.text ? (d(), C("div", {
-        key: 3,
-        ref_key: "chartTitle",
-        ref: Re,
-        style: "width:100%;background:transparent;padding-bottom:12px"
-      }, [
-        (d(), K(yo, {
-          key: `title_${Ee.value}`,
-          config: {
-            title: {
-              cy: "donut-div-title",
-              ...e.value.style.chart.title
-            },
-            subtitle: {
-              cy: "donut-div-subtitle",
-              ...e.value.style.chart.title.subtitle
-            }
-          }
-        }, null, 8, ["config"]))
-      ], 512)) : x("", !0),
-      e.value.userOptions.show && Me.value && (v(je) || v(ke)) ? (d(), K(v(s), {
-        ref_key: "userOptionsRef",
-        ref: be,
-        key: `user_option_${Le.value}`,
-        backgroundColor: e.value.style.chart.backgroundColor,
-        color: e.value.style.chart.color,
-        isPrinting: v(we),
-        isImaging: v($e),
-        uid: M.value,
-        hasTooltip: e.value.userOptions.buttons.tooltip,
-        isTooltip: D.value.showTooltip,
-        hasLabel: !1,
-        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: G.value,
-        chartElement: F.value,
-        position: e.value.userOptions.position,
-        callbacks: e.value.userOptions.callbacks,
-        printScale: e.value.userOptions.print.scale,
-        titles: { ...e.value.userOptions.buttonTitles },
-        hasAnnotator: e.value.userOptions.buttons.annotator,
-        isAnnotation: te.value,
-        tableDialog: e.value.table.useDialog,
-        isCursorPointer: J.value,
-        onToggleFullscreen: lt,
-        onGeneratePdf: v(Xe),
-        onGenerateCsv: Se,
-        onGenerateImage: Nt,
-        onGenerateSvg: st,
-        onToggleTable: at,
-        onToggleTooltip: St,
-        onToggleAnnotator: Pe,
-        onCopyAlt: ut,
-        style: ae({
-          visibility: v(je) ? v(ke) ? "visible" : "hidden" : "visible"
-        })
-      }, vt({ _: 2 }, [
-        t.$slots.menuIcon ? {
-          name: "menuIcon",
-          fn: m(({ isOpen: o, color: u }) => [
-            c(t.$slots, "menuIcon", P(S({ isOpen: o, color: u })), void 0, !0)
-          ]),
-          key: "0"
-        } : void 0,
-        t.$slots.optionPdf ? {
-          name: "optionPdf",
-          fn: m(() => [
-            c(t.$slots, "optionPdf", {}, void 0, !0)
-          ]),
-          key: "1"
-        } : void 0,
-        t.$slots.optionCsv ? {
-          name: "optionCsv",
-          fn: m(() => [
-            c(t.$slots, "optionCsv", {}, void 0, !0)
-          ]),
-          key: "2"
-        } : void 0,
-        t.$slots.optionImg ? {
-          name: "optionImg",
-          fn: m(() => [
-            c(t.$slots, "optionImg", {}, void 0, !0)
-          ]),
-          key: "3"
-        } : void 0,
-        t.$slots.optionSvg ? {
-          name: "optionSvg",
-          fn: m(() => [
-            c(t.$slots, "optionSvg", {}, void 0, !0)
-          ]),
-          key: "4"
-        } : void 0,
-        t.$slots.optionTable ? {
-          name: "optionTable",
-          fn: m(() => [
-            c(t.$slots, "optionTable", {}, void 0, !0)
-          ]),
-          key: "5"
-        } : void 0,
-        t.$slots.optionFullscreen ? {
-          name: "optionFullscreen",
-          fn: m(({ toggleFullscreen: o, isFullscreen: u }) => [
-            c(t.$slots, "optionFullscreen", P(S({ toggleFullscreen: o, isFullscreen: u })), void 0, !0)
-          ]),
-          key: "6"
-        } : void 0,
-        t.$slots.optionAnnotator ? {
-          name: "optionAnnotator",
-          fn: m(({ toggleAnnotator: o, isAnnotator: u }) => [
-            c(t.$slots, "optionAnnotator", P(S({ toggleAnnotator: o, isAnnotator: u })), void 0, !0)
-          ]),
-          key: "7"
-        } : void 0,
-        t.$slots.optionAltCopy ? {
-          name: "optionAltCopy",
-          fn: m(({ altCopy: o }) => [
-            c(t.$slots, "optionAltCopy", P(S({ altCopy: o })), void 0, !0)
-          ]),
-          key: "8"
-        } : void 0
-      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasTooltip", "isTooltip", "hasPdf", "hasImg", "hasSvg", "hasXls", "hasTable", "hasFullscreen", "hasAltCopy", "isFullscreen", "chartElement", "position", "callbacks", "printScale", "titles", "hasAnnotator", "isAnnotation", "tableDialog", "isCursorPointer", "onGeneratePdf", "style"])) : x("", !0),
-      O("div", {
-        class: _e({
-          "vue-ui-circle-pack-svg-container": !0,
-          "not-responsive": !e.value.responsive
-        })
-      }, [
-        (d(), C("svg", {
-          ref_key: "svgRef",
-          ref: N,
-          xmlns: v(Ht),
-          "aria-describedby": `chart-instructions-${M.value}`,
-          viewBox: E.value,
-          preserveAspectRatio: "xMidYMid meet",
-          class: _e({
-            "vue-data-ui-fullscreen--on": G.value,
-            "vue-data-ui-fulscreen--off": !G.value,
-            "not-responsive": !e.value.responsive
-          }),
-          style: ae(`display:block;${e.value.responsive ? "width:100%;height:auto" : "height:100%;"};overflow:visible;background:transparent;color:${e.value.style.chart.color};background:${e.value.style.chart.backgroundColor};`),
-          tabindex: "0",
-          onFocus: Rt,
-          onBlur: Bt,
-          onKeydown: Et
-        }, [
-          Oe(v(T)),
-          t.$slots["chart-background"] ? (d(), C("foreignObject", {
-            key: 0,
-            x: E.value.x,
-            y: E.value.y,
-            width: E.value.width,
-            height: E.value.height,
-            style: { pointerEvents: "none" }
-          }, [
-            c(t.$slots, "chart-background", {}, void 0, !0)
-          ], 8, Po)) : x("", !0),
-          (d(!0), C(W, null, Fe($.value, (o, u) => (d(), C(W, {
-            key: o.id
-          }, [
-            O("defs", null, [
-              O("radialGradient", {
-                id: o.id,
-                fy: "30%"
-              }, [
-                O("stop", {
-                  offset: "10%",
-                  "stop-color": v(Zt)(
-                    o.color,
-                    e.value.style.chart.circles.gradient.intensity / 100
-                  )
-                }, null, 8, Ao),
-                O("stop", {
-                  offset: "90%",
-                  "stop-color": v(Jt)(o.color, 0.1)
-                }, null, 8, _o),
-                O("stop", {
-                  offset: "100%",
-                  "stop-color": o.color
-                }, null, 8, Oo)
-              ], 8, So)
-            ]),
-            t.$slots.pattern ? (d(), C("g", Fo, [
-              O("defs", null, [
-                c(t.$slots, "pattern", pe({ ref_for: !0 }, {
-                  ...o,
-                  patternId: `pattern_${M.value}_${o.id}`
-                }), void 0, !0)
-              ])
-            ])) : x("", !0),
-            O("rect", {
-              x: o.x - o.r,
-              y: o.y - o.r,
-              width: o.r * 2,
-              height: o.r * 2,
-              stroke: e.value.style.chart.circles.stroke,
-              "stroke-width": e.value.style.chart.circles.strokeWidth * (Q.value || 1) / 100,
-              fill: e.value.style.chart.circles.gradient.show ? `url(#${o.id})` : o.color,
-              rx: o.r,
-              onMouseenter: (b) => tt(o, u, "pointer"),
-              onMouseout: (b) => Qe(o, u),
-              onClick: (b) => et(o, u)
-            }, null, 40, Do),
-            t.$slots.pattern ? (d(), C("rect", {
-              key: 1,
-              x: o.x - o.r,
-              y: o.y - o.r,
-              width: o.r * 2,
-              height: o.r * 2,
-              stroke: e.value.style.chart.circles.stroke,
-              "stroke-width": e.value.style.chart.circles.strokeWidth * (Q.value || 1) / 100,
-              fill: `url(#pattern_${M.value}_${o.id})`,
-              rx: o.r,
-              style: { pointerEvents: "none" }
-            }, null, 8, Io)) : x("", !0)
-          ], 64))), 128)),
-          (d(!0), C(W, null, Fe($.value, (o, u) => (d(), C("rect", {
-            key: o.id,
-            x: o.x - o.r,
-            y: o.y - o.r,
-            width: o.r * 2,
-            height: o.r * 2,
-            stroke: "none",
-            fill: I.value && I.value.id === o.id ? e.value.style.chart.circles.gradient.show ? `url(#${o.id})` : o.color : "transparent",
-            rx: o.r,
-            style: ae({
-              filter: I.value && I.value.id === o.id ? `drop-shadow(0px 0px 6px ${e.value.style.chart.circles.selectedShadowColor})` : "none",
-              opacity: I.value ? 1 : 0,
-              pointerEvents: "none",
-              transition: "opacity 0.2s ease-in-out"
-            })
-          }, null, 12, No))), 128)),
-          (d(!0), C(W, null, Fe($.value, (o, u) => (d(), C(W, {
-            key: o.id
-          }, [
-            t.$slots["data-label"] ? c(t.$slots, "data-label", pe({
-              key: 0,
-              ref_for: !0
-            }, {
-              ...o,
-              createTSpans: v(Qt),
-              fontSize: {
-                name: o.r / 3 * e.value.style.chart.circles.labels.name.fontSizeRatio,
-                value: ot(o) * e.value.style.chart.circles.labels.value.fontSizeRatio
-              },
-              color: e.value.style.chart.circles.labels.name.color ? e.value.style.chart.circles.labels.name.color : v(Ie)(o.color)
-            }), void 0, !0) : (d(), C(W, { key: 1 }, [
-              e.value.style.chart.circles.labels.name.show && o.name ? (d(), C("text", {
-                key: 0,
-                style: {
-                  pointerEvents: "none",
-                  transition: "opacity 0.2s ease-in-out"
-                },
-                x: o.x,
-                y: o.y + Je(
-                  o.r,
-                  e.value.style.chart.circles.labels.name.offsetY
-                ) - o.r / 10,
-                "font-size": o.r / 3 * e.value.style.chart.circles.labels.name.fontSizeRatio,
-                fill: e.value.style.chart.circles.labels.name.color === "auto" ? v(Ie)(o.color) : e.value.style.chart.circles.labels.name.color,
-                "font-weight": e.value.style.chart.circles.labels.name.bold ? "bold" : "normal",
-                "text-anchor": "middle"
-              }, ne(o.name), 9, Mo)) : x("", !0),
-              e.value.style.chart.circles.labels.value.show ? (d(), C("text", {
-                key: 1,
-                style: {
-                  pointerEvents: "none",
-                  transition: "opacity 0.2s ease-in-out"
-                },
-                x: o.x,
-                y: o.y + Je(
-                  o.r,
-                  e.value.style.chart.circles.labels.value.offsetY
-                ) + o.r / 2.5,
-                "font-size": ot(o) * e.value.style.chart.circles.labels.value.fontSizeRatio,
-                fill: e.value.style.chart.circles.labels.value.color === "auto" ? v(Ie)(o.color) : e.value.style.chart.circles.labels.value.color,
-                "font-weight": e.value.style.chart.circles.labels.value.bold ? "bold" : "normal",
-                "text-anchor": "middle"
-              }, ne(Te(o)), 9, Ro)) : x("", !0)
-            ], 64)),
-            c(t.$slots, "circle", pe({ ref_for: !0 }, {
-              ...o,
-              isSelected: I.value?.id === o.id,
-              uid: `${u}_${M.value}`
-            }), void 0, !0)
-          ], 64))), 128)),
-          c(t.$slots, "svg", {
-            svg: {
-              ...E.value,
-              isPrintingImg: v(we) | v($e) | ie.value,
-              isPrintingSvg: ve.value
-            }
-          }, void 0, !0)
-        ], 46, To)),
-        t.$slots.hint ? (d(), C("div", Bo, [
-          c(t.$slots, "hint", P(S({
-            hint: e.value.a11y.translations.keyboardNavigation,
-            isVisible: ge.value
-          })), void 0, !0)
-        ])) : x("", !0)
-      ], 2),
-      t.$slots.watermark ? (d(), C("div", Eo, [
-        c(t.$slots, "watermark", P(S({
-          isPrinting: v(we) || v($e) || ie.value || ve.value
-        })), void 0, !0)
-      ])) : x("", !0),
-      t.$slots.source ? (d(), C("div", {
-        key: 6,
-        ref_key: "source",
-        ref: Ue,
-        dir: "auto"
-      }, [
-        c(t.$slots, "source", {}, void 0, !0)
-      ], 512)) : x("", !0),
-      Oe(v(g), {
-        teleportTo: e.value.style.chart.tooltip.teleportTo,
-        show: D.value.showTooltip && re.value,
-        backgroundColor: e.value.style.chart.tooltip.backgroundColor,
-        color: e.value.style.chart.tooltip.color,
-        fontSize: e.value.style.chart.tooltip.fontSize,
-        borderRadius: e.value.style.chart.tooltip.borderRadius,
-        borderColor: e.value.style.chart.tooltip.borderColor,
-        borderWidth: e.value.style.chart.tooltip.borderWidth,
-        backgroundOpacity: e.value.style.chart.tooltip.backgroundOpacity,
-        position: e.value.style.chart.tooltip.position,
-        offsetY: e.value.style.chart.tooltip.offsetY,
-        parent: F.value,
-        content: me.value,
-        isCustom: ee.value,
-        isFullscreen: G.value,
-        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.smoothSnapThrehsold,
-        isA11yMode: Z.value === "keyboard",
-        a11yPosition: Ve.value
-      }, {
-        "tooltip-before": m(() => [
-          c(t.$slots, "tooltip-before", P(S({ ...ce.value })), void 0, !0)
-        ]),
-        tooltip: m(() => [
-          c(t.$slots, "tooltip", P(S({ ...ce.value })), void 0, !0)
-        ]),
-        "tooltip-after": m(() => [
-          c(t.$slots, "tooltip-after", P(S({ ...ce.value })), void 0, !0)
-        ]),
-        _: 3
-      }, 8, ["teleportTo", "show", "backgroundColor", "color", "fontSize", "borderRadius", "borderColor", "borderWidth", "backgroundOpacity", "position", "offsetY", "parent", "content", "isCustom", "isFullscreen", "smooth", "backdropFilter", "smoothForce", "smoothSnapThreshold", "isA11yMode", "a11yPosition"]),
-      Me.value && e.value.userOptions.buttons.table ? (d(), K(Kt(oe.value.component), pe({ key: 7 }, oe.value.props, {
-        ref_key: "tableUnit",
-        ref: Y,
-        onClose: nt
-      }), vt({
-        content: m(() => [
-          (d(), K(v(a), {
-            key: `table_${ze.value}`,
-            colNames: j.value.colNames,
-            head: j.value.head,
-            body: j.value.body,
-            config: j.value.config,
-            title: e.value.table.useDialog ? "" : oe.value.title,
-            withCloseButton: !e.value.table.useDialog,
-            isCursorPointer: J.value,
-            onClose: nt
-          }, {
-            th: m(({ th: o }) => [
-              O("div", {
-                innerHTML: o,
-                style: { display: "flex", "align-items": "center" }
-              }, null, 8, zo)
-            ]),
-            td: m(({ td: o }) => [
-              ct(ne(o.name || o), 1)
-            ]),
-            _: 1
-          }, 8, ["colNames", "head", "body", "config", "title", "withCloseButton", "isCursorPointer"]))
-        ]),
-        _: 2
-      }, [
-        e.value.table.useDialog ? {
-          name: "title",
-          fn: m(() => [
-            ct(ne(oe.value.title), 1)
-          ]),
-          key: "0"
-        } : void 0,
-        e.value.table.useDialog ? {
-          name: "actions",
-          fn: m(() => [
-            O("button", {
-              tabindex: "0",
-              class: "vue-ui-user-options-button",
-              onClick: l[0] || (l[0] = (o) => Se(e.value.userOptions.callbacks.csv)),
-              style: ae({ cursor: J.value ? "pointer" : "default" })
-            }, [
-              Oe(v(p), {
-                name: "fileCsv",
-                stroke: oe.value.props.color
-              }, null, 8, ["stroke"])
-            ], 4)
-          ]),
-          key: "1"
-        } : void 0
-      ]), 1040)) : x("", !0),
-      c(t.$slots, "skeleton", {}, () => [
-        v(Ge) ? (d(), K(uo, { key: 0 })) : x("", !0)
-      ], !0)
-    ], 46, $o));
-  }
-}, ll = /* @__PURE__ */ go(Lo, [["__scopeId", "data-v-22655fbd"]]);
-export {
-  ll as default
-};