vue-data-ui 3.15.12 → 3.16.1

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

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