vue-data-ui 3.0.0-next.8 → 3.0.0

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

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