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