vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
766 lines (765 loc) • 29.8 kB
JavaScript
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-q-LPw2IT.js";
import { u as xt, B as $t } from "./useLoading-D7YHNtLX.js";
import { u as Tt } from "./usePrinter-DX7efa1s.js";
import { u as Ee } from "./useNestedProp-04aFeUYu.js";
import { u as St } from "./useUserOptionState-BIvW1Kz7.js";
import { u as Mt } from "./useChartAccessibility-9icAAmYg.js";
import Ft from "./img-Ctts6JQb.js";
import Pt from "./Title-B55R8CAZ.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-BMOddG-M.js")), p = Z(() => import("./BaseIcon-CCivwZUq.js")), c = Z(() => import("./vue-ui-accordion-D46i_gkB.js")), m = Z(() => import("./DataTable-rj9-mAwF.js")), l = Z(() => import("./PenAndPaper-BJ0hcgsa.js")), o = Z(() => import("./UserOptions-DVzyjG-W.js")), s = Z(() => import("./PackageVersion-5ZjKSIei.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
};