vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
766 lines (765 loc) • 29.2 kB
JavaScript
import { defineAsyncComponent as E, computed as p, onMounted as it, ref as y, watch as ct, createElementBlock as g, openBlock as d, unref as r, normalizeStyle as L, normalizeClass as He, createBlock as R, createCommentVNode as _, createElementVNode as D, createVNode as de, createSlots as dt, withCtx as w, renderSlot as b, normalizeProps as U, guardReactiveProps as V, Fragment as W, renderList as j, toDisplayString as X, createTextVNode as vt, nextTick as ft } from "vue";
import { u as ht, o as pt, e as gt, c as ve, t as mt, p as S, a as yt, b as bt, v as $, d as kt, f as q, X as Ct, F as Ye, L as wt, i as fe, q as $t, r as xt, x as Tt } from "./index-BLtEpj8j.js";
import { u as Be } from "./useNestedProp-Bw1KcAmj.js";
import { u as _t } from "./usePrinter-DnRwTdvS.js";
import { u as Nt } from "./useUserOptionState-BIvW1Kz7.js";
import { u as Ot } from "./useChartAccessibility-9icAAmYg.js";
import St from "./Legend-E7G897sw.js";
import Ft from "./Title-DkG60EPg.js";
import Pt from "./img-D-vWHxhM.js";
import { _ as Lt } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const It = ["id"], At = {
key: 1,
ref: "noTitle",
class: "vue-data-ui-no-title-space",
style: "height:36px; width: 100%;background:transparent"
}, Et = {
key: 2,
style: "width:100%;background:transparent;padding-bottom:24px"
}, zt = ["xmlns", "viewBox"], Mt = ["width", "height"], Ht = ["id"], Yt = ["stop-color"], Bt = ["stop-color"], Rt = ["d", "fill", "stroke", "stroke-width"], Dt = ["x", "y", "height", "width", "fill", "stroke", "stroke-width", "onMouseenter"], Ut = ["x", "y", "font-size", "fill"], Vt = ["x", "y", "font-size", "fill"], Gt = {
key: 4,
class: "vue-data-ui-watermark"
}, Wt = ["onClick"], jt = {
key: 6,
ref: "source",
dir: "auto"
}, Xt = ["innerHTML"], qt = {
__name: "vue-ui-flow",
props: {
config: {
type: Object,
default() {
return {};
}
},
dataset: {
type: Array,
default() {
return [];
}
}
},
setup(Re, { expose: De }) {
const Ue = E(() => import("./vue-ui-accordion-B6Svdk-2.js")), Ve = E(() => import("./DataTable-CS_V_Adx.js")), Ge = E(() => import("./PackageVersion-CnRyWKP-.js")), We = E(() => import("./PenAndPaper-7BWf7zgA.js")), je = E(() => import("./vue-ui-skeleton-CsMU8DwQ.js")), Xe = E(() => import("./Tooltip-CuHsd1IQ.js")), qe = E(() => import("./UserOptions-DGw0HvSp.js")), { vue_ui_flow: Ze } = ht(), x = Re, te = p(() => !!x.dataset && x.dataset.length);
it(() => {
he();
});
function he() {
pt(x.dataset) && gt({
componentName: "VueUiFlow",
type: "dataset"
});
}
const oe = y(ve()), z = y(null), pe = y(0), ge = y(0), le = y(!1), ae = y(""), Je = y(null), M = y(!1);
function me(t) {
M.value = t, pe.value += 1;
}
const e = p({
get: () => Ce(),
set: (t) => t
}), { userOptionsVisible: ne, setUserOptionsVisibility: ye, keepUserOptionState: be } = Nt({ config: e.value }), { svgRef: ke } = Ot({
config: e.value.style.chart.title
});
function Ce() {
const t = Be({
userConfig: x.config,
defaultConfig: Ze
});
let l = t;
return t.theme ? l = {
...Be({
userConfig: yt.vue_ui_flow[t.theme] || x.config,
defaultConfig: t
}),
customPalette: mt[t.theme] || S
} : l = t, l.nodeCategories = x.config.nodeCategories || {}, l.nodeCategoryColors = x.config.nodeCategoryColors || {}, l;
}
ct(
() => x.config,
(t) => {
e.value = Ce(), ne.value = !e.value.userOptions.showOnChartHover, he(), ge.value += 1, N.value.showTable = e.value.table.show;
},
{ deep: !0 }
);
const { isPrinting: we, isImaging: $e, generatePdf: xe, generateImage: Te } = _t({
elementId: `flow_${oe.value}`,
fileName: e.value.style.chart.title.text || "vue-ui-flow",
options: e.value.userOptions.print
}), Ke = p(() => e.value.userOptions.show && !e.value.style.chart.title.text), Z = p(() => bt(e.value.customPalette)), _e = p(() => e.value.style.chart.nodes.gap), H = p(() => e.value.style.chart.nodes.width), N = y({
showTable: e.value.table.show,
showTooltip: e.value.style.chart.tooltip.show
}), Qe = p(() => e.value.style.chart.links.width), se = p(() => !x.dataset || !x.dataset.length ? [] : x.dataset.map((t, l) => [
t[0],
t[1],
$(t[2]),
t[3] ? kt(t[3]) : Z.value[l] || Z.value[l % Z.value.length] || S[l] || S[l % S.length]
])), Ne = p(() => {
const t = {};
function l(a) {
t[a] || (t[a] = { inflow: 0, outflow: 0 });
}
se.value.forEach(([a, s, f]) => {
l(a), l(s), t[a].outflow += f, t[s].inflow += f;
});
let o = 0;
for (const a in t) {
const s = Math.max(t[a].inflow, t[a].outflow);
o = Math.max(o, s);
}
return o;
});
function et(t) {
return t / Ne.value * 100 + e.value.style.chart.nodes.minHeight;
}
function tt(t) {
const l = e.value.style.chart.nodes.minHeight;
return (t - l) / 100 * Ne.value;
}
function ot(t) {
const l = {}, o = {};
function a(n, u) {
l[n] || (l[n] = {
height: 0,
level: null,
inflow: 0,
outflow: 0,
uid: ve()
}), l[n].level === null && (l[n].level = u), o[u] || (o[u] = []), o[u].includes(n) || o[u].push(n);
}
t.forEach(([n, u, c]) => {
const v = l[n]?.level ?? 0, C = v + 1;
a(n, v), a(u, C), l[n].children || (l[n].children = []), l[n].children.push({ target: u, value: c }), l[n].outflow += c, l[u].inflow += c;
});
const s = new Set(t.map(([n]) => n)), f = new Set(t.map(([, n]) => n)), F = Array.from(s).filter((n) => !f.has(n)), B = {};
F.forEach((n, u) => {
B[n] = Z.value[u] || S[u % S.length];
});
const T = {};
t.forEach(([n, u, c, v]) => {
v && (T[n] = v, T[u] = v);
}), Object.keys(l).forEach((n, u) => {
const c = e.value.nodeCategories?.[n], v = c ? e.value.nodeCategoryColors?.[c] : null;
l[n].color = T[n] || // 1) explicit
v || // 2) category
(F.includes(n) ? B[n] : null) || // 3) root
S[u % S.length];
});
for (const n in l)
l[n].height = et(
Math.max(l[n].inflow, l[n].outflow)
), l[n].name = n;
const O = {};
for (const n in o) {
let u = 0;
o[n].forEach((c, v) => {
const C = l[c];
O[c] = {
x: parseInt(n, 10) * Qe.value + e.value.style.chart.padding.left,
y: u,
absoluteY: u,
height: C.height,
i: v,
color: C.color,
value: tt(C.height)
}, u += C.height + _e.value;
});
}
const A = [];
for (const n of Object.keys(l)) {
let u = O[n].absoluteY + e.value.style.chart.padding.top;
const c = l[n], v = O[n];
c.children && c.children.forEach(({ target: C, value: i }) => {
const h = O[C], P = l[C], ee = $(u), ze = $(
u + i / c.outflow * v.height
), ce = $(
h.y + e.value.style.chart.padding.top
), Me = $(
ce + i / P.inflow * h.height
);
A.push({
id: ve(),
source: n,
target: C,
path: `M ${$(v.x + H.value)} ${ee} L ${$(v.x + H.value)} ${ze} L ${$(h.x)} ${Me} L ${$(h.x)} ${ce} Z`,
value: i,
sourceColor: c.color,
targetColor: P.color
}), u += ze - ee, O[C].y += Me - ce;
});
}
return { nodeCoordinates: O, links: A };
}
const m = p(() => {
const t = ot(x.dataset);
return {
nodes: Object.keys(t.nodeCoordinates).map((l, o) => ({
...t.nodeCoordinates[l],
name: l
})),
links: t.links
};
});
p(() => lt(m.value.nodes));
function lt(t) {
const l = {};
for (const a in t) {
const { x: s, height: f } = t[a];
l[s] || (l[s] = 0), l[s] += f + _e.value;
}
return Math.max(...Object.values(l));
}
const G = p(() => {
const { top: t, right: l, bottom: o, left: a } = e.value.style.chart.padding, s = Math.max(...m.value.nodes.map((T) => T.x)), f = a + s + H.value + l, F = Math.max(
...m.value.nodes.map((T) => T.absoluteY + T.height)
), B = t + F + o;
return { width: f, height: B };
});
function at(t) {
const l = {}, o = {}, a = /* @__PURE__ */ new Set();
return se.value.forEach(([s, f, F]) => {
l[s] || (l[s] = []), o[f] || (o[f] = []), l[s].push(f), o[f].push(s);
}), l[t] && l[t].forEach((s) => a.add(s)), o[t] && o[t].forEach((s) => a.add(s)), Array.from(a).concat(t);
}
const k = y(null), Y = y(null), re = y(null), J = y(!1);
function nt(t) {
I.value = [], k.value = at(t.name), Y.value = t.name;
const l = t.name, o = se.value;
let a = 0, s = 0, f = [], F = [];
const B = new Set(o.map(([i]) => i)), T = new Set(o.map(([, i]) => i)), Ee = Array.from(B).filter((i) => !T.has(i)), O = o.filter(([i]) => Ee.includes(i)).reduce((i, [h, P, ee]) => i + ee, 0), A = {};
m.value.nodes.forEach((i) => {
A[i.name] = i.color;
}), o.forEach(([i, h, P]) => {
h === l && (a += P, f.push({ source: i, value: P, color: A[i] })), i === l && (s += P, F.push({ target: h, value: P, color: A[h] }));
});
const n = Math.max(a, s), u = O > 0 ? n / O * 100 : 0, c = {
name: l,
inflow: a,
outflow: s,
from: f,
to: F,
percentOfTotal: u,
color: A[l] || "#000000"
};
re.value = { datapoint: c }, le.value = !0;
let v = "";
const C = e.value.style.chart.tooltip.customFormat;
if (J.value = !1, Tt(C))
try {
const i = C({
datapoint: c,
series: m.value,
config: e.value
});
typeof i == "string" && (ae.value = i, J.value = !0);
} catch {
console.warn("Custom format cannot be applied.");
}
if (!J.value) {
const i = e.value.style.chart.tooltip.showPercentage ? `<div>${q({
p: e.value.style.chart.tooltip.translations.percentOfTotal,
v: c.percentOfTotal,
s: "%",
r: e.value.style.chart.tooltip.roundingPercentage
})}</div>` : "";
v += `<div style="width:100%;text-align:center;border-bottom:1px solid ${e.value.style.chart.tooltip.borderColor};padding-bottom:6px;margin-bottom:3px;"><span style="margin-right:4px; color:${c.color}">⏹</span>${c.name}${i}</div>`, c.from.length && (v += `<div>${e.value.style.chart.tooltip.translations.from}</div>`, c.from.forEach((h) => {
v += `<div><span style="color:${h.color}">⏹←</span> ${h.source}: ${fe(
e.value.style.chart.nodes.labels.formatter,
h.value,
q({
p: e.value.style.chart.nodes.labels.prefix,
v: h.value,
s: e.value.style.chart.nodes.labels.suffix,
r: e.value.style.chart.nodes.labels.rounding
})
)}</div>`;
})), c.to.length && (v += `<div style="margin-top:6px;">${e.value.style.chart.tooltip.translations.to}</div>`, c.to.forEach((h) => {
v += `<div><span style="color:${h.color}">⏹→</span> ${h.target}: ${fe(
e.value.style.chart.nodes.labels.formatter,
h.value,
q({
p: e.value.style.chart.nodes.labels.prefix,
v: h.value,
s: e.value.style.chart.nodes.labels.suffix,
r: e.value.style.chart.nodes.labels.rounding
})
)}</div>`;
})), ae.value = v;
}
}
function Oe() {
k.value = null, Y.value = null, le.value = !1;
}
const Se = p(() => m.value.links.map(
({ source: t, target: l, sourceColor: o, targetColor: a, value: s }) => ({
source: t,
target: l,
sourceColor: o,
targetColor: a,
value: s
})
));
function Fe(t = null) {
ft(() => {
const l = Se.value.map((s, f) => [[s.source], [s.target], [s.value]]), o = [
[e.value.style.chart.title.text],
[e.value.style.chart.title.subtitle.text],
[
[e.value.table.columnNames.source],
[e.value.table.columnNames.target],
[e.value.table.columnNames.value]
]
].concat(l), a = $t(o);
t ? t(a) : xt({
csvContent: a,
title: e.value.style.chart.title.text || "vue-ui-flow"
});
});
}
const K = p(() => {
const t = [
e.value.table.columnNames.source,
e.value.table.columnNames.target,
e.value.table.columnNames.value
], l = Se.value.map((s, f) => [
{
color: s.sourceColor,
name: s.source
},
{
color: s.targetColor,
name: s.target
},
q({
p: e.value.style.chart.nodes.labels.prefix,
v: s.value,
s: e.value.style.chart.nodes.labels.suffix,
r: e.value.style.chart.nodes.labels.rounding
})
]), 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.source,
e.value.table.columnNames.target,
e.value.table.columnNames.value
],
head: t,
body: l,
config: o
};
});
function st() {
return m.value;
}
function Pe() {
N.value.showTable = !N.value.showTable;
}
const Q = y(!1);
function ue() {
Q.value = !Q.value;
}
function Le() {
N.value.showTooltip = !N.value.showTooltip;
}
const Ie = p(() => {
const t = new Set(
m.value.nodes.map(
(l) => e.value.nodeCategories[l.name] || "__uncategorized__"
)
);
return Array.from(t).map((l) => ({
name: l,
color: e.value.nodeCategoryColors[l] || S[0],
shape: "square",
count: m.value.nodes.filter(
(o) => (e.value.nodeCategories[o.name] || "__uncategorized__") === l
).length
})).map((l, o) => ({
...l,
segregate: () => ie({ legend: l, i: o }),
opacity: I.value.length ? I.value.includes(o) ? 1 : 0.5 : 1
}));
}), Ae = p(
() => Ie.value.filter((t) => t.name !== "__uncategorized__")
), I = y([]);
function ie({ legend: t, i: l }) {
const o = t.name;
if (k.value?.every(
(a) => e.value.nodeCategories[a] === o
)) {
k.value = null, Y.value = null, I.value = [];
return;
}
I.value = [l], k.value = m.value.nodes.filter((a) => e.value.nodeCategories[a.name] === o).map((a) => a.name), Y.value = null;
}
const rt = p(() => ({
cy: "flow-legend",
backgroundColor: e.value.style.chart.legend.backgroundColor,
color: e.value.style.chart.legend.color,
fontSize: e.value.style.chart.legend.fontSize,
paddingBottom: e.value.style.chart.legend.paddingBottom,
fontWeight: e.value.style.chart.legend.bold ? "bold" : "normal"
}));
async function ut({ scale: t = 2 } = {}) {
if (!z.value) return;
const { width: l, height: o } = z.value.getBoundingClientRect(), a = l / o, { imageUri: s, base64: f } = await Pt({ domElement: z.value, base64: !0, img: !0, scale: t });
return {
imageUri: s,
base64: f,
title: e.value.style.chart.title.text,
width: l,
height: o,
aspectRatio: a
};
}
return De({
getData: st,
getImage: ut,
generateCsv: Fe,
generateImage: Te,
generatePdf: xe,
toggleTable: Pe,
toggleAnnotator: ue,
toggleTooltip: Le,
drillCategory: ie,
unselectNode: Oe,
toggleFullscreen: me
}), (t, l) => (d(), g("div", {
ref_key: "flowChart",
ref: z,
class: He(`vue-ui-flow ${M.value ? "vue-data-ui-wrapper-fullscreen" : ""}`),
style: L(`font-family:${e.value.style.fontFamily};width:100%; text-align:center;background:${e.value.style.chart.backgroundColor}`),
id: `flow_${oe.value}`,
onMouseenter: l[3] || (l[3] = () => r(ye)(!0)),
onMouseleave: l[4] || (l[4] = () => r(ye)(!1))
}, [
e.value.userOptions.buttons.annotator ? (d(), R(r(We), {
key: 0,
svgRef: r(ke),
backgroundColor: e.value.style.chart.backgroundColor,
color: e.value.style.chart.color,
active: Q.value,
onClose: ue
}, null, 8, ["svgRef", "backgroundColor", "color", "active"])) : _("", !0),
Ke.value ? (d(), g("div", At, null, 512)) : _("", !0),
e.value.style.chart.title.text ? (d(), g("div", Et, [
(d(), R(Ft, {
key: `title_${ge.value}`,
config: {
title: {
cy: "flow-title",
...e.value.style.chart.title
},
subtitle: {
cy: "flow-subtitle",
...e.value.style.chart.title.subtitle
}
}
}, null, 8, ["config"]))
])) : _("", !0),
e.value.userOptions.show && te.value && (r(be) || r(ne)) ? (d(), R(r(qe), {
ref: "details",
key: `user_option_${pe.value}`,
backgroundColor: e.value.style.chart.backgroundColor,
color: e.value.style.chart.color,
isPrinting: r(we),
isImaging: r($e),
uid: oe.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,
callbacks: e.value.userOptions.callbacks,
hasFullscreen: e.value.userOptions.buttons.fullscreen,
isFullscreen: M.value,
titles: { ...e.value.userOptions.buttonTitles },
chartElement: z.value,
position: e.value.userOptions.position,
hasAnnotator: e.value.userOptions.buttons.annotator,
printScale: e.value.userOptions.print.scale,
isAnnotation: Q.value,
hasTooltip: e.value.style.chart.tooltip.show && e.value.userOptions.buttons.tooltip,
isTooltip: N.value.showTooltip,
onToggleTooltip: Le,
onToggleFullscreen: me,
onGeneratePdf: r(xe),
onGenerateCsv: Fe,
onGenerateImage: r(Te),
onToggleTable: Pe,
onToggleAnnotator: ue,
style: L({
visibility: r(be) ? r(ne) ? "visible" : "hidden" : "visible"
})
}, dt({ _: 2 }, [
t.$slots.menuIcon ? {
name: "menuIcon",
fn: w(({ isOpen: o, color: a }) => [
b(t.$slots, "menuIcon", U(V({ isOpen: o, color: a })), void 0, !0)
]),
key: "0"
} : void 0,
t.$slots.optionTooltip ? {
name: "optionTooltip",
fn: w(() => [
b(t.$slots, "optionTooltip", {}, void 0, !0)
]),
key: "1"
} : void 0,
t.$slots.optionPdf ? {
name: "optionPdf",
fn: w(() => [
b(t.$slots, "optionPdf", {}, void 0, !0)
]),
key: "2"
} : void 0,
t.$slots.optionCsv ? {
name: "optionCsv",
fn: w(() => [
b(t.$slots, "optionCsv", {}, void 0, !0)
]),
key: "3"
} : void 0,
t.$slots.optionImg ? {
name: "optionImg",
fn: w(() => [
b(t.$slots, "optionImg", {}, void 0, !0)
]),
key: "4"
} : void 0,
t.$slots.optionTable ? {
name: "optionTable",
fn: w(() => [
b(t.$slots, "optionTable", {}, void 0, !0)
]),
key: "5"
} : void 0,
t.$slots.optionFullscreen ? {
name: "optionFullscreen",
fn: w(({ toggleFullscreen: o, isFullscreen: a }) => [
b(t.$slots, "optionFullscreen", U(V({ toggleFullscreen: o, isFullscreen: a })), void 0, !0)
]),
key: "6"
} : void 0,
t.$slots.optionAnnotator ? {
name: "optionAnnotator",
fn: w(({ toggleAnnotator: o, isAnnotator: a }) => [
b(t.$slots, "optionAnnotator", U(V({ toggleAnnotator: o, isAnnotator: a })), void 0, !0)
]),
key: "7"
} : void 0
]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasPdf", "hasXls", "hasImg", "hasTable", "callbacks", "hasFullscreen", "isFullscreen", "titles", "chartElement", "position", "hasAnnotator", "printScale", "isAnnotation", "hasTooltip", "isTooltip", "onGeneratePdf", "onGenerateImage", "style"])) : _("", !0),
(d(), g("svg", {
ref_key: "svgRef",
ref: ke,
xmlns: r(Ct),
viewBox: `0 0 ${G.value.width} ${G.value.height}`,
class: He({
"vue-data-ui-fullscreen--on": M.value,
"vue-data-ui-fulscreen--off": !M.value
}),
style: L(`max-width:100%; overflow: visible; background:transparent;color:${e.value.style.chart.color}`)
}, [
de(r(Ge)),
t.$slots["chart-background"] ? (d(), g("foreignObject", {
key: 0,
x: 0,
y: 0,
width: G.value.width,
height: G.value.height,
style: {
pointerEvents: "none"
}
}, [
b(t.$slots, "chart-background", {}, void 0, !0)
], 8, Mt)) : _("", !0),
D("defs", null, [
(d(!0), g(W, null, j(m.value.links, (o, a) => (d(), g("linearGradient", {
id: o.id,
x1: "0%",
y1: "0%",
x2: "100%",
y2: "0%"
}, [
D("stop", {
offset: "0%",
"stop-color": o.sourceColor
}, null, 8, Yt),
D("stop", {
offset: "100%",
"stop-color": o.targetColor
}, null, 8, Bt)
], 8, Ht))), 256))
]),
(d(!0), g(W, null, j(m.value.links, (o) => (d(), g("path", {
class: "vue-ui-flow-link",
d: o.path,
fill: `url(#${o.id})`,
stroke: e.value.style.chart.links.stroke,
"stroke-width": e.value.style.chart.links.strokeWidth,
style: L(`
opacity:${k.value ? k.value.includes(o.source) && k.value.includes(o.target) ? 1 : 0.3 : Y.value ? [o.target, o.source].includes(Y.value) ? 1 : 0.3 : e.value.style.chart.links.opacity}
`)
}, null, 12, Rt))), 256)),
(d(!0), g(W, null, j(m.value.nodes, (o, a) => (d(), g("rect", {
class: "vue-ui-flow-node",
x: o.x,
y: r($)(o.absoluteY) + e.value.style.chart.padding.top,
height: r($)(o.height),
width: H.value,
fill: o.color,
stroke: e.value.style.chart.nodes.stroke,
"stroke-width": e.value.style.chart.nodes.strokeWidth,
onMouseenter: (s) => nt(o),
onMouseleave: l[0] || (l[0] = (s) => Oe()),
style: L(`opacity:${k.value ? k.value.includes(o.name) ? 1 : 0.3 : 1}`)
}, null, 44, Dt))), 256)),
(d(!0), g(W, null, j(m.value.nodes, (o, a) => (d(), g("text", {
x: o.x + H.value / 2,
y: r($)(
o.absoluteY + o.height / 2 - e.value.style.chart.nodes.labels.fontSize / 4
) + e.value.style.chart.padding.top,
"font-size": e.value.style.chart.nodes.labels.fontSize,
fill: r(Ye)(o.color),
"text-anchor": "middle",
style: L(`pointer-events: none; opacity:${k.value ? k.value.includes(o.name) ? 1 : 0 : 1}`)
}, X(e.value.style.chart.nodes.labels.abbreviation.use ? r(wt)({
source: o.name,
length: e.value.style.chart.nodes.labels.abbreviation.length
}) : o.name), 13, Ut))), 256)),
(d(!0), g(W, null, j(m.value.nodes, (o, a) => (d(), g("text", {
x: o.x + H.value / 2,
y: r($)(
o.absoluteY + o.height / 2 + e.value.style.chart.nodes.labels.fontSize
) + e.value.style.chart.padding.top,
"font-size": e.value.style.chart.nodes.labels.fontSize,
fill: r(Ye)(o.color),
"text-anchor": "middle",
style: L(`pointer-events: none; opacity:${k.value ? k.value.includes(o.name) ? 1 : 0 : 1}`)
}, X(r(fe)(
e.value.style.chart.nodes.labels.formatter,
o.value,
r(q)({
p: e.value.style.chart.nodes.labels.prefix,
v: o.value,
s: e.value.style.chart.nodes.labels.suffix,
r: e.value.style.chart.nodes.labels.rounding
}),
{ datapoint: o, seriesIndex: a }
)), 13, Vt))), 256)),
b(t.$slots, "svg", { svg: G.value }, void 0, !0)
], 14, zt)),
t.$slots.watermark ? (d(), g("div", Gt, [
b(t.$slots, "watermark", U(V({ isPrinting: r(we) || r($e) })), void 0, !0)
])) : _("", !0),
te.value ? _("", !0) : (d(), R(r(je), {
key: 5,
config: {
type: "flow",
style: {
backgroundColor: e.value.style.chart.backgroundColor
}
}
}, null, 8, ["config"])),
D("div", {
ref_key: "chartLegend",
ref: Je
}, [
e.value.style.chart.legend.show && Ae.value.length ? (d(), R(St, {
key: 0,
legendSet: Ae.value,
config: rt.value,
onClickMarker: l[1] || (l[1] = (o) => ie(o))
}, {
item: w(({ legend: o, index: a }) => [
D("div", {
onClick: (s) => o.segregate(),
style: L(`opacity:${I.value.length ? I.value.includes(a) ? 1 : 0.5 : 1}`)
}, X(o.name) + " (" + X(o.count) + ") ", 13, Wt)
]),
_: 1
}, 8, ["legendSet", "config"])) : _("", !0),
b(t.$slots, "legend", { legend: Ie.value }, void 0, !0)
], 512),
t.$slots.source ? (d(), g("div", jt, [
b(t.$slots, "source", {}, void 0, !0)
], 512)) : _("", !0),
de(r(Xe), {
show: N.value.showTooltip && le.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: z.value,
content: ae.value,
isCustom: J.value,
isFullscreen: M.value
}, {
"tooltip-before": w(() => [
b(t.$slots, "tooltip-before", U(V({ ...re.value })), void 0, !0)
]),
"tooltip-after": w(() => [
b(t.$slots, "tooltip-after", U(V({ ...re.value })), void 0, !0)
]),
_: 3
}, 8, ["show", "backgroundColor", "color", "fontSize", "borderRadius", "borderColor", "borderWidth", "backgroundOpacity", "position", "offsetY", "parent", "content", "isCustom", "isFullscreen"]),
te.value ? (d(), R(r(Ue), {
key: 7,
hideDetails: "",
config: {
open: N.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: w(() => [
de(r(Ve), {
colNames: K.value.colNames,
head: K.value.head,
body: K.value.body,
config: K.value.config,
title: `${e.value.style.chart.title.text}${e.value.style.chart.title.subtitle.text ? ` : ${e.value.style.chart.title.subtitle.text}` : ""}`,
onClose: l[2] || (l[2] = (o) => N.value.showTable = !1)
}, {
th: w(({ th: o }) => [
D("div", {
innerHTML: o,
style: { display: "flex", "align-items": "center" }
}, null, 8, Xt)
]),
td: w(({ td: o }) => [
vt(X(o.name || o), 1)
]),
_: 1
}, 8, ["colNames", "head", "body", "config", "title"])
]),
_: 1
}, 8, ["config"])) : _("", !0)
], 46, It));
}
}, so = /* @__PURE__ */ Lt(qt, [["__scopeId", "data-v-dbf97adc"]]);
export {
so as default
};