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