vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
1,434 lines • 50.2 kB
JavaScript
import { useCssVars as _t, defineAsyncComponent as ae, computed as le, ref as M, toRefs as Nt, watch as we, shallowRef as tt, onMounted as Zt, onBeforeUnmount as Vt, createElementBlock as J, openBlock as W, unref as F, normalizeStyle as Xe, createBlock as se, createCommentVNode as N, createVNode as Re, withCtx as E, renderSlot as z, normalizeProps as Z, guardReactiveProps as V, createSlots as ot, normalizeClass as nt, createElementVNode as $e, Fragment as Ut, renderList as Lt, toDisplayString as De, resolveDynamicComponent as jt, mergeProps as Ht, createTextVNode as at, nextTick as lt } from "vue";
import { d as st, u as qt } from "./useResponsive-DfdjqQps.js";
import { c as Gt, t as Jt, I as Kt, U as Qt, i as eo, j as Te, o as rt, g as it, l as to, d as oo, X as no, v as ao, r as lo, y as so } from "./lib-2iaAPQ_c.js";
import { u as ro, a as Ye } from "./useNestedProp-2p4Tjzc8.js";
import { u as io, B as uo } from "./BaseScanner-BMpwQAfz.js";
import { u as co } from "./usePrinter-ChVMpU2f.js";
import { u as mo } from "./useSvgExport-ByUukOZt.js";
import { u as fo } from "./useThemeCheck-DGJ31Vi5.js";
import { u as vo } from "./useUserOptionState-BIvW1Kz7.js";
import { u as ho } from "./useChartAccessibility-9icAAmYg.js";
import po from "./img-CqYIrJ8I.js";
import go from "./Title-DSOZzIrU.js";
import { u as bo } from "./usePanZoom-CDF7rb3o.js";
import { B as ut } from "./BaseZoomControls-e4hnaBoq.js";
import { _ as yo } from "./_plugin-vue_export-helper-CHgC5LLL.js";
function Co({
word: o,
fontSize: l,
pad: m,
canvas: c,
ctx: i,
svg: d
}) {
const n = `${d.style && d.style.bold ? "bold " : ""}${l}px Arial`;
i.font = n;
const p = i.measureText(o.name), f = Math.ceil(p.width) + 2 + (m ? m * 2 : 0), g = Math.ceil(l) + 2 + (m ? m * 2 : 0);
c.width = f, c.height = g, i.font = n, i.textAlign = "center", i.textBaseline = "middle", i.fillStyle = "black", i.fillText(o.name, f / 2, g / 2);
const b = i.getImageData(0, 0, f, g).data, v = [], u = [];
let s = f, S = g, k = 0, x = 0, h = !1;
for (let w = 0; w < g; w += 1) {
const _ = w * f * 4;
let B = -1, X = !1;
for (let P = 0; P < f; P += 1) {
const U = _ + P * 4 + 3;
b[U] > 1 ? (v.push([P, w]), h = !0, P < s && (s = P), P > k && (k = P), w < S && (S = w), w > x && (x = w), X || (X = !0, B = P)) : X && (u.push([w, B, P - 1]), X = !1, B = -1);
}
X && u.push([w, B, f - 1]);
}
return h || (s = 0, S = 0, k = 0, x = 0), {
w: f,
h: g,
wordMask: v,
runs: u,
minX: s,
minY: S,
maxX: k,
maxY: x
};
}
function ko(o) {
const l = [];
if (!o.length) return l;
let m = o[0][1], c = o[0][0], i = c;
for (let d = 1; d < o.length; d += 1) {
const r = o[d][0], n = o[d][1];
n !== m ? (l.push([m, c, i]), m = n, c = r, i = r) : (r === i + 1 || (l.push([m, c, i]), c = r), i = r);
}
return l.push([m, c, i]), l;
}
function ft(o, l) {
return 4294967295 >>> 32 - (l - o + 1) << o >>> 0;
}
function vt(o) {
return 4294967295 << o >>> 0;
}
function ht(o) {
return 4294967295 >>> 31 - o >>> 0;
}
function wo({
maskBits: o,
maskRowStride: l,
maskW: m,
maskH: c,
wx: i,
wy: d,
runs: r
}) {
for (let n = 0; n < r.length; n += 1) {
const p = r[n][0], f = r[n][1], g = r[n][2], y = d + p;
if (y < 0 || y >= c) return !1;
const b = i + f, v = i + g;
if (b < 0 || v >= m) return !1;
const u = y * l, s = b >>> 5, S = v >>> 5, k = b & 31, x = v & 31;
if (s === S) {
const h = o[u + s], w = ft(k, x);
if (h & w) return !1;
} else {
{
const h = o[u + s], w = vt(k);
if (h & w) return !1;
}
for (let h = s + 1; h < S; h += 1)
if (o[u + h]) return !1;
{
const h = o[u + S], w = ht(x);
if (h & w) return !1;
}
}
}
return !0;
}
function xo({
maskBits: o,
maskRowStride: l,
maskW: m,
maskH: c,
wx: i,
wy: d,
runs: r
}) {
for (let n = 0; n < r.length; n += 1) {
const p = r[n][0], f = r[n][1], g = r[n][2], y = d + p;
if (y < 0 || y >= c) continue;
const b = i + f, v = i + g;
if (v < 0 || b >= m) continue;
const u = y * l, s = b >>> 5, S = v >>> 5, k = b & 31, x = v & 31;
if (s === S) {
const h = ft(k, x);
o[u + s] |= h;
} else {
{
const h = vt(k);
o[u + s] |= h;
}
for (let h = s + 1; h < S; h += 1)
o[u + h] = 4294967295;
{
const h = ht(x);
o[u + S] |= h;
}
}
}
}
function Fo({ wordMask: o, w: l, h: m, dilation: c }) {
const i = new Uint8Array(l * m), d = [];
for (let n = 0; n < o.length; n += 1) {
const p = o[n][0], g = o[n][1] * l + p;
i[g] || (i[g] = 1, d.push(g));
}
for (let n = 0; n < d.length; n += 1) {
const p = d[n], f = p / l | 0, g = p - f * l;
for (let y = -c; y <= c; y += 1) {
const b = f + y;
if (b < 0 || b >= m) continue;
const v = b * l;
for (let u = -c; u <= c; u += 1) {
if (u === 0 && y === 0) continue;
const s = g + u;
s < 0 || s >= l || (i[v + s] = 1);
}
}
}
const r = [];
for (let n = 0; n < i.length; n += 1)
if (i[n]) {
const p = n / l | 0, f = n - p * l;
r.push([f, p]);
}
return r;
}
function Ao({
runs: o,
w: l,
h: m,
dilation: c
}) {
const i = new Uint8Array(l * m), d = [];
for (let n = 0; n < o.length; n += 1) {
const p = o[n], f = p[0], g = p[1], y = p[2], b = f * l;
for (let v = g; v <= y; v += 1) {
const u = b + v;
i[u] || (i[u] = 1, d.push(u));
}
}
for (let n = 0; n < d.length; n += 1) {
const p = d[n], f = p / l | 0, g = p - f * l;
for (let y = -c; y <= c; y += 1) {
const b = f + y;
if (b < 0 || b >= m) continue;
const v = b * l;
for (let u = -c; u <= c; u += 1) {
if (u === 0 && y === 0) continue;
const s = g + u;
s < 0 || s >= l || (i[v + s] = 1);
}
}
}
const r = [];
for (let n = 0; n < m; n += 1) {
const p = n * l;
let f = -1, g = !1;
for (let y = 0; y < l; y += 1)
i[p + y] ? g || (g = !0, f = y) : g && (r.push([n, f, y - 1]), g = !1, f = -1);
g && r.push([n, f, l - 1]);
}
return r;
}
function So(o, l) {
const m = o.runs, c = o.w, i = o.h, d = Math.max(1, Math.round(c * l)), r = Math.max(1, Math.round(i * l)), n = new Array(r);
let p = d, f = r, g = 0, y = 0, b = !1;
for (let u = 0; u < m.length; u += 1) {
const s = m[u], S = s[0], k = s[1], x = s[2], h = Math.round(S * l);
if (h < 0 || h >= r) continue;
const w = Math.round(k * l), _ = Math.round((x + 1) * l) - 1;
if (_ < w) continue;
let B = n[h];
B || (B = [], n[h] = B), B.push([w, _]), b = !0, w < p && (p = w), _ > g && (g = _), h < f && (f = h), h > y && (y = h);
}
if (!b)
return {
w: d,
h: r,
runs: [],
minX: 0,
minY: 0,
maxX: 0,
maxY: 0
};
const v = [];
for (let u = 0; u < r; u += 1) {
const s = n[u];
if (!s || s.length === 0) continue;
s.sort((x, h) => x[0] - h[0]);
let S = s[0][0], k = s[0][1];
for (let x = 1; x < s.length; x += 1) {
const h = s[x][0], w = s[x][1];
h <= k + 1 ? w > k && (k = w) : (v.push([u, S, k]), S = h, k = w);
}
v.push([u, S, k]);
}
return {
w: d,
h: r,
runs: v,
minX: p,
minY: f,
maxX: g,
maxY: y
};
}
const ct = /* @__PURE__ */ new Map(), dt = /* @__PURE__ */ new Map();
function $o({ word: o, fontSize: l, pad: m, svg: c }) {
const i = c.style && c.style.bold ? 1 : 0, d = m || 0;
return `${o.name}::${l}::${d}::${i}`;
}
function To({
word: o,
fontSize: l,
pad: m,
canvas: c,
ctx: i,
svg: d
}) {
const r = $o({ word: o, fontSize: l, pad: m, svg: d }), n = ct.get(r);
if (n) return { key: r, bitmap: n };
const p = Co({ word: o, fontSize: l, pad: m, canvas: c, ctx: i, svg: d });
return ct.set(r, p), { key: r, bitmap: p };
}
function Mo({
bitmapKey: o,
wordMask: l,
w: m,
h: c,
dilation: i
}) {
const d = `${o}::d${i}`, r = dt.get(d);
if (r) return r;
const n = Fo({ wordMask: l, w: m, h: c, dilation: i }), p = ko(n), f = { wordMask: n, runs: p };
return dt.set(d, f), f;
}
const Io = 6, Oo = 2, pt = Math.PI / 180, gt = [], bt = [];
for (let o = 0; o < 360; o += Io) {
const l = o * pt;
gt.push(Math.cos(l)), bt.push(Math.sin(l));
}
const yt = [], Ct = [];
for (let o = 0; o < 360; o += Oo) {
const l = o * pt;
yt.push(Math.cos(l)), Ct.push(Math.sin(l));
}
function Eo(o, l, m) {
if (!o.length) return;
let c = 1 / 0, i = -1 / 0, d = 1 / 0, r = -1 / 0;
for (let u = 0; u < o.length; u += 1) {
const s = o[u], S = s.x + s.minX, k = s.x + s.maxX, x = s.y + s.minY, h = s.y + s.maxY;
S < c && (c = S), k > i && (i = k), x < d && (d = x), h > r && (r = h);
}
if (!isFinite(c) || !isFinite(i) || !isFinite(d) || !isFinite(r)) return;
const n = Math.max(
Math.abs(c),
Math.abs(i)
), p = Math.max(
Math.abs(d),
Math.abs(r)
);
if (n === 0 || p === 0) return;
const f = 0.9, g = l * 0.5 * f / n, y = m * 0.5 * f / p;
let b = Math.min(g, y);
if (b <= 1) return;
const v = 4;
b > v && (b = v);
for (let u = 0; u < o.length; u += 1) {
const s = o[u];
s.x *= b, s.y *= b, s.width *= b, s.height *= b, s.fontSize *= b, s.minX *= b, s.maxX *= b, s.minY *= b, s.maxY *= b;
}
}
function zo() {
return typeof performance < "u" && typeof performance.now == "function" ? () => performance.now() : () => Date.now();
}
function Po({
value: o,
minimumValue: l,
maximumValue: m,
configuredMinimumFontSize: c,
maximumFontSize: i
}) {
if (m === l)
return i;
const r = (o - l) / (m - l) * (i - c) + c;
return Math.max(
c,
Math.min(i, r)
);
}
function Xo({
currentBitmap: o,
strictPixelPadding: l,
scaleFactor: m,
baseBitmap: c,
bitmapKey: i
}) {
let d = o.runs;
const r = o.w, n = o.h, p = o.minX, f = o.minY, g = o.maxX, y = o.maxY;
return !l || !d.length ? {
runs: d,
bitmapWidth: r,
bitmapHeight: n,
bitmapMinimumX: p,
bitmapMinimumY: f,
bitmapMaximumX: g,
bitmapMaximumY: y
} : m === 1 ? {
runs: Mo({
bitmapKey: i,
wordMask: c.wordMask,
w: c.w,
h: c.h,
dilation: 2
}).runs,
bitmapWidth: r,
bitmapHeight: n,
bitmapMinimumX: p,
bitmapMinimumY: f,
bitmapMaximumX: g,
bitmapMaximumY: y
} : {
runs: Ao({
runs: d,
w: r,
h: n,
dilation: 2
}),
bitmapWidth: r,
bitmapHeight: n,
bitmapMinimumX: p,
bitmapMinimumY: f,
bitmapMaximumX: g,
bitmapMaximumY: y
};
}
async function mt({
baseBitmap: o,
baseFontSize: l,
minimumScaleFactor: m,
maskBits: c,
maskRowStride: i,
maskWidth: d,
maskHeight: r,
centerX: n,
centerY: p,
maximumRadius: f,
scaleStep: g,
strictPixelPadding: y,
bitmapKey: b,
minimumFontSize: v,
rawWord: u,
cosineArray: s,
sineArray: S,
radiusStep: k,
maximumAttempts: x,
maybeYield: h
}) {
let w = 1;
for (; w >= m; ) {
const _ = w === 1 ? o : So(o, w), B = Xo({
currentBitmap: _,
strictPixelPadding: y,
scaleFactor: w,
baseBitmap: o,
bitmapKey: b
}), {
runs: X,
bitmapWidth: P,
bitmapHeight: U,
bitmapMinimumX: te,
bitmapMinimumY: re,
bitmapMaximumX: e,
bitmapMaximumY: ie
} = B;
let K = 0, oe = 0;
for (; K < f && oe < x; ) {
for (let R = 0; R < s.length; R += 1) {
oe += 1;
const L = Math.round(
n + K * s[R] - P / 2
), j = Math.round(
p + K * S[R] - U / 2
);
if (L < 0 || j < 0 || L + P > d || j + U > r)
continue;
if (wo({
maskBits: c,
maskRowStride: i,
maskW: d,
maskH: r,
wx: L,
wy: j,
runs: X
})) {
const { __wcIndex: D, ...Y } = u, ue = Math.max(
v,
Math.round(l * w)
), me = {
...Y,
x: L - d / 2,
y: j - r / 2,
fontSize: ue,
width: P,
height: U,
angle: 0,
minX: te,
minY: re,
maxX: e,
maxY: ie
};
return xo({
maskBits: c,
maskRowStride: i,
maskW: d,
maskH: r,
wx: L,
wy: j,
runs: X
}), me;
}
}
K += k, (oe & 1023) === 0 && await h();
}
w *= g, await h();
}
return null;
}
async function Ro({
baseBitmap: o,
baseFontSize: l,
minimumScaleFactor: m,
maskBits: c,
maskRowStride: i,
maskWidth: d,
maskHeight: r,
centerX: n,
centerY: p,
maximumRadius: f,
scaleStep: g,
strictPixelPadding: y,
bitmapKey: b,
minimumFontSize: v,
rawWord: u,
maybeYield: s,
spiralRadiusStep: S,
fallbackSpiralRadiusStep: k
}) {
const x = await mt({
baseBitmap: o,
baseFontSize: l,
minimumScaleFactor: m,
maskBits: c,
maskRowStride: i,
maskWidth: d,
maskHeight: r,
centerX: n,
centerY: p,
maximumRadius: f,
scaleStep: g,
strictPixelPadding: y,
bitmapKey: b,
minimumFontSize: v,
rawWord: u,
cosineArray: gt,
sineArray: bt,
radiusStep: S,
maximumAttempts: 1e4,
maybeYield: s
});
return x || await mt({
baseBitmap: o,
baseFontSize: l,
minimumScaleFactor: m,
maskBits: c,
maskRowStride: i,
maskWidth: d,
maskHeight: r,
centerX: n,
centerY: p,
maximumRadius: f,
scaleStep: g,
strictPixelPadding: y,
bitmapKey: b,
minimumFontSize: v,
rawWord: u,
cosineArray: yt,
sineArray: Ct,
radiusStep: k,
maximumAttempts: 25e3,
maybeYield: s
});
}
async function Do({
words: o,
proximity: l = 0,
svg: m,
strictPixelPadding: c,
onProgress: i,
debugTiming: d = !1
}) {
const r = zo(), n = r(), p = 12;
let f = n;
async function g() {
r() - f >= p && (await new Promise((Y) => setTimeout(Y, 0)), f = r());
}
const y = m.width, b = m.height, v = Math.round(y), u = Math.round(b), s = 1, S = m.minFontSize, k = Math.min(m.maxFontSize, 100), x = o.map((D) => D.value), h = Math.min(...x), w = Math.max(...x);
if (v <= 0 || u <= 0) return [];
const _ = v + 31 >>> 5, B = new Uint32Array(_ * u), X = document.createElement("canvas"), P = X.getContext("2d", { willReadFrequently: !0 });
X.width = v, X.height = u;
const U = 2, te = 1, re = Math.max(v, u), e = Math.floor(v / 2), ie = Math.floor(u / 2), oe = [...o.map((D, Y) => ({
...D,
__wcIndex: Y,
id: D.id != null ? D.id : `${D.name}__${Y}`
}))].sort(
(D, Y) => Y.value - D.value
), R = [], L = 0.9;
for (let D = 0; D < oe.length; D += 1) {
const Y = oe[D], ue = R.length, ce = Po({
value: Y.value,
minimumValue: h,
maximumValue: w,
configuredMinimumFontSize: S,
maximumFontSize: k
}), xe = To({
word: Y,
fontSize: ce,
pad: l,
canvas: X,
ctx: P,
svg: m
}), fe = xe.key, I = xe.bitmap, Me = I.w, Ie = I.h;
if (Me <= 0 || Ie <= 0) {
await g();
continue;
}
const H = Math.max(
s / ce,
0.1
), Q = await Ro({
baseBitmap: I,
baseFontSize: ce,
minimumScaleFactor: H,
maskBits: B,
maskRowStride: _,
maskWidth: v,
maskHeight: u,
centerX: e,
centerY: ie,
maximumRadius: re,
scaleStep: L,
strictPixelPadding: c,
bitmapKey: fe,
minimumFontSize: s,
rawWord: Y,
maybeYield: g,
spiralRadiusStep: U,
fallbackSpiralRadiusStep: te
});
if (Q && (R.push(Q), i && R.length > ue)) {
const pe = R[R.length - 1];
i({ word: pe, all: R });
}
await g();
}
if (!R.length)
return [];
Eo(R, v, u);
const he = r() - n;
return d && typeof console < "u" && console.log && console.log(
"[vue-data-ui][word-cloud] positionWordsAsync:",
`${he.toFixed(2)} ms for ${o.length} words`
), R.sort((D, Y) => Y.fontSize - D.fontSize);
}
const kt = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", title: { color: "#CCCCCC", subtitle: { color: "#757575" } }, controls: { backgroundColor: "#2A2A2A", buttonColor: "#2A2A2A", color: "#CCCCCC", border: "1px solid #4A4A4A" }, words: { selectedStroke: "#1A1A1A" }, tooltip: { backgroundColor: "#1A1A1A", backgroundOpacity: 70, color: "#CCCCCC", borderColor: "#5A5A5A" } } }, table: { th: { backgroundColor: "#1A1A1A", color: "#CCCCCC" }, td: { backgroundColor: "#1A1A1A", color: "#CCCCCC" } } }, wt = { style: { chart: { backgroundColor: "#FFF8E1", color: "#424242", title: { color: "#424242", subtitle: { color: "#757575" } }, controls: { backgroundColor: "#FFF8E1", buttonColor: "#FFF8E1", color: "#424242", border: "1px solid #d9bbb2" }, words: { selectedStroke: "#FFF8E1" }, tooltip: { backgroundColor: "#FFECB3", backgroundOpacity: 30, color: "#424242", borderColor: "#FF8A65" }, zoom: { color: "#5D4037", highlightColor: "#FF8A65" } } }, table: { th: { backgroundColor: "#FFF8E1", color: "#424242" }, td: { backgroundColor: "#FFF8E1", color: "#424242" } } }, xt = { style: { chart: { backgroundColor: "#1E1E1E", color: "#BDBDBD", title: { color: "#FFF8E1", subtitle: { color: "#BDBDBD" } }, controls: { backgroundColor: "#1E1E1E", buttonColor: "#1E1E1E", color: "#BDBDBD", border: "1px solid #3A3A3A" }, words: { selectedStroke: "#1E1E1E" }, tooltip: { backgroundColor: "#1E1E1E", backgroundOpacity: 30, color: "#FFF8E1", borderColor: "#FF8A65" }, zoom: { color: "#5D4037", highlightColor: "#FF8A65" } } }, table: { th: { backgroundColor: "#1E1E1E", color: "#BDBDBD" }, td: { backgroundColor: "#1E1E1E", color: "#BDBDBD" } } }, Ft = { style: { chart: { backgroundColor: "#1A1A1A", color: "#99AA99", controls: { backgroundColor: "#1A1A1A", buttonColor: "#1A1A1A", color: "#99AA99", border: "1px solid #1e361e" }, title: { color: "#66CC66", subtitle: { color: "#99AA99" } }, words: { selectedStroke: "#1A1A1A" } } }, table: { th: { backgroundColor: "#1A1A1A", color: "#99AA99" }, td: { backgroundColor: "#1A1A1A", color: "#AACCAA" } } }, At = { style: { chart: { backgroundColor: "#fbfafa", color: "#8A9892", controls: { backgroundColor: "#fbfafa", buttonColor: "#fbfafa", color: "#99AA99", border: "1px solid #ebded3" }, title: { color: "#8A9892", subtitle: { color: "#99AA99" } }, words: { selectedStroke: "#fbfafa" } } }, table: { th: { backgroundColor: "#fbfafa", color: "#8F837A" }, td: { backgroundColor: "#fbfafa", color: "#8F837A" } } }, St = { style: { chart: { backgroundColor: "#f6f6fb", color: "#50606C", controls: { backgroundColor: "#f6f6fb", buttonColor: "#f6f6fb", color: "#50606C", border: "1px solid #98aab8", borderRadius: "0" }, title: { color: "#50606C", subtitle: { color: "#718890" } }, words: { selectedStroke: "#f6f6fb" } } }, table: { th: { backgroundColor: "#f6f6fb", color: "#50606C" }, td: { backgroundColor: "#f6f6fb", color: "#50606C" } } }, $t = {
default: {},
dark: kt,
celebration: wt,
celebrationNight: xt,
hack: Ft,
zen: At,
concrete: St
}, mn = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
__proto__: null,
celebration: wt,
celebrationNight: xt,
concrete: St,
dark: kt,
default: $t,
hack: Ft,
zen: At
}, Symbol.toStringTag, { value: "Module" })), Yo = ["id", "data-resizing", "data-relayout"], Wo = ["xmlns", "viewBox"], Bo = ["width", "height"], _o = ["transform"], No = ["transform"], Zo = ["x", "y", "width", "height", "onMouseover", "onMouseleave", "onClick"], Vo = ["fill", "font-weight", "font-size", "transform", "stroke", "stroke-width"], Uo = {
key: 4,
class: "vue-data-ui-watermark"
}, Lo = {
key: 5,
"data-dom-to-png-ignore": "",
class: "reset-wrapper"
}, jo = ["innerHTML"], Ho = {
__name: "vue-ui-word-cloud",
props: {
config: {
type: Object,
default() {
return {};
}
},
dataset: {
type: [Array, String],
default() {
return [];
}
}
},
setup(o, { expose: l }) {
_t((t) => ({
v61fe6bdc: t.slicerColor
}));
const m = ae(() => import("./Tooltip-D0pGX8qz.js")), c = ae(() => import("./BaseIcon-CbVDYv89.js")), i = ae(() => import("./vue-ui-accordion-Dm0mNNKQ.js")), d = ae(() => import("./DataTable-BT_IeqPe.js")), r = ae(() => import("./PenAndPaper-CvyKWfNl.js")), n = ae(() => import("./UserOptions-BQO4YFrn.js")), p = ae(() => import("./PackageVersion-Br3DrrFh.js")), f = ae(() => import("./BaseDraggableDialog-Z5LfhW87.js")), { vue_ui_word_cloud: g } = ro(), { isThemeValid: y, warnInvalidTheme: b } = fo(), v = o, u = le({
get() {
return !!v.dataset && v.dataset.length;
},
set(t) {
return t;
}
}), s = M(Gt()), S = M(0), k = M(null), x = M(null), h = M(null), w = M(0), _ = M(0), B = M(!1), X = M(null), P = M(null), U = M(!1), te = M(!1), re = M(null), e = M(ue()), { loading: ie, FINAL_DATASET: K, manualLoading: oe } = io({
...Nt(v),
FINAL_CONFIG: e,
prepareConfig: ue,
callback: () => {
Promise.resolve().then(() => {
O.value.showTable = e.value.table.show, O.value.showTooltip = e.value.style.chart.tooltip.show, O.value.showZoom = e.value.style.chart.zoom.show;
});
},
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: Jt({
defaultConfig: e.value,
userConfig: {
userOptions: { show: !1 },
table: { show: !1 },
useCssAnimation: !1,
animationDelayMs: 0,
nodeCategories: {},
nodeCategoryColors: {},
style: {
chart: {
backgroundColor: "#99999930",
words: {
color: "#6A6A6A",
usePalette: !1,
selectedStroke: "#CCCCCC"
}
}
}
}
})
}), R = M(L());
function L() {
return typeof K.value == "string" ? Kt(K.value) : K.value.map((t, C) => ({
...t,
value: Qt(t.value)
}));
}
const { userOptionsVisible: j, setUserOptionsVisibility: he, keepUserOptionState: D } = vo({ config: e.value }), { svgRef: Y } = ho({ config: e.value.style.chart.title });
function ue() {
const t = Ye({
userConfig: v.config,
defaultConfig: g
}), C = t.theme;
if (!C) return t;
if (!y.value(t))
return b(t), t;
const a = Ye({
userConfig: $t[C] || v.config,
defaultConfig: t
}), A = Ye({
userConfig: v.config,
defaultConfig: a
});
return {
...A,
customPalette: A.customPalette.length ? A.customPalette : eo[C] || Te
};
}
const me = M({ x: 0, y: 0 });
function ce() {
const t = {
x: 0,
y: 0,
width: Math.max(10, I.value.width),
height: Math.max(10, I.value.height)
};
Et(t), me.value = {
x: t.x + t.width / 2,
y: t.y + t.height / 2
}, ye();
}
const xe = st(() => {
Ve();
}, 100), fe = M(!1);
we(() => fe.value, (t) => {
t === !1 && (te.value = !0, xe(), ce());
}), we(() => v.config, (t) => {
e.value = ue(), j.value = !e.value.userOptions.showOnChartHover, We(), w.value += 1, _.value += 1, O.value.showTable = e.value.table.show, O.value.showTooltip = e.value.style.chart.tooltip.show, O.value.showZoom = e.value.style.chart.zoom.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
}), Me = st(() => {
const { width: t, height: C } = qt({
chart: k.value,
title: e.value.style.chart.title.text ? x.value : null,
legend: e.value.style.chart.controls.show ? re.value?.$el : null,
source: h.value
});
requestAnimationFrame(async () => {
I.value.width = Math.max(10, t), I.value.height = Math.max(10, C - 12), await lt(), fe.value = !1;
});
}, 100), Ie = () => {
fe.value = !0, Me();
}, H = tt(null), Q = tt(null);
Zt(We);
const pe = le(() => !!e.value.debug);
function We() {
rt(v.dataset) ? it({
componentName: "VueUiWordCloud",
type: "dataset",
debug: pe.value
}) : R.value.forEach((t, C) => {
to({
datasetObject: t,
requiredAttributes: ["name", "value"]
}).forEach((a) => {
u.value = !1, it({
componentName: "VueUiWordCloud",
type: "datasetSerieAttribute",
property: a,
index: C,
debug: pe.value
});
});
}), rt(v.dataset) || (oe.value = e.value.loading), e.value.responsive && (H.value && (Q.value && H.value.unobserve(Q.value), H.value.disconnect()), H.value = new ResizeObserver(Ie), Q.value = k.value.parentNode, H.value.observe(Q.value)), ce();
}
Vt(() => {
H.value && (Q.value && H.value.unobserve(Q.value), H.value.disconnect());
});
const { isPrinting: Be, isImaging: _e, generatePdf: Ne, generateImage: Ze } = co({
elementId: `wordCloud_${s.value}`,
fileName: e.value.style.chart.title.text || "vue-ui-word-cloud",
options: e.value.userOptions.print
}), O = M({
showTable: e.value.table.show,
showTooltip: e.value.style.chart.tooltip.show,
showZoom: e.value.style.chart.zoom.show
});
we(e, () => {
O.value.showTable = e.value.table.show, O.value.showTooltip = e.value.style.chart.tooltip.show, O.value.showZoom = e.value.style.chart.zoom.show;
}, { immediate: !0 });
function Tt(t, C, a = "Arial") {
const $ = document.createElement("canvas").getContext("2d");
return $.font = `${C}px ${e.value.style.chart.words.bold ? "bold" : "normal"} ${a}`, {
width: $.measureText(t).width + e.value.style.chart.words.proximity,
height: C
};
}
const q = M([]), ge = /* @__PURE__ */ new Map();
function Ve() {
const t = [...R.value].map(($) => $.value), C = Math.max(...t), a = Math.min(...t), A = [...R.value].map(($, T) => {
let G = ($.value - a) / (C - a) * (I.value.maxFontSize - I.value.minFontSize) + I.value.minFontSize;
G = isNaN(G) ? I.value.minFontSize : G;
const de = Tt($.name, G);
return {
...$,
id: $.id ?? `${$.name}__${T}`,
fontSize: G,
width: de.width,
height: de.height,
color: e.value.style.chart.words.usePalette ? e.value.customPalette[T] || e.value.customPalette[T % e.value.customPalette.length] || Te[T] || Te[T % Te.length] : e.value.style.chart.words.color
};
});
q.value.length = 0, ge.clear(), Do({
debugTiming: pe.value,
words: A,
svg: I.value,
proximity: e.value.style.chart.words.proximity,
strictPixelPadding: e.value.strictPixelPadding,
onProgress: ({ all: $ }) => {
for (const T of $) {
const G = T.id;
let de = ge.get(G);
if (de === void 0)
de = q.value.length, ge.set(G, de), q.value.push({ ...T });
else {
const ee = q.value[de];
ee.x = T.x, ee.y = T.y, ee.width = T.width, ee.height = T.height, ee.fontSize = T.fontSize, ee.minX = T.minX, ee.minY = T.minY, ee.maxX = T.maxX, ee.maxY = T.maxY;
}
}
}
}), q.value.sort(($, T) => T.fontSize - $.fontSize), ge.clear(), q.value.forEach(($, T) => {
ge.set($.id, T);
}), U.value = !0, te.value = !1;
}
const Fe = le(() => {
const t = q.value.map((a) => ({
name: a.name,
color: a.color
})), C = q.value.map((a) => a.value);
return { head: t, body: C };
});
function Oe(t = null) {
lt(() => {
const C = Fe.value.head.map(($, T) => [[
$.name
], [Fe.value.body[T]]]), a = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [[""], [e.value.table.columnNames.value]]].concat(C), A = ao(a);
t ? t(A) : lo({ csvContent: A, title: e.value.style.chart.title.text || "vue-ui-word-cloud" });
});
}
const Ae = le(() => {
const t = [
e.value.table.columnNames.series,
e.value.table.columnNames.value
], C = Fe.value.head.map(($, T) => {
const G = oo({ p: e.value.table.td.prefix, v: Fe.value.body[T], s: e.value.table.td.suffix, r: e.value.table.td.roundingValue });
return [
{
color: $.color,
name: $.name
},
G
];
}), 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: C,
config: a
};
}), ne = M(!1);
function Ue(t) {
ne.value = t, S.value += 1;
}
function Mt() {
return q.value;
}
function Le() {
O.value.showTable = !O.value.showTable;
}
function je() {
O.value.showTooltip = !O.value.showTooltip;
}
const be = M(!1);
function Ee() {
be.value = !be.value;
}
function He() {
O.value.showZoom = !O.value.showZoom;
}
const It = le(() => !be.value && O.value.showZoom), { viewBox: Se, resetZoom: ye, isZoom: Ot, setInitialViewBox: Et, zoomByFactor: qe, scale: Ge } = bo(Y, {
x: 0,
y: 0,
width: I.value.width <= 0 ? 10 : I.value.width,
height: I.value.height <= 0 ? 10 : I.value.height
}, 1, It);
we(() => v.dataset, () => {
R.value = L(), e.value.responsive || (Ve(), ce());
}, { immediate: !0 });
async function zt({ scale: t = 2 } = {}) {
if (!k.value) return;
const { width: C, height: a } = k.value.getBoundingClientRect(), A = C / a, { imageUri: $, base64: T } = await po({ domElement: k.value, base64: !0, img: !0, scale: t });
return {
imageUri: $,
base64: T,
title: e.value.style.chart.title.text,
width: C,
height: a,
aspectRatio: A
};
}
const Ce = le(() => {
const t = e.value.table.useDialog && !e.value.table.show, C = O.value.showTable;
return {
component: t ? f : i,
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: ne.value,
fullscreenParent: k.value,
forcedWidth: Math.min(500, window.innerWidth * 0.8)
} : {
hideDetails: !0,
config: {
open: C,
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
}
}
}
};
});
we(() => O.value.showTable, (t) => {
e.value.table.show || (t && e.value.table.useDialog && X.value ? X.value.open() : "close" in X.value && X.value.close());
});
function Je() {
O.value.showTable = !1, P.value && P.value.setTableIconState(!1);
}
const Pt = le(() => e.value.style.chart.backgroundColor), Xt = le(() => e.value.style.chart.title), { exportSvg: Rt, getSvg: Dt } = mo({
svg: Y,
title: Xt,
backgroundColor: Pt
});
async function Ke({ isCb: t }) {
if (t) {
const { blob: C, url: a, text: A, dataUrl: $ } = await Dt();
e.value.userOptions.callbacks.svg({ blob: C, url: a, text: A, dataUrl: $ });
} else
Rt();
}
function Qe() {
qe(1.5, !0);
}
function et() {
qe(1 / 1.5, !0);
}
l({
getData: Mt,
getImage: zt,
generateCsv: Oe,
generatePdf: Ne,
generateImage: Ze,
generateSvg: Ke,
resetZoom: ye,
toggleTable: Le,
toggleTooltip: je,
toggleAnnotator: Ee,
toggleFullscreen: Ue,
toggleZoom: He
});
const ve = M(null), ke = M(!1), ze = M(""), Pe = M(null);
function Yt(t, C) {
ve.value = null, B.value = !1, e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: t, seriesIndex: C });
}
function Wt(t, C) {
e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: t, seriesIndex: C });
}
function Bt(t, C) {
if (e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: t, seriesIndex: C }), !O.value.showTooltip) return;
ve.value = t.id, Pe.value = { datapoint: t, config: e.value };
const a = e.value.style.chart.tooltip.customFormat;
if (ke.value = !1, so(a))
try {
const A = a({
datapoint: t,
config: e.value
});
typeof A == "string" && (ze.value = A, ke.value = !0);
} catch {
console.warn("Custom format cannot be applied."), ke.value = !1;
}
if (!ke.value) {
let A = `<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>`;
ze.value = `<div dir="auto" style="display:flex; gap:4px; align-items:center; jsutify-content:center;">${A}</div>`;
}
B.value = !0;
}
return (t, C) => (W(), J("div", {
class: "vue-data-ui-component vue-ui-word-cloud",
ref_key: "wordCloudChart",
ref: k,
id: `wordCloud_${s.value}`,
"data-resizing": fe.value,
"data-relayout": te.value,
style: Xe(`width: 100%; font-family:${e.value.style.fontFamily};background:${e.value.style.chart.backgroundColor};${e.value.responsive ? "height:100%" : ""}`),
onMouseenter: C[3] || (C[3] = () => F(he)(!0)),
onMouseleave: C[4] || (C[4] = () => F(he)(!1))
}, [
e.value.userOptions.buttons.annotator ? (W(), se(F(r), {
key: 0,
svgRef: F(Y),
backgroundColor: e.value.style.chart.backgroundColor,
color: e.value.style.chart.color,
active: be.value,
onClose: Ee
}, {
"annotator-action-close": E(() => [
z(t.$slots, "annotator-action-close", {}, void 0, !0)
]),
"annotator-action-color": E(({ color: a }) => [
z(t.$slots, "annotator-action-color", Z(V({ color: a })), void 0, !0)
]),
"annotator-action-draw": E(({ mode: a }) => [
z(t.$slots, "annotator-action-draw", Z(V({ mode: a })), void 0, !0)
]),
"annotator-action-undo": E(({ disabled: a }) => [
z(t.$slots, "annotator-action-undo", Z(V({ disabled: a })), void 0, !0)
]),
"annotator-action-redo": E(({ disabled: a }) => [
z(t.$slots, "annotator-action-redo", Z(V({ disabled: a })), void 0, !0)
]),
"annotator-action-delete": E(({ disabled: a }) => [
z(t.$slots, "annotator-action-delete", Z(V({ disabled: a })), void 0, !0)
]),
_: 3
}, 8, ["svgRef", "backgroundColor", "color", "active"])) : N("", !0),
e.value.style.chart.title.text ? (W(), J("div", {
key: 1,
ref_key: "chartTitle",
ref: x,
style: "width:100%;background:transparent;padding-bottom:24px"
}, [
(W(), se(go, {
key: `title_${w.value}`,
config: {
title: {
...e.value.style.chart.title
},
subtitle: {
...e.value.style.chart.title.subtitle
}
}
}, null, 8, ["config"]))
], 512)) : N("", !0),
e.value.userOptions.show && u.value && (F(D) || F(j)) ? (W(), se(F(n), {
ref_key: "userOptionsRef",
ref: P,
key: `user_option_${S.value}`,
backgroundColor: e.value.style.chart.backgroundColor,
color: e.value.style.chart.color,
isPrinting: F(Be),
isImaging: F(_e),
uid: s.value,
hasPdf: e.value.userOptions.buttons.pdf,
hasXls: e.value.userOptions.buttons.csv,
hasImg: e.value.userOptions.buttons.img,
hasSvg: e.value.userOptions.buttons.svg,
hasTable: e.value.userOptions.buttons.table,
hasFullscreen: e.value.userOptions.buttons.fullscreen,
isFullscreen: ne.value,
titles: { ...e.value.userOptions.buttonTitles },
chartElement: k.value,
position: e.value.userOptions.position,
hasTooltip: e.value.style.chart.tooltip.show && e.value.userOptions.buttons.tooltip,
isTooltip: O.value.showTooltip,
hasAnnotator: e.value.userOptions.buttons.annotator,
isAnnotation: be.value,
callbacks: e.value.userOptions.callbacks,
printScale: e.value.userOptions.print.scale,
tableDialog: e.value.table.useDialog,
hasZoom: e.value.userOptions.buttons.zoom,
isZoom: O.value.showZoom,
onToggleFullscreen: Ue,
onGeneratePdf: F(Ne),
onGenerateCsv: Oe,
onGenerateImage: F(Ze),
onGenerateSvg: Ke,
onToggleTable: Le,
onToggleTooltip: je,
onToggleAnnotator: Ee,
onToggleZoom: He,
style: Xe({
visibility: F(D) ? F(j) ? "visible" : "hidden" : "visible"
})
}, ot({ _: 2 }, [
t.$slots.menuIcon ? {
name: "menuIcon",
fn: E(({ isOpen: a, color: A }) => [
z(t.$slots, "menuIcon", Z(V({ isOpen: a, color: A })), void 0, !0)
]),
key: "0"
} : void 0,
t.$slots.optionPdf ? {
name: "optionPdf",
fn: E(() => [
z(t.$slots, "optionPdf", {}, void 0, !0)
]),
key: "1"
} : void 0,
t.$slots.optionCsv ? {
name: "optionCsv",
fn: E(() => [
z(t.$slots, "optionCsv", {}, void 0, !0)
]),
key: "2"
} : void 0,
t.$slots.optionImg ? {
name: "optionImg",
fn: E(() => [
z(t.$slots, "optionImg", {}, void 0, !0)
]),
key: "3"
} : void 0,
t.$slots.optionSvg ? {
name: "optionSvg",
fn: E(() => [
z(t.$slots, "optionSvg", {}, void 0, !0)
]),
key: "4"
} : void 0,
t.$slots.optionTable ? {
name: "optionTable",
fn: E(() => [
z(t.$slots, "optionTable", {}, void 0, !0)
]),
key: "5"
} : void 0,
t.$slots.optionFullscreen ? {
name: "optionFullscreen",
fn: E(({ toggleFullscreen: a, isFullscreen: A }) => [
z(t.$slots, "optionFullscreen", Z(V({ toggleFullscreen: a, isFullscreen: A })), void 0, !0)
]),
key: "6"
} : void 0,
t.$slots.optionAnnotator ? {
name: "optionAnnotator",
fn: E(({ toggleAnnotator: a, isAnnotator: A }) => [
z(t.$slots, "optionAnnotator", Z(V({ toggleAnnotator: a, isAnnotator: A })), void 0, !0)
]),
key: "7"
} : void 0,
t.$slots.optionZoom ? {
name: "optionZoom",
fn: E(({ toggleZoom: a, isZoomLocked: A }) => [
z(t.$slots, "optionZoom", Z(V({ toggleZoom: a, isZoomLocked: A })), void 0, !0)
]),
key: "8"
} : void 0
]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasPdf", "hasXls", "hasImg", "hasSvg", "hasTable", "hasFullscreen", "isFullscreen", "titles", "chartElement", "position", "hasTooltip", "isTooltip", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "tableDialog", "hasZoom", "isZoom", "onGeneratePdf", "onGenerateImage", "style"])) : N("", !0),
e.value.style.chart.controls.position === "top" && e.value.style.chart.controls.show && !F(ie) ? (W(), se(ut, {
key: 3,
ref_key: "zoomControls",
ref: re,
config: e.value,
scale: F(Ge),
isFullscreen: ne.value,
onZoomIn: Qe,
onZoomOut: et,
onResetZoom: C[0] || (C[0] = (a) => F(ye)(!0))
}, null, 8, ["config", "scale", "isFullscreen"])) : N("", !0),
(W(), J("svg", {
ref_key: "svgRef",
ref: Y,
class: nt({ "vue-data-ui-fullscreen--on": ne.value, "vue-data-ui-fulscreen--off": !ne.value }),
xmlns: F(no),
viewBox: `${F(Se).x} ${F(Se).y} ${F(Se).width} ${F(Se).height}`,
style: "overflow:hidden;background:transparent;display:block"
}, [
Re(F(p)),
t.$slots["chart-background"] ? (W(), J("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"
}
}, [
z(t.$slots, "chart-background", {}, void 0, !0)
], 8, Bo)) : N("", !0),
$e("g", {
transform: `translate(${me.value.x}, ${me.value.y})`,
class: nt({ "wc-finalized": U.value })
}, [
(W(!0), J(Ut, null, Lt(q.value, (a, A) => (W(), J("g", {
key: a.id,
class: "vue-ui-word-cloud-word",
transform: `translate(${a.x}, ${a.y})`
}, [
a.minX !== void 0 ? (W(), J("rect", {
key: 0,
x: a.minX,
y: a.minY * 1.25,
width: a.maxX - a.minX,
height: a.maxY - a.minY,
fill: "transparent",
"pointer-events": "visiblePainted",
onMouseover: ($) => Bt(a, A),
onMouseleave: ($) => Yt(a, A),
onClick: ($) => Wt(a, A)
}, null, 40, Zo)) : N("", !0),
$e("text", {
fill: a.color,
"font-weight": e.value.style.chart.words.bold ? "bold" : "normal",
x: 0,
y: 0,
"font-size": a.fontSize,
transform: `translate(${a.width / 2}, ${a.height / 2})`,
"text-anchor": "middle",
"dominant-baseline": "central",
"paint-order": "stroke fill",
stroke: !ve.value || ve.value === a.id ? e.value.style.chart.words.selectedStroke : void 0,
"stroke-width": a.height * 0.05,
"stroke-linecap": "round",
"stroke-linejoin": "round",
style: Xe(`
pointer-events:none;
fill-opacity:${!ve.value || ve.value === a.id || !U.value ? 1 : e.value.style.chart.words.hoverOpacity} !important;
`)
}, De(a.name), 13, Vo)
], 8, No))), 128))
], 10, _o),
z(t.$slots, "svg", {
svg: { height: I.value.height, width: I.value.width }
}, void 0, !0)
], 10, Wo)),
t.$slots.watermark ? (W(), J("div", Uo, [
z(t.$slots, "watermark", Z(V({ isPrinting: F(Be) || F(_e) })), void 0, !0)
])) : N("", !0),
F(Ot) ? (W(), J("div", Lo, [
z(t.$slots, "reset-action", { reset: F(ye) }, void 0, !0)
])) : N("", !0),
e.value.style.chart.controls.position === "bottom" && e.value.style.chart.controls.show && !F(ie) ? (W(), se(ut, {
key: 6,
ref_key: "zoomControls",
ref: re,
config: e.value,
scale: F(Ge),
isFullscreen: ne.value,
onZoomIn: Qe,
onZoomOut: et,
onResetZoom: C[1] || (C[1] = (a) => F(ye)(!0))
}, null, 8, ["config", "scale", "isFullscreen"])) : N("", !0),
Re(F(m), {
show: O.value.showTooltip && B.value,
backgroundColor: e.value.style.chart.tooltip.backgroundColor,
color: e.value.style.chart.tooltip.color,
fontSize: e.value.style.chart.tooltip.fontSize,
borderRadius: e.value.style.chart.tooltip.borderRadius,
borderColor: e.value.style.chart.tooltip.borderColor,
borderWidth: e.value.style.chart.tooltip.borderWidth,
backgroundOpacity: e.value.style.chart.tooltip.backgroundOpacity,
position: e.value.style.chart.tooltip.position,
offsetY: e.value.style.chart.tooltip.offsetY,
parent: k.value,
content: ze.value,
isCustom: ke.value,
isFullscreen: ne.value,
smooth: e.value.style.chart.tooltip.smooth,
backdropFilter: e.value.style.chart.tooltip.backdropFilter,
smoothForce: e.value.style.chart.tooltip.smoothForce,
smoothSnapThreshold: e.value.style.chart.tooltip.smoothSnapThreshold
}, {
"tooltip-before": E(() => [
z(t.$slots, "tooltip-before", Z(V({ ...Pe.value })), void 0, !0)
]),
"tooltip-after": E(() => [
z(t.$slots, "tooltip-after", Z(V({ ...Pe.value })), void 0, !0)
]),
_: 3
}, 8, ["show", "backgroundColor", "color", "fontSize", "borderRadius", "borderColor", "borderWidth", "backgroundOpacity", "position", "offsetY", "parent", "content", "isCustom", "isFullscreen", "smooth", "backdropFilter", "smoothForce", "smoothSnapThreshold"]),
t.$slots.source ? (W(), J("div", {
key: 7,
ref_key: "source",
ref: h,
dir: "auto"
}, [
z(t.$slots, "source", {}, void 0, !0)
], 512)) : N("", !0),
u.value && e.value.userOptions.buttons.table ? (W(), se(jt(Ce.value.component), Ht({ key: 8 }, Ce.value.props, {
ref_key: "tableUnit",
ref: X,
onClose: Je
}), ot({
content: E(() => [
(W(), se(F(d), {
key: `table_${_.value}`,
colNames: Ae.value.colNames,
head: Ae.value.head,
body: Ae.value.body,
config: Ae.value.config,
title: e.value.table.useDialog ? "" : Ce.value.title,
withCloseButton: !e.value.table.useDialog,
onClose: Je
}, {
th: E(({ th: a }) => [
$e("div", {
innerHTML: a,
style: { display: "flex", "align-items": "center" }
}, null, 8, jo)
]),
td: E(({ td: a }) => [
at(De(a.name || a), 1)
]),
_: 1
}, 8, ["colNames", "head", "body", "config", "title", "withCloseButton"]))
]),
_: 2
}, [
e.value.table.useDialog ? {
name: "title",
fn: E(() => [
at(De(Ce.value.title), 1)
]),
key: "0"
} : void 0,
e.value.table.useDialog ? {
name: "actions",
fn: E(() => [
$e("button", {
tabindex: "0",
class: "vue-ui-user-options-button",
onClick: C[2] || (C[2] = (a) => Oe(e.value.userOptions.callbacks.csv))
}, [
Re(F(c), {
name: "excel",
stroke: Ce.value.props.color
}, null, 8, ["stroke"])
])
]),
key: "1"
} : void 0
]), 1040)) : N("", !0),
F(ie) ? (W(), se(uo, { key: 9 })) : N("", !0)
], 44, Yo));
}
}, qo = /* @__PURE__ */ yo(Ho, [["__scopeId", "data-v-04648100"]]), fn = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
__proto__: null,
default: qo
}, Symbol.toStringTag, { value: "Module" }));
export {
mn as a,
fn as b,
qo as v
};