vue-data-ui 3.0.23 → 3.1.0

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

@@ -0,0 +1,755 @@
+import { useCssVars as mt, computed as _, defineAsyncComponent as N, ref as y, toRefs as pt, watch as ne, shallowRef as Ue, onMounted as yt, onBeforeUnmount as bt, watchEffect as gt, createElementBlock as b, openBlock as m, unref as r, normalizeStyle as se, normalizeClass as Ve, createBlock as V, createCommentVNode as C, renderSlot as k, createSlots as He, withCtx as z, normalizeProps as J, guardReactiveProps as K, createVNode as je, Fragment as ue, renderList as kt, createElementVNode as $, mergeProps as be, toDisplayString as H, resolveDynamicComponent as wt, createTextVNode as Ge, nextTick as We } from "vue";
+import { u as xt, c as qe, t as Ct, a as ge, p as re, b as _t, o as zt, f as $t, d as Tt, e as St, j as Xe, i as ke, X as Ft, l as Ot, F as Q, al as It, v as Pt, w as At, k as Ye } from "./index-CDQbCd41.js";
+import { t as Dt, u as Mt } from "./useResponsive-DfdjqQps.js";
+import { u as Et } from "./usePrinter-Bnl1YeUU.js";
+import { u as Nt, B as Rt } from "./BaseScanner-BgWxam9d.js";
+import { u as Ze } from "./useNestedProp-BPEHGiYX.js";
+import { u as Bt } from "./useUserOptionState-BIvW1Kz7.js";
+import { u as Lt } from "./useChartAccessibility-9icAAmYg.js";
+import Ut from "./img-JOqdlnUs.js";
+import Vt from "./Title-Dq2_Z9kR.js";
+import { _ as Ht } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+function Je(u, c = 0) {
+  const f = u.reduce((o, { x: s, r: d }) => Math.min(o, s - d - c), 1 / 0), p = u.reduce((o, { x: s, r: d }) => Math.max(o, s + d + c), -1 / 0), v = u.reduce((o, { y: s, r: d }) => Math.min(o, s - d - c), 1 / 0), n = u.reduce((o, { y: s, r: d }) => Math.max(o, s + d + c), -1 / 0);
+  return [f, v, p - f, n - v];
+}
+function jt(u, c, f) {
+  const p = u._, v = u.next._, n = p.r + v.r, o = (p.x * v.r + v.x * p.r) / n, s = (p.y * v.r + v.y * p.r) / n;
+  return Math.max(Math.abs(o * f), Math.abs(s * c));
+}
+function Ke(u, c, f) {
+  const p = jt, v = u.length;
+  if (!v) return u;
+  let n, o, s;
+  if (n = u[0], n.x = 0, n.y = 0, !(v > 1) || (o = u[1], n.x = -o.r, o.x = n.r, o.y = 0, !(v > 2))) return u;
+  Qe(o, n, s = u[2]), n = new ie(n), o = new ie(o), s = new ie(s), n.next = s.previous = o, o.next = n.previous = s, s.next = o.previous = n;
+  e: for (let d = 3; d < v; ++d) {
+    Qe(n._, o._, s = u[d]), s = new ie(s);
+    let w = o.next, x = n.previous, ee = o._.r, te = n._.r;
+    do
+      if (ee <= te) {
+        if (et(w._, s._)) {
+          o = w, n.next = o, o.previous = n, --d;
+          continue e;
+        }
+        ee += w._.r, w = w.next;
+      } else {
+        if (et(x._, s._)) {
+          n = x, n.next = o, o.previous = n, --d;
+          continue e;
+        }
+        te += x._.r, x = x.previous;
+      }
+    while (w !== x.next);
+    s.previous = n, s.next = o, n.next = o.previous = o = s;
+    let j = p(n, f, c), S;
+    for (; (s = s.next) !== o; )
+      (S = p(s, f, c)) < j && (n = s, j = S);
+    o = n.next;
+  }
+  return u;
+}
+function Qe(u, c, f) {
+  const p = u.x - c.x, v = u.y - c.y, n = p * p + v * v;
+  if (n) {
+    const o = (c.r + f.r) ** 2, s = (u.r + f.r) ** 2;
+    if (o > s) {
+      const d = (n + s - o) / (2 * n), w = Math.sqrt(Math.max(0, s / n - d * d));
+      f.x = u.x - d * p - w * v, f.y = u.y - d * v + w * p;
+    } else {
+      const d = (n + o - s) / (2 * n), w = Math.sqrt(Math.max(0, o / n - d * d));
+      f.x = c.x + d * p - w * v, f.y = c.y + d * v + w * p;
+    }
+  } else
+    f.x = c.x + f.r, f.y = c.y;
+}
+function et(u, c) {
+  const f = u.r + c.r - 1e-6, p = c.x - u.x, v = c.y - u.y;
+  return f > 0 && f * f > p * p + v * v;
+}
+class ie {
+  constructor(c) {
+    this._ = c, this.next = null, this.previous = null;
+  }
+}
+const Gt = ["id"], Wt = ["xmlns", "viewBox", "height", "width"], qt = ["x", "y", "width", "height"], Xt = ["id"], Yt = ["stop-color"], Zt = ["stop-color"], Jt = ["stop-color"], Kt = { key: 0 }, Qt = ["x", "y", "width", "height", "stroke", "stroke-width", "fill", "rx", "onMouseenter", "onMouseout", "onClick"], el = ["x", "y", "width", "height", "stroke", "stroke-width", "fill", "rx"], tl = ["opacity", "x", "y", "font-size", "fill", "font-weight"], ll = ["opacity", "x", "y", "font-size", "fill", "font-weight"], al = ["cx", "cy", "r", "opacity", "stroke", "stroke-width", "fill"], ol = {
+  key: 0,
+  style: { pointerEvents: "none" }
+}, nl = { key: 1 }, sl = ["opacity", "x", "y", "font-size", "fill", "font-weight"], ul = ["opacity", "x", "y", "font-size", "fill", "font-weight"], rl = {
+  key: 4,
+  class: "vue-data-ui-watermark"
+}, il = ["innerHTML"], cl = {
+  __name: "vue-ui-circle-pack",
+  props: {
+    config: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    dataset: {
+      type: Array,
+      default() {
+        return [];
+      }
+    }
+  },
+  emits: ["selectDatapoint"],
+  setup(u, { expose: c, emit: f }) {
+    mt((t) => ({
+      "5748196e": L.value,
+      "2de8b0e7": he.value
+    }));
+    const p = N(() => import("./BaseIcon-DHtro8us.js")), v = N(() => import("./vue-ui-accordion-Bf_LHFFX.js")), n = N(() => import("./DataTable-DJjA2_wf.js")), o = N(() => import("./UserOptions-BuGfCdAY.js")), s = N(() => import("./PenAndPaper-B7QEDgx4.js")), d = N(() => import("./PackageVersion-DU12WH3O.js")), w = N(() => import("./BaseDraggableDialog-O7900pGp.js")), x = u, ee = f, { vue_ui_circle_pack: te } = xt(), j = _(() => !!x.dataset && x.dataset.length), S = y(qe()), T = y(null), we = y(null), xe = y(null), Ce = y(0), _e = y(0), ze = y(0), tt = y(null), G = y(null), e = y(ve()), { loading: $e, FINAL_DATASET: Te } = Nt({
+      ...pt(x),
+      FINAL_CONFIG: e,
+      prepareConfig: ve,
+      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: Ct({
+        defaultConfig: e.value,
+        userConfig: {
+          userOptions: { show: !1 },
+          table: { show: !1 },
+          style: {
+            chart: {
+              backgroundColor: "#99999930",
+              circles: {
+                stroke: "#6A6A6A",
+                labels: {
+                  name: { show: !1 },
+                  value: { show: !1 }
+                }
+              }
+            }
+          }
+        }
+      })
+    }), { svgRef: Se } = Lt({ config: e.value.style.chart.title }), {
+      userOptionsVisible: ce,
+      setUserOptionsVisibility: Fe,
+      keepUserOptionState: Oe
+    } = Bt({ config: e.value });
+    function ve() {
+      const t = Ze({
+        userConfig: x.config,
+        defaultConfig: te
+      });
+      return t.theme ? {
+        ...Ze({
+          userConfig: _t.vue_ui_circle_pack[t.theme] || x.config,
+          defaultConfig: t
+        }),
+        customPalette: ge[t.theme] || re
+      } : t;
+    }
+    ne(() => x.config, (t) => {
+      e.value = ve(), ce.value = !e.value.userOptions.showOnChartHover, de(), Ce.value += 1, _e.value += 1, F.value.showTable = e.value.table.show;
+    }, { deep: !0 });
+    const { isPrinting: Ie, isImaging: Pe, generatePdf: Ae, generateImage: De } = Et({
+      elementId: `vue-ui-circle-pack_${S.value}`,
+      fileName: e.value.style.chart.title.text || "vue-ui-circle-pack",
+      options: e.value.userOptions.print
+    }), lt = _(() => e.value.userOptions.show && !e.value.style.chart.title.text), F = y({
+      showTable: e.value.table.show
+    });
+    ne(e, () => {
+      F.value = {
+        showTable: e.value.table.show
+      };
+    }, { immediate: !0 });
+    const O = Ue(null), R = Ue(null), D = y({ h: 10, w: 10 }), Me = y(0), M = y([0, 0, 100, 100]), W = y({ h: 0, w: 0 }), at = _(() => e.value.debug);
+    async function de() {
+      zt(x.dataset) && $t({
+        componentName: "VueUiCirclePack",
+        type: "dataset",
+        debug: at.value
+      }), D.value = { h: 10, w: 10 }, M.value = [0, 0, 100, 100], W.value = { h: 0, w: 0 }, B.value = await Ke(le.value), I.value = Je(B.value, 1).join(" "), W.value = Ee(T.value);
+      const t = Dt(() => {
+        const { width: a, height: l, heightTitle: i, heightNoTitle: g } = Mt({
+          chart: T.value,
+          title: we.value,
+          noTitle: xe.value
+        }), E = Math.max(10, a), ye = Math.max(10, l - 12);
+        Me.value = e.value.style.chart.title.text ? i : g, requestAnimationFrame(() => {
+          D.value.w = E, D.value.h = ye - Me.value, We(async () => {
+            const ht = le.value.map((ft) => ({ ...ft }));
+            B.value = await Ke(ht, D.value.h, D.value.w), M.value = Je(B.value, 1), I.value = M.value.join(" "), W.value = Ee(T.value);
+          });
+        });
+      });
+      O.value && (R.value && O.value.unobserve(R.value), O.value.disconnect()), O.value = new ResizeObserver(t), R.value = T.value.parentNode, O.value.observe(R.value);
+    }
+    yt(de), bt(() => {
+      O.value && (R.value && O.value.unobserve(R.value), O.value.disconnect());
+    });
+    function Ee(t) {
+      if (!t || !t.parentElement)
+        return console.warn("Component or parent element is missing."), { w: 0, h: 0 };
+      const a = t.parentElement;
+      if (a.offsetWidth > 0 && a.offsetHeight > 0)
+        return { w: a.offsetWidth, h: a.offsetHeight };
+      const l = window.getComputedStyle(a), i = l.width, g = l.height;
+      return i !== "auto" && g !== "auto" && parseFloat(i) > 0 && parseFloat(g) > 0 ? { w: parseFloat(i), h: parseFloat(g) } : { w: 0, h: 0 };
+    }
+    ne(() => Te.value, async (t) => {
+      await de();
+    }, { deep: !0 });
+    const ot = _(() => Tt(e.value.customPalette)), le = _(() => Te.value.map((t, a) => {
+      const l = St(t.color) || ot.value[a] || ge[e.value.theme || "default"][a % ge[e.value.theme || "default"].length] || re[a] || re[a % re.length];
+      return {
+        ...t,
+        r: t.value,
+        id: qe(),
+        color: l
+      };
+    }).filter((t) => ![null, void 0, 1 / 0, -1 / 0].includes(t.value))), B = y([]), I = y("0 0 100 100"), q = _(() => Math.max(...B.value.map((t) => t.r)));
+    function Ne(t, a) {
+      return a / q.value * t;
+    }
+    function nt(t, a) {
+      h.value = null, e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: t, seriesIndex: a });
+    }
+    function st(t, a) {
+      ee("selectDatapoint", t), e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: t, seriesIndex: a });
+    }
+    function ut(t, a) {
+      rt(t), e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: t, seriesIndex: a });
+    }
+    const h = y(null);
+    function rt(t) {
+      e.value.style.chart.circles.zoom.show && (h.value = t);
+    }
+    const L = _(() => h.value ? h.value.r : 0), he = _(() => A.value ? L.value : h.value ? h.value.r > M.value[3] / 6 * e.value.style.chart.circles.zoom.zoomRatio ? h.value.r : M.value[3] / 6 * e.value.style.chart.circles.zoom.zoomRatio : 0), P = y(0), it = _(() => ({
+      pointerEvents: "none",
+      opacity: P.value,
+      filter: `drop-shadow(0px 0px 6px ${Xe(h.value.color, e.value.style.chart.circles.zoom.shadowForce)})`
+    })), X = y(L.value);
+    gt(() => {
+      X.value = L.value, P.value = 0;
+      let t = null;
+      function a(l) {
+        t || (t = l);
+        const i = (l - t) / e.value.style.chart.circles.zoom.animationFrameMs;
+        i < 1 ? (X.value = L.value + (he.value - L.value) * i, P.value = 0 + e.value.style.chart.circles.zoom.opacity * i, requestAnimationFrame(a)) : (X.value = he.value, P.value = e.value.style.chart.circles.zoom.opacity);
+      }
+      requestAnimationFrame(a);
+    });
+    const Y = _(() => ({
+      name: e.value.style.chart.circles.zoom.label.name.fontSize * M.value[3] / 300,
+      value: e.value.style.chart.circles.zoom.label.value.fontSize * M.value[3] / 300
+    }));
+    function fe(t) {
+      return Ye(
+        e.value.style.chart.circles.labels.value.formatter,
+        t.value,
+        ke({
+          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 ct() {
+      return Ye(
+        e.value.style.chart.circles.zoom.label.value.formatter,
+        h.value.value,
+        ke({
+          p: e.value.style.chart.circles.zoom.label.value.prefix,
+          v: h.value.value,
+          s: e.value.style.chart.circles.zoom.label.value.suffix,
+          r: e.value.style.chart.circles.zoom.label.value.rounding
+        })
+      );
+    }
+    function Re(t) {
+      if (!t)
+        return 0;
+      const a = t.r / fe(t).length * (fe(t).length === 1 ? 1 : 2);
+      return Math.min(t.r / 2.5, a);
+    }
+    const U = y(!1);
+    function Be(t) {
+      U.value = t, ze.value += 1;
+    }
+    const A = y(!1);
+    function me() {
+      A.value = !A.value;
+    }
+    const ae = _(() => {
+      const t = le.value.map((l) => ({
+        name: l.name,
+        value: l.value,
+        color: l.color
+      })).toSorted((l, i) => i.value - l.value), a = t.map((l) => l.value);
+      return { head: t, body: a };
+    });
+    function pe(t = null) {
+      We(() => {
+        const a = ae.value.head.map((g, E) => [[
+          g.name
+        ], [ae.value.body[E]]]), l = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [[""], [e.value.table.columnNames.value]]].concat(a), i = Pt(l);
+        t ? t(i) : At({ csvContent: i, title: e.value.style.chart.title.text || "vue-ui-circle-pack" });
+      });
+    }
+    const oe = _(() => {
+      const t = [
+        e.value.table.columnNames.datapoint,
+        e.value.table.columnNames.value
+      ], a = ae.value.head.map((g, E) => {
+        const ye = ke({
+          p: e.value.style.chart.circles.labels.value.prefix,
+          v: ae.value.body[E],
+          s: e.value.style.chart.circles.labels.value.suffix,
+          r: e.value.style.chart.circles.labels.value.rounding
+        });
+        return [
+          {
+            color: g.color,
+            name: g.name
+          },
+          ye
+        ];
+      }), l = {
+        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: a,
+        config: l
+      };
+    });
+    function Le() {
+      F.value.showTable = !F.value.showTable;
+    }
+    function vt() {
+      return le.value;
+    }
+    async function dt({ scale: t = 2 } = {}) {
+      if (!T.value) return;
+      const { width: a, height: l } = T.value.getBoundingClientRect(), i = a / l, { imageUri: g, base64: E } = await Ut({ domElement: T.value, base64: !0, img: !0, scale: t });
+      return {
+        imageUri: g,
+        base64: E,
+        title: e.value.style.chart.title.text,
+        width: a,
+        height: l,
+        aspectRatio: i
+      };
+    }
+    const Z = _(() => {
+      const t = e.value.table.useDialog && !e.value.table.show, a = F.value.showTable;
+      return {
+        component: t ? w : v,
+        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: U.value,
+          fullscreenParent: T.value,
+          forcedWidth: Math.min(500, window.innerWidth * 0.8)
+        } : {
+          hideDetails: !0,
+          config: {
+            open: a,
+            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
+            }
+          }
+        }
+      };
+    });
+    return ne(() => F.value.showTable, (t) => {
+      e.value.table.show || (t && e.value.table.useDialog && G.value ? G.value.open() : "close" in G.value && G.value.close());
+    }), c({
+      getData: vt,
+      getImage: dt,
+      generateCsv: pe,
+      generatePdf: Ae,
+      generateImage: De,
+      toggleTable: Le,
+      toggleAnnotator: me,
+      toggleFullscreen: Be
+    }), (t, a) => (m(), b("div", {
+      id: `vue-ui-circle-pack_${S.value}`,
+      class: Ve(`vue-ui-circle-pack ${U.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${r($e) ? "loading" : ""}`),
+      ref_key: "circlePackChart",
+      ref: T,
+      style: se(`font-family:${e.value.style.fontFamily};text-align:center;background:${e.value.style.chart.backgroundColor}; height: ${W.value.h}px; width:${W.value.w}px`),
+      onMouseenter: a[3] || (a[3] = () => r(Fe)(!0)),
+      onMouseleave: a[4] || (a[4] = () => r(Fe)(!1))
+    }, [
+      e.value.userOptions.buttons.annotator ? (m(), V(r(s), {
+        key: 0,
+        svgRef: r(Se),
+        backgroundColor: e.value.style.chart.backgroundColor,
+        color: e.value.style.chart.color,
+        active: A.value,
+        scale: q.value / 100,
+        onClose: me
+      }, null, 8, ["svgRef", "backgroundColor", "color", "active", "scale"])) : C("", !0),
+      k(t.$slots, "userConfig", {}, void 0, !0),
+      lt.value ? (m(), b("div", {
+        key: 1,
+        ref_key: "noTitle",
+        ref: xe,
+        class: "vue-data-ui-no-title-space",
+        style: "height:36px; width: 100%;background:transparent"
+      }, null, 512)) : C("", !0),
+      e.value.style.chart.title.text ? (m(), b("div", {
+        key: 2,
+        ref_key: "chartTitle",
+        ref: we,
+        style: "width:100%;background:transparent;padding-bottom:12px"
+      }, [
+        (m(), V(Vt, {
+          key: `title_${Ce.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)) : C("", !0),
+      e.value.userOptions.show && j.value && (r(Oe) || r(ce)) ? (m(), V(r(o), {
+        ref: "details",
+        key: `user_option_${ze.value}`,
+        backgroundColor: e.value.style.chart.backgroundColor,
+        color: e.value.style.chart.color,
+        isPrinting: r(Ie),
+        isImaging: r(Pe),
+        uid: S.value,
+        hasTooltip: !1,
+        hasLabel: !1,
+        hasPdf: e.value.userOptions.buttons.pdf,
+        hasImg: e.value.userOptions.buttons.img,
+        hasXls: e.value.userOptions.buttons.csv,
+        hasTable: e.value.userOptions.buttons.table,
+        hasFullscreen: e.value.userOptions.buttons.fullscreen,
+        isFullscreen: U.value,
+        chartElement: T.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: A.value,
+        onToggleFullscreen: Be,
+        onGeneratePdf: r(Ae),
+        onGenerateCsv: pe,
+        onGenerateImage: r(De),
+        onToggleTable: Le,
+        onToggleAnnotator: me,
+        style: se({
+          visibility: r(Oe) ? r(ce) ? "visible" : "hidden" : "visible"
+        })
+      }, He({ _: 2 }, [
+        t.$slots.menuIcon ? {
+          name: "menuIcon",
+          fn: z(({ isOpen: l, color: i }) => [
+            k(t.$slots, "menuIcon", J(K({ isOpen: l, color: i })), void 0, !0)
+          ]),
+          key: "0"
+        } : void 0,
+        t.$slots.optionPdf ? {
+          name: "optionPdf",
+          fn: z(() => [
+            k(t.$slots, "optionPdf", {}, void 0, !0)
+          ]),
+          key: "1"
+        } : void 0,
+        t.$slots.optionCsv ? {
+          name: "optionCsv",
+          fn: z(() => [
+            k(t.$slots, "optionCsv", {}, void 0, !0)
+          ]),
+          key: "2"
+        } : void 0,
+        t.$slots.optionImg ? {
+          name: "optionImg",
+          fn: z(() => [
+            k(t.$slots, "optionImg", {}, void 0, !0)
+          ]),
+          key: "3"
+        } : void 0,
+        t.$slots.optionTable ? {
+          name: "optionTable",
+          fn: z(() => [
+            k(t.$slots, "optionTable", {}, void 0, !0)
+          ]),
+          key: "4"
+        } : void 0,
+        t.$slots.optionFullscreen ? {
+          name: "optionFullscreen",
+          fn: z(({ toggleFullscreen: l, isFullscreen: i }) => [
+            k(t.$slots, "optionFullscreen", J(K({ toggleFullscreen: l, isFullscreen: i })), void 0, !0)
+          ]),
+          key: "5"
+        } : void 0,
+        t.$slots.optionAnnotator ? {
+          name: "optionAnnotator",
+          fn: z(({ toggleAnnotator: l, isAnnotator: i }) => [
+            k(t.$slots, "optionAnnotator", J(K({ toggleAnnotator: l, isAnnotator: i })), void 0, !0)
+          ]),
+          key: "6"
+        } : void 0
+      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasPdf", "hasImg", "hasXls", "hasTable", "hasFullscreen", "isFullscreen", "chartElement", "position", "callbacks", "printScale", "titles", "hasAnnotator", "isAnnotation", "onGeneratePdf", "onGenerateImage", "style"])) : C("", !0),
+      (m(), b("svg", {
+        ref_key: "svgRef",
+        ref: Se,
+        xmlns: r(Ft),
+        viewBox: I.value,
+        height: Math.max(10, D.value.h),
+        width: Math.max(10, D.value.w),
+        class: Ve({ "vue-data-ui-fullscreen--on": U.value, "vue-data-ui-fulscreen--off": !U.value }),
+        style: se(`max-width:100%;overflow:visible;background:transparent;color:${e.value.style.chart.color};background:${e.value.style.chart.backgroundColor};`)
+      }, [
+        je(r(d)),
+        t.$slots["chart-background"] ? (m(), b("foreignObject", {
+          key: 0,
+          x: I.value.x,
+          y: I.value.y,
+          width: I.value.width,
+          height: I.value.height,
+          style: {
+            pointerEvents: "none"
+          }
+        }, [
+          k(t.$slots, "chart-background", {}, void 0, !0)
+        ], 8, qt)) : C("", !0),
+        (m(!0), b(ue, null, kt(B.value, (l, i) => (m(), b(ue, null, [
+          $("defs", null, [
+            $("radialGradient", {
+              id: l.id,
+              fy: "30%"
+            }, [
+              $("stop", {
+                offset: "10%",
+                "stop-color": r(Ot)(l.color, e.value.style.chart.circles.gradient.intensity / 100)
+              }, null, 8, Yt),
+              $("stop", {
+                offset: "90%",
+                "stop-color": r(Xe)(l.color, 0.1)
+              }, null, 8, Zt),
+              $("stop", {
+                offset: "100%",
+                "stop-color": l.color
+              }, null, 8, Jt)
+            ], 8, Xt)
+          ]),
+          t.$slots.pattern ? (m(), b("g", Kt, [
+            $("defs", null, [
+              k(t.$slots, "pattern", be({ ref_for: !0 }, { ...l, patternId: `pattern_${S.value}_${l.id}` }), void 0, !0)
+            ])
+          ])) : C("", !0),
+          $("rect", {
+            x: l.x - l.r,
+            y: l.y - l.r,
+            width: l.r * 2,
+            height: l.r * 2,
+            stroke: e.value.style.chart.circles.stroke,
+            "stroke-width": e.value.style.chart.circles.strokeWidth * q.value / 100,
+            fill: e.value.style.chart.circles.gradient.show ? `url(#${l.id})` : l.color,
+            rx: l.r,
+            onMouseenter: (g) => ut(l, i),
+            onMouseout: (g) => nt(l, i),
+            onClick: (g) => st(l, i)
+          }, null, 40, Qt),
+          t.$slots.pattern ? (m(), b("rect", {
+            key: 1,
+            x: l.x - l.r,
+            y: l.y - l.r,
+            width: l.r * 2,
+            height: l.r * 2,
+            stroke: e.value.style.chart.circles.stroke,
+            "stroke-width": e.value.style.chart.circles.strokeWidth * q.value / 100,
+            fill: `url(#pattern_${S.value}_${l.id})`,
+            rx: l.r,
+            style: {
+              pointerEvents: "none"
+            }
+          }, null, 8, el)) : C("", !0),
+          t.$slots["data-label"] ? k(t.$slots, "data-label", be({
+            key: 2,
+            ref_for: !0
+          }, { ...l, createTSpans: r(It), fontSize: { name: l.r / 3 * e.value.style.chart.circles.labels.name.fontSizeRatio, value: Re(l) * 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 : r(Q)(l.color) }), void 0, !0) : (m(), b(ue, { key: 3 }, [
+            e.value.style.chart.circles.labels.name.show && l.name ? (m(), b("text", {
+              key: 0,
+              style: {
+                pointerEvents: "none",
+                transition: "opacity 0.2s ease-in-out"
+              },
+              opacity: h.value && !A.value ? 0.2 : 1,
+              x: l.x,
+              y: l.y + Ne(l.r, e.value.style.chart.circles.labels.name.offsetY) - l.r / 10,
+              "font-size": l.r / 3 * e.value.style.chart.circles.labels.name.fontSizeRatio,
+              fill: e.value.style.chart.circles.labels.name.color ? e.value.style.chart.circles.labels.name.color : r(Q)(l.color),
+              "font-weight": e.value.style.chart.circles.labels.name.bold ? "bold" : "normal",
+              "text-anchor": "middle"
+            }, H(l.name), 9, tl)) : C("", !0),
+            e.value.style.chart.circles.labels.value.show ? (m(), b("text", {
+              key: 1,
+              style: {
+                pointerEvents: "none",
+                transition: "opacity 0.2s ease-in-out"
+              },
+              opacity: h.value && !A.value ? 0.2 : 1,
+              x: l.x,
+              y: l.y + Ne(l.r, e.value.style.chart.circles.labels.value.offsetY) + l.r / 2.5,
+              "font-size": Re(l) * e.value.style.chart.circles.labels.value.fontSizeRatio,
+              fill: e.value.style.chart.circles.labels.value.color ? e.value.style.chart.circles.labels.value.color : r(Q)(l.color),
+              "font-weight": e.value.style.chart.circles.labels.value.bold ? "bold" : "normal",
+              "text-anchor": "middle"
+            }, H(fe(l)), 9, ll)) : C("", !0)
+          ], 64))
+        ], 64))), 256)),
+        h.value && e.value.style.chart.circles.zoom.show && !A.value ? (m(), b(ue, { key: 1 }, [
+          $("circle", {
+            style: se(it.value),
+            cx: h.value.x,
+            cy: h.value.y,
+            r: X.value,
+            opacity: P.value,
+            stroke: e.value.style.chart.circles.stroke,
+            "stroke-width": e.value.style.chart.circles.strokeWidth * q.value / 100,
+            fill: e.value.style.chart.circles.gradient.show ? `url(#${h.value.id})` : h.value.color
+          }, null, 12, al),
+          t.$slots["zoom-label"] ? (m(), b("g", ol, [
+            k(t.$slots, "zoom-label", J(K({ ...h.value, zoomOpacity: P.value, currentRadius: X.value, fontSize: Y.value })), void 0, !0)
+          ])) : (m(), b("g", nl, [
+            $("text", {
+              style: {
+                pointerEvents: "none"
+              },
+              opacity: P.value,
+              x: h.value.x,
+              y: h.value.y + e.value.style.chart.circles.zoom.label.name.offsetY - Y.value.name / 4,
+              "text-anchor": "middle",
+              "font-size": Y.value.name,
+              fill: e.value.style.chart.circles.zoom.label.name.color ? e.value.style.chart.circles.zoom.label.name.color : r(Q)(h.value.color),
+              "font-weight": e.value.style.chart.circles.zoom.label.name.bold ? "bold" : "normal"
+            }, H(h.value.name), 9, sl),
+            $("text", {
+              style: {
+                pointerEvents: "none"
+              },
+              opacity: P.value,
+              x: h.value.x,
+              y: h.value.y + Y.value.value + e.value.style.chart.circles.zoom.label.value.offsetY,
+              "text-anchor": "middle",
+              "font-size": Y.value.value,
+              fill: e.value.style.chart.circles.zoom.label.value.color ? e.value.style.chart.circles.zoom.label.value.color : r(Q)(h.value.color),
+              "font-weight": e.value.style.chart.circles.zoom.label.value.bold ? "bold" : "normal"
+            }, H(ct()), 9, ul)
+          ]))
+        ], 64)) : C("", !0),
+        k(t.$slots, "svg", {
+          svg: { ...I.value }
+        }, void 0, !0)
+      ], 14, Wt)),
+      t.$slots.watermark ? (m(), b("div", rl, [
+        k(t.$slots, "watermark", J(K({ isPrinting: r(Ie) || r(Pe) })), void 0, !0)
+      ])) : C("", !0),
+      t.$slots.source ? (m(), b("div", {
+        key: 5,
+        ref_key: "source",
+        ref: tt,
+        dir: "auto"
+      }, [
+        k(t.$slots, "source", {}, void 0, !0)
+      ], 512)) : C("", !0),
+      j.value ? (m(), V(wt(Z.value.component), be({ key: 6 }, Z.value.props, {
+        ref_key: "tableUnit",
+        ref: G,
+        onClose: a[2] || (a[2] = (l) => F.value.showTable = !1)
+      }), He({
+        content: z(() => [
+          (m(), V(r(n), {
+            key: `table_${_e.value}`,
+            colNames: oe.value.colNames,
+            head: oe.value.head,
+            body: oe.value.body,
+            config: oe.value.config,
+            title: e.value.table.useDialog ? "" : Z.value.title,
+            withCloseButton: !e.value.table.useDialog,
+            onClose: a[1] || (a[1] = (l) => F.value.showTable = !1)
+          }, {
+            th: z(({ th: l }) => [
+              $("div", {
+                innerHTML: l,
+                style: { display: "flex", "align-items": "center" }
+              }, null, 8, il)
+            ]),
+            td: z(({ td: l }) => [
+              Ge(H(l.name || l), 1)
+            ]),
+            _: 1
+          }, 8, ["colNames", "head", "body", "config", "title", "withCloseButton"]))
+        ]),
+        _: 2
+      }, [
+        e.value.table.useDialog ? {
+          name: "title",
+          fn: z(() => [
+            Ge(H(Z.value.title), 1)
+          ]),
+          key: "0"
+        } : void 0,
+        e.value.table.useDialog ? {
+          name: "actions",
+          fn: z(() => [
+            $("button", {
+              tabindex: "0",
+              class: "vue-ui-user-options-button",
+              onClick: a[0] || (a[0] = (l) => pe(e.value.userOptions.callbacks.csv))
+            }, [
+              je(r(p), {
+                name: "excel",
+                stroke: Z.value.props.color
+              }, null, 8, ["stroke"])
+            ])
+          ]),
+          key: "1"
+        } : void 0
+      ]), 1040)) : C("", !0),
+      r($e) ? (m(), V(Rt, { key: 7 })) : C("", !0)
+    ], 46, Gt));
+  }
+}, xl = /* @__PURE__ */ Ht(cl, [["__scopeId", "data-v-d0db794a"]]);
+export {
+  xl as default
+};