vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
690 lines (689 loc) • 28.5 kB
JavaScript
import { computed as h, ref as r, watch as we, onMounted as Xe, onBeforeUnmount as Ge, createElementBlock as u, openBlock as s, unref as i, normalizeStyle as B, normalizeClass as U, createBlock as C, createCommentVNode as g, createElementVNode as O, createVNode as $e, createSlots as Ee, withCtx as f, renderSlot as d, normalizeProps as _, guardReactiveProps as P, Fragment as M, renderList as N, toDisplayString as I, createTextVNode as He, nextTick as We } from "vue";
import { u as je, c as qe, t as Je, p as Ce, a as Ke, b as Qe, o as Ze, e as K, d as et, X as tt, f as R, i as Q, x as xe, q as at, r as lt, y as ot } from "./index-BaaDnc4F.js";
import { t as nt, u as st } from "./useResponsive-vZgZwV-S.js";
import { _ as rt } from "./Title-D_MGglyN.js";
import { u as ut, U as it } from "./usePrinter-y4-4tCWT.js";
import { L as ct } from "./Legend-Be8mrJpb.js";
import { D as dt } from "./DataTable-DvwmNjb-.js";
import { _ as vt } from "./Tooltip-HRgkF8HD.js";
import ht from "./vue-ui-skeleton-6RiQNJSb.js";
import ft from "./vue-ui-accordion-CF9kQTXq.js";
import { u as Te } from "./useNestedProp-D8vQcOps.js";
import { _ as gt } from "./PackageVersion-D9Lm1C1X.js";
import { P as pt } from "./PenAndPaper-DR58HO_U.js";
import { u as yt } from "./useUserOptionState-BIvW1Kz7.js";
import { u as mt } from "./useChartAccessibility-BWojgys7.js";
import { _ as bt } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const kt = ["id"], wt = ["xmlns", "viewBox"], $t = ["width", "height"], Ct = ["cx", "cy", "r", "stroke", "stroke-width", "stroke-dasharray", "stroke-dashoffset"], xt = ["cx", "cy", "r", "stroke", "stroke-width", "stroke-dasharray", "stroke-dashoffset"], Tt = ["id"], Ot = ["stdDeviation"], _t = ["filter"], Pt = ["cx", "cy", "r", "stroke-width", "stroke-dasharray", "stroke-dashoffset"], It = ["cx", "cy", "r", "stroke-width", "stroke-dasharray", "stroke-dashoffset", "onMouseenter"], At = { key: 2 }, St = ["onMouseenter"], Ft = ["x", "y", "font-size", "fill", "font-weight"], Mt = {
key: 5,
class: "vue-data-ui-watermark"
}, Nt = ["onClick"], Rt = ["innerHTML"], Dt = {
__name: "vue-ui-onion",
props: {
config: {
type: Object,
default() {
return {};
}
},
dataset: {
type: Array,
default() {
return [];
}
}
},
emits: ["selectLegend"],
setup(Oe, { expose: _e, emit: Pe }) {
const { vue_ui_onion: Ie } = je(), w = Oe, D = h(() => !!w.dataset && w.dataset.length), x = r(qe()), Ae = r(null), Z = r(0), L = r(!1), X = r(""), y = r([]), A = r(null), ee = r(null), te = r(null), ae = r(null), le = r(null), oe = r(0), ne = r(0), se = r(0), e = h({
get: () => ce(),
set: (t) => t
}), { userOptionsVisible: G, setUserOptionsVisibility: re, keepUserOptionState: ue } = yt({ config: e.value }), { svgRef: ie } = mt({ config: e.value.style.chart.title });
function ce() {
const t = Te({
userConfig: w.config,
defaultConfig: Ie
});
return t.theme ? {
...Te({
userConfig: Ke.vue_ui_onion[t.theme] || w.config,
defaultConfig: t
}),
customPalette: Je[t.theme] || Ce
} : t;
}
we(() => w.config, (t) => {
e.value = ce(), G.value = !e.value.userOptions.showOnChartHover, ge(), oe.value += 1, ne.value += 1, se.value += 1, m.value.showTable = e.value.table.show, m.value.showTooltip = e.value.style.chart.tooltip.show;
}, { deep: !0 });
const { isPrinting: de, isImaging: ve, generatePdf: he, generateImage: fe } = ut({
elementId: `vue-ui-onion_${x.value}`,
fileName: e.value.style.chart.title.text || "vue-ui-onion"
}), Se = h(() => e.value.userOptions.show && !e.value.style.chart.title.text), Fe = h(() => Qe(e.value.customPalette)), m = r({
showTable: e.value.table.show,
showTooltip: e.value.style.chart.tooltip.show
}), n = r({
height: 512,
width: 512,
padding: {
top: 64,
left: 64,
right: 64,
bottom: 64
},
minRadius: 64
}), V = r(null);
Xe(() => {
ge();
});
function ge() {
if (Ze(w.dataset) && K({
componentName: "VueUiOnion",
type: "dataset"
}), e.value.responsive) {
const o = nt(() => {
const { width: a, height: l } = st({
chart: A.value,
title: e.value.style.chart.title.text ? ee.value : null,
legend: e.value.style.chart.legend.show ? te.value : null,
source: ae.value,
noTitle: le.value
});
requestAnimationFrame(() => {
n.value.width = a, n.value.height = l, n.value.padding.top = Math.max(a, l) * 0.125, n.value.padding.right = Math.max(a, l) * 0.125, n.value.padding.bottom = Math.max(a, l) * 0.125, n.value.padding.left = Math.max(a, l) * 0.125, n.value.minRadius = Math.min(a, l) * 0.125;
});
});
V.value = new ResizeObserver(o), V.value.observe(A.value.parentNode);
}
}
Ge(() => {
V.value && V.value.disconnect();
});
const c = h(() => ({
top: n.value.padding.top,
left: n.value.padding.left,
right: n.value.width - n.value.padding.right,
bottom: n.value.height - n.value.padding.bottom,
centerX: n.value.width / 2,
centerY: n.value.height / 2,
width: n.value.width - n.value.padding.right - n.value.padding.left,
height: n.value.height - n.value.padding.bottom - n.value.padding.top,
minRadius: n.value.minRadius,
maxRadius: Math.min(n.value.width, n.value.height) - n.value.padding.top * 2
})), v = h(() => (w.dataset.forEach((t, o) => {
[null, void 0].includes(t.name) && K({
componentName: "VueUiOnion",
type: "datasetSerieAttribute",
property: "name",
index: o
}), [void 0].includes(t.percentage) && K({
componentName: "VueUiOnion",
type: "datasetSerieAttribute",
property: "percentage",
index: o
});
}), w.dataset.map((t, o) => {
const a = `onion_serie_${o}_${x.value}`;
return {
...t,
percentage: t.percentage || 0,
targetPercentage: t.percentage || 0,
color: et(t.color) || Fe.value[o] || Ce[o],
id: a,
shape: "circle",
opacity: y.value.includes(a) ? 0.5 : 1,
absoluteIndex: o,
segregate: () => pe(a),
isSegregated: y.value.includes(a)
};
}))), S = r(v.value), Me = h(() => e.value.useStartAnimation), Ne = r(null), Re = h(() => Math.max(...v.value.map((t) => t.percentage))), E = r(!1);
we(() => v.value, De, { immediate: !0 });
function De() {
if (Me.value && !E.value) {
let o = function() {
t >= Re.value ? (cancelAnimationFrame(Ne.value), S.value = v.value, E.value = !0) : (S.value = v.value.map((a) => ({
...a,
percentage: t < a.targetPercentage ? t : a.targetPercentage
})), t += 1, requestAnimationFrame(o), E.value = !0);
};
S.value = v.value.map((a) => ({
...a,
percentage: 0
}));
let t = 0;
o();
} else
S.value = v.value;
}
const Le = h(() => ({
cy: "onion-div-legend",
backgroundColor: e.value.style.chart.legend.backgroundColor,
color: e.value.style.chart.legend.color,
fontSize: e.value.style.chart.legend.fontSize,
paddingBottom: 12,
fontWeight: e.value.style.chart.legend.bold ? "bold" : ""
})), Ve = h(() => v.value.filter((t) => !y.value.includes(t.id)).length), $ = h(() => {
const t = Math.min(c.value.width, c.value.height) / 2 / v.value.length;
return {
gutter: (t > e.value.style.chart.layout.maxThickness ? e.value.style.chart.layout.maxThickness : t) * e.value.style.chart.layout.gutter.width,
track: (t > e.value.style.chart.layout.maxThickness ? e.value.style.chart.layout.maxThickness : t) * e.value.style.chart.layout.track.width
};
}), b = h(() => S.value.filter((t) => !y.value.includes(t.id)).map((t, o) => {
const a = (c.value.maxRadius - $.value.track) / Ve.value / 2 * (1 + o), l = c.value.centerY - a;
return {
percentage: t.percentage || 0,
...t,
labelY: l,
radius: a,
path: ze(a, t.percentage || 0)
};
}));
function ze(t, o) {
const a = 2 * Math.PI * t, l = a * 0.75, p = `${l} ${a}`, F = l * (1 - o / 100);
return {
bgDashArray: `${l} ${a}`,
bgDashOffset: 0,
dashArray: p,
dashOffset: F,
fullOffset: 0,
active: `
M ${c.value.centerX},${c.value.centerY - t}
A ${t},${t} 0 1 1
${c.value.centerX + t * Math.cos(Math.PI * 3 / 4)},${c.value.centerY + t * Math.sin(Math.PI * 3 / 4)}
`.trim()
};
}
const Ye = Pe;
function pe(t) {
y.value.includes(t) ? y.value = y.value.filter((o) => o !== t) : y.value.push(t), Ye("selectLegend", b.value);
}
function Be() {
return b.value;
}
const H = h(() => {
const t = [e.value.table.translations.serie, e.value.table.translations.percentage, e.value.table.translations.value], o = b.value.map((a) => [
a.name,
a.percentage,
a.value
]);
return { head: t, body: o };
}), z = h(() => {
const t = H.value.head, o = b.value.map((l) => [
`<span style="color:${l.color}">⬤</span> ${l.name}`,
`${Number(l.percentage ?? 0).toFixed(e.value.table.td.roundingPercentage).toLocaleString()}%`,
`${l.prefix || ""}${[null, void 0, NaN, "NaN"].includes(l.value) ? "-" : l.value.toFixed(e.value.table.td.roundingValue).toLocaleString()}${l.suffix || ""}`
]), a = {
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 { head: t, body: o, config: a, colNames: t };
});
function ye() {
We(() => {
const t = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [""]], o = H.value.head, a = H.value.body, l = t.concat([o]).concat(a), p = at(l);
lt({ csvContent: p, title: e.value.style.chart.title.text || "vue-ui-onion" });
});
}
const k = r(void 0), T = r(!1);
function Ue(t) {
T.value = t, Z.value += 1;
}
const W = r(null);
function me({ datapoint: t, seriesIndex: o, show: a = !0 }) {
const l = t.absoluteIndex;
k.value = o, W.value = {
datapoint: t,
seriesIndex: l,
series: v.value,
config: e.value
}, L.value = a;
let p = "";
const F = e.value.style.chart.tooltip.customFormat;
if (xe(F) && ot(() => F({
seriesIndex: l,
datapoint: t,
series: v.value,
config: e.value
})))
X.value = F({
seriesIndex: l,
datapoint: t,
series: v.value,
config: e.value
});
else {
const q = e.value.style.chart.tooltip.showPercentage, J = e.value.style.chart.tooltip.showValue;
p += `<div style="width: 100%; border-bottom: 1px solid ${e.value.style.chart.tooltip.borderColor}; padding-bottom: 6px;margin-bottom:3px;display:flex;flex-direction:row;gap:3px;align-items:center"><svg viewBox="0 0 12 12" height="14" width="14"><circle cx="6" cy="6" r="6" stroke="none" fill="${t.color}"/></svg><span></span>${t.name}</span></div>`, p += `<div style="width:100%;text-align:left;"><b>${q ? R({ p: "", v: t.percentage, s: "%", r: e.value.style.chart.tooltip.roundingPercentage }) : ""}</b> ${q && J ? "(" : ""}${J ? Q(
e.value.style.chart.layout.labels.value.formatter,
t.value,
R({
p: t.prefix || "",
v: t.value,
s: t.suffix || "",
r: e.value.style.chart.tooltip.roundingValue
}),
{ datapoint: t, seriesIndex: o }
) : ""}${q && J ? ")" : ""}</div>`, X.value = `<div>${p}</div>`;
}
}
function be() {
m.value.showTable = !m.value.showTable;
}
function ke() {
m.value.showTooltip = !m.value.showTooltip;
}
const Y = r(!1);
function j() {
Y.value = !Y.value;
}
return _e({
getData: Be,
generatePdf: he,
generateCsv: ye,
generateImage: fe,
toggleTable: be,
toggleTooltip: ke,
toggleAnnotator: j
}), (t, o) => (s(), u("div", {
class: U(`vue-ui-onion ${T.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${e.value.useCssAnimation ? "" : "vue-ui-dna"}`),
ref_key: "onionChart",
ref: A,
id: `vue-ui-onion_${x.value}`,
style: B(`font-family:${e.value.style.fontFamily};width:100%; ${e.value.responsive ? "height: 100%;" : ""} text-align:center;background:${e.value.style.chart.backgroundColor}`),
onMouseenter: o[4] || (o[4] = () => i(re)(!0)),
onMouseleave: o[5] || (o[5] = () => i(re)(!1))
}, [
e.value.userOptions.buttons.annotator ? (s(), C(pt, {
key: 0,
svgRef: i(ie),
backgroundColor: e.value.style.chart.backgroundColor,
color: e.value.style.chart.color,
active: Y.value,
onClose: j
}, null, 8, ["svgRef", "backgroundColor", "color", "active"])) : g("", !0),
Se.value ? (s(), u("div", {
key: 1,
ref_key: "noTitle",
ref: le,
class: "vue-data-ui-no-title-space",
style: "height:36px; width: 100%;background:transparent"
}, null, 512)) : g("", !0),
e.value.style.chart.title.text ? (s(), u("div", {
key: 2,
ref_key: "chartTitle",
ref: ee,
style: "width:100%;background:transparent"
}, [
(s(), C(rt, {
key: `title_${oe.value}`,
config: {
title: {
cy: "onion-div-title",
...e.value.style.chart.title
},
subtitle: {
cy: "onion-div-subtitle",
...e.value.style.chart.title.subtitle
}
}
}, null, 8, ["config"]))
], 512)) : g("", !0),
e.value.userOptions.show && D.value && (i(ue) || i(G)) ? (s(), C(it, {
ref_key: "details",
ref: Ae,
key: `user_options${Z.value}`,
backgroundColor: e.value.style.chart.backgroundColor,
color: e.value.style.chart.color,
isImaging: i(ve),
isPrinting: i(de),
uid: x.value,
hasTooltip: e.value.userOptions.buttons.tooltip && e.value.style.chart.tooltip.show,
hasPdf: e.value.userOptions.buttons.pdf,
hasImg: e.value.userOptions.buttons.img,
hasXls: e.value.userOptions.buttons.csv,
hasTable: e.value.userOptions.buttons.table,
hasFullscreen: e.value.userOptions.buttons.fullscreen,
isFullscreen: T.value,
isTooltip: m.value.showTooltip,
titles: { ...e.value.userOptions.buttonTitles },
chartElement: A.value,
position: e.value.userOptions.position,
hasAnnotator: e.value.userOptions.buttons.annotator,
isAnnotation: Y.value,
onToggleFullscreen: Ue,
onGeneratePdf: i(he),
onGenerateCsv: ye,
onGenerateImage: i(fe),
onToggleTable: be,
onToggleTooltip: ke,
onToggleAnnotator: j,
style: B({
visibility: i(ue) ? i(G) ? "visible" : "hidden" : "visible"
})
}, Ee({ _: 2 }, [
t.$slots.menuIcon ? {
name: "menuIcon",
fn: f(({ isOpen: a, color: l }) => [
d(t.$slots, "menuIcon", _(P({ isOpen: a, color: l })), void 0, !0)
]),
key: "0"
} : void 0,
t.$slots.optionTooltip ? {
name: "optionTooltip",
fn: f(() => [
d(t.$slots, "optionTooltip", {}, void 0, !0)
]),
key: "1"
} : void 0,
t.$slots.optionPdf ? {
name: "optionPdf",
fn: f(() => [
d(t.$slots, "optionPdf", {}, void 0, !0)
]),
key: "2"
} : void 0,
t.$slots.optionCsv ? {
name: "optionCsv",
fn: f(() => [
d(t.$slots, "optionCsv", {}, void 0, !0)
]),
key: "3"
} : void 0,
t.$slots.optionImg ? {
name: "optionImg",
fn: f(() => [
d(t.$slots, "optionImg", {}, void 0, !0)
]),
key: "4"
} : void 0,
t.$slots.optionTable ? {
name: "optionTable",
fn: f(() => [
d(t.$slots, "optionTable", {}, void 0, !0)
]),
key: "5"
} : void 0,
t.$slots.optionFullscreen ? {
name: "optionFullscreen",
fn: f(({ toggleFullscreen: a, isFullscreen: l }) => [
d(t.$slots, "optionFullscreen", _(P({ toggleFullscreen: a, isFullscreen: l })), void 0, !0)
]),
key: "6"
} : void 0,
t.$slots.optionAnnotator ? {
name: "optionAnnotator",
fn: f(({ toggleAnnotator: a, isAnnotator: l }) => [
d(t.$slots, "optionAnnotator", _(P({ toggleAnnotator: a, isAnnotator: l })), void 0, !0)
]),
key: "7"
} : void 0
]), 1032, ["backgroundColor", "color", "isImaging", "isPrinting", "uid", "hasTooltip", "hasPdf", "hasImg", "hasXls", "hasTable", "hasFullscreen", "isFullscreen", "isTooltip", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "onGeneratePdf", "onGenerateImage", "style"])) : g("", !0),
D.value ? (s(), u("svg", {
key: 4,
ref_key: "svgRef",
ref: ie,
xmlns: i(tt),
class: U({ "vue-data-ui-fullscreen--on": T.value, "vue-data-ui-fulscreen--off": !T.value }),
viewBox: `0 0 ${n.value.width <= 0 ? 10 : n.value.width} ${n.value.height <= 0 ? 10 : n.value.height}`,
style: B(`max-width:100%;overflow:visible;background:transparent;color:${e.value.style.chart.color}`)
}, [
$e(gt),
t.$slots["chart-background"] ? (s(), u("foreignObject", {
key: 0,
x: 0,
y: 0,
width: n.value.width <= 0 ? 10 : n.value.width,
height: n.value.height <= 0 ? 10 : n.value.height,
style: {
pointerEvents: "none"
}
}, [
d(t.$slots, "chart-background", {}, void 0, !0)
], 8, $t)) : g("", !0),
(s(!0), u(M, null, N(b.value, (a, l) => (s(), u("circle", {
cx: c.value.centerX,
cy: c.value.centerY,
r: a.radius <= 0 ? 1e-4 : a.radius,
stroke: e.value.style.chart.layout.gutter.color,
"stroke-width": $.value.gutter,
fill: "none",
"stroke-dasharray": a.path.bgDashArray,
"stroke-dashoffset": a.path.fullOffset,
"stroke-linecap": "round",
class: U({ "vue-ui-onion-path": !0, "vue-ui-onion-blur": e.value.useBlurOnHover && ![null, void 0].includes(k.value) && k.value !== l }),
style: { transform: "rotate(-90deg)", "transform-origin": "50% 50%" }
}, null, 10, Ct))), 256)),
(s(!0), u(M, null, N(b.value, (a, l) => (s(), u("circle", {
cx: c.value.centerX,
cy: c.value.centerY,
r: a.radius < 0 ? 1e-4 : a.radius,
stroke: `${a.color}`,
"stroke-width": $.value.track,
fill: "none",
"stroke-dasharray": a.path.dashArray,
"stroke-dashoffset": a.path.dashOffset,
class: U({ "vue-ui-onion-path": !0, "vue-ui-onion-blur": e.value.useBlurOnHover && ![null, void 0].includes(k.value) && k.value !== l }),
"stroke-linecap": "round",
style: { transform: "rotate(-90deg)", "transform-origin": "50% 50%" }
}, null, 10, xt))), 256)),
O("defs", null, [
O("filter", {
id: `blur_${x.value}`,
x: "-50%",
y: "-50%",
width: "200%",
height: "200%"
}, [
O("feGaussianBlur", {
in: "SourceGraphic",
stdDeviation: 100 / e.value.style.chart.gradientIntensity
}, null, 8, Ot)
], 8, Tt)
]),
e.value.style.chart.useGradient ? (s(), u("g", {
key: 1,
filter: `url(#blur_${x.value})`
}, [
(s(!0), u(M, null, N(b.value, (a, l) => (s(), u("circle", {
cx: c.value.centerX,
cy: c.value.centerY,
r: a.radius <= 0 ? 1e-4 : a.radius,
stroke: "white",
"stroke-width": $.value.track / 3,
fill: "none",
"stroke-linecap": "round",
"stroke-dasharray": a.path.dashArray,
"stroke-dashoffset": a.path.dashOffset,
style: { transform: "rotate(-90deg)", "transform-origin": "50% 50%" }
}, null, 8, Pt))), 256))
], 8, _t)) : g("", !0),
(s(!0), u(M, null, N(b.value, (a, l) => (s(), u("circle", {
cx: c.value.centerX,
cy: c.value.centerY,
r: a.radius <= 0 ? 1e-4 : a.radius,
stroke: "transparent",
"stroke-width": Math.max($.value.track, $.value.gutter),
fill: "none",
"stroke-dasharray": a.path.bgDashArray,
"stroke-dashoffset": a.path.fullOffset,
"stroke-linecap": "round",
class: "vue-ui-onion-path",
style: { transform: "rotate(-90deg)", "transform-origin": "50% 50%" },
onMouseenter: (p) => me({
datapoint: a,
show: !0,
seriesIndex: l
}),
onMouseleave: o[0] || (o[0] = (p) => {
k.value = void 0, L.value = !1;
})
}, null, 40, It))), 256)),
e.value.style.chart.layout.labels.show ? (s(), u("g", At, [
(s(!0), u(M, null, N(b.value, (a, l) => (s(), u("g", {
onMouseenter: (p) => me({
datapoint: a,
show: !0,
seriesIndex: l
}),
onMouseleave: o[1] || (o[1] = (p) => {
k.value = void 0, L.value = !1;
})
}, [
y.value.includes(a.id) ? g("", !0) : (s(), u("text", {
key: 0,
x: n.value.width / 2 - $.value.gutter * 0.8 + e.value.style.chart.layout.labels.offsetX,
y: a.labelY + e.value.style.chart.layout.labels.offsetY,
"text-anchor": "end",
"font-size": e.value.style.chart.layout.labels.fontSize,
fill: e.value.useBlurOnHover && ![null, void 0].includes(k.value) && k.value === l ? a.color : e.value.style.chart.layout.labels.color,
"font-weight": e.value.style.chart.layout.labels.bold ? "bold" : "normal"
}, I(a.name ? a.name + ": " : "") + " " + I(e.value.style.chart.layout.labels.percentage.show ? i(R)({
v: a.percentage,
s: "%",
r: e.value.style.chart.layout.labels.roundingPercentage
}) : "") + " " + I(!e.value.style.chart.layout.labels.percentage.show && e.value.style.chart.layout.labels.value.show ? `: ${i(Q)(
e.value.style.chart.layout.labels.value.formatter,
a.value,
i(R)({
p: a.prefix || "",
v: a.value || 0,
s: a.suffix || "",
r: e.value.style.chart.layout.labels.roundingValue
}),
{ datapoint: a, seriesIndex: l }
)}` : `${e.value.style.chart.layout.labels.value.show && a.value ? `(${i(Q)(
e.value.style.chart.layout.labels.value.formatter,
a.value,
i(R)({
p: a.prefix || "",
v: a.value || 0,
s: a.suffix || "",
r: e.value.style.chart.layout.labels.roundingValue
}),
{ datapoint: a, seriesIndex: l }
)})` : ""}`), 9, Ft))
], 40, St))), 256))
])) : g("", !0),
d(t.$slots, "svg", { svg: n.value }, void 0, !0)
], 14, wt)) : g("", !0),
t.$slots.watermark ? (s(), u("div", Mt, [
d(t.$slots, "watermark", _(P({ isPrinting: i(de) || i(ve) })), void 0, !0)
])) : g("", !0),
D.value ? g("", !0) : (s(), C(ht, {
key: 6,
config: {
type: "onion",
style: {
backgroundColor: e.value.style.chart.backgroundColor,
onion: {
color: e.value.style.chart.layout.gutter.color
}
}
}
}, null, 8, ["config"])),
O("div", {
ref_key: "chartLegend",
ref: te
}, [
e.value.style.chart.legend.show ? (s(), C(ct, {
key: `legend_${se.value}`,
legendSet: v.value,
config: Le.value,
onClickMarker: o[2] || (o[2] = ({ legend: a }) => pe(a.id))
}, {
item: f(({ legend: a }) => [
O("div", {
"data-cy-legend-item": "",
onClick: (l) => a.segregate(),
style: B(`opacity:${y.value.includes(a.id) ? 0.5 : 1}`)
}, I(a.name ? a.name + ": " : "") + " " + I((a.percentage || 0).toFixed(e.value.style.chart.legend.roundingPercentage)) + "% ", 13, Nt)
]),
_: 1
}, 8, ["legendSet", "config"])) : d(t.$slots, "legend", {
key: 1,
legend: v.value
}, void 0, !0)
], 512),
t.$slots.source ? (s(), u("div", {
key: 7,
ref_key: "source",
ref: ae,
dir: "auto"
}, [
d(t.$slots, "source", {}, void 0, !0)
], 512)) : g("", !0),
$e(vt, {
show: m.value.showTooltip && L.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: A.value,
content: X.value,
isFullscreen: T.value,
isCustom: i(xe)(e.value.style.chart.tooltip.customFormat)
}, {
"tooltip-before": f(() => [
d(t.$slots, "tooltip-before", _(P({ ...W.value })), void 0, !0)
]),
"tooltip-after": f(() => [
d(t.$slots, "tooltip-after", _(P({ ...W.value })), void 0, !0)
]),
_: 3
}, 8, ["show", "backgroundColor", "color", "borderRadius", "borderColor", "borderWidth", "fontSize", "backgroundOpacity", "position", "offsetY", "parent", "content", "isFullscreen", "isCustom"]),
D.value ? (s(), C(ft, {
key: 8,
hideDetails: "",
config: {
open: m.value.showTable,
maxHeight: 1e4,
head: {
backgroundColor: e.value.style.chart.backgroundColor,
color: e.value.style.chart.color
},
body: {
backgroundColor: e.value.style.chart.backgroundColor,
color: e.value.style.chart.color
}
}
}, {
content: f(() => [
(s(), C(dt, {
key: `table_${ne.value}`,
colNames: z.value.colNames,
head: z.value.head,
body: z.value.body,
config: z.value.config,
title: `${e.value.style.chart.title.text}${e.value.style.chart.title.subtitle.text ? ` : ${e.value.style.chart.title.subtitle.text}` : ""}`,
onClose: o[3] || (o[3] = (a) => m.value.showTable = !1)
}, {
th: f(({ th: a }) => [
He(I(a), 1)
]),
td: f(({ td: a }) => [
O("div", { innerHTML: a }, null, 8, Rt)
]),
_: 1
}, 8, ["colNames", "head", "body", "config", "title"]))
]),
_: 1
}, 8, ["config"])) : g("", !0)
], 46, kt));
}
}, Zt = /* @__PURE__ */ bt(Dt, [["__scopeId", "data-v-209c752d"]]);
export {
Zt as default
};