vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
1,099 lines (1,098 loc) • 48.2 kB
JavaScript
import { defineAsyncComponent as L, useSlots as Jt, computed as v, ref as i, toRefs as Kt, watch as J, shallowRef as lt, onMounted as Qt, onBeforeUnmount as Zt, createElementBlock as c, openBlock as r, unref as d, normalizeStyle as ae, normalizeClass as at, createBlock as E, createCommentVNode as C, createElementVNode as k, createVNode as oe, withCtx as f, renderSlot as h, normalizeProps as x, guardReactiveProps as $, createSlots as Ae, Fragment as T, renderList as z, mergeProps as xe, toDisplayString as ne, Teleport as el, resolveDynamicComponent as tl, createTextVNode as ot, nextTick as ll } from "vue";
import { c as al, t as ol, i as nl, j as R, o as nt, g as $e, l as ul, k as rl, a as K, d as D, X as sl, s as il, h as cl, x as vl, m as dl, v as fl, r as hl, G as pl, y as gl, _ as yl } from "./lib-BwysEpWI.js";
import { b as bl } from "./labelUtils-PMU3ZGCb.js";
import { t as ml, u as Cl } from "./useResponsive-DfdjqQps.js";
import { u as kl, a as Te } from "./useNestedProp-OFRiX4kU.js";
import { u as wl, B as Al } from "./BaseScanner-BMpwQAfz.js";
import { u as xl } from "./usePrinter-BJzHDpYF.js";
import { u as $l } from "./useSvgExport-ByUukOZt.js";
import { u as Tl } from "./useThemeCheck-DGJ31Vi5.js";
import { u as Fl } from "./useUserOptionState-BIvW1Kz7.js";
import { u as Il } from "./useChartAccessibility-9icAAmYg.js";
import Sl from "./img-DKigoPDs.js";
import { _ as _l } from "./Shape-DAHhCEdg.js";
import Bl from "./Title-DGnfNZuO.js";
import Ol from "./Legend-D6z73edh.js";
import { _ as Dl } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const ut = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", layout: { rect: { rounded: !1, stroke: "#1A1A1A" } }, 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" } } }, rt = { style: { chart: { backgroundColor: "#FFF8E1", color: "#424242", layout: { rect: { rounded: !1, stroke: "#FFF8E1", useGradient: !1 } }, legend: { color: "#424242", backgroundColor: "#FFF8E1" }, 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" } } }, st = { style: { chart: { backgroundColor: "#1E1E1E", color: "#BDBDBD", layout: { rect: { rounded: !1, stroke: "#1E1E1E", useGradient: !1 } }, legend: { color: "#BDBDBD", backgroundColor: "#1E1E1E" }, 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" } } }, it = { style: { chart: { backgroundColor: "#1A1A1A", color: "#99AA99", layout: { rect: { rounded: !1, stroke: "#66CC66", useGradient: !1 } }, legend: { color: "#99AA99", backgroundColor: "#1A1A1A" }, title: { color: "#66CC66", subtitle: { color: "#99AA99" } }, tooltip: { backgroundColor: "#2A2F2A", color: "#AACCAA", borderColor: "#66CC66" } } }, table: { th: { backgroundColor: "#1A1A1A", color: "#99AA99" }, td: { backgroundColor: "#1A1A1A", color: "#AACCAA" } } }, ct = { style: { chart: { backgroundColor: "#fbfafa", color: "#8A9892", layout: { rect: { rounding: 4, stroke: "#fbfafa" } }, 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" } } }, vt = { style: { chart: { backgroundColor: "#f6f6fb", color: "#50606C", layout: { rect: { rounded: !1, stroke: "#404C5A", useGradient: !1 } }, 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" } } }, dt = {
default: {},
dark: ut,
celebration: rt,
celebrationNight: st,
hack: it,
zen: ct,
concrete: vt
}, ba = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
__proto__: null,
celebration: rt,
celebrationNight: st,
concrete: vt,
dark: ut,
default: dt,
hack: it,
zen: ct
}, Symbol.toStringTag, { value: "Module" })), Pl = ["id"], Ll = ["id"], El = ["xmlns", "viewBox"], zl = ["id"], Nl = ["stop-color"], Vl = ["stop-color"], Ml = ["id"], Rl = ["x", "y", "height", "width"], Ul = ["height", "width"], Gl = { key: 0 }, Wl = ["rx", "x", "y", "height", "width", "stroke", "stroke-width", "filter"], jl = ["rx", "x", "y", "height", "width", "fill", "stroke", "stroke-width", "filter"], ql = { key: 1 }, Hl = ["rx", "x", "y", "height", "width", "fill", "filter"], Xl = ["textContent", "x", "y", "font-size", "fill", "filter"], Yl = ["x", "y", "height", "width", "onMouseover", "onMouseleave", "onClick"], Jl = {
key: 4,
class: "vue-data-ui-watermark"
}, Kl = ["id"], Ql = ["onClick"], Zl = ["innerHTML"], ea = {
__name: "vue-ui-waffle",
props: {
config: {
type: Object,
default() {
return {};
}
},
dataset: {
type: Array,
default() {
return [];
}
}
},
emits: ["selectLegend"],
setup(ft, { expose: ht, emit: pt }) {
const gt = L(() => import("./Tooltip-TDyKgLB6.js")), yt = L(() => import("./BaseIcon-4i3dd7Ty.js")), bt = L(() => import("./DataTable-WrXCJkfE.js")), mt = L(() => import("./vue-ui-accordion-DUuwVsuJ.js")), Ct = L(() => import("./UserOptions-CzJWRC4s.js")), kt = L(() => import("./PenAndPaper-DxIUvoQ8.js")), wt = L(() => import("./PackageVersion-BLzm8l_I.js")), At = L(() => import("./BaseDraggableDialog-CAJxIF6g.js")), { vue_ui_waffle: xt } = kl(), { isThemeValid: $t, warnInvalidTheme: Tt } = Tl(), m = ft, Ft = Jt(), ue = v(() => !!m.dataset && m.dataset.length), b = i(al()), re = i(!1), se = i(""), U = i(null), Fe = i(0), F = i(null), Ie = i(null), Se = i(null), _e = i(null), Be = i(null), Oe = i(0), De = i(0), Pe = i(0), Le = i(!1), j = i(null), ie = i(null), e = i(fe()), { loading: Ee, FINAL_DATASET: Q, manualLoading: ce } = wl({
...Kt(m),
FINAL_CONFIG: e,
prepareConfig: fe,
callback: () => {
Promise.resolve().then(async () => {
p.value = he();
});
},
skeletonDataset: [
{
name: "",
values: [1],
color: "#AAAAAA"
},
{
name: "",
values: [1],
color: "#BABABA"
},
{
name: "",
values: [1],
color: "#CACACA"
}
],
skeletonConfig: ol({
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: ve, setUserOptionsVisibility: ze, keepUserOptionState: Ne } = Fl({ config: e.value }), { svgRef: de } = Il({ config: e.value.style.chart.title });
function fe() {
const t = Te({
userConfig: m.config,
defaultConfig: xt
}), l = t.theme;
if (!l) return t;
if (!$t.value(t))
return Tt(t), t;
const a = Te({
userConfig: dt[l] || m.config,
defaultConfig: t
}), o = Te({
userConfig: m.config,
defaultConfig: a
});
return {
...o,
customPalette: o.customPalette.length ? o.customPalette : nl[l] || R
};
}
J(() => m.config, (t) => {
Ee.value || (e.value = fe()), ve.value = !e.value.userOptions.showOnChartHover, Me(), Oe.value += 1, De.value += 1, Pe.value += 1, w.value.showTable = e.value.table.show, w.value.showTooltip = e.value.style.chart.tooltip.show;
}, { deep: !0 });
const P = lt(null), G = lt(null), Ve = v(() => !!e.value.debug);
function Me() {
if (nt(m.dataset) ? ($e({
componentName: "VueUiWaffle",
type: "dataset",
debug: Ve.value
}), ue.value = !1, ce.value = !0) : m.dataset.forEach((t, l) => {
ul({
datasetObject: t,
requiredAttributes: ["name", "values"]
}).forEach((a) => {
$e({
componentName: "VueUiWaffle",
type: "datasetSerieAttribute",
property: a,
index: l,
debug: Ve.value
});
});
}), nt(m.dataset) || (ce.value = e.value.loading), e.value.responsive) {
const t = ml(() => {
const { width: l, height: a } = Cl({
chart: F.value,
title: e.value.style.chart.title.text ? Ie.value : null,
legend: e.value.style.chart.legend.show ? Se.value : null,
source: _e.value,
noTitle: Be.value
});
requestAnimationFrame(() => {
N.value.width = l, N.value.height = a, I.value.width = l, I.value.height = a;
});
});
P.value && (G.value && P.value.unobserve(G.value), P.value.disconnect()), P.value = new ResizeObserver(t), G.value = F.value.parentNode, P.value.observe(G.value);
}
}
Qt(() => {
Le.value = !0, Me();
}), Zt(() => {
P.value && (G.value && P.value.unobserve(G.value), P.value.disconnect());
});
const { isPrinting: Re, isImaging: Ue, generatePdf: Ge, generateImage: We } = xl({
elementId: `vue-ui-waffle_${b.value}`,
fileName: e.value.style.chart.title.text || "vue-ui-waffle",
options: e.value.userOptions.print
}), It = v(() => e.value.userOptions.show && !e.value.style.chart.title.text), je = v(() => rl(e.value.customPalette)), w = i({
showTable: e.value.table.show,
showTooltip: e.value.style.chart.tooltip.show
});
J(e, () => {
w.value = {
showTable: e.value.table.show,
showTooltip: e.value.style.chart.tooltip.show
};
}, { immediate: !0 });
const N = i({
height: 512,
width: 512
}), I = i({
top: 0,
left: 0,
height: 512,
width: 512
}), S = v(() => (I.value.width - e.value.style.chart.layout.grid.size * e.value.style.chart.layout.grid.spaceBetween) / e.value.style.chart.layout.grid.size), _ = v(() => (I.value.height - e.value.style.chart.layout.grid.size * e.value.style.chart.layout.grid.spaceBetween) / e.value.style.chart.layout.grid.size), St = v(() => Math.max(1e-4, I.value.width / e.value.style.chart.layout.grid.size)), qe = v(() => Math.max(1e-4, I.value.height / e.value.style.chart.layout.grid.size));
function He(t) {
const l = e.value.style.chart.layout.grid.size * e.value.style.chart.layout.grid.size, a = t.reduce((A, we) => A + we, 0), o = t.map((A) => A / a * l), n = o.map(Math.floor), u = o.map((A) => A % 1);
let g = l - n.reduce((A, we) => A + we, 0);
for (; g > 0; ) {
let A = u.indexOf(Math.max(...u));
n[A] += 1, u[A] = 0, g -= 1;
}
return n;
}
const q = i(!1);
function he() {
return q.value = Q.value.flatMap((t) => t.values.reduce((l, a) => l + a, 0)).reduce((t, l) => t + l, 0) === 0, Q.value.map((t, l) => ({
...t,
color: dl(t.color) || je.value[l] || R[l] || R[l % R.length],
uid: `serie_${l}`,
absoluteIndex: l
}));
}
const pe = v(() => he()), p = i(pe.value);
J(() => m.dataset, (t) => {
Array.isArray(t) && t.length > 0 && (ce.value = !1);
}, { immediate: !0 }), J(() => m.dataset, (t) => {
p.value = he();
}, { deep: !0 });
const _t = v(() => {
const t = p.value.filter((l, a) => !y.value.includes(l.uid)).map((l, a) => q.value ? 1 : (l.values || []).reduce((o, n) => o + n, 0));
return He(t);
}), Bt = v(() => {
const t = p.value.map((l, a) => q.value ? 1 : (l.values || []).reduce((o, n) => o + n));
return He(t);
}), H = v(() => (Q.value.forEach((t, l) => {
[null, void 0].includes(t.values) && $e({
componentName: "VueUiWaffle",
type: "datasetSerieAttribute",
property: "values (number[])",
index: l
});
}), p.value.filter((t, l) => !y.value.includes(t.uid)).map((t, l) => ({
absoluteIndex: t.absoluteIndex,
uid: t.uid,
name: t.name,
color: t.color,
value: (t.values || []).reduce((a, o) => a + o, 0),
absoluteValues: t.values || [],
proportion: _t.value[l]
})))), ge = v(() => p.value.map((t, l) => ({
absoluteIndex: t.absoluteIndex,
uid: t.uid,
name: t.name,
color: t.color,
value: (t.values || []).reduce((a, o) => a + o, 0),
absoluteValues: t.values || [],
proportion: Bt.value[l]
})));
function Ot() {
return ge.value.map((t) => ({
name: t.name,
color: t.color,
value: t.value,
proportion: t.proportion
}));
}
const Dt = v(() => {
let t = 0;
return H.value.map((l, a) => {
const o = t, n = o + l.proportion, u = [];
for (let g = Math.floor(o); g < Math.floor(n); g += 1)
u.push(g);
return t = n, {
...l,
start: o,
rects: u
};
});
}), s = v(() => Dt.value.flatMap((t, l) => t.rects.map((a, o) => ({
isFirst: o === 0,
isLongEnough: a.length > 2,
name: t.name,
color: t.color,
value: t.value,
serieIndex: l,
absoluteStartIndex: o < 3,
serieId: t.uid,
...t
}))).map((t, l) => ({
...t,
isAbsoluteFirst: l % e.value.style.chart.layout.grid.size === 0
}))), W = v(() => {
const t = [];
for (let l = 0; l < e.value.style.chart.layout.grid.size; l += 1)
for (let a = 0; a < e.value.style.chart.layout.grid.size; a += 1)
t.push({
isStartOfLine: a === 0,
position: e.value.style.chart.layout.grid.vertical ? l : a,
x: (e.value.style.chart.layout.grid.vertical ? l : a) * (S.value + e.value.style.chart.layout.grid.spaceBetween),
y: (e.value.style.chart.layout.grid.vertical ? a : l) * (_.value + e.value.style.chart.layout.grid.spaceBetween) + I.value.top
});
return t;
}), y = i([]), X = i(!1), Xe = i(null), Ye = i(null);
function Z(t) {
if (q.value) return;
if (!e.value.useAnimation) {
y.value.includes(t) ? y.value = y.value.filter((n) => n !== t) : y.value.length < V.value.length - 1 && V.value.length > 1 && y.value.push(t);
return;
}
const l = pe.value.find((n) => n.uid === t).values.reduce((n, u) => n + u, 0), a = p.value.find((n) => n.uid === t).values.reduce((n, u) => n + u, 0);
let o = a;
if (!(a === 0 && l === 0)) {
if (y.value.includes(t)) {
let u = function() {
o > n ? (cancelAnimationFrame(Xe.value), p.value = p.value.map((g, A) => g.uid === t ? {
...g,
values: [n]
} : g), X.value = !1) : (X.value = !0, o += n * 0.025, p.value = p.value.map((g, A) => g.uid === t ? {
...g,
values: [o]
} : g), Xe.value = requestAnimationFrame(u));
};
y.value = y.value.filter((g) => g !== t);
const n = l;
u();
} else if (y.value.length < V.value.length - 1 && V.value.length > 1) {
let n = function() {
o < a / 100 ? (cancelAnimationFrame(Ye.value), y.value.push(t), p.value = p.value.map((u, g) => u.uid === t ? {
...u,
values: [0]
} : u), X.value = !1) : (X.value = !0, o /= 1.15, p.value = p.value.map((u) => u.uid === t ? {
...u,
values: [o]
} : u), Ye.value = requestAnimationFrame(n));
};
n();
}
Mt("selectLegend", H.value.map((n) => ({
name: n.name,
color: n.color,
value: n.value,
proportion: n.proportion / Math.pow(e.value.style.chart.layout.grid.size, 2)
})));
}
}
function Je(t) {
if (!ge.value.length)
return e.value.debug && console.warn("VueUiWaffle - There are no series to show."), null;
const l = ge.value.find((a) => a.name === t);
return l || (e.value.debug && console.warn(`VueUiWaffle - Series name not found "${t}"`), null);
}
function Pt(t) {
const l = Je(t);
l !== null && y.value.includes(l.uid) && Z(l.uid);
}
function Lt(t) {
const l = Je(t);
l !== null && (y.value.includes(l.uid) || Z(l.uid));
}
function ye({
val: t,
percentage: l,
showVal: a,
showPercentage: o,
config: n
}) {
return bl({
config: n,
val: t,
percentage: l,
showVal: a,
showPercentage: o
});
}
const V = v(() => p.value.map((t, l) => {
const a = (t.values || []).reduce((n, u) => n + u, 0), o = a / p.value.map((n) => (n.values || []).reduce((u, g) => u + g, 0)).reduce((n, u) => n + u, 0);
return {
name: t.name,
color: t.color || je[l] || R[l] || R[l % R.length],
value: a,
proportion: o,
uid: t.uid,
shape: "square"
};
}).map((t, l) => {
const a = K(e.value.style.chart.layout.labels.dataLabels.formatter, t.value, D({
p: e.value.style.chart.layout.labels.dataLabels.prefix,
v: t.value,
s: e.value.style.chart.layout.labels.dataLabels.suffix,
r: e.value.style.chart.legend.roundingValue
}), { datapoint: t, index: l }), o = isNaN(t.value / B.value) ? "-" : D({ v: t.value / B.value * 100, s: "%", r: e.value.style.chart.legend.roundingPercentage }), n = ye({
val: a,
percentage: o,
showVal: e.value.style.chart.legend.showValue,
showPercentage: e.value.style.chart.legend.showPercentage,
config: e.value.style.chart.legend
});
return {
...t,
opacity: y.value.includes(t.uid) ? 0.5 : 1,
segregate: () => Z(t.uid),
isSegregated: y.value.includes(t.uid),
display: `${t.name}${e.value.style.chart.legend.showPercentage || e.value.style.chart.legend.showValue ? ": " : ""}${n}`
};
})), Et = v(() => ({
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" : ""
})), B = v(() => H.value.map((t) => t.value).reduce((t, l) => t + l, 0)), be = i(null), me = i(null);
function zt(t) {
const l = s.value[t];
e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: l, seriesIndex: l.serieIndex });
}
function Nt(t) {
const l = s.value[t];
e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: l, seriesIndex: l.serieIndex }), me.value = null, re.value = !1, U.value = null;
}
function Vt(t) {
if (y.value.length === m.dataset.length) return;
const l = s.value[t];
be.value = {
datapoint: l,
seriesIndex: l.absoluteIndex,
series: p.value,
config: e.value
}, e.value.events.datapointEnter && me.value !== l.serieIndex && e.value.events.datapointEnter({ datapoint: l, seriesIndex: l.serieIndex }), me.value = l.serieIndex, re.value = !0, U.value = s.value[t].serieIndex;
const a = e.value.style.chart.tooltip.customFormat;
if (gl(a) && yl(() => a({
seriesIndex: s.value[t].absoluteIndex,
datapoint: l,
series: p.value,
config: e.value
})))
se.value = a({
seriesIndex: s.value[t].absoluteIndex,
datapoint: l,
series: p.value,
config: e.value
});
else {
let o = "";
o += `<div style="width:100%;text-align:center;border-bottom:1px solid ${e.value.style.chart.tooltip.borderColor};padding-bottom:6px;margin-bottom:3px;">${l.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="${l.color}" />${Ft.pattern ? `<rect x="0" y="0" height="60" width="60" stroke="none" rx="1" stroke="none" fill="url(#pattern_${b.value}_${l.absoluteIndex})"/>` : ""}</svg>`, o += `<b>${ye({
config: e.value.style.chart.tooltip,
showVal: e.value.style.chart.tooltip.showValue,
showPercentage: e.value.style.chart.tooltip.showPercentage,
val: `<span>${K(
e.value.style.chart.layout.labels.dataLabels.formatter,
l.value,
D({
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.tooltip.roundingValue
}),
{
datapoint: l,
seriesIndex: s.value[t].absoluteIndex,
series: p.value
}
)}</span>`,
percentage: `<span>${D({
v: q.value ? 1 / Q.value.length * 100 : l.value / B.value * 100,
s: "%",
r: e.value.style.chart.tooltip.roundingPercentage
})}</span>`
})}</b></div>`, se.value = o;
}
}
const Mt = pt, O = v(() => {
const t = H.value.map((a) => ({
name: a.name,
color: a.color
})), l = H.value.map((a) => a.value);
return { head: t, body: l };
});
function ee(t) {
return e.value.useBlurOnHover && ![null, void 0].includes(U.value) && U.value !== t ? `url(#blur_${b.value})` : "";
}
function Rt(t, l) {
return e.value.style.chart.layout.labels.captions.show ? s.value.length && !X.value && !e.value.style.chart.layout.grid.vertical && (s.value[t].isFirst && l.position < e.value.style.chart.layout.grid.size - 2 || s.value[t].isAbsoluteFirst && t % e.value.style.chart.layout.grid.size === 0 && s.value[t].absoluteStartIndex) : !1;
}
function Ut(t, l = null) {
const a = K(
e.value.style.chart.layout.labels.dataLabels.formatter,
s.value[t].value,
D({
p: e.value.style.chart.layout.labels.dataLabels.prefix,
v: s.value[t].value,
s: e.value.style.chart.layout.labels.dataLabels.suffix,
r: e.value.style.chart.layout.labels.captions.roundingValue
}),
{ datapoint: s.value[t], position: l }
), o = D({ v: s.value[t].proportion, s: "%", r: e.value.style.chart.layout.labels.captions.roundingPercentage }), n = (e.value.style.chart.layout.labels.captions.serieNameAbbreviation ? pl({ source: s.value[t].name, length: e.value.style.chart.layout.labels.captions.serieNameMaxAbbreviationSize }) : s.value[t].name) + (e.value.style.chart.layout.labels.captions.showPercentage || e.value.style.chart.layout.labels.captions.showValue ? ":" : ""), u = e.value.style.chart.layout.labels.captions.showSerieName ? n : "", g = ye({
val: a,
percentage: o,
showVal: e.value.style.chart.layout.labels.captions.showValue,
showPercentage: e.value.style.chart.layout.labels.captions.showPercentage,
config: e.value.style.chart.layout.labels.dataLabels
});
return `${u} ${g}`;
}
function Ce(t = null) {
ll(() => {
const l = O.value.head.map((n, u) => [[
n.name
], [O.value.body[u]], [isNaN(O.value.body[u] / B.value) ? "-" : O.value.body[u] / B.value * 100]]), a = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [[""], ["val"], ["%"]]].concat(l), o = fl(a);
t ? t(o) : hl({ csvContent: o, title: e.value.style.chart.title.text || "vue-ui-waffle" });
});
}
const te = v(() => {
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>',
K(
e.value.style.chart.layout.labels.dataLabels.formatter,
B.value,
D({
p: e.value.style.chart.layout.labels.dataLabels.prefix,
v: B.value,
s: e.value.style.chart.layout.labels.dataLabels.suffix,
r: e.value.table.td.roundingValue
})
),
"100%"
], l = O.value.head.map((n, u) => [
{
color: n.color,
name: n.name
},
K(
e.value.style.chart.layout.labels.dataLabels.formatter,
O.value.body[u],
D({
p: e.value.style.chart.layout.labels.dataLabels.prefix,
v: O.value.body[u],
s: e.value.style.chart.layout.labels.dataLabels.suffix,
r: e.value.table.td.roundingValue
})
),
isNaN(O.value.body[u] / B.value) ? "-" : D({
v: O.value.body[u] / B.value * 100,
s: "%",
r: e.value.table.td.roundingPercentage
})
]), 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
},
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: l,
config: a,
colNames: o
};
}), M = i(!1);
function Ke(t) {
M.value = t, Fe.value += 1;
}
function Qe() {
w.value.showTable = !w.value.showTable;
}
function Ze() {
w.value.showTooltip = !w.value.showTooltip;
}
const le = i(!1);
function ke() {
le.value = !le.value;
}
async function Gt({ scale: t = 2 } = {}) {
if (!F.value) return;
const { width: l, height: a } = F.value.getBoundingClientRect(), o = l / a, { imageUri: n, base64: u } = await Sl({ domElement: F.value, base64: !0, img: !0, scale: t });
return {
imageUri: n,
base64: u,
title: e.value.style.chart.title.text,
width: l,
height: a,
aspectRatio: o
};
}
const Y = v(() => {
const t = e.value.table.useDialog && !e.value.table.show, l = w.value.showTable;
return {
component: t ? At : mt,
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: M.value,
fullscreenParent: F.value,
forcedWidth: Math.min(500, 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
}
}
}
};
});
J(() => w.value.showTable, (t) => {
e.value.table.show || (t && e.value.table.useDialog && j.value ? j.value.open() : "close" in j.value && j.value.close());
});
function et() {
w.value.showTable = !1, ie.value && ie.value.setTableIconState(!1);
}
const Wt = v(() => V.value.map((t) => ({
...t,
name: t.display
}))), jt = v(() => e.value.style.chart.backgroundColor), qt = v(() => e.value.style.chart.legend), Ht = v(() => e.value.style.chart.title), { exportSvg: Xt, getSvg: Yt } = $l({
svg: de,
title: Ht,
legend: qt,
legendItems: Wt,
backgroundColor: jt
});
async function tt({ isCb: t }) {
if (t) {
const { blob: l, url: a, text: o, dataUrl: n } = await Yt();
e.value.userOptions.callbacks.svg({ blob: l, url: a, text: o, dataUrl: n });
} else
Xt();
}
return ht({
getData: Ot,
getImage: Gt,
generatePdf: Ge,
generateCsv: Ce,
generateImage: We,
generateSvg: tt,
hideSeries: Lt,
showSeries: Pt,
toggleTable: Qe,
toggleTooltip: Ze,
toggleAnnotator: ke,
toggleFullscreen: Ke
}), (t, l) => (r(), c("div", {
class: at(`vue-data-ui-component vue-ui-waffle ${M.value ? "vue-data-ui-wrapper-fullscreen" : ""}`),
ref_key: "waffleChart",
ref: F,
id: `vue-ui-waffle_${b.value}`,
style: ae(`font-family:${e.value.style.fontFamily};width:100%; text-align:center;background:${e.value.style.chart.backgroundColor};${e.value.responsive ? "height: 100%" : ""}`),
onMouseenter: l[2] || (l[2] = () => d(ze)(!0)),
onMouseleave: l[3] || (l[3] = () => d(ze)(!1))
}, [
e.value.userOptions.buttons.annotator ? (r(), E(d(kt), {
key: 0,
svgRef: d(de),
backgroundColor: e.value.style.chart.backgroundColor,
color: e.value.style.chart.color,
active: le.value,
onClose: ke
}, {
"annotator-action-close": f(() => [
h(t.$slots, "annotator-action-close", {}, void 0, !0)
]),
"annotator-action-color": f(({ color: a }) => [
h(t.$slots, "annotator-action-color", x($({ color: a })), void 0, !0)
]),
"annotator-action-draw": f(({ mode: a }) => [
h(t.$slots, "annotator-action-draw", x($({ mode: a })), void 0, !0)
]),
"annotator-action-undo": f(({ disabled: a }) => [
h(t.$slots, "annotator-action-undo", x($({ disabled: a })), void 0, !0)
]),
"annotator-action-redo": f(({ disabled: a }) => [
h(t.$slots, "annotator-action-redo", x($({ disabled: a })), void 0, !0)
]),
"annotator-action-delete": f(({ disabled: a }) => [
h(t.$slots, "annotator-action-delete", x($({ disabled: a })), void 0, !0)
]),
_: 3
}, 8, ["svgRef", "backgroundColor", "color", "active"])) : C("", !0),
It.value ? (r(), c("div", {
key: 1,
ref_key: "noTitle",
ref: Be,
class: "vue-data-ui-no-title-space",
style: "height:36px; width: 100%;background:transparent"
}, null, 512)) : C("", !0),
e.value.style.chart.title.text ? (r(), c("div", {
key: 2,
ref_key: "chartTitle",
ref: Ie,
style: "width:100%;background:transparent;padding-bottom:12px"
}, [
(r(), E(Bl, {
key: `title_${Oe.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)) : C("", !0),
k("div", {
id: `legend-top-${b.value}`
}, null, 8, Ll),
e.value.userOptions.show && ue.value && (d(Ne) || d(ve)) ? (r(), E(d(Ct), {
ref_key: "userOptionsRef",
ref: ie,
key: `user_options_${Fe.value}`,
backgroundColor: e.value.style.chart.backgroundColor,
color: e.value.style.chart.color,
isPrinting: d(Re),
isImaging: d(Ue),
uid: b.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: M.value,
isTooltip: w.value.showTooltip,
titles: { ...e.value.userOptions.buttonTitles },
chartElement: F.value,
position: e.value.userOptions.position,
hasAnnotator: e.value.userOptions.buttons.annotator,
isAnnotation: le.value,
callbacks: e.value.userOptions.callbacks,
printScale: e.value.userOptions.print.scale,
tableDialog: e.value.table.useDialog,
onToggleFullscreen: Ke,
onGeneratePdf: d(Ge),
onGenerateCsv: Ce,
onGenerateImage: d(We),
onGenerateSvg: tt,
onToggleTable: Qe,
onToggleTooltip: Ze,
onToggleAnnotator: ke,
style: ae({
visibility: d(Ne) ? d(ve) ? "visible" : "hidden" : "visible"
})
}, Ae({ _: 2 }, [
t.$slots.menuIcon ? {
name: "menuIcon",
fn: f(({ isOpen: a, color: o }) => [
h(t.$slots, "menuIcon", x($({ isOpen: a, color: o })), void 0, !0)
]),
key: "0"
} : void 0,
t.$slots.optionTooltip ? {
name: "optionTooltip",
fn: f(() => [
h(t.$slots, "optionTooltip", {}, void 0, !0)
]),
key: "1"
} : void 0,
t.$slots.optionPdf ? {
name: "optionPdf",
fn: f(() => [
h(t.$slots, "optionPdf", {}, void 0, !0)
]),
key: "2"
} : void 0,
t.$slots.optionCsv ? {
name: "optionCsv",
fn: f(() => [
h(t.$slots, "optionCsv", {}, void 0, !0)
]),
key: "3"
} : void 0,
t.$slots.optionImg ? {
name: "optionImg",
fn: f(() => [
h(t.$slots, "optionImg", {}, void 0, !0)
]),
key: "4"
} : void 0,
t.$slots.optionSvg ? {
name: "optionSvg",
fn: f(() => [
h(t.$slots, "optionSvg", {}, void 0, !0)
]),
key: "5"
} : void 0,
t.$slots.optionTable ? {
name: "optionTable",
fn: f(() => [
h(t.$slots, "optionTable", {}, void 0, !0)
]),
key: "6"
} : void 0,
t.$slots.optionFullscreen ? {
name: "optionFullscreen",
fn: f(({ toggleFullscreen: a, isFullscreen: o }) => [
h(t.$slots, "optionFullscreen", x($({ toggleFullscreen: a, isFullscreen: o })), void 0, !0)
]),
key: "7"
} : void 0,
t.$slots.optionAnnotator ? {
name: "optionAnnotator",
fn: f(({ toggleAnnotator: a, isAnnotator: o }) => [
h(t.$slots, "optionAnnotator", x($({ toggleAnnotator: a, isAnnotator: o })), void 0, !0)
]),
key: "8"
} : void 0
]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasTooltip", "hasPdf", "hasImg", "hasSvg", "hasXls", "hasTable", "hasFullscreen", "isFullscreen", "isTooltip", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "tableDialog", "onGeneratePdf", "onGenerateImage", "style"])) : C("", !0),
(r(), c("svg", {
ref_key: "svgRef",
ref: de,
xmlns: d(sl),
class: at({ "vue-data-ui-fullscreen--on": M.value, "vue-data-ui-fulscreen--off": !M.value }),
viewBox: `0 0 ${N.value.width <= 0 ? 10 : N.value.width} ${N.value.height <= 0 ? 10 : N.value.height}`,
style: ae(`max-width:100%;overflow:visible;background:transparent;color:${e.value.style.chart.color}`)
}, [
oe(d(wt)),
k("defs", null, [
(r(!0), c(T, null, z(s.value, (a, o) => (r(), c("radialGradient", {
cx: "50%",
cy: "50%",
r: "50%",
fx: "50%",
fy: "50%",
id: `gradient_${b.value}_${o}`
}, [
k("stop", {
offset: "0%",
"stop-color": d(il)(d(cl)(a.color, 0.05), 100 - e.value.style.chart.layout.rect.gradientIntensity)
}, null, 8, Nl),
k("stop", {
offset: "100%",
"stop-color": a.color
}, null, 8, Vl)
], 8, zl))), 256))
]),
k("defs", null, [
k("filter", {
id: `blur_${b.value}`,
x: "-50%",
y: "-50%",
width: "200%",
height: "200%"
}, [...l[4] || (l[4] = [
k("feGaussianBlur", {
in: "SourceGraphic",
stdDeviation: 2
}, null, -1),
k("feColorMatrix", {
type: "saturate",
values: "0"
}, null, -1)
])], 8, Ml)
]),
e.value.useCustomCells && s.value.length ? (r(!0), c(T, { key: 0 }, z(W.value, (a, o) => (r(), c("foreignObject", {
x: a.x,
y: a.y,
height: _.value <= 0 ? 1e-4 : _.value,
width: S.value <= 0 ? 1e-4 : S.value,
class: "vue-ui-waffle-custom-cell-foreignObject"
}, [
h(t.$slots, "cell", xe({ ref_for: !0 }, { cell: { ...a, color: s.value[o].color, ...s.value[o] }, isSelected: [null, void 0].includes(U.value) ? !0 : s.value[o].serieIndex === U.value }), void 0, !0)
], 8, Rl))), 256)) : C("", !0),
!s.value.length && !e.value.useCustomCells ? (r(), c("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, Ul)) : s.value.length && !e.value.useCustomCells ? (r(), c(T, { key: 2 }, [
t.$slots.pattern ? (r(), c("g", Gl, [
(r(!0), c(T, null, z(pe.value, (a) => (r(), c("defs", null, [
h(t.$slots, "pattern", xe({ ref_for: !0 }, { seriesIndex: a.absoluteIndex, patternId: `pattern_${b.value}_${a.absoluteIndex}` }), void 0, !0)
]))), 256))
])) : C("", !0),
(r(!0), c(T, null, z(W.value, (a, o) => (r(), c("rect", {
rx: e.value.style.chart.layout.rect.rounded ? e.value.style.chart.layout.rect.rounding : 0,
x: a.x + e.value.style.chart.layout.grid.spaceBetween / 2,
y: a.y + e.value.style.chart.layout.grid.spaceBetween / 2,
height: _.value <= 0 ? 1e-4 : _.value,
width: S.value <= 0 ? 1e-4 : S.value,
fill: "white",
stroke: e.value.style.chart.layout.rect.stroke,
"stroke-width": e.value.style.chart.layout.rect.strokeWidth,
filter: ee(s.value[o].serieIndex)
}, null, 8, Wl))), 256)),
(r(!0), c(T, null, z(W.value, (a, o) => (r(), c("rect", {
rx: e.value.style.chart.layout.rect.rounded ? e.value.style.chart.layout.rect.rounding : 0,
x: a.x + e.value.style.chart.layout.grid.spaceBetween / 2,
y: a.y + e.value.style.chart.layout.grid.spaceBetween / 2,
height: _.value <= 0 ? 1e-4 : _.value,
width: S.value <= 0 ? 1e-4 : S.value,
fill: e.value.style.chart.layout.rect.useGradient && e.value.style.chart.layout.rect.gradientIntensity > 0 ? `url(#gradient_${b.value}_${o})` : s.value[o].color,
stroke: e.value.style.chart.layout.rect.stroke,
"stroke-width": e.value.style.chart.layout.rect.strokeWidth,
filter: ee(s.value[o].serieIndex)
}, null, 8, jl))), 256)),
t.$slots.pattern ? (r(), c("g", ql, [
(r(!0), c(T, null, z(W.value, (a, o) => (r(), c("rect", {
rx: e.value.style.chart.layout.rect.rounded ? e.value.style.chart.layout.rect.rounding : 0,
x: a.x + e.value.style.chart.layout.grid.spaceBetween / 2,
y: a.y + e.value.style.chart.layout.grid.spaceBetween / 2,
height: _.value <= 0 ? 1e-4 : _.value,
width: S.value <= 0 ? 1e-4 : S.value,
fill: `url(#pattern_${b.value}_${s.value[o].absoluteIndex})`,
stroke: "none",
filter: ee(s.value[o].serieIndex)
}, null, 8, Hl))), 256))
])) : C("", !0)
], 64)) : C("", !0),
(r(!0), c(T, null, z(W.value, (a, o) => (r(), c(T, null, [
Rt(o, a) ? (r(), c("text", {
key: `datalabel_${o}`,
textContent: ne(Ut(o, a)),
x: a.x + e.value.style.chart.layout.labels.captions.offsetX + e.value.style.chart.layout.grid.spaceBetween / 2 + 6,
y: a.y + e.value.style.chart.layout.labels.captions.offsetY + e.value.style.chart.layout.grid.spaceBetween / 2 + qe.value / 2 + e.value.style.chart.layout.labels.captions.fontSize / 3,
"font-size": e.value.style.chart.layout.labels.captions.fontSize,
fill: d(vl)(s.value[o].color),
filter: ee(s.value[o].serieIndex)
}, null, 8, Xl)) : C("", !0)
], 64))), 256)),
(r(!0), c(T, null, z(W.value, (a, o) => (r(), c("rect", {
x: a.x + e.value.style.chart.layout.grid.spaceBetween / 2,
y: a.y + e.value.style.chart.layout.grid.spaceBetween / 2,
height: qe.value,
width: St.value,
fill: "transparent",
stroke: "none",
onMouseover: (n) => Vt(o),
onMouseleave: (n) => Nt(o),
onClick: (n) => zt(o)
}, null, 40, Yl))), 256)),
h(t.$slots, "svg", { svg: N.value }, void 0, !0)
], 14, El)),
t.$slots.watermark ? (r(), c("div", Jl, [
h(t.$slots, "watermark", x($({ isPrinting: d(Re) || d(Ue) })), void 0, !0)
])) : C("", !0),
k("div", {
id: `legend-bottom-${b.value}`
}, null, 8, Kl),
Le.value ? (r(), E(el, {
key: 5,
to: e.value.style.chart.legend.position === "top" ? `#legend-top-${b.value}` : `#legend-bottom-${b.value}`
}, [
k("div", {
ref_key: "chartLegend",
ref: Se
}, [
e.value.style.chart.legend.show ? (r(), E(Ol, {
key: `legend_${Pe.value}`,
legendSet: V.value,
config: Et.value,
onClickMarker: l[0] || (l[0] = ({ legend: a }) => Z(a.uid))
}, Ae({
item: f(({ legend: a }) => [
k("div", {
onClick: (o) => a.segregate(),
style: ae(`opacity:${y.value.includes(a.uid) ? 0.5 : 1}`)
}, ne(a.display), 13, Ql)
]),
_: 2
}, [
t.$slots.pattern ? {
name: "legend-pattern",
fn: f(({ legend: a, index: o }) => [
oe(_l, {
shape: a.shape,
radius: 30,
stroke: "none",
plot: { x: 30, y: 30 },
fill: `url(#pattern_${b.value}_${o})`
}, null, 8, ["shape", "fill"])
]),
key: "0"
} : void 0
]), 1032, ["legendSet", "config"])) : h(t.$slots, "legend", {
key: 1,
legend: V.value
}, void 0, !0)
], 512)
], 8, ["to"])) : C("", !0),
t.$slots.source ? (r(), c("div", {
key: 6,
ref_key: "source",
ref: _e,
dir: "auto"
}, [
h(t.$slots, "source", {}, void 0, !0)
], 512)) : C("", !0),
oe(d(gt), {
show: w.value.showTooltip && re.value && y.value.length < m.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: F.value,
content: se.value,
isCustom: e.value.style.chart.tooltip.customFormat && typeof e.value.style.chart.tooltip.customFormat == "function",
fontSize: e.value.style.chart.tooltip.fontSize,
isFullscreen: M.value,
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": f(() => [
h(t.$slots, "tooltip-before", x($({ ...be.value })), void 0, !0)
]),
"tooltip-after": f(() => [
h(t.$slots, "tooltip-after", x($({ ...be.value })), void 0, !0)
]),
_: 3
}, 8, ["show", "backgroundColor", "color", "borderRadius", "borderColor", "borderWidth", "backgroundOpacity", "position", "offsetY", "parent", "content", "isCustom", "fontSize", "isFullscreen", "smooth", "backdropFilter", "smoothForce", "smoothSnapThreshold"]),
ue.value && e.value.userOptions.buttons.table ? (r(), E(tl(Y.value.component), xe({ key: 7 }, Y.value.props, {
ref_key: "tableUnit",
ref: j,
onClose: et
}), Ae({
content: f(() => [
(r(), E(d(bt), {
key: `table_${De.value}`,
colNames: te.value.colNames,
head: te.value.head,
body: te.value.body,
config: te.value.config,
title: e.value.table.useDialog ? "" : Y.value.title,
withCloseButton: !e.value.table.useDialog,
onClose: et
}, {
th: f(({ th: a }) => [
k("div", {
innerHTML: a,
style: { display: "flex", "align-items": "center" }
}, null, 8, Zl)
]),
td: f(({ td: a }) => [
ot(ne(a.name || a), 1)
]),
_: 1
}, 8, ["colNames", "head", "body", "config", "title", "withCloseButton"]))
]),
_: 2
}, [
e.value.table.useDialog ? {
name: "title",
fn: f(() => [
ot(ne(Y.value.title), 1)
]),
key: "0"
} : void 0,
e.value.table.useDialog ? {
name: "actions",
fn: f(() => [
k("button", {
tabindex: "0",
class: "vue-ui-user-options-button",
onClick: l[1] || (l[1] = (a) => Ce(e.value.userOptions.callbacks.csv))
}, [
oe(d(yt), {
name: "excel",
stroke: Y.value.props.color
}, null, 8, ["stroke"])
])
]),
key: "1"
} : void 0
]), 1040)) : C("", !0),
d(Ee) ? (r(), E(Al, { key: 8 })) : C("", !0)
], 46, Pl));
}
}, ta = /* @__PURE__ */ Dl(ea, [["__scopeId", "data-v-da99ceb0"]]), ma = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
__proto__: null,
default: ta
}, Symbol.toStringTag, { value: "Module" }));
export {
ba as a,
ma as b,
ta as v
};