vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
992 lines (991 loc) • 42.3 kB
JavaScript
import { defineAsyncComponent as S, computed as v, ref as u, toRefs as Nt, watch as V, shallowRef as Ue, onMounted as Vt, onBeforeUnmount as Ut, createElementBlock as g, openBlock as r, unref as s, normalizeStyle as E, normalizeClass as W, createBlock as _, createCommentVNode as p, createElementVNode as P, createVNode as ce, withCtx as c, renderSlot as d, normalizeProps as k, guardReactiveProps as C, createSlots as Ge, Fragment as U, renderList as G, toDisplayString as q, Teleport as Gt, resolveDynamicComponent as Yt, mergeProps as Xt, createTextVNode as Ye, nextTick as Xe } from "vue";
import { c as jt, t as Ht, i as Wt, j as je, k as qt, o as He, g as de, m as Jt, a as ve, d as L, X as Kt, y as We, v as Qt, r as Zt, _ as eo } from "./lib-2iaAPQ_c.js";
import { b as to } from "./labelUtils-B3mOOEke.js";
import { t as oo, u as lo } from "./useResponsive-DfdjqQps.js";
import { u as ao, a as ge } from "./useNestedProp-2p4Tjzc8.js";
import { u as no, B as ro } from "./BaseScanner-BMpwQAfz.js";
import { u as so } from "./usePrinter-ChVMpU2f.js";
import { u as uo } from "./useSvgExport-ByUukOZt.js";
import { u as io } from "./useThemeCheck-DGJ31Vi5.js";
import { u as co } from "./useUserOptionState-BIvW1Kz7.js";
import { u as vo } from "./useChartAccessibility-9icAAmYg.js";
import { u as go } from "./useAutoSizeLabelsInsideViewbox-DmpzKQ9i.js";
import ho from "./img-CqYIrJ8I.js";
import fo from "./Title-DSOZzIrU.js";
import po from "./Legend-D2xmnFPH.js";
import { _ as bo } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const qe = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", layout: { gutter: { color: "#4A4A4A" }, labels: { color: "#CCCCCC" } }, legend: { backgroundColor: "#1A1A1A", color: "#CCCCCC" }, 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" } } }, Je = { style: { chart: { backgroundColor: "#FFF8E1", color: "#424242", useGradient: !1, layout: { gutter: { color: "#5D403730" }, labels: { color: "#424242" } }, legend: { backgroundColor: "#FFF8E1", color: "#424242" }, 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" } } }, Ke = { style: { chart: { backgroundColor: "#1E1E1E", color: "#BDBDBD", useGradient: !1, layout: { gutter: { color: "#5D403730" }, labels: { color: "#BDBDBD" } }, legend: { backgroundColor: "#1E1E1E", color: "#BDBDBD" }, 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" } } }, Qe = { style: { chart: { backgroundColor: "#1A1A1A", useGradient: !1, color: "#99AA99", layout: { gutter: { color: "#2A2A2A" }, labels: { color: "#99CC99" } }, legend: { backgroundColor: "#1A1A1A", color: "#99AA99" }, title: { color: "#66CC66", subtitle: { color: "#99AA99" } }, tooltip: { backgroundColor: "#2A2F2A", color: "#AACCAA", borderColor: "#66CC66" } } }, table: { th: { backgroundColor: "#1A1A1A", color: "#99AA99" }, td: { backgroundColor: "#1A1A1A", color: "#AACCAA" } } }, Ze = { style: { chart: { useGradient: !1, backgroundColor: "#fbfafa", color: "#8A9892", layout: { gutter: { color: "#F7EDE2" }, labels: { color: "#A0AC94" } }, legend: { backgroundColor: "#fbfafa", color: "#99AA99" }, title: { color: "#8A9892", subtitle: { color: "#99AA99" } }, tooltip: { backgroundColor: "#fbfafa", color: "#8A9892" } } }, table: { th: { backgroundColor: "#fbfafa", color: "#8F837A" }, td: { backgroundColor: "#fbfafa", color: "#8F837A" } } }, et = { style: { chart: { useGradient: !1, backgroundColor: "#f6f6fb", color: "#50606C", layout: { gutter: { color: "#DDDDDB" }, labels: { color: "#61747E" } }, legend: { backgroundColor: "#f6f6fb", color: "#61747E" }, title: { color: "#50606C", subtitle: { color: "#718890" } }, tooltip: { backgroundColor: "#f6f6fb", color: "#50606C" } } }, table: { th: { backgroundColor: "#f6f6fb", color: "#50606C" }, td: { backgroundColor: "#f6f6fb", color: "#50606C" } } }, tt = {
default: {},
dark: qe,
celebration: Je,
celebrationNight: Ke,
hack: Qe,
zen: Ze,
concrete: et
}, el = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
__proto__: null,
celebration: Je,
celebrationNight: Ke,
concrete: et,
dark: qe,
default: tt,
hack: Qe,
zen: Ze
}, Symbol.toStringTag, { value: "Module" })), yo = ["id"], mo = ["id"], ko = ["xmlns", "viewBox"], Co = ["width", "height"], wo = ["cx", "cy", "r", "stroke", "stroke-width", "stroke-dasharray", "stroke-dashoffset"], Ao = ["cx", "cy", "r", "stroke", "stroke-width", "stroke-dasharray", "stroke-dashoffset"], $o = ["id"], To = ["stdDeviation"], Fo = ["filter"], Oo = ["cx", "cy", "r", "stroke-width", "stroke-dasharray", "stroke-dashoffset"], Do = ["cx", "cy", "r", "stroke-width", "stroke-dasharray", "stroke-dashoffset", "onMouseenter", "onMouseleave", "onClick"], xo = { key: 2 }, So = ["onMouseenter", "onMouseleave", "onClick"], _o = ["x", "y", "font-size", "fill", "font-weight"], Po = {
key: 4,
class: "vue-data-ui-watermark"
}, Bo = ["id"], Io = ["onClick"], Eo = ["innerHTML"], Mo = {
__name: "vue-ui-onion",
props: {
config: {
type: Object,
default() {
return {};
}
},
dataset: {
type: Array,
default() {
return [];
}
}
},
emits: ["selectLegend"],
setup(ot, { expose: lt, emit: at }) {
const nt = S(() => import("./Tooltip-D0pGX8qz.js")), rt = S(() => import("./BaseIcon-CbVDYv89.js")), st = S(() => import("./vue-ui-accordion-Dm0mNNKQ.js")), ut = S(() => import("./DataTable-BT_IeqPe.js")), it = S(() => import("./UserOptions-BQO4YFrn.js")), ct = S(() => import("./PenAndPaper-CvyKWfNl.js")), dt = S(() => import("./PackageVersion-Br3DrrFh.js")), vt = S(() => import("./BaseDraggableDialog-Z5LfhW87.js")), { vue_ui_onion: gt } = ao(), { isThemeValid: ht, warnInvalidTheme: ft } = io(), w = ot, he = v(() => !!w.dataset && w.dataset.length), A = u(jt()), pt = u(null), fe = u(0), J = u(!1), K = u(""), b = u([]), T = u(null), pe = u(null), be = u(null), ye = u(null), me = u(null), ke = u(0), Ce = u(0), we = u(0), F = u(!1), Ae = u(!1), R = u(null), e = u(ee()), { loading: $, FINAL_DATASET: $e, manualLoading: Q } = no({
...Nt(w),
FINAL_CONFIG: e,
prepareConfig: ee,
callback: () => {
Promise.resolve().then(async () => {
await Xe(), Be();
});
},
skeletonDataset: [
{ name: "_", percentage: 50, value: 1, color: "#DBDBDB" },
{ name: "_", percentage: 50, value: 1, color: "#C4C4C4" },
{ name: "_", percentage: 50, value: 1, color: "#ADADAD" },
{ name: "_", percentage: 50, value: 1, color: "#969696" }
],
skeletonConfig: Ht({
defaultConfig: e.value,
userConfig: {
userOptions: { show: !1 },
table: { show: !1 },
style: {
chart: {
backgroundColor: "#99999930",
layout: {
gutter: {
color: "#99999950"
},
labels: { show: !1 }
},
legend: {
backgroundColor: "transparent"
}
}
}
}
})
}), { userOptionsVisible: Z, setUserOptionsVisibility: Te, keepUserOptionState: Fe } = co({ config: e.value }), { svgRef: Y } = vo({ config: e.value.style.chart.title });
function ee() {
const t = ge({
userConfig: w.config,
defaultConfig: gt
}), l = t.theme;
if (!l) return t;
if (!ht.value(t))
return ft(t), t;
const o = ge({
userConfig: tt[l] || w.config,
defaultConfig: t
}), a = ge({
userConfig: w.config,
defaultConfig: o
});
return {
...a,
customPalette: a.customPalette.length ? a.customPalette : Wt[l] || je
};
}
V(() => w.config, (t) => {
$.value || (e.value = ee()), Z.value = !e.value.userOptions.showOnChartHover, Pe(), ke.value += 1, Ce.value += 1, we.value += 1, y.value.showTable = e.value.table.show, y.value.showTooltip = e.value.style.chart.tooltip.show;
}, { deep: !0 });
const { isPrinting: Oe, isImaging: De, generatePdf: xe, generateImage: Se } = so({
elementId: `vue-ui-onion_${A.value}`,
fileName: e.value.style.chart.title.text || "vue-ui-onion",
options: e.value.userOptions.print
}), bt = v(() => e.value.userOptions.show && !e.value.style.chart.title.text), yt = v(() => qt(e.value.customPalette)), y = u({
showTable: e.value.table.show,
showTooltip: e.value.style.chart.tooltip.show
});
V(e, () => {
y.value = {
showTable: e.value.table.show,
showTooltip: e.value.style.chart.tooltip.show
};
}, { immediate: !0 });
const n = u({
height: 512,
width: 512,
padding: {
top: 64,
left: 64,
right: 64,
bottom: 64
},
minRadius: 64
}), D = Ue(null), M = Ue(null);
Vt(() => {
Ae.value = !0, Pe();
});
const mt = v({
get: () => e.value.style.chart.layout.labels.fontSize,
set: (t) => t
}), { autoSizeLabels: _e } = go({
svgRef: Y,
fontSize: e.value.style.chart.layout.labels.fontSize,
minFontSize: e.value.style.chart.layout.labels.minFontSize,
sizeRef: mt,
labelClass: ".vue-ui-onion-label"
}), kt = v(() => e.value.debug);
let te = null;
function Pe() {
if (He(w.dataset) && (de({
componentName: "VueUiOnion",
type: "dataset",
debug: kt.value
}), Q.value = !0), He(w.dataset) || (Q.value = e.value.loading), e.value.responsive) {
const l = oo(() => {
te && clearTimeout(te), F.value = !0;
let { width: o, height: a } = lo({
chart: T.value,
title: e.value.style.chart.title.text ? pe.value : null,
legend: e.value.style.chart.legend.show ? be.value : null,
source: ye.value,
noTitle: me.value
});
a -= 12, requestAnimationFrame(async () => {
n.value.width = o, n.value.height = a, n.value.padding.top = Math.max(o, a) * 0.125, n.value.padding.right = Math.max(o, a) * 0.125, n.value.padding.bottom = Math.max(o, a) * 0.125, n.value.padding.left = Math.max(o, a) * 0.125, n.value.minRadius = Math.min(o, a) * 0.125, te = setTimeout(() => {
F.value = !1, _e();
}, 0);
});
});
D.value && (M.value && D.value.unobserve(M.value), D.value.disconnect()), D.value = new ResizeObserver(l), M.value = T.value.parentNode, D.value.observe(M.value);
}
requestAnimationFrame(_e);
}
Ut(() => {
D.value && (M.value && D.value.unobserve(M.value), D.value.disconnect());
});
const h = v(() => ({
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
})), f = v(() => ($e.value.forEach((t, l) => {
[null, void 0].includes(t.name) && de({
componentName: "VueUiOnion",
type: "datasetSerieAttribute",
property: "name",
index: l
}), [void 0].includes(t.percentage) && de({
componentName: "VueUiOnion",
type: "datasetSerieAttribute",
property: "percentage",
index: l
});
}), $e.value.map((t, l) => {
const o = `onion_serie_${l}_${A.value}`;
return {
...t,
percentage: t.percentage || 0,
targetPercentage: t.percentage || 0,
color: Jt(t.color) || yt.value[l] || je[l],
id: o,
shape: "circle",
opacity: b.value.includes(o) ? 0.5 : 1,
absoluteIndex: l,
segregate: () => X(o),
isSegregated: b.value.includes(o)
};
}))), oe = v(() => f.value.map((t, l) => {
const o = e.value.style.chart.legend.showValue, a = e.value.style.chart.legend.showPercentage, i = ve(
e.value.style.chart.layout.labels.value.formatter,
t.value,
L({
p: t.prefix || "",
v: t.value,
s: t.suffix || "",
r: e.value.style.chart.legend.roundingValue
})
), m = L({
v: t.percentage ?? 0,
s: "%",
r: e.value.style.chart.legend.roundingPercentage
}), ie = re({
showVal: o,
showPercentage: a,
val: i,
percentage: m,
config: e.value.style.chart.legend
});
return {
...t,
display: `${t.name}${o || a ? ": " : ""}${ie}`
};
})), z = u(f.value), Ct = v(() => e.value.useStartAnimation), wt = u(null), At = v(() => Math.max(...f.value.map((t) => t.percentage))), le = u(!1);
V(() => f.value, Be, { immediate: !0, deep: !0 }), V(() => w.dataset, (t) => {
Array.isArray(t) && t.length > 0 && (Q.value = !1);
}, { deep: !0 });
function Be() {
if (Ct.value && !le.value && !$.value) {
let l = function() {
t >= At.value ? (cancelAnimationFrame(wt.value), z.value = f.value, le.value = !0) : (z.value = f.value.map((o) => ({
...o,
percentage: t < o.targetPercentage ? t : o.targetPercentage
})), t += 1, requestAnimationFrame(l), le.value = !0);
};
z.value = f.value.map((o) => ({
...o,
percentage: 0
}));
let t = 0;
l();
} else
z.value = f.value;
}
const $t = v(() => ({
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" : ""
})), Tt = v(() => f.value.filter((t) => !b.value.includes(t.id)).length), B = v(() => {
const t = Math.min(h.value.width, h.value.height) / 2 / f.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
};
}), O = v(() => z.value.filter((t) => !b.value.includes(t.id)).map((t, l) => {
const o = (h.value.maxRadius - B.value.track) / Tt.value / 2 * (1 + l), a = h.value.centerY - o;
return {
percentage: t.percentage || 0,
...t,
labelY: a,
radius: o,
path: Ft(o, t.percentage || 0)
};
}));
function Ft(t, l) {
const o = 2 * Math.PI * t, a = o * 0.75, i = `${a} ${o}`, m = a * (1 - l / 100);
return {
bgDashArray: `${a} ${o}`,
bgDashOffset: 0,
dashArray: i,
dashOffset: m,
fullOffset: 0,
active: `
M ${h.value.centerX},${h.value.centerY - t}
A ${t},${t} 0 1 1
${h.value.centerX + t * Math.cos(Math.PI * 3 / 4)},${h.value.centerY + t * Math.sin(Math.PI * 3 / 4)}
`.trim()
};
}
const Ot = at;
function X(t) {
if (b.value.includes(t))
b.value = b.value.filter((l) => l !== t);
else {
if (b.value.length === f.value.length - 1) return;
b.value.push(t);
}
Ot("selectLegend", O.value);
}
function Ie(t) {
if (!f.value.length)
return e.value.debug && console.warn("VueUiOnion - There are no series to show."), null;
const l = f.value.find((o) => o.name === t);
return l || (e.value.debug && console.warn(`VueUiOnion - Series name not found "${t}"`), null);
}
function Dt(t) {
const l = Ie(t);
l !== null && b.value.includes(l.id) && X(l.id);
}
function xt(t) {
const l = Ie(t);
l !== null && (b.value.includes(l.id) || X(l.id));
}
function St() {
return O.value;
}
const ae = v(() => {
const t = [e.value.table.translations.serie, e.value.table.translations.percentage, e.value.table.translations.value], l = O.value.map((o) => [
o.name,
o.percentage,
o.value
]);
return { head: t, body: l };
}), j = v(() => {
const t = ae.value.head, l = O.value.map((a) => [
`<span style="color:${a.color}">⬤</span> ${a.name}`,
`${Number(a.percentage ?? 0).toFixed(e.value.table.td.roundingPercentage).toLocaleString()}%`,
`${a.prefix || ""}${[null, void 0, NaN, "NaN"].includes(a.value) ? "-" : a.value.toFixed(e.value.table.td.roundingValue).toLocaleString()}${a.suffix || ""}`
]), 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 { head: t, body: l, config: o, colNames: t };
});
function ne(t = null) {
Xe(() => {
const l = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [""]], o = ae.value.head, a = ae.value.body, i = l.concat([o]).concat(a), m = Qt(i);
t ? t(m) : Zt({ csvContent: m, title: e.value.style.chart.title.text || "vue-ui-onion" });
});
}
const x = u(void 0), I = u(!1);
function Ee(t) {
I.value = t, fe.value += 1;
}
function Me({ datapoint: t }) {
e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: t, seriesIndex: t.absoluteIndex });
}
function Le({ datapoint: t }) {
x.value = void 0, J.value = !1, e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: t, seriesIndex: t.absoluteIndex });
}
function re({
val: t,
percentage: l,
showVal: o,
showPercentage: a,
config: i
}) {
return to({
config: i,
val: t,
percentage: l,
showVal: o,
showPercentage: a
});
}
function _t(t, l) {
const o = e.value.style.chart.layout.labels.value.show, a = e.value.style.chart.layout.labels.percentage.show, i = re({
config: e.value.style.chart.layout.labels,
showVal: o,
showPercentage: a,
val: ve(
e.value.style.chart.layout.labels.value.formatter,
t.value,
L({
p: t.prefix || "",
v: t.value || 0,
s: t.suffix || "",
r: e.value.style.chart.layout.labels.roundingValue
}),
{ datapoint: t, seriesIndex: l }
),
percentage: L({
v: t.percentage,
s: "%",
r: e.value.style.chart.layout.labels.roundingPercentage
})
});
return `${t.name}${o || a ? ": " : ""}${i}`;
}
const se = u(null);
function Re({ datapoint: t, seriesIndex: l, show: o = !0 }) {
e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: t, seriesIndex: t.absoluteIndex });
const a = t.absoluteIndex;
x.value = l, se.value = {
datapoint: t,
seriesIndex: a,
series: f.value,
config: e.value
}, J.value = o;
let i = "";
const m = e.value.style.chart.tooltip.customFormat;
if (We(m) && eo(() => m({
seriesIndex: a,
datapoint: t,
series: f.value,
config: e.value
})))
K.value = m({
seriesIndex: a,
datapoint: t,
series: f.value,
config: e.value
});
else {
const ie = e.value.style.chart.tooltip.showPercentage, zt = e.value.style.chart.tooltip.showValue;
i += `<div style="width:100%;text-align:center;border-bottom:1px solid ${e.value.style.chart.tooltip.borderColor};padding-bottom:6px;margin-bottom:3px;">${t.name}</div>`, i += `<div style="display:flex;flex-direction:row;gap:6px;align-items:center;"><svg viewBox="0 0 60 60" height="14" width="14"><circle cx="30" cy="30" r="30" stroke="none" fill="${t.color}"/></svg>`, i += `<b>${re({
config: e.value.style.chart.tooltip,
showVal: zt,
showPercentage: ie,
val: `<span>${ve(
e.value.style.chart.layout.labels.value.formatter,
t.value,
L({
p: t.prefix || "",
v: t.value,
s: t.suffix || "",
r: e.value.style.chart.tooltip.roundingValue
}),
{
datapoint: t,
seriesIndex: l
}
)}</span>`,
percentage: L({
v: t.percentage,
s: "%",
r: e.value.style.chart.tooltip.roundingPercentage
})
})}</b></div>`, K.value = `<div>${i}</div>`;
}
}
function ze() {
y.value.showTable = !y.value.showTable;
}
function Ne() {
y.value.showTooltip = !y.value.showTooltip;
}
const H = u(!1);
function ue() {
H.value = !H.value;
}
async function Pt({ scale: t = 2 } = {}) {
if (!T.value) return;
const { width: l, height: o } = T.value.getBoundingClientRect(), a = l / o, { imageUri: i, base64: m } = await ho({ domElement: T.value, base64: !0, img: !0, scale: t });
return {
imageUri: i,
base64: m,
title: e.value.style.chart.title.text,
width: l,
height: o,
aspectRatio: a
};
}
const N = v(() => {
const t = e.value.table.useDialog && !e.value.table.show, l = y.value.showTable;
return {
component: t ? vt : st,
title: `${e.value.style.chart.title.text}${e.value.style.chart.title.subtitle.text ? `: ${e.value.style.chart.title.subtitle.text}` : ""}`,
props: t ? {
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: I.value,
fullscreenParent: T.value,
forcedWidth: Math.min(600, 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
}
}
}
};
});
V(() => y.value.showTable, (t) => {
e.value.table.show || (t && e.value.table.useDialog && R.value ? R.value.open() : "close" in R.value && R.value.close());
});
const Bt = v(() => oe.value.map((t) => ({
...t,
name: t.display
}))), It = v(() => e.value.style.chart.backgroundColor), Et = v(() => e.value.style.chart.legend), Mt = v(() => e.value.style.chart.title), { exportSvg: Lt, getSvg: Rt } = uo({
svg: Y,
title: Mt,
legend: Et,
legendItems: Bt,
backgroundColor: It
});
async function Ve({ isCb: t }) {
if (t) {
const { blob: l, url: o, text: a, dataUrl: i } = await Rt();
e.value.userOptions.callbacks.svg({ blob: l, url: o, text: a, dataUrl: i });
} else
Lt();
}
return lt({
getData: St,
getImage: Pt,
generatePdf: xe,
generateCsv: ne,
generateImage: Se,
generateSvg: Ve,
hideSeries: xt,
showSeries: Dt,
toggleTable: ze,
toggleTooltip: Ne,
toggleAnnotator: ue,
toggleFullscreen: Ee
}), (t, l) => (r(), g("div", {
class: W(`vue-data-ui-component vue-ui-onion ${I.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${e.value.useCssAnimation ? "" : "vue-ui-dna"}`),
ref_key: "onionChart",
ref: T,
id: `vue-ui-onion_${A.value}`,
style: E(`font-family:${e.value.style.fontFamily};width:100%; ${e.value.responsive ? "height: 100%;" : ""} text-align:center;background:${e.value.style.chart.backgroundColor}`),
onMouseenter: l[4] || (l[4] = () => s(Te)(!0)),
onMouseleave: l[5] || (l[5] = () => s(Te)(!1))
}, [
e.value.userOptions.buttons.annotator ? (r(), _(s(ct), {
key: 0,
svgRef: s(Y),
backgroundColor: e.value.style.chart.backgroundColor,
color: e.value.style.chart.color,
active: H.value,
onClose: ue
}, {
"annotator-action-close": c(() => [
d(t.$slots, "annotator-action-close", {}, void 0, !0)
]),
"annotator-action-color": c(({ color: o }) => [
d(t.$slots, "annotator-action-color", k(C({ color: o })), void 0, !0)
]),
"annotator-action-draw": c(({ mode: o }) => [
d(t.$slots, "annotator-action-draw", k(C({ mode: o })), void 0, !0)
]),
"annotator-action-undo": c(({ disabled: o }) => [
d(t.$slots, "annotator-action-undo", k(C({ disabled: o })), void 0, !0)
]),
"annotator-action-redo": c(({ disabled: o }) => [
d(t.$slots, "annotator-action-redo", k(C({ disabled: o })), void 0, !0)
]),
"annotator-action-delete": c(({ disabled: o }) => [
d(t.$slots, "annotator-action-delete", k(C({ disabled: o })), void 0, !0)
]),
_: 3
}, 8, ["svgRef", "backgroundColor", "color", "active"])) : p("", !0),
bt.value ? (r(), g("div", {
key: 1,
ref_key: "noTitle",
ref: me,
class: "vue-data-ui-no-title-space",
style: "height:36px; width: 100%;background:transparent"
}, null, 512)) : p("", !0),
e.value.style.chart.title.text ? (r(), g("div", {
key: 2,
ref_key: "chartTitle",
ref: pe,
style: "width:100%;background:transparent"
}, [
(r(), _(fo, {
key: `title_${ke.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)) : p("", !0),
P("div", {
id: `legend-top-${A.value}`
}, null, 8, mo),
e.value.userOptions.show && he.value && (s(Fe) || s(Z)) ? (r(), _(s(it), {
ref_key: "details",
ref: pt,
key: `user_options${fe.value}`,
backgroundColor: e.value.style.chart.backgroundColor,
color: e.value.style.chart.color,
isImaging: s(De),
isPrinting: s(Oe),
uid: A.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,
hasSvg: e.value.userOptions.buttons.svg,
hasXls: e.value.userOptions.buttons.csv,
hasTable: e.value.userOptions.buttons.table,
hasFullscreen: e.value.userOptions.buttons.fullscreen,
isFullscreen: I.value,
isTooltip: y.value.showTooltip,
titles: { ...e.value.userOptions.buttonTitles },
chartElement: T.value,
position: e.value.userOptions.position,
hasAnnotator: e.value.userOptions.buttons.annotator,
isAnnotation: H.value,
callbacks: e.value.userOptions.callbacks,
printScale: e.value.userOptions.print.scale,
tableDialog: e.value.table.useDialog,
onToggleFullscreen: Ee,
onGeneratePdf: s(xe),
onGenerateCsv: ne,
onGenerateImage: s(Se),
onGenerateSvg: Ve,
onToggleTable: ze,
onToggleTooltip: Ne,
onToggleAnnotator: ue,
style: E({
visibility: s(Fe) ? s(Z) ? "visible" : "hidden" : "visible"
})
}, Ge({ _: 2 }, [
t.$slots.menuIcon ? {
name: "menuIcon",
fn: c(({ isOpen: o, color: a }) => [
d(t.$slots, "menuIcon", k(C({ isOpen: o, color: a })), void 0, !0)
]),
key: "0"
} : void 0,
t.$slots.optionTooltip ? {
name: "optionTooltip",
fn: c(() => [
d(t.$slots, "optionTooltip", {}, void 0, !0)
]),
key: "1"
} : void 0,
t.$slots.optionPdf ? {
name: "optionPdf",
fn: c(() => [
d(t.$slots, "optionPdf", {}, void 0, !0)
]),
key: "2"
} : void 0,
t.$slots.optionCsv ? {
name: "optionCsv",
fn: c(() => [
d(t.$slots, "optionCsv", {}, void 0, !0)
]),
key: "3"
} : void 0,
t.$slots.optionImg ? {
name: "optionImg",
fn: c(() => [
d(t.$slots, "optionImg", {}, void 0, !0)
]),
key: "4"
} : void 0,
t.$slots.optionSvg ? {
name: "optionSvg",
fn: c(() => [
d(t.$slots, "optionSvg", {}, void 0, !0)
]),
key: "5"
} : void 0,
t.$slots.optionTable ? {
name: "optionTable",
fn: c(() => [
d(t.$slots, "optionTable", {}, void 0, !0)
]),
key: "6"
} : void 0,
t.$slots.optionFullscreen ? {
name: "optionFullscreen",
fn: c(({ toggleFullscreen: o, isFullscreen: a }) => [
d(t.$slots, "optionFullscreen", k(C({ toggleFullscreen: o, isFullscreen: a })), void 0, !0)
]),
key: "7"
} : void 0,
t.$slots.optionAnnotator ? {
name: "optionAnnotator",
fn: c(({ toggleAnnotator: o, isAnnotator: a }) => [
d(t.$slots, "optionAnnotator", k(C({ toggleAnnotator: o, isAnnotator: a })), void 0, !0)
]),
key: "8"
} : void 0
]), 1032, ["backgroundColor", "color", "isImaging", "isPrinting", "uid", "hasTooltip", "hasPdf", "hasImg", "hasSvg", "hasXls", "hasTable", "hasFullscreen", "isFullscreen", "isTooltip", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "tableDialog", "onGeneratePdf", "onGenerateImage", "style"])) : p("", !0),
(r(), g("svg", {
ref_key: "svgRef",
ref: Y,
xmlns: s(Kt),
class: W({ "vue-data-ui-fullscreen--on": I.value, "vue-data-ui-fulscreen--off": !I.value, resizing: F.value }),
viewBox: `0 0 ${n.value.width <= 0 ? 10 : n.value.width} ${n.value.height <= 0 ? 10 : n.value.height}`,
style: E(`max-width:100%;overflow:visible;background:transparent;color:${e.value.style.chart.color}`)
}, [
ce(s(dt)),
t.$slots["chart-background"] ? (r(), g("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, Co)) : p("", !0),
(r(!0), g(U, null, G(O.value, (o, a) => (r(), g("circle", {
cx: h.value.centerX,
cy: h.value.centerY,
r: o.radius <= 0 ? 1e-4 : o.radius,
stroke: e.value.style.chart.layout.gutter.color,
"stroke-width": B.value.gutter,
fill: "none",
"stroke-dasharray": o.path.bgDashArray,
"stroke-dashoffset": o.path.fullOffset,
"stroke-linecap": "round",
class: W({ "vue-ui-onion-path": !0, "vue-ui-onion-blur": e.value.useBlurOnHover && ![null, void 0].includes(x.value) && x.value !== a }),
style: E({
transform: "rotate(-90deg)",
transformOrigin: "50% 50%",
transition: F.value || s($) ? "none" : "all 0.3s ease-in-out !important",
animation: F.value || s($) ? "none" : "xyAnimation 0.5s ease-in"
})
}, null, 14, wo))), 256)),
(r(!0), g(U, null, G(O.value, (o, a) => (r(), g("circle", {
cx: h.value.centerX,
cy: h.value.centerY,
r: o.radius < 0 ? 1e-4 : o.radius,
stroke: `${o.color}`,
"stroke-width": B.value.track,
fill: "none",
"stroke-dasharray": o.path.dashArray,
"stroke-dashoffset": o.path.dashOffset,
class: W({ "vue-ui-onion-path": !0, "vue-ui-onion-blur": e.value.useBlurOnHover && ![null, void 0].includes(x.value) && x.value !== a }),
"stroke-linecap": "round",
style: E({
transform: "rotate(-90deg)",
transformOrigin: "50% 50%",
transition: F.value || s($) ? "none" : "all 0.3s ease-in-out !important",
animation: F.value || s($) ? "none" : "xyAnimation 0.5s ease-in"
})
}, null, 14, Ao))), 256)),
P("defs", null, [
P("filter", {
id: `blur_${A.value}`,
x: "-50%",
y: "-50%",
width: "200%",
height: "200%"
}, [
P("feGaussianBlur", {
in: "SourceGraphic",
stdDeviation: 100 / e.value.style.chart.gradientIntensity
}, null, 8, To)
], 8, $o)
]),
e.value.style.chart.useGradient ? (r(), g("g", {
key: 1,
filter: `url(#blur_${A.value})`
}, [
(r(!0), g(U, null, G(O.value, (o, a) => (r(), g("circle", {
cx: h.value.centerX,
cy: h.value.centerY,
r: o.radius <= 0 ? 1e-4 : o.radius,
stroke: "white",
"stroke-width": B.value.track / 3,
fill: "none",
"stroke-linecap": "round",
"stroke-dasharray": o.path.dashArray,
"stroke-dashoffset": o.path.dashOffset,
style: E({
transform: "rotate(-90deg)",
transformOrigin: "50% 50%",
transition: F.value || s($) ? "none" : "all 0.3s ease-in-out !important",
animation: F.value || s($) ? "none" : "xyAnimation 0.5s ease-in"
})
}, null, 12, Oo))), 256))
], 8, Fo)) : p("", !0),
(r(!0), g(U, null, G(O.value, (o, a) => (r(), g("circle", {
cx: h.value.centerX,
cy: h.value.centerY,
r: o.radius <= 0 ? 1e-4 : o.radius,
stroke: "transparent",
"stroke-width": Math.max(B.value.track, B.value.gutter),
fill: "none",
"stroke-dasharray": o.path.bgDashArray,
"stroke-dashoffset": o.path.fullOffset,
"stroke-linecap": "round",
class: "vue-ui-onion-path",
style: {
transform: "rotate(-90deg)",
transformOrigin: "50% 50%"
},
onMouseenter: (i) => Re({
datapoint: o,
show: !0,
seriesIndex: a
}),
onMouseleave: (i) => Le({ datapoint: o }),
onClick: (i) => Me({ datapoint: o })
}, null, 40, Do))), 256)),
e.value.style.chart.layout.labels.show ? (r(), g("g", xo, [
(r(!0), g(U, null, G(O.value, (o, a) => (r(), g("g", {
onMouseenter: (i) => Re({
datapoint: o,
show: !0,
seriesIndex: a
}),
onMouseleave: (i) => Le({ datapoint: o }),
onClick: (i) => Me({ datapoint: o })
}, [
b.value.includes(o.id) ? p("", !0) : (r(), g("text", {
key: 0,
class: "vue-ui-onion-label",
x: n.value.width / 2 - B.value.gutter * 0.8 + e.value.style.chart.layout.labels.offsetX,
y: o.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(x.value) && x.value === a ? o.color : e.value.style.chart.layout.labels.color,
"font-weight": e.value.style.chart.layout.labels.bold ? "bold" : "normal"
}, q(_t(o, a)), 9, _o))
], 40, So))), 256))
])) : p("", !0),
d(t.$slots, "svg", { svg: n.value }, void 0, !0)
], 14, ko)),
t.$slots.watermark ? (r(), g("div", Po, [
d(t.$slots, "watermark", k(C({ isPrinting: s(Oe) || s(De) })), void 0, !0)
])) : p("", !0),
P("div", {
id: `legend-bottom-${A.value}`
}, null, 8, Bo),
Ae.value ? (r(), _(Gt, {
key: 5,
to: e.value.style.chart.legend.position === "top" ? `#legend-top-${A.value}` : `#legend-bottom-${A.value}`
}, [
P("div", {
ref_key: "chartLegend",
ref: be
}, [
e.value.style.chart.legend.show ? (r(), _(po, {
key: `legend_${we.value}`,
legendSet: oe.value,
config: $t.value,
onClickMarker: l[0] || (l[0] = ({ legend: o }) => X(o.id))
}, {
item: c(({ legend: o }) => [
s($) ? p("", !0) : (r(), g("div", {
key: 0,
"data-cy-legend-item": "",
onClick: (a) => o.segregate(),
style: E(`opacity:${b.value.includes(o.id) ? 0.5 : 1}`)
}, q(o.display), 13, Io))
]),
_: 1
}, 8, ["legendSet", "config"])) : d(t.$slots, "legend", {
key: 1,
legend: oe.value
}, void 0, !0)
], 512)
], 8, ["to"])) : p("", !0),
t.$slots.source ? (r(), g("div", {
key: 6,
ref_key: "source",
ref: ye,
dir: "auto"
}, [
d(t.$slots, "source", {}, void 0, !0)
], 512)) : p("", !0),
ce(s(nt), {
show: y.value.showTooltip && J.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: T.value,
content: K.value,
isFullscreen: I.value,
isCustom: s(We)(e.value.style.chart.tooltip.customFormat),
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": c(() => [
d(t.$slots, "tooltip-before", k(C({ ...se.value })), void 0, !0)
]),
"tooltip-after": c(() => [
d(t.$slots, "tooltip-after", k(C({ ...se.value })), void 0, !0)
]),
_: 3
}, 8, ["show", "backgroundColor", "color", "borderRadius", "borderColor", "borderWidth", "fontSize", "backgroundOpacity", "position", "offsetY", "parent", "content", "isFullscreen", "isCustom", "smooth", "backdropFilter", "smoothForce", "smoothSnapThreshold"]),
he.value && e.value.userOptions.buttons.table ? (r(), _(Yt(N.value.component), Xt({ key: 7 }, N.value.props, {
ref_key: "tableUnit",
ref: R,
onClose: l[3] || (l[3] = (o) => y.value.showTable = !1)
}), Ge({
content: c(() => [
(r(), _(s(ut), {
key: `table_${Ce.value}`,
colNames: j.value.colNames,
head: j.value.head,
body: j.value.body,
config: j.value.config,
title: e.value.table.useDialog ? "" : N.value.title,
withCloseButton: !e.value.table.useDialog,
onClose: l[2] || (l[2] = (o) => y.value.showTable = !1)
}, {
th: c(({ th: o }) => [
Ye(q(o), 1)
]),
td: c(({ td: o }) => [
P("div", { innerHTML: o }, null, 8, Eo)
]),
_: 1
}, 8, ["colNames", "head", "body", "config", "title", "withCloseButton"]))
]),
_: 2
}, [
e.value.table.useDialog ? {
name: "title",
fn: c(() => [
Ye(q(N.value.title), 1)
]),
key: "0"
} : void 0,
e.value.table.useDialog ? {
name: "actions",
fn: c(() => [
P("button", {
tabindex: "0",
class: "vue-ui-user-options-button",
onClick: l[1] || (l[1] = (o) => ne(e.value.userOptions.callbacks.csv))
}, [
ce(s(rt), {
name: "excel",
stroke: N.value.props.color
}, null, 8, ["stroke"])
])
]),
key: "1"
} : void 0
]), 1040)) : p("", !0),
s($) ? (r(), _(ro, { key: 8 })) : p("", !0)
], 46, yo));
}
}, Lo = /* @__PURE__ */ bo(Mo, [["__scopeId", "data-v-0e506fb5"]]), tl = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
__proto__: null,
default: Lo
}, Symbol.toStringTag, { value: "Module" }));
export {
el as a,
tl as b,
Lo as v
};