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