vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
783 lines (782 loc) • 27.6 kB
JavaScript
import { toRef as ee, resolveComponent as te, createElementBlock as r, openBlock as l, Fragment as p, renderList as I, createCommentVNode as f, createBlock as O, createElementVNode as U, withModifiers as Ve, renderSlot as y, mergeProps as $e, withCtx as m, toDisplayString as Oe, useCssVars as je, computed as S, onMounted as We, ref as g, watch as Xe, unref as v, normalizeStyle as W, normalizeClass as we, createVNode as G, createSlots as Ye, normalizeProps as D, guardReactiveProps as N, createTextVNode as Ze, nextTick as qe } from "vue";
import { u as Je, o as Ke, e as Qe, c as Te, t as et, p as Pe, a as tt, b as ot, O as lt, X as st, l as at, P as rt, d as xe, q as nt, r as it, x as ut, y as ct } from "./index-CO-5OgQA.js";
import { _ as dt } from "./Title-CxubvuEh.js";
import { u as vt, U as ht } from "./usePrinter-DldU0tBx.js";
import { D as ft } from "./DataTable-CVSajw4G.js";
import { _ as yt } from "./Tooltip-C0W6IWVK.js";
import pt from "./vue-ui-skeleton-BeEBd4CC.js";
import gt from "./vue-ui-accordion-RRHvINsj.js";
import { u as Fe } from "./useNestedProp-D8sa_wYF.js";
import { _ as mt } from "./PackageVersion-DqsC6J9R.js";
import { _ as bt } from "./PenAndPaper-Bqjmruhh.js";
import { u as kt } from "./useUserOptionState-BIvW1Kz7.js";
import { u as Ct } from "./useChartAccessibility-BWojgys7.js";
import { u as $t } from "./usePanZoom-CUkkqW81.js";
import wt from "./BaseIcon-V0HD2AAD.js";
import { _ as Tt } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const Pt = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onClick", "onMouseover"], xt = ["x", "y", "height", "width", "onClick", "onMouseover"], Ft = {
__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: ["click", "hover"],
setup(n, { emit: E }) {
const H = n, T = E;
function h(a) {
T("click", a);
}
function w(a) {
T("hover", a);
}
return ee(H, "dataset").value.forEach((a) => {
a.nodes && a.nodes.length > 0 && a.nodes.forEach((k) => {
k.ancestor = a;
});
}), (a, k) => {
const X = te("RecursiveCircles", !0);
return l(!0), r(p, null, I(n.dataset, (u) => (l(), r(p, null, [
u.polygonPath && u.polygonPath.coordinates ? (l(), r(p, { key: 0 }, [
(l(!0), r(p, null, I(u.polygonPath.coordinates, (P, V) => (l(), r(p, null, [
U("circle", {
cx: P.x,
cy: P.y,
r: u.circleRadius,
fill: `url(#gradient_${u.color})`,
stroke: n.hoveredUid && n.hoveredUid === u.uid ? n.strokeHovered : n.stroke,
"stroke-width": n.hoveredUid && n.hoveredUid === u.uid ? u.circleRadius / 6 : u.circleRadius / 12,
style: { cursor: "pointer" },
onClick: (A) => h(u),
onMouseover: (A) => w(u),
onMouseleave: k[0] || (k[0] = (A) => w(null))
}, null, 40, Pt),
a.$slots.node ? (l(), r("foreignObject", {
key: 0,
x: P.x - u.circleRadius,
y: P.y - u.circleRadius,
height: u.circleRadius * 2,
width: u.circleRadius * 2,
style: { overflow: "visible" },
onClick: Ve((A) => h(u), ["stop"]),
onMouseover: (A) => w(u),
onMouseleave: k[1] || (k[1] = (A) => w(null))
}, [
y(a.$slots, "node", $e({ ref_for: !0 }, { node: u }))
], 40, xt)) : f("", !0)
], 64))), 256)),
u.nodes && u.nodes.length > 0 ? (l(), O(X, {
key: 0,
dataset: u.nodes,
color: n.color,
stroke: n.stroke,
strokeHovered: n.strokeHovered,
hoveredUid: n.hoveredUid,
onClick: h,
onHover: w
}, {
node: m(({ node: P }) => [
y(a.$slots, "node", $e({ ref_for: !0 }, { node: P }))
]),
_: 2
}, 1032, ["dataset", "color", "stroke", "strokeHovered", "hoveredUid"])) : f("", !0)
], 64)) : f("", !0)
], 64))), 256);
};
}
}, Ot = ["x1", "y1", "x2", "y2", "stroke", "stroke-width"], Rt = ["x1", "y1", "x2", "y2", "stroke", "stroke-width"], St = {
__name: "RecursiveLinks",
props: {
dataset: {
type: Array,
default: () => []
},
color: {
type: String,
default: "#DDDDDD"
},
backgroundColor: {
type: String,
default: "#FFFFFF"
}
},
setup(n) {
return ee(n, "dataset").value.forEach((T) => {
T.nodes && T.nodes.length > 0 && T.nodes.forEach((h) => {
h.ancestor = T;
});
}), (T, h) => {
const w = te("RecursiveLinks", !0);
return l(), r(p, null, [
(l(!0), r(p, null, I(n.dataset, (i) => (l(), r(p, null, [
i.polygonPath && i.polygonPath.coordinates ? (l(!0), r(p, { key: 0 }, I(i.polygonPath.coordinates, (a, k) => (l(), r(p, null, [
i.ancestor && i.ancestor.polygonPath ? (l(), r(p, { key: 0 }, [
U("line", {
x1: a.x,
y1: a.y,
x2: i.ancestor.polygonPath.coordinates[0].x,
y2: i.ancestor.polygonPath.coordinates[0].y,
stroke: n.backgroundColor,
"stroke-width": i.circleRadius / 1.5
}, null, 8, Ot),
U("line", {
x1: a.x,
y1: a.y,
x2: i.ancestor.polygonPath.coordinates[0].x,
y2: i.ancestor.polygonPath.coordinates[0].y,
stroke: n.color,
"stroke-width": i.circleRadius / 2
}, null, 8, Rt)
], 64)) : f("", !0)
], 64))), 256)) : f("", !0)
], 64))), 256)),
(l(!0), r(p, null, I(n.dataset, (i) => (l(), r(p, null, [
i.polygonPath && i.polygonPath.coordinates ? (l(), r(p, { key: 0 }, [
i.nodes && i.nodes.length > 0 ? (l(), O(w, {
key: 0,
dataset: i.nodes,
color: n.color,
backgroundColor: n.backgroundColor
}, null, 8, ["dataset", "color", "backgroundColor"])) : f("", !0)
], 64)) : f("", !0)
], 64))), 256))
], 64);
};
}
}, At = ["x", "y", "fill", "font-size"], Ut = {
__name: "RecursiveLabels",
props: {
color: {
type: String,
default: "#000000"
},
dataset: {
type: Array,
default: () => []
},
hoveredUid: {
type: String,
default: null
}
},
emits: ["zoom", "hover"],
setup(n, { emit: E }) {
return ee(n, "dataset").value.forEach((h) => {
h.nodes && h.nodes.length > 0 && h.nodes.forEach((w) => {
w.ancestor = h;
});
}), (h, w) => {
const i = te("RecursiveLabels", !0);
return l(!0), r(p, null, I(n.dataset, (a) => (l(), r(p, null, [
a.polygonPath && a.polygonPath.coordinates ? (l(), r(p, { key: 0 }, [
(l(!0), r(p, null, I(a.polygonPath.coordinates, (k) => (l(), r("text", {
x: k.x,
y: k.y + a.circleRadius * 2,
fill: n.color,
"font-size": a.circleRadius,
"text-anchor": "middle",
style: { opacity: "0.8", "pointer-events": "none" }
}, Oe(a.name), 9, At))), 256)),
a.nodes && a.nodes.length > 0 ? (l(), O(i, {
key: 0,
dataset: a.nodes,
color: n.color,
hoveredUid: n.hoveredUid
}, null, 8, ["dataset", "color", "hoveredUid"])) : f("", !0)
], 64)) : f("", !0)
], 64))), 256);
};
}
}, It = ["id"], Dt = {
key: 1,
ref: "noTitle",
class: "vue-data-ui-no-title-space",
style: "height:36px; width: 100%;background:transparent"
}, Nt = {
key: 2,
style: "width:100%;background:transparent;"
}, _t = ["xmlns", "viewBox"], Lt = ["width", "height"], Et = ["id"], Ht = ["stop-color"], Mt = ["stop-color"], Bt = {
key: 5,
class: "vue-data-ui-watermark"
}, zt = {
key: 6,
"data-dom-to-png-ignore": "",
class: "reset-wrapper"
}, Gt = {
key: 8,
ref: "source",
dir: "auto"
}, Vt = ["innerHTML"], jt = {
__name: "vue-ui-molecule",
props: {
config: {
type: Object,
default() {
return {};
}
},
dataset: {
type: Array,
default() {
return [];
}
}
},
emits: ["selectNode"],
setup(n, { expose: E, emit: H }) {
je((t) => ({
"6c5e8f09": t.slicerColor
}));
const { vue_ui_molecule: T } = Je(), h = n, w = H, i = S(() => !!h.dataset && h.dataset.length);
We(() => {
a();
});
function a() {
Ke(h.dataset) && Qe({
componentName: "VueUiMolecule",
type: "dataset"
});
}
const k = g(Te()), X = g(null), u = g(!1), P = g(""), V = g(null), A = g(0), oe = g(0), le = g(0), e = S({
get: () => re(),
set: (t) => t
}), { userOptionsVisible: Y, setUserOptionsVisibility: se, keepUserOptionState: ae } = kt({ config: e.value }), { svgRef: Z } = Ct({ config: e.value.style.chart.title });
function re() {
const t = Fe({
userConfig: h.config,
defaultConfig: T
});
return t.theme ? {
...Fe({
userConfig: tt.vue_ui_molecule[t.theme] || h.config,
defaultConfig: t
}),
customPalette: et[t.theme] || Pe
} : t;
}
Xe(() => h.config, (t) => {
e.value = re(), Y.value = !e.value.userOptions.showOnChartHover, a(), oe.value += 1, le.value += 1, $.value.showTable = e.value.table.show, $.value.showTooltip = e.value.style.chart.tooltip.show;
}, { deep: !0 });
const { isPrinting: ne, isImaging: ie, generatePdf: ue, generateImage: ce } = vt({
elementId: `cluster_${k.value}`,
fileName: e.value.style.chart.title.text || "vue-ui-molecule",
options: e.value.userOptions.print
}), Re = S(() => e.value.userOptions.show && !e.value.style.chart.title.text), Se = S(() => ot(e.value.customPalette)), $ = g({
showTable: e.value.table.show,
showDataLabels: !0,
showTooltip: e.value.style.chart.tooltip.show
});
function de(t, s = 0) {
return Array.isArray(t) && t.length > 0 && t[0].nodes ? de(t[0].nodes, s + 1) : s;
}
function Ae() {
const t = de(h.dataset);
let s = 100, o = s;
for (let d = 0; d < t; d += 1)
s /= 1, o += s;
return {
height: o,
width: o
};
}
const C = g(Ae());
g(`0 0 ${C.value.width} ${C.value.height}`);
function ve(t, s = { x: -C.value.width / 2.43, y: C.value.height / 2 }, o = C.value.width / 1.1, d = 24, c = 0, b = 0, x = "#BBBBBB", K = 0) {
if (!Array.isArray(t) || t.length === 0) return t;
const Ge = rt({
plot: s,
radius: o,
sides: t.length,
rotation: c
});
return t.forEach((F, be) => {
const ke = Ge.coordinates[be], Ce = F.color ? (() => {
let Q = xe(F.color);
return Q.startsWith("#") ? Q : `#${Q}`;
})() : null;
let L;
Ce ? L = Ce : K === 0 ? L = x : K === 1 ? (L = Se.value[b] || Pe[b] || x, b += 1) : L = x, F.polygonPath = { coordinates: [ke] }, F.circleRadius = d, F.color = L, F.uid = Te(), Array.isArray(F.nodes) && F.nodes.length && (F.nodes = ve(
F.nodes,
ke,
o / 2.9,
d / 2.2,
c + Math.PI * be / F.nodes.length,
b,
L,
K + 1
));
}), t;
}
function Ue(t) {
const s = /* @__PURE__ */ new Set();
function o(c) {
c.forEach((b) => {
if (!b.color) return;
let x = b.color;
/^#?[0-9A-F]{6}$/i.test(x) || (x = xe(x)), x.startsWith("#") || (x = `#${x}`), s.add(x), Array.isArray(b.nodes) && b.nodes.length && o(b.nodes);
});
}
o(t);
const d = {};
return Array.from(s).forEach((c) => {
const b = c.slice(1);
d[c] = `gradient_${b}`;
}), d;
}
const Ie = S(() => Ue(R.value)), R = S(() => {
const t = lt(h.dataset);
return ve(t);
}), q = g(null);
function De(t) {
q.value = {
datapoint: t,
seriesIndex: -1,
series: R.value,
config: e.value
};
const s = e.value.style.chart.tooltip.customFormat;
if (ut(s) && ct(() => s({
seriesIndex: -1,
datapoint: t,
series: R.value,
config: e.value
})))
P.value = s({
seriesIndex: -1,
// well, ok
datapoint: t,
series: R.value,
config: e.value
});
else {
let o = "";
o += `<div style="display:flex;align-items:center;gap:3px"><div style="color:${t.color}">⬤</div><div>${t.name}</div></div>`, t.details && (o += `<div style="width:100%;border-top:1px solid ${e.value.style.chart.tooltip.borderColor};margin-top: 2px">${t.details}</div>`), P.value = `<div style="font-family:inherit">${o}</div>`;
}
}
const he = g(null), M = g(null);
function Ne(t) {
he.value = t, t ? (u.value = !0, De(t), M.value = t.uid) : (u.value = !1, P.value = "", M.value = null);
}
function _e(t) {
const s = [];
function o(d) {
d.forEach((c) => {
const b = {
name: c.name,
details: c.details || "-",
ancestor: c.ancestor && c.ancestor.name || "-",
color: c.color || ""
};
s.push(b), c.nodes && c.nodes.length > 0 && o(c.nodes, c.name);
});
}
return o(t), s;
}
const Le = S(() => _e(R.value)), _ = S(() => {
const t = [
e.value.table.translations.nodeName,
e.value.table.translations.details,
e.value.table.translations.ancestor
], s = Le.value.map((c, b) => [
{
color: c.color,
name: c.name
},
c.details,
c.ancestor || ""
]), 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
}, d = [
e.value.table.translations.nodeName,
e.value.table.translations.details,
e.value.table.translations.ancestor
];
return {
head: t,
body: s,
config: o,
colNames: d
};
});
function fe() {
qe(() => {
const t = _.value.body.map((d, c) => [[d[0].name], [d[1]], [d[2]]]), s = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [[..._.value.head]]].concat(t), o = nt(s);
it({ csvContent: o, title: e.value.style.chart.title.text || "vue-ui-molecule" });
});
}
function Ee() {
return R.value;
}
const B = g(!1);
function He(t) {
B.value = t, A.value += 1;
}
function ye() {
$.value.showTable = !$.value.showTable;
}
function pe() {
$.value.showDataLabels = !$.value.showDataLabels;
}
function ge() {
$.value.showTooltip = !$.value.showTooltip;
}
const z = g(!1);
function J() {
z.value = !z.value;
}
const Me = S(() => !z.value), { viewBox: j, resetZoom: me, isZoom: Be } = $t(Z, {
x: 0,
y: 0,
width: C.value.width <= 0 ? 10 : C.value.width,
height: C.value.height <= 0 ? 10 : C.value.height
}, e.value.style.chart.zoom.speed, Me);
function ze(t) {
w("selectNode", t);
}
return E({
getData: Ee,
generatePdf: ue,
generateCsv: fe,
generateImage: ce,
toggleTable: ye,
toggleLabels: pe,
toggleTooltip: ge,
toggleAnnotator: J
}), (t, s) => (l(), r("div", {
ref_key: "moleculeChart",
ref: V,
class: we(`vue-ui-molecule ${B.value ? "vue-data-ui-wrapper-fullscreen" : ""}`),
style: W(`font-family:${e.value.style.fontFamily};width:100%; text-align:center;background:${e.value.style.chart.backgroundColor}`),
id: `cluster_${k.value}`,
onMouseleave: s[2] || (s[2] = (o) => {
he.value = null, M.value = null, v(se)(!1);
}),
onMouseenter: s[3] || (s[3] = () => v(se)(!0))
}, [
e.value.userOptions.buttons.annotator ? (l(), O(bt, {
key: 0,
svgRef: v(Z),
backgroundColor: e.value.style.chart.backgroundColor,
color: e.value.style.chart.color,
active: z.value,
onClose: J
}, null, 8, ["svgRef", "backgroundColor", "color", "active"])) : f("", !0),
Re.value ? (l(), r("div", Dt, null, 512)) : f("", !0),
e.value.style.chart.title.text ? (l(), r("div", Nt, [
(l(), O(dt, {
key: `title_${oe.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"]))
])) : f("", !0),
e.value.userOptions.show && i.value && (v(ae) || v(Y)) ? (l(), O(ht, {
ref_key: "details",
ref: X,
key: `user_options_${A.value}`,
backgroundColor: e.value.style.chart.backgroundColor,
color: e.value.style.chart.color,
isPrinting: v(ne),
isImaging: v(ie),
uid: k.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,
hasTable: e.value.userOptions.buttons.table,
hasLabel: e.value.userOptions.buttons.labels,
hasFullscreen: e.value.userOptions.buttons.fullscreen,
isTooltip: $.value.showTooltip,
titles: { ...e.value.userOptions.buttonTitles },
chartElement: V.value,
position: e.value.userOptions.position,
hasAnnotator: e.value.userOptions.buttons.annotator,
isAnnotation: z.value,
onToggleFullscreen: He,
onGeneratePdf: v(ue),
onGenerateCsv: fe,
onGenerateImage: v(ce),
onToggleTable: ye,
onToggleLabels: pe,
onToggleTooltip: ge,
onToggleAnnotator: J,
style: W({
visibility: v(ae) ? v(Y) ? "visible" : "hidden" : "visible"
})
}, Ye({ _: 2 }, [
t.$slots.menuIcon ? {
name: "menuIcon",
fn: m(({ isOpen: o, color: d }) => [
y(t.$slots, "menuIcon", D(N({ isOpen: o, color: d })), void 0, !0)
]),
key: "0"
} : void 0,
t.$slots.optionTooltip ? {
name: "optionTooltip",
fn: m(() => [
y(t.$slots, "optionTooltip", {}, void 0, !0)
]),
key: "1"
} : void 0,
t.$slots.optionPdf ? {
name: "optionPdf",
fn: m(() => [
y(t.$slots, "optionPdf", {}, void 0, !0)
]),
key: "2"
} : void 0,
t.$slots.optionCsv ? {
name: "optionCsv",
fn: m(() => [
y(t.$slots, "optionCsv", {}, void 0, !0)
]),
key: "3"
} : void 0,
t.$slots.optionImg ? {
name: "optionImg",
fn: m(() => [
y(t.$slots, "optionImg", {}, void 0, !0)
]),
key: "4"
} : void 0,
t.$slots.optionTable ? {
name: "optionTable",
fn: m(() => [
y(t.$slots, "optionTable", {}, void 0, !0)
]),
key: "5"
} : void 0,
t.$slots.optionLabels ? {
name: "optionLabels",
fn: m(() => [
y(t.$slots, "optionLabels", {}, void 0, !0)
]),
key: "6"
} : void 0,
t.$slots.optionFullscreen ? {
name: "optionFullscreen",
fn: m(({ toggleFullscreen: o, isFullscreen: d }) => [
y(t.$slots, "optionFullscreen", D(N({ toggleFullscreen: o, isFullscreen: d })), void 0, !0)
]),
key: "7"
} : void 0,
t.$slots.optionAnnotator ? {
name: "optionAnnotator",
fn: m(({ toggleAnnotator: o, isAnnotator: d }) => [
y(t.$slots, "optionAnnotator", D(N({ toggleAnnotator: o, isAnnotator: d })), void 0, !0)
]),
key: "8"
} : void 0
]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasTooltip", "hasPdf", "hasXls", "hasImg", "hasTable", "hasLabel", "hasFullscreen", "isTooltip", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "onGeneratePdf", "onGenerateImage", "style"])) : f("", !0),
i.value ? (l(), r("svg", {
key: 4,
ref_key: "svgRef",
ref: Z,
xmlns: v(st),
viewBox: `${v(j).x} ${v(j).y} ${v(j).width} ${v(j).height}`,
class: we({ "vue-data-ui-fullscreen--on": B.value, "vue-data-ui-fulscreen--off": !B.value }),
style: W(`overflow: hidden; background:transparent;color:${e.value.style.chart.color}`)
}, [
G(mt),
t.$slots["chart-background"] ? (l(), r("foreignObject", {
key: 0,
x: 0,
y: 0,
width: C.value.width <= 0 ? 10 : C.value.width,
height: C.value.height <= 0 ? 10 : C.value.height,
style: {
pointerEvents: "none"
}
}, [
y(t.$slots, "chart-background", {}, void 0, !0)
], 8, Lt)) : f("", !0),
U("defs", null, [
(l(!0), r(p, null, I(Object.keys(Ie.value), (o) => (l(), r("radialGradient", {
id: `gradient_${o}`,
cx: "50%",
cy: "30%",
r: "50%",
fx: "50%",
fy: "50%"
}, [
U("stop", {
offset: "0%",
"stop-color": v(at)(o, 0.5)
}, null, 8, Ht),
U("stop", {
offset: "100%",
"stop-color": o
}, null, 8, Mt)
], 8, Et))), 256))
]),
G(St, {
dataset: R.value,
color: e.value.style.chart.links.stroke,
backgroundColor: e.value.style.chart.backgroundColor
}, null, 8, ["dataset", "color", "backgroundColor"]),
G(Ft, {
dataset: R.value,
hoveredUid: M.value,
stroke: e.value.style.chart.nodes.stroke,
strokeHovered: e.value.style.chart.nodes.strokeHovered,
onClick: ze,
onHover: Ne
}, {
node: m(({ node: o }) => [
y(t.$slots, "node", D(N({ node: o })), void 0, !0)
]),
_: 3
}, 8, ["dataset", "hoveredUid", "stroke", "strokeHovered"]),
$.value.showDataLabels ? (l(), O(Ut, {
key: 1,
dataset: R.value,
color: e.value.style.chart.color,
hoveredUid: M.value
}, null, 8, ["dataset", "color", "hoveredUid"])) : f("", !0),
y(t.$slots, "svg", { svg: C.value }, void 0, !0)
], 14, _t)) : f("", !0),
t.$slots.watermark ? (l(), r("div", Bt, [
y(t.$slots, "watermark", D(N({ isPrinting: v(ne) || v(ie) })), void 0, !0)
])) : f("", !0),
v(Be) ? (l(), r("div", zt, [
y(t.$slots, "reset-action", { reset: v(me) }, () => [
U("button", {
"data-cy-reset": "",
tabindex: "0",
role: "button",
class: "vue-data-ui-refresh-button",
style: W({
background: e.value.style.chart.backgroundColor
}),
onClick: s[0] || (s[0] = (o) => v(me)(!0))
}, [
G(wt, {
name: "refresh",
stroke: e.value.style.chart.color
}, null, 8, ["stroke"])
], 4)
], !0)
])) : f("", !0),
i.value ? f("", !0) : (l(), O(pt, {
key: 7,
config: {
type: "molecule",
style: {
backgroundColor: e.value.style.chart.backgroundColor,
molecule: {
color: "#CCCCCC"
}
}
}
}, null, 8, ["config"])),
t.$slots.source ? (l(), r("div", Gt, [
y(t.$slots, "source", {}, void 0, !0)
], 512)) : f("", !0),
G(yt, {
show: $.value.showTooltip && u.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: V.value,
content: P.value,
isFullscreen: B.value,
isCustom: e.value.style.chart.tooltip.customFormat && typeof e.value.style.chart.tooltip.customFormat == "function"
}, {
"tooltip-before": m(() => [
y(t.$slots, "tooltip-before", D(N({ ...q.value })), void 0, !0)
]),
"tooltip-after": m(() => [
y(t.$slots, "tooltip-after", D(N({ ...q.value })), void 0, !0)
]),
_: 3
}, 8, ["show", "backgroundColor", "color", "borderRadius", "borderColor", "borderWidth", "fontSize", "backgroundOpacity", "position", "offsetY", "parent", "content", "isFullscreen", "isCustom"]),
i.value ? (l(), O(gt, {
key: 9,
hideDetails: "",
config: {
open: $.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: m(() => [
(l(), O(ft, {
key: `table_${le.value}`,
colNames: _.value.colNames,
head: _.value.head,
body: _.value.body,
config: _.value.config,
title: `${e.value.style.chart.title.text}${e.value.style.chart.title.subtitle.text ? ` : ${e.value.style.chart.title.subtitle.text}` : ""}`,
onClose: s[1] || (s[1] = (o) => $.value.showTable = !1)
}, {
th: m(({ th: o }) => [
U("div", {
innerHTML: o,
style: { display: "flex", "align-items": "center" }
}, null, 8, Vt)
]),
td: m(({ td: o }) => [
Ze(Oe(o.name || o), 1)
]),
_: 1
}, 8, ["colNames", "head", "body", "config", "title"]))
]),
_: 1
}, 8, ["config"])) : f("", !0)
], 46, It));
}
}, io = /* @__PURE__ */ Tt(jt, [["__scopeId", "data-v-90558edd"]]);
export {
io as default
};