vue-data-ui 3.7.6 → 3.7.7

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

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