vue-data-ui 3.15.12 → 3.16.1

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

@@ -0,0 +1,988 @@
+import { defineAsyncComponent as U, computed as w, ref as r, toRefs as Ut, watch as de, 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 $, withCtx as g, renderSlot as c, normalizeProps as P, guardReactiveProps as S, createSlots as vt, createVNode as Oe, Fragment as W, renderList as Fe, mergeProps as fe, resolveDynamicComponent as Kt, createTextVNode as ct, nextTick as dt } from "vue";
+import { u as Yt } from "./useConfig-DO94Aj5s.js";
+import { j as ft, t as pt, m as De, p as pe, 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-DBptbyyI.js";
+import { u as no } from "./usePrinter-CEpYU3r5.js";
+import { u as so, B as uo } from "./BaseScanner-BhhkKVoj.js";
+import { u as ro } from "./useSvgExport-ByUukOZt.js";
+import { u as Ne } from "./useNestedProp-Bf5XFbs8.js";
+import { u as io } from "./useThemeCheck-D1ZYXUwG.js";
+import { u as vo } from "./useUserOptionState-BIvW1Kz7.js";
+import { u as co } from "./useChartAccessibility-9icAAmYg.js";
+import { t as fo, u as po } from "./useResponsive-DfdjqQps.js";
+import ho from "./img-LXxMLmCg.js";
+import yo from "./Title-BeMKE1cj.js";
+import mo from "./vue_ui_circle_pack-CLmw8nHe.js";
+import { A as bo } from "./A11yDataTable-KcVAX2cP.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), b = 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, b - y, n - p];
+}
+function Co(i, f, y) {
+  const b = i._, p = i.next._, n = b.r + p.r, a = (b.x * p.r + p.x * b.r) / n, s = (b.y * p.r + p.y * b.r) / n;
+  return Math.max(Math.abs(a * y), Math.abs(s * f));
+}
+function wo(i, f, y) {
+  const b = 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 he(n), a = new he(a), s = new he(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 he(s);
+    let T = a.next, B = n.previous, A = a._.r, H = n._.r;
+    do
+      if (A <= H) {
+        if (mt(T._, s._)) {
+          a = T, n.next = a, a.previous = n, --h;
+          continue e;
+        }
+        A += T._.r, T = T.next;
+      } else {
+        if (mt(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 = b(n, y, f), ue;
+    for (; (s = s.next) !== a; )
+      (ue = b(s, y, f)) < se && (n = s, se = ue);
+    a = n.next;
+  }
+  return i;
+}
+function yt(i, f, y) {
+  const b = i.x - f.x, p = i.y - f.y, n = b * b + 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 * b - T * p, y.y = i.y - h * p + T * b;
+    } else {
+      const h = (n + a - s) / (2 * n), T = Math.sqrt(Math.max(0, a / n - h * h));
+      y.x = f.x + h * b - T * p, y.y = f.y + h * p + T * b;
+    }
+  } else
+    y.x = f.x + y.r, y.y = f.y;
+}
+function mt(i, f) {
+  const y = i.r + f.r - 1e-6, b = f.x - i.x, p = f.y - i.y;
+  return y > 0 && y * y > b * b + p * p;
+}
+class he {
+  constructor(f) {
+    this._ = f, this.next = null, this.previous = null;
+  }
+}
+const xo = ["id"], $o = ["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 b = U(() => import("./Tooltip-Bf-kM3_A.js")), p = U(() => import("./BaseIcon-Cb3zzG6s.js")), n = U(() => import("./vue-ui-accordion-nvggWcGN.js")), a = U(() => import("./DataTable-DT2kIdQ6.js")), s = U(() => import("./UserOptions-rW2fRf3V.js")), h = U(() => import("./PenAndPaper-Ct3qJ4lA.js")), T = U(() => import("./PackageVersion-DPO-OOVI.js")), B = U(() => import("./BaseDraggableDialog-CIb-iD9g.js")), A = i, H = y, { vue_ui_circle_pack: se } = Yt(), { isThemeValid: ue, warnInvalidTheme: bt } = 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), ye = 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"), be = r(!1), e = r(ke()), 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: ke,
+      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: ge,
+      setUserOptionsVisibility: Ye,
+      keepUserOptionState: je
+    } = vo({ config: e.value });
+    function ke() {
+      const t = Ne({
+        userConfig: A.config,
+        defaultConfig: se
+      }), l = t.theme;
+      if (!l) return t;
+      if (!ue.value(t))
+        return bt(t), t;
+      const o = Ne({
+        userConfig: mo[l] || A.config,
+        defaultConfig: t
+      }), u = Ne({
+        userConfig: A.config,
+        defaultConfig: o
+      });
+      return {
+        ...u,
+        customPalette: u.customPalette.length ? u.customPalette : De[l] || pe
+      };
+    }
+    de(() => A.config, (t) => {
+      e.value = ke(), ge.value = !e.value.userOptions.showOnChartHover, xe(), Ee.value += 1, ze.value += 1, D.value.showTable = e.value.table.show;
+    }, { deep: !0 });
+    const { isPrinting: Ce, isImaging: we, 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
+    });
+    de(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), xt = 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;
+    }), $t = 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;
+    }), x = 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) {
+        x.value = [], We.value = [0, 0, t, l], E.value = `0 0 ${t} ${l}`;
+        return;
+      }
+      const u = wo(o, l, t), [m, 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;
+      x.value = u.map((q) => ({
+        ...q,
+        x: (q.x - m) * 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 = xt.value, l = $t.value;
+      He(t, l), e.value.responsive ? Tt() : Ze();
+    }
+    Vt(xe), Gt(() => {
+      Ze();
+    }), de(() => 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] || pe[l] || pe[l % pe.length];
+      return {
+        ...t,
+        r: t.value,
+        id: ft(),
+        color: o
+      };
+    }).filter((t) => ![null, void 0, 1 / 0, -1 / 0].includes(t.value))), Q = w(() => x.value.length ? Math.max(...x.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 $e = 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 }), $e.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 m = u({
+            seriesIndex: l,
+            datapoint: t,
+            series: V.value,
+            config: e.value
+          });
+          typeof m == "string" && (me.value = m, ee.value = !0);
+        } catch {
+          console.warn("Custom format cannot be applied."), ee.value = !1;
+        }
+      if (!ee.value) {
+        let m = "";
+        m += `
+            <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 = m;
+      }
+    }
+    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 ce = 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 = ce.value.head.map((m, k) => [[m.name], [ce.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 = ce.value.head.map((m, k) => {
+        const L = ht({
+          p: e.value.style.chart.circles.labels.value.prefix,
+          v: ce.value.body[k],
+          s: e.value.style.chart.circles.labels.value.suffix,
+          r: e.value.style.chart.circles.labels.value.rounding
+        });
+        return [
+          {
+            color: m.color,
+            name: m.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: m, base64: k } = await ho({ domElement: F.value, base64: !0, img: !0, scale: t });
+      return {
+        imageUri: m,
+        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
+            }
+          }
+        }
+      };
+    });
+    de(() => 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, ye.value && ye.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: m } = await It();
+          await Promise.resolve(e.value.userOptions.callbacks.svg({ blob: l, url: o, text: u, dataUrl: m }));
+        } 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 = x.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 = x.value[_.value];
+        t && Qe(t, _.value);
+      }
+      _.value = null, Z.value = "pointer", re.value = !1, I.value = null;
+    }
+    function Rt() {
+      _.value = null, be.value = !0;
+    }
+    function Bt() {
+      rt(), be.value = !1;
+    }
+    function it(t, l) {
+      const o = x.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 || !x.value.length) return;
+      const l = ["ArrowLeft", "ArrowUp"].includes(t.key), o = ["ArrowRight", "ArrowDown"].includes(t.key), u = t.key === "Enter" || t.key === " ", m = t.key === "Escape";
+      if (!l && !o && !u && !m) return;
+      if (t.preventDefault(), t.stopPropagation(), m) {
+        rt();
+        return;
+      }
+      if (u) {
+        if (_.value === null) return;
+        const X = x.value[_.value];
+        if (!X) return;
+        et(X, _.value);
+        return;
+      }
+      let k = _.value;
+      k === null || k < 0 || k >= x.value.length ? k = o ? 0 : x.value.length - 1 : o ? k = it(k, "next") : l && (k = it(k, "previous"));
+      const L = x.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, $o),
+      Ae.value?.rows?.length ? (d(), K(bo, {
+        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"])) : $("", !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": g(() => [
+          c(t.$slots, "annotator-action-close", {}, void 0, !0)
+        ]),
+        "annotator-action-color": g(({ color: o }) => [
+          c(t.$slots, "annotator-action-color", P(S({ color: o })), void 0, !0)
+        ]),
+        "annotator-action-draw": g(({ mode: o }) => [
+          c(t.$slots, "annotator-action-draw", P(S({ mode: o })), void 0, !0)
+        ]),
+        "annotator-action-undo": g(({ disabled: o }) => [
+          c(t.$slots, "annotator-action-undo", P(S({ disabled: o })), void 0, !0)
+        ]),
+        "annotator-action-redo": g(({ disabled: o }) => [
+          c(t.$slots, "annotator-action-redo", P(S({ disabled: o })), void 0, !0)
+        ]),
+        "annotator-action-delete": g(({ disabled: o }) => [
+          c(t.$slots, "annotator-action-delete", P(S({ disabled: o })), void 0, !0)
+        ]),
+        _: 3
+      }, 8, ["svgRef", "backgroundColor", "color", "active", "scale", "isCursorPointer"])) : $("", !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)) : $("", !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)) : $("", !0),
+      e.value.userOptions.show && Me.value && (v(je) || v(ge)) ? (d(), K(v(s), {
+        ref_key: "userOptionsRef",
+        ref: ye,
+        key: `user_option_${Le.value}`,
+        backgroundColor: e.value.style.chart.backgroundColor,
+        color: e.value.style.chart.color,
+        isPrinting: v(Ce),
+        isImaging: v(we),
+        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(ge) ? "visible" : "hidden" : "visible" })
+      }, vt({ _: 2 }, [
+        t.$slots.menuIcon ? {
+          name: "menuIcon",
+          fn: g(({ 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: g(() => [
+            c(t.$slots, "optionPdf", {}, void 0, !0)
+          ]),
+          key: "1"
+        } : void 0,
+        t.$slots.optionCsv ? {
+          name: "optionCsv",
+          fn: g(() => [
+            c(t.$slots, "optionCsv", {}, void 0, !0)
+          ]),
+          key: "2"
+        } : void 0,
+        t.$slots.optionImg ? {
+          name: "optionImg",
+          fn: g(() => [
+            c(t.$slots, "optionImg", {}, void 0, !0)
+          ]),
+          key: "3"
+        } : void 0,
+        t.$slots.optionSvg ? {
+          name: "optionSvg",
+          fn: g(() => [
+            c(t.$slots, "optionSvg", {}, void 0, !0)
+          ]),
+          key: "4"
+        } : void 0,
+        t.$slots.optionTable ? {
+          name: "optionTable",
+          fn: g(() => [
+            c(t.$slots, "optionTable", {}, void 0, !0)
+          ]),
+          key: "5"
+        } : void 0,
+        t.$slots.optionFullscreen ? {
+          name: "optionFullscreen",
+          fn: g(({ 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: g(({ 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: g(({ 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"])) : $("", !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)) : $("", !0),
+          (d(!0), C(W, null, Fe(x.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", fe({ ref_for: !0 }, { ...o, patternId: `pattern_${M.value}_${o.id}` }), void 0, !0)
+              ])
+            ])) : $("", !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: (m) => tt(o, u, "pointer"),
+              onMouseout: (m) => Qe(o, u),
+              onClick: (m) => 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)) : $("", !0)
+          ], 64))), 128)),
+          (d(!0), C(W, null, Fe(x.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(x.value, (o, u) => (d(), C(W, {
+            key: o.id
+          }, [
+            t.$slots["data-label"] ? c(t.$slots, "data-label", fe({
+              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)) : $("", !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)) : $("", !0)
+            ], 64)),
+            c(t.$slots, "circle", fe({ 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(Ce) | v(we) | 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: be.value })), void 0, !0)
+        ])) : $("", !0)
+      ], 2),
+      t.$slots.watermark ? (d(), C("div", Eo, [
+        c(t.$slots, "watermark", P(S({ isPrinting: v(Ce) || v(we) || ie.value || ve.value })), void 0, !0)
+      ])) : $("", !0),
+      t.$slots.source ? (d(), C("div", {
+        key: 6,
+        ref_key: "source",
+        ref: Ue,
+        dir: "auto"
+      }, [
+        c(t.$slots, "source", {}, void 0, !0)
+      ], 512)) : $("", !0),
+      Oe(v(b), {
+        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": g(() => [
+          c(t.$slots, "tooltip-before", P(S({ ...$e.value })), void 0, !0)
+        ]),
+        "tooltip-after": g(() => [
+          c(t.$slots, "tooltip-after", P(S({ ...$e.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), fe({ key: 7 }, oe.value.props, {
+        ref_key: "tableUnit",
+        ref: Y,
+        onClose: nt
+      }), vt({
+        content: g(() => [
+          (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: g(({ th: o }) => [
+              O("div", {
+                innerHTML: o,
+                style: { display: "flex", "align-items": "center" }
+              }, null, 8, zo)
+            ]),
+            td: g(({ 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: g(() => [
+            ct(ne(oe.value.title), 1)
+          ]),
+          key: "0"
+        } : void 0,
+        e.value.table.useDialog ? {
+          name: "actions",
+          fn: g(() => [
+            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)) : $("", !0),
+      c(t.$slots, "skeleton", {}, () => [
+        v(Ge) ? (d(), K(uo, { key: 0 })) : $("", !0)
+      ], !0)
+    ], 46, xo));
+  }
+}, ll = /* @__PURE__ */ go(Lo, [["__scopeId", "data-v-977c045f"]]);
+export {
+  ll as default
+};