vue-data-ui-hq
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
831 lines (830 loc) • 30.2 kB
JavaScript
import { toRef as ct, resolveComponent as dt, openBlock as l, createElementBlock as a, Fragment as b, renderList as A, withModifiers as z, createBlock as S, createCommentVNode as v, createElementVNode as T, toDisplayString as It, normalizeStyle as _, createVNode as L, computed as D, onMounted as ee, ref as f, watch as oe, normalizeClass as Ot, unref as t, createSlots as ne, withCtx as w, renderSlot as $, normalizeProps as q, guardReactiveProps as Z, createTextVNode as se, nextTick as Lt } from "vue";
import { u as le, o as re, e as ae, c as Ut, t as ie, a as ue, p as Dt, b as ce, X as de, l as he, O as fe, q as pe, r as ve, x as ge, y as ye } from "./index-WrV3SAID.js";
import { _ as me } from "./Title-BR-xoRp4.js";
import { u as be, U as ke } from "./usePrinter-kVpf1iV8.js";
import { D as Ce } from "./DataTable-DNPvKWC0.js";
import { _ as $e } from "./Tooltip-ho4JxRm-.js";
import J from "./BaseIcon-MqKW8Nkx.js";
import we from "./vue-ui-skeleton-Qec_XSRf.js";
import xe from "./vue-ui-accordion-BQCDXXDs.js";
import { u as At } from "./useNestedProp-Cj0kHD7k.js";
import { _ as Pe } from "./PackageVersion-1NslmM8M.js";
import { P as Te } from "./PenAndPaper-BF1ZRVm3.js";
import { u as Fe } from "./useUserOptionState-BIvW1Kz7.js";
import { _ as Re } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const Se = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onClick", "onMouseover"], Oe = {
__name: "RecursiveCircles",
props: {
color: {
type: String,
default: "#000000"
},
dataset: {
type: Array,
default: () => []
},
hoveredUid: {
type: String,
default: null
},
linkColor: {
type: String,
default: "#CCCCCC"
},
stroke: {
type: String,
default: "#FFFFFF"
},
strokeHovered: {
type: String,
default: "#000000"
}
},
emits: ["zoom", "hover"],
setup(r, { emit: I }) {
const F = r, g = I;
function i(u) {
g("zoom", u);
}
function k(u) {
g("hover", u);
}
return ct(F, "dataset").value.forEach((u) => {
u.nodes && u.nodes.length > 0 && u.nodes.forEach((x) => {
x.ancestor = u;
});
}), (u, x) => {
const B = dt("RecursiveCircles", !0);
return l(!0), a(b, null, A(r.dataset, (p) => (l(), a(b, null, [
p.polygonPath && p.polygonPath.coordinates ? (l(), a(b, { key: 0 }, [
(l(!0), a(b, null, A(p.polygonPath.coordinates, (M, H) => (l(), a("circle", {
cx: M.x,
cy: M.y,
r: p.circleRadius,
fill: `url(#gradient_${p.color})`,
stroke: r.hoveredUid && r.hoveredUid === p.uid ? r.strokeHovered : r.stroke,
"stroke-width": r.hoveredUid && r.hoveredUid === p.uid ? p.circleRadius / 6 : p.circleRadius / 12,
style: { cursor: "pointer" },
onClick: z((C) => i(p), ["stop"]),
onMouseover: (C) => k(p),
onMouseleave: x[0] || (x[0] = (C) => k(null))
}, null, 40, Se))), 256)),
p.nodes && p.nodes.length > 0 ? (l(), S(B, {
key: 0,
dataset: p.nodes,
color: r.color,
stroke: r.stroke,
strokeHovered: r.strokeHovered,
hoveredUid: r.hoveredUid,
onZoom: i,
onHover: k
}, null, 8, ["dataset", "color", "stroke", "strokeHovered", "hoveredUid"])) : v("", !0)
], 64)) : v("", !0)
], 64))), 256);
};
}
}, Le = ["x1", "y1", "x2", "y2", "stroke", "stroke-width"], Ue = ["x1", "y1", "x2", "y2", "stroke", "stroke-width"], De = {
__name: "RecursiveLinks",
props: {
dataset: {
type: Array,
default: () => []
},
color: {
type: String,
default: "#DDDDDD"
},
backgroundColor: {
type: String,
default: "#FFFFFF"
}
},
setup(r) {
return ct(r, "dataset").value.forEach((g) => {
g.nodes && g.nodes.length > 0 && g.nodes.forEach((i) => {
i.ancestor = g;
});
}), (g, i) => {
const k = dt("RecursiveLinks", !0);
return l(), a(b, null, [
(l(!0), a(b, null, A(r.dataset, (d) => (l(), a(b, null, [
d.polygonPath && d.polygonPath.coordinates ? (l(!0), a(b, { key: 0 }, A(d.polygonPath.coordinates, (u, x) => (l(), a(b, null, [
d.ancestor && d.ancestor.polygonPath ? (l(), a(b, { key: 0 }, [
T("line", {
x1: u.x,
y1: u.y,
x2: d.ancestor.polygonPath.coordinates[0].x,
y2: d.ancestor.polygonPath.coordinates[0].y,
stroke: r.backgroundColor,
"stroke-width": d.circleRadius / 1.5
}, null, 8, Le),
T("line", {
x1: u.x,
y1: u.y,
x2: d.ancestor.polygonPath.coordinates[0].x,
y2: d.ancestor.polygonPath.coordinates[0].y,
stroke: r.color,
"stroke-width": d.circleRadius / 2
}, null, 8, Ue)
], 64)) : v("", !0)
], 64))), 256)) : v("", !0)
], 64))), 256)),
(l(!0), a(b, null, A(r.dataset, (d) => (l(), a(b, null, [
d.polygonPath && d.polygonPath.coordinates ? (l(), a(b, { key: 0 }, [
d.nodes && d.nodes.length > 0 ? (l(), S(k, {
key: 0,
dataset: d.nodes,
color: r.color,
backgroundColor: r.backgroundColor
}, null, 8, ["dataset", "color", "backgroundColor"])) : v("", !0)
], 64)) : v("", !0)
], 64))), 256))
], 64);
};
}
}, Ae = ["x", "y", "fill", "font-size"], Ie = {
__name: "RecursiveLabels",
props: {
color: {
type: String,
default: "#000000"
},
dataset: {
type: Array,
default: () => []
},
hoveredUid: {
type: String,
default: null
}
},
emits: ["zoom", "hover"],
setup(r, { emit: I }) {
return ct(r, "dataset").value.forEach((i) => {
i.nodes && i.nodes.length > 0 && i.nodes.forEach((k) => {
k.ancestor = i;
});
}), (i, k) => {
const d = dt("RecursiveLabels", !0);
return l(!0), a(b, null, A(r.dataset, (u) => (l(), a(b, null, [
u.polygonPath && u.polygonPath.coordinates ? (l(), a(b, { key: 0 }, [
(l(!0), a(b, null, A(u.polygonPath.coordinates, (x) => (l(), a("text", {
x: x.x,
y: x.y + u.circleRadius * 2,
fill: r.color,
"font-size": u.circleRadius,
"text-anchor": "middle",
style: { opacity: "0.8", "pointer-events": "none" }
}, It(u.name), 9, Ae))), 256)),
u.nodes && u.nodes.length > 0 ? (l(), S(d, {
key: 0,
dataset: u.nodes,
color: r.color,
hoveredUid: r.hoveredUid
}, null, 8, ["dataset", "color", "hoveredUid"])) : v("", !0)
], 64)) : v("", !0)
], 64))), 256);
};
}
}, Ne = { style: { position: "relative", height: "100%", width: "100%" } }, ze = {
__name: "BaseDirectionPad",
props: {
color: {
type: String,
default: "#FF0000"
},
isFullscreen: {
type: Boolean,
default: !1
}
},
emits: ["moveLeft", "moveTop", "moveRight", "moveBottom", "reset"],
setup(r, { emit: I }) {
const F = I;
return (g, i) => (l(), a("div", {
style: _(`position: ${r.isFullscreen ? "fixed" : "absolute"};bottom:0;right:${r.isFullscreen ? "12px" : "0"};width:80px;height:80px`),
"data-html2canvas-ignore": ""
}, [
T("div", Ne, [
T("button", {
onClick: i[0] || (i[0] = z((k) => F("moveLeft"), ["stop"])),
style: { position: "absolute", left: "0", top: "50%", transform: "translateY(-50%)", height: "24px", width: "24px", padding: "0", background: "transparent", border: "none", display: "flex", "align-items": "center", "justify-content": "center" }
}, [
L(J, {
stroke: r.color,
name: "arrowLeft",
style: { cursor: "pointer" }
}, null, 8, ["stroke"])
]),
T("button", {
onClick: i[1] || (i[1] = z((k) => F("moveTop"), ["stop"])),
style: { position: "absolute", top: "0", left: "50%", transform: "translateX(-50%)", height: "24px", width: "24px", padding: "0", background: "transparent", border: "none", display: "flex", "align-items": "center", "justify-content": "center" }
}, [
L(J, {
stroke: r.color,
name: "arrowTop",
style: { cursor: "pointer" }
}, null, 8, ["stroke"])
]),
T("button", {
onClick: i[2] || (i[2] = z((k) => F("moveRight"), ["stop"])),
style: { position: "absolute", right: "0", top: "50%", transform: "translateY(-50%)", height: "24px", width: "24px", padding: "0", background: "transparent", border: "none", display: "flex", "align-items": "center", "justify-content": "center" }
}, [
L(J, {
stroke: r.color,
name: "arrowRight",
style: { cursor: "pointer" }
}, null, 8, ["stroke"])
]),
T("button", {
onClick: i[3] || (i[3] = z((k) => F("moveBottom"), ["stop"])),
style: { position: "absolute", bottom: "0", left: "50%", transform: "translateX(-50%)", height: "24px", width: "24px", padding: "0", background: "transparent", border: "none", display: "flex", "align-items": "center", "justify-content": "center" }
}, [
L(J, {
stroke: r.color,
name: "arrowBottom",
style: { cursor: "pointer" }
}, null, 8, ["stroke"])
]),
T("button", {
onClick: i[4] || (i[4] = z((k) => F("reset"), ["stop"])),
style: { position: "absolute", top: "50%", left: "50%", transform: "translate(-50%,-50%)", height: "24px", width: "24px", padding: "0", background: "transparent", border: "none", display: "flex", "align-items": "center", "justify-content": "center" }
}, [
L(J, {
stroke: r.color,
name: "close",
style: { cursor: "pointer" },
strokeWidth: 2
}, null, 8, ["stroke"])
])
])
], 4));
}
}, Be = ["id"], Me = {
key: 1,
ref: "noTitle",
class: "vue-data-ui-no-title-space",
style: "height:36px; width: 100%;background:transparent"
}, He = {
key: 2,
style: "width:100%;background:transparent;"
}, Ee = ["xmlns", "viewBox"], Ve = ["width", "height"], Xe = ["id"], je = ["stop-color"], Ge = ["stop-color"], Ye = {
key: 6,
class: "vue-data-ui-watermark"
}, We = {
key: 8,
ref: "source",
dir: "auto"
}, qe = ["innerHTML"], Ze = {
__name: "vue-ui-molecule",
props: {
config: {
type: Object,
default() {
return {};
}
},
dataset: {
type: Array,
default() {
return [];
}
}
},
setup(r, { expose: I }) {
const { vue_ui_molecule: F } = le(), g = r, i = D(() => !!g.dataset && g.dataset.length);
ee(() => {
k();
});
function k() {
re(g.dataset) && ae({
componentName: "VueUiMolecule",
type: "dataset"
});
}
const d = f(Ut()), u = f(null), x = f(!1), B = f(""), p = f(null), M = f(null), H = f(!1), C = f(null), ht = f(null), tt = f(0), ft = f(0), pt = f(0), o = D({
get: () => yt(),
set: (e) => e
}), { userOptionsVisible: et, setUserOptionsVisibility: vt, keepUserOptionState: gt } = Fe({ config: o.value });
function yt() {
const e = At({
userConfig: g.config,
defaultConfig: F
});
return e.theme ? {
...At({
userConfig: ie.vue_ui_molecule[e.theme] || g.config,
defaultConfig: e
}),
customPalette: ue[e.theme] || Dt
} : e;
}
oe(() => g.config, (e) => {
o.value = yt(), et.value = !o.value.showOnChartHover, k(), ft.value += 1, pt.value += 1;
}, { deep: !0 });
const { isPrinting: mt, isImaging: bt, generatePdf: kt, generateImage: Ct } = be({
elementId: `cluster_${d.value}`,
fileName: o.value.style.chart.title.text || "vue-ui-molecule"
}), Nt = D(() => o.value.userOptions.show && !o.value.style.chart.title.text), zt = D(() => ce(o.value.customPalette)), R = f({
showTable: o.value.table.show,
showDataLabels: !0,
showTooltip: o.value.style.chart.tooltip.show
});
function $t(e, n = 0) {
return Array.isArray(e) && e.length > 0 && e[0].nodes ? $t(e[0].nodes, n + 1) : n;
}
function Bt() {
const e = $t(g.dataset);
let n = 100, s = n;
for (let h = 0; h < e; h += 1)
n /= 1, s += n;
return {
height: s,
width: s
};
}
const P = f(Bt()), ot = f(`0 0 ${P.value.width} ${P.value.height}`);
function wt(e, n = { x: -P.value.width / 2.43, y: P.value.height / 2 }, s = P.value.width / 1.1, h = 24, c = 0, y = 0, G = "#BBBBBB") {
if (e && e.length > 0) {
const it = fe({
plot: n,
radius: s,
sides: e.length,
rotation: c
});
e.forEach((m, N) => {
const Y = it.coordinates[N];
let U;
if (m.ancestor ? m.ancestor.ancestor ? U = m.ancestor.color || G : (U = zt.value[y] || Dt[y] || G, y += 1) : U = G, m.polygonPath = {
coordinates: [Y]
}, m.circleRadius = h, m.color = U, m.uid = Ut(), m.nodes && m.nodes.length > 0) {
const ut = !m.ancestor || !m.ancestor.ancestor ? y : 0;
m.nodes = wt(
m.nodes,
Y,
s / 2.9,
h / 2.2,
c + Math.PI * N / m.nodes.length,
ut,
U
);
}
});
}
return e;
}
function Mt(e) {
const n = /* @__PURE__ */ new Set();
function s(c) {
c.forEach((y) => {
y.color && !n.has(y.color) && n.add(y.color), y.nodes && y.nodes.length > 0 && s(y.nodes);
});
}
s(e);
const h = {};
return Array.from(n).forEach((c, y) => {
h[c] = `gradient_${y}`;
}), h;
}
const Ht = D(() => Mt(O.value)), O = D(() => wt(g.dataset));
function nt() {
H.value = !1, M.value = null, ht.value = null, C.value = null, lt({
polygonPath: {
coordinates: [{ x: P.value.width / 2, y: P.value.height / 2 }]
},
circleRadius: 24
});
}
const st = f(null);
function lt(e) {
p.value.focus(), Lt(() => {
st.value && cancelAnimationFrame(st.value);
const n = ot.value.split(" "), s = parseFloat(n[0]), h = parseFloat(n[1]), c = parseFloat(n[2]), y = parseFloat(n[3]), { x: G, y: it } = e.polygonPath.coordinates[0], { circleRadius: m } = e, N = 8.34, Y = G - m * N, U = it - m * N, ut = m * N * 2, Zt = m * N * 2, Jt = Math.sqrt((Y - s) ** 2 + (U - h) ** 2), W = Math.min(1200, Math.max(20, Math.floor(Jt / 10))), Kt = (Y - s) / W, Qt = (U - h) / W, _t = (ut - c) / W, te = (Zt - y) / W;
let X = 0;
function St() {
ot.value = `${s + Kt * X} ${h + Qt * X} ${c + _t * X} ${y + te * X}`, X += o.value.style.chart.zoom.speed, X <= W && (st.value = requestAnimationFrame(St));
}
St();
});
}
function Et(e) {
M.value === e.uid ? nt() : (M.value = e.uid, ht.value = e, C.value = {
circleRadius: e.circleRadius,
polygonPath: {
coordinates: [{ x: e.polygonPath.coordinates[0].x, y: e.polygonPath.coordinates[0].y }]
}
}, lt(e), H.value = e.uid !== O.value[0].uid);
}
function Vt(e) {
if (e.target.nodeName !== "circle")
nt(), H.value = !1;
else
return;
}
const rt = f(null);
function Xt(e) {
rt.value = {
datapoint: e,
seriesIndex: -1,
series: O.value,
config: o.value
};
const n = o.value.style.chart.tooltip.customFormat;
if (ge(n) && ye(() => n({
seriesIndex: -1,
datapoint: e,
series: O.value,
config: o.value
})))
B.value = n({
seriesIndex: -1,
// well, ok
datapoint: e,
series: O.value,
config: o.value
});
else {
let s = "";
s += `<div style="display:flex;align-items:center;gap:3px"><div style="color:${e.color}">⬤</div><div>${e.name}</div></div>`, e.details && (s += `<div style="width:100%;border-top:1px solid ${o.value.style.chart.tooltip.borderColor};margin-top: 2px">${e.details}</div>`), B.value = `<div style="font-family:inherit">${s}</div>`;
}
}
const xt = f(null), j = f(null);
function jt(e) {
xt.value = e, e ? (x.value = !0, Xt(e), j.value = e.uid) : (x.value = !1, B.value = "", j.value = null);
}
function K(e) {
e === "right" && (C.value.polygonPath.coordinates[0].x += C.value.circleRadius), e === "left" && (C.value.polygonPath.coordinates[0].x -= C.value.circleRadius), e === "top" && (C.value.polygonPath.coordinates[0].y -= C.value.circleRadius), e === "bottom" && (C.value.polygonPath.coordinates[0].y += C.value.circleRadius), lt(C.value);
}
function Gt(e) {
const n = [];
function s(h) {
h.forEach((c) => {
const y = {
name: c.name,
details: c.details || "-",
ancestor: c.ancestor && c.ancestor.name || "-",
color: c.color || ""
};
n.push(y), c.nodes && c.nodes.length > 0 && s(c.nodes, c.name);
});
}
return s(e), n;
}
const Yt = D(() => Gt(O.value)), E = D(() => {
const e = [
o.value.table.translations.nodeName,
o.value.table.translations.details,
o.value.table.translations.ancestor
], n = Yt.value.map((c, y) => [
{
color: c.color,
name: c.name
},
c.details,
c.ancestor || ""
]), s = {
th: {
backgroundColor: o.value.table.th.backgroundColor,
color: o.value.table.th.color,
outline: o.value.table.th.outline
},
td: {
backgroundColor: o.value.table.td.backgroundColor,
color: o.value.table.td.color,
outline: o.value.table.td.outline
},
breakpoint: o.value.table.responsiveBreakpoint
}, h = [
o.value.table.translations.nodeName,
o.value.table.translations.details,
o.value.table.translations.ancestor
];
return {
head: e,
body: n,
config: s,
colNames: h
};
});
function Pt() {
Lt(() => {
const e = E.value.body.map((h, c) => [[h[0].name], [h[1]], [h[2]]]), n = [[o.value.style.chart.title.text], [o.value.style.chart.title.subtitle.text], [[...E.value.head]]].concat(e), s = pe(n);
ve({ csvContent: s, title: o.value.style.chart.title.text || "vue-ui-molecule" });
});
}
function Wt() {
return O.value;
}
const V = f(!1);
function qt(e) {
V.value = e, tt.value += 1;
}
function Tt() {
R.value.showTable = !R.value.showTable;
}
function Ft() {
R.value.showDataLabels = !R.value.showDataLabels;
}
function Rt() {
R.value.showTooltip = !R.value.showTooltip;
}
const Q = f(!1);
function at() {
Q.value = !Q.value;
}
return I({
getData: Wt,
generatePdf: kt,
generateCsv: Pt,
generateImage: Ct,
toggleTable: Tt,
toggleLabels: Ft,
toggleTooltip: Rt,
toggleAnnotator: at
}), (e, n) => (l(), a("div", {
ref_key: "moleculeChart",
ref: p,
class: Ot(`vue-ui-molecule ${t(V) ? "vue-data-ui-wrapper-fullscreen" : ""}`),
style: _(`font-family:${t(o).style.fontFamily};width:100%; text-align:center;background:${t(o).style.chart.backgroundColor}`),
id: `cluster_${t(d)}`,
onMouseleave: n[7] || (n[7] = (s) => {
xt.value = null, j.value = null, t(vt)(!1);
}),
onMouseenter: n[8] || (n[8] = () => t(vt)(!0))
}, [
t(o).userOptions.buttons.annotator ? (l(), S(Te, {
key: 0,
parent: t(p),
backgroundColor: t(o).style.chart.backgroundColor,
color: t(o).style.chart.color,
active: t(Q),
onClose: at
}, null, 8, ["parent", "backgroundColor", "color", "active"])) : v("", !0),
t(Nt) ? (l(), a("div", Me, null, 512)) : v("", !0),
t(o).style.chart.title.text ? (l(), a("div", He, [
(l(), S(me, {
key: `title_${t(ft)}`,
config: {
title: {
cy: "molecule-div-title",
...t(o).style.chart.title
},
subtitle: {
cy: "molecule-div-subtitle",
...t(o).style.chart.title.subtitle
}
}
}, null, 8, ["config"]))
])) : v("", !0),
t(o).userOptions.show && t(i) && (t(gt) || t(et)) ? (l(), S(ke, {
ref_key: "details",
ref: u,
key: `user_options_${t(tt)}`,
backgroundColor: t(o).style.chart.backgroundColor,
color: t(o).style.chart.color,
isPrinting: t(mt),
isImaging: t(bt),
uid: t(d),
hasTooltip: t(o).userOptions.buttons.tooltip && t(o).style.chart.tooltip.show,
hasPdf: t(o).userOptions.buttons.pdf,
hasXls: t(o).userOptions.buttons.csv,
hasImg: t(o).userOptions.buttons.img,
hasTable: t(o).userOptions.buttons.table,
hasLabel: t(o).userOptions.buttons.labels,
hasFullscreen: t(o).userOptions.buttons.fullscreen,
isTooltip: t(R).showTooltip,
titles: { ...t(o).userOptions.buttonTitles },
chartElement: t(p),
position: t(o).userOptions.position,
hasAnnotator: t(o).userOptions.buttons.annotator,
isAnnotation: t(Q),
onToggleFullscreen: qt,
onGeneratePdf: t(kt),
onGenerateCsv: Pt,
onGenerateImage: t(Ct),
onToggleTable: Tt,
onToggleLabels: Ft,
onToggleTooltip: Rt,
onToggleAnnotator: at,
style: _({
visibility: t(gt) ? t(et) ? "visible" : "hidden" : "visible"
})
}, ne({ _: 2 }, [
e.$slots.optionTooltip ? {
name: "optionTooltip",
fn: w(() => [
$(e.$slots, "optionTooltip", {}, void 0, !0)
]),
key: "0"
} : void 0,
e.$slots.optionPdf ? {
name: "optionPdf",
fn: w(() => [
$(e.$slots, "optionPdf", {}, void 0, !0)
]),
key: "1"
} : void 0,
e.$slots.optionCsv ? {
name: "optionCsv",
fn: w(() => [
$(e.$slots, "optionCsv", {}, void 0, !0)
]),
key: "2"
} : void 0,
e.$slots.optionImg ? {
name: "optionImg",
fn: w(() => [
$(e.$slots, "optionImg", {}, void 0, !0)
]),
key: "3"
} : void 0,
e.$slots.optionTable ? {
name: "optionTable",
fn: w(() => [
$(e.$slots, "optionTable", {}, void 0, !0)
]),
key: "4"
} : void 0,
e.$slots.optionLabels ? {
name: "optionLabels",
fn: w(() => [
$(e.$slots, "optionLabels", {}, void 0, !0)
]),
key: "5"
} : void 0,
e.$slots.optionFullscreen ? {
name: "optionFullscreen",
fn: w(({ toggleFullscreen: s, isFullscreen: h }) => [
$(e.$slots, "optionFullscreen", q(Z({ toggleFullscreen: s, isFullscreen: h })), void 0, !0)
]),
key: "6"
} : void 0,
e.$slots.optionAnnotator ? {
name: "optionAnnotator",
fn: w(({ toggleAnnotator: s, isAnnotator: h }) => [
$(e.$slots, "optionAnnotator", q(Z({ toggleAnnotator: s, isAnnotator: h })), void 0, !0)
]),
key: "7"
} : void 0
]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasTooltip", "hasPdf", "hasXls", "hasImg", "hasTable", "hasLabel", "hasFullscreen", "isTooltip", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "onGeneratePdf", "onGenerateImage", "style"])) : v("", !0),
t(i) ? (l(), a("svg", {
key: 4,
xmlns: t(de),
viewBox: t(ot),
class: Ot({ "vue-data-ui-fullscreen--on": t(V), "vue-data-ui-fulscreen--off": !t(V) }),
style: _(`overflow: hidden; background:transparent;color:${t(o).style.chart.color}`),
onClick: n[0] || (n[0] = z((s) => Vt(s), ["stop"]))
}, [
L(Pe),
e.$slots["chart-background"] ? (l(), a("foreignObject", {
key: 0,
x: 0,
y: 0,
width: t(P).width <= 0 ? 10 : t(P).width,
height: t(P).height <= 0 ? 10 : t(P).height,
style: {
pointerEvents: "none"
}
}, [
$(e.$slots, "chart-background", {}, void 0, !0)
], 8, Ve)) : v("", !0),
T("defs", null, [
(l(!0), a(b, null, A(Object.keys(t(Ht)), (s) => (l(), a("radialGradient", {
id: `gradient_${s}`,
cx: "50%",
cy: "30%",
r: "50%",
fx: "50%",
fy: "50%"
}, [
T("stop", {
offset: "0%",
"stop-color": t(he)(s, 0.5)
}, null, 8, je),
T("stop", {
offset: "100%",
"stop-color": s
}, null, 8, Ge)
], 8, Xe))), 256))
]),
L(De, {
dataset: t(O),
color: t(o).style.chart.links.stroke,
backgroundColor: t(o).style.chart.backgroundColor
}, null, 8, ["dataset", "color", "backgroundColor"]),
L(Oe, {
dataset: t(O),
hoveredUid: t(j),
stroke: t(o).style.chart.nodes.stroke,
strokeHovered: t(o).style.chart.nodes.strokeHovered,
onZoom: Et,
onHover: jt
}, null, 8, ["dataset", "hoveredUid", "stroke", "strokeHovered"]),
t(R).showDataLabels ? (l(), S(Ie, {
key: 1,
dataset: t(O),
color: t(o).style.chart.color,
hoveredUid: t(j)
}, null, 8, ["dataset", "color", "hoveredUid"])) : v("", !0),
$(e.$slots, "svg", { svg: t(P) }, void 0, !0)
], 14, Ee)) : v("", !0),
t(H) ? (l(), S(ze, {
key: `direction_pad_${t(tt)}`,
color: t(o).style.chart.color,
isFullscreen: t(V),
onMoveLeft: n[1] || (n[1] = (s) => K("left")),
onMoveRight: n[2] || (n[2] = (s) => K("right")),
onMoveTop: n[3] || (n[3] = (s) => K("top")),
onMoveBottom: n[4] || (n[4] = (s) => K("bottom")),
onReset: n[5] || (n[5] = (s) => {
nt(), H.value = !1;
})
}, null, 8, ["color", "isFullscreen"])) : v("", !0),
e.$slots.watermark ? (l(), a("div", Ye, [
$(e.$slots, "watermark", q(Z({ isPrinting: t(mt) || t(bt) })), void 0, !0)
])) : v("", !0),
t(i) ? v("", !0) : (l(), S(we, {
key: 7,
config: {
type: "molecule",
style: {
backgroundColor: t(o).style.chart.backgroundColor,
molecule: {
color: "#CCCCCC"
}
}
}
}, null, 8, ["config"])),
e.$slots.source ? (l(), a("div", We, [
$(e.$slots, "source", {}, void 0, !0)
], 512)) : v("", !0),
L($e, {
show: t(R).showTooltip && t(x),
backgroundColor: t(o).style.chart.tooltip.backgroundColor,
color: t(o).style.chart.tooltip.color,
borderRadius: t(o).style.chart.tooltip.borderRadius,
borderColor: t(o).style.chart.tooltip.borderColor,
borderWidth: t(o).style.chart.tooltip.borderWidth,
fontSize: t(o).style.chart.tooltip.fontSize,
backgroundOpacity: t(o).style.chart.tooltip.backgroundOpacity,
position: t(o).style.chart.tooltip.position,
offsetY: t(o).style.chart.tooltip.offsetY,
parent: t(p),
content: t(B),
isFullscreen: t(V),
isCustom: t(o).style.chart.tooltip.customFormat && typeof t(o).style.chart.tooltip.customFormat == "function"
}, {
"tooltip-before": w(() => [
$(e.$slots, "tooltip-before", q(Z({ ...t(rt) })), void 0, !0)
]),
"tooltip-after": w(() => [
$(e.$slots, "tooltip-after", q(Z({ ...t(rt) })), void 0, !0)
]),
_: 3
}, 8, ["show", "backgroundColor", "color", "borderRadius", "borderColor", "borderWidth", "fontSize", "backgroundOpacity", "position", "offsetY", "parent", "content", "isFullscreen", "isCustom"]),
t(i) ? (l(), S(xe, {
key: 9,
hideDetails: "",
config: {
open: t(R).showTable,
maxHeight: 1e4,
body: {
backgroundColor: t(o).style.chart.backgroundColor,
color: t(o).style.chart.color
},
head: {
backgroundColor: t(o).style.chart.backgroundColor,
color: t(o).style.chart.color
}
}
}, {
content: w(() => [
(l(), S(Ce, {
key: `table_${t(pt)}`,
colNames: t(E).colNames,
head: t(E).head,
body: t(E).body,
config: t(E).config,
title: `${t(o).style.chart.title.text}${t(o).style.chart.title.subtitle.text ? ` : ${t(o).style.chart.title.subtitle.text}` : ""}`,
onClose: n[6] || (n[6] = (s) => t(R).showTable = !1)
}, {
th: w(({ th: s }) => [
T("div", {
innerHTML: s,
style: { display: "flex", "align-items": "center" }
}, null, 8, qe)
]),
td: w(({ td: s }) => [
se(It(s.name || s), 1)
]),
_: 1
}, 8, ["colNames", "head", "body", "config", "title"]))
]),
_: 1
}, 8, ["config"])) : v("", !0)
], 46, Be));
}
}, co = /* @__PURE__ */ Re(Ze, [["__scopeId", "data-v-a6682d9a"]]);
export {
co as default
};