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