vue-data-ui 3.1.1 → 3.1.2

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

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