vue-data-ui 2.12.6 → 2.12.7-beta.0

package/dist/vue-ui-word-cloud-3-r8HwO_.js

@@ -0,0 +1,642 @@
+import { useCssVars as De, defineAsyncComponent as j, computed as se, ref as g, watch as be, shallowRef as Fe, onMounted as Ee, onBeforeUnmount as Ue, createElementBlock as N, openBlock as x, unref as r, normalizeStyle as he, createBlock as ie, createCommentVNode as B, createVNode as we, createSlots as Ge, withCtx as O, renderSlot as F, normalizeProps as Q, guardReactiveProps as ee, normalizeClass as Me, createElementVNode as Ce, Fragment as Le, renderList as je, toDisplayString as Pe, createTextVNode as He, nextTick as ze } from "vue";
+import { u as qe, c as Ae, aj as Ze, v as Je, t as Ke, p as me, a as Qe, o as et, e as Oe, g as tt, f as ot, X as at, q as lt, r as nt, x as st } from "./index-BiHmNd1-.js";
+import { t as it, u as rt, d as ut } from "./useResponsive-JZ9xq-JV.js";
+import { u as Ne } from "./useNestedProp-tRqS0ZAM.js";
+import { u as ct } from "./usePrinter-CRCbl1WG.js";
+import { u as dt } from "./useUserOptionState-BIvW1Kz7.js";
+import { u as vt } from "./useChartAccessibility-9icAAmYg.js";
+import { u as ht } from "./usePanZoom-BQMvRXEQ.js";
+import mt from "./Title-B5qqUI3M.js";
+import { _ as ft } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+function pt(w, p) {
+  const { width: u, height: f } = w, m = p.getImageData(0, 0, u, f).data;
+  let l = u, a = f, s = 0, C = 0, d = !1;
+  for (let h = 0; h < f; h += 1)
+    for (let y = 0; y < u; y += 1)
+      m[(h * u + y) * 4 + 3] > 1 && (d = !0, y < l && (l = y), y > s && (s = y), h < a && (a = h), h > C && (C = h));
+  return d ? [l, a, s, C] : [0, 0, 0, 0];
+}
+function Ie({
+  word: w,
+  fontSize: p,
+  pad: u,
+  canvas: f,
+  ctx: c,
+  svg: m
+}) {
+  c.save(), c.font = `${m.style && m.style.bold ? "bold " : ""}${p}px Arial`;
+  const l = c.measureText(w.name), a = Math.ceil(l.width) + 2 + (u ? u * 2 : 0), s = Math.ceil(p) + 2 + (u ? u * 2 : 0);
+  f.width = a, f.height = s, c.clearRect(0, 0, a, s), c.font = `${m.style && m.style.bold ? "bold " : ""}${p}px Arial`, c.textAlign = "center", c.textBaseline = "middle", c.fillStyle = "black", c.fillText(w.name, a / 2, s / 2);
+  const d = c.getImageData(0, 0, a, s).data, h = [];
+  for (let _ = 0; _ < s; _ += 1)
+    for (let Y = 0; Y < a; Y += 1)
+      d[(_ * a + Y) * 4 + 3] > 1 && h.push([Y, _]);
+  const [y, D, P, I] = pt(f, c);
+  return c.restore(), { w: a, h: s, wordMask: h, minX: y, minY: D, maxX: P, maxY: I };
+}
+function _e({ mask: w, maskW: p, maskH: u, wx: f, wy: c, wordMask: m }) {
+  for (let l = 0; l < m.length; l += 1) {
+    const a = f + m[l][0], s = c + m[l][1];
+    if (a < 0 || s < 0 || a >= p || s >= u || w[s * p + a]) return !1;
+  }
+  return !0;
+}
+function Re({ mask: w, maskW: p, maskH: u, wx: f, wy: c, wordMask: m }) {
+  for (let l = 0; l < m.length; l += 1) {
+    const a = f + m[l][0], s = c + m[l][1];
+    a >= 0 && s >= 0 && a < p && s < u && (w[s * p + a] = 1);
+  }
+}
+function gt({ wordMask: w, w: p, h: u, dilation: f }) {
+  const c = new Set(w.map(([l, a]) => `${l},${a}`)), m = new Set(c);
+  for (let [l, a] of w)
+    for (let s = -f; s <= f; s += 1)
+      for (let C = -f; C <= f; C += 1) {
+        if (s === 0 && C === 0) continue;
+        const d = l + s, h = a + C;
+        d >= 0 && d < p && h >= 0 && h < u && m.add(`${d},${h}`);
+      }
+  return Array.from(m).map((l) => l.split(",").map(Number));
+}
+function yt({
+  words: w,
+  proximity: p = 0,
+  svg: u,
+  strictPixelPadding: f
+}) {
+  const { width: c, height: m } = u, l = Math.round(c), a = Math.round(m), s = 1, C = u.minFontSize, d = Math.min(u.maxFontSize, 100), h = w.map((T) => T.value), y = Math.min(...h), D = Math.max(...h), P = new Uint8Array(l * a), I = document.createElement("canvas"), _ = I.getContext("2d", { willReadFrequently: !0 });
+  I.width = l, I.height = a;
+  const Y = 6, re = 2, te = 2, e = 1, U = Math.floor(l / 2), oe = Math.floor(a / 2), ae = [...w].sort((T, z) => z.value - T.value), H = [];
+  for (const T of ae) {
+    let z = C;
+    D !== y && (z = (T.value - y) / (D - y) * (d - C) + C), z = Math.max(C, Math.min(d, z));
+    let R = !1, n = z;
+    for (; !R && n >= s; ) {
+      let { w: X, h: V, wordMask: k, minX: W, minY: q, maxX: Z, maxY: J } = Ie({
+        word: T,
+        fontSize: n,
+        pad: p,
+        canvas: I,
+        ctx: _,
+        svg: u
+      });
+      f && (k = gt({ wordMask: k, w: X, h: V, dilation: 1 }));
+      let A = 0, E = 0;
+      for (; A < Math.max(l, a) && !R && E < 1e4; ) {
+        for (let v = 0; v < 360; v += Y) {
+          E += 1;
+          const M = Math.round(U + A * Math.cos(v * Math.PI / 180) - X / 2), b = Math.round(oe + A * Math.sin(v * Math.PI / 180) - V / 2);
+          if (!(M < 0 || b < 0 || M + X > l || b + V > a) && _e({ mask: P, maskW: l, maskH: a, wx: M, wy: b, wordMask: k })) {
+            H.push({ ...T, x: M - l / 2, y: b - a / 2, fontSize: n, width: X, height: V, angle: 0, minX: W, minY: q, maxX: Z, maxY: J }), Re({ mask: P, maskW: l, maskH: a, wx: M, wy: b, wordMask: k }), R = !0;
+            break;
+          }
+        }
+        A += re;
+      }
+      R || (n -= 1);
+    }
+    if (!R && n < s) {
+      n = s;
+      const { w: X, h: V, wordMask: k, minX: W, minY: q, maxX: Z, maxY: J } = Ie({
+        word: T,
+        fontSize: n,
+        pad: p,
+        canvas: I,
+        ctx: _,
+        svg: u
+      });
+      let A = 0, E = 0;
+      for (; A < Math.max(l, a) && !R && E < 25e3; ) {
+        for (let v = 0; v < 360; v += te) {
+          E += 1;
+          const M = Math.round(U + A * Math.cos(v * Math.PI / 180) - X / 2), b = Math.round(oe + A * Math.sin(v * Math.PI / 180) - V / 2);
+          if (!(M < 0 || b < 0 || M + X > l || b + V > a) && _e({ mask: P, maskW: l, maskH: a, wx: M, wy: b, wordMask: k })) {
+            H.push({ ...T, x: M - l / 2, y: b - a / 2, fontSize: n, width: X, height: V, angle: 0, minX: W, minY: q, maxX: Z, maxY: J }), Re({ mask: P, maskW: l, maskH: a, wx: M, wy: b, wordMask: k }), R = !0;
+            break;
+          }
+        }
+        A += e;
+      }
+    }
+  }
+  return H.sort((T, z) => z.fontSize - T.fontSize);
+}
+const bt = ["id"], wt = ["xmlns", "viewBox"], Ct = ["width", "height"], kt = ["transform"], xt = ["x", "y", "width", "height", "onMouseover"], $t = ["fill", "font-weight", "x", "y", "font-size", "transform"], Tt = {
+  key: 4,
+  class: "vue-data-ui-watermark"
+}, St = {
+  key: 5,
+  "data-dom-to-png-ignore": "",
+  class: "reset-wrapper"
+}, Ft = ["innerHTML"], Mt = {
+  __name: "vue-ui-word-cloud",
+  props: {
+    config: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    dataset: {
+      type: [Array, String],
+      default() {
+        return [];
+      }
+    }
+  },
+  setup(w, { expose: p }) {
+    De((t) => ({
+      c9496d9a: t.slicerColor
+    }));
+    const u = j(() => import("./vue-ui-accordion-CmCs2yR2.js")), f = j(() => import("./BaseIcon-CZdMutjs.js")), c = j(() => import("./DataTable-Cv9CIz-a.js")), m = j(() => import("./PackageVersion-CLY-udAA.js")), l = j(() => import("./PenAndPaper-B9na2mbr.js")), a = j(() => import("./Tooltip-C9rxJ-Ru.js")), s = j(() => import("./UserOptions-Ddy6CuLC.js")), { vue_ui_word_cloud: C } = qe(), d = w, h = se({
+      get() {
+        return !!d.dataset && d.dataset.length;
+      },
+      set(t) {
+        return t;
+      }
+    }), y = g(Ae()), D = g(0), P = g(null), I = g(null), _ = g(null), Y = g(0), re = g(0), te = g(!1), e = se({
+      get: () => R(),
+      set: (t) => t
+    }), U = g(oe());
+    function oe() {
+      return typeof d.dataset == "string" ? Ze(d.dataset) : d.dataset.map((t, i) => ({
+        ...t,
+        value: Je(t.value)
+      }));
+    }
+    be(() => d.dataset, () => {
+      U.value = oe(), fe();
+    });
+    const { userOptionsVisible: ae, setUserOptionsVisibility: H, keepUserOptionState: T } = dt({ config: e.value }), { svgRef: z } = vt({ config: e.value.style.chart.title });
+    function R() {
+      const t = Ne({
+        userConfig: d.config,
+        defaultConfig: C
+      });
+      return t.theme ? {
+        ...Ne({
+          userConfig: Qe.vue_ui_word_cloud[t.theme] || d.config,
+          defaultConfig: t
+        }),
+        customPalette: Ke[t.theme] || me
+      } : t;
+    }
+    be(() => d.config, (t) => {
+      e.value = R(), ae.value = !e.value.userOptions.showOnChartHover, q(), Y.value += 1, re.value += 1, v.value.showTable = e.value.table.show, v.value.showTooltip = e.value.style.chart.tooltip.show;
+    }, { deep: !0 });
+    const n = g({
+      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
+    }), X = ut(() => {
+      fe();
+    }, 10), V = it(() => {
+      const { width: t, height: i } = rt({
+        chart: P.value,
+        title: e.value.style.chart.title.text ? I.value : null,
+        source: _.value
+      });
+      requestAnimationFrame(() => {
+        n.value.width = t, n.value.height = i, ze(X);
+      });
+    }), k = Fe(null), W = Fe(null);
+    Ee(q);
+    function q() {
+      et(d.dataset) ? Oe({
+        componentName: "VueUiWordCloud",
+        type: "dataset"
+      }) : U.value.forEach((t, i) => {
+        tt({
+          datasetObject: t,
+          requiredAttributes: ["name", "value"]
+        }).forEach((o) => {
+          h.value = !1, Oe({
+            componentName: "VueUiWordCloud",
+            type: "datasetSerieAttribute",
+            property: o,
+            index: i
+          });
+        });
+      }), e.value.responsive && (k.value && (W.value && k.value.unobserve(W.value), k.value.disconnect()), k.value = new ResizeObserver(V), W.value = P.value.parentNode, k.value.observe(W.value));
+    }
+    Ue(() => {
+      k.value && (W.value && k.value.unobserve(W.value), k.value.disconnect());
+    });
+    const { isPrinting: Z, isImaging: J, generatePdf: A, generateImage: E } = ct({
+      elementId: `wordCloud_${y.value}`,
+      fileName: e.value.style.chart.title.text || "vue-ui-word-cloud",
+      options: e.value.userOptions.print
+    }), v = g({
+      showTable: e.value.table.show,
+      showTooltip: e.value.style.chart.tooltip.show
+    });
+    function M(t, i, o = "Arial") {
+      const $ = document.createElement("canvas").getContext("2d");
+      return $.font = `${i}px ${e.value.style.chart.words.bold ? "bold" : "normal"} ${o}`, {
+        width: $.measureText(t).width + e.value.style.chart.words.proximity,
+        height: i
+      };
+    }
+    const b = g([]);
+    be(() => d.dataset, fe, { immediate: !0 });
+    function fe() {
+      const t = [...U.value].map(($) => $.value), i = Math.max(...t), o = Math.min(...t), S = [...U.value].map(($, G) => {
+        let L = ($.value - o) / (i - o) * (n.value.maxFontSize - n.value.minFontSize) + n.value.minFontSize;
+        L = isNaN(L) ? n.value.minFontSize : L;
+        const Se = M($.name, L);
+        return {
+          ...$,
+          id: Ae(),
+          fontSize: L,
+          width: Se.width,
+          height: Se.height,
+          color: e.value.style.chart.words.usePalette ? e.value.customPalette[G] || e.value.customPalette[G % e.value.customPalette.length] || me[G] || me[G % me.length] : e.value.style.chart.words.color
+        };
+      });
+      b.value = yt({
+        words: S,
+        svg: n.value,
+        proximity: e.value.style.chart.words.proximity,
+        strictPixelPadding: e.value.strictPixelPadding
+      });
+    }
+    const ue = se(() => {
+      const t = b.value.map((o) => ({
+        name: o.name,
+        color: o.color
+      })), i = b.value.map((o) => o.value);
+      return { head: t, body: i };
+    });
+    function ke() {
+      ze(() => {
+        const t = ue.value.head.map((S, $) => [[
+          S.name
+        ], [ue.value.body[$]]]), i = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [[""], [e.value.table.columnNames.value]]].concat(t), o = lt(i);
+        nt({ csvContent: o, title: e.value.style.chart.title.text || "vue-ui-word-cloud" });
+      });
+    }
+    const ce = se(() => {
+      const t = [
+        e.value.table.columnNames.series,
+        e.value.table.columnNames.value
+      ], i = ue.value.head.map(($, G) => {
+        const L = ot({ p: e.value.table.td.prefix, v: ue.value.body[G], s: e.value.table.td.suffix, r: e.value.table.td.roundingValue });
+        return [
+          {
+            color: $.color,
+            name: $.name
+          },
+          L
+        ];
+      }), o = {
+        th: {
+          backgroundColor: e.value.table.th.backgroundColor,
+          color: e.value.table.th.color,
+          outline: e.value.table.th.outline
+        },
+        td: {
+          backgroundColor: e.value.table.td.backgroundColor,
+          color: e.value.table.td.color,
+          outline: e.value.table.td.outline
+        },
+        breakpoint: e.value.table.responsiveBreakpoint
+      };
+      return {
+        colNames: [
+          e.value.table.columnNames.series,
+          e.value.table.columnNames.value
+        ],
+        head: t,
+        body: i,
+        config: o
+      };
+    }), de = g(!1);
+    function Xe(t) {
+      de.value = t, D.value += 1;
+    }
+    function Ve() {
+      return b.value;
+    }
+    function xe() {
+      v.value.showTable = !v.value.showTable;
+    }
+    function $e() {
+      v.value.showTooltip = !v.value.showTooltip;
+    }
+    const le = g(!1);
+    function pe() {
+      le.value = !le.value;
+    }
+    const We = se(() => !le.value && e.value.style.chart.zoom.show), { viewBox: ve, resetZoom: Te, isZoom: Be } = ht(z, {
+      x: 0,
+      y: 0,
+      width: n.value.width <= 0 ? 10 : n.value.width,
+      height: n.value.height <= 0 ? 10 : n.value.height
+    }, 1, We);
+    p({
+      getData: Ve,
+      generateCsv: ke,
+      generatePdf: A,
+      generateImage: E,
+      toggleTable: xe,
+      toggleTooltip: $e,
+      toggleAnnotator: pe
+    });
+    const K = g(null), ne = g(!1), ge = g(""), ye = g(null);
+    function Ye(t) {
+      if (!v.value.showTooltip) return;
+      K.value = t.id, ye.value = { datapoint: t, config: e.value };
+      const i = e.value.style.chart.tooltip.customFormat;
+      if (ne.value = !1, st(i))
+        try {
+          const o = i({
+            datapoint: t,
+            config: e.value
+          });
+          typeof o == "string" && (ge.value = o, ne.value = !0);
+        } catch {
+          console.warn("Custom format cannot be applied."), ne.value = !1;
+        }
+      if (!ne.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>`;
+        ge.value = `<div dir="auto" style="display:flex; gap:4px; align-items:center; jsutify-content:center;">${o}</div>`;
+      }
+      te.value = !0;
+    }
+    return (t, i) => (x(), N("div", {
+      class: "vue-ui-word-cloud",
+      ref_key: "wordCloudChart",
+      ref: P,
+      id: `wordCloud_${y.value}`,
+      style: he(`width: 100%; font-family:${e.value.style.fontFamily};background:${e.value.style.chart.backgroundColor};${e.value.responsive ? "height:100%" : ""}`),
+      onMouseenter: i[3] || (i[3] = () => r(H)(!0)),
+      onMouseleave: i[4] || (i[4] = () => r(H)(!1))
+    }, [
+      e.value.userOptions.buttons.annotator ? (x(), ie(r(l), {
+        key: 0,
+        svgRef: r(z),
+        backgroundColor: e.value.style.chart.backgroundColor,
+        color: e.value.style.chart.color,
+        active: le.value,
+        onClose: pe
+      }, null, 8, ["svgRef", "backgroundColor", "color", "active"])) : B("", !0),
+      e.value.style.chart.title.text ? (x(), N("div", {
+        key: 1,
+        ref_key: "chartTitle",
+        ref: I,
+        style: "width:100%;background:transparent;padding-bottom:24px"
+      }, [
+        (x(), ie(mt, {
+          key: `title_${Y.value}`,
+          config: {
+            title: {
+              ...e.value.style.chart.title
+            },
+            subtitle: {
+              ...e.value.style.chart.title.subtitle
+            }
+          }
+        }, null, 8, ["config"]))
+      ], 512)) : B("", !0),
+      e.value.userOptions.show && h.value && (r(T) || r(ae)) ? (x(), ie(r(s), {
+        ref: "details",
+        key: `user_option_${D.value}`,
+        backgroundColor: e.value.style.chart.backgroundColor,
+        color: e.value.style.chart.color,
+        isPrinting: r(Z),
+        isImaging: r(J),
+        uid: y.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: de.value,
+        titles: { ...e.value.userOptions.buttonTitles },
+        chartElement: P.value,
+        position: e.value.userOptions.position,
+        hasTooltip: e.value.style.chart.tooltip.show && e.value.userOptions.buttons.tooltip,
+        isTooltip: v.value.showTooltip,
+        hasAnnotator: e.value.userOptions.buttons.annotator,
+        isAnnotation: le.value,
+        onToggleFullscreen: Xe,
+        onGeneratePdf: r(A),
+        onGenerateCsv: ke,
+        onGenerateImage: r(E),
+        onToggleTable: xe,
+        onToggleTooltip: $e,
+        onToggleAnnotator: pe,
+        style: he({
+          visibility: r(T) ? r(ae) ? "visible" : "hidden" : "visible"
+        })
+      }, Ge({ _: 2 }, [
+        t.$slots.menuIcon ? {
+          name: "menuIcon",
+          fn: O(({ isOpen: o, color: S }) => [
+            F(t.$slots, "menuIcon", Q(ee({ isOpen: o, color: S })), void 0, !0)
+          ]),
+          key: "0"
+        } : void 0,
+        t.$slots.optionPdf ? {
+          name: "optionPdf",
+          fn: O(() => [
+            F(t.$slots, "optionPdf", {}, void 0, !0)
+          ]),
+          key: "1"
+        } : void 0,
+        t.$slots.optionCsv ? {
+          name: "optionCsv",
+          fn: O(() => [
+            F(t.$slots, "optionCsv", {}, void 0, !0)
+          ]),
+          key: "2"
+        } : void 0,
+        t.$slots.optionImg ? {
+          name: "optionImg",
+          fn: O(() => [
+            F(t.$slots, "optionImg", {}, void 0, !0)
+          ]),
+          key: "3"
+        } : void 0,
+        t.$slots.optionTable ? {
+          name: "optionTable",
+          fn: O(() => [
+            F(t.$slots, "optionTable", {}, void 0, !0)
+          ]),
+          key: "4"
+        } : void 0,
+        t.$slots.optionFullscreen ? {
+          name: "optionFullscreen",
+          fn: O(({ toggleFullscreen: o, isFullscreen: S }) => [
+            F(t.$slots, "optionFullscreen", Q(ee({ toggleFullscreen: o, isFullscreen: S })), void 0, !0)
+          ]),
+          key: "5"
+        } : void 0,
+        t.$slots.optionAnnotator ? {
+          name: "optionAnnotator",
+          fn: O(({ toggleAnnotator: o, isAnnotator: S }) => [
+            F(t.$slots, "optionAnnotator", Q(ee({ toggleAnnotator: o, isAnnotator: S })), void 0, !0)
+          ]),
+          key: "6"
+        } : void 0
+      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasPdf", "hasXls", "hasImg", "hasTable", "hasFullscreen", "isFullscreen", "titles", "chartElement", "position", "hasTooltip", "isTooltip", "hasAnnotator", "isAnnotation", "onGeneratePdf", "onGenerateImage", "style"])) : B("", !0),
+      h.value ? (x(), N("svg", {
+        key: 3,
+        ref_key: "svgRef",
+        ref: z,
+        class: Me({ "vue-data-ui-fullscreen--on": de.value, "vue-data-ui-fulscreen--off": !de.value }),
+        xmlns: r(at),
+        viewBox: `${r(ve).x} ${r(ve).y} ${r(ve).width} ${r(ve).height}`,
+        style: "overflow:hidden;background:transparent;"
+      }, [
+        we(r(m)),
+        t.$slots["chart-background"] ? (x(), N("foreignObject", {
+          key: 0,
+          x: 0,
+          y: 0,
+          width: n.value.width <= 0 ? 10 : n.value.width,
+          height: n.value.height <= 0 ? 10 : n.value.height,
+          style: {
+            pointerEvents: "none"
+          }
+        }, [
+          F(t.$slots, "chart-background", {}, void 0, !0)
+        ], 8, Ct)) : B("", !0),
+        Ce("g", {
+          transform: `translate(${(n.value.width <= 0 ? 10 : n.value.width) / 2}, ${(n.value.height <= 0 ? 10 : n.value.height) / 2})`
+        }, [
+          (x(!0), N(Le, null, je(b.value, (o, S) => (x(), N("g", null, [
+            o.minX !== void 0 ? (x(), N("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: ($) => Ye(o),
+              onMouseleave: i[0] || (i[0] = ($) => {
+                K.value = null, te.value = !1;
+              })
+            }, null, 40, xt)) : B("", !0),
+            (x(), N("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: Me({ animated: e.value.useCssAnimation, "word-selected": K.value && K.value === o.id && v.value.showTooltip, "word-not-selected": K.value && K.value !== o.id && v.value.showTooltip }),
+              "text-anchor": "middle",
+              "dominant-baseline": "central",
+              style: he(`animation-delay:${S * e.value.animationDelayMs}ms !important; pointer-events:none;`)
+            }, Pe(o.name), 15, $t))
+          ]))), 256))
+        ], 8, kt),
+        F(t.$slots, "svg", {
+          svg: { height: n.value.height, width: n.value.width }
+        }, void 0, !0)
+      ], 10, wt)) : B("", !0),
+      t.$slots.watermark ? (x(), N("div", Tt, [
+        F(t.$slots, "watermark", Q(ee({ isPrinting: r(Z) || r(J) })), void 0, !0)
+      ])) : B("", !0),
+      r(Be) ? (x(), N("div", St, [
+        F(t.$slots, "reset-action", { reset: r(Te) }, () => [
+          Ce("button", {
+            "data-cy-reset": "",
+            tabindex: "0",
+            role: "button",
+            class: "vue-data-ui-refresh-button",
+            style: he({
+              background: e.value.style.chart.backgroundColor
+            }),
+            onClick: i[1] || (i[1] = (o) => r(Te)(!0))
+          }, [
+            we(r(f), {
+              name: "refresh",
+              stroke: e.value.style.chart.color
+            }, null, 8, ["stroke"])
+          ], 4)
+        ], !0)
+      ])) : B("", !0),
+      we(r(a), {
+        show: v.value.showTooltip && te.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: P.value,
+        content: ge.value,
+        isCustom: ne.value
+      }, {
+        "tooltip-before": O(() => [
+          F(t.$slots, "tooltip-before", Q(ee({ ...ye.value })), void 0, !0)
+        ]),
+        "tooltip-after": O(() => [
+          F(t.$slots, "tooltip-after", Q(ee({ ...ye.value })), void 0, !0)
+        ]),
+        _: 3
+      }, 8, ["show", "backgroundColor", "color", "fontSize", "borderRadius", "borderColor", "borderWidth", "backgroundOpacity", "position", "offsetY", "parent", "content", "isCustom"]),
+      t.$slots.source ? (x(), N("div", {
+        key: 6,
+        ref_key: "source",
+        ref: _,
+        dir: "auto"
+      }, [
+        F(t.$slots, "source", {}, void 0, !0)
+      ], 512)) : B("", !0),
+      h.value ? (x(), ie(r(u), {
+        key: 7,
+        hideDetails: "",
+        config: {
+          open: v.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: O(() => [
+          (x(), ie(r(c), {
+            key: `table_${re.value}`,
+            colNames: ce.value.colNames,
+            head: ce.value.head,
+            body: ce.value.body,
+            config: ce.value.config,
+            title: `${e.value.style.chart.title.text}${e.value.style.chart.title.subtitle.text ? ` : ${e.value.style.chart.title.subtitle.text}` : ""}`,
+            onClose: i[2] || (i[2] = (o) => v.value.showTable = !1)
+          }, {
+            th: O(({ th: o }) => [
+              Ce("div", {
+                innerHTML: o,
+                style: { display: "flex", "align-items": "center" }
+              }, null, 8, Ft)
+            ]),
+            td: O(({ td: o }) => [
+              He(Pe(o.name || o), 1)
+            ]),
+            _: 1
+          }, 8, ["colNames", "head", "body", "config", "title"]))
+        ]),
+        _: 1
+      }, 8, ["config"])) : B("", !0)
+    ], 44, bt));
+  }
+}, Wt = /* @__PURE__ */ ft(Mt, [["__scopeId", "data-v-2f9957bf"]]);
+export {
+  Wt as default
+};