vue-data-ui 3.6.0 → 3.7.0

package/dist/vue-ui-word-cloud-DZmMWsUu.js

@@ -0,0 +1,904 @@
+import { useCssVars as kt, defineAsyncComponent as q, computed as H, ref as v, toRefs as wt, watch as se, shallowRef as Xe, onMounted as At, onBeforeUnmount as xt, createElementBlock as _, openBlock as k, unref as i, normalizeStyle as Ce, createBlock as re, createCommentVNode as L, createVNode as ke, withCtx as f, renderSlot as p, normalizeProps as R, guardReactiveProps as V, createSlots as Le, normalizeClass as Ye, createElementVNode as we, Fragment as Ft, renderList as $t, toDisplayString as Me, resolveDynamicComponent as St, mergeProps as Tt, createTextVNode as je, nextTick as Ge } from "vue";
+import { d as Mt, t as Ot, u as Pt } from "./useResponsive-DfdjqQps.js";
+import { c as qe, t as Dt, ap as Et, M as zt, i as Bt, p as Ae, o as He, g as Ze, k as It, d as Nt, X as _t, u as Rt, q as Vt, x as Wt } from "./lib-C5BH09_g.js";
+import { u as Ut, a as Oe } from "./useNestedProp-CWo6bftQ.js";
+import { u as Xt, B as Lt } from "./BaseScanner-BgWxam9d.js";
+import { u as Yt } from "./usePrinter-DCJzEiS8.js";
+import { u as jt } from "./useSvgExport-DrjCWun4.js";
+import { u as Gt } from "./useThemeCheck-DGJ31Vi5.js";
+import { u as qt } from "./useUserOptionState-BIvW1Kz7.js";
+import { u as Ht } from "./useChartAccessibility-9icAAmYg.js";
+import Zt from "./img-DUzJeMlr.js";
+import Jt from "./Title-DfFUb9hd.js";
+import { u as Kt } from "./usePanZoom-BVca3eMk.js";
+import { _ as Qt } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+function eo(w, y) {
+  const { width: c, height: h } = w, m = y.getImageData(0, 0, c, h).data;
+  let n = c, l = h, u = 0, A = 0, S = !1;
+  for (let b = 0; b < h; b += 1)
+    for (let F = 0; F < c; F += 1)
+      m[(b * c + F) * 4 + 3] > 1 && (S = !0, F < n && (n = F), F > u && (u = F), b < l && (l = b), b > A && (A = b));
+  return S ? [n, l, u, A] : [0, 0, 0, 0];
+}
+function Je({
+  word: w,
+  fontSize: y,
+  pad: c,
+  canvas: h,
+  ctx: d,
+  svg: m
+}) {
+  d.save(), d.font = `${m.style && m.style.bold ? "bold " : ""}${y}px Arial`;
+  const n = d.measureText(w.name), l = Math.ceil(n.width) + 2 + (c ? c * 2 : 0), u = Math.ceil(y) + 2 + (c ? c * 2 : 0);
+  h.width = l, h.height = u, d.clearRect(0, 0, l, u), d.font = `${m.style && m.style.bold ? "bold " : ""}${y}px Arial`, d.textAlign = "center", d.textBaseline = "middle", d.fillStyle = "black", d.fillText(w.name, l / 2, u / 2);
+  const S = d.getImageData(0, 0, l, u).data, b = [];
+  for (let U = 0; U < u; U += 1)
+    for (let x = 0; x < l; x += 1)
+      S[(U * l + x) * 4 + 3] > 1 && b.push([x, U]);
+  const [F, C, W, P] = eo(h, d);
+  return d.restore(), { w: l, h: u, wordMask: b, minX: F, minY: C, maxX: W, maxY: P };
+}
+function Ke({ mask: w, maskW: y, maskH: c, wx: h, wy: d, wordMask: m }) {
+  for (let n = 0; n < m.length; n += 1) {
+    const l = h + m[n][0], u = d + m[n][1];
+    if (l < 0 || u < 0 || l >= y || u >= c || w[u * y + l]) return !1;
+  }
+  return !0;
+}
+function Qe({ mask: w, maskW: y, maskH: c, wx: h, wy: d, wordMask: m }) {
+  for (let n = 0; n < m.length; n += 1) {
+    const l = h + m[n][0], u = d + m[n][1];
+    l >= 0 && u >= 0 && l < y && u < c && (w[u * y + l] = 1);
+  }
+}
+function to({ wordMask: w, w: y, h: c, dilation: h }) {
+  const d = new Set(w.map(([n, l]) => `${n},${l}`)), m = new Set(d);
+  for (let [n, l] of w)
+    for (let u = -h; u <= h; u += 1)
+      for (let A = -h; A <= h; A += 1) {
+        if (u === 0 && A === 0) continue;
+        const S = n + u, b = l + A;
+        S >= 0 && S < y && b >= 0 && b < c && m.add(`${S},${b}`);
+      }
+  return Array.from(m).map((n) => n.split(",").map(Number));
+}
+function oo({
+  words: w,
+  proximity: y = 0,
+  svg: c,
+  strictPixelPadding: h
+}) {
+  const { width: d, height: m } = c, n = Math.round(d), l = Math.round(m), u = 1, A = c.minFontSize, S = Math.min(c.maxFontSize, 100), b = w.map((e) => e.value), F = Math.min(...b), C = Math.max(...b), W = new Uint8Array(n * l), P = document.createElement("canvas"), U = P.getContext("2d", { willReadFrequently: !0 });
+  P.width = n, P.height = l;
+  const x = 6, he = 2, me = 2, fe = 1, ie = Math.floor(n / 2), ee = Math.floor(l / 2), Z = [...w].sort((e, D) => D.value - e.value), J = [];
+  for (const e of Z) {
+    let D = A;
+    C !== F && (D = (e.value - F) / (C - F) * (S - A) + A), D = Math.max(A, Math.min(S, D));
+    let E = !1, X = D;
+    for (; !E && X >= u; ) {
+      let { w: T, h: z, wordMask: B, minX: te, minY: oe, maxX: j, maxY: K } = Je({
+        word: e,
+        fontSize: X,
+        pad: y,
+        canvas: P,
+        ctx: U,
+        svg: c
+      });
+      h && (B = to({ wordMask: B, w: T, h: z, dilation: 2 }));
+      let M = 0, Y = 0;
+      for (; M < Math.max(n, l) && !E && Y < 1e4; ) {
+        for (let I = 0; I < 360; I += x) {
+          Y += 1;
+          const $ = Math.round(ie + M * Math.cos(I * Math.PI / 180) - T / 2), r = Math.round(ee + M * Math.sin(I * Math.PI / 180) - z / 2);
+          if (!($ < 0 || r < 0 || $ + T > n || r + z > l) && Ke({ mask: W, maskW: n, maskH: l, wx: $, wy: r, wordMask: B })) {
+            J.push({ ...e, x: $ - n / 2, y: r - l / 2, fontSize: X, width: T, height: z, angle: 0, minX: te, minY: oe, maxX: j, maxY: K }), Qe({ mask: W, maskW: n, maskH: l, wx: $, wy: r, wordMask: B }), E = !0;
+            break;
+          }
+        }
+        M += he;
+      }
+      E || (X -= 1);
+    }
+    if (!E && X < u) {
+      X = u;
+      const { w: T, h: z, wordMask: B, minX: te, minY: oe, maxX: j, maxY: K } = Je({
+        word: e,
+        fontSize: X,
+        pad: y,
+        canvas: P,
+        ctx: U,
+        svg: c
+      });
+      let M = 0, Y = 0;
+      for (; M < Math.max(n, l) && !E && Y < 25e3; ) {
+        for (let I = 0; I < 360; I += me) {
+          Y += 1;
+          const $ = Math.round(ie + M * Math.cos(I * Math.PI / 180) - T / 2), r = Math.round(ee + M * Math.sin(I * Math.PI / 180) - z / 2);
+          if (!($ < 0 || r < 0 || $ + T > n || r + z > l) && Ke({ mask: W, maskW: n, maskH: l, wx: $, wy: r, wordMask: B })) {
+            J.push({ ...e, x: $ - n / 2, y: r - l / 2, fontSize: X, width: T, height: z, angle: 0, minX: te, minY: oe, maxX: j, maxY: K }), Qe({ mask: W, maskW: n, maskH: l, wx: $, wy: r, wordMask: B }), E = !0;
+            break;
+          }
+        }
+        M += fe;
+      }
+    }
+  }
+  return J.sort((e, D) => D.fontSize - e.fontSize);
+}
+const et = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", title: { color: "#CCCCCC", subtitle: { color: "#757575" } }, words: { selectedStroke: "#1A1A1A" }, tooltip: { backgroundColor: "#1A1A1A", backgroundOpacity: 70, color: "#CCCCCC", borderColor: "#5A5A5A" } } }, table: { th: { backgroundColor: "#1A1A1A", color: "#CCCCCC" }, td: { backgroundColor: "#1A1A1A", color: "#CCCCCC" } } }, tt = { style: { chart: { backgroundColor: "#FFF8E1", color: "#424242", title: { color: "#424242", subtitle: { color: "#757575" } }, words: { selectedStroke: "#FFF8E1" }, tooltip: { backgroundColor: "#FFECB3", backgroundOpacity: 30, color: "#424242", borderColor: "#FF8A65" }, zoom: { color: "#5D4037", highlightColor: "#FF8A65" } } }, table: { th: { backgroundColor: "#FFF8E1", color: "#424242" }, td: { backgroundColor: "#FFF8E1", color: "#424242" } } }, ot = { style: { chart: { backgroundColor: "#1E1E1E", color: "#BDBDBD", title: { color: "#FFF8E1", subtitle: { color: "#BDBDBD" } }, words: { selectedStroke: "#1E1E1E" }, tooltip: { backgroundColor: "#1E1E1E", backgroundOpacity: 30, color: "#FFF8E1", borderColor: "#FF8A65" }, zoom: { color: "#5D4037", highlightColor: "#FF8A65" } } }, table: { th: { backgroundColor: "#1E1E1E", color: "#BDBDBD" }, td: { backgroundColor: "#1E1E1E", color: "#BDBDBD" } } }, at = { style: { chart: { backgroundColor: "#1A1A1A", color: "#99AA99", title: { color: "#66CC66", subtitle: { color: "#99AA99" } }, words: { selectedStroke: "#1A1A1A" } } }, table: { th: { backgroundColor: "#1A1A1A", color: "#99AA99" }, td: { backgroundColor: "#1A1A1A", color: "#AACCAA" } } }, lt = { style: { chart: { backgroundColor: "#fbfafa", color: "#8A9892", title: { color: "#8A9892", subtitle: { color: "#99AA99" } }, words: { selectedStroke: "#fbfafa" } } }, table: { th: { backgroundColor: "#fbfafa", color: "#8F837A" }, td: { backgroundColor: "#fbfafa", color: "#8F837A" } } }, nt = { style: { chart: { backgroundColor: "#f6f6fb", color: "#50606C", title: { color: "#50606C", subtitle: { color: "#718890" } }, words: { selectedStroke: "#f6f6fb" } } }, table: { th: { backgroundColor: "#f6f6fb", color: "#50606C" }, td: { backgroundColor: "#f6f6fb", color: "#50606C" } } }, st = {
+  default: {},
+  dark: et,
+  celebration: tt,
+  celebrationNight: ot,
+  hack: at,
+  zen: lt,
+  concrete: nt
+}, Mo = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  celebration: tt,
+  celebrationNight: ot,
+  concrete: nt,
+  dark: et,
+  default: st,
+  hack: at,
+  zen: lt
+}, Symbol.toStringTag, { value: "Module" })), ao = ["id"], lo = ["xmlns", "viewBox"], no = ["width", "height"], so = ["transform"], ro = ["x", "y", "width", "height", "onMouseover", "onMouseleave", "onClick"], io = ["fill", "font-weight", "x", "y", "font-size", "transform", "stroke", "stroke-width"], uo = {
+  key: 3,
+  class: "vue-data-ui-watermark"
+}, co = {
+  key: 4,
+  "data-dom-to-png-ignore": "",
+  class: "reset-wrapper"
+}, vo = ["innerHTML"], ho = {
+  __name: "vue-ui-word-cloud",
+  props: {
+    config: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    dataset: {
+      type: [Array, String],
+      default() {
+        return [];
+      }
+    }
+  },
+  setup(w, { expose: y }) {
+    kt((t) => ({
+      v5aaba590: t.slicerColor
+    }));
+    const c = q(() => import("./Tooltip-WD0Ros6G.js")), h = q(() => import("./BaseIcon-CofSxalQ.js")), d = q(() => import("./vue-ui-accordion-DSdZUn2C.js")), m = q(() => import("./DataTable-CHaOCmsE.js")), n = q(() => import("./PenAndPaper-HCZQTkqi.js")), l = q(() => import("./UserOptions-B3I-s3Lw.js")), u = q(() => import("./PackageVersion-Bq_mtsqr.js")), A = q(() => import("./BaseDraggableDialog-CRF94NJQ.js")), { vue_ui_word_cloud: S } = Ut(), { isThemeValid: b, warnInvalidTheme: F } = Gt(), C = w, W = H({
+      get() {
+        return !!C.dataset && C.dataset.length;
+      },
+      set(t) {
+        return t;
+      }
+    }), P = v(qe()), U = v(0), x = v(null), he = v(null), me = v(null), fe = v(0), ie = v(0), ee = v(!1), Z = v(null), J = v(null), e = v(K()), { loading: D, FINAL_DATASET: E, manualLoading: X } = Xt({
+      ...wt(C),
+      FINAL_CONFIG: e,
+      prepareConfig: K,
+      skeletonDataset: [
+        { name: "Lorem", value: 6 },
+        { name: "ipsum", value: 3 },
+        { name: "dolor", value: 1 },
+        { name: "sit", value: 3 },
+        { name: "amet", value: 3 },
+        { name: "consectetur", value: 2 },
+        { name: "adipiscing", value: 1 },
+        { name: "elit", value: 2 },
+        { name: "Vivamus", value: 2 },
+        { name: "pulvinar", value: 1 },
+        { name: "pretium", value: 1 },
+        { name: "venenatis", value: 2 },
+        { name: "Donec", value: 1 },
+        { name: "imperdiet", value: 3 },
+        { name: "id", value: 1 },
+        { name: "porttitor", value: 2 },
+        { name: "tristique", value: 1 },
+        { name: "Aenean", value: 2 },
+        { name: "ac", value: 5 },
+        { name: "commodo", value: 2 },
+        { name: "justo", value: 2 },
+        { name: "Vestibulum", value: 2 },
+        { name: "placerat", value: 1 },
+        { name: "molestie", value: 1 },
+        { name: "nisl", value: 1 },
+        { name: "lacinia", value: 2 },
+        { name: "nulla", value: 1 },
+        { name: "posuere", value: 2 },
+        { name: "quis", value: 3 },
+        { name: "ullamcorper", value: 1 },
+        { name: "eu", value: 1 },
+        { name: "ex", value: 1 },
+        { name: "vitae", value: 3 },
+        { name: "facilisis", value: 1 },
+        { name: "Aliquam", value: 1 },
+        { name: "erat", value: 1 },
+        { name: "volutpat", value: 1 },
+        { name: "Proin", value: 1 },
+        { name: "nunc", value: 1 },
+        { name: "felis", value: 1 },
+        { name: "gravida", value: 3 },
+        { name: "sed", value: 1 },
+        { name: "orci", value: 1 },
+        { name: "Interdum", value: 1 },
+        { name: "et", value: 1 },
+        { name: "malesuada", value: 1 },
+        { name: "fames", value: 1 },
+        { name: "ante", value: 1 }
+      ],
+      skeletonConfig: Dt({
+        defaultConfig: e.value,
+        userConfig: {
+          userOptions: { show: !1 },
+          table: { show: !1 },
+          useCssAnimation: !1,
+          animationDelayMs: 0,
+          nodeCategories: {},
+          nodeCategoryColors: {},
+          style: {
+            chart: {
+              backgroundColor: "#99999930",
+              words: {
+                color: "#6A6A6A",
+                usePalette: !1,
+                selectedStroke: "#CCCCCC"
+              }
+            }
+          }
+        }
+      })
+    }), T = v(z());
+    function z() {
+      return typeof E.value == "string" ? Et(E.value) : E.value.map((t, a) => ({
+        ...t,
+        value: zt(t.value)
+      }));
+    }
+    se(() => C.dataset, () => {
+      T.value = z(), xe(), Y();
+    });
+    const { userOptionsVisible: B, setUserOptionsVisibility: te, keepUserOptionState: oe } = qt({ config: e.value }), { svgRef: j } = Ht({ config: e.value.style.chart.title });
+    function K() {
+      const t = Oe({
+        userConfig: C.config,
+        defaultConfig: S
+      }), a = t.theme;
+      if (!a) return t;
+      if (!b.value(t))
+        return F(t), t;
+      const o = Oe({
+        userConfig: st[a] || C.config,
+        defaultConfig: t
+      }), s = Oe({
+        userConfig: C.config,
+        defaultConfig: o
+      });
+      return {
+        ...s,
+        customPalette: s.customPalette.length ? s.customPalette : Bt[a] || Ae
+      };
+    }
+    const M = v({ x: 0, y: 0 });
+    function Y() {
+      const t = {
+        x: 0,
+        y: 0,
+        width: Math.max(10, r.value.width),
+        height: Math.max(10, r.value.height)
+      };
+      vt(t), M.value = {
+        x: t.x + t.width / 2,
+        y: t.y + t.height / 2
+      }, ye();
+    }
+    const I = Mt(() => {
+      xe();
+    }, 10), $ = v(!1);
+    se(() => $.value, (t) => {
+      t === !1 && (I(), Y());
+    }), se(() => C.config, (t) => {
+      e.value = K(), B.value = !e.value.userOptions.showOnChartHover, De(), fe.value += 1, ie.value += 1, O.value.showTable = e.value.table.show, O.value.showTooltip = e.value.style.chart.tooltip.show;
+    }, { deep: !0 });
+    const r = v({
+      width: e.value.style.chart.width,
+      height: e.value.style.chart.height,
+      maxFontSize: e.value.style.chart.words.maxFontSize,
+      minFontSize: e.value.style.chart.words.minFontSize,
+      bold: e.value.style.chart.words.bold
+    }), rt = Ot(() => {
+      $.value = !0;
+      const { width: t, height: a } = Pt({
+        chart: x.value,
+        title: e.value.style.chart.title.text ? he.value : null,
+        source: me.value
+      });
+      requestAnimationFrame(async () => {
+        r.value.width = Math.max(10, t), r.value.height = Math.max(10, a - 12), await Ge(), $.value = !1;
+      });
+    }), G = Xe(null), ae = Xe(null);
+    At(De);
+    const Pe = H(() => !!e.value.debug);
+    function De() {
+      He(C.dataset) ? Ze({
+        componentName: "VueUiWordCloud",
+        type: "dataset",
+        debug: Pe.value
+      }) : T.value.forEach((t, a) => {
+        It({
+          datasetObject: t,
+          requiredAttributes: ["name", "value"]
+        }).forEach((o) => {
+          W.value = !1, Ze({
+            componentName: "VueUiWordCloud",
+            type: "datasetSerieAttribute",
+            property: o,
+            index: a,
+            debug: Pe.value
+          });
+        });
+      }), He(C.dataset) || (X.value = e.value.loading), e.value.responsive && (G.value && (ae.value && G.value.unobserve(ae.value), G.value.disconnect()), G.value = new ResizeObserver(rt), ae.value = x.value.parentNode, G.value.observe(ae.value)), Y();
+    }
+    xt(() => {
+      G.value && (ae.value && G.value.unobserve(ae.value), G.value.disconnect());
+    });
+    const { isPrinting: Ee, isImaging: ze, generatePdf: Be, generateImage: Ie } = Yt({
+      elementId: `wordCloud_${P.value}`,
+      fileName: e.value.style.chart.title.text || "vue-ui-word-cloud",
+      options: e.value.userOptions.print
+    }), O = v({
+      showTable: e.value.table.show,
+      showTooltip: e.value.style.chart.tooltip.show
+    });
+    se(e, () => {
+      O.value = {
+        showTable: e.value.table.show,
+        showTooltip: e.value.style.chart.tooltip.show
+      };
+    }, { immediate: !0 });
+    function it(t, a, o = "Arial") {
+      const g = document.createElement("canvas").getContext("2d");
+      return g.font = `${a}px ${e.value.style.chart.words.bold ? "bold" : "normal"} ${o}`, {
+        width: g.measureText(t).width + e.value.style.chart.words.proximity,
+        height: a
+      };
+    }
+    const ue = v([]);
+    se(() => C.dataset, xe, { immediate: !0 });
+    function xe() {
+      const t = [...T.value].map((g) => g.value), a = Math.max(...t), o = Math.min(...t), s = [...T.value].map((g, N) => {
+        let Q = (g.value - o) / (a - o) * (r.value.maxFontSize - r.value.minFontSize) + r.value.minFontSize;
+        Q = isNaN(Q) ? r.value.minFontSize : Q;
+        const Ue = it(g.name, Q);
+        return {
+          ...g,
+          id: qe(),
+          fontSize: Q,
+          width: Ue.width,
+          height: Ue.height,
+          color: e.value.style.chart.words.usePalette ? e.value.customPalette[N] || e.value.customPalette[N % e.value.customPalette.length] || Ae[N] || Ae[N % Ae.length] : e.value.style.chart.words.color
+        };
+      });
+      ue.value = oo({
+        words: s,
+        svg: r.value,
+        proximity: e.value.style.chart.words.proximity,
+        strictPixelPadding: e.value.strictPixelPadding
+      });
+    }
+    const pe = H(() => {
+      const t = ue.value.map((o) => ({
+        name: o.name,
+        color: o.color
+      })), a = ue.value.map((o) => o.value);
+      return { head: t, body: a };
+    });
+    function Fe(t = null) {
+      Ge(() => {
+        const a = pe.value.head.map((g, N) => [[
+          g.name
+        ], [pe.value.body[N]]]), o = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [[""], [e.value.table.columnNames.value]]].concat(a), s = Rt(o);
+        t ? t(s) : Vt({ csvContent: s, title: e.value.style.chart.title.text || "vue-ui-word-cloud" });
+      });
+    }
+    const ge = H(() => {
+      const t = [
+        e.value.table.columnNames.series,
+        e.value.table.columnNames.value
+      ], a = pe.value.head.map((g, N) => {
+        const Q = Nt({ p: e.value.table.td.prefix, v: pe.value.body[N], s: e.value.table.td.suffix, r: e.value.table.td.roundingValue });
+        return [
+          {
+            color: g.color,
+            name: g.name
+          },
+          Q
+        ];
+      }), 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.series,
+          e.value.table.columnNames.value
+        ],
+        head: t,
+        body: a,
+        config: o
+      };
+    }), le = v(!1);
+    function Ne(t) {
+      le.value = t, U.value += 1;
+    }
+    function ut() {
+      return ue.value;
+    }
+    function _e() {
+      O.value.showTable = !O.value.showTable;
+    }
+    function Re() {
+      O.value.showTooltip = !O.value.showTooltip;
+    }
+    const ce = v(!1);
+    function $e() {
+      ce.value = !ce.value;
+    }
+    const ct = H(() => !ce.value && e.value.style.chart.zoom.show), { viewBox: be, resetZoom: ye, isZoom: dt, setInitialViewBox: vt } = Kt(j, {
+      x: 0,
+      y: 0,
+      width: r.value.width <= 0 ? 10 : r.value.width,
+      height: r.value.height <= 0 ? 10 : r.value.height
+    }, 1, ct);
+    async function ht({ scale: t = 2 } = {}) {
+      if (!x.value) return;
+      const { width: a, height: o } = x.value.getBoundingClientRect(), s = a / o, { imageUri: g, base64: N } = await Zt({ domElement: x.value, base64: !0, img: !0, scale: t });
+      return {
+        imageUri: g,
+        base64: N,
+        title: e.value.style.chart.title.text,
+        width: a,
+        height: o,
+        aspectRatio: s
+      };
+    }
+    const de = H(() => {
+      const t = e.value.table.useDialog && !e.value.table.show, a = O.value.showTable;
+      return {
+        component: t ? A : d,
+        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: le.value,
+          fullscreenParent: x.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
+            }
+          }
+        }
+      };
+    });
+    se(() => O.value.showTable, (t) => {
+      e.value.table.show || (t && e.value.table.useDialog && Z.value ? Z.value.open() : "close" in Z.value && Z.value.close());
+    });
+    function Ve() {
+      O.value.showTable = !1, J.value && J.value.setTableIconState(!1);
+    }
+    const mt = H(() => e.value.style.chart.backgroundColor), ft = H(() => e.value.style.chart.title), { exportSvg: pt, getSvg: gt } = jt({
+      svg: j,
+      title: ft,
+      backgroundColor: mt
+    });
+    async function We({ isCb: t }) {
+      if (t) {
+        const { blob: a, url: o, text: s, dataUrl: g } = await gt();
+        e.value.userOptions.callbacks.svg({ blob: a, url: o, text: s, dataUrl: g });
+      } else
+        pt();
+    }
+    y({
+      getData: ut,
+      getImage: ht,
+      generateCsv: Fe,
+      generatePdf: Be,
+      generateImage: Ie,
+      generateSvg: We,
+      resetZoom: ye,
+      toggleTable: _e,
+      toggleTooltip: Re,
+      toggleAnnotator: $e,
+      toggleFullscreen: Ne
+    });
+    const ne = v(null), ve = v(!1), Se = v(""), Te = v(null);
+    function bt(t, a) {
+      ne.value = null, ee.value = !1, e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: t, seriesIndex: a });
+    }
+    function yt(t, a) {
+      e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: t, seriesIndex: a });
+    }
+    function Ct(t, a) {
+      if (e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: t, seriesIndex: a }), !O.value.showTooltip) return;
+      ne.value = t.id, Te.value = { datapoint: t, config: e.value };
+      const o = e.value.style.chart.tooltip.customFormat;
+      if (ve.value = !1, Wt(o))
+        try {
+          const s = o({
+            datapoint: t,
+            config: e.value
+          });
+          typeof s == "string" && (Se.value = s, ve.value = !0);
+        } catch {
+          console.warn("Custom format cannot be applied."), ve.value = !1;
+        }
+      if (!ve.value) {
+        let s = `<svg viewBox="0 0 10 10" height="${e.value.style.chart.tooltip.fontSize}"><circle cx="5" cy="5" r="5" fill="${t.color}"/></svg><span>${t.name}:</span><b>${(t.value || 0).toFixed(e.value.style.chart.tooltip.roundingValue)}</b>`;
+        Se.value = `<div dir="auto" style="display:flex; gap:4px; align-items:center; jsutify-content:center;">${s}</div>`;
+      }
+      ee.value = !0;
+    }
+    return (t, a) => (k(), _("div", {
+      class: "vue-data-ui-component vue-ui-word-cloud",
+      ref_key: "wordCloudChart",
+      ref: x,
+      id: `wordCloud_${P.value}`,
+      style: Ce(`width: 100%; font-family:${e.value.style.fontFamily};background:${e.value.style.chart.backgroundColor};${e.value.responsive ? "height:100%" : ""}`),
+      onMouseenter: a[2] || (a[2] = () => i(te)(!0)),
+      onMouseleave: a[3] || (a[3] = () => i(te)(!1))
+    }, [
+      e.value.userOptions.buttons.annotator ? (k(), re(i(n), {
+        key: 0,
+        svgRef: i(j),
+        backgroundColor: e.value.style.chart.backgroundColor,
+        color: e.value.style.chart.color,
+        active: ce.value,
+        onClose: $e
+      }, {
+        "annotator-action-close": f(() => [
+          p(t.$slots, "annotator-action-close", {}, void 0, !0)
+        ]),
+        "annotator-action-color": f(({ color: o }) => [
+          p(t.$slots, "annotator-action-color", R(V({ color: o })), void 0, !0)
+        ]),
+        "annotator-action-draw": f(({ mode: o }) => [
+          p(t.$slots, "annotator-action-draw", R(V({ mode: o })), void 0, !0)
+        ]),
+        "annotator-action-undo": f(({ disabled: o }) => [
+          p(t.$slots, "annotator-action-undo", R(V({ disabled: o })), void 0, !0)
+        ]),
+        "annotator-action-redo": f(({ disabled: o }) => [
+          p(t.$slots, "annotator-action-redo", R(V({ disabled: o })), void 0, !0)
+        ]),
+        "annotator-action-delete": f(({ disabled: o }) => [
+          p(t.$slots, "annotator-action-delete", R(V({ disabled: o })), void 0, !0)
+        ]),
+        _: 3
+      }, 8, ["svgRef", "backgroundColor", "color", "active"])) : L("", !0),
+      e.value.style.chart.title.text ? (k(), _("div", {
+        key: 1,
+        ref_key: "chartTitle",
+        ref: he,
+        style: "width:100%;background:transparent;padding-bottom:24px"
+      }, [
+        (k(), re(Jt, {
+          key: `title_${fe.value}`,
+          config: {
+            title: {
+              ...e.value.style.chart.title
+            },
+            subtitle: {
+              ...e.value.style.chart.title.subtitle
+            }
+          }
+        }, null, 8, ["config"]))
+      ], 512)) : L("", !0),
+      e.value.userOptions.show && W.value && (i(oe) || i(B)) ? (k(), re(i(l), {
+        ref_key: "userOptionsRef",
+        ref: J,
+        key: `user_option_${U.value}`,
+        backgroundColor: e.value.style.chart.backgroundColor,
+        color: e.value.style.chart.color,
+        isPrinting: i(Ee),
+        isImaging: i(ze),
+        uid: P.value,
+        hasPdf: e.value.userOptions.buttons.pdf,
+        hasXls: e.value.userOptions.buttons.csv,
+        hasImg: e.value.userOptions.buttons.img,
+        hasSvg: e.value.userOptions.buttons.svg,
+        hasTable: e.value.userOptions.buttons.table,
+        hasFullscreen: e.value.userOptions.buttons.fullscreen,
+        isFullscreen: le.value,
+        titles: { ...e.value.userOptions.buttonTitles },
+        chartElement: x.value,
+        position: e.value.userOptions.position,
+        hasTooltip: e.value.style.chart.tooltip.show && e.value.userOptions.buttons.tooltip,
+        isTooltip: O.value.showTooltip,
+        hasAnnotator: e.value.userOptions.buttons.annotator,
+        isAnnotation: ce.value,
+        callbacks: e.value.userOptions.callbacks,
+        printScale: e.value.userOptions.print.scale,
+        tableDialog: e.value.table.useDialog,
+        onToggleFullscreen: Ne,
+        onGeneratePdf: i(Be),
+        onGenerateCsv: Fe,
+        onGenerateImage: i(Ie),
+        onGenerateSvg: We,
+        onToggleTable: _e,
+        onToggleTooltip: Re,
+        onToggleAnnotator: $e,
+        style: Ce({
+          visibility: i(oe) ? i(B) ? "visible" : "hidden" : "visible"
+        })
+      }, Le({ _: 2 }, [
+        t.$slots.menuIcon ? {
+          name: "menuIcon",
+          fn: f(({ isOpen: o, color: s }) => [
+            p(t.$slots, "menuIcon", R(V({ isOpen: o, color: s })), void 0, !0)
+          ]),
+          key: "0"
+        } : void 0,
+        t.$slots.optionPdf ? {
+          name: "optionPdf",
+          fn: f(() => [
+            p(t.$slots, "optionPdf", {}, void 0, !0)
+          ]),
+          key: "1"
+        } : void 0,
+        t.$slots.optionCsv ? {
+          name: "optionCsv",
+          fn: f(() => [
+            p(t.$slots, "optionCsv", {}, void 0, !0)
+          ]),
+          key: "2"
+        } : void 0,
+        t.$slots.optionImg ? {
+          name: "optionImg",
+          fn: f(() => [
+            p(t.$slots, "optionImg", {}, void 0, !0)
+          ]),
+          key: "3"
+        } : void 0,
+        t.$slots.optionSvg ? {
+          name: "optionSvg",
+          fn: f(() => [
+            p(t.$slots, "optionSvg", {}, void 0, !0)
+          ]),
+          key: "4"
+        } : void 0,
+        t.$slots.optionTable ? {
+          name: "optionTable",
+          fn: f(() => [
+            p(t.$slots, "optionTable", {}, void 0, !0)
+          ]),
+          key: "5"
+        } : void 0,
+        t.$slots.optionFullscreen ? {
+          name: "optionFullscreen",
+          fn: f(({ toggleFullscreen: o, isFullscreen: s }) => [
+            p(t.$slots, "optionFullscreen", R(V({ toggleFullscreen: o, isFullscreen: s })), void 0, !0)
+          ]),
+          key: "6"
+        } : void 0,
+        t.$slots.optionAnnotator ? {
+          name: "optionAnnotator",
+          fn: f(({ toggleAnnotator: o, isAnnotator: s }) => [
+            p(t.$slots, "optionAnnotator", R(V({ toggleAnnotator: o, isAnnotator: s })), void 0, !0)
+          ]),
+          key: "7"
+        } : void 0
+      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasPdf", "hasXls", "hasImg", "hasSvg", "hasTable", "hasFullscreen", "isFullscreen", "titles", "chartElement", "position", "hasTooltip", "isTooltip", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "tableDialog", "onGeneratePdf", "onGenerateImage", "style"])) : L("", !0),
+      (k(), _("svg", {
+        ref_key: "svgRef",
+        ref: j,
+        class: Ye({ "vue-data-ui-fullscreen--on": le.value, "vue-data-ui-fulscreen--off": !le.value }),
+        xmlns: i(_t),
+        viewBox: `${i(be).x} ${i(be).y} ${i(be).width} ${i(be).height}`,
+        style: "overflow:hidden;background:transparent;"
+      }, [
+        ke(i(u)),
+        t.$slots["chart-background"] ? (k(), _("foreignObject", {
+          key: 0,
+          x: 0,
+          y: 0,
+          width: r.value.width <= 0 ? 10 : r.value.width,
+          height: r.value.height <= 0 ? 10 : r.value.height,
+          style: {
+            pointerEvents: "none"
+          }
+        }, [
+          p(t.$slots, "chart-background", {}, void 0, !0)
+        ], 8, no)) : L("", !0),
+        we("g", {
+          transform: `translate(${M.value.x}, ${M.value.y})`
+        }, [
+          (k(!0), _(Ft, null, $t(ue.value, (o, s) => (k(), _("g", null, [
+            o.minX !== void 0 ? (k(), _("rect", {
+              key: 0,
+              x: o.x + o.minX,
+              y: o.y + o.minY * 1.25,
+              width: o.maxX - o.minX,
+              height: o.maxY - o.minY,
+              fill: "transparent",
+              "pointer-events": "visiblePainted",
+              onMouseover: (g) => Ct(o, s),
+              onMouseleave: (g) => bt(o, s),
+              onClick: (g) => yt(o, s)
+            }, null, 40, ro)) : L("", !0),
+            (k(), _("text", {
+              fill: o.color,
+              "font-weight": e.value.style.chart.words.bold ? "bold" : "normal",
+              key: s,
+              x: o.x,
+              y: o.y,
+              "font-size": o.fontSize,
+              transform: `translate(${o.width / 2}, ${o.height / 2})`,
+              class: Ye({ animated: e.value.useCssAnimation && !i(D) }),
+              "text-anchor": "middle",
+              "dominant-baseline": "central",
+              "paint-order": "stroke fill",
+              stroke: !ne.value || ne.value === o.id ? e.value.style.chart.words.selectedStroke : void 0,
+              "stroke-width": o.height * 0.05,
+              "stroke-linecap": "round",
+              "stroke-linejoin": "round",
+              style: Ce(`
+                            animation-delay:${s * e.value.animationDelayMs}ms !important;
+                            pointer-events:none;
+                            fill-opacity:${!ne.value || ne.value === o.id ? 1 : e.value.style.chart.words.hoverOpacity} !important;
+                            transition:fill-opacity 0.3s ease-in-out !important;
+                        `)
+            }, Me(o.name), 15, io))
+          ]))), 256))
+        ], 8, so),
+        p(t.$slots, "svg", {
+          svg: { height: r.value.height, width: r.value.width }
+        }, void 0, !0)
+      ], 10, lo)),
+      t.$slots.watermark ? (k(), _("div", uo, [
+        p(t.$slots, "watermark", R(V({ isPrinting: i(Ee) || i(ze) })), void 0, !0)
+      ])) : L("", !0),
+      i(dt) ? (k(), _("div", co, [
+        p(t.$slots, "reset-action", { reset: i(ye) }, () => [
+          we("button", {
+            "data-cy-reset": "",
+            tabindex: "0",
+            role: "button",
+            class: "vue-data-ui-refresh-button",
+            style: Ce({
+              background: e.value.style.chart.backgroundColor
+            }),
+            onClick: a[0] || (a[0] = (o) => i(ye)(!0))
+          }, [
+            ke(i(h), {
+              name: "refresh",
+              stroke: e.value.style.chart.color
+            }, null, 8, ["stroke"])
+          ], 4)
+        ], !0)
+      ])) : L("", !0),
+      ke(i(c), {
+        show: O.value.showTooltip && ee.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: x.value,
+        content: Se.value,
+        isCustom: ve.value,
+        isFullscreen: le.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.smoothSnapThreshold
+      }, {
+        "tooltip-before": f(() => [
+          p(t.$slots, "tooltip-before", R(V({ ...Te.value })), void 0, !0)
+        ]),
+        "tooltip-after": f(() => [
+          p(t.$slots, "tooltip-after", R(V({ ...Te.value })), void 0, !0)
+        ]),
+        _: 3
+      }, 8, ["show", "backgroundColor", "color", "fontSize", "borderRadius", "borderColor", "borderWidth", "backgroundOpacity", "position", "offsetY", "parent", "content", "isCustom", "isFullscreen", "smooth", "backdropFilter", "smoothForce", "smoothSnapThreshold"]),
+      t.$slots.source ? (k(), _("div", {
+        key: 5,
+        ref_key: "source",
+        ref: me,
+        dir: "auto"
+      }, [
+        p(t.$slots, "source", {}, void 0, !0)
+      ], 512)) : L("", !0),
+      W.value && e.value.userOptions.buttons.table ? (k(), re(St(de.value.component), Tt({ key: 6 }, de.value.props, {
+        ref_key: "tableUnit",
+        ref: Z,
+        onClose: Ve
+      }), Le({
+        content: f(() => [
+          (k(), re(i(m), {
+            key: `table_${ie.value}`,
+            colNames: ge.value.colNames,
+            head: ge.value.head,
+            body: ge.value.body,
+            config: ge.value.config,
+            title: e.value.table.useDialog ? "" : de.value.title,
+            withCloseButton: !e.value.table.useDialog,
+            onClose: Ve
+          }, {
+            th: f(({ th: o }) => [
+              we("div", {
+                innerHTML: o,
+                style: { display: "flex", "align-items": "center" }
+              }, null, 8, vo)
+            ]),
+            td: f(({ td: o }) => [
+              je(Me(o.name || o), 1)
+            ]),
+            _: 1
+          }, 8, ["colNames", "head", "body", "config", "title", "withCloseButton"]))
+        ]),
+        _: 2
+      }, [
+        e.value.table.useDialog ? {
+          name: "title",
+          fn: f(() => [
+            je(Me(de.value.title), 1)
+          ]),
+          key: "0"
+        } : void 0,
+        e.value.table.useDialog ? {
+          name: "actions",
+          fn: f(() => [
+            we("button", {
+              tabindex: "0",
+              class: "vue-ui-user-options-button",
+              onClick: a[1] || (a[1] = (o) => Fe(e.value.userOptions.callbacks.csv))
+            }, [
+              ke(i(h), {
+                name: "excel",
+                stroke: de.value.props.color
+              }, null, 8, ["stroke"])
+            ])
+          ]),
+          key: "1"
+        } : void 0
+      ]), 1040)) : L("", !0),
+      i(D) ? (k(), re(Lt, { key: 7 })) : L("", !0)
+    ], 44, ao));
+  }
+}, mo = /* @__PURE__ */ Qt(ho, [["__scopeId", "data-v-fb316a5e"]]), Oo = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  default: mo
+}, Symbol.toStringTag, { value: "Module" }));
+export {
+  Mo as a,
+  Oo as b,
+  mo as v
+};