vue-data-ui-hq
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
927 lines (926 loc) • 41 kB
JavaScript
import { computed as p, ref as m, onMounted as ue, watch as Mt, openBlock as a, createElementBlock as s, normalizeClass as P, unref as t, normalizeStyle as q, createBlock as E, createCommentVNode as d, createSlots as ie, withCtx as F, renderSlot as S, normalizeProps as J, guardReactiveProps as Q, createVNode as ce, createElementVNode as h, Fragment as k, renderList as _, toDisplayString as b, withKeys as de, createTextVNode as Ht, nextTick as X } from "vue";
import { u as he, o as ye, e as Z, g as fe, c as Ut, t as ve, a as ge, p as tt, C as Wt, b as me, J as be, d as ht, D as Rt, m as yt, X as xe, s as G, E as pe, i as ft, f as et, j as Xt, k as lt, n as Gt, K as jt, q as ke, r as _e } from "./index-WrV3SAID.js";
import { _ as Ce } from "./Title-BR-xoRp4.js";
import { u as we, U as Le } from "./usePrinter-kVpf1iV8.js";
import { D as ze } from "./DataTable-DNPvKWC0.js";
import { L as Se } from "./Legend-7H4oi6Sq.js";
import $e from "./vue-ui-skeleton-Qec_XSRf.js";
import { S as Ae } from "./Slicer-B6THn4h_.js";
import Ne from "./vue-ui-accordion-BQCDXXDs.js";
import { u as Bt } from "./useNestedProp-Cj0kHD7k.js";
import { _ as Ie } from "./PackageVersion-1NslmM8M.js";
import { P as Fe } from "./PenAndPaper-BF1ZRVm3.js";
import { u as Pe } from "./useUserOptionState-BIvW1Kz7.js";
import { _ as Oe } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const Ee = ["id"], Te = ["xmlns", "viewBox"], De = ["x", "y", "width", "height"], Ve = ["id"], Me = ["stop-color"], He = ["stop-color"], Ue = ["id"], We = ["stop-color"], Re = ["stop-color"], Xe = ["stop-color"], Ge = { key: 1 }, je = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], Be = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], Ye = { key: 0 }, Ke = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], qe = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], Je = ["x", "y", "font-size", "fill", "font-weight"], Qe = ["text-anchor", "font-size", "fill", "transform"], Ze = ["x1", "y1", "x2", "y2", "stroke", "stroke-width"], tl = { key: 1 }, el = ["cx", "cy", "r", "fill"], ll = { key: 0 }, ol = { key: 0 }, al = ["d", "stroke"], sl = ["text-anchor", "x", "y", "fill"], nl = ["cx", "cy", "r", "fill"], rl = { key: 0 }, ul = ["cx", "cy", "fill"], il = { key: 1 }, cl = ["d", "fill", "stroke"], dl = { key: 2 }, hl = ["d", "fill", "stroke"], yl = ["x", "y", "font-size", "fill"], fl = ["x", "y", "width", "fill", "onClick"], vl = ["x", "y", "width", "height", "onMouseenter", "onClick"], gl = {
key: 4,
"data-cy-zoom": "",
class: "vue-ui-donut-evolution-dialog"
}, ml = ["x", "y", "width", "height", "fill"], bl = ["x1", "y1", "x2", "y2", "stroke"], xl = ["x1", "y2", "x2", "y1", "stroke"], pl = ["cx", "cy", "r"], kl = ["d", "stroke"], _l = ["cx", "cy", "r", "fill"], Cl = ["d", "fill", "stroke"], wl = { class: "vue-ui-donut-evolution-focus" }, Ll = ["text-anchor", "x", "y", "fill"], zl = ["cx", "cy", "r", "fill"], Sl = ["cx", "cy", "r", "fill"], $l = ["x", "y", "fill"], Al = ["x", "y", "font-size", "fill"], Nl = {
key: 5,
class: "vue-data-ui-watermark"
}, Il = ["onClick"], Fl = { key: 0 }, Pl = { key: 1 }, Ol = {
key: 9,
ref: "source",
dir: "auto"
}, El = { key: 0 }, Tl = { key: 1 }, Dl = {
__name: "vue-ui-donut-evolution",
props: {
config: {
type: Object,
default() {
return {};
}
},
dataset: {
type: Array,
default() {
return [];
}
}
},
emits: ["selectLegend"],
setup(Yt, { expose: Kt, emit: qt }) {
const { vue_ui_donut_evolution: Jt } = he(), x = Yt, j = p(() => !!x.dataset && x.dataset.length), y = m({
start: 0,
end: Math.max(...x.dataset.map((o) => o.values.length))
});
function vt() {
gt();
}
const V = m(null);
async function gt() {
(e.value.style.chart.zoom.startIndex !== null || e.value.style.chart.zoom.endIndex !== null) && V.value ? (e.value.style.chart.zoom.startIndex !== null && (await X(), await X(), V.value && V.value.setStartValue(e.value.style.chart.zoom.startIndex)), e.value.style.chart.zoom.endIndex !== null && (await X(), await X(), V.value && V.value.setEndValue(Qt(e.value.style.chart.zoom.endIndex + 1)))) : (y.value = {
start: 0,
end: D.value
}, xt.value += 1);
}
function Qt(o) {
const n = D.value;
return o > n ? n : o < 0 || e.value.style.chart.zoom.startIndex !== null && o < e.value.style.chart.zoom.startIndex ? e.value.style.chart.zoom.startIndex !== null ? e.value.style.chart.zoom.startIndex + 1 : 1 : o;
}
ue(() => {
mt();
});
function mt() {
ye(x.dataset) ? Z({
componentName: "VueUiDonutEvolution",
type: "dataset"
}) : x.dataset.length && x.dataset.forEach((o, n) => {
fe({
datasetObject: o,
requiredAttributes: ["name", "values"]
}).forEach((l) => {
Z({
componentName: "VueUiDonutEvolution",
type: "datasetSerieAttribute",
property: l,
index: n
});
});
}), gt();
}
const T = m(Ut()), C = m([]), g = m(null), ot = m(null), $ = m(!1), A = m(null), at = m(null), Zt = m(null), bt = m(0), xt = m(0), pt = m(0), kt = m(0), _t = m(0), Ct = qt, e = p({
get: () => zt(),
set: (o) => o
}), { userOptionsVisible: st, setUserOptionsVisibility: wt, keepUserOptionState: Lt } = Pe({ config: e.value });
function zt() {
const o = Bt({
userConfig: x.config,
defaultConfig: Jt
});
let n = {};
return o.theme ? n = {
...Bt({
userConfig: ve.vue_ui_donut_evolution[o.theme] || x.config,
defaultConfig: o
}),
customPalette: ge[o.theme] || tt
} : n = o, x.config && Wt(x.config, "style.chart.zoom.startIndex") ? n.style.chart.zoom.startIndex = x.config.style.chart.zoom.startIndex : n.style.chart.zoom.startIndex = null, x.config && Wt(x.config, "style.chart.zoom.endIndex") ? n.style.chart.zoom.endIndex = x.config.style.chart.zoom.endIndex : n.style.chart.zoom.endIndex = null, n;
}
Mt(() => x.config, (o) => {
e.value = zt(), st.value = !e.value.showOnChartHover, mt(), pt.value += 1, kt.value += 1, _t.value += 1;
}, { deep: !0 }), Mt(() => x.dataset, (o) => {
vt();
}, { deep: !0 });
const { isPrinting: St, isImaging: $t, generatePdf: At, generateImage: Nt } = we({
elementId: T.value,
fileName: e.value.style.chart.title.text || "vue-ui-donut-evolution"
}), te = p(() => e.value.userOptions.show && !e.value.style.chart.title.text), ee = p(() => me(e.value.customPalette)), B = m({
showTable: e.value.table.show
}), u = p(() => ({
top: e.value.style.chart.layout.padding.top,
right: e.value.style.chart.layout.padding.right,
bottom: e.value.style.chart.layout.padding.bottom,
left: e.value.style.chart.layout.padding.left
})), i = p(() => {
const o = e.value.style.chart.layout.height, n = e.value.style.chart.layout.width, l = o - u.value.top - u.value.bottom, c = n - u.value.left - u.value.right;
return {
absoluteHeight: o,
absoluteWidth: n,
centerX: u.value.left + c / 2,
centerY: u.value.top + l / 2,
height: l,
width: c
};
}), O = p(() => (x.dataset.forEach((o, n) => {
[null, void 0].includes(o.name) && Z({
componentName: "VueUiDonutEvolution",
type: "datasetSerieAttribute",
property: "name",
index: n
}), [null, void 0].includes(o.values) && Z({
componentName: "VueUiDonutEvolution",
type: "datasetSerieAttribute",
property: "values",
index: n
});
}), x.dataset.map((o, n) => ({
...o,
values: be(o.values),
color: ht(o.color) || ee.value[n] || tt[n] || tt[n % tt.length],
length: (o.values || []).length,
uid: Ut()
})))), W = p(() => O.value.filter((o) => !C.value.includes(o.uid)).map((o) => ({
...o,
values: o.values.filter((n, l) => l >= y.value.start && l <= y.value.end)
}))), D = p(() => Math.max(...W.value.map((o) => o.length))), L = p(() => i.value.width / (y.value.end - y.value.start)), w = p(() => {
const o = [];
for (let r = 0; r < y.value.end - y.value.start; r += 1) {
const v = W.value.map((I) => I.values[r] ?? null), f = v.filter((I) => [void 0, null].includes(I)).length === v.length, N = v.reduce((I, z) => I + z, 0), dt = v.map((I) => I / N), U = u.value.left + L.value * r + L.value / 2;
o.push({
index: r,
percentages: dt,
subtotal: f || N < 0 ? null : N,
values: v,
x: U
});
}
const n = 0, l = Math.max(...o.map((r) => r.subtotal)), c = o.length === 1 ? l * 2 : l;
return o.map((r, v) => {
const f = L.value / 2 * 0.7, N = f > i.value.width / 16 ? i.value.width / 16 : f, dt = g.value === r.index ? i.value.width / 16 : N, U = o.length > 4 ? f * 2 : f * 2 > L.value / 2 * 0.7 ? L.value / 2 * 0.7 : f * 2, I = i.value.absoluteHeight - u.value.bottom - i.value.height * r.subtotal / Rt(n, c, e.value.style.chart.layout.grid.yAxis.dataLabels.steps).max;
return {
...r,
y: I,
radius: N,
activeRadius: dt,
hoverRadius: U,
donut: yt({
series: W.value.map((z, Vt) => ({
color: z.color,
name: z.name,
value: z.values[v] ?? 0
}))
}, r.x, I, N, N, 1.99999, 2, 1, 360, 105.25, N / 2),
donutHover: yt({
series: W.value.map((z, Vt) => ({
color: z.color,
name: z.name,
value: z.values[v] ?? 0
}))
}, r.x, I, U, U, 1.99999, 2, 1, 360, 105.25, U / 2),
donutFocus: yt({
series: W.value.map((z, Vt) => ({
color: z.color,
name: z.name,
value: z.values[v] ?? 0
}))
}, i.value.centerX, i.value.centerY, i.value.height / 3.6, i.value.height / 3.6, 1.99999, 2, 1, 360, 105.25, i.value.height / 6)
};
});
});
function Y(o, n, l) {
return ft(
e.value.style.chart.layout.dataLabels.formatter,
o,
et({
p: e.value.style.chart.layout.dataLabels.prefix,
v: o,
s: e.value.style.chart.layout.dataLabels.suffix,
r: e.value.style.chart.layout.dataLabels.rounding
}),
{ datapoint: n, index: l }
);
}
const nt = p(() => ({
max: Math.max(...w.value.map((o) => o.subtotal)),
min: 0
})), M = p(() => {
const o = w.value.length === 1 ? nt.value.max * 2 : nt.value.max;
return Rt(nt.value.min, o, e.value.style.chart.layout.grid.yAxis.dataLabels.steps);
});
function le(o) {
return o / M.value.max;
}
const oe = p(() => M.value.ticks.map((o) => ({
y: i.value.absoluteHeight - u.value.bottom - i.value.height * le(o),
value: o
})));
function It(o, n) {
return isNaN(o.value / jt(n, "value")) ? 0 : (o.value / jt(n, "value") * 100).toFixed(0) + "%";
}
function Ft() {
$.value || (g.value = null, ot.value = null);
}
function ae(o) {
$.value || (g.value = o.index, ot.value = o);
}
const rt = m(null);
function ut(o, n) {
o.subtotal && (ot.value = null, g.value = null, $.value = !0, A.value = o, [null, void 0].includes(n) || (rt.value = n));
}
function Pt() {
A.value = null, $.value = !1, rt.value = null;
}
const Ot = p(() => O.value.map((o, n) => ({
name: o.name,
value: o.values.slice(y.value.start, y.value.end).reduce((l, c) => l + c, 0),
shape: "circle",
uid: o.uid,
color: o.color
})).sort((o, n) => n.value - o.value).map((o) => ({
...o,
opacity: C.value.includes(o.uid) ? 0.5 : 1,
segregate: () => it(o.uid),
isSegregated: C.value.includes(o.uid)
}))), Et = p(() => w.value.map((o) => o.subtotal).reduce((o, n) => o + n, 0)), se = p(() => ({
cy: "donut-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" : ""
}));
function it(o) {
if (C.value.includes(o))
C.value = C.value.filter((n) => n !== o), Ct("selectLegend", null);
else {
if (C.value.length === O.value.length - 1) return;
C.value.push(o), Ct("selectLegend", O.value.find((n) => n.uid === o));
}
A.value && ut(w.value.find((n, l) => l === rt.value));
}
const H = p(() => {
const o = [""].concat(O.value.filter((r) => !C.value.includes(r.uid)).map((r) => ({
name: r.name,
color: r.color
}))).concat(["Σ"]);
let n = [];
for (let r = 0; r < D.value; r += 1) {
const v = O.value.filter((f) => !C.value.includes(f.uid)).map((f) => f.values[r] ?? 0).reduce((f, N) => f + N, 0);
n.push([e.value.style.chart.layout.grid.xAxis.dataLabels.values[r] ?? "-"].concat(O.value.filter((f) => !C.value.includes(f.uid)).map((f) => ({
value: f.values[r] ?? 0,
percentage: f.values[r] ? f.values[r] / v * 100 : 0
}))).concat([`${e.value.style.chart.layout.dataLabels.prefix}${Number(v.toFixed(e.value.table.td.roundingValue))}${e.value.style.chart.layout.dataLabels.suffix}`]));
}
const 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
},
breakpoint: e.value.table.responsiveBreakpoint
}, c = [
e.value.table.columnNames.period
].concat(O.value.filter((r) => !C.value.includes(r.uid)).map((r) => r.name)).concat(e.value.table.columnNames.total);
return { head: o, body: n, config: l, colNames: c };
});
function ne() {
return O.value;
}
function Tt() {
X(() => {
const o = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [""]], n = [...H.value.head.map((v) => v.name ?? v)], l = [...H.value.body.map((v) => v.map((f) => f.value ?? f))], c = o.concat([n]).concat(l), r = ke(c);
_e({ csvContent: r, title: e.value.style.chart.title.text || "vue-ui-donut-evolution" });
});
}
const R = m(!1);
function re(o) {
R.value = o, bt.value += 1;
}
function Dt() {
B.value.showTable = !B.value.showTable;
}
const K = m(!1);
function ct() {
K.value = !K.value;
}
return Kt({
getData: ne,
generatePdf: At,
generateCsv: Tt,
generateImage: Nt,
toggleTable: Dt,
toggleAnnotator: ct
}), (o, n) => (a(), s("div", {
ref_key: "donutEvolutionChart",
ref: at,
class: P(`vue-ui-donut-evolution ${t(R) ? "vue-data-ui-wrapper-fullscreen" : ""} ${t(e).useCssAnimation ? "" : "vue-ui-dna"}`),
style: q(`font-family:${t(e).style.fontFamily};width:100%; text-align:center;background:${t(e).style.chart.backgroundColor}`),
id: t(T),
onMouseenter: n[4] || (n[4] = () => t(wt)(!0)),
onMouseleave: n[5] || (n[5] = () => t(wt)(!1))
}, [
t(e).userOptions.buttons.annotator ? (a(), E(Fe, {
key: 0,
parent: t(at),
backgroundColor: t(e).style.chart.backgroundColor,
color: t(e).style.chart.color,
active: t(K),
onClose: ct
}, null, 8, ["parent", "backgroundColor", "color", "active"])) : d("", !0),
t(te) ? (a(), s("div", {
key: 1,
ref_key: "noTitle",
ref: Zt,
class: "vue-data-ui-no-title-space",
style: "height:36px; width: 100%;background:transparent"
}, null, 512)) : d("", !0),
t(e).style.chart.title.text ? (a(), s("div", {
key: 2,
style: "width:100%;background:transparent;padding-bottom:24px",
onMouseleave: Ft
}, [
(a(), E(Ce, {
key: `title_${t(pt)}`,
config: {
title: {
cy: "donut-evolution-div-title",
...t(e).style.chart.title
},
subtitle: {
cy: "donut-evolution-div-subtitle",
...t(e).style.chart.title.subtitle
}
}
}, null, 8, ["config"]))
], 32)) : d("", !0),
t(e).userOptions.show && t(j) && (t(Lt) || t(st)) ? (a(), E(Le, {
ref: "details",
key: `user_options_${t(bt)}`,
backgroundColor: t(e).style.chart.backgroundColor,
color: t(e).style.chart.color,
isPrinting: t(St),
isImaging: t($t),
uid: t(T),
hasPdf: t(e).userOptions.buttons.pdf,
hasImg: t(e).userOptions.buttons.img,
hasXls: t(e).userOptions.buttons.csv,
hasTable: t(e).userOptions.buttons.table,
hasFullscreen: t(e).userOptions.buttons.fullscreen,
isFullscreen: t(R),
titles: { ...t(e).userOptions.buttonTitles },
chartElement: t(at),
position: t(e).userOptions.position,
hasAnnotator: t(e).userOptions.buttons.annotator,
isAnnotation: t(K),
onToggleFullscreen: re,
onGeneratePdf: t(At),
onGenerateCsv: Tt,
onGenerateImage: t(Nt),
onToggleTable: Dt,
onToggleAnnotator: ct,
style: q({
visibility: t(Lt) ? t(st) ? "visible" : "hidden" : "visible"
})
}, ie({ _: 2 }, [
o.$slots.optionPdf ? {
name: "optionPdf",
fn: F(() => [
S(o.$slots, "optionPdf", {}, void 0, !0)
]),
key: "0"
} : void 0,
o.$slots.optionCsv ? {
name: "optionCsv",
fn: F(() => [
S(o.$slots, "optionCsv", {}, void 0, !0)
]),
key: "1"
} : void 0,
o.$slots.optionImg ? {
name: "optionImg",
fn: F(() => [
S(o.$slots, "optionImg", {}, void 0, !0)
]),
key: "2"
} : void 0,
o.$slots.optionTable ? {
name: "optionTable",
fn: F(() => [
S(o.$slots, "optionTable", {}, void 0, !0)
]),
key: "3"
} : void 0,
o.$slots.optionFullscreen ? {
name: "optionFullscreen",
fn: F(({ toggleFullscreen: l, isFullscreen: c }) => [
S(o.$slots, "optionFullscreen", J(Q({ toggleFullscreen: l, isFullscreen: c })), void 0, !0)
]),
key: "4"
} : void 0,
o.$slots.optionAnnotator ? {
name: "optionAnnotator",
fn: F(({ toggleAnnotator: l, isAnnotator: c }) => [
S(o.$slots, "optionAnnotator", J(Q({ toggleAnnotator: l, isAnnotator: c })), void 0, !0)
]),
key: "5"
} : void 0
]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasPdf", "hasImg", "hasXls", "hasTable", "hasFullscreen", "isFullscreen", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "onGeneratePdf", "onGenerateImage", "style"])) : d("", !0),
t(j) ? (a(), s("svg", {
key: 4,
xmlns: t(xe),
class: P({ "vue-data-ui-fullscreen--on": t(R), "vue-data-ui-fulscreen--off": !t(R) }),
viewBox: `0 0 ${t(i).absoluteWidth} ${t(i).absoluteHeight}`,
style: q(`max-width:100%; overflow: visible; background:transparent;color:${t(e).style.chart.color}`)
}, [
ce(Ie),
o.$slots["chart-background"] ? (a(), s("foreignObject", {
key: 0,
x: t(u).left,
y: t(u).top,
width: t(i).width,
height: t(i).height,
style: {
pointerEvents: "none"
}
}, [
S(o.$slots, "chart-background", {}, void 0, !0)
], 8, De)) : d("", !0),
h("defs", null, [
h("linearGradient", {
id: `hover_${t(T)}`,
x1: "0%",
y1: "0%",
x2: "0%",
y2: "100%"
}, [
h("stop", {
offset: "0%",
"stop-color": t(G)(t(e).style.chart.backgroundColor, t(e).style.chart.layout.highlighter.opacity)
}, null, 8, Me),
h("stop", {
offset: "100%",
"stop-color": t(G)(t(e).style.chart.layout.highlighter.color, t(e).style.chart.layout.highlighter.opacity)
}, null, 8, He)
], 8, Ve),
h("radialGradient", {
id: `focus_${t(T)}`
}, [
h("stop", {
offset: "0%",
"stop-color": t(G)(t(ht)(t(e).style.chart.backgroundColor), 0)
}, null, 8, We),
h("stop", {
offset: "77%",
"stop-color": t(G)("#FFFFFF", 30)
}, null, 8, Re),
h("stop", {
offset: "100%",
"stop-color": t(G)(t(ht)(t(e).style.chart.backgroundColor), 0)
}, null, 8, Xe)
], 8, Ue)
]),
t(e).style.chart.layout.grid.show ? (a(), s("g", Ge, [
h("line", {
x1: t(u).left,
x2: t(u).left,
y1: t(u).top,
y2: t(u).top + t(i).height,
stroke: t(e).style.chart.layout.grid.stroke,
"stroke-width": t(e).style.chart.layout.grid.strokeWidth,
"stroke-linecap": "round"
}, null, 8, je),
h("line", {
x1: t(u).left,
x2: t(i).absoluteWidth - t(u).right,
y1: t(i).absoluteHeight - t(u).bottom,
y2: t(i).absoluteHeight - t(u).bottom,
stroke: t(e).style.chart.layout.grid.stroke,
"stroke-width": t(e).style.chart.layout.grid.strokeWidth,
"stroke-linecap": "round"
}, null, 8, Be),
t(e).style.chart.layout.grid.showVerticalLines ? (a(), s("g", Ye, [
(a(!0), s(k, null, _(t(y).end - t(y).start, (l, c) => (a(), s("line", {
x1: t(u).left + (c + 1) * t(L),
x2: t(u).left + (c + 1) * t(L),
y1: t(u).top,
y2: t(i).absoluteHeight - t(u).bottom,
stroke: t(e).style.chart.layout.grid.stroke,
"stroke-width": t(e).style.chart.layout.grid.strokeWidth,
"stroke-linecap": "round"
}, null, 8, Ke))), 256))
])) : d("", !0)
])) : d("", !0),
t(e).style.chart.layout.grid.yAxis.dataLabels.show ? (a(), s("g", {
key: 2,
class: P({ "donut-opacity": !0, "donut-behind": t(g) !== null || t($) })
}, [
(a(!0), s(k, null, _(t(oe), (l, c) => (a(), s("g", null, [
l.value >= t(M).min && l.value <= t(M).max ? (a(), s("line", {
key: 0,
x1: t(u).left,
x2: t(u).left - 5,
y1: l.y,
y2: l.y,
stroke: t(e).style.chart.layout.grid.stroke,
"stroke-width": t(e).style.chart.layout.grid.strokeWidth
}, null, 8, qe)) : d("", !0),
l.value >= t(M).min && l.value <= t(M).max ? (a(), s("text", {
key: 1,
x: t(u).left - 8 + t(e).style.chart.layout.grid.yAxis.dataLabels.offsetX,
y: l.y + t(e).style.chart.layout.grid.yAxis.dataLabels.fontSize / 3,
"font-size": t(e).style.chart.layout.grid.yAxis.dataLabels.fontSize,
"text-anchor": "end",
fill: t(e).style.chart.layout.grid.yAxis.dataLabels.color,
"font-weight": t(e).style.chart.layout.grid.yAxis.dataLabels.bold ? "bold" : "normal"
}, b(t(pe)(l.value) ? t(ft)(
t(e).style.chart.layout.dataLabels.formatter,
l.value,
t(et)({
p: t(e).style.chart.layout.dataLabels.prefix,
v: l.value,
s: t(e).style.chart.layout.dataLabels.suffix,
r: t(e).style.chart.layout.grid.yAxis.dataLabels.roundingValue
}),
{ datapoint: l, seriesIndex: c }
) : ""), 9, Je)) : d("", !0)
]))), 256))
], 2)) : d("", !0),
t(e).style.chart.layout.grid.xAxis.dataLabels.show ? (a(), s("g", {
key: 3,
class: P({ "donut-opacity": !0, "donut-behind": t($) })
}, [
(a(!0), s(k, null, _(t(y).end - t(y).start, (l, c) => (a(), s("g", null, [
t(e).style.chart.layout.grid.xAxis.dataLabels.showOnlyFirstAndLast && (c === 0 || c === t(D) - 1) || !t(e).style.chart.layout.grid.xAxis.dataLabels.showOnlyFirstAndLast ? (a(), s("text", {
key: 0,
"text-anchor": t(e).style.chart.layout.grid.xAxis.dataLabels.rotation > 0 ? "start" : t(e).style.chart.layout.grid.xAxis.dataLabels.rotation < 0 ? "end" : "middle",
"font-size": t(e).style.chart.layout.grid.xAxis.dataLabels.fontSize,
fill: t(e).style.chart.layout.grid.xAxis.dataLabels.color,
transform: `translate(${t(u).left + t(L) * c + t(L) / 2}, ${t(e).style.chart.layout.grid.xAxis.dataLabels.offsetY + t(i).absoluteHeight - t(u).bottom + t(e).style.chart.layout.grid.xAxis.dataLabels.fontSize * 2}), rotate(${t(e).style.chart.layout.grid.xAxis.dataLabels.rotation})`
}, b(t(e).style.chart.layout.grid.xAxis.dataLabels.values[Number(c) + Number(t(y).start)] ?? ""), 9, Qe)) : d("", !0)
]))), 256))
], 2)) : d("", !0),
(a(!0), s(k, null, _(t(w), (l, c) => (a(), s("g", null, [
t(e).style.chart.layout.line.show && c < t(w).length - 1 && ![l.subtotal, t(w)[c + 1].subtotal].includes(null) ? (a(), s("line", {
key: 0,
class: P({ "donut-opacity": !0, "donut-behind": t(g) !== null || t($) }),
x1: l.x,
y1: l.y,
x2: t(w)[c + 1].x,
y2: t(w)[c + 1].y,
stroke: t(e).style.chart.layout.line.stroke,
"stroke-width": t(e).style.chart.layout.line.strokeWidth,
"stroke-linecap": "round",
"stroke-linejoin": "round"
}, null, 10, Ze)) : d("", !0),
l.subtotal !== null ? (a(), s("g", tl, [
l.subtotal ? (a(), s("circle", {
key: 0,
cx: l.x,
cy: l.y,
r: l.activeRadius,
fill: t(e).style.chart.backgroundColor
}, null, 8, el)) : d("", !0)
])) : d("", !0)
]))), 256)),
(a(!0), s(k, null, _(t(w), (l, c) => (a(), s("g", {
class: P({ "donut-opacity": !0, "donut-behind": c !== t(g) && t(g) !== null || t($) })
}, [
l.subtotal ? (a(), s("g", ll, [
t(g) !== null && t(g) === c ? (a(), s("g", ol, [
(a(!0), s(k, null, _(l.donutHover, (r) => (a(), s("g", null, [
h("path", {
d: t(Xt)(r, { x: r.center.endX, y: r.center.endY }, 12, 12, { x: l.x, y: l.y }, !0, 20),
stroke: r.color,
"stroke-width": "1",
"stroke-linecap": "round",
"stroke-linejoin": "round",
fill: "none"
}, null, 8, al)
]))), 256)),
(a(!0), s(k, null, _(l.donutHover, (r, v) => (a(), s("g", null, [
h("text", {
"data-cy-hover-label": "",
"text-anchor": t(lt)(r, !0, 0).anchor,
x: t(lt)(r, !0, 3).x,
y: t(Gt)(r),
fill: t(e).style.chart.layout.grid.yAxis.dataLabels.color,
"font-size": 8,
"font-weight": "bold"
}, b(r.name) + ": " + b(It(r, l.donut)) + " (" + b(r.value === null ? "-" : Y(r.value, r, v)) + ") ", 9, sl)
]))), 256)),
h("g", null, [
h("circle", {
cx: l.x,
cy: l.y,
r: l.hoverRadius,
fill: t(e).style.chart.backgroundColor
}, null, 8, nl)
])
])) : d("", !0)
])) : d("", !0)
], 2))), 256)),
(a(!0), s(k, null, _(t(w), (l, c) => (a(), s("g", {
class: P({ "donut-opacity": !0, "donut-behind": c !== t(g) && t(g) !== null || t($) })
}, [
l.subtotal !== null ? (a(), s("g", rl, [
l.subtotal === 0 ? (a(), s("circle", {
key: 0,
cx: l.x,
cy: l.y,
r: 3,
fill: t(e).style.chart.color
}, null, 8, ul)) : t(g) !== null && t(g) === c ? (a(), s("g", il, [
(a(!0), s(k, null, _(l.donutHover, (r, v) => (a(), s("path", {
d: r.arcSlice,
fill: `${r.color}`,
"stroke-width": 1,
stroke: t(e).style.chart.backgroundColor
}, null, 8, cl))), 256))
])) : (a(), s("g", dl, [
(a(!0), s(k, null, _(l.donut, (r, v) => (a(), s("path", {
d: r.arcSlice,
fill: `${r.color}`,
"stroke-width": 0.5,
stroke: t(e).style.chart.backgroundColor
}, null, 8, hl))), 256))
]))
])) : d("", !0)
], 2))), 256)),
(a(!0), s(k, null, _(t(w), (l, c) => (a(), s("g", {
class: P({ "donut-opacity": !0, "donut-behind": c !== t(g) && t(g) !== null || t($) })
}, [
l.subtotal !== null && t(e).style.chart.layout.dataLabels.show ? (a(), s("text", {
key: 0,
"text-anchor": "middle",
x: l.x,
y: t(g) === l.index && l.subtotal ? l.y + t(e).style.chart.layout.dataLabels.fontSize / 3 : l.y - l.radius - t(e).style.chart.layout.dataLabels.fontSize + t(e).style.chart.layout.dataLabels.offsetY,
"font-size": t(e).style.chart.layout.dataLabels.fontSize,
"font-weight": "bold",
fill: t(e).style.chart.layout.dataLabels.color
}, b(Y(l.subtotal, l, c)), 9, yl)) : d("", !0)
], 2))), 256)),
(a(!0), s(k, null, _(t(w), (l, c) => (a(), s("rect", {
x: t(u).left + c * t(L),
y: t(i).absoluteHeight - t(u).bottom - 10,
width: t(L),
height: 10,
fill: t(g) === l.index ? `url(#hover_${t(T)})` : "transparent",
onClick: (r) => ut(l, c),
class: P({ "donut-hover": t(g) === l.index && l.subtotal })
}, null, 10, fl))), 256)),
(a(!0), s(k, null, _(t(w), (l, c) => (a(), s("rect", {
"data-cy-trap": "",
x: t(u).left + c * t(L),
y: t(u).top,
width: t(L),
height: t(i).height,
fill: "transparent",
onMouseenter: (r) => ae(l),
onMouseleave: Ft,
onClick: (r) => ut(l, c),
class: P({ "donut-hover": t(g) === l.index && l.subtotal })
}, null, 42, vl))), 256)),
t($) ? (a(), s("g", gl, [
h("rect", {
rx: 4,
x: t(u).left,
y: t(u).top,
width: t(i).width,
height: t(i).height,
fill: t(e).style.chart.backgroundColor,
style: { filter: "drop-shadow(0 12px 12px rgba(0,0,0,0.3))" }
}, null, 8, ml),
h("line", {
"data-html2canvas-ignore": "",
x1: t(i).absoluteWidth - t(u).right - 15,
y1: t(u).top + 5,
x2: t(i).absoluteWidth - t(u).right - 4,
y2: t(u).top + 15.5,
"stroke-linecap": "round",
stroke: t(e).style.chart.color,
"stroke-width": "1.5"
}, null, 8, bl),
h("line", {
"data-html2canvas-ignore": "",
x1: t(i).absoluteWidth - t(u).right - 15,
y2: t(u).top + 5,
x2: t(i).absoluteWidth - t(u).right - 4,
y1: t(u).top + 15.5,
"stroke-linecap": "round",
stroke: t(e).style.chart.color,
"stroke-width": "1.5"
}, null, 8, xl),
h("circle", {
"data-cy-close": "",
onClick: Pt,
onKeypress: de(Pt, ["enter"]),
cx: t(i).absoluteWidth - t(u).right - t(i).width / 40,
cy: t(u).top + t(i).height / 30,
r: t(i).height / 12,
fill: "transparent",
style: { cursor: "pointer" },
tabindex: "0"
}, null, 40, pl),
(a(!0), s(k, null, _(t(A).donutFocus, (l) => (a(), s("g", null, [
h("path", {
"data-cy-zoom-donut": "",
d: t(Xt)(l, { x: t(i).centerX, y: t(i).centerY }, 12, 12, !1, !1, 15),
stroke: l.color,
"stroke-width": "1",
"stroke-linecap": "round",
"stroke-linejoin": "round",
fill: "none",
class: "vue-ui-donut-evolution-focus"
}, null, 8, kl)
]))), 256)),
h("circle", {
cx: t(u).left + t(i).width / 2,
cy: t(u).top + t(i).height / 2,
r: t(i).height / 7,
fill: t(e).style.chart.backgroundColor
}, null, 8, _l),
(a(!0), s(k, null, _(t(A).donutFocus, (l, c) => (a(), s("path", {
d: l.arcSlice,
fill: `${l.color}`,
"stroke-width": 1,
stroke: t(e).style.chart.backgroundColor,
class: "vue-ui-donut-evolution-focus"
}, null, 8, Cl))), 256)),
(a(!0), s(k, null, _(t(A).donutFocus, (l, c) => (a(), s("g", wl, [
h("text", {
"text-anchor": t(lt)(l, !0, 20).anchor,
x: t(lt)(l, !0, 10).x,
y: t(Gt)(l),
fill: t(e).style.chart.layout.grid.yAxis.dataLabels.color,
"font-size": 10,
"font-weight": "bold"
}, b(l.name) + ": " + b(It(l, t(A).donutFocus)) + " (" + b(l.value === null ? "-" : Y(l.value, l, c)) + ") ", 9, Ll)
]))), 256)),
h("circle", {
cx: t(u).left + t(i).width / 2,
cy: t(u).top + t(i).height / 2,
r: t(i).height / 3.8,
fill: `url(#focus_${t(T)})`
}, null, 8, zl),
h("circle", {
cx: t(u).left + t(i).width / 2,
cy: t(u).top + t(i).height / 2,
r: t(i).height / 7.7,
fill: t(e).style.chart.backgroundColor
}, null, 8, Sl),
h("text", {
"text-anchor": "middle",
x: t(u).left + t(i).width / 2,
y: t(u).top + t(i).height / 2 + 14 / 3,
"font-size": 14,
"font-weight": "bold",
fill: t(e).style.chart.layout.dataLabels.color,
class: "vue-ui-donut-evolution-focus"
}, b(Y(t(A).subtotal, t(A), null)), 9, $l),
t(e).style.chart.layout.grid.xAxis.dataLabels.values[t(A).index] ? (a(), s("text", {
key: 0,
x: t(u).left + 6,
y: t(u).top + t(e).style.chart.layout.grid.xAxis.dataLabels.fontSize * 2,
"font-size": t(e).style.chart.layout.grid.xAxis.dataLabels.fontSize * 1.6,
fill: t(e).style.chart.layout.dataLabels.color
}, b(t(e).style.chart.layout.grid.xAxis.dataLabels.values[Number(t(A).index) + Number(t(y).start)]), 9, Al)) : d("", !0)
])) : d("", !0),
S(o.$slots, "svg", { svg: t(i) }, void 0, !0)
], 14, Te)) : d("", !0),
o.$slots.watermark ? (a(), s("div", Nl, [
S(o.$slots, "watermark", J(Q({ isPrinting: t(St) || t($t) })), void 0, !0)
])) : d("", !0),
t(j) ? d("", !0) : (a(), E($e, {
key: 6,
config: {
type: "donutEvolution",
style: {
backgroundColor: t(e).style.chart.backgroundColor,
donutEvolution: {
axis: {
color: "#CCCCCC"
},
donuts: {
color: "#CCCCCC"
}
}
}
}
}, null, 8, ["config"])),
t(D) > 1 && t(e).style.chart.zoom.show ? (a(), E(Ae, {
ref_key: "slicerComponent",
ref: V,
key: `slicer_${t(xt)}`,
background: t(e).style.chart.zoom.color,
borderColor: t(e).style.chart.backgroundColor,
fontSize: t(e).style.chart.zoom.fontSize,
useResetSlot: t(e).style.chart.zoom.useResetSlot,
labelLeft: t(e).style.chart.layout.grid.xAxis.dataLabels.values[Number(t(y).start)] || "",
labelRight: t(e).style.chart.layout.grid.xAxis.dataLabels.values[Number(t(y).end) - 1] || "",
textColor: t(e).style.chart.color,
inputColor: t(e).style.chart.zoom.color,
selectColor: t(e).style.chart.zoom.highlightColor,
max: t(D),
min: 0,
valueStart: t(y).start,
valueEnd: t(y).end,
start: t(y).start,
"onUpdate:start": n[0] || (n[0] = (l) => t(y).start = l),
end: t(y).end,
"onUpdate:end": n[1] || (n[1] = (l) => t(y).end = l),
refreshStartPoint: t(e).style.chart.zoom.startIndex !== null ? t(e).style.chart.zoom.startIndex : 0,
refreshEndPoint: t(e).style.chart.zoom.endIndex !== null ? t(e).style.chart.zoom.endIndex + 1 : t(D),
onReset: vt
}, {
"reset-action": F(({ reset: l }) => [
S(o.$slots, "reset-action", J(Q({ reset: l })), void 0, !0)
]),
_: 3
}, 8, ["background", "borderColor", "fontSize", "useResetSlot", "labelLeft", "labelRight", "textColor", "inputColor", "selectColor", "max", "valueStart", "valueEnd", "start", "end", "refreshStartPoint", "refreshEndPoint"])) : d("", !0),
t(e).style.chart.legend.show ? (a(), E(Se, {
key: `legend_${t(_t)}`,
legendSet: t(Ot),
config: t(se),
onClickMarker: n[2] || (n[2] = ({ legend: l }) => it(l.uid))
}, {
item: F(({ legend: l, index: c }) => [
h("div", {
"data-cy-legend-item": "",
onClick: (r) => it(l.uid),
style: q(`opacity:${t(C).includes(l.uid) ? 0.5 : 1}`)
}, [
Ht(b(l.name) + ": " + b(t(ft)(
t(e).style.chart.layout.dataLabels.formatter,
l.value,
t(et)({
p: t(e).style.chart.layout.dataLabels.prefix,
v: l.value,
s: t(e).style.chart.layout.dataLabels.suffix,
r: t(e).style.chart.legend.roundingValue
}),
{ datapoint: l, seriesIndex: c }
)) + " ", 1),
t(C).includes(l.uid) ? (a(), s("span", Pl, " ( - % ) ")) : (a(), s("span", Fl, " (" + b(isNaN(l.value / t(Et)) ? "-" : t(et)({
v: l.value / t(Et) * 100,
s: "%",
r: t(e).style.chart.legend.roundingPercentage
})) + ") ", 1))
], 12, Il)
]),
_: 1
}, 8, ["legendSet", "config"])) : d("", !0),
S(o.$slots, "legend", { legend: t(Ot) }, void 0, !0),
o.$slots.source ? (a(), s("div", Ol, [
S(o.$slots, "source", {}, void 0, !0)
], 512)) : d("", !0),
t(j) ? (a(), E(Ne, {
key: 10,
hideDetails: "",
config: {
open: t(B).showTable,
maxHeight: 1e4,
body: {
backgroundColor: t(e).style.chart.backgroundColor,
color: t(e).style.chart.color
},
head: {
backgroundColor: t(e).style.chart.backgroundColor,
color: t(e).style.chart.color
}
}
}, {
content: F(() => [
(a(), E(ze, {
key: `table_${t(kt)}`,
colNames: t(H).colNames,
head: t(H).head,
body: t(H).body,
config: t(H).config,
title: `${t(e).style.chart.title.text}${t(e).style.chart.title.subtitle.text ? ` : ${t(e).style.chart.title.subtitle.text}` : ""}`,
onClose: n[3] || (n[3] = (l) => t(B).showTable = !1)
}, {
th: F(({ th: l }) => [
Ht(b(l.name ?? l), 1)
]),
td: F(({ td: l }) => [
l.value === null ? (a(), s("span", El, "-")) : (a(), s("b", Tl, b(isNaN(l.value) ? "" : t(e).style.chart.layout.dataLabels.prefix) + b(!isNaN(l.value) && l.value !== null ? Number(l.value.toFixed(t(e).table.td.roundingValue)).toLocaleString() : l) + b(isNaN(l.value) ? "" : t(e).style.chart.layout.dataLabels.suffix), 1)),
h("span", null, b(l.percentage && !isNaN(l.percentage) ? `(${Number(l.percentage.toFixed(t(e).table.td.roundingPercentage)).toLocaleString()}%)` : ""), 1)
]),
_: 1
}, 8, ["colNames", "head", "body", "config", "title"]))
]),
_: 1
}, 8, ["config"])) : d("", !0)
], 46, Ee));
}
}, Ql = /* @__PURE__ */ Oe(Dl, [["__scopeId", "data-v-93f724ae"]]);
export {
Ql as default
};