vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
922 lines (921 loc) • 40 kB
JavaScript
import { defineAsyncComponent as G, useSlots as $t, computed as p, ref as i, toRefs as It, watch as ee, shallowRef as je, onMounted as _t, onBeforeUnmount as Tt, createElementBlock as v, openBlock as s, unref as c, normalizeStyle as te, normalizeClass as qe, createBlock as F, createCommentVNode as b, createElementVNode as x, createVNode as pe, createSlots as He, withCtx as m, renderSlot as y, normalizeProps as W, guardReactiveProps as j, Fragment as $, renderList as B, mergeProps as Xe, toDisplayString as q, Teleport as At, createTextVNode as St, nextTick as Pt } from "vue";
import { u as Lt, c as Ot, t as Ft, a as Bt, p as V, b as zt, o as Ye, f as fe, g as Nt, d as Vt, k as Y, i as P, X as Mt, s as Dt, x as Rt, F as Et, e as Ut, v as Gt, w as Wt, L as jt, y as qt, z as Ht } from "./index-q-LPw2IT.js";
import { t as Xt, u as Yt } from "./useResponsive-DfdjqQps.js";
import { u as Je } from "./useNestedProp-04aFeUYu.js";
import { u as Jt } from "./usePrinter-DX7efa1s.js";
import { u as Kt } from "./useUserOptionState-BIvW1Kz7.js";
import { u as Qt } from "./useChartAccessibility-9icAAmYg.js";
import Zt from "./Title-B55R8CAZ.js";
import el from "./Legend-DcDSkq99.js";
import { _ as tl } from "./Shape-DHIaJs9G.js";
import ll from "./img-Ctts6JQb.js";
import { u as al, B as ol } from "./useLoading-D7YHNtLX.js";
import { _ as ul } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const sl = ["id"], nl = ["id"], rl = ["xmlns", "viewBox"], il = ["id"], vl = ["stop-color"], cl = ["stop-color"], dl = ["id"], hl = ["x", "y", "height", "width"], pl = ["height", "width"], fl = { key: 0 }, yl = ["rx", "x", "y", "height", "width", "stroke", "stroke-width", "filter"], gl = ["rx", "x", "y", "height", "width", "fill", "stroke", "stroke-width", "filter"], ml = { key: 1 }, bl = ["rx", "x", "y", "height", "width", "fill", "filter"], wl = ["textContent", "x", "y", "font-size", "fill", "filter"], kl = ["x", "y", "height", "width", "onMouseover", "onMouseleave", "onClick"], xl = {
key: 4,
class: "vue-data-ui-watermark"
}, Cl = ["id"], $l = ["onClick"], Il = ["innerHTML"], _l = {
__name: "vue-ui-waffle",
props: {
config: {
type: Object,
default() {
return {};
}
},
dataset: {
type: Array,
default() {
return [];
}
}
},
emits: ["selectLegend"],
setup(Ke, { expose: Qe, emit: Ze }) {
const et = G(() => import("./DataTable-rj9-mAwF.js")), tt = G(() => import("./PenAndPaper-BJ0hcgsa.js")), lt = G(() => import("./vue-ui-accordion-D46i_gkB.js")), at = G(() => import("./Tooltip-BMOddG-M.js")), ot = G(() => import("./UserOptions-DVzyjG-W.js")), ut = G(() => import("./PackageVersion-5ZjKSIei.js")), { vue_ui_waffle: st } = Lt(), w = Ke, nt = $t(), le = p(() => !!w.dataset && w.dataset.length), g = i(Ot()), rt = i(null), ae = i(!1), oe = i(""), M = i(null), ye = i(0), L = i(null), ge = i(null), me = i(null), be = i(null), we = i(null), ke = i(0), xe = i(0), Ce = i(0), $e = i(!1), e = i(ne()), { loading: Ie, FINAL_DATASET: J, manualLoading: ue } = al({
...It(w),
FINAL_CONFIG: e,
prepareConfig: ne,
callback: () => {
Promise.resolve().then(async () => {
h.value = re();
});
},
skeletonDataset: [
{
name: "",
values: [1],
color: "#AAAAAA"
},
{
name: "",
values: [1],
color: "#BABABA"
},
{
name: "",
values: [1],
color: "#CACACA"
}
],
skeletonConfig: Ft({
defaultConfig: e.value,
userConfig: {
useCustomCells: !1,
userOptions: { show: !1 },
table: { show: !1 },
style: {
chart: {
backgroundColor: "#99999930",
layout: {
labels: {
captions: { show: !1 }
},
rect: {
stroke: "#999999"
}
},
legend: {
backgroundColor: "transparent",
showValue: !1,
showPercentage: !1
}
}
}
}
})
}), { userOptionsVisible: se, setUserOptionsVisibility: _e, keepUserOptionState: Te } = Kt({ config: e.value }), { svgRef: Ae } = Qt({ config: e.value.style.chart.title });
function ne() {
const t = Je({
userConfig: w.config,
defaultConfig: st
});
return t.theme ? {
...Je({
userConfig: zt.vue_ui_waffle[t.theme] || w.config,
defaultConfig: t
}),
customPalette: Bt[t.theme] || V
} : t;
}
ee(() => w.config, (t) => {
Ie.value || (e.value = ne()), se.value = !e.value.userOptions.showOnChartHover, Pe(), ke.value += 1, xe.value += 1, Ce.value += 1, C.value.showTable = e.value.table.show, C.value.showTooltip = e.value.style.chart.tooltip.show;
}, { deep: !0 });
const O = je(null), D = je(null), Se = p(() => !!e.value.debug);
function Pe() {
if (Ye(w.dataset) ? (fe({
componentName: "VueUiWaffle",
type: "dataset",
debug: Se.value
}), le.value = !1, ue.value = !0) : w.dataset.forEach((t, a) => {
Nt({
datasetObject: t,
requiredAttributes: ["name", "values"]
}).forEach((l) => {
fe({
componentName: "VueUiWaffle",
type: "datasetSerieAttribute",
property: l,
index: a,
debug: Se.value
});
});
}), Ye(w.dataset) || (ue.value = e.value.loading), e.value.responsive) {
const t = Xt(() => {
const { width: a, height: l } = Yt({
chart: L.value,
title: e.value.style.chart.title.text ? ge.value : null,
legend: e.value.style.chart.legend.show ? me.value : null,
source: be.value,
noTitle: we.value
});
requestAnimationFrame(() => {
z.value.width = a, z.value.height = l, I.value.width = a, I.value.height = l;
});
});
O.value && (D.value && O.value.unobserve(D.value), O.value.disconnect()), O.value = new ResizeObserver(t), D.value = L.value.parentNode, O.value.observe(D.value);
}
}
_t(() => {
$e.value = !0, Pe();
}), Tt(() => {
O.value && (D.value && O.value.unobserve(D.value), O.value.disconnect());
});
const { isPrinting: Le, isImaging: Oe, generatePdf: Fe, generateImage: Be } = Jt({
elementId: `vue-ui-waffle_${g.value}`,
fileName: e.value.style.chart.title.text || "vue-ui-waffle",
options: e.value.userOptions.print
}), it = p(() => e.value.userOptions.show && !e.value.style.chart.title.text), ze = p(() => Vt(e.value.customPalette)), C = i({
showTable: e.value.table.show,
showTooltip: e.value.style.chart.tooltip.show
});
ee(e, () => {
C.value = {
showTable: e.value.table.show,
showTooltip: e.value.style.chart.tooltip.show
};
}, { immediate: !0 });
const z = i({
height: 512,
width: 512
}), I = i({
top: 0,
left: 0,
height: 512,
width: 512
}), _ = p(() => (I.value.width - e.value.style.chart.layout.grid.size * e.value.style.chart.layout.grid.spaceBetween) / e.value.style.chart.layout.grid.size), T = p(() => (I.value.height - e.value.style.chart.layout.grid.size * e.value.style.chart.layout.grid.spaceBetween) / e.value.style.chart.layout.grid.size), vt = p(() => Math.max(1e-4, I.value.width / e.value.style.chart.layout.grid.size)), Ne = p(() => Math.max(1e-4, I.value.height / e.value.style.chart.layout.grid.size));
function Ve(t) {
const a = e.value.style.chart.layout.grid.size * e.value.style.chart.layout.grid.size, l = t.reduce((k, he) => k + he, 0), o = t.map((k) => k / l * a), u = o.map(Math.floor), n = o.map((k) => k % 1);
let d = a - u.reduce((k, he) => k + he, 0);
for (; d > 0; ) {
let k = n.indexOf(Math.max(...n));
u[k] += 1, n[k] = 0, d -= 1;
}
return u;
}
const H = i(!1);
function re() {
return H.value = J.value.flatMap((t) => t.values.reduce((a, l) => a + l, 0)).reduce((t, a) => t + a, 0) === 0, J.value.map((t, a) => ({
...t,
color: Ut(t.color) || ze.value[a] || V[a] || V[a % V.length],
uid: `serie_${a}`,
absoluteIndex: a
}));
}
const ie = p(() => re()), h = i(ie.value);
ee(() => w.dataset, (t) => {
Array.isArray(t) && t.length > 0 && (ue.value = !1);
}, { immediate: !0 }), ee(() => w.dataset, (t) => {
h.value = re();
}, { deep: !0 });
const ct = p(() => {
const t = h.value.filter((a, l) => !f.value.includes(a.uid)).map((a, l) => H.value ? 1 : (a.values || []).reduce((o, u) => o + u, 0));
return Ve(t);
}), dt = p(() => {
const t = h.value.map((a, l) => H.value ? 1 : (a.values || []).reduce((o, u) => o + u));
return Ve(t);
}), X = p(() => (J.value.forEach((t, a) => {
[null, void 0].includes(t.values) && fe({
componentName: "VueUiWaffle",
type: "datasetSerieAttribute",
property: "values (number[])",
index: a
});
}), h.value.filter((t, a) => !f.value.includes(t.uid)).map((t, a) => ({
absoluteIndex: t.absoluteIndex,
uid: t.uid,
name: t.name,
color: t.color,
value: (t.values || []).reduce((l, o) => l + o, 0),
absoluteValues: t.values || [],
proportion: ct.value[a]
})))), ht = p(() => h.value.map((t, a) => ({
absoluteIndex: t.absoluteIndex,
uid: t.uid,
name: t.name,
color: t.color,
value: (t.values || []).reduce((l, o) => l + o, 0),
absoluteValues: t.values || [],
proportion: dt.value[a]
})));
function pt() {
return ht.value.map((t) => ({
name: t.name,
color: t.color,
value: t.value,
proportion: t.proportion
}));
}
const ft = p(() => {
let t = 0;
return X.value.map((a, l) => {
const o = t, u = o + a.proportion, n = [];
for (let d = Math.floor(o); d < Math.floor(u); d += 1)
n.push(d);
return t = u, {
...a,
start: o,
rects: n
};
});
}), r = p(() => ft.value.flatMap((t, a) => t.rects.map((l, o) => ({
isFirst: o === 0,
isLongEnough: l.length > 2,
name: t.name,
color: t.color,
value: t.value,
serieIndex: a,
absoluteStartIndex: o < 3,
serieId: t.uid,
...t
}))).map((t, a) => ({
...t,
isAbsoluteFirst: a % e.value.style.chart.layout.grid.size === 0
}))), R = p(() => {
const t = [];
for (let a = 0; a < e.value.style.chart.layout.grid.size; a += 1)
for (let l = 0; l < e.value.style.chart.layout.grid.size; l += 1)
t.push({
isStartOfLine: l === 0,
position: e.value.style.chart.layout.grid.vertical ? a : l,
x: (e.value.style.chart.layout.grid.vertical ? a : l) * (_.value + e.value.style.chart.layout.grid.spaceBetween),
y: (e.value.style.chart.layout.grid.vertical ? l : a) * (T.value + e.value.style.chart.layout.grid.spaceBetween) + I.value.top
});
return t;
}), f = i([]), N = i(!1), Me = i(null), De = i(null);
function Re(t) {
if (H.value) return;
if (!e.value.useAnimation) {
f.value.includes(t) ? f.value = f.value.filter((u) => u !== t) : f.value.length < E.value.length - 1 && E.value.length > 1 && f.value.push(t);
return;
}
const a = ie.value.find((u) => u.uid === t).values.reduce((u, n) => u + n, 0), l = h.value.find((u) => u.uid === t).values.reduce((u, n) => u + n, 0);
let o = l;
if (!(l === 0 && a === 0)) {
if (f.value.includes(t)) {
let n = function() {
o > u ? (cancelAnimationFrame(Me.value), h.value = h.value.map((d, k) => d.uid === t ? {
...d,
values: [u]
} : d), N.value = !1) : (N.value = !0, o += u * 0.025, h.value = h.value.map((d, k) => d.uid === t ? {
...d,
values: [o]
} : d), Me.value = requestAnimationFrame(n));
};
f.value = f.value.filter((d) => d !== t);
const u = a;
n();
} else if (f.value.length < E.value.length - 1 && E.value.length > 1) {
let u = function() {
o < l / 100 ? (cancelAnimationFrame(De.value), f.value.push(t), h.value = h.value.map((n, d) => n.uid === t ? {
...n,
values: [0]
} : n), N.value = !1) : (N.value = !0, o /= 1.15, h.value = h.value.map((n) => n.uid === t ? {
...n,
values: [o]
} : n), De.value = requestAnimationFrame(u));
};
u();
}
wt("selectLegend", X.value.map((u) => ({
name: u.name,
color: u.color,
value: u.value,
proportion: u.proportion / Math.pow(e.value.style.chart.layout.grid.size, 2)
})));
}
}
const E = p(() => h.value.map((t, a) => ({
name: t.name,
color: t.color || ze[a] || V[a] || V[a % V.length],
value: (t.values || []).reduce((l, o) => l + o, 0),
uid: t.uid,
shape: "square"
})).map((t) => ({
...t,
proportion: t.value / h.value.map((a) => (a.values || []).reduce((l, o) => l + o, 0)).reduce((a, l) => a + l, 0),
opacity: f.value.includes(t.uid) ? 0.5 : 1,
segregate: () => Re(t.uid),
isSegregated: f.value.includes(t.uid)
}))), yt = p(() => ({
cy: "waffle-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" : ""
})), A = p(() => X.value.map((t) => t.value).reduce((t, a) => t + a, 0)), ve = i(null), ce = i(null);
function gt(t) {
const a = r.value[t];
e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: a, seriesIndex: a.serieIndex });
}
function mt(t) {
const a = r.value[t];
e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: a, seriesIndex: a.serieIndex }), ce.value = null, ae.value = !1, M.value = null;
}
function bt(t) {
if (f.value.length === w.dataset.length) return;
const a = r.value[t];
ve.value = {
datapoint: a,
seriesIndex: a.absoluteIndex,
series: h.value,
config: e.value
}, e.value.events.datapointEnter && ce.value !== a.serieIndex && e.value.events.datapointEnter({ datapoint: a, seriesIndex: a.serieIndex }), ce.value = a.serieIndex, ae.value = !0, M.value = r.value[t].serieIndex;
const l = e.value.style.chart.tooltip.customFormat;
if (qt(l) && Ht(() => l({
seriesIndex: r.value[t].absoluteIndex,
datapoint: a,
series: h.value,
config: e.value
})))
oe.value = l({
seriesIndex: r.value[t].absoluteIndex,
datapoint: a,
series: h.value,
config: e.value
});
else {
let o = "";
if (o += `<div style="width:100%;text-align:center;border-bottom:1px solid ${e.value.style.chart.tooltip.borderColor};padding-bottom:6px;margin-bottom:3px;">${a.name}</div>`, o += `<div style="display:flex;flex-direction:row;gap:6px;align-items:center;"><svg viewBox="0 0 60 60" height="14" width="14"><rect x="0" y="0" height="60" width="60" stroke="none" rx="1" fill="${a.color}" />${nt.pattern ? `<rect x="0" y="0" height="60" width="60" stroke="none" rx="1" stroke="none" fill="url(#pattern_${g.value}_${a.absoluteIndex})"/>` : ""}</svg>`, e.value.style.chart.tooltip.showValue && (o += `<b>${Y(
e.value.style.chart.layout.labels.dataLabels.formatter,
a.value,
P({
p: e.value.style.chart.layout.labels.dataLabels.prefix,
v: a.value,
s: e.value.style.chart.layout.labels.dataLabels.suffix,
r: e.value.style.chart.tooltip.roundingValue
}),
{
datapoint: a,
seriesIndex: r.value[t].absoluteIndex,
series: h.value
}
)}</b>`), e.value.style.chart.tooltip.showPercentage) {
const u = P({
v: H.value ? 1 / J.value.length * 100 : a.value / A.value * 100,
s: "%",
r: e.value.style.chart.tooltip.roundingPercentage
});
e.value.style.chart.tooltip.showValue ? o += `<span>(${u})</span></div>` : o += `<b>${u}%</b></div>`;
}
oe.value = o;
}
}
const wt = Ze, S = p(() => {
const t = X.value.map((l) => ({
name: l.name,
color: l.color
})), a = X.value.map((l) => l.value);
return { head: t, body: a };
});
function K(t) {
return e.value.useBlurOnHover && ![null, void 0].includes(M.value) && M.value !== t ? `url(#blur_${g.value})` : "";
}
function kt(t, a) {
return e.value.style.chart.layout.labels.captions.show ? r.value.length && !N.value && !e.value.style.chart.layout.grid.vertical && (r.value[t].isFirst && a.position < e.value.style.chart.layout.grid.size - 2 || r.value[t].isAbsoluteFirst && t % e.value.style.chart.layout.grid.size === 0 && r.value[t].absoluteStartIndex) : !1;
}
function xt(t, a = null) {
const l = Y(
e.value.style.chart.layout.labels.dataLabels.formatter,
r.value[t].value,
P({
p: e.value.style.chart.layout.labels.dataLabels.prefix,
v: r.value[t].value,
s: e.value.style.chart.layout.labels.dataLabels.suffix,
r: e.value.style.chart.layout.labels.captions.roundingValue
}),
{ datapoint: r.value[t], position: a }
), o = P({ v: r.value[t].proportion, s: "%", r: e.value.style.chart.layout.labels.captions.roundingPercentage }), u = (e.value.style.chart.layout.labels.captions.serieNameAbbreviation ? jt({ source: r.value[t].name, length: e.value.style.chart.layout.labels.captions.serieNameMaxAbbreviationSize }) : r.value[t].name) + (e.value.style.chart.layout.labels.captions.showPercentage || e.value.style.chart.layout.labels.captions.showValue ? ":" : ""), n = e.value.style.chart.layout.labels.captions.showSerieName ? u : "";
let d = "";
return e.value.style.chart.layout.labels.captions.showPercentage && e.value.style.chart.layout.labels.captions.showValue ? d = `${o} (${l})` : e.value.style.chart.layout.labels.captions.showPercentage && !e.value.style.chart.layout.labels.captions.showValue ? d = o : !e.value.style.chart.layout.labels.captions.showPercentage && e.value.style.chart.layout.labels.captions.showValue && (d = l), `${n}${d}`;
}
function Ee(t = null) {
Pt(() => {
const a = S.value.head.map((u, n) => [[
u.name
], [S.value.body[n]], [isNaN(S.value.body[n] / A.value) ? "-" : S.value.body[n] / A.value * 100]]), l = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [[""], ["val"], ["%"]]].concat(a), o = Gt(l);
t ? t(o) : Wt({ csvContent: o, title: e.value.style.chart.title.text || "vue-ui-waffle" });
});
}
const Q = p(() => {
const t = [
' <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M18 16v2a1 1 0 0 1 -1 1h-11l6 -7l-6 -7h11a1 1 0 0 1 1 1v2" /></svg>',
Y(
e.value.style.chart.layout.labels.dataLabels.formatter,
A.value,
P({
p: e.value.style.chart.layout.labels.dataLabels.prefix,
v: A.value,
s: e.value.style.chart.layout.labels.dataLabels.suffix,
r: e.value.table.td.roundingValue
})
),
"100%"
], a = S.value.head.map((u, n) => [
{
color: u.color,
name: u.name
},
Y(
e.value.style.chart.layout.labels.dataLabels.formatter,
S.value.body[n],
P({
p: e.value.style.chart.layout.labels.dataLabels.prefix,
v: S.value.body[n],
s: e.value.style.chart.layout.labels.dataLabels.suffix,
r: e.value.table.td.roundingValue
})
),
isNaN(S.value.body[n] / A.value) ? "-" : P({
v: S.value.body[n] / A.value * 100,
s: "%",
r: e.value.table.td.roundingPercentage
})
]), l = {
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
},
shape: "square",
breakpoint: e.value.table.responsiveBreakpoint
}, o = [
e.value.table.columnNames.series,
e.value.table.columnNames.value,
e.value.table.columnNames.percentage
];
return {
head: t,
body: a,
config: l,
colNames: o
};
}), U = i(!1);
function Ue(t) {
U.value = t, ye.value += 1;
}
function Ge() {
C.value.showTable = !C.value.showTable;
}
function We() {
C.value.showTooltip = !C.value.showTooltip;
}
const Z = i(!1);
function de() {
Z.value = !Z.value;
}
async function Ct({ scale: t = 2 } = {}) {
if (!L.value) return;
const { width: a, height: l } = L.value.getBoundingClientRect(), o = a / l, { imageUri: u, base64: n } = await ll({ domElement: L.value, base64: !0, img: !0, scale: t });
return {
imageUri: u,
base64: n,
title: e.value.style.chart.title.text,
width: a,
height: l,
aspectRatio: o
};
}
return Qe({
getData: pt,
getImage: Ct,
generatePdf: Fe,
generateCsv: Ee,
generateImage: Be,
toggleTable: Ge,
toggleTooltip: We,
toggleAnnotator: de,
toggleFullscreen: Ue
}), (t, a) => (s(), v("div", {
class: qe(`vue-ui-waffle ${U.value ? "vue-data-ui-wrapper-fullscreen" : ""}`),
ref_key: "waffleChart",
ref: L,
id: `vue-ui-waffle_${g.value}`,
style: te(`font-family:${e.value.style.fontFamily};width:100%; text-align:center;background:${e.value.style.chart.backgroundColor};${e.value.responsive ? "height: 100%" : ""}`),
onMouseenter: a[2] || (a[2] = () => c(_e)(!0)),
onMouseleave: a[3] || (a[3] = () => c(_e)(!1))
}, [
e.value.userOptions.buttons.annotator ? (s(), F(c(tt), {
key: 0,
svgRef: c(Ae),
backgroundColor: e.value.style.chart.backgroundColor,
color: e.value.style.chart.color,
active: Z.value,
onClose: de
}, null, 8, ["svgRef", "backgroundColor", "color", "active"])) : b("", !0),
it.value ? (s(), v("div", {
key: 1,
ref_key: "noTitle",
ref: we,
class: "vue-data-ui-no-title-space",
style: "height:36px; width: 100%;background:transparent"
}, null, 512)) : b("", !0),
e.value.style.chart.title.text ? (s(), v("div", {
key: 2,
ref_key: "chartTitle",
ref: ge,
style: "width:100%;background:transparent;padding-bottom:12px"
}, [
(s(), F(Zt, {
key: `title_${ke.value}`,
config: {
title: {
cy: "waffle-title",
...e.value.style.chart.title
},
subtitle: {
cy: "waffle-subtitle",
...e.value.style.chart.title.subtitle
}
}
}, null, 8, ["config"]))
], 512)) : b("", !0),
x("div", {
id: `legend-top-${g.value}`
}, null, 8, nl),
e.value.userOptions.show && le.value && (c(Te) || c(se)) ? (s(), F(c(ot), {
ref_key: "details",
ref: rt,
key: `user_options_${ye.value}`,
backgroundColor: e.value.style.chart.backgroundColor,
color: e.value.style.chart.color,
isPrinting: c(Le),
isImaging: c(Oe),
uid: g.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: U.value,
isTooltip: C.value.showTooltip,
titles: { ...e.value.userOptions.buttonTitles },
chartElement: L.value,
position: e.value.userOptions.position,
hasAnnotator: e.value.userOptions.buttons.annotator,
isAnnotation: Z.value,
callbacks: e.value.userOptions.callbacks,
printScale: e.value.userOptions.print.scale,
onToggleFullscreen: Ue,
onGeneratePdf: c(Fe),
onGenerateCsv: Ee,
onGenerateImage: c(Be),
onToggleTable: Ge,
onToggleTooltip: We,
onToggleAnnotator: de,
style: te({
visibility: c(Te) ? c(se) ? "visible" : "hidden" : "visible"
})
}, He({ _: 2 }, [
t.$slots.menuIcon ? {
name: "menuIcon",
fn: m(({ isOpen: l, color: o }) => [
y(t.$slots, "menuIcon", W(j({ isOpen: l, color: o })), 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.optionFullscreen ? {
name: "optionFullscreen",
fn: m(({ toggleFullscreen: l, isFullscreen: o }) => [
y(t.$slots, "optionFullscreen", W(j({ toggleFullscreen: l, isFullscreen: o })), void 0, !0)
]),
key: "6"
} : void 0,
t.$slots.optionAnnotator ? {
name: "optionAnnotator",
fn: m(({ toggleAnnotator: l, isAnnotator: o }) => [
y(t.$slots, "optionAnnotator", W(j({ toggleAnnotator: l, isAnnotator: o })), void 0, !0)
]),
key: "7"
} : void 0
]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasTooltip", "hasPdf", "hasImg", "hasXls", "hasTable", "hasFullscreen", "isFullscreen", "isTooltip", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "onGeneratePdf", "onGenerateImage", "style"])) : b("", !0),
(s(), v("svg", {
ref_key: "svgRef",
ref: Ae,
xmlns: c(Mt),
class: qe({ "vue-data-ui-fullscreen--on": U.value, "vue-data-ui-fulscreen--off": !U.value }),
viewBox: `0 0 ${z.value.width <= 0 ? 10 : z.value.width} ${z.value.height <= 0 ? 10 : z.value.height}`,
style: te(`max-width:100%;overflow:visible;background:transparent;color:${e.value.style.chart.color}`)
}, [
pe(c(ut)),
x("defs", null, [
(s(!0), v($, null, B(r.value, (l, o) => (s(), v("radialGradient", {
cx: "50%",
cy: "50%",
r: "50%",
fx: "50%",
fy: "50%",
id: `gradient_${g.value}_${o}`
}, [
x("stop", {
offset: "0%",
"stop-color": c(Dt)(c(Rt)(l.color, 0.05), 100 - e.value.style.chart.layout.rect.gradientIntensity)
}, null, 8, vl),
x("stop", {
offset: "100%",
"stop-color": l.color
}, null, 8, cl)
], 8, il))), 256))
]),
x("defs", null, [
x("filter", {
id: `blur_${g.value}`,
x: "-50%",
y: "-50%",
width: "200%",
height: "200%"
}, [...a[4] || (a[4] = [
x("feGaussianBlur", {
in: "SourceGraphic",
stdDeviation: 2
}, null, -1),
x("feColorMatrix", {
type: "saturate",
values: "0"
}, null, -1)
])], 8, dl)
]),
e.value.useCustomCells && r.value.length ? (s(!0), v($, { key: 0 }, B(R.value, (l, o) => (s(), v("foreignObject", {
x: l.x,
y: l.y,
height: T.value <= 0 ? 1e-4 : T.value,
width: _.value <= 0 ? 1e-4 : _.value,
class: "vue-ui-waffle-custom-cell-foreignObject"
}, [
y(t.$slots, "cell", Xe({ ref_for: !0 }, { cell: { ...l, color: r.value[o].color, ...r.value[o] }, isSelected: [null, void 0].includes(M.value) ? !0 : r.value[o].serieIndex === M.value }), void 0, !0)
], 8, hl))), 256)) : b("", !0),
!r.value.length && !e.value.useCustomCells ? (s(), v("rect", {
key: 1,
x: 12,
y: 12,
height: I.value.height - 24,
width: I.value.width - 24,
rx: 3,
fill: "none",
stroke: "black"
}, null, 8, pl)) : r.value.length && !e.value.useCustomCells ? (s(), v($, { key: 2 }, [
t.$slots.pattern ? (s(), v("g", fl, [
(s(!0), v($, null, B(ie.value, (l) => (s(), v("defs", null, [
y(t.$slots, "pattern", Xe({ ref_for: !0 }, { seriesIndex: l.absoluteIndex, patternId: `pattern_${g.value}_${l.absoluteIndex}` }), void 0, !0)
]))), 256))
])) : b("", !0),
(s(!0), v($, null, B(R.value, (l, o) => (s(), v("rect", {
rx: e.value.style.chart.layout.rect.rounded ? e.value.style.chart.layout.rect.rounding : 0,
x: l.x + e.value.style.chart.layout.grid.spaceBetween / 2,
y: l.y + e.value.style.chart.layout.grid.spaceBetween / 2,
height: T.value <= 0 ? 1e-4 : T.value,
width: _.value <= 0 ? 1e-4 : _.value,
fill: "white",
stroke: e.value.style.chart.layout.rect.stroke,
"stroke-width": e.value.style.chart.layout.rect.strokeWidth,
filter: K(r.value[o].serieIndex)
}, null, 8, yl))), 256)),
(s(!0), v($, null, B(R.value, (l, o) => (s(), v("rect", {
rx: e.value.style.chart.layout.rect.rounded ? e.value.style.chart.layout.rect.rounding : 0,
x: l.x + e.value.style.chart.layout.grid.spaceBetween / 2,
y: l.y + e.value.style.chart.layout.grid.spaceBetween / 2,
height: T.value <= 0 ? 1e-4 : T.value,
width: _.value <= 0 ? 1e-4 : _.value,
fill: e.value.style.chart.layout.rect.useGradient && e.value.style.chart.layout.rect.gradientIntensity > 0 ? `url(#gradient_${g.value}_${o})` : r.value[o].color,
stroke: e.value.style.chart.layout.rect.stroke,
"stroke-width": e.value.style.chart.layout.rect.strokeWidth,
filter: K(r.value[o].serieIndex)
}, null, 8, gl))), 256)),
t.$slots.pattern ? (s(), v("g", ml, [
(s(!0), v($, null, B(R.value, (l, o) => (s(), v("rect", {
rx: e.value.style.chart.layout.rect.rounded ? e.value.style.chart.layout.rect.rounding : 0,
x: l.x + e.value.style.chart.layout.grid.spaceBetween / 2,
y: l.y + e.value.style.chart.layout.grid.spaceBetween / 2,
height: T.value <= 0 ? 1e-4 : T.value,
width: _.value <= 0 ? 1e-4 : _.value,
fill: `url(#pattern_${g.value}_${r.value[o].absoluteIndex})`,
stroke: "none",
filter: K(r.value[o].serieIndex)
}, null, 8, bl))), 256))
])) : b("", !0)
], 64)) : b("", !0),
(s(!0), v($, null, B(R.value, (l, o) => (s(), v($, null, [
kt(o, l) ? (s(), v("text", {
key: `datalabel_${o}`,
textContent: q(xt(o, l)),
x: l.x + e.value.style.chart.layout.labels.captions.offsetX + e.value.style.chart.layout.grid.spaceBetween / 2 + 6,
y: l.y + e.value.style.chart.layout.labels.captions.offsetY + e.value.style.chart.layout.grid.spaceBetween / 2 + Ne.value / 2 + e.value.style.chart.layout.labels.captions.fontSize / 3,
"font-size": e.value.style.chart.layout.labels.captions.fontSize,
fill: c(Et)(r.value[o].color),
filter: K(r.value[o].serieIndex)
}, null, 8, wl)) : b("", !0)
], 64))), 256)),
(s(!0), v($, null, B(R.value, (l, o) => (s(), v("rect", {
x: l.x + e.value.style.chart.layout.grid.spaceBetween / 2,
y: l.y + e.value.style.chart.layout.grid.spaceBetween / 2,
height: Ne.value,
width: vt.value,
fill: "transparent",
stroke: "none",
onMouseover: (u) => bt(o),
onMouseleave: (u) => mt(o),
onClick: (u) => gt(o)
}, null, 40, kl))), 256)),
y(t.$slots, "svg", { svg: z.value }, void 0, !0)
], 14, rl)),
t.$slots.watermark ? (s(), v("div", xl, [
y(t.$slots, "watermark", W(j({ isPrinting: c(Le) || c(Oe) })), void 0, !0)
])) : b("", !0),
x("div", {
id: `legend-bottom-${g.value}`
}, null, 8, Cl),
$e.value ? (s(), F(At, {
key: 5,
to: e.value.style.chart.legend.position === "top" ? `#legend-top-${g.value}` : `#legend-bottom-${g.value}`
}, [
x("div", {
ref_key: "chartLegend",
ref: me
}, [
e.value.style.chart.legend.show ? (s(), F(el, {
key: `legend_${Ce.value}`,
legendSet: E.value,
config: yt.value,
onClickMarker: a[0] || (a[0] = ({ legend: l }) => Re(l.uid))
}, He({
item: m(({ legend: l }) => [
x("div", {
onClick: (o) => l.segregate(),
style: te(`opacity:${f.value.includes(l.uid) ? 0.5 : 1}`)
}, q(l.name) + q(e.value.style.chart.legend.showPercentage || e.value.style.chart.legend.showValue ? ":" : "") + " " + q(e.value.style.chart.legend.showValue ? c(Y)(
e.value.style.chart.layout.labels.dataLabels.formatter,
l.value,
c(P)({
p: e.value.style.chart.layout.labels.dataLabels.prefix,
v: l.value,
s: e.value.style.chart.layout.labels.dataLabels.suffix,
r: e.value.style.chart.legend.roundingValue,
isAnimating: N.value
}),
{ datapoint: l }
) : "") + " " + q(e.value.style.chart.legend.showPercentage ? f.value.includes(l.uid) ? `${e.value.style.chart.legend.showValue ? "(" : ""}- %${e.value.style.chart.legend.showValue ? ")" : ""}` : `${e.value.style.chart.legend.showValue ? "(" : ""}${isNaN(l.value / A.value) ? "-" : c(P)({ v: l.value / A.value * 100, s: "%", r: e.value.style.chart.legend.roundingPercentage, isAnimating: N.value })}${e.value.style.chart.legend.showValue ? ")" : ""}` : ""), 13, $l)
]),
_: 2
}, [
t.$slots.pattern ? {
name: "legend-pattern",
fn: m(({ legend: l, index: o }) => [
pe(tl, {
shape: l.shape,
radius: 30,
stroke: "none",
plot: { x: 30, y: 30 },
fill: `url(#pattern_${g.value}_${o})`
}, null, 8, ["shape", "fill"])
]),
key: "0"
} : void 0
]), 1032, ["legendSet", "config"])) : y(t.$slots, "legend", {
key: 1,
legend: E.value
}, void 0, !0)
], 512)
], 8, ["to"])) : b("", !0),
t.$slots.source ? (s(), v("div", {
key: 6,
ref_key: "source",
ref: be,
dir: "auto"
}, [
y(t.$slots, "source", {}, void 0, !0)
], 512)) : b("", !0),
pe(c(at), {
show: C.value.showTooltip && ae.value && f.value.length < w.dataset.length,
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,
backgroundOpacity: e.value.style.chart.tooltip.backgroundOpacity,
position: e.value.style.chart.tooltip.position,
offsetY: e.value.style.chart.tooltip.offsetY,
parent: L.value,
content: oe.value,
isCustom: e.value.style.chart.tooltip.customFormat && typeof e.value.style.chart.tooltip.customFormat == "function",
fontSize: e.value.style.chart.tooltip.fontSize,
isFullscreen: U.value,
smooth: e.value.style.chart.tooltip.smooth,
backdropFilter: e.value.style.chart.tooltip.backdropFilter
}, {
"tooltip-before": m(() => [
y(t.$slots, "tooltip-before", W(j({ ...ve.value })), void 0, !0)
]),
"tooltip-after": m(() => [
y(t.$slots, "tooltip-after", W(j({ ...ve.value })), void 0, !0)
]),
_: 3
}, 8, ["show", "backgroundColor", "color", "borderRadius", "borderColor", "borderWidth", "backgroundOpacity", "position", "offsetY", "parent", "content", "isCustom", "fontSize", "isFullscreen", "smooth", "backdropFilter"]),
le.value ? (s(), F(c(lt), {
key: 7,
hideDetails: "",
config: {
open: C.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(() => [
(s(), F(c(et), {
key: `table_${xe.value}`,
colNames: Q.value.colNames,
head: Q.value.head,
body: Q.value.body,
config: Q.value.config,
title: `${e.value.style.chart.title.text}${e.value.style.chart.title.subtitle.text ? ` : ${e.value.style.chart.title.subtitle.text}` : ""}`,
onClose: a[1] || (a[1] = (l) => C.value.showTable = !1)
}, {
th: m(({ th: l }) => [
x("div", {
innerHTML: l,
style: { display: "flex", "align-items": "center" }
}, null, 8, Il)
]),
td: m(({ td: l }) => [
St(q(l.name || l), 1)
]),
_: 1
}, 8, ["colNames", "head", "body", "config", "title"]))
]),
_: 1
}, 8, ["config"])) : b("", !0),
c(Ie) ? (s(), F(ol, { key: 8 })) : b("", !0)
], 46, sl));
}
}, Rl = /* @__PURE__ */ ul(_l, [["__scopeId", "data-v-3c406d34"]]);
export {
Rl as default
};