vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
1,363 lines • 55.8 kB
JavaScript
import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
import { $ as t, Bt as n, D as r, Ft as i, Jt as a, Kt as o, Pt as s, Rt as c, S as l, X as u, b as ee, ct as te, et as ne, f as re, i as d, jt as ie, kt as ae, n as oe, p as se, q as ce, t as le, tt as f, w as ue, xt as de } from "./lib-Bttd6u5E.js";
import { n as fe, t as pe } from "./useHints-Dq_w2E8B.js";
import { t as me } from "./useConfig-D3scuR88.js";
import { t as he } from "./usePrinter-DN5bYhTG.js";
import { n as ge, t as _e } from "./BaseScanner-DZvpgOjM.js";
import { t as ve } from "./useSvgExport-DH-FfcqQ.js";
import { t as ye } from "./useNestedProp-vPNvh7rV.js";
import { t as be } from "./useThemeCheck-C43Tcqmk.js";
import { t as xe } from "./img-Bnokohej.js";
import { n as Se } from "./Title-BE3qg9xl.js";
import { t as Ce } from "./_plugin-vue_export-helper-B3ysoDQm.js";
import { l as we, t as Te } from "./useResponsive-ZtArZtUf.js";
import { t as Ee } from "./DefGrad-DVBqDjhO.js";
import { t as De } from "./BaseLegendToggle-DZVucLnv.js";
import { t as Oe } from "./A11yDataTable-DdRsVULz.js";
import { t as ke } from "./useUserOptionState-DK-_1ddE.js";
import { t as Ae } from "./useChartAccessibility-DYqac8yF.js";
import { t as je } from "./labelUtils-BeVpDvTJ.js";
import { t as Me } from "./Legend-CQxUgOd-.js";
import { t as Ne } from "./vue_ui_nested_donuts-B8csIoVO.js";
import { Fragment as p, Teleport as Pe, computed as m, createBlock as h, createCommentVNode as g, createElementBlock as _, createElementVNode as v, createSlots as Fe, createTextVNode as Ie, createVNode as Le, defineAsyncComponent as y, guardReactiveProps as b, mergeProps as Re, nextTick as ze, normalizeClass as Be, normalizeProps as x, normalizeStyle as Ve, onBeforeUnmount as He, onMounted as Ue, openBlock as S, ref as C, renderList as w, renderSlot as T, resolveDynamicComponent as We, shallowRef as Ge, toDisplayString as E, toRefs as Ke, unref as D, vShow as qe, watch as Je, withCtx as O, withDirectives as Ye } from "vue";
//#region src/components/vue-ui-nested-donuts.vue
var Xe = /* @__PURE__ */ e({ default: () => Dt }), Ze = ["id"], Qe = ["id"], $e = ["id"], et = { style: { position: "relative" } }, tt = [
"xmlns",
"aria-describedby",
"viewBox"
], nt = ["width", "height"], rt = ["id"], it = ["id"], at = ["id"], ot = ["flood-color"], st = ["id", "d"], ct = [
"d",
"fill",
"stroke",
"stroke-width",
"filter"
], lt = [
"d",
"fill",
"stroke",
"stroke-width"
], ut = { key: 1 }, dt = ["d", "fill"], ft = { key: 2 }, pt = [
"font-size",
"font-weight",
"fill",
"dy"
], mt = ["href"], ht = [
"x",
"y",
"font-size",
"font-weight",
"fill"
], gt = { key: 3 }, _t = ["filter"], vt = [
"opacity",
"text-anchor",
"x",
"y",
"fill",
"font-size",
"font-weight"
], yt = [
"opacity",
"text-anchor",
"x",
"y",
"fill",
"font-size",
"font-weight"
], bt = [
"d",
"fill",
"onMouseenter",
"onClick",
"onMouseleave"
], xt = {
key: 0,
style: {
position: "absolute",
top: "100%",
left: "0",
width: "100%"
},
"data-dom-to-png-ignore": "",
"aria-hidden": "true"
}, St = {
key: 5,
class: "vue-data-ui-watermark"
}, Ct = ["id"], wt = {
key: 0,
class: "vue-ui-nested-donuts-legend-title"
}, Tt = ["onClick"], Et = ["innerHTML"], Dt = /*#__PURE__*/ Ce({
__name: "vue-ui-nested-donuts",
props: {
config: {
type: Object,
default() {
return {};
}
},
dataset: {
type: Array,
default() {
return [];
}
}
},
emits: [
"selectLegend",
"selectDatapoint",
"copyAlt"
],
setup(e, { expose: Ce, emit: Xe }) {
let Dt = y(() => import("./Tooltip-DhjyfHwz.js")), Ot = y(() => import("./BaseIcon-BfndwIWE.js").then((e) => e.n)), kt = y(() => import("./vue-ui-accordion-BxGriZik.js").then((e) => e.n)), At = y(() => import("./DataTable-BbKgJ5UI.js")), jt = y(() => import("./UserOptions-Dt98of5H.js").then((e) => e.n)), Mt = y(() => import("./PenAndPaper-DAE-tnEQ.js").then((e) => e.t)), Nt = y(() => import("./PackageVersion-D6d8SCp9.js").then((e) => e.t)), Pt = y(() => import("./BaseDraggableDialog-LoqqwRtV.js").then((e) => e.n)), { vue_ui_nested_donuts: Ft } = me(), { isThemeValid: It, warnInvalidTheme: Lt } = be(), k = e, Rt = m({
get() {
return !!k.dataset && k.dataset.length;
},
set(e) {
return e;
}
}), A = C(ce()), zt = C(!1), Bt = C(""), Vt = C(null), Ht = C(0), j = C(null), Ut = C(null), Wt = C(null), Gt = C(null), Kt = C(null), qt = C(0), Jt = C(0), Yt = C(0), M = C(!0), N = C([]), Xt = C([]), Zt = C(!1), Qt = C(null), $t = C(null), en = C(!1), tn = C(!1), P = C(null), nn = C({
x: 0,
y: 0
}), rn = C("pointer"), an = C(!1), F = C(!1);
function on(e) {
F.value = e, Ht.value += 1;
}
let I = C(mn());
fe({
config: () => I.value,
dataset: () => k.dataset,
component: "VueUiNestedDonuts",
rules: [
pe.emptyArray,
{
test: (e) => e.some((e) => e.series.length > 6),
message: [
"👀 Some series have > 6 data points. Consider:",
"",
"▶️ Grouping small values dynamically into a single \"Other\" data point.",
"",
"▶️ Using filters to let users choose a maximum number of data points to display.",
"",
"▶️ Using VueUiHorizontalBar instead to make the dataset breakdown easier to read."
]
},
{
test: (e) => e.length === 1,
message: [
"👀 There is only one series in your dataset. Consider:",
"",
"▶️ Using VueUiDonut instead."
]
},
{
test: (e) => e.length > 6,
message: [
"👀 The number of series in your dataset > 6. Consider:",
"",
"▶️ Using filters to let users choose a maximum number of series to display",
"",
"▶️ Using VueUiHorizontalBar instead to make the dataset breakdown easier to read."
]
}
]
});
let L = m(() => I.value.userOptions.useCursorPointer), sn = {
name: "",
series: [
{
name: "",
values: [3],
color: "#BABABA"
},
{
name: "",
values: [2],
color: "#AAAAAA"
},
{
name: "",
values: [1],
color: "#CACACA"
}
]
}, cn = m(() => a({
defaultConfig: {
useCssAnimation: !1,
table: { show: !1 },
startAnimation: { show: !1 },
userOptions: { show: !1 },
style: { chart: {
backgroundColor: "#99999930",
layout: { labels: { dataLabels: { show: !1 } } },
legend: {
backgroundColor: "transparent",
showValue: !1,
showPercentage: !1
},
title: {
color: "#1A1A1A",
subtitle: { color: "#5A5A5A" }
}
} }
},
userConfig: I.value.skeletonConfig ?? {}
})), { loading: ln, FINAL_DATASET: R, manualLoading: un } = ge({
...Ke(k),
FINAL_CONFIG: I,
prepareConfig: mn,
callback: () => {
Promise.resolve().then(async () => {
await _n();
});
},
skeletonDataset: k.config?.skeletonDataset ?? [sn, sn],
skeletonConfig: a({
defaultConfig: I.value,
userConfig: cn.value
})
}), { userOptionsVisible: dn, setUserOptionsVisibility: fn, keepUserOptionState: pn } = ke({ config: I.value }), { svgRef: z } = Ae({ config: I.value.style.chart.title });
function mn() {
let e = ye({
userConfig: k.config,
defaultConfig: Ft
}), t = {}, n = e.theme;
if (n) if (!It.value(e)) Lt(e), t = e;
else {
let r = ye({
userConfig: Ne[n] || k.config,
defaultConfig: e
});
t = {
...ye({
userConfig: k.config,
defaultConfig: r
}),
customPalette: e.customPalette.length ? e.customPalette : o[n] || s
};
}
else t = e;
return t;
}
Je(() => k.config, (e) => {
ln.value || (I.value = mn()), dn.value = !I.value.userOptions.showOnChartHover, bn(), qt.value += 1, Jt.value += 1, Yt.value += 1, V.value.dataLabels.show = I.value.style.chart.layout.labels.dataLabels.show, V.value.showTable = I.value.table.show, V.value.showTooltip = I.value.style.chart.tooltip.show, H.value.width = I.value.style.chart.width, H.value.height = I.value.style.chart.height;
}, { deep: !0 });
let hn = m(() => {
let { top: e, right: t, bottom: n, left: r } = I.value.style.chart.padding;
return {
css: `padding:${e}px ${t}px ${n}px ${r}px`,
top: e,
right: t,
bottom: n,
left: r
};
});
function gn(e, t = 1e3, n = 50) {
return new Promise((r) => {
let i = e.length;
N.value = Array(i).fill(0), Xt.value = [];
let a = 0;
e.forEach((e, o) => {
setTimeout(() => {
let n = performance.now();
function s(l) {
let u = Math.min((l - n) / t, 1), te = e * ne(u);
N.value[o] = te, N.value = [...N.value];
let re = [], d = 0;
k.dataset.forEach((e, t) => {
let n = ee(e.series.reduce((e, t) => e + ee(c(t.values).reduce((e, t) => e + t, 0)), 0)) - ee(N.value.slice(d, d + e.series.length).reduce((e, t) => e + t, 0));
n > Number.MIN_VALUE && re.push({
name: "__ghost__",
arcOf: e.name,
arcOfId: `${A.value}_${t}`,
id: `ghost_${A.value}_${t}`,
seriesIndex: -1,
datasetIndex: t,
color: "transparent",
value: n,
fullValue: n,
absoluteValues: [],
ghost: !0
}), d += e.series.length;
}), Xt.value = re, u < 1 ? requestAnimationFrame(s) : (a += 1, a === i && r());
}
requestAnimationFrame(s);
}, o * n);
});
});
}
async function _n() {
if (I.value.startAnimation?.show) {
let e = R.value.flatMap((e) => e.series).map((e) => c(e.values).reduce((e, t) => e + t, 0));
N.value = e.map(() => 0), M.value = !0, Xt.value = R.value.map((e, t) => {
let n = e.series.reduce((e, t) => e + c(t.values).reduce((e, t) => e + t, 0), 0);
return {
name: "__ghost__",
arcOf: e.name,
arcOfId: `${A.value}_${t}`,
id: `ghost_${A.value}_${t}`,
seriesIndex: -1,
datasetIndex: t,
color: "transparent",
value: n,
fullValue: n,
absoluteValues: [],
ghost: !0
};
}), await ze(), gn(e, I.value.startAnimation.durationMs, I.value.startAnimation.staggerMs).then(() => {
M.value = !1, Xt.value = [];
});
} else M.value = !1;
}
Ue(async () => {
Zt.value = !0, bn(), await _n();
});
let B = Ge(null), vn = Ge(null), yn = m(() => !!I.value.debug);
function bn() {
if (ie(k.dataset) ? (f({
componentName: "VueUiNestedDonuts",
type: "dataset",
debug: yn.value
}), Rt.value = !1, un.value = !0) : un.value = I.value.loading, I.value.responsive) {
let e = we(() => {
let { width: e, height: t } = Te({
chart: j.value,
title: I.value.style.chart.title.text ? Ut.value : null,
legend: I.value.style.chart.legend.show ? Wt.value : null,
source: Gt.value,
noTitle: Kt.value,
padding: hn.value
});
requestAnimationFrame(() => {
H.value.width = e, H.value.height = t;
});
});
B.value && (vn.value && B.value.unobserve(vn.value), B.value.disconnect()), B.value = new ResizeObserver(e), vn.value = j.value.parentNode, B.value.observe(vn.value);
}
}
He(() => {
B.value && (vn.value && B.value.unobserve(vn.value), B.value.disconnect());
});
let { isPrinting: xn, isImaging: Sn, generatePdf: Cn, generateImage: wn } = he({
elementId: `nested_donuts_${A.value}`,
fileName: I.value.style.chart.title.text || "vue-ui-nested-donuts",
options: I.value.userOptions.print
}), Tn = m(() => I.value.userOptions.show && !I.value.style.chart.title.text), En = m(() => ue(I.value.customPalette)), V = C({
dataLabels: { show: I.value.style.chart.layout.labels.dataLabels.show },
showTable: I.value.table.show,
showTooltip: I.value.style.chart.tooltip.show
});
Je(I, () => {
V.value = {
dataLabels: { show: I.value.style.chart.layout.labels.dataLabels.show },
showTable: I.value.table.show,
showTooltip: I.value.style.chart.tooltip.show
};
}, { immediate: !0 });
let H = C({
width: I.value.style.chart.width,
height: I.value.style.chart.height
}), U = Xe;
function Dn({ datapoint: e, index: t, seriesIndex: n }) {
I.value.events.datapointClick && I.value.events.datapointClick({
datapoint: e,
seriesIndex: n
}), U("selectDatapoint", {
datapoint: e,
index: t
});
}
function On({ from: e, to: t, duration: n, onUpdate: r, onDone: i, easing: a = ne }) {
let o = performance.now();
function s(c) {
let l = Math.min((c - o) / n, 1), u = a(l);
r(e + (t - e) * u, l), l < 1 ? requestAnimationFrame(s) : (r(t, 1), i && i());
}
requestAnimationFrame(s);
}
let W = C([]), G = m(() => {
ln.value, R.value.forEach((e, t) => {
[null, void 0].includes(e.name) && f({
componentName: "VueUiNestedDonuts",
type: "datasetSerieAttribute",
property: "name",
index: t,
debug: yn.value
}), [null, void 0].includes(e.series) ? f({
componentName: "VueUiNestedDonuts",
type: "datasetSerieAttribute",
property: "series",
index: t,
debug: yn.value
}) : e.series.length === 0 ? f({
componentName: "VueUiNestedDonuts",
type: "datasetAttributeEmpty",
property: `series at index ${t}`,
debug: yn.value
}) : e.series.forEach((e, t) => {
[null, void 0].includes(e.name) && f({
componentName: "VueUiNestedDonuts",
type: "datasetSerieAttribute",
property: "name",
index: t,
key: "serie",
debug: yn.value
}), [null, void 0].includes(e.values) && f({
componentName: "VueUiNestedDonuts",
type: "datasetSerieAttribute",
property: "values",
index: t,
key: "serie",
debug: yn.value
});
});
});
let e = 0;
return R.value.map((t, n) => ({
...t,
total: t.series.filter((e) => !W.value.includes(e.id)).map((e) => c(e.values).reduce((e, t) => e + t, 0)).reduce((e, t) => e + t, 0),
datasetIndex: n,
id: `${A.value}_${n}`,
series: t.series.map((r, i) => {
let a = c(r.values).reduce((e, t) => e + t, 0);
return {
name: r.name,
arcOf: t.name,
arcOfId: `${A.value}_${n}`,
id: `${A.value}_${n}_${i}`,
seriesIndex: i,
datasetIndex: n,
color: l(r.color) || En.value[i] || s[i % s.length],
value: M.value ? N.value[e++] ?? 0 : a,
absoluteValues: r.values || []
};
})
}));
});
Je(() => k.dataset, (e) => {
Array.isArray(e) && e.length > 0 && (un.value = !1);
}, { immediate: !0 });
let K = m(() => Math.min(H.value.height, H.value.width) * (I.value.style.chart.layout.donut.strokeWidth / 512)), q = m(() => [...G.value].map((e, t) => {
let n = e.series.filter((e) => !W.value.includes(e.id)).map((e) => e.value).reduce((e, t) => e + t, 0);
return {
...e,
total: n,
series: e.series.filter((e) => !W.value.includes(e.id)).map((e) => ({
...e,
proportion: e.value / n
}))
};
}));
function kn(e, t, n) {
let r = 0;
for (let t = 0; t < e.length; t += 1) n.includes(e[t]) && (r += 1);
return r < t;
}
let J = C(q.value);
Je(() => q.value, (e) => J.value = e);
function An(e) {
let t = e.map((e) => e.id);
if (e.some((e) => W.value.includes(e.id))) {
let e = new Set(t);
W.value = W.value.filter((t) => !e.has(t));
} else W.value.push(...t);
U("selectLegend", q.value);
}
function Y(e) {
let t = k.dataset.flatMap((e, t) => e.series.map((e, n) => ({
value: c(e.values).reduce((e, t) => e + t, 0),
id: `${A.value}_${t}_${n}`,
arcOfId: `${A.value}_${t}`
}))).find((t) => t.id === e.id);
if (!t) return;
let n = G.value.flatMap((e) => e.series).find((t) => t.id === e.id)?.value ?? 0, r = J.value.flatMap((e) => e.series).find((t) => t.id === e.id), i = r ? r.value : 0, a = G.value.find((e) => e.id === t.arcOfId);
if (!a) return;
let o = a.series.map((e) => e.id), s = kn(o, o.length - 1, W.value);
W.value.includes(e.id) ? (W.value = W.value.filter((t) => t !== e.id), I.value.serieToggleAnimation.show ? On({
from: i,
to: n,
duration: I.value.serieToggleAnimation.durationMs,
onUpdate: (t) => {
J.value = J.value.map((n) => ({
...n,
series: n.series.map((n) => n.id === e.id ? {
...n,
value: t
} : n)
}));
},
onDone: () => {
U("selectLegend", q.value);
}
}) : (J.value = J.value.map((t) => ({
...t,
series: t.series.map((t) => t.id === e.id ? {
...t,
value: n
} : t)
})), U("selectLegend", q.value))) : s && (I.value.serieToggleAnimation.show ? On({
from: i,
to: 0,
duration: I.value.serieToggleAnimation.durationMs,
onUpdate: (t) => {
J.value = J.value.map((n) => ({
...n,
series: n.series.map((n) => n.id === e.id ? {
...n,
value: t
} : n)
}));
},
onDone: () => {
W.value.push(e.id), U("selectLegend", q.value);
}
}) : (J.value = J.value.map((t) => ({
...t,
series: t.series.map((t) => t.id === e.id ? {
...t,
value: 0
} : t)
})), W.value.push(e.id), U("selectLegend", q.value)));
}
function jn(e) {
return G.value.length ? G.value.flatMap((e) => e.series).filter((t) => t.name === e) || (I.value.debug && console.warn(`VueUiNestedDonuts - Series name not found "${e}"`), null) : (I.value.debug && console.warn("VueUiNestedDonuts - There are no series to show."), null);
}
function Mn(e) {
let t = jn(e);
t !== null && (Array.isArray(t) ? t.forEach((e) => {
W.value.includes(e.id) && Y({ id: e.id });
}) : W.value.includes(t.id) && Y({ id: t.id }));
}
function Nn(e) {
let t = jn(e);
t !== null && (Array.isArray(t) ? t.forEach((e) => {
W.value.includes(e.id) || Y({ id: e.id });
}) : W.value.includes(t.id) || Y({ id: t.id }));
}
let Pn = m(() => K.value / G.value.length * I.value.style.chart.layout.donut.spacingRatio), Fn = m(() => J.value.map((e, t) => K.value - t * K.value / G.value.length)), X = m(() => J.value.map((e, t) => {
let n = Math.abs(e.series.map((e) => e.value).reduce((e, t) => e + t, 0)) > 0, r = K.value - t * K.value / J.value.length, i = M.value ? Xt.value.find((e) => e.datasetIndex === t) : null, a = [...e.series, ...i ? [i] : []].map((e) => ({
...e,
value: e.value < 1e-11 ? Number.MIN_VALUE : e.value
})), o = ae({ series: [{
name: "_",
color: I.value.style.chart.layout.donut.emptyFill,
value: 1
}] }, H.value.width / 2, H.value.height / 2, r, r, 1.99999, 2, 1, 360, 105.25, Pn.value), s = `M ${H.value.width / 2},${H.value.height / 2 + r}
a ${r},${r} 0 1,1 0,${-2 * r}
a ${r},${r} 0 1,1 0,${2 * r}`;
return {
...e,
hasData: n,
radius: r,
skeleton: o,
fullCirclePath: s,
donut: ae({ series: a }, H.value.width / 2, H.value.height / 2, r, r, 1.99999, 2, 1, 360, 105.25, Pn.value)
};
})), In = m(() => [...G.value].map((e, t) => {
let n = t * K.value / G.value.length;
return {
sizeRatio: n,
donut: ae({ series: [{ value: 1 }] }, H.value.width / 2, H.value.height / 2, K.value - n, K.value - n, 1.99999, 2, 1, 360, 105.25, K.value / G.value.length * I.value.style.chart.layout.donut.spacingRatio)[0]
};
})), Ln = C(null), Rn = C(null), Z = C(null), zn = C(null);
function Bn({ datapoint: e, seriesIndex: t }) {
I.value.events.datapointLeave && I.value.events.datapointLeave({
datapoint: e,
seriesIndex: t
}), zt.value = !1, Ln.value = null, Vt.value = null, Rn.value = null, Z.value = null, P.value = null, rn.value = "pointer";
}
function Vn({ val: e, percentage: t, showVal: n, showPercentage: r, config: i }) {
return je({
config: i,
val: e,
percentage: t,
showVal: n,
showPercentage: r
});
}
function Hn({ datapoint: e, _relativeIndex: t, seriesIndex: n, triggerMode: r = "pointer" }) {
I.value.events.datapointEnter && I.value.events.datapointEnter({
datapoint: e,
seriesIndex: n
}), rn.value = r, P.value = n, Ln.value = e.arcOfId, Rn.value = e.id, Z.value = n, Vt.value = e.id, zn.value = {
datapoint: e,
seriesIndex: n,
series: J.value,
config: I.value
};
let i = I.value.style.chart.tooltip.customFormat;
if (de(i) && te(() => i({
seriesIndex: n,
datapoint: e,
series: J.value,
config: I.value
}))) Bt.value = i({
seriesIndex: n,
datapoint: e,
series: J.value,
config: I.value
});
else {
let t = "";
if (I.value.style.chart.tooltip.showAllItemsAtIndex && W.value.length === 0) {
let r = J.value.map((e) => e.series.find((e) => e.seriesIndex === n));
r.forEach((i, a) => {
if (!i) return "";
t += `
<div style="display:flex; flex-direction: column; justify-content:flex-start; align-items:flex-start;padding:6px 0; ${a < r.length - 1 ? `border-bottom:1px solid ${I.value.style.chart.tooltip.borderColor}` : ""}">
<div style="display:flex; flex-direction: row; gap: 3px; justify-content:flex-start; align-items:center;">
<svg viewBox="0 0 20 20" height="${I.value.style.chart.tooltip.fontSize}" width="${I.value.style.chart.tooltip.fontSize}">
<circle cx="10" cy="10" r="10" fill="${i.color}"/>
</svg>
<span>
${i.arcOf ?? ""} - ${i.name}
</span>
</div>
<span>
<b>
${Vn({
config: I.value.style.chart.tooltip,
showVal: I.value.style.chart.tooltip.showValue,
showPercentage: I.value.style.chart.tooltip.showPercentage,
val: d(I.value.style.chart.layout.labels.dataLabels.formatter, e.value, u({
p: I.value.style.chart.layout.labels.dataLabels.prefix,
v: e.value,
s: I.value.style.chart.layout.labels.dataLabels.suffix,
r: I.value.style.chart.tooltip.roundingValue
}), {
datapoint: e,
seriesIndex: n
}),
percentage: u({
v: i.proportion * 100,
s: "%",
r: I.value.style.chart.tooltip.roundingPercentage
})
})}
</b>
</span>
</div>
`;
});
} else t += `<div style="width:100%;text-align:center;border-bottom:1px solid ${I.value.style.chart.tooltip.borderColor};padding-bottom:6px;margin-bottom:3px;">${e.arcOf ?? ""} - ${e.name}</div>`, t += `<div style="display:flex;flex-direction:row;gap:6px;align-items:center;"><svg viewBox="0 0 12 12" height="14" width="14"><circle cx="6" cy="6" r="6" stroke="none" fill="${e.color}"/></svg>`, I.value.style.chart.tooltip.showValue && (t += `<b>${d(I.value.style.chart.layout.labels.dataLabels.formatter, e.value, u({
p: I.value.style.chart.layout.labels.dataLabels.prefix,
v: e.value,
s: I.value.style.chart.layout.labels.dataLabels.suffix,
r: I.value.style.chart.tooltip.roundingValue
}), {
datapoint: e,
seriesIndex: n
})}</b>`), I.value.style.chart.tooltip.showPercentage && (I.value.style.chart.tooltip.showValue ? t += `<span>(${u({
v: e.proportion * 100,
s: "%",
r: I.value.style.chart.tooltip.roundingPercentage
})})</span></div>` : t += `<b>${u({
v: e.proportion * 100,
s: "%",
r: I.value.style.chart.tooltip.roundingPercentage
})}</b></div>`);
Bt.value = `<div style="font-size:${I.value.style.chart.tooltip.fontSize}px">${t}</div>`;
}
zt.value = !0;
}
function Un(e) {
return e.proportion * 100 > I.value.style.chart.layout.labels.dataLabels.hideUnderValue;
}
function Wn(e, t) {
if (!I.value.useBlurOnHover) return "";
if (I.value.style.chart.tooltip.showAllItemsAtIndex && W.value.length === 0) return [null, void 0].includes(Z.value) || Z.value === t ? "" : `url(#blur_${A.value})`;
if (!I.value.style.chart.tooltip.showAllItemsAtIndex || W.value.length) return [null, void 0].includes(Rn.value) || Rn.value === e.id ? "" : `url(#blur_${A.value})`;
}
let Gn = m(() => G.value.map((e, t) => {
let n = e.series.filter((e) => !W.value.includes(e.id)), r = M.value ? n.map((e) => {
let n = R.value[t].series.findIndex((t) => t.name === e.name);
return c(R.value[t].series[n].values).reduce((e, t) => e + t, 0);
}).reduce((e, t) => e + t, 0) : n.map((e) => e.value).reduce((e, t) => e + t, 0);
return e.series.map((e, n) => {
let i = c(R.value[t].series[n].values).reduce((e, t) => e + t, 0), a = M.value ? i : e.value, o = Vn({
val: d(I.value.style.chart.layout.labels.dataLabels.formatter, a, u({
p: I.value.style.chart.layout.labels.dataLabels.prefix,
v: a,
s: I.value.style.chart.layout.labels.dataLabels.suffix,
r: I.value.style.chart.legend.roundingValue
}), {
datapoint: e,
seriesIndex: n
}),
percentage: isNaN(a / r) || W.value.includes(e.id) ? "-" : u({
v: a / r * 100,
s: "%",
r: I.value.style.chart.legend.roundingPercentage
}),
showVal: I.value.style.chart.legend.showValue,
showPercentage: I.value.style.chart.legend.showPercentage,
config: I.value.style.chart.legend
}), s = `${e.name}${I.value.style.chart.legend.showPercentage || I.value.style.chart.legend.showValue ? ": " : ""}${o}`;
return {
name: e.name,
color: e.color,
value: a,
display: s,
svgDisplay: `${e.arcOf ? `${e.arcOf} - ` : ""}${s}`,
shape: "circle",
arcOf: e.arcOf,
id: e.id,
seriesIndex: n,
datasetIndex: t,
total: r,
opacity: W.value.includes(e.id) ? .5 : 1,
segregate: () => Y(e),
isSegregated: W.value.includes(e.id)
};
});
})), Kn = m(() => ({
cy: "nested-donuts-legend",
backgroundColor: I.value.style.chart.legend.backgroundColor,
color: I.value.style.chart.legend.color,
fontSize: I.value.style.chart.legend.fontSize,
paddingBottom: 12,
fontWeight: I.value.style.chart.legend.bold ? "bold" : ""
})), Q = m(() => ({
head: J.value.flatMap((e) => e.series.map((t) => ({
name: `${e.name} - ${t.name}`,
color: t.color,
total: e.total
}))),
body: J.value.flatMap((e) => e.series.map((e) => e.value))
}));
function qn(e = null) {
ze(() => {
let n = Q.value.head.map((e, t) => [
[e.name],
[Q.value.body[t]],
[isNaN(Q.value.body[t] / e.total) ? "-" : Q.value.body[t] / e.total * 100]
]), i = [
[I.value.style.chart.title.text],
[I.value.style.chart.title.subtitle.text],
[
[""],
["val"],
["%"]
]
].concat(n), a = r(i);
e ? e(a) : t({
csvContent: a,
title: I.value.style.chart.title.text || "vue-ui-nested-donuts"
});
});
}
let Jn = m(() => {
let e = [
I.value.table.columnNames.series,
I.value.table.columnNames.value,
I.value.table.columnNames.percentage
], t = Q.value.head.map((e, t) => {
let n = u({
p: I.value.style.chart.layout.labels.dataLabels.prefix,
v: Q.value.body[t],
s: I.value.style.chart.layout.labels.dataLabels.suffix,
r: I.value.table.td.roundingValue
});
return [
{
color: e.color,
name: e.name
},
n,
isNaN(Q.value.body[t] / e.total) ? "-" : u({
v: Q.value.body[t] / e.total * 100,
s: "%",
r: I.value.table.td.roundingPercentage
})
];
}), n = t.map((e) => e.map((e, t) => t === 0 ? e.name : e)), r = {
th: {
backgroundColor: I.value.table.th.backgroundColor,
color: I.value.table.th.color,
outline: I.value.table.th.outline
},
td: {
backgroundColor: I.value.table.td.backgroundColor,
color: I.value.table.td.color,
outline: I.value.table.td.outline
},
breakpoint: I.value.table.responsiveBreakpoint
};
return {
colNames: [
I.value.table.columnNames.series,
I.value.table.columnNames.value,
I.value.table.columnNames.percentage
],
head: e,
body: t,
a11yBody: n,
config: r
};
});
function Yn() {
return G.value;
}
function Xn() {
V.value.showTable = !V.value.showTable;
}
function Zn() {
V.value.dataLabels.show = !V.value.dataLabels.show;
}
function Qn() {
V.value.showTooltip = !V.value.showTooltip;
}
let $n = C(!1);
function er() {
$n.value = !$n.value;
}
async function tr({ scale: e = 2 } = {}) {
if (!j.value) return;
let { width: t, height: n } = j.value.getBoundingClientRect(), r = t / n, { imageUri: i, base64: a } = await xe({
domElement: j.value,
base64: !0,
img: !0,
scale: e
});
return {
imageUri: i,
base64: a,
title: I.value.style.chart.title.text,
width: t,
height: n,
aspectRatio: r
};
}
let nr = C(null);
function rr() {
if (!nr.value) return;
let { x: e, y: t, width: n, height: r } = nr.value.getBBox();
z.value && z.value.setAttribute("viewBox", `${e} ${t} ${n + Math.min(0, e)} ${r + Math.min(0, t)}`);
}
let ir = m(() => {
let e = I.value.table.useDialog && !I.value.table.show, t = V.value.showTable;
return {
component: e ? Pt : kt,
title: `${I.value.style.chart.title.text}${I.value.style.chart.title.subtitle.text ? `: ${I.value.style.chart.title.subtitle.text}` : ""}`,
props: e ? {
backgroundColor: I.value.table.th.backgroundColor,
color: I.value.table.th.color,
headerColor: I.value.table.th.color,
headerBg: I.value.table.th.backgroundColor,
isFullscreen: F.value,
fullscreenParent: j.value,
forcedWidth: Math.min(800, window.innerWidth * .8),
isCursorPointer: L.value
} : {
hideDetails: !0,
config: {
open: t,
maxHeight: 1e4,
body: {
backgroundColor: I.value.style.chart.backgroundColor,
color: I.value.style.chart.color
},
head: {
backgroundColor: I.value.style.chart.backgroundColor,
color: I.value.style.chart.color
}
}
}
};
});
Je(() => V.value.showTable, (e) => {
I.value.table.show || (e && I.value.table.useDialog && Qt.value ? Qt.value.open() : "close" in Qt.value && Qt.value.close());
});
function ar() {
V.value.showTable = !1, $t.value && $t.value.setTableIconState(!1);
}
let or = m(() => I.value.style.chart.backgroundColor), sr = m(() => I.value.style.chart.legend), cr = m(() => I.value.style.chart.title), lr = m(() => Gn.value.flat().map((e) => ({
...e,
name: e.svgDisplay
}))), { exportSvg: ur, getSvg: dr } = ve({
svg: z,
title: cr,
legend: sr,
legendItems: lr,
backgroundColor: or
});
async function fr({ isCb: e }) {
tn.value = !0, await ze();
try {
if (e) {
let { blob: e, url: t, text: n, dataUrl: r } = await dr();
await Promise.resolve(I.value.userOptions.callbacks.svg({
blob: e,
url: t,
text: n,
dataUrl: r
}));
} else await Promise.resolve(ur());
} finally {
tn.value = !1;
}
}
function pr(e) {
if (e?.stage === "start") {
en.value = !0;
return;
}
if (e?.stage === "end") {
en.value = !1;
return;
}
wn();
}
async function mr() {
if (U("copyAlt", {
config: I.value,
dataset: J.value
}), !I.value.userOptions.callbacks.altCopy) {
console.warn("Vue Data UI - A callback must be set for `altCopy` in userOptions.");
return;
}
await Promise.resolve(I.value.userOptions.callbacks.altCopy({
config: I.value,
dataset: J.value
}));
}
let $ = m(() => X.value.flatMap((e) => e.donut.filter((e) => !e.ghost)));
function hr() {
P.value = null, an.value = !0;
}
function gr() {
P.value = null, rn.value = "pointer", zt.value = !1, Ln.value = null, Vt.value = null, Rn.value = null, Z.value = null, an.value = !1;
}
function _r(e) {
if (!z.value || $n.value || document.activeElement !== z.value || !$.value.length) return;
let t = ["ArrowLeft", "ArrowUp"].includes(e.key), n = ["ArrowRight", "ArrowDown"].includes(e.key), r = e.key === "Enter" || e.key === " ", i = e.key === "Escape";
if (!t && !n && !r && !i) return;
if (e.preventDefault(), e.stopPropagation(), i) {
P.value = null, rn.value = "pointer", zt.value = !1, Ln.value = null, Vt.value = null, Rn.value = null, Z.value = null;
return;
}
if (r) {
if (P.value === null) return;
let e = $.value[P.value];
if (!e) return;
Dn({
datapoint: e,
index: P.value,
seriesIndex: e.seriesIndex
});
return;
}
let a = P.value, o = Z.value, s = a !== null && a >= 0 && a < $.value.length, c = o !== null && o >= 0 && o < $.value.length;
s ? n ? (a += 1, a >= $.value.length && (a = 0)) : t && (--a, a < 0 && (a = $.value.length - 1)) : c ? (a = n ? o + 1 : o - 1, a >= $.value.length && (a = 0), a < 0 && (a = $.value.length - 1)) : a = n ? 0 : $.value.length - 1;
let l = $.value[a];
l && (P.value = a, vr(), Hn({
datapoint: l,
relativeIndex: a,
seriesIndex: l.seriesIndex,
show: !0,
triggerMode: "keyboard"
}));
}
function vr() {
if (!z.value) return;
let e = z.value.getBoundingClientRect();
nn.value = {
x: e.left + e.width / 2,
y: e.top + e.height / 2
};
}
let yr = m(() => ({
headers: Jn.value?.colNames ?? [],
rows: Jn.value?.a11yBody ?? []
}));
return Ce({
autoSize: rr,
getData: Yn,
getImage: tr,
generatePdf: Cn,
generateCsv: qn,
generateImage: wn,
generateSvg: fr,
hideSeries: Nn,
showSeries: Mn,
toggleTable: Xn,
toggleLabels: Zn,
toggleTooltip: Qn,
toggleAnnotator: er,
toggleFullscreen: on,
copyAlt: mr
}), (e, t) => (S(), _("div", {
ref_key: "nestedDonutsChart",
ref: j,
class: Be(`vue-data-ui-component vue-ui-nested-donuts ${F.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${I.value.useCssAnimation ? "" : "vue-ui-dna"}`),
style: Ve(`font-family:${I.value.style.fontFamily};width:100%; text-align:center;background:${I.value.style.chart.backgroundColor}`),
id: `nested_donuts_${A.value}`,
onMouseenter: t[2] ||= () => D(fn)(!0),
onMouseleave: t[3] ||= () => D(fn)(!1)
}, [
v("div", {
id: `chart-instructions-${A.value}`,
class: "sr-only"
}, [v("p", null, E(I.value.a11y.translations.keyboardNavigation), 1)], 8, Qe),
yr.value?.rows?.length ? (S(), h(Oe, {
key: 0,
uid: A.value,
head: yr.value.headers,
body: yr.value.rows,
notice: I.value.a11y.translations.tableAvailable,
caption: I.value.a11y.translations.tableCaption
}, null, 8, [
"uid",
"head",
"body",
"notice",
"caption"
])) : g("", !0),
I.value.userOptions.buttons.annotator ? (S(), h(D(Mt), {
key: 1,
svgRef: D(z),
backgroundColor: I.value.style.chart.backgroundColor,
color: I.value.style.chart.color,
active: $n.value,
isCursorPointer: L.value,
onClose: er
}, {
"annotator-action-close": O(() => [T(e.$slots, "annotator-action-close", {}, void 0, !0)]),
"annotator-action-color": O(({ color: t }) => [T(e.$slots, "annotator-action-color", x(b({ color: t })), void 0, !0)]),
"annotator-action-draw": O(({ mode: t }) => [T(e.$slots, "annotator-action-draw", x(b({ mode: t })), void 0, !0)]),
"annotator-action-undo": O(({ disabled: t }) => [T(e.$slots, "annotator-action-undo", x(b({ disabled: t })), void 0, !0)]),
"annotator-action-redo": O(({ disabled: t }) => [T(e.$slots, "annotator-action-redo", x(b({ disabled: t })), void 0, !0)]),
"annotator-action-delete": O(({ disabled: t }) => [T(e.$slots, "annotator-action-delete", x(b({ disabled: t })), void 0, !0)]),
_: 3
}, 8, [
"svgRef",
"backgroundColor",
"color",
"active",
"isCursorPointer"
])) : g("", !0),
Tn.value ? (S(), _("div", {
key: 2,
ref_key: "noTitle",
ref: Kt,
class: "vue-data-ui-no-title-space",
style: "height:36px; width: 100%;background:transparent"
}, null, 512)) : g("", !0),
I.value.style.chart.title.text ? (S(), _("div", {
key: 3,
ref_key: "chartTitle",
ref: Ut
}, [(S(), h(Se, {
key: `title_${qt.value}`,
config: {
title: {
cy: "donut-div-title",
...I.value.style.chart.title
},
subtitle: {
cy: "donut-div-subtitle",
...I.value.style.chart.title.subtitle
}
}
}, null, 8, ["config"]))], 512)) : g("", !0),
v("div", { id: `legend-top-${A.value}` }, null, 8, $e),
I.value.userOptions.show && Rt.value && (D(pn) || D(dn)) ? (S(), h(D(jt), {
ref_key: "userOptionsRef",
ref: $t,
key: `user_option_${Ht.value}`,
backgroundColor: I.value.style.chart.backgroundColor,
color: I.value.style.chart.color,
isPrinting: D(xn),
isImaging: D(Sn),
uid: A.value,
hasTooltip: I.value.userOptions.buttons.tooltip && I.value.style.chart.tooltip.show,
hasPdf: I.value.userOptions.buttons.pdf,
hasXls: I.value.userOptions.buttons.csv,
hasImg: I.value.userOptions.buttons.img,
hasSvg: I.value.userOptions.buttons.svg,
hasTable: I.value.userOptions.buttons.table,
hasLabel: I.value.userOptions.buttons.labels,
hasFullscreen: I.value.userOptions.buttons.fullscreen,
hasAltCopy: I.value.userOptions.buttons.altCopy,
isFullscreen: F.value,
isTooltip: V.value.showTooltip,
titles: { ...I.value.userOptions.buttonTitles },
chartElement: j.value,
position: I.value.userOptions.position,
hasAnnotator: I.value.userOptions.buttons.annotator,
isAnnotation: $n.value,
callbacks: I.value.userOptions.callbacks,
printScale: I.value.userOptions.print.scale,
tableDialog: I.value.table.useDialog,
isCursorPointer: L.value,
onToggleFullscreen: on,
onGeneratePdf: D(Cn),
onGenerateCsv: qn,
onGenerateImage: pr,
onGenerateSvg: fr,
onToggleTable: Xn,
onToggleLabels: Zn,
onToggleTooltip: Qn,
onToggleAnnotator: er,
onCopyAlt: mr,
style: Ve({ visibility: D(pn) ? D(dn) ? "visible" : "hidden" : "visible" })
}, Fe({ _: 2 }, [
e.$slots.menuIcon ? {
name: "menuIcon",
fn: O(({ isOpen: t, color: n }) => [T(e.$slots, "menuIcon", x(b({
isOpen: t,
color: n
})), void 0, !0)]),
key: "0"
} : void 0,
e.$slots.optionTooltip ? {
name: "optionTooltip",
fn: O(() => [T(e.$slots, "optionTooltip", {}, void 0, !0)]),
key: "1"
} : void 0,
e.$slots.optionPdf ? {
name: "optionPdf",
fn: O(() => [T(e.$slots, "optionPdf", {}, void 0, !0)]),
key: "2"
} : void 0,
e.$slots.optionCsv ? {
name: "optionCsv",
fn: O(() => [T(e.$slots, "optionCsv", {}, void 0, !0)]),
key: "3"
} : void 0,
e.$slots.optionImg ? {
name: "optionImg",
fn: O(() => [T(e.$slots, "optionImg", {}, void 0, !0)]),
key: "4"
} : void 0,
e.$slots.optionSvg ? {
name: "optionSvg",
fn: O(() => [T(e.$slots, "optionSvg", {}, void 0, !0)]),
key: "5"
} : void 0,
e.$slots.optionTable ? {
name: "optionTable",
fn: O(() => [T(e.$slots, "optionTable", {}, void 0, !0)]),
key: "6"
} : void 0,
e.$slots.optionLabels ? {
name: "optionLabels",
fn: O(() => [T(e.$slots, "optionLabels", {}, void 0, !0)]),
key: "7"
} : void 0,
e.$slots.optionFullscreen ? {
name: "optionFullscreen",
fn: O(({ toggleFullscreen: t, isFullscreen: n }) => [T(e.$slots, "optionFullscreen", x(b({
toggleFullscreen: t,
isFullscreen: n
})), void 0, !0)]),
key: "8"
} : void 0,
e.$slots.optionAnnotator ? {
name: "optionAnnotator",
fn: O(({ toggleAnnotator: t, isAnnotator: n }) => [T(e.$slots, "optionAnnotator", x(b({
toggleAnnotator: t,
isAnnotator: n
})), void 0, !0)]),
key: "9"
} : void 0,
e.$slots.optionAltCopy ? {
name: "optionAltCopy",
fn: O(({ altCopy: t }) => [T(e.$slots, "optionAltCopy", x(b({ altCopy: t })), void 0, !0)]),
key: "10"
} : void 0,
e.$slots["custom-menu-before"] ? {
name: "custom-menu-before",
fn: O(() => [T(e.$slots, "custom-menu-before", {}, void 0, !0)]),
key: "11"
} : void 0,
e.$slots["custom-menu-after"] ? {
name: "custom-menu-after",
fn: O(() => [T(e.$slots, "custom-menu-after", {}, void 0, !0)]),
key: "12"
} : void 0
]), 1032, /* @__PURE__ */ "backgroundColor.color.isPrinting.isImaging.uid.hasTooltip.hasPdf.hasXls.hasImg.hasSvg.hasTable.hasLabel.hasFullscreen.hasAltCopy.isFullscreen.isTooltip.titles.chartElement.position.hasAnnotator.isAnnotation.callbacks.printScale.tableDialog.isCursorPointer.onGeneratePdf.style".split("."))) : g("", !0),
v("div", et, [(S(), _("svg", {
ref_key: "svgRef",
ref: z,
xmlns: D(le),
"aria-describedby": `chart-instructions-${A.value}`,
class: Be({
"vue-data-ui-fullscreen--on": F.value,
"vue-data-ui-fulscreen--off": !F.value,
"vue-data-ui-svg": !0
}),
viewBox: `0 0 ${H.value.width <= 0 ? .001 : H.value.width} ${H.value.height < 0 ? .001 : H.value.height}`,
style: Ve(`max-width:100%; overflow: visible; background:transparent;color:${I.value.style.chart.color};${hn.value.css}`),
tabindex: "0",
onFocus: hr,
onBlur: gr,
onKeydown: _r
}, [v("g", {
ref_key: "G",
ref: nr,
class: "vue-data-ui-g"
}, [
Le(D(Nt)),
e.$slots["chart-background"] ? (S(), _("foreignObject", {
key: 0,
x: 0,
y: 0,
width: H.value.width <= 0 ? .001 : H.value.width,
height: H.value.height < 0 ? .001 : H.value.height,
style: { pointerEvents: "none" }
}, [T(e.$slots, "chart-background", {}, void 0, !0)], 8, nt)) : g("", !0),
v("defs", null, [(S(!0), _(p, null, w(In.value, (e, t) => (S(), h(Ee, {
t: "radial",
id: `radial_${A.value}_${t}`,
key: `radial_${A.value}_${t}`,
stops: [
[
"0%",
"#FFFFFF",
0
],
[
`${(1 - Pn.value / Fn.value[t]) * 100}%`,
D(n)("#FFFFFF", 0),
0
],
[
`${(1 - Pn.value / Fn.value[t] / 2) * 100}%`,
"#FFFFFF",
I.value.style.chart.gradientIntensity / 100
],
[
"100%",
"#FFFFFF",
0
]
]
}, null, 8, ["id", "stops"]))), 128))]),
v("defs", null, [v("filter", {
id: `blur_${A.value}`,
x: "-50%",
y: "-50%",
width: "200%",
height: "200%"
}, [v("feGaussianBlur", {
in: "SourceGraphic",
stdDeviation: 2,
id: `blur_std_${A.value}`
}, null, 8, it), t[4] ||= v("feColorMatrix", {
type: "saturate",
values: "0"
}, null, -1)], 8, rt), v("filter", {
id: `shadow_${A.value}`,
"color-interpolation-filters": "sRGB"
}, [v("feDropShadow", {
dx: "0",
dy: "0",
stdDeviation: "10",
"flood-opacity": "0.5",
"flood-color": I.value.style.chart.layout.donut.shadowColor
}, null, 8, ot)], 8, at)]),
v("defs", null, [(S(!0), _(p, null, w(X.value, (e, t) => (S(), _("path", {
key: `path-full-${t}`,
id: `path-full-${t}-${A.value}`,
d: e.fullCirclePath,
fill: "none"
}, null, 8, st))), 128))]),
(S(!0), _(p, null, w(X.value, (e, t) => (S(), _("g", null, [e.hasData ? (S(!0), _(p, { key: 0 }, w(e.donut.filter((e) => !e.ghost), (e, t) => (S(), _("g", null, [v("path", {
class: "vue-ui-donut-arc-path",
d: e.arcSlice,
fill: e.color,
stroke: I.value.style.chart.layout.donut.borderColorAuto ? I.value.style.chart.backgroundColor : I.value.style.chart.layout.donut.borderColor,
"stroke-width": I.value.style.chart.layout.donut.borderWidth,
filter: Wn(e, t)
}, null, 8, ct)]))), 256)) : (S(!0), _(p, { key: 1 }, w(e.skeleton, (e, t) => (S(), _("g", null, [v("path", {
class: "vue-ui-donut-arc-path",
d: e.arcSlice,
fill: e.color,
stroke: I.value.style.chart.layout.donut.borderColorAuto ? I.value.style.chart.backgroundColor : I.value.style.chart.layout.donut.borderColor,
"stroke-width": I.value.style.chart.layout.donut.borderWidth
}, null, 8, lt)]))), 256))]))), 256)),
I.value.style.chart.useGradient ? (S(), _("g", ut, [(S(!0), _(p, null, w(In.value, (e, t) => (S(), _("g", null, [v("path", {
d: e.donut.arcSlice,
fill: `url(#radial_${A.value}_${t})`,
stroke: "transparent",
"stroke-width": "0"
}, null, 8, dt)]))), 256))])) : g("", !0),
I.value.style.chart.layout.labels.dataLabels.showDonutName ? (S(), _("g", ft, [I.value.style.chart.layout.labels.dataLabels.curvedDonutName ? (S(!0), _(p, { key: 0 }, w(X.value, (e, t) => (S(), _("g", null, [(S(!0), _(p, null, w(e.donut, (n, r) => (S(), _("g", null, [r === 0 && H.value.width && H.value.height ? (S(), _("text", {
key: 0,
"text-anchor": "middle",
"font-size": I.value.style.chart.layout.labels.dataLabels.fontSize,
"font-weight": I.value.style.chart.layout.labels.dataLabels.boldDonutName ? "bold" : "normal",
fill: I.value.style.chart.layout.labels.dataLabels.color,
dy: I.value.style.chart.layout.labels.dataLabels.donutNameOffsetY
}, [v("textPath", {
href: `#path-full-${t}-${A.value}`,
startOffset: "50%",
"text-anchor": "middle",
method: "align",
spacing: "auto"
}, E(I.value.style.chart.layout.labels.dataLabels.donutNameAbbreviation ? D(oe)({
source: e.name,
length: I.value.style.chart.layout.labels.dataLabels.donutNameMaxAbbreviationSize
}) : e.name), 9, mt)], 8, pt)) : g("", !0)]))), 256))]))), 256)) : (S(!0), _(p, { key: 1 }, w(X.value, (e, t) => (S(), _("g", null, [(S(!0), _(p, null, w(e.donut, (t, n) => (S(), _("g", null, [n === 0 && H.value.width && H.value.height ? (S(), _("text", {
key: 0,
x: H.value.width / 2,
y: t.startY - I.value.style.chart.layout.labels.dataLabels.fontSize + I.value.style.chart.layout.labels.dataLabels.donutNameOffsetY,
"text-anchor": "middle",
"font-size": I.value.style.chart.layout.labels.dataLabels.fontSize,
"font-weight": I.value.style.chart.layout.labels.dataLabels.boldDonutName ? "bold" : "normal",
fill: I.value.style.chart.layout.labels.dataLabels.color
}, E(I.value.style.chart.layout.labels.dataLabels.donutNameAbbreviation ? D(oe)({
source: e.name,
length: I.value.style.chart.layout.labels.dataLabels.donutNameMaxAbbreviationSize
}) : e.name), 9, ht)) : g("", !0)]))), 256))]))), 256))])) : g("", !0),
I.value.style.chart.layout.labels.dataLabels.show ? (S(), _("g", gt, [(S(!0), _(p, null, w(X.value, (e, t) => (S(), _("g", null, [(S(!0), _(p, null, w(e.donut.filter((e) => !e.ghost), (e, n) => (S(), _("g", { filter: Wn(e, n) }, [Ye(v("text", {
opacity: +!!Un(e),
"text-anchor": D(re)(e, !0).anchor,
x: D(re)(e, !1, I.value.style.chart.layout.labels.dataLabels.offsetX).x || 0,
y: D(se)(e, I.value.style.chart.layout.labels.dataLabels.offsetY, I.value.style.chart.layout.labels.dataLabels.offsetY) + (I.value.style.chart.layout.labels.dataLabels.showValueFirst && I.value.style.chart.layout.labels.dataLabels.showValue ? I.value.style.chart.layout.labels.dataLabels.fontSize : 0),
fill: I.value.style.chart.layout.labels.dataLabels.useSerieColor ? e.color : I.value.style.chart.layout.labels.dataLabels.color,
"font-size": I.value.style.chart.layout.labels.dataLabels.fontSize,
"font-weight": I.value.style.chart.layout.labels.dataLabels.boldPercentage ? "bold" : "normal"
}, E(D(i)(D(u)({
v: e.proportion * 100,
s: "%",
r: I.value.style.chart.layout.labels.dataLabels.roundingPercentage
}), I.value.style.chart.layout.labels.dataLabels.usePercentageParens ? "(" : "", I.value.style.chart.layout.labels.dataLabels.usePercentageParens ? ")" : "")), 9, vt), [[qe, V.value.dataLabels.show && I.value.style.chart.layout.labels.dataLabels.showPercentage]]), Ye(v("text", {
opacity: +!!Un(e),
"text-anchor": D(re)(e, !0).anchor,
x: D(re)(e, !1, I.value.style.chart.layout.labels.dataLabels.offsetX).x || 0,
y: D(se)(e, I.value.style.chart.layout.labels.dataLabels.offsetY, I.value.style.chart.layout.labels.dataLabels.offsetY) + (I.value.style.chart.layout.labels.dataLabels.showValueFirst || !I.value.style.chart.layout.labels.dataLabels.showPercentage ? 0 : I.value.style.chart.layout.labels.dataLabels.fontSize),
fill: I.value.style.chart.layout.labels.dataLabels.useSerieColor ? e.color : I.value.style.chart.layout.labels.dataLabels.color,
"font-size": I.value.style.chart.layout.labels.dataLabels.fontSize,
"font-weight": I.value.style.chart.layout.labels.dataLabels.boldValue ? "bold" : "normal"
}, E(D(i)(D(d)(I.value.style.chart.layout.labels.dataLabels.formatter, e.value, D(u)({
p: I.value.style.chart.layout.labels.dataLabels.prefix,
v: e.value,
s: I.value.style.chart.layout.labels.dataLabels.suffix,
r: I.value.style.chart.layout.labels.dataLabels.roundingValue
}), {
datapoint: e,
seriesIndex: t,
datapointIndex: n
}), I.value.style.chart.layout.labels.dataLabels.useValueParens ? "(" : "", I.value.style.chart.layout.labels.dataLabels.useValueParens ? ")" : "")), 9, yt), [[qe, V.value.dataLabels.show && I.value.style.chart.layout.labels.dataLabels.showValue]])], 8, _t))), 256))]))), 256))])) : g("", !0),
(S(!0), _(p, null, w(X.value, (e, t) => (S(), _("g", null, [(S(!0), _(p, null, w(e.donut, (e, t) => (S(), _("g", null, [v("path", {
d: e.arcSlice,
fill: Vt.value === e.id ? I.value.style.chart.layout.donut.selectedColor : "transparent",
onMouseenter: (t) => Hn({
datapoint: e,
relativeIndex: $.value.findIndex((t) => t.id === e.id),
seriesIndex: e.seriesIndex
}),
onClick: (n) => Dn({
datapoint: e,
index: t,
seriesIndex: e.seriesIndex
}),
onMouseleave: (t) => Bn({
datapoint: e,
seriesIndex: e.seriesIndex
})
}, null, 40, bt)]))), 256))]))), 256)),
T(e.$slots, "svg", { svg: {
...H.value,
isPrintingImg: D(xn) || D(Sn) || en.value,
isPrinting