vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
799 lines (798 loc) • 32.4 kB
JavaScript
import { useCssVars as Do, defineAsyncComponent as p, computed as C, onMounted as So, ref as c, toRefs as Eo, watch as z, nextTick as H, createElementBlock as A, openBlock as v, unref as a, normalizeStyle as R, normalizeClass as De, createBlock as T, createCommentVNode as y, createVNode as D, withCtx as r, renderSlot as i, normalizeProps as f, guardReactiveProps as h, createSlots as Se, createElementVNode as S, Fragment as Bo, renderList as Po, resolveDynamicComponent as Io, mergeProps as No, createTextVNode as Ee, toDisplayString as Be } from "vue";
import { o as Lo, g as Zo, c as Pe, t as Uo, i as zo, j as Ie, k as Ho, ae as Ro, X as Mo, q as xo, e as Vo, m as Ne, v as Go, r as jo, y as Wo, _ as Xo } from "./lib-BwysEpWI.js";
import { u as Yo, a as oe } from "./useNestedProp-OFRiX4kU.js";
import { u as qo, B as Jo } from "./BaseScanner-BMpwQAfz.js";
import { u as Ko } from "./usePrinter-BJzHDpYF.js";
import { u as Qo } from "./useSvgExport-ByUukOZt.js";
import { u as et } from "./useThemeCheck-DGJ31Vi5.js";
import { u as ot } from "./useUserOptionState-BIvW1Kz7.js";
import { u as tt } from "./useChartAccessibility-9icAAmYg.js";
import lt from "./img-DKigoPDs.js";
import { u as at } from "./usePanZoom-CDF7rb3o.js";
import { _ as st } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const Le = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", nodes: { stroke: "#4A4A4A", strokeHovered: "#CCCCCC" }, links: { stroke: "#4A4A4A" }, title: { color: "#CCCCCC", subtitle: { color: "#757575" } }, tooltip: { backgroundColor: "#1A1A1A", backgroundOpacity: 70, color: "#CCCCCC", borderColor: "#5A5A5A" } } }, table: { th: { backgroundColor: "#1A1A1A", color: "#CCCCCC" }, td: { backgroundColor: "#1A1A1A", color: "#CCCCCC" } } }, Ze = { style: { chart: { backgroundColor: "#FFF8E1", color: "#424242", nodes: { stroke: "#333333", strokeHovered: "#FFFFFF" }, links: { stroke: "#333333" }, title: { color: "#424242", subtitle: { color: "#757575" } }, tooltip: { backgroundColor: "#FFECB3", backgroundOpacity: 30, color: "#424242", borderColor: "#FF8A65" } } }, table: { th: { backgroundColor: "#FFF8E1", color: "#424242" }, td: { backgroundColor: "#FFF8E1", color: "#424242" } } }, Ue = { style: { chart: { backgroundColor: "#1E1E1E", color: "#BDBDBD", nodes: { stroke: "#333333", strokeHovered: "#FFF8E1" }, links: { stroke: "#333333" }, title: { color: "#FFF8E1", subtitle: { color: "#BDBDBD" } }, tooltip: { backgroundColor: "#1E1E1E", backgroundOpacity: 30, color: "#FFF8E1", borderColor: "#FF8A65" } } }, table: { th: { backgroundColor: "#1E1E1E", color: "#BDBDBD" }, td: { backgroundColor: "#1E1E1E", color: "#BDBDBD" } } }, ze = { style: { chart: { backgroundColor: "#1A1A1A", color: "#99AA99", nodes: { stroke: "#1A1A1A", strokeHovered: "#00FF00" }, links: { stroke: "#333333" }, title: { color: "#66CC66", subtitle: { color: "#99AA99" } }, tooltip: { backgroundColor: "#2A2F2A", color: "#AACCAA", borderColor: "#66CC66" } } }, table: { th: { backgroundColor: "#1A1A1A", color: "#99AA99" }, td: { backgroundColor: "#1A1A1A", color: "#AACCAA" } } }, He = { style: { chart: { backgroundColor: "#fbfafa", color: "#8A9892", nodes: { stroke: "#fbfafa", strokeHovered: "#5E5E5E" }, links: { stroke: "#e8ede1" }, title: { color: "#8A9892", subtitle: { color: "#99AA99" } }, tooltip: { backgroundColor: "#fbfafa", color: "#8A9892" } } }, table: { th: { backgroundColor: "#fbfafa", color: "#8F837A" }, td: { backgroundColor: "#fbfafa", color: "#8F837A" } } }, Re = { style: { chart: { backgroundColor: "#f6f6fb", color: "#50606C", nodes: { stroke: "#61747E", strokeHovered: "#404C4D" }, links: { stroke: "#BBCBC7" }, title: { color: "#50606C", subtitle: { color: "#718890" } }, tooltip: { backgroundColor: "#f6f6fb", color: "#50606C" } } }, table: { th: { backgroundColor: "#f6f6fb", color: "#50606C" }, td: { backgroundColor: "#f6f6fb", color: "#50606C" } } }, Me = {
default: {},
dark: Le,
celebration: Ze,
celebrationNight: Ue,
hack: ze,
zen: He,
concrete: Re
}, Bt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
__proto__: null,
celebration: Ze,
celebrationNight: Ue,
concrete: Re,
dark: Le,
default: Me,
hack: ze,
zen: He
}, Symbol.toStringTag, { value: "Module" })), nt = ["id"], rt = {
key: 1,
ref: "noTitle",
class: "vue-data-ui-no-title-space",
style: "height:36px; width: 100%;background:transparent"
}, it = {
key: 2,
style: "width:100%;background:transparent;"
}, ut = ["xmlns", "viewBox"], ct = ["width", "height"], dt = ["id"], vt = ["stop-color"], ft = ["stop-color"], ht = {
key: 4,
class: "vue-data-ui-watermark"
}, pt = {
key: 5,
"data-dom-to-png-ignore": "",
class: "reset-wrapper"
}, Ct = {
key: 6,
ref: "source",
dir: "auto"
}, gt = ["innerHTML"], bt = {
__name: "vue-ui-molecule",
props: {
config: {
type: Object,
default() {
return {};
}
},
dataset: {
type: Array,
default() {
return [];
}
}
},
emits: ["selectNode"],
setup(xe, { expose: Ve, emit: Ge }) {
Do((o) => ({
v4cb447ec: o.slicerColor
}));
const je = p(() => import("./Title-DGnfNZuO.js")), We = p(() => import("./Tooltip-TDyKgLB6.js")), te = p(() => import("./BaseIcon-4i3dd7Ty.js")), Xe = p(() => import("./vue-ui-accordion-DUuwVsuJ.js")), Ye = p(() => import("./DataTable-WrXCJkfE.js")), qe = p(() => import("./PenAndPaper-DxIUvoQ8.js")), Je = p(() => import("./UserOptions-CzJWRC4s.js")), Ke = p(() => import("./PackageVersion-BLzm8l_I.js")), Qe = p(() => import("./RecursiveLinks-Da489v6n.js")), eo = p(() => import("./RecursiveLabels-DxmctYbA.js")), oo = p(() => import("./RecursiveCircles-CM4bn2Vg.js")), to = p(() => import("./BaseDraggableDialog-CAJxIF6g.js")), { vue_ui_molecule: lo } = Yo(), { isThemeValid: ao, warnInvalidTheme: so } = et(), w = xe, no = Ge, le = C(() => !!w.dataset && w.dataset.length);
So(() => {
ae();
});
const ro = C(() => e.value.debug);
function ae() {
Lo(w.dataset) && Zo({
componentName: "VueUiMolecule",
type: "dataset",
debug: ro.value
});
}
const M = c(Pe()), x = c(!1), L = c(""), $ = c(null), se = c(0), ne = c(0), re = c(0), E = c(null), V = c(null), e = c(X()), { loading: G, FINAL_DATASET: j } = qo({
...Eo(w),
FINAL_CONFIG: e,
prepareConfig: X,
skeletonDataset: [
{
name: "_",
color: "#CACACA",
nodes: [
{ name: "_", color: "#CACACA", nodes: [
{ name: "_", color: "#CACACA" },
{ name: "_", color: "#CACACA" },
{ name: "_", color: "#CACACA" }
] },
{ name: "_", color: "#CACACA", nodes: [
{ name: "_", color: "#CACACA" },
{ name: "_", color: "#CACACA" },
{ name: "_", color: "#CACACA" }
] },
{ name: "_", color: "#CACACA", nodes: [
{ name: "_", color: "#CACACA" },
{ name: "_", color: "#CACACA" },
{ name: "_", color: "#CACACA" }
] },
{ name: "_", color: "#CACACA", nodes: [
{ name: "_", color: "#CACACA" },
{ name: "_", color: "#CACACA" },
{ name: "_", color: "#CACACA" }
] },
{ name: "_", color: "#CACACA", nodes: [
{ name: "_", color: "#CACACA" },
{ name: "_", color: "#CACACA" },
{ name: "_", color: "#CACACA" }
] },
{ name: "_", color: "#CACACA", nodes: [
{ name: "_", color: "#CACACA" },
{ name: "_", color: "#CACACA" },
{ name: "_", color: "#CACACA" }
] }
]
}
],
skeletonConfig: Uo({
defaultConfig: e.value,
userConfig: {
userOptions: { show: !1 },
table: { show: !1 },
style: {
chart: {
backgroundColor: "#99999930",
nodes: { stroke: "#6A6A6A" },
links: { stroke: "#6A6A6A80" }
}
}
}
})
}), { userOptionsVisible: W, setUserOptionsVisibility: ie, keepUserOptionState: ue } = ot({ config: e.value }), { svgRef: B } = tt({ config: e.value.style.chart.title });
function X() {
const o = oe({
userConfig: w.config,
defaultConfig: lo
}), l = o.theme;
if (!l) return o;
if (!ao.value(o))
return so(o), o;
const t = oe({
userConfig: Me[l] || w.config,
defaultConfig: o
}), s = oe({
userConfig: w.config,
defaultConfig: t
});
return {
...s,
customPalette: s.customPalette.length ? s.customPalette : zo[l] || Ie
};
}
z(() => w.config, (o) => {
e.value = X(), W.value = !e.value.userOptions.showOnChartHover, ae(), ne.value += 1, re.value += 1, u.value.showTable = e.value.table.show, u.value.showTooltip = e.value.style.chart.tooltip.show, u.value.showZoom = e.value.style.chart.zoom.show;
}, { deep: !0 });
const ce = c(0), io = () => {
ce.value += 1;
};
z([() => G.value, () => j.value], async ([o]) => {
o || (await H(), g.value = Ce(), await H(), io(), await H(), Ao({ x: 0, y: 0, width: 400, height: 400 }), K(!1));
}, { flush: "post", deep: !1 });
const { isPrinting: de, isImaging: ve, generatePdf: fe, generateImage: he } = Ko({
elementId: `cluster_${M.value}`,
fileName: e.value.style.chart.title.text || "vue-ui-molecule",
options: e.value.userOptions.print
}), uo = C(() => e.value.userOptions.show && !e.value.style.chart.title.text), co = C(() => Ho(e.value.customPalette)), u = c({
showTable: e.value.table.show,
showDataLabels: !0,
showTooltip: e.value.style.chart.tooltip.show,
showZoom: e.value.style.chart.zoom.show
});
z(e, () => {
u.value = {
showTable: e.value.table.show,
showDataLabels: !0,
showTooltip: e.value.style.chart.tooltip.show,
showZoom: e.value.style.chart.zoom.show
};
}, { immediate: !0 });
function pe(o, l = 0) {
return Array.isArray(o) && o.length > 0 && o[0].nodes ? pe(o[0].nodes, l + 1) : l;
}
function Ce() {
const o = pe(j.value);
let l = 100, t = l;
for (let s = 0; s < o; s += 1)
l /= 1, t += l;
return {
height: t,
width: t
};
}
const g = c(Ce());
function ge(o, l = { x: -g.value.width / 2.43, y: g.value.height / 2 }, t = g.value.width / 1.1, s = 24, n = 0, d = 0, b = "#BBBBBB", Q = 0) {
if (!Array.isArray(o) || o.length === 0) return o;
const Oo = Vo({
plot: l,
radius: t,
sides: o.length,
rotation: n
});
return o.forEach((m, Fe) => {
const _e = Oo.coordinates[Fe], Oe = m.color ? (() => {
let ee = Ne(m.color);
return ee.startsWith("#") ? ee : `#${ee}`;
})() : null;
let O;
Oe ? O = Oe : Q === 0 ? O = b : Q === 1 ? (O = co.value[d] || Ie[d] || b, d += 1) : O = b, m.polygonPath = { coordinates: [_e] }, m.circleRadius = s, m.color = O, m.uid = Pe(), Array.isArray(m.nodes) && m.nodes.length && (m.nodes = ge(
m.nodes,
_e,
t / 2.9,
s / 2.2,
n + Math.PI * Fe / m.nodes.length,
d,
O,
Q + 1
));
}), o;
}
function vo(o) {
const l = /* @__PURE__ */ new Set();
function t(n) {
n.forEach((d) => {
if (!d.color) return;
let b = d.color;
/^#?[0-9A-F]{6}$/i.test(b) || (b = Ne(b)), b.startsWith("#") || (b = `#${b}`), l.add(b), Array.isArray(d.nodes) && d.nodes.length && t(d.nodes);
});
}
t(o);
const s = {};
return Array.from(l).forEach((n) => {
const d = n.slice(1);
s[n] = `gradient_${d}`;
}), s;
}
const fo = C(() => vo(k.value)), k = C(() => {
const o = Ro(j.value);
return ge(o);
}), Y = c(null);
function ho(o) {
Y.value = {
datapoint: o,
seriesIndex: -1,
series: k.value,
config: e.value
};
const l = e.value.style.chart.tooltip.customFormat;
if (Wo(l) && Xo(() => l({
seriesIndex: -1,
datapoint: o,
series: k.value,
config: e.value
})))
L.value = l({
seriesIndex: -1,
// well, ok
datapoint: o,
series: k.value,
config: e.value
});
else {
let t = "";
t += `<div style="display:flex;align-items:center;gap:3px"><div style="color:${o.color}">⬤</div><div>${o.name}</div></div>`, o.details && (t += `<div style="width:100%;border-top:1px solid ${e.value.style.chart.tooltip.borderColor};margin-top: 2px">${o.details}</div>`), L.value = `<div style="font-family:inherit">${t}</div>`;
}
}
const Z = c(null), P = c(null), be = c(null);
function po(o) {
be.value = Z.value, Z.value = o, o ? e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: o, seriesIndex: -1 }) : e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: be.value || Z.value, seriesIndex: -1 }), o ? (x.value = !0, ho(o), P.value = o.uid) : (x.value = !1, L.value = "", P.value = null);
}
function Co(o) {
const l = [];
function t(s) {
s.forEach((n) => {
const d = {
name: n.name,
details: n.details || "-",
ancestor: n.ancestor && n.ancestor.name || "-",
color: n.color || ""
};
l.push(d), n.nodes && n.nodes.length > 0 && t(n.nodes, n.name);
});
}
return t(o), l;
}
const go = C(() => Co(k.value)), F = C(() => {
const o = [
e.value.table.translations.nodeName,
e.value.table.translations.details,
e.value.table.translations.ancestor
], l = go.value.map((n, d) => [
{
color: n.color,
name: n.name
},
n.details,
n.ancestor || ""
]), t = {
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
}, s = [
e.value.table.translations.nodeName,
e.value.table.translations.details,
e.value.table.translations.ancestor
];
return {
head: o,
body: l,
config: t,
colNames: s
};
});
function q(o = null) {
H(() => {
const l = F.value.body.map((n, d) => [[n[0].name], [n[1]], [n[2]]]), t = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [[...F.value.head]]].concat(l), s = Go(t);
o ? o(s) : jo({ csvContent: s, title: e.value.style.chart.title.text || "vue-ui-molecule" });
});
}
function bo() {
return k.value;
}
const _ = c(!1);
function me(o) {
_.value = o, se.value += 1;
}
function ye() {
u.value.showTable = !u.value.showTable;
}
function Ae() {
u.value.showDataLabels = !u.value.showDataLabels;
}
function ke() {
u.value.showTooltip = !u.value.showTooltip;
}
function we() {
u.value.showZoom = !u.value.showZoom;
}
const I = c(!1);
function J() {
I.value = !I.value;
}
const mo = C(() => !I.value && u.value.showZoom), { viewBox: U, resetZoom: K, isZoom: yo, setInitialViewBox: Ao } = at(B, {
x: 0,
y: 0,
width: Math.max(10, g.value.width),
height: Math.max(10, g.value.height)
}, e.value.style.chart.zoom.speed, mo);
function ko(o) {
e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: o, seriesIndex: -1 }), no("selectNode", o);
}
async function wo({ scale: o = 2 } = {}) {
if (!$.value) return;
const { width: l, height: t } = $.value.getBoundingClientRect(), s = l / t, { imageUri: n, base64: d } = await lt({ domElement: $.value, base64: !0, img: !0, scale: o });
return {
imageUri: n,
base64: d,
title: e.value.style.chart.title.text,
width: l,
height: t,
aspectRatio: s
};
}
const N = C(() => {
const o = e.value.table.useDialog && !e.value.table.show, l = u.value.showTable;
return {
component: o ? to : Xe,
title: `${e.value.style.chart.title.text}${e.value.style.chart.title.subtitle.text ? `: ${e.value.style.chart.title.subtitle.text}` : ""}`,
props: o ? {
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: _.value,
fullscreenParent: $.value,
forcedWidth: Math.min(800, window.innerWidth * 0.8)
} : {
hideDetails: !0,
config: {
open: l,
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
}
}
}
};
});
z(() => u.value.showTable, (o) => {
e.value.table.show || (o && e.value.table.useDialog && E.value ? E.value.open() : "close" in E.value && E.value.close());
});
function $e() {
u.value.showTable = !1, V.value && V.value.setTableIconState(!1);
}
const $o = C(() => e.value.style.chart.backgroundColor), To = C(() => e.value.style.chart.title), { exportSvg: Fo, getSvg: _o } = Qo({
svg: B,
title: To,
backgroundColor: $o
});
async function Te({ isCb: o }) {
if (o) {
const { blob: l, url: t, text: s, dataUrl: n } = await _o();
e.value.userOptions.callbacks.svg({ blob: l, url: t, text: s, dataUrl: n });
} else
Fo();
}
return Ve({
getData: bo,
getImage: wo,
generatePdf: fe,
generateCsv: q,
generateImage: he,
generateSvg: Te,
toggleTable: ye,
toggleLabels: Ae,
toggleTooltip: ke,
toggleAnnotator: J,
toggleFullscreen: me,
toggleZoom: we
}), (o, l) => (v(), A("div", {
ref_key: "moleculeChart",
ref: $,
class: De(`vue-data-ui-component vue-ui-molecule ${_.value ? "vue-data-ui-wrapper-fullscreen" : ""}`),
style: R(`font-family:${e.value.style.fontFamily};width:100%; text-align:center;background:${e.value.style.chart.backgroundColor}`),
id: `cluster_${M.value}`,
onMouseleave: l[2] || (l[2] = (t) => {
Z.value = null, P.value = null, a(ie)(!1);
}),
onMouseenter: l[3] || (l[3] = () => a(ie)(!0))
}, [
e.value.userOptions.buttons.annotator && a(B) ? (v(), T(a(qe), {
key: 0,
svgRef: a(B),
backgroundColor: e.value.style.chart.backgroundColor,
color: e.value.style.chart.color,
active: I.value,
onClose: J
}, {
"annotator-action-close": r(() => [
i(o.$slots, "annotator-action-close", {}, void 0, !0)
]),
"annotator-action-color": r(({ color: t }) => [
i(o.$slots, "annotator-action-color", f(h({ color: t })), void 0, !0)
]),
"annotator-action-draw": r(({ mode: t }) => [
i(o.$slots, "annotator-action-draw", f(h({ mode: t })), void 0, !0)
]),
"annotator-action-undo": r(({ disabled: t }) => [
i(o.$slots, "annotator-action-undo", f(h({ disabled: t })), void 0, !0)
]),
"annotator-action-redo": r(({ disabled: t }) => [
i(o.$slots, "annotator-action-redo", f(h({ disabled: t })), void 0, !0)
]),
"annotator-action-delete": r(({ disabled: t }) => [
i(o.$slots, "annotator-action-delete", f(h({ disabled: t })), void 0, !0)
]),
_: 3
}, 8, ["svgRef", "backgroundColor", "color", "active"])) : y("", !0),
uo.value ? (v(), A("div", rt, null, 512)) : y("", !0),
e.value.style.chart.title.text ? (v(), A("div", it, [
(v(), T(a(je), {
key: `title_${ne.value}`,
config: {
title: {
cy: "molecule-div-title",
...e.value.style.chart.title
},
subtitle: {
cy: "molecule-div-subtitle",
...e.value.style.chart.title.subtitle
}
}
}, null, 8, ["config"]))
])) : y("", !0),
e.value.userOptions.show && le.value && (a(ue) || a(W)) ? (v(), T(a(Je), {
ref_key: "userOptionsRef",
ref: V,
key: `user_options_${se.value}`,
backgroundColor: e.value.style.chart.backgroundColor,
color: e.value.style.chart.color,
isPrinting: a(de),
isImaging: a(ve),
uid: M.value,
hasTooltip: e.value.userOptions.buttons.tooltip && e.value.style.chart.tooltip.show,
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,
hasLabel: e.value.userOptions.buttons.labels,
hasFullscreen: e.value.userOptions.buttons.fullscreen,
isTooltip: u.value.showTooltip,
titles: { ...e.value.userOptions.buttonTitles },
chartElement: $.value,
position: e.value.userOptions.position,
hasAnnotator: e.value.userOptions.buttons.annotator,
isAnnotation: I.value,
callbacks: e.value.userOptions.callbacks,
printScale: e.value.userOptions.print.scale,
tableDialog: e.value.table.useDialog,
hasZoom: e.value.userOptions.buttons.zoom,
isZoom: u.value.showZoom,
onToggleFullscreen: me,
onGeneratePdf: a(fe),
onGenerateCsv: q,
onGenerateImage: a(he),
onGenerateSvg: Te,
onToggleTable: ye,
onToggleLabels: Ae,
onToggleTooltip: ke,
onToggleAnnotator: J,
onToggleZoom: we,
style: R({
visibility: a(ue) ? a(W) ? "visible" : "hidden" : "visible"
})
}, Se({ _: 2 }, [
o.$slots.menuIcon ? {
name: "menuIcon",
fn: r(({ isOpen: t, color: s }) => [
i(o.$slots, "menuIcon", f(h({ isOpen: t, color: s })), void 0, !0)
]),
key: "0"
} : void 0,
o.$slots.optionTooltip ? {
name: "optionTooltip",
fn: r(() => [
i(o.$slots, "optionTooltip", {}, void 0, !0)
]),
key: "1"
} : void 0,
o.$slots.optionPdf ? {
name: "optionPdf",
fn: r(() => [
i(o.$slots, "optionPdf", {}, void 0, !0)
]),
key: "2"
} : void 0,
o.$slots.optionCsv ? {
name: "optionCsv",
fn: r(() => [
i(o.$slots, "optionCsv", {}, void 0, !0)
]),
key: "3"
} : void 0,
o.$slots.optionImg ? {
name: "optionImg",
fn: r(() => [
i(o.$slots, "optionImg", {}, void 0, !0)
]),
key: "4"
} : void 0,
o.$slots.optionSvg ? {
name: "optionSvg",
fn: r(() => [
i(o.$slots, "optionSvg", {}, void 0, !0)
]),
key: "5"
} : void 0,
o.$slots.optionTable ? {
name: "optionTable",
fn: r(() => [
i(o.$slots, "optionTable", {}, void 0, !0)
]),
key: "6"
} : void 0,
o.$slots.optionLabels ? {
name: "optionLabels",
fn: r(() => [
i(o.$slots, "optionLabels", {}, void 0, !0)
]),
key: "7"
} : void 0,
o.$slots.optionFullscreen ? {
name: "optionFullscreen",
fn: r(({ toggleFullscreen: t, isFullscreen: s }) => [
i(o.$slots, "optionFullscreen", f(h({ toggleFullscreen: t, isFullscreen: s })), void 0, !0)
]),
key: "8"
} : void 0,
o.$slots.optionAnnotator ? {
name: "optionAnnotator",
fn: r(({ toggleAnnotator: t, isAnnotator: s }) => [
i(o.$slots, "optionAnnotator", f(h({ toggleAnnotator: t, isAnnotator: s })), void 0, !0)
]),
key: "9"
} : void 0,
o.$slots.optionZoom ? {
name: "optionZoom",
fn: r(({ toggleZoom: t, isZoomLocked: s }) => [
i(o.$slots, "optionZoom", f(h({ toggleZoom: t, isZoomLocked: s })), void 0, !0)
]),
key: "10"
} : void 0
]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasTooltip", "hasPdf", "hasXls", "hasImg", "hasSvg", "hasTable", "hasLabel", "hasFullscreen", "isTooltip", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "tableDialog", "hasZoom", "isZoom", "onGeneratePdf", "onGenerateImage", "style"])) : y("", !0),
(v(), A("svg", {
ref_key: "svgRef",
ref: B,
key: `svg_${ce.value}`,
xmlns: a(Mo),
viewBox: `${a(U).x} ${a(U).y} ${a(U).width} ${a(U).height}`,
class: De({ "vue-data-ui-fullscreen--on": _.value, "vue-data-ui-fulscreen--off": !_.value }),
style: R(`overflow: hidden; background:transparent;color:${e.value.style.chart.color}`)
}, [
D(a(Ke)),
o.$slots["chart-background"] ? (v(), A("foreignObject", {
key: 0,
x: 0,
y: 0,
width: g.value.width <= 0 ? 10 : g.value.width,
height: g.value.height <= 0 ? 10 : g.value.height,
style: {
pointerEvents: "none"
}
}, [
i(o.$slots, "chart-background", {}, void 0, !0)
], 8, ct)) : y("", !0),
S("defs", null, [
(v(!0), A(Bo, null, Po(Object.keys(fo.value), (t) => (v(), A("radialGradient", {
id: `gradient_${t}`,
cx: "50%",
cy: "30%",
r: "50%",
fx: "50%",
fy: "50%"
}, [
S("stop", {
offset: "0%",
"stop-color": a(xo)(t, 0.5)
}, null, 8, vt),
S("stop", {
offset: "100%",
"stop-color": t
}, null, 8, ft)
], 8, dt))), 256))
]),
D(a(Qe), {
dataset: k.value,
color: e.value.style.chart.links.stroke,
backgroundColor: e.value.style.chart.backgroundColor
}, null, 8, ["dataset", "color", "backgroundColor"]),
D(a(oo), {
dataset: k.value,
hoveredUid: P.value,
stroke: e.value.style.chart.nodes.stroke,
strokeHovered: e.value.style.chart.nodes.strokeHovered,
onClick: ko,
onHover: po
}, {
node: r(({ node: t }) => [
i(o.$slots, "node", f(h({ node: t })), void 0, !0)
]),
_: 3
}, 8, ["dataset", "hoveredUid", "stroke", "strokeHovered"]),
u.value.showDataLabels && !a(G) ? (v(), T(a(eo), {
key: 1,
dataset: k.value,
color: e.value.style.chart.color,
hoveredUid: P.value
}, null, 8, ["dataset", "color", "hoveredUid"])) : y("", !0),
i(o.$slots, "svg", { svg: g.value }, void 0, !0)
], 14, ut)),
o.$slots.watermark ? (v(), A("div", ht, [
i(o.$slots, "watermark", f(h({ isPrinting: a(de) || a(ve) })), void 0, !0)
])) : y("", !0),
a(yo) ? (v(), A("div", pt, [
i(o.$slots, "reset-action", { reset: a(K) }, () => [
S("button", {
"data-cy-reset": "",
tabindex: "0",
role: "button",
class: "vue-data-ui-refresh-button",
style: R({
background: e.value.style.chart.backgroundColor
}),
onClick: l[0] || (l[0] = (t) => a(K)(!0))
}, [
D(a(te), {
name: "refresh",
stroke: e.value.style.chart.color
}, null, 8, ["stroke"])
], 4)
], !0)
])) : y("", !0),
o.$slots.source ? (v(), A("div", Ct, [
i(o.$slots, "source", {}, void 0, !0)
], 512)) : y("", !0),
D(a(We), {
show: u.value.showTooltip && x.value,
backgroundColor: e.value.style.chart.tooltip.backgroundColor,
color: e.value.style.chart.tooltip.color,
borderRadius: e.value.style.chart.tooltip.borderRadius,
borderColor: e.value.style.chart.tooltip.borderColor,
borderWidth: e.value.style.chart.tooltip.borderWidth,
fontSize: e.value.style.chart.tooltip.fontSize,
backgroundOpacity: e.value.style.chart.tooltip.backgroundOpacity,
position: e.value.style.chart.tooltip.position,
offsetY: e.value.style.chart.tooltip.offsetY,
parent: $.value,
content: L.value,
isFullscreen: _.value,
isCustom: e.value.style.chart.tooltip.customFormat && typeof e.value.style.chart.tooltip.customFormat == "function",
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": r(() => [
i(o.$slots, "tooltip-before", f(h({ ...Y.value })), void 0, !0)
]),
"tooltip-after": r(() => [
i(o.$slots, "tooltip-after", f(h({ ...Y.value })), void 0, !0)
]),
_: 3
}, 8, ["show", "backgroundColor", "color", "borderRadius", "borderColor", "borderWidth", "fontSize", "backgroundOpacity", "position", "offsetY", "parent", "content", "isFullscreen", "isCustom", "smooth", "backdropFilter", "smoothForce", "smoothSnapThreshold"]),
le.value && e.value.userOptions.buttons.table ? (v(), T(Io(N.value.component), No({ key: 7 }, N.value.props, {
ref_key: "tableUnit",
ref: E,
onClose: $e
}), Se({
content: r(() => [
(v(), T(a(Ye), {
key: `table_${re.value}`,
colNames: F.value.colNames,
head: F.value.head,
body: F.value.body,
config: F.value.config,
title: e.value.table.useDialog ? "" : N.value.title,
withCloseButton: !e.value.table.useDialog,
onClose: $e
}, {
th: r(({ th: t }) => [
S("div", {
innerHTML: t,
style: { display: "flex", "align-items": "center" }
}, null, 8, gt)
]),
td: r(({ td: t }) => [
Ee(Be(t.name || t), 1)
]),
_: 1
}, 8, ["colNames", "head", "body", "config", "title", "withCloseButton"]))
]),
_: 2
}, [
e.value.table.useDialog ? {
name: "title",
fn: r(() => [
Ee(Be(N.value.title), 1)
]),
key: "0"
} : void 0,
e.value.table.useDialog ? {
name: "actions",
fn: r(() => [
S("button", {
tabindex: "0",
class: "vue-ui-user-options-button",
onClick: l[1] || (l[1] = (t) => q(e.value.userOptions.callbacks.csv))
}, [
D(a(te), {
name: "excel",
stroke: N.value.props.color
}, null, 8, ["stroke"])
])
]),
key: "1"
} : void 0
]), 1040)) : y("", !0),
a(G) ? (v(), T(Jo, { key: 8 })) : y("", !0)
], 46, nt));
}
}, mt = /* @__PURE__ */ st(bt, [["__scopeId", "data-v-053b8c13"]]), Pt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
__proto__: null,
default: mt
}, Symbol.toStringTag, { value: "Module" }));
export {
Bt as a,
Pt as b,
mt as v
};