vue-data-ui 2.4.1 → 2.4.2

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

@@ -0,0 +1,598 @@
+import { useCssVars as Re, computed as p, openBlock as u, createElementBlock as f, createVNode as oe, renderSlot as v, createElementVNode as x, normalizeStyle as ae, pushScopeId as Be, popScopeId as De, ref as s, watch as te, onMounted as Ve, onBeforeUnmount as Ee, createBlock as z, createCommentVNode as w, unref as $, createSlots as Ue, withCtx as d, normalizeProps as A, guardReactiveProps as I, normalizeClass as pe, Fragment as Ge, renderList as Le, toDisplayString as ge, createTextVNode as Xe, nextTick as ye } from "vue";
+import { u as je, _ as Ye, v as qe, c as be, t as He, a as Je, p as X, o as Ke, e as Ce, g as Qe, f as Ze, X as et, q as tt, r as ot, x as at } from "./index-DnVHQ2xI.js";
+import { _ as lt } from "./Title-5VmBwT4i.js";
+import { u as nt, U as st } from "./usePrinter-BEeNAqS5.js";
+import { d as rt, t as ut, u as it } from "./useResponsive-NZB-WLRF.js";
+import ct from "./vue-ui-accordion-DspS4q3f.js";
+import { D as dt } from "./DataTable-DTk7C4Pr.js";
+import vt from "./BaseIcon-rRli6Sfv.js";
+import { _ as we } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+import { u as ke } from "./useNestedProp-Cox0K0Y5.js";
+import { _ as ht } from "./PackageVersion-CvCRsT5_.js";
+import { _ as mt } from "./Tooltip-Cj4EF7v1.js";
+import { P as ft } from "./PenAndPaper-Jb0pLt3G.js";
+const pt = (c) => (Be("data-v-3fd7d274"), c = c(), De(), c), gt = { "data-html2canvas-ignore": "" }, yt = {
+  key: 0,
+  class: "reset-wrapper"
+}, bt = {
+  key: 1,
+  class: "reset-wrapper"
+}, Ct = { class: "mono-slicer" }, kt = /* @__PURE__ */ pt(() => /* @__PURE__ */ x("div", { class: "slider-track" }, null, -1)), wt = ["min", "max", "value"], $t = {
+  __name: "MonoSlicer",
+  props: {
+    min: {
+      type: Number,
+      default: 0
+    },
+    max: {
+      type: Number,
+      default: 0
+    },
+    inputColor: {
+      type: String,
+      default: "#1A1A1A"
+    },
+    background: {
+      type: String,
+      default: "#FFFFFF"
+    },
+    borderColor: {
+      type: String,
+      default: "#FFFFFF"
+    },
+    selectColor: {
+      type: String,
+      default: "#4A4A4A"
+    },
+    textColor: {
+      type: String,
+      default: "#1A1A1A"
+    },
+    useResetSlot: {
+      type: Boolean,
+      default: !1
+    },
+    value: {
+      type: Number,
+      default: 0
+    },
+    source: {
+      type: Number,
+      default: 0
+    }
+  },
+  emits: ["update:value", "reset"],
+  setup(c, { emit: B }) {
+    const n = c;
+    Re((k) => ({
+      "90ad3208": j.value,
+      "4f9eef70": O.value,
+      "6e07ae3e": C.value,
+      "2fd430a0": c.selectColor,
+      "6b8169a4": T.value
+    }));
+    const j = p(() => n.inputColor), T = p(() => n.background), C = p(() => `${n.selectColor}33`), O = p(() => n.borderColor);
+    function M() {
+      B("reset");
+    }
+    const g = p(() => {
+      const k = n.max - n.min, y = 0, S = (n.value - n.min) / k * 100;
+      return {
+        left: `${y}%`,
+        width: `${S - y}%`,
+        background: n.selectColor
+      };
+    });
+    return (k, y) => (u(), f("div", gt, [
+      c.value !== c.source ? (u(), f("div", yt, [
+        c.useResetSlot ? v(k.$slots, "reset-action", {
+          key: 1,
+          reset: M
+        }, void 0, !0) : (u(), f("button", {
+          key: 0,
+          "data-cy-reset": "",
+          tabindex: "0",
+          role: "button",
+          class: "vue-data-ui-refresh-button",
+          onClick: M
+        }, [
+          oe(vt, {
+            name: "refresh",
+            stroke: c.textColor
+          }, null, 8, ["stroke"])
+        ]))
+      ])) : (u(), f("div", bt)),
+      x("div", Ct, [
+        kt,
+        x("div", {
+          class: "range-highlight",
+          style: ae(g.value)
+        }, null, 4),
+        x("input", {
+          type: "range",
+          min: c.min,
+          max: c.max,
+          value: Number(c.value),
+          onInput: y[0] || (y[0] = (S) => B("update:value", Number(S.target.value)))
+        }, null, 40, wt)
+      ])
+    ]));
+  }
+}, xt = /* @__PURE__ */ we($t, [["__scopeId", "data-v-3fd7d274"]]), Tt = ["id"], St = ["xmlns", "viewBox"], Ft = ["transform"], _t = ["fill", "font-weight", "x", "y", "font-size", "transform", "onMouseover"], Nt = {
+  key: 4,
+  class: "vue-data-ui-watermark"
+}, Pt = ["innerHTML"], zt = {
+  __name: "vue-ui-word-cloud",
+  props: {
+    config: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    dataset: {
+      type: [Array, String],
+      default() {
+        return [];
+      }
+    }
+  },
+  setup(c, { expose: B }) {
+    const n = c, { vue_ui_word_cloud: j } = je(), T = p({
+      get() {
+        return !!n.dataset && n.dataset.length;
+      },
+      set(t) {
+        return t;
+      }
+    }), C = s(typeof n.dataset == "string" ? Ye(n.dataset) : n.dataset.map((t) => ({
+      ...t,
+      value: qe(t.value)
+    }))), O = s(be()), M = s(0), g = s(null), k = s(null), y = s(0), S = s(0), Y = s(!1), e = p({
+      get: () => le(),
+      set: (t) => t
+    });
+    function le() {
+      const t = ke({
+        userConfig: n.config,
+        defaultConfig: j
+      });
+      return t.theme ? {
+        ...ke({
+          userConfig: He.vue_ui_word_cloud[t.theme] || n.config,
+          defaultConfig: t
+        }),
+        customPalette: Je[t.theme] || X
+      } : t;
+    }
+    te(() => n.config, (t) => {
+      e.value = le(), se(), y.value += 1, S.value += 1, q();
+    }, { deep: !0 });
+    const ne = s(null), F = s(0), r = s({
+      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
+    }), $e = ut(() => {
+      const { width: t, height: a } = it({
+        chart: g.value,
+        title: e.value.style.chart.title.text ? k.value : null,
+        slicer: e.value.style.chart.zoom.show && ne.value
+      });
+      r.value.width = t, r.value.height = a, ye(H);
+    });
+    te(() => F.value, () => {
+      xe();
+    });
+    const xe = rt(() => {
+      H();
+    }, 10);
+    function q() {
+      F.value = de.value;
+    }
+    const D = s(null);
+    Ve(() => {
+      se(), q();
+    });
+    function se() {
+      Ke(n.dataset) ? Ce({
+        componentName: "VueUiWordCloud",
+        type: "dataset"
+      }) : C.value.forEach((t, a) => {
+        Qe({
+          datasetObject: t,
+          requiredAttributes: ["name", "value"]
+        }).forEach((o) => {
+          T.value = !1, Ce({
+            componentName: "VueUiWordCloud",
+            type: "datasetSerieAttribute",
+            property: o,
+            index: a
+          });
+        });
+      }), e.value.responsive && (D.value = new ResizeObserver($e), D.value.observe(g.value.parentNode));
+    }
+    Ee(() => {
+      D.value && D.value.disconnect();
+    });
+    const { isPrinting: re, isImaging: ue, generatePdf: ie, generateImage: ce } = nt({
+      elementId: `wordCloud_${O.value}`,
+      fileName: e.value.style.chart.title.text || "vue-ui-word-cloud"
+    }), h = s({
+      showTable: e.value.table.show,
+      showTooltip: e.value.style.chart.tooltip.show
+    });
+    function Te(t, a, o = "Arial") {
+      const l = document.createElement("canvas").getContext("2d");
+      return l.font = `${a}px ${e.value.style.chart.words.bold ? "bold" : "normal"} ${o}`, {
+        width: l.measureText(t).width + e.value.style.chart.words.proximity,
+        height: a
+      };
+    }
+    function Se(t, a) {
+      return t.x < a.x + a.width && t.x + t.width > a.x && t.y < a.y + a.height && t.y + t.height > a.y;
+    }
+    function Fe(t, a, o) {
+      const i = [], l = { x: -a / 2, y: -o / 2, width: a, height: o }, m = 0, N = 0;
+      return t.forEach((P) => {
+        let Z = !1;
+        for (let L = 0; L < Math.max(a, o) / 2 && !Z; L += e.value.style.chart.words.packingWeight)
+          for (let ee = 0; ee < 360 && !Z; ee += e.value.style.chart.words.packingWeight) {
+            const fe = ee * Math.PI / 180, Ae = m + L * Math.cos(fe) - P.width / 2, Ie = N + L * Math.sin(fe) - P.height / 2, b = { ...P, x: Ae, y: Ie }, Oe = b.x >= l.x && b.y >= l.y && b.x + b.width <= l.x + l.width && b.y + b.height <= l.y + l.height, Me = i.some((We) => Se(b, We));
+            Oe && !Me && (i.push(b), Z = !0);
+          }
+      }), i;
+    }
+    const W = s([]);
+    te(() => n.dataset, H, { immediate: !0 });
+    const de = p(() => Math.min(...C.value.map((t) => t.value))), _e = p(() => Math.max(...C.value.map((t) => t.value)));
+    function H() {
+      const t = [...C.value].filter((l) => l.value >= F.value).map((l) => l.value), a = Math.max(...t), o = Math.min(...t), i = [...C.value].filter((l) => l.value >= F.value).map((l, m) => {
+        const N = (l.value - o) / (a - o) * (r.value.maxFontSize - r.value.minFontSize) + r.value.minFontSize, P = Te(l.name, N);
+        return {
+          ...l,
+          id: be(),
+          fontSize: N,
+          width: P.width,
+          height: P.height,
+          color: e.value.style.chart.words.usePalette ? e.value.customPalette[m] || e.value.customPalette[m % e.value.customPalette.length] || X[m] || X[m % X.length] : e.value.style.chart.words.color
+        };
+      });
+      W.value = Fe(i, r.value.width, r.value.height).sort((l, m) => m.fontSize - l.fontSize);
+    }
+    const V = p(() => {
+      const t = W.value.map((o) => ({
+        name: o.name,
+        color: o.color
+      })), a = W.value.map((o) => o.value);
+      return { head: t, body: a };
+    });
+    function ve() {
+      ye(() => {
+        const t = V.value.head.map((i, l) => [[
+          i.name
+        ], [V.value.body[l]]]), a = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [[""], [e.value.table.columnNames.value]]].concat(t), o = tt(a);
+        ot({ csvContent: o, title: e.value.style.chart.title.text || "vue-ui-word-cloud" });
+      });
+    }
+    const E = p(() => {
+      const t = [
+        e.value.table.columnNames.series,
+        e.value.table.columnNames.value
+      ], a = V.value.head.map((l, m) => {
+        const N = Ze({ p: e.value.table.td.prefix, v: V.value.body[m], s: e.value.table.td.suffix, r: e.value.table.td.roundingValue });
+        return [
+          {
+            color: l.color,
+            name: l.name
+          },
+          N
+        ];
+      }), 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
+      };
+    }), U = s(!1);
+    function Ne(t) {
+      U.value = t, M.value += 1;
+    }
+    function Pe() {
+      return W.value;
+    }
+    function he() {
+      h.value.showTable = !h.value.showTable;
+    }
+    function me() {
+      h.value.showTooltip = !h.value.showTooltip;
+    }
+    const G = s(!1);
+    function J() {
+      G.value = !G.value;
+    }
+    B({
+      getData: Pe,
+      generateCsv: ve,
+      generatePdf: ie,
+      generateImage: ce,
+      toggleTable: he,
+      toggleTooltip: me,
+      toggleAnnotator: J
+    });
+    const _ = s(null), R = s(!1), K = s(""), Q = s(null);
+    function ze(t) {
+      if (!h.value.showTooltip) return;
+      _.value = t.id, Q.value = { datapoint: t, config: e.value };
+      const a = e.value.style.chart.tooltip.customFormat;
+      if (R.value = !1, at(a))
+        try {
+          const o = a({
+            datapoint: t,
+            config: e.value
+          });
+          typeof o == "string" && (K.value = o, R.value = !0);
+        } catch {
+          console.warn("Custom format cannot be applied."), R.value = !1;
+        }
+      if (!R.value) {
+        let o = `<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>`;
+        K.value = `<div dir="auto" style="display:flex; gap:4px; align-items:center; jsutify-content:center;">${o}</div>`;
+      }
+      Y.value = !0;
+    }
+    return (t, a) => (u(), f("div", {
+      class: "vue-ui-word-cloud",
+      ref_key: "wordCloudChart",
+      ref: g,
+      id: `wordCloud_${O.value}`,
+      style: ae(`width: 100%; font-family:${e.value.style.fontFamily};background:${e.value.style.chart.backgroundColor};${e.value.responsive ? "height:100%" : ""}`)
+    }, [
+      e.value.userOptions.buttons.annotator ? (u(), z(ft, {
+        key: 0,
+        parent: g.value,
+        backgroundColor: e.value.style.chart.backgroundColor,
+        color: e.value.style.chart.color,
+        active: G.value,
+        onClose: J
+      }, null, 8, ["parent", "backgroundColor", "color", "active"])) : w("", !0),
+      e.value.style.chart.title.text ? (u(), f("div", {
+        key: 1,
+        ref_key: "chartTitle",
+        ref: k,
+        style: "width:100%;background:transparent;padding-bottom:24px"
+      }, [
+        (u(), z(lt, {
+          key: `title_${y.value}`,
+          config: {
+            title: {
+              ...e.value.style.chart.title
+            },
+            subtitle: {
+              ...e.value.style.chart.title.subtitle
+            }
+          }
+        }, null, 8, ["config"]))
+      ], 512)) : w("", !0),
+      e.value.userOptions.show && T.value ? (u(), z(st, {
+        ref: "details",
+        key: `user_option_${M.value}`,
+        backgroundColor: e.value.style.chart.backgroundColor,
+        color: e.value.style.chart.color,
+        isPrinting: $(re),
+        isImaging: $(ue),
+        uid: O.value,
+        hasPdf: e.value.userOptions.buttons.pdf,
+        hasXls: e.value.userOptions.buttons.csv,
+        hasImg: e.value.userOptions.buttons.img,
+        hasTable: e.value.userOptions.buttons.table,
+        hasFullscreen: e.value.userOptions.buttons.fullscreen,
+        isFullscreen: U.value,
+        titles: { ...e.value.userOptions.buttonTitles },
+        chartElement: g.value,
+        position: e.value.userOptions.position,
+        hasTooltip: e.value.style.chart.tooltip.show && e.value.userOptions.buttons.tooltip,
+        isTooltip: h.value.showTooltip,
+        hasAnnotator: e.value.userOptions.buttons.annotator,
+        isAnnotation: G.value,
+        onToggleFullscreen: Ne,
+        onGeneratePdf: $(ie),
+        onGenerateCsv: ve,
+        onGenerateImage: $(ce),
+        onToggleTable: he,
+        onToggleTooltip: me,
+        onToggleAnnotator: J
+      }, Ue({ _: 2 }, [
+        t.$slots.optionPdf ? {
+          name: "optionPdf",
+          fn: d(() => [
+            v(t.$slots, "optionPdf", {}, void 0, !0)
+          ]),
+          key: "0"
+        } : void 0,
+        t.$slots.optionCsv ? {
+          name: "optionCsv",
+          fn: d(() => [
+            v(t.$slots, "optionCsv", {}, void 0, !0)
+          ]),
+          key: "1"
+        } : void 0,
+        t.$slots.optionImg ? {
+          name: "optionImg",
+          fn: d(() => [
+            v(t.$slots, "optionImg", {}, void 0, !0)
+          ]),
+          key: "2"
+        } : void 0,
+        t.$slots.optionTable ? {
+          name: "optionTable",
+          fn: d(() => [
+            v(t.$slots, "optionTable", {}, void 0, !0)
+          ]),
+          key: "3"
+        } : void 0,
+        t.$slots.optionFullscreen ? {
+          name: "optionFullscreen",
+          fn: d(({ toggleFullscreen: o, isFullscreen: i }) => [
+            v(t.$slots, "optionFullscreen", A(I({ toggleFullscreen: o, isFullscreen: i })), void 0, !0)
+          ]),
+          key: "4"
+        } : void 0,
+        t.$slots.optionAnnotator ? {
+          name: "optionAnnotator",
+          fn: d(({ toggleAnnotator: o, isAnnotator: i }) => [
+            v(t.$slots, "optionAnnotator", A(I({ toggleAnnotator: o, isAnnotator: i })), void 0, !0)
+          ]),
+          key: "5"
+        } : void 0
+      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasPdf", "hasXls", "hasImg", "hasTable", "hasFullscreen", "isFullscreen", "titles", "chartElement", "position", "hasTooltip", "isTooltip", "hasAnnotator", "isAnnotation", "onGeneratePdf", "onGenerateImage"])) : w("", !0),
+      T.value ? (u(), f("svg", {
+        key: 3,
+        class: pe({ "vue-data-ui-fullscreen--on": U.value, "vue-data-ui-fulscreen--off": !U.value }),
+        xmlns: $(et),
+        viewBox: `0 0 ${r.value.width <= 0 ? 10 : r.value.width} ${r.value.height <= 0 ? 10 : r.value.height}`,
+        style: "overflow:visible;background:transparent;"
+      }, [
+        oe(ht),
+        x("g", {
+          transform: `translate(${(r.value.width <= 0 ? 10 : r.value.width) / 2}, ${(r.value.height <= 0 ? 10 : r.value.height) / 2})`
+        }, [
+          (u(!0), f(Ge, null, Le(W.value, (o, i) => (u(), f("g", null, [
+            (u(), f("text", {
+              fill: o.color,
+              "font-weight": e.value.style.chart.words.bold ? "bold" : "normal",
+              key: i,
+              x: o.x,
+              y: o.y,
+              "font-size": o.fontSize,
+              transform: `translate(${o.width / 2}, ${o.height / 2})`,
+              class: pe({ animated: e.value.useCssAnimation, "word-selected": _.value && _.value === o.id && h.value.showTooltip, "word-not-selected": _.value && _.value !== o.id && h.value.showTooltip }),
+              "text-anchor": "middle",
+              "dominant-baseline": "middle",
+              onMouseover: (l) => ze(o),
+              onMouseleave: a[0] || (a[0] = (l) => {
+                _.value = null, Y.value = !1;
+              }),
+              style: ae(`animation-delay:${i * e.value.animationDelayMs}ms !important;`)
+            }, ge(o.name), 47, _t))
+          ]))), 256))
+        ], 8, Ft),
+        v(t.$slots, "svg", {
+          svg: { height: r.value.height, width: r.value.width }
+        }, void 0, !0)
+      ], 10, St)) : w("", !0),
+      t.$slots.watermark ? (u(), f("div", Nt, [
+        v(t.$slots, "watermark", A(I({ isPrinting: $(re) || $(ue) })), void 0, !0)
+      ])) : w("", !0),
+      oe(mt, {
+        show: h.value.showTooltip && Y.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: g.value,
+        content: K.value,
+        isCustom: R.value
+      }, {
+        "tooltip-before": d(() => [
+          v(t.$slots, "tooltip-before", A(I({ ...Q.value })), void 0, !0)
+        ]),
+        "tooltip-after": d(() => [
+          v(t.$slots, "tooltip-after", A(I({ ...Q.value })), void 0, !0)
+        ]),
+        _: 3
+      }, 8, ["show", "backgroundColor", "color", "fontSize", "borderRadius", "borderColor", "borderWidth", "backgroundOpacity", "position", "offsetY", "parent", "content", "isCustom"]),
+      x("div", {
+        ref_key: "chartSlicer",
+        ref: ne,
+        style: "width:100%;background:transparent",
+        "data-html2canvas-ignore": ""
+      }, [
+        e.value.style.chart.zoom.show ? (u(), z(xt, {
+          key: 0,
+          value: F.value,
+          "onUpdate:value": a[1] || (a[1] = (o) => F.value = o),
+          min: de.value,
+          max: _e.value,
+          textColor: e.value.style.chart.color,
+          inputColor: e.value.style.chart.zoom.color,
+          selectColor: e.value.style.chart.zoom.highlightColor,
+          useResetSlot: e.value.style.chart.zoom.useResetSlot,
+          background: e.value.style.chart.zoom.color,
+          borderColor: e.value.style.chart.backgroundColor,
+          source: e.value.style.chart.width,
+          onReset: q
+        }, {
+          "reset-action": d(({ reset: o }) => [
+            v(t.$slots, "reset-action", A(I({ reset: o })), void 0, !0)
+          ]),
+          _: 3
+        }, 8, ["value", "min", "max", "textColor", "inputColor", "selectColor", "useResetSlot", "background", "borderColor", "source"])) : w("", !0)
+      ], 512),
+      T.value ? (u(), z(ct, {
+        key: 5,
+        hideDetails: "",
+        config: {
+          open: h.value.showTable,
+          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
+          }
+        }
+      }, {
+        content: d(() => [
+          (u(), z(dt, {
+            key: `table_${S.value}`,
+            colNames: E.value.colNames,
+            head: E.value.head,
+            body: E.value.body,
+            config: E.value.config,
+            title: `${e.value.style.chart.title.text}${e.value.style.chart.title.subtitle.text ? ` : ${e.value.style.chart.title.subtitle.text}` : ""}`,
+            onClose: a[2] || (a[2] = (o) => h.value.showTable = !1)
+          }, {
+            th: d(({ th: o }) => [
+              x("div", {
+                innerHTML: o,
+                style: { display: "flex", "align-items": "center" }
+              }, null, 8, Pt)
+            ]),
+            td: d(({ td: o }) => [
+              Xe(ge(o.name || o), 1)
+            ]),
+            _: 1
+          }, 8, ["colNames", "head", "body", "config", "title"]))
+        ]),
+        _: 1
+      }, 8, ["config"])) : w("", !0)
+    ], 12, Tt));
+  }
+}, Xt = /* @__PURE__ */ we(zt, [["__scopeId", "data-v-23646184"]]);
+export {
+  Xt as default
+};