vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
864 lines (863 loc) • 38.2 kB
JavaScript
import { defineAsyncComponent as B, useSlots as pt, computed as d, ref as c, watch as Re, shallowRef as De, onMounted as ft, onBeforeUnmount as yt, createElementBlock as v, openBlock as s, unref as r, normalizeStyle as K, normalizeClass as Ue, createBlock as M, createCommentVNode as f, createElementVNode as x, createVNode as ve, createSlots as Ee, withCtx as m, renderSlot as g, normalizeProps as W, guardReactiveProps as q, Fragment as $, renderList as z, mergeProps as Ge, toDisplayString as A, createTextVNode as gt, nextTick as mt } from "vue";
import { u as bt, c as wt, t as kt, p as R, a as xt, o as Ct, e as ce, g as $t, b as _t, i as H, f as _, X as It, s as Tt, w as St, F as Pt, L as Ot, d as At, q as Ft, r as Lt, x as zt, y as Nt } from "./index-BLtEpj8j.js";
import { t as Vt, u as Bt } from "./useResponsive-DfdjqQps.js";
import { u as je } from "./useNestedProp-Bw1KcAmj.js";
import { u as Mt } from "./usePrinter-DnRwTdvS.js";
import { u as Rt } from "./useUserOptionState-BIvW1Kz7.js";
import { u as Dt } from "./useChartAccessibility-9icAAmYg.js";
import Ut from "./Title-DkG60EPg.js";
import Et from "./Legend-E7G897sw.js";
import { _ as Gt } from "./Shape-Cqnzky8X.js";
import jt from "./img-D-vWHxhM.js";
import { _ as Wt } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const qt = ["id"], Ht = ["xmlns", "viewBox"], Xt = ["id"], Yt = ["stop-color"], Jt = ["stop-color"], Kt = ["id"], Qt = ["x", "y", "height", "width"], Zt = ["height", "width"], el = { key: 0 }, tl = ["rx", "x", "y", "height", "width", "stroke", "stroke-width", "filter"], ll = ["rx", "x", "y", "height", "width", "fill", "stroke", "stroke-width", "filter"], al = { key: 1 }, ol = ["rx", "x", "y", "height", "width", "fill", "filter"], ul = ["x", "y", "height", "width", "filter"], sl = { key: 0 }, rl = { key: 1 }, nl = { key: 2 }, il = { key: 3 }, vl = ["onMouseover", "x", "y", "height", "width"], cl = {
key: 5,
class: "vue-data-ui-watermark"
}, dl = ["onClick"], hl = ["innerHTML"], pl = {
__name: "vue-ui-waffle",
props: {
config: {
type: Object,
default() {
return {};
}
},
dataset: {
type: Array,
default() {
return [];
}
}
},
emits: ["selectLegend"],
setup(We, { expose: qe, emit: He }) {
const Xe = B(() => import("./DataTable-CS_V_Adx.js")), Ye = B(() => import("./PenAndPaper-7BWf7zgA.js")), Je = B(() => import("./vue-ui-accordion-B6Svdk-2.js")), Ke = B(() => import("./vue-ui-skeleton-CsMU8DwQ.js")), Qe = B(() => import("./Tooltip-CuHsd1IQ.js")), Ze = B(() => import("./UserOptions-DGw0HvSp.js")), et = B(() => import("./PackageVersion-CnRyWKP-.js")), { vue_ui_waffle: tt } = bt(), b = We, lt = pt(), Q = d(() => !!b.dataset && b.dataset.length), k = c(wt()), at = c(null), ae = c(!1), oe = c(""), D = c(null), de = c(0), F = c(null), he = c(null), pe = c(null), fe = c(null), ye = c(null), ge = c(0), me = c(0), be = c(0), e = d({
get: () => Ce(),
set: (t) => t
}), { userOptionsVisible: ue, setUserOptionsVisibility: we, keepUserOptionState: ke } = Rt({ config: e.value }), { svgRef: xe } = Dt({ config: e.value.style.chart.title });
function Ce() {
const t = je({
userConfig: b.config,
defaultConfig: tt
});
return t.theme ? {
...je({
userConfig: xt.vue_ui_waffle[t.theme] || b.config,
defaultConfig: t
}),
customPalette: kt[t.theme] || R
} : t;
}
Re(() => b.config, (t) => {
e.value = Ce(), ue.value = !e.value.userOptions.showOnChartHover, $e(), ge.value += 1, me.value += 1, be.value += 1, C.value.showTable = e.value.table.show, C.value.showTooltip = e.value.style.chart.tooltip.show;
}, { deep: !0 });
const L = De(null), U = De(null);
function $e() {
if (Ct(b.dataset) ? ce({
componentName: "VueUiWaffle",
type: "dataset"
}) : b.dataset.forEach((t, a) => {
$t({
datasetObject: t,
requiredAttributes: ["name", "values"]
}).forEach((l) => {
ce({
componentName: "VueUiWaffle",
type: "datasetSerieAttribute",
property: l,
index: a
});
});
}), e.value.responsive) {
const t = Vt(() => {
const { width: a, height: l } = Bt({
chart: F.value,
title: e.value.style.chart.title.text ? he.value : null,
legend: e.value.style.chart.legend.show ? pe.value : null,
source: fe.value,
noTitle: ye.value
});
requestAnimationFrame(() => {
N.value.width = a, N.value.height = l, I.value.width = a, I.value.height = l;
});
});
L.value && (U.value && L.value.unobserve(U.value), L.value.disconnect()), L.value = new ResizeObserver(t), U.value = F.value.parentNode, L.value.observe(U.value);
}
}
ft(() => {
$e();
}), yt(() => {
L.value && (U.value && L.value.unobserve(U.value), L.value.disconnect());
});
const { isPrinting: _e, isImaging: Ie, generatePdf: Te, generateImage: Se } = Mt({
elementId: `vue-ui-waffle_${k.value}`,
fileName: e.value.style.chart.title.text || "vue-ui-waffle",
options: e.value.userOptions.print
}), ot = d(() => e.value.userOptions.show && !e.value.style.chart.title.text), Pe = d(() => _t(e.value.customPalette)), C = c({
showTable: e.value.table.show,
showTooltip: e.value.style.chart.tooltip.show
}), N = c({
height: 512,
width: 512
}), I = c({
top: 0,
left: 0,
height: 512,
width: 512
}), T = d(() => (I.value.width - e.value.style.chart.layout.grid.size * e.value.style.chart.layout.grid.spaceBetween) / e.value.style.chart.layout.grid.size), S = d(() => (I.value.height - e.value.style.chart.layout.grid.size * e.value.style.chart.layout.grid.spaceBetween) / e.value.style.chart.layout.grid.size), X = d(() => I.value.width / e.value.style.chart.layout.grid.size), Z = d(() => I.value.height / e.value.style.chart.layout.grid.size);
function Oe(t) {
const a = e.value.style.chart.layout.grid.size * e.value.style.chart.layout.grid.size, l = t.reduce((w, ie) => w + ie, 0), o = t.map((w) => w / l * a), u = o.map(Math.floor), i = o.map((w) => w % 1);
let y = a - u.reduce((w, ie) => w + ie, 0);
for (; y > 0; ) {
let w = i.indexOf(Math.max(...i));
u[w] += 1, i[w] = 0, y -= 1;
}
return u;
}
const Y = c(!1);
function Ae() {
return Y.value = b.dataset.flatMap((t) => t.values.reduce((a, l) => a + l, 0)).reduce((t, a) => t + a, 0) === 0, b.dataset.map((t, a) => ({
...t,
color: At(t.color) || Pe.value[a] || R[a] || R[a % R.length],
uid: `serie_${a}`,
absoluteIndex: a
}));
}
const se = d(() => Ae()), h = c(se.value);
Re(() => b.dataset, (t) => {
h.value = Ae();
}, { deep: !0 });
const ut = d(() => {
const t = h.value.filter((a, l) => !p.value.includes(a.uid)).map((a, l) => Y.value ? 1 : (a.values || []).reduce((o, u) => o + u, 0));
return Oe(t);
}), st = d(() => {
const t = h.value.map((a, l) => Y.value ? 1 : (a.values || []).reduce((o, u) => o + u));
return Oe(t);
}), J = d(() => (b.dataset.forEach((t, a) => {
[null, void 0].includes(t.values) && ce({
componentName: "VueUiWaffle",
type: "datasetSerieAttribute",
property: "values (number[])",
index: a
});
}), h.value.filter((t, a) => !p.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: ut.value[a]
})))), rt = d(() => 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: st.value[a]
})));
function nt() {
return rt.value.map((t) => ({
name: t.name,
color: t.color,
value: t.value,
proportion: t.proportion
}));
}
const it = d(() => {
let t = 0;
return J.value.map((a, l) => {
const o = t, u = o + a.proportion, i = [];
for (let y = Math.floor(o); y < Math.floor(u); y += 1)
i.push(y);
return t = u, {
...a,
start: o,
rects: i
};
});
}), n = d(() => it.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
}))), E = d(() => {
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) * (T.value + e.value.style.chart.layout.grid.spaceBetween),
y: (e.value.style.chart.layout.grid.vertical ? l : a) * (S.value + e.value.style.chart.layout.grid.spaceBetween) + I.value.top
});
return t;
}), p = c([]), V = c(!1), Fe = c(null), Le = c(null);
function ze(t) {
if (Y.value) return;
if (!e.value.useAnimation) {
p.value.includes(t) ? p.value = p.value.filter((u) => u !== t) : p.value.length < G.value.length - 1 && G.value.length > 1 && p.value.push(t);
return;
}
const a = se.value.find((u) => u.uid === t).values.reduce((u, i) => u + i, 0), l = h.value.find((u) => u.uid === t).values.reduce((u, i) => u + i, 0);
let o = l;
if (!(l === 0 && a === 0)) {
if (p.value.includes(t)) {
let i = function() {
o > u ? (cancelAnimationFrame(Fe.value), h.value = h.value.map((y, w) => y.uid === t ? {
...y,
values: [u]
} : y), V.value = !1) : (V.value = !0, o += u * 0.025, h.value = h.value.map((y, w) => y.uid === t ? {
...y,
values: [o]
} : y), Fe.value = requestAnimationFrame(i));
};
p.value = p.value.filter((y) => y !== t);
const u = a;
i();
} else if (p.value.length < G.value.length - 1 && G.value.length > 1) {
let u = function() {
o < l / 100 ? (cancelAnimationFrame(Le.value), p.value.push(t), h.value = h.value.map((i, y) => i.uid === t ? {
...i,
values: [0]
} : i), V.value = !1) : (V.value = !0, o /= 1.15, h.value = h.value.map((i) => i.uid === t ? {
...i,
values: [o]
} : i), Le.value = requestAnimationFrame(u));
};
u();
}
dt("selectLegend", J.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 G = d(() => h.value.map((t, a) => ({
name: t.name,
color: t.color || Pe[a] || R[a] || R[a % R.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: p.value.includes(t.uid) ? 0.5 : 1,
segregate: () => ze(t.uid),
isSegregated: p.value.includes(t.uid)
}))), vt = d(() => ({
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" : ""
})), P = d(() => J.value.map((t) => t.value).reduce((t, a) => t + a, 0)), re = c(null);
function ct(t) {
if (p.value.length === b.dataset.length) return;
const a = n.value[t];
re.value = {
datapoint: a,
seriesIndex: a.absoluteIndex,
series: h.value,
config: e.value
}, ae.value = !0, D.value = n.value[t].serieIndex;
const l = e.value.style.chart.tooltip.customFormat;
if (zt(l) && Nt(() => l({
seriesIndex: n.value[t].absoluteIndex,
datapoint: a,
series: h.value,
config: e.value
})))
oe.value = l({
seriesIndex: n.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}" />${lt.pattern ? `<rect x="0" y="0" height="60" width="60" stroke="none" rx="1" stroke="none" fill="url(#pattern_${k.value}_${a.absoluteIndex})"/>` : ""}</svg>`, e.value.style.chart.tooltip.showValue && (o += `<b>${H(
e.value.style.chart.layout.labels.dataLabels.formatter,
a.value,
_({
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: n.value[t].absoluteIndex,
series: h.value
}
)}</b>`), e.value.style.chart.tooltip.showPercentage) {
const u = _({
v: Y.value ? 1 / b.dataset.length * 100 : a.value / P.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 dt = He, O = d(() => {
const t = J.value.map((l) => ({
name: l.name,
color: l.color
})), a = J.value.map((l) => l.value);
return { head: t, body: a };
});
function ee(t) {
return e.value.useBlurOnHover && ![null, void 0].includes(D.value) && D.value !== t ? `url(#blur_${k.value})` : "";
}
function Ne(t = null) {
mt(() => {
const a = O.value.head.map((u, i) => [[
u.name
], [O.value.body[i]], [isNaN(O.value.body[i] / P.value) ? "-" : O.value.body[i] / P.value * 100]]), l = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [[""], ["val"], ["%"]]].concat(a), o = Ft(l);
t ? t(o) : Lt({ csvContent: o, title: e.value.style.chart.title.text || "vue-ui-waffle" });
});
}
const te = d(() => {
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>',
H(
e.value.style.chart.layout.labels.dataLabels.formatter,
P.value,
_({
p: e.value.style.chart.layout.labels.dataLabels.prefix,
v: P.value,
s: e.value.style.chart.layout.labels.dataLabels.suffix,
r: e.value.table.td.roundingValue
})
),
"100%"
], a = O.value.head.map((u, i) => [
{
color: u.color,
name: u.name
},
H(
e.value.style.chart.layout.labels.dataLabels.formatter,
O.value.body[i],
_({
p: e.value.style.chart.layout.labels.dataLabels.prefix,
v: O.value.body[i],
s: e.value.style.chart.layout.labels.dataLabels.suffix,
r: e.value.table.td.roundingValue
})
),
isNaN(O.value.body[i] / P.value) ? "-" : _({
v: O.value.body[i] / P.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
};
}), j = c(!1);
function Ve(t) {
j.value = t, de.value += 1;
}
function Be() {
C.value.showTable = !C.value.showTable;
}
function Me() {
C.value.showTooltip = !C.value.showTooltip;
}
const le = c(!1);
function ne() {
le.value = !le.value;
}
async function ht({ scale: t = 2 } = {}) {
if (!F.value) return;
const { width: a, height: l } = F.value.getBoundingClientRect(), o = a / l, { imageUri: u, base64: i } = await jt({ domElement: F.value, base64: !0, img: !0, scale: t });
return {
imageUri: u,
base64: i,
title: e.value.style.chart.title.text,
width: a,
height: l,
aspectRatio: o
};
}
return qe({
getData: nt,
getImage: ht,
generatePdf: Te,
generateCsv: Ne,
generateImage: Se,
toggleTable: Be,
toggleTooltip: Me,
toggleAnnotator: ne,
toggleFullscreen: Ve
}), (t, a) => (s(), v("div", {
class: Ue(`vue-ui-waffle ${j.value ? "vue-data-ui-wrapper-fullscreen" : ""}`),
ref_key: "waffleChart",
ref: F,
id: `vue-ui-waffle_${k.value}`,
style: K(`font-family:${e.value.style.fontFamily};width:100%; text-align:center;background:${e.value.style.chart.backgroundColor};${e.value.responsive ? "height: 100%" : ""}`),
onMouseenter: a[3] || (a[3] = () => r(we)(!0)),
onMouseleave: a[4] || (a[4] = () => r(we)(!1))
}, [
e.value.userOptions.buttons.annotator ? (s(), M(r(Ye), {
key: 0,
svgRef: r(xe),
backgroundColor: e.value.style.chart.backgroundColor,
color: e.value.style.chart.color,
active: le.value,
onClose: ne
}, null, 8, ["svgRef", "backgroundColor", "color", "active"])) : f("", !0),
ot.value ? (s(), v("div", {
key: 1,
ref_key: "noTitle",
ref: ye,
class: "vue-data-ui-no-title-space",
style: "height:36px; width: 100%;background:transparent"
}, null, 512)) : f("", !0),
e.value.style.chart.title.text ? (s(), v("div", {
key: 2,
ref_key: "chartTitle",
ref: he,
style: "width:100%;background:transparent;padding-bottom:12px"
}, [
(s(), M(Ut, {
key: `title_${ge.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)) : f("", !0),
e.value.userOptions.show && Q.value && (r(ke) || r(ue)) ? (s(), M(r(Ze), {
ref_key: "details",
ref: at,
key: `user_options_${de.value}`,
backgroundColor: e.value.style.chart.backgroundColor,
color: e.value.style.chart.color,
isPrinting: r(_e),
isImaging: r(Ie),
uid: k.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: j.value,
isTooltip: C.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,
onToggleFullscreen: Ve,
onGeneratePdf: r(Te),
onGenerateCsv: Ne,
onGenerateImage: r(Se),
onToggleTable: Be,
onToggleTooltip: Me,
onToggleAnnotator: ne,
style: K({
visibility: r(ke) ? r(ue) ? "visible" : "hidden" : "visible"
})
}, Ee({ _: 2 }, [
t.$slots.menuIcon ? {
name: "menuIcon",
fn: m(({ isOpen: l, color: o }) => [
g(t.$slots, "menuIcon", W(q({ isOpen: l, color: o })), void 0, !0)
]),
key: "0"
} : void 0,
t.$slots.optionTooltip ? {
name: "optionTooltip",
fn: m(() => [
g(t.$slots, "optionTooltip", {}, void 0, !0)
]),
key: "1"
} : void 0,
t.$slots.optionPdf ? {
name: "optionPdf",
fn: m(() => [
g(t.$slots, "optionPdf", {}, void 0, !0)
]),
key: "2"
} : void 0,
t.$slots.optionCsv ? {
name: "optionCsv",
fn: m(() => [
g(t.$slots, "optionCsv", {}, void 0, !0)
]),
key: "3"
} : void 0,
t.$slots.optionImg ? {
name: "optionImg",
fn: m(() => [
g(t.$slots, "optionImg", {}, void 0, !0)
]),
key: "4"
} : void 0,
t.$slots.optionTable ? {
name: "optionTable",
fn: m(() => [
g(t.$slots, "optionTable", {}, void 0, !0)
]),
key: "5"
} : void 0,
t.$slots.optionFullscreen ? {
name: "optionFullscreen",
fn: m(({ toggleFullscreen: l, isFullscreen: o }) => [
g(t.$slots, "optionFullscreen", W(q({ toggleFullscreen: l, isFullscreen: o })), void 0, !0)
]),
key: "6"
} : void 0,
t.$slots.optionAnnotator ? {
name: "optionAnnotator",
fn: m(({ toggleAnnotator: l, isAnnotator: o }) => [
g(t.$slots, "optionAnnotator", W(q({ 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"])) : f("", !0),
Q.value ? (s(), v("svg", {
key: 4,
ref_key: "svgRef",
ref: xe,
xmlns: r(It),
class: Ue({ "vue-data-ui-fullscreen--on": j.value, "vue-data-ui-fulscreen--off": !j.value }),
viewBox: `0 0 ${N.value.width <= 0 ? 10 : N.value.width} ${N.value.height <= 0 ? 10 : N.value.height}`,
style: K(`max-width:100%;overflow:visible;background:transparent;color:${e.value.style.chart.color}`)
}, [
ve(r(et)),
x("defs", null, [
(s(!0), v($, null, z(n.value, (l, o) => (s(), v("radialGradient", {
cx: "50%",
cy: "50%",
r: "50%",
fx: "50%",
fy: "50%",
id: `gradient_${k.value}_${o}`
}, [
x("stop", {
offset: "0%",
"stop-color": r(Tt)(r(St)(l.color, 0.05), 100 - e.value.style.chart.layout.rect.gradientIntensity)
}, null, 8, Yt),
x("stop", {
offset: "100%",
"stop-color": l.color
}, null, 8, Jt)
], 8, Xt))), 256))
]),
x("defs", null, [
x("filter", {
id: `blur_${k.value}`,
x: "-50%",
y: "-50%",
width: "200%",
height: "200%"
}, a[5] || (a[5] = [
x("feGaussianBlur", {
in: "SourceGraphic",
stdDeviation: 2
}, null, -1),
x("feColorMatrix", {
type: "saturate",
values: "0"
}, null, -1)
]), 8, Kt)
]),
e.value.useCustomCells && n.value.length ? (s(!0), v($, { key: 0 }, z(E.value, (l, o) => (s(), v("foreignObject", {
x: l.x,
y: l.y,
height: S.value <= 0 ? 1e-4 : S.value,
width: T.value <= 0 ? 1e-4 : T.value,
class: "vue-ui-waffle-custom-cell-foreignObject"
}, [
g(t.$slots, "cell", Ge({ ref_for: !0 }, { cell: { ...l, color: n.value[o].color, ...n.value[o] }, isSelected: [null, void 0].includes(D.value) ? !0 : n.value[o].serieIndex === D.value }), void 0, !0)
], 8, Qt))), 256)) : f("", !0),
!n.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, Zt)) : n.value.length && !e.value.useCustomCells ? (s(), v($, { key: 2 }, [
t.$slots.pattern ? (s(), v("g", el, [
(s(!0), v($, null, z(se.value, (l) => (s(), v("defs", null, [
g(t.$slots, "pattern", Ge({ ref_for: !0 }, { seriesIndex: l.absoluteIndex, patternId: `pattern_${k.value}_${l.absoluteIndex}` }), void 0, !0)
]))), 256))
])) : f("", !0),
(s(!0), v($, null, z(E.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: S.value <= 0 ? 1e-4 : S.value,
width: T.value <= 0 ? 1e-4 : T.value,
fill: "white",
stroke: e.value.style.chart.layout.rect.stroke,
"stroke-width": e.value.style.chart.layout.rect.strokeWidth,
filter: ee(n.value[o].serieIndex)
}, null, 8, tl))), 256)),
(s(!0), v($, null, z(E.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: S.value <= 0 ? 1e-4 : S.value,
width: T.value <= 0 ? 1e-4 : T.value,
fill: e.value.style.chart.layout.rect.useGradient && e.value.style.chart.layout.rect.gradientIntensity > 0 ? `url(#gradient_${k.value}_${o})` : n.value[o].color,
stroke: e.value.style.chart.layout.rect.stroke,
"stroke-width": e.value.style.chart.layout.rect.strokeWidth,
filter: ee(n.value[o].serieIndex)
}, null, 8, ll))), 256)),
t.$slots.pattern ? (s(), v("g", al, [
(s(!0), v($, null, z(E.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: S.value <= 0 ? 1e-4 : S.value,
width: T.value <= 0 ? 1e-4 : T.value,
fill: `url(#pattern_${k.value}_${n.value[o].absoluteIndex})`,
stroke: "none",
filter: ee(n.value[o].serieIndex)
}, null, 8, ol))), 256))
])) : f("", !0)
], 64)) : f("", !0),
(s(!0), v($, null, z(E.value, (l, o) => (s(), v($, null, [
n.value.length && !V.value && !e.value.style.chart.layout.grid.vertical && e.value.style.chart.layout.labels.captions.show && (n.value[o].isFirst && l.position < e.value.style.chart.layout.grid.size - 2 || n.value[o].isAbsoluteFirst && o % e.value.style.chart.layout.grid.size === 0 && n.value[o].absoluteStartIndex) ? (s(), v("foreignObject", {
key: 0,
x: l.x + e.value.style.chart.layout.labels.captions.offsetX + e.value.style.chart.layout.grid.spaceBetween / 2,
y: l.y + e.value.style.chart.layout.labels.captions.offsetY + e.value.style.chart.layout.grid.spaceBetween / 2,
height: Z.value <= 0 ? 1e-4 : Z.value,
width: X.value * e.value.style.chart.layout.grid.size <= 0 ? 1e-4 : X.value * e.value.style.chart.layout.grid.size,
filter: ee(n.value[o].serieIndex)
}, [
x("div", {
class: "vue-ui-waffle-caption",
style: K(`height: 100%; width: 100%; font-size:${e.value.style.chart.layout.labels.captions.fontSize}px;display:flex;align-items:center;justify-content:flex-start;padding: 0 ${X.value / 12}px;color:${r(Pt)(n.value[o].color)};gap:2px`)
}, [
e.value.style.chart.layout.labels.captions.showSerieName ? (s(), v("span", sl, A(e.value.style.chart.layout.labels.captions.serieNameAbbreviation ? r(Ot)({ source: n.value[o].name, length: e.value.style.chart.layout.labels.captions.serieNameMaxAbbreviationSize }) : n.value[o].name) + ": ", 1)) : f("", !0),
e.value.style.chart.layout.labels.captions.showPercentage ? (s(), v("span", rl, A(r(_)({ v: n.value[o].proportion, s: "%", r: e.value.style.chart.layout.labels.captions.roundingPercentage })), 1)) : f("", !0),
e.value.style.chart.layout.labels.captions.showPercentage && e.value.style.chart.layout.labels.captions.showValue ? (s(), v("span", nl, " (" + A(r(H)(
e.value.style.chart.layout.labels.dataLabels.formatter,
n.value[o].value,
r(_)({
p: e.value.style.chart.layout.labels.dataLabels.prefix,
v: n.value[o].value,
s: e.value.style.chart.layout.labels.dataLabels.suffix,
r: e.value.style.chart.layout.labels.captions.roundingValue
}),
{ datapoint: n.value[o], position: l }
)) + ") ", 1)) : f("", !0),
!e.value.style.chart.layout.labels.captions.showPercentage && e.value.style.chart.layout.labels.captions.showValue ? (s(), v("span", il, A(r(H)(
e.value.style.chart.layout.labels.dataLabels.formatter,
n.value[o].value,
r(_)({
p: e.value.style.chart.layout.labels.dataLabels.prefix,
v: n.value[o].value,
s: e.value.style.chart.layout.labels.dataLabels.suffix,
r: e.value.style.chart.layout.labels.captions.roundingValue
}),
{ datapoint: n.value[o], position: l }
)), 1)) : f("", !0)
], 4)
], 8, ul)) : f("", !0)
], 64))), 256)),
(s(!0), v($, null, z(E.value, (l, o) => (s(), v("rect", {
onMouseover: (u) => ct(o),
onMouseleave: a[0] || (a[0] = (u) => {
ae.value = !1, D.value = null;
}),
x: l.x + e.value.style.chart.layout.grid.spaceBetween / 2,
y: l.y + e.value.style.chart.layout.grid.spaceBetween / 2,
height: Z.value <= 0 ? 1e-4 : Z.value,
width: X.value <= 0 ? 1e-4 : X.value,
fill: "transparent",
stroke: "none"
}, null, 40, vl))), 256)),
g(t.$slots, "svg", { svg: N.value }, void 0, !0)
], 14, Ht)) : f("", !0),
t.$slots.watermark ? (s(), v("div", cl, [
g(t.$slots, "watermark", W(q({ isPrinting: r(_e) || r(Ie) })), void 0, !0)
])) : f("", !0),
Q.value ? f("", !0) : (s(), M(r(Ke), {
key: 6,
config: {
type: "waffle",
style: {
backgroundColor: e.value.style.chart.backgroundColor,
waffle: {
color: "#CCCCCC"
}
}
}
}, null, 8, ["config"])),
x("div", {
ref_key: "chartLegend",
ref: pe
}, [
e.value.style.chart.legend.show ? (s(), M(Et, {
key: `legend_${be.value}`,
legendSet: G.value,
config: vt.value,
onClickMarker: a[1] || (a[1] = ({ legend: l }) => ze(l.uid))
}, Ee({
item: m(({ legend: l }) => [
x("div", {
onClick: (o) => l.segregate(),
style: K(`opacity:${p.value.includes(l.uid) ? 0.5 : 1}`)
}, A(l.name) + A(e.value.style.chart.legend.showPercentage || e.value.style.chart.legend.showValue ? ":" : "") + " " + A(e.value.style.chart.legend.showValue ? r(H)(
e.value.style.chart.layout.labels.dataLabels.formatter,
l.value,
r(_)({
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: V.value
}),
{ datapoint: l }
) : "") + " " + A(e.value.style.chart.legend.showPercentage ? p.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 / P.value) ? "-" : r(_)({ v: l.value / P.value * 100, s: "%", r: e.value.style.chart.legend.roundingPercentage, isAnimating: V.value })}${e.value.style.chart.legend.showValue ? ")" : ""}` : ""), 13, dl)
]),
_: 2
}, [
t.$slots.pattern ? {
name: "legend-pattern",
fn: m(({ legend: l, index: o }) => [
ve(Gt, {
shape: l.shape,
radius: 30,
stroke: "none",
plot: { x: 30, y: 30 },
fill: `url(#pattern_${k.value}_${o})`
}, null, 8, ["shape", "fill"])
]),
key: "0"
} : void 0
]), 1032, ["legendSet", "config"])) : g(t.$slots, "legend", {
key: 1,
legend: G.value
}, void 0, !0)
], 512),
t.$slots.source ? (s(), v("div", {
key: 7,
ref_key: "source",
ref: fe,
dir: "auto"
}, [
g(t.$slots, "source", {}, void 0, !0)
], 512)) : f("", !0),
ve(r(Qe), {
show: C.value.showTooltip && ae.value && p.value.length < b.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: 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: j.value
}, {
"tooltip-before": m(() => [
g(t.$slots, "tooltip-before", W(q({ ...re.value })), void 0, !0)
]),
"tooltip-after": m(() => [
g(t.$slots, "tooltip-after", W(q({ ...re.value })), void 0, !0)
]),
_: 3
}, 8, ["show", "backgroundColor", "color", "borderRadius", "borderColor", "borderWidth", "backgroundOpacity", "position", "offsetY", "parent", "content", "isCustom", "fontSize", "isFullscreen"]),
Q.value ? (s(), M(r(Je), {
key: 8,
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(), M(r(Xe), {
key: `table_${me.value}`,
colNames: te.value.colNames,
head: te.value.head,
body: te.value.body,
config: te.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[2] || (a[2] = (l) => C.value.showTable = !1)
}, {
th: m(({ th: l }) => [
x("div", {
innerHTML: l,
style: { display: "flex", "align-items": "center" }
}, null, 8, hl)
]),
td: m(({ td: l }) => [
gt(A(l.name || l), 1)
]),
_: 1
}, 8, ["colNames", "head", "body", "config", "title"]))
]),
_: 1
}, 8, ["config"])) : f("", !0)
], 46, qt));
}
}, Tl = /* @__PURE__ */ Wt(pl, [["__scopeId", "data-v-501a7164"]]);
export {
Tl as default
};