vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
1,642 lines • 71.8 kB
JavaScript
import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
import { $ as t, Bt as n, D as r, Jt as i, Kt as a, Pt as o, S as ee, Vt as te, X as s, f as c, h as ne, i as l, jt as re, kt as ie, p as ae, pt as oe, q as se, r as ce, t as le, tt as ue, w 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 { t as Se } from "./_plugin-vue_export-helper-B3ysoDQm.js";
import { t as Ce } from "./DefGrad-DVBqDjhO.js";
import { t as we } from "./A11yDataTable-DdRsVULz.js";
import { t as Te } from "./useUserOptionState-DK-_1ddE.js";
import { t as Ee } from "./useChartAccessibility-DYqac8yF.js";
import { t as De } from "./useTableResponsive-BAqJPR68.js";
import { t as Oe } from "./vue_ui_chestnut-D2oUhad6.js";
import { Fragment as u, computed as d, createBlock as f, createCommentVNode as p, createElementBlock as m, createElementVNode as h, createSlots as ke, createTextVNode as Ae, createVNode as g, defineAsyncComponent as je, guardReactiveProps as _, mergeProps as Me, nextTick as Ne, normalizeClass as v, normalizeProps as y, normalizeStyle as b, onMounted as Pe, openBlock as x, ref as S, renderList as C, renderSlot as w, resolveDynamicComponent as Fe, toDisplayString as T, toRefs as Ie, unref as E, useCssVars as Le, watch as Re, withCtx as D, withKeys as ze } from "vue";
//#region src/components/vue-ui-chestnut.vue
var Be = /* @__PURE__ */ e({ default: () => Mn }), Ve = ["id"], He = ["id"], Ue = {
"aria-live": "polite",
class: "sr-only"
}, We = {
key: 2,
ref: "noTitle",
class: "vue-data-ui-no-title-space",
style: "height:36px; width: 100%;background:transparent"
}, Ge = { style: { position: "relative" } }, Ke = [
"xmlns",
"aria-describedby",
"viewBox"
], qe = ["width", "height"], Je = { key: 1 }, Ye = [
"fill",
"font-weight",
"font-size",
"x",
"y"
], Xe = [
"fill",
"font-weight",
"font-size",
"x",
"y"
], Ze = { key: 2 }, Qe = [
"x",
"y",
"font-size",
"font-weight",
"fill"
], $e = [
"x",
"y",
"font-size",
"font-weight",
"fill"
], et = [
"d",
"stroke",
"fill"
], tt = [
"cx",
"cy",
"r",
"fill"
], nt = [
"aria-label",
"cx",
"cy",
"r",
"fill",
"stroke",
"stroke-width",
"onClick"
], rt = { key: 3 }, it = [
"x",
"y",
"font-size",
"fill",
"onClick"
], at = { key: 0 }, ot = [
"x",
"y",
"fill",
"font-size",
"font-weight"
], st = [
"x",
"y",
"height",
"width",
"fill",
"rx",
"onClick"
], ct = [
"aria-label",
"x",
"y",
"height",
"width",
"fill",
"rx",
"stroke",
"stroke-width",
"onClick"
], lt = { key: 4 }, ut = [
"x",
"y",
"fill",
"font-size",
"onClick"
], dt = ["d", "stroke"], ft = [
"aria-label",
"fill",
"cx",
"cy",
"r",
"onClick"
], pt = { key: 5 }, mt = [
"x",
"y",
"font-size",
"font-weight",
"fill"
], ht = [
"x1",
"x2",
"y1",
"y2",
"stroke",
"stroke-width"
], gt = [
"y",
"height",
"width"
], _t = { style: {
width: "100%",
height: "100%",
display: "flex",
"align-items": "center",
"justify-content": "center",
"flex-direction": "column"
} }, vt = { style: {
display: "flex",
"align-items": "center",
"justify-content": "center",
gap: "12px",
"flex-wrap": "wrap",
"flex-direction": "row"
} }, yt = {
viewBox: "0 0 20 20",
height: "16",
width: "16"
}, bt = ["fill"], xt = { key: 7 }, St = [
"y",
"height",
"width"
], Ct = { style: {
width: "100%",
height: "100%",
display: "flex",
"align-items": "center",
"justify-content": "center",
"flex-direction": "column"
} }, wt = { style: {
display: "flex",
"align-items": "center",
"justify-content": "center",
gap: "12px",
"flex-wrap": "wrap",
"flex-direction": "row"
} }, Tt = {
viewBox: "0 0 20 20",
height: "16",
width: "16"
}, Et = ["fill"], Dt = [
"cx",
"cy",
"fill"
], Ot = ["d", "stroke"], kt = [
"cx",
"cy",
"fill"
], At = ["d", "stroke"], jt = [
"cx",
"cy",
"fill"
], Mt = [
"cx",
"cy",
"fill"
], Nt = [
"x",
"y",
"fill",
"font-size",
"font-weight"
], Pt = [
"x",
"y",
"fill",
"font-size",
"font-weight"
], Ft = [
"x",
"text-anchor",
"y",
"fill",
"font-size"
], It = [
"x",
"text-anchor",
"y",
"fill",
"font-size"
], Lt = [
"x",
"text-anchor",
"y",
"fill",
"font-size"
], Rt = [
"x",
"text-anchor",
"y",
"fill",
"font-size"
], zt = [
"x",
"text-anchor",
"y",
"fill",
"font-size"
], Bt = [
"x",
"y",
"font-size",
"fill"
], Vt = [
"x",
"y",
"font-size",
"fill"
], Ht = [
"x",
"y",
"font-size",
"fill"
], Ut = {
key: 4,
class: "vue-data-ui-watermark"
}, Wt = {
key: 5,
ref: "source",
dir: "auto"
}, Gt = { class: "vue-ui-data-table" }, Kt = { key: 0 }, qt = ["data-cell"], Jt = { style: {
display: "flex",
"align-items": "center",
gap: "5px",
"justify-content": "flex-end",
width: "100%",
"padding-right": "3px"
} }, Yt = { key: 0 }, Xt = { key: 1 }, Zt = ["data-cell"], Qt = { style: {
display: "flex",
"align-items": "center",
gap: "5px",
"justify-content": "flex-end",
width: "100%",
"padding-right": "3px"
} }, $t = { key: 0 }, en = { key: 1 }, tn = ["data-cell"], nn = { style: {
display: "flex",
"align-items": "center",
gap: "5px",
"justify-content": "flex-end",
width: "100%",
"padding-right": "3px"
} }, rn = { key: 0 }, an = { key: 1 }, on = ["data-cell"], sn = { style: {
display: "flex",
"align-items": "center",
gap: "5px",
"justify-content": "flex-end",
width: "100%",
"padding-right": "3px"
} }, cn = { key: 0 }, ln = { key: 1 }, un = ["data-cell"], dn = { style: {
display: "flex",
"align-items": "center",
gap: "5px",
"justify-content": "flex-end",
width: "100%",
"padding-right": "3px"
} }, fn = { key: 0 }, pn = { key: 1 }, mn = ["data-cell"], hn = { style: {
display: "flex",
"align-items": "center",
gap: "5px",
"justify-content": "flex-end",
width: "100%",
"padding-right": "3px"
} }, gn = { key: 0 }, _n = { key: 1 }, vn = ["data-cell"], yn = { style: {
display: "flex",
"align-items": "center",
gap: "5px",
"justify-content": "flex-end",
width: "100%",
"padding-right": "3px"
} }, bn = { key: 0 }, xn = { key: 1 }, Sn = ["data-cell"], Cn = { style: {
display: "flex",
"align-items": "center",
gap: "5px",
"justify-content": "flex-end",
width: "100%",
"padding-right": "3px"
} }, wn = ["data-cell"], Tn = { style: {
display: "flex",
"align-items": "center",
gap: "5px",
"justify-content": "flex-end",
width: "100%",
"padding-right": "3px"
} }, En = ["data-cell"], Dn = { style: {
display: "flex",
"align-items": "center",
gap: "5px",
"justify-content": "flex-end",
width: "100%",
"padding-right": "3px"
} }, On = ["data-cell"], kn = { style: {
display: "flex",
"align-items": "center",
gap: "5px",
"justify-content": "flex-end",
width: "100%",
"padding-right": "3px"
} }, An = ["data-cell"], jn = { style: {
display: "flex",
"align-items": "center",
gap: "5px",
"justify-content": "flex-end",
width: "100%",
"padding-right": "3px"
} }, Mn = /*#__PURE__*/ Se({
__name: "vue-ui-chestnut",
props: {
config: {
type: Object,
default() {
return {};
}
},
dataset: {
type: Array,
default() {
return [];
}
}
},
emits: [
"selectRoot",
"selectBranch",
"selectNut",
"copyAlt"
],
setup(e, { expose: Se, emit: Be }) {
Le((e) => ({ cec01d7a: e.tdo }));
let Mn = je(() => import("./BaseIcon-BfndwIWE.js").then((e) => e.n)), Nn = je(() => import("./vue-ui-accordion-BxGriZik.js").then((e) => e.n)), Pn = je(() => import("./PenAndPaper-DAE-tnEQ.js").then((e) => e.t)), Fn = je(() => import("./UserOptions-Dt98of5H.js").then((e) => e.n)), In = je(() => import("./PackageVersion-D6d8SCp9.js").then((e) => e.t)), Ln = je(() => import("./BaseDraggableDialog-LoqqwRtV.js").then((e) => e.n)), { vue_ui_chestnut: Rn } = me(), { isThemeValid: zn, warnInvalidTheme: Bn } = be(), O = e, Vn = d(() => !!O.dataset && O.dataset.length), k = S(se()), Hn = S(null), Un = S(0), Wn = S(null), Gn = S(null), Kn = S(!1), qn = S(!1), Jn = S(!1), A = S(!1), j = S(""), M = S({
level: "root",
rootIndex: 0,
branchIndex: 0,
nutIndex: 0,
locked: !1
}), N = S(nr());
fe({
config: () => N.value,
dataset: () => O.dataset,
component: "VueUiChestnut",
rules: [
pe.emptyArray,
{
test: (e) => e.some((e) => e?.branches && e.branches.length > 10),
message: [
"👀 Some root has > 10 branches, which can make the chart heavy. Consider:",
"",
"▶️ Grouping some branches in broader categories."
]
},
{
test: (e) => e.some((e) => e?.branches && e.branches.some((e) => e?.breakdown && e?.breakdown.length > 6)),
message: [
"👀 Some donuts have > 6 series. Consider:",
"",
"▶️ Grouping small values into an \"Other\" category."
]
}
]
});
let P = d(() => N.value.userOptions.useCursorPointer), Yn = d(() => i({
defaultConfig: {
userOptions: { show: !1 },
table: { show: !1 },
style: { chart: {
backgroundColor: "#99999930",
layout: {
grandTotal: { show: !1 },
roots: {
stroke: "#6A6A6A",
labels: { show: !1 }
},
verticalSeparator: { stroke: "transparent" },
branches: {
stroke: "#6A6A6A",
underlayerColor: "#6A6A6A90",
labels: {
show: !1,
dataLabels: { show: !1 }
}
}
}
} }
},
userConfig: N.value.skeletonConfig ?? {}
})), { loading: Xn, FINAL_DATASET: Zn } = ge({
...Ie(O),
FINAL_CONFIG: N,
prepareConfig: nr,
skeletonDataset: O.config?.skeletonDataset ?? [{
name: "_",
color: "#969696",
branches: [
{
name: "_",
value: 32,
breakdown: [{
name: "_",
value: 16,
color: "#CACACA"
}, {
name: "_",
value: 16,
color: "#6A6A6A"
}]
},
{
name: "_",
value: 16,
breakdown: [{
name: "_",
value: 8,
color: "#CACACA"
}, {
name: "_",
value: 8,
color: "#6A6A6A"
}]
},
{
name: "_",
value: 8,
breakdown: [{
name: "_",
value: 4,
color: "#CACACA"
}, {
name: "_",
value: 4,
color: "#6A6A6A"
}]
},
{
name: "_",
value: 4,
breakdown: [{
name: "_",
value: 2,
color: "#CACACA"
}, {
name: "_",
value: 2,
color: "#6A6A6A"
}]
}
]
}, {
name: "_",
color: "#C4C4C4",
branches: [
{
name: "_",
value: 24,
breakdown: [{
name: "_",
value: 12,
color: "#CACACA"
}, {
name: "_",
value: 12,
color: "#6A6A6A"
}]
},
{
name: "_",
value: 12,
breakdown: [{
name: "_",
value: 6,
color: "#CACACA"
}, {
name: "_",
value: 6,
color: "#6A6A6A"
}]
},
{
name: "_",
value: 6,
breakdown: [{
name: "_",
value: 3,
color: "#CACACA"
}, {
name: "_",
value: 3,
color: "#6A6A6A"
}]
},
{
name: "_",
value: 2,
breakdown: [{
name: "_",
value: 1,
color: "#CACACA"
}, {
name: "_",
value: 1,
color: "#6A6A6A"
}]
}
]
}],
skeletonConfig: i({
defaultConfig: N.value,
userConfig: Yn.value
})
}), { userOptionsVisible: Qn, setUserOptionsVisibility: $n, keepUserOptionState: er } = Te({ config: N.value }), { svgRef: tr } = Ee({ config: N.value.style.chart.layout.title });
function nr() {
let e = ye({
userConfig: O.config,
defaultConfig: Rn
}), t = e.theme;
if (!t) return e;
if (!zn.value(e)) return Bn(e), e;
let n = ye({
userConfig: Oe[t] || O.config,
defaultConfig: e
}), r = ye({
userConfig: O.config,
defaultConfig: n
});
return {
...r,
customPalette: r.customPalette.length ? r.customPalette : a[t] || o
};
}
Re(() => O.config, (e) => {
N.value = nr(), Qn.value = !N.value.userOptions.showOnChartHover, F.value.showTable = N.value.table.show, kr();
}, { deep: !0 });
let { isPrinting: rr, isImaging: ir, generatePdf: ar, generateImage: or } = he({
elementId: `vue-ui-chestnut_${k.value}`,
fileName: N.value.style.chart.layout.title.text || "vue-ui-chestnut",
options: N.value.userOptions.print
}), sr = d(() => N.value.userOptions.show), cr = d(() => de(N.value.customPalette)), F = S({ showTable: N.value.table.show });
Re(N, () => {
F.value = { showTable: N.value.table.show };
}, { immediate: !0 });
let lr = S(null), ur = d(() => N.value.table.responsiveBreakpoint), I = S({
gap: 6,
padding: {
top: 102,
left: 12,
right: 12,
bottom: 96
},
width: 1024,
height: 0,
branchSize: 32,
branchStart: 128
}), L = d(() => ({
left: I.value.padding.left,
top: I.value.padding.top,
right: I.value.width - I.value.padding.right,
bottom: I.value.height - I.value.padding.bottom,
width: I.value.width - (I.value.padding.left + I.value.padding.right),
height: I.value.height - (I.value.padding.top + I.value.padding.bottom),
seedX: I.value.padding.left + 64
})), R = d(() => Zn.value.flatMap((e) => (e.branches || []).map((e) => e.value || 0)).reduce((e, t) => e + t, 0)), z = d(() => (Zn.value.forEach((e, t) => {
oe({
datasetObject: e,
requiredAttributes: ["name", "branches"]
}).forEach((e) => {
ue({
componentName: "VueUiChestnut",
type: "datasetSerieAttribute",
property: e,
index: t,
debug: Or.value
});
}), e.branches && e.branches.forEach((e, n) => {
oe({
datasetObject: e,
requiredAttributes: ["name", "value"]
}).forEach((e) => {
ue({
componentName: "VueUiChestnut",
type: "datasetSerieAttribute",
property: e,
index: `${t} - ${n}`,
debug: Or.value
});
}), e.breakdown && e.breakdown.forEach((e, r) => {
oe({
datasetObject: e,
requiredAttributes: ["name", "value"]
}).forEach((e) => {
ue({
componentName: "VueUiChestnut",
type: "datasetSerieAttribute",
property: e,
index: `${t} - ${n} - ${r}`,
debug: Or.value
});
});
});
});
}), Zn.value.map((e, t) => {
let n = (e.branches || []).map((e) => e.value || 0).reduce((e, t) => e + t, 0);
return {
...e,
color: ee(e.color) || cr.value[t] || o[t] || o[t % o.length],
id: e.id || `root_${t}_${k.value}`,
type: "root",
total: n,
rootIndex: t,
branches: (e.branches || []).map((r, i) => ({
...r,
rootName: e.name,
rootIndex: t,
color: ee(e.color) || cr.value[t] || o[t] || o[t % o.length],
value: r.value >= 0 ? r.value : 0,
id: r.id || `branch_${t}_${i}_${k.value}`,
proportionToRoot: r.value / n,
type: "branch",
breakdown: (r.breakdown || []).map((a, te) => ({
table: {
rootName: e.name,
rootValue: n,
rootToTotal: n / R.value,
branchName: r.name,
branchValue: r.value,
branchToTotal: r.value / R.value,
branchToRoot: r.value / n,
nutName: a.name,
nutValue: a.value,
nutToTotal: a.value / R.value,
nutToRoot: a.value / n,
nutToBranch: a.value / r.value
},
...a,
type: "nut",
branchName: r.name,
rootName: e.name,
branchTotal: r.value >= 0 ? r.value : 0,
proportionToBranch: a.value / r.value,
proportionToRoot: a.value / n,
proportionToTree: a.value / R.value,
rootIndex: t,
id: a.id || `nut_${t}_${i}_${te}_${k.value}`,
color: ee(a.color) || cr.value[te] || o[te] || o[te % o.length],
value: a.value >= 0 ? a.value : 0
}))
}))
};
})));
function dr() {
return z.value;
}
let fr = Be, pr = d(() => z.value.flatMap((e) => e.branches).length), mr = d(() => Math.max(...z.value.map((e) => e.branches.map((e) => e.value).reduce((e, t) => e + t, 0)))), hr = d(() => Math.max(...z.value.flatMap((e) => e.branches.map((e) => e.value)))), gr = d(() => 256 + I.value.padding.left), B = d(() => z.value.sort((e, t) => t.total - e.total).map((e, t) => {
let n = L.value.height / z.value.length / 2, r = e.total / mr.value * (n > 64 ? 64 : n);
return {
...e,
x: L.value.seedX,
y: L.value.top + L.value.height / z.value.length * (t + 1) - (L.value.height / z.value.length / 2 + I.value.gap / 2),
r: r < I.value.branchSize / 2 ? I.value.branchSize / 2 : r
};
})), _r = d(() => N.value.style.chart.layout.branches.widthRatio <= 0 ? .1 : N.value.style.chart.layout.branches.widthRatio > 1.8 ? 1.8 : N.value.style.chart.layout.branches.widthRatio), vr = d(() => B.value.flatMap((e) => e.branches)), V = d(() => vr.value.sort((e, t) => t.value - e.value).map((e, t) => ({
...e,
y1: t * I.value.branchSize + L.value.top + t * I.value.gap,
y2: t * I.value.branchSize + I.value.branchSize,
x1: gr.value,
x2: 384 * e.value / hr.value * _r.value + gr.value
}))), yr = d(() => B.value), br = d(() => yr.value.map((e) => V.value.filter((t) => t.rootIndex === e.rootIndex).sort((e, t) => e.y1 - t.y1))), xr = d(() => yr.value.map((e, t) => br.value[t].map((e) => (e.breakdown || []).map((t, n) => ({
...t,
nutIndex: n,
rootIndex: e.rootIndex,
branchId: e.id,
branchName: e.name,
branchValue: e.value,
rootName: e.rootName
})))));
function Sr(e) {
let t = B.value.find((t) => t.rootIndex === e.rootIndex);
return {
x: t.x,
y: t.y,
r: t.r
};
}
let H = S(null), U = S(null), W = S(null), G = S(null);
function K() {
H.value = null, W.value = null, G.value = null;
}
function q(e) {
if (H.value) return e.type === "root" ? e.rootIndex === H.value.rootIndex : e.type === "branch" ? e.id === H.value.id : e.type === "nut" && e.branchName === H.value.name && e.rootIndex === H.value.rootIndex;
if (W.value) return e.type === "root" ? e.rootIndex === W.value.rootIndex : e.type === "branch" ? e.id === W.value.id : e.type === "nut" && e.branchName === W.value.name && e.rootIndex === W.value.rootIndex;
if (G.value) return e.type === "root" ? e.id === G.value.id : e.type === "branch" || e.type === "nut" ? e.rootIndex === G.value.rootIndex : !1;
if (ii.value && A.value) {
if (M.value.level === "root") return e.type === "root" ? Z.value && e.id === Z.value.id : e.type === "branch" || e.type === "nut" ? Z.value && e.rootIndex === Z.value.rootIndex : !1;
if (M.value.level === "branch") return e.type === "root" ? Z.value && e.rootIndex === Z.value.rootIndex : e.type === "branch" ? ni.value && e.id === ni.value.id : (e.type, !1);
if (M.value.level === "nut") return e.type === "root" ? Z.value && e.rootIndex === Z.value.rootIndex : e.type === "branch" ? ri.value && e.id === ri.value.id : e.type === "nut" && ri.value && e.branchName === ri.value.name && e.rootIndex === ri.value.rootIndex;
}
return !0;
}
function Cr(e) {
K();
let t = yr.value.findIndex((t) => t.rootIndex === e.rootIndex), n = (br.value[t] || []).findIndex((t) => t.id === e.id);
t !== -1 && (M.value.rootIndex = t), n !== -1 && (M.value.branchIndex = n), M.value.level = "nut", M.value.nutIndex = 0, Ne(() => {
H.value = e, W.value = e, U.value = ie({
series: e.breakdown,
base: 1
}, e.x2 + 24 + N.value.style.chart.layout.nuts.offsetX, e.y1 + I.value.branchSize / 2, 80, 80), fr("selectNut", e.breakdown), Q();
});
}
function J() {
H.value = null, U.value = null, fr("selectNut", null);
}
function wr(e) {
let t = yr.value.findIndex((t) => t.rootIndex === e.rootIndex), n = (br.value[t] || []).findIndex((t) => t.id === e.id);
t !== -1 && (M.value.rootIndex = t), n !== -1 && (M.value.branchIndex = n), M.value.level = "branch", M.value.nutIndex = 0, W.value && W.value.id === e.id ? (W.value = null, K(), fr("selectBranch", null), Q()) : (K(), W.value = e, fr("selectBranch", e), Q());
}
function Tr(e) {
let t = yr.value.findIndex((t) => t.id === e.id);
t !== -1 && (M.value.rootIndex = t), M.value.level = "root", M.value.branchIndex = 0, M.value.nutIndex = 0, G.value && G.value.id === e.id ? (K(), fr("selectRoot", null), Q()) : (K(), G.value = e, fr("selectRoot", e), Q());
}
function Er() {
return L.value.bottom - (H.value.y1 + 180) < 0 ? 0 : L.value.bottom;
}
function Dr(e) {
return e.proportion * 100 > N.value.style.chart.layout.nuts.selected.labels.dataLabels.hideUnderValue;
}
Pe(() => {
kr();
});
let Or = d(() => N.value.debug);
function kr() {
re(O.dataset) && ue({
componentName: "VueUiChestnut",
type: "dataset",
debug: Or.value
});
let e = pr.value * (I.value.branchSize + I.value.gap) + I.value.padding.top + I.value.padding.bottom;
I.value.height = e;
}
let Y = d(() => ({
head: [
N.value.table.th.translations.rootName,
N.value.table.th.translations.rootValue,
N.value.table.th.translations.rootToTotal,
N.value.table.th.translations.branchName,
N.value.table.th.translations.branchValue,
N.value.table.th.translations.branchToRoot,
N.value.table.th.translations.branchToTotal,
N.value.table.th.translations.nutName,
N.value.table.th.translations.nutValue,
N.value.table.th.translations.nutToBranch,
N.value.table.th.translations.nutToRoot,
N.value.table.th.translations.nutToTotal
],
body: z.value.flatMap((e, t) => e.branches.flatMap((e, t) => e.breakdown.flatMap((e, t) => e.table)))
}));
function Ar(e = null) {
Ne(() => {
let n = [
[N.value.style.chart.layout.title.text],
[N.value.style.chart.layout.title.subtitle.text],
[""],
["Grand total", R.value],
[""]
], i = Y.value.head, a = Y.value.body.map((e, t) => [
Y.value.body[t - 1] && Y.value.body[t - 1].rootName === e.rootName ? "" : e.rootName,
Y.value.body[t - 1] && Y.value.body[t - 1].rootName === e.rootName ? "" : e.rootValue,
Y.value.body[t - 1] && Y.value.body[t - 1].rootName === e.rootName ? "" : e.rootToTotal,
Y.value.body[t - 1] && Y.value.body[t - 1].branchName === e.branchName ? "" : e.branchName,
Y.value.body[t - 1] && Y.value.body[t - 1].branchName === e.branchName ? "" : e.branchValue,
Y.value.body[t - 1] && Y.value.body[t - 1].branchName === e.branchName ? "" : e.branchToRoot,
Y.value.body[t - 1] && Y.value.body[t - 1].branchName === e.branchName ? "" : e.branchToTotal,
e.nutName,
e.nutValue,
e.nutToBranch,
e.nutToRoot,
e.nutToTotal
]), o = n.concat([i]).concat(a), ee = r(o);
e ? e(ee) : t({
csvContent: ee,
title: N.value.style.chart.layout.title.text || "vue-ui-chestnut"
});
});
}
let jr = S(!1);
function Mr(e) {
jr.value = e, Un.value += 1;
}
function Nr() {
F.value.showTable = !F.value.showTable;
}
let Pr = S(!1);
function Fr() {
Pr.value = !Pr.value;
}
async function Ir({ scale: e = 2 } = {}) {
if (!Hn.value) return;
let { width: t, height: n } = Hn.value.getBoundingClientRect(), r = t / n, { imageUri: i, base64: a } = await xe({
domElement: Hn.value,
base64: !0,
img: !0,
scale: e
});
return {
imageUri: i,
base64: a,
title: N.value.style.chart.layout.title.text,
width: t,
height: n,
aspectRatio: r
};
}
function Lr(e) {
let t = Sr(e), n = e.x1, r = e.y1, i = I.value.branchSize, a = t.x + t.r / 2, o = t.y;
return [
`M ${n},${r}`,
`C ${n - 20},${r} ${n - 20},${r} ${a},${o}`,
`C ${a},${o} ${n - 20},${r + i} ${n},${r + i}`,
"Z"
].join(" ");
}
let Rr = d(() => {
let e = N.value.table.useDialog && !N.value.table.show, t = F.value.showTable;
return {
component: e ? Ln : Nn,
title: `${N.value.style.chart.layout.title.text}${N.value.style.chart.layout.title.subtitle.text ? `: ${N.value.style.chart.layout.title.subtitle.text}` : ""}`,
props: e ? {
backgroundColor: N.value.table.th.backgroundColor,
color: N.value.table.th.color,
headerColor: N.value.table.th.color,
headerBg: N.value.table.th.backgroundColor,
isFullscreen: jr.value,
fullscreenParent: Hn.value,
forcedWidth: Math.min(800, window.innerWidth * .8),
isCursorPointer: P.value
} : {
hideDetails: !0,
config: {
open: t,
maxHeight: 1e4,
body: {
backgroundColor: N.value.style.chart.backgroundColor,
color: N.value.style.chart.color
},
head: {
backgroundColor: N.value.style.chart.backgroundColor,
color: N.value.style.chart.color
}
}
}
};
});
Re(() => F.value.showTable, async (e) => {
N.value.table.show || (e && N.value.table.useDialog && Wn.value ? (await Ne(), Wn.value.open()) : "close" in Wn.value && Wn.value.close());
});
let { isResponsive: zr } = De(lr, ur);
function Br() {
F.value.showTable = !1, Gn.value && Gn.value.setTableIconState(!1);
}
let Vr = d(() => z.value.map((e, t) => ({
...e,
display: `${e.name}: ${l(N.value.style.chart.layout.roots.labels.formatter, e.total, s({
p: N.value.style.chart.layout.legend.prefix,
v: e.total,
s: N.value.style.chart.layout.legend.suffix,
r: N.value.style.chart.layout.legend.roundingValue
}), { datapoint: e })} (${s({
v: e.total / R.value * 100,
s: "%",
r: N.value.style.chart.layout.legend.roundingPercentage
})})`
}))), Hr = d(() => Vr.value.map((e) => ({
color: e.color,
name: e.display,
shape: "circle"
}))), Ur = d(() => N.value.style.chart.backgroundColor), Wr = d(() => ({
...N.value.style.chart.layout.legend,
textAlign: "center",
show: !0,
position: "bottom"
})), Gr = d(() => N.value.style.chart.layout.title), { exportSvg: Kr, getSvg: qr } = ve({
svg: tr,
title: Gr,
legend: Wr,
legendItems: Hr,
backgroundColor: Ur,
titleEmbedded: !0
});
async function Jr({ isCb: e }) {
qn.value = !0, await Ne();
try {
if (e) {
let { blob: e, url: t, text: n, dataUrl: r } = await qr();
await Promise.resolve(N.value.userOptions.callbacks.svg({
blob: e,
url: t,
text: n,
dataUrl: r
}));
} else await Promise.resolve(Kr());
} finally {
qn.value = !1;
}
}
function Yr(e) {
if (e?.stage === "start") {
Kn.value = !0;
return;
}
if (e?.stage === "end") {
Kn.value = !1;
return;
}
or();
}
async function Xr() {
if (fr("copyAlt", {
config: N.value,
dataset: z.value
}), !N.value.userOptions.callbacks.altCopy) {
console.warn("Vue Data UI - A callback must be set for `altCopy` in userOptions.");
return;
}
await Promise.resolve(N.value.userOptions.callbacks.altCopy({
config: N.value,
dataset: z.value
}));
}
function Zr(e) {
if (!e) return "";
let t = s({
p: N.value.style.chart.layout.legend.prefix,
v: e.total,
s: N.value.style.chart.layout.legend.suffix,
r: N.value.style.chart.layout.legend.roundingValue
}), n = s({
v: e.total / R.value * 100,
s: "%",
r: N.value.style.chart.layout.legend.roundingPercentage
});
return `Root ${e.name}. Value ${t}. ${n} of total.`;
}
function Qr(e) {
if (!e) return "";
let t = s({
p: N.value.style.chart.layout.branches.labels.dataLabels.prefix,
v: e.value,
s: N.value.style.chart.layout.branches.labels.dataLabels.suffix,
r: N.value.style.chart.layout.branches.labels.dataLabels.roundingValue
}), n = s({
v: e.proportionToRoot * 100,
s: "%",
r: N.value.style.chart.layout.legend.roundingPercentage
});
return `Branch ${e.name}. Root ${e.rootName}. Value ${t}. ${n} of root ${e.rootName}.`;
}
function $r(e) {
if (!e) return "";
let t = s({
p: N.value.style.chart.layout.legend.prefix,
v: e.value,
s: N.value.style.chart.layout.legend.suffix,
r: N.value.style.chart.layout.nuts.selected.labels.roundingValue
}), n = s({
v: e.proportionToBranch * 100,
s: "%",
r: N.value.style.chart.layout.nuts.selected.labels.roundingPercentage
});
return `Nut ${e.name}. Branch ${e.branchName}. Root ${e.rootName}. Value ${t}. ${n} of branch ${e.branchName}.`;
}
let ei = d(() => yr.value[M.value.rootIndex] || null), X = d(() => (br.value[M.value.rootIndex] || [])[M.value.branchIndex] || null), ti = d(() => ((xr.value[M.value.rootIndex] || [])[M.value.branchIndex] || [])[M.value.nutIndex] || null), Z = d(() => ei.value), ni = d(() => X.value), ri = d(() => M.value.level === "nut" ? X.value : null), ii = d(() => Jn.value);
function Q() {
if (M.value.level === "root") {
j.value = Zr(ei.value);
return;
}
if (M.value.level === "branch") {
j.value = Qr(X.value);
return;
}
M.value.level === "nut" && (j.value = $r(ti.value));
}
function $() {
M.value = {
level: "root",
rootIndex: 0,
branchIndex: 0,
nutIndex: 0,
locked: !1
}, j.value = "";
}
function ai() {
let e = br.value[M.value.rootIndex] || [];
if (!e.length) {
M.value.branchIndex = 0;
return;
}
M.value.branchIndex >= e.length && (M.value.branchIndex = 0), M.value.branchIndex < 0 && (M.value.branchIndex = e.length - 1);
}
function oi() {
let e = (xr.value[M.value.rootIndex] || [])[M.value.branchIndex] || [];
if (!e.length) {
M.value.nutIndex = 0;
return;
}
M.value.nutIndex >= e.length && (M.value.nutIndex = 0), M.value.nutIndex < 0 && (M.value.nutIndex = e.length - 1);
}
function si(e) {
if (M.value.level === "root") {
let t = yr.value.length;
if (!t) return;
M.value.rootIndex += e, M.value.rootIndex >= t && (M.value.rootIndex = 0), M.value.rootIndex < 0 && (M.value.rootIndex = t - 1), M.value.branchIndex = 0, M.value.nutIndex = 0, Q();
return;
}
if (M.value.level === "branch") {
M.value.branchIndex += e, ai(), M.value.nutIndex = 0, Q();
return;
}
M.value.level === "nut" && (M.value.nutIndex += e, oi(), Q());
}
function ci(e) {
if (e > 0) {
if (M.value.level === "root") {
if (!(br.value[M.value.rootIndex] || []).length) return;
M.value.level = "branch", M.value.branchIndex = 0, M.value.nutIndex = 0, Q();
return;
}
if (M.value.level === "branch") {
if (!((xr.value[M.value.rootIndex] || [])[M.value.branchIndex] || []).length) return;
M.value.level = "nut", M.value.nutIndex = 0, X.value ? Cr(X.value) : Q();
return;
}
return;
}
if (M.value.level === "nut") {
J(), W.value = null, M.value.level = "branch", M.value.nutIndex = 0, Q();
return;
}
M.value.level === "branch" && (W.value = null, G.value = null, M.value.level = "root", M.value.nutIndex = 0, Q());
}
function li() {
if (M.value.level === "root" && ei.value) {
Tr(ei.value), j.value = `${Zr(ei.value)} selected.`;
return;
}
if (M.value.level === "branch" && X.value) {
wr(X.value), j.value = `${Qr(X.value)} selected.`;
return;
}
M.value.level === "nut" && X.value && ti.value && (Cr(X.value), j.value = `${$r(ti.value)} details opened.`);
}
function ui() {
Jn.value = !0, A.value = !1;
}
function di() {
Jn.value = !1, A.value = !1, j.value = "", !G.value && !W.value && !H.value && $();
}
function fi(e) {
let t = e.key === "ArrowUp", n = e.key === "ArrowDown", r = e.key === "ArrowLeft", i = e.key === "ArrowRight", a = e.key === "Enter" || e.key === " ", o = e.key === "Escape";
if (!(!t && !n && !r && !i && !a && !o)) {
if (e.preventDefault(), e.stopPropagation(), Jn.value ||= !0, o) {
K(), $(), A.value = !1;
return;
}
if ((t || n || r || i) && (A.value = !0), t) {
si(-1);
return;
}
if (n) {
si(1);
return;
}
if (r) {
ci(-1);
return;
}
if (i) {
ci(1);
return;
}
a && li();
}
}
let pi = d(() => ({
headers: Y.value.head,
rows: Y.value.body.map((e) => [
e.rootName,
e.rootValue,
s({
v: e.rootToTotal * 100,
s: "%",
r: N.value.table.td.roundingPercentage
}),
e.branchName,
e.branchValue,
s({
v: e.branchToRoot * 100,
s: "%",
r: N.value.table.td.roundingPercentage
}),
s({
v: e.branchToTotal * 100,
s: "%",
r: N.value.table.td.roundingPercentage
}),
e.nutName,
e.nutValue,
s({
v: e.nutToBranch * 100,
s: "%",
r: N.value.table.td.roundingPercentage
}),
s({
v: e.nutToRoot * 100,
s: "%",
r: N.value.table.td.roundingPercentage
}),
s({
v: e.nutToTotal * 100,
s: "%",
r: N.value.table.td.roundingPercentage
})
])
}));
return Se({
getData: dr,
getImage: Ir,
generatePdf: ar,
generateCsv: Ar,
generateImage: or,
generateSvg: Jr,
toggleTable: Nr,
toggleAnnotator: Fr,
toggleFullscreen: Mr,
copyAlt: Xr
}), (e, t) => (x(), m("div", {
class: v(`vue-data-ui-component vue-ui-chestnut ${jr.value ? "vue-data-ui-wrapper-fullscreen" : ""}`),
ref_key: "chestnutChart",
ref: Hn,
id: `vue-ui-chestnut_${k.value}`,
style: b(`font-family:${N.value.style.fontFamily};width:100%; text-align:center;background:${N.value.style.chart.backgroundColor}`),
onMouseenter: t[12] ||= () => E($n)(!0),
onMouseleave: t[13] ||= () => E($n)(!1)
}, [
h("div", {
id: `chart-instructions-${k.value}`,
class: "sr-only"
}, [h("p", null, T(N.value.a11y.translations.keyboardNavigation), 1)], 8, He),
h("div", Ue, T(j.value), 1),
pi.value?.rows?.length ? (x(), f(we, {
key: 0,
uid: k.value,
head: pi.value.headers,
body: pi.value.rows,
notice: N.value.a11y.translations.tableAvailable,
caption: N.value.a11y.translations.tableCaption
}, null, 8, [
"uid",
"head",
"body",
"notice",
"caption"
])) : p("", !0),
N.value.userOptions.buttons.annotator ? (x(), f(E(Pn), {
key: 1,
svgRef: E(tr),
backgroundColor: N.value.style.chart.backgroundColor,
color: N.value.style.chart.color,
active: Pr.value,
isCursorPointer: P.value,
onClose: Fr
}, {
"annotator-action-close": D(() => [w(e.$slots, "annotator-action-close", {}, void 0, !0)]),
"annotator-action-color": D(({ color: t }) => [w(e.$slots, "annotator-action-color", y(_({ color: t })), void 0, !0)]),
"annotator-action-draw": D(({ mode: t }) => [w(e.$slots, "annotator-action-draw", y(_({ mode: t })), void 0, !0)]),
"annotator-action-undo": D(({ disabled: t }) => [w(e.$slots, "annotator-action-undo", y(_({ disabled: t })), void 0, !0)]),
"annotator-action-redo": D(({ disabled: t }) => [w(e.$slots, "annotator-action-redo", y(_({ disabled: t })), void 0, !0)]),
"annotator-action-delete": D(({ disabled: t }) => [w(e.$slots, "annotator-action-delete", y(_({ disabled: t })), void 0, !0)]),
_: 3
}, 8, [
"svgRef",
"backgroundColor",
"color",
"active",
"isCursorPointer"
])) : p("", !0),
sr.value ? (x(), m("div", We, null, 512)) : p("", !0),
N.value.userOptions.show && Vn.value && (E(er) || E(Qn)) ? (x(), f(E(Fn), {
ref_key: "userOptionsRef",
ref: Gn,
key: `user_options_${Un.value}`,
backgroundColor: N.value.style.chart.backgroundColor,
color: N.value.style.chart.color,
isImaging: E(ir),
isPrinting: E(rr),
uid: k.value,
hasPdf: N.value.userOptions.buttons.pdf,
hasImg: N.value.userOptions.buttons.img,
hasSvg: N.value.userOptions.buttons.svg,
hasXls: N.value.userOptions.buttons.csv,
hasTable: N.value.userOptions.buttons.table,
hasFullscreen: N.value.userOptions.buttons.fullscreen,
hasAltCopy: N.value.userOptions.buttons.altCopy,
isFullscreen: jr.value,
titles: { ...N.value.userOptions.buttonTitles },
chartElement: Hn.value,
position: N.value.userOptions.position,
hasAnnotator: N.value.userOptions.buttons.annotator,
isAnnotation: Pr.value,
callbacks: N.value.userOptions.callbacks,
printScale: N.value.userOptions.print.scale,
tableDialog: N.value.table.useDialog,
isCursorPointer: P.value,
onToggleFullscreen: Mr,
onGeneratePdf: E(ar),
onGenerateCsv: Ar,
onGenerateImage: Yr,
onGenerateSvg: Jr,
onToggleTable: Nr,
onToggleAnnotator: Fr,
onCopyAlt: Xr,
style: b({ visibility: E(er) ? E(Qn) ? "visible" : "hidden" : "visible" })
}, ke({ _: 2 }, [
e.$slots.menuIcon ? {
name: "menuIcon",
fn: D(({ isOpen: t, color: n }) => [w(e.$slots, "menuIcon", y(_({
isOpen: t,
color: n
})), void 0, !0)]),
key: "0"
} : void 0,
e.$slots.optionPdf ? {
name: "optionPdf",
fn: D(() => [w(e.$slots, "optionPdf", {}, void 0, !0)]),
key: "1"
} : void 0,
e.$slots.optionCsv ? {
name: "optionCsv",
fn: D(() => [w(e.$slots, "optionCsv", {}, void 0, !0)]),
key: "2"
} : void 0,
e.$slots.optionImg ? {
name: "optionImg",
fn: D(() => [w(e.$slots, "optionImg", {}, void 0, !0)]),
key: "3"
} : void 0,
e.$slots.optionSvg ? {
name: "optionSvg",
fn: D(() => [w(e.$slots, "optionSvg", {}, void 0, !0)]),
key: "4"
} : void 0,
e.$slots.optionTable ? {
name: "optionTable",
fn: D(() => [w(e.$slots, "optionTable", {}, void 0, !0)]),
key: "5"
} : void 0,
e.$slots.optionFullscreen ? {
name: "optionFullscreen",
fn: D(({ toggleFullscreen: t, isFullscreen: n }) => [w(e.$slots, "optionFullscreen", y(_({
toggleFullscreen: t,
isFullscreen: n
})), void 0, !0)]),
key: "6"
} : void 0,
e.$slots.optionAnnotator ? {
name: "optionAnnotator",
fn: D(({ toggleAnnotator: t, isAnnotator: n }) => [w(e.$slots, "optionAnnotator", y(_({
toggleAnnotator: t,
isAnnotator: n
})), void 0, !0)]),
key: "7"
} : void 0,
e.$slots.optionAltCopy ? {
name: "optionAltCopy",
fn: D(({ altCopy: t }) => [w(e.$slots, "optionAltCopy", y(_({ altCopy: t })), void 0, !0)]),
key: "8"
} : void 0,
e.$slots["custom-menu-before"] ? {
name: "custom-menu-before",
fn: D(() => [w(e.$slots, "custom-menu-before", {}, void 0, !0)]),
key: "9"
} : void 0,
e.$slots["custom-menu-after"] ? {
name: "custom-menu-after",
fn: D(() => [w(e.$slots, "custom-menu-after", {}, void 0, !0)]),
key: "10"
} : void 0
]), 1032, [
"backgroundColor",
"color",
"isImaging",
"isPrinting",
"uid",
"hasPdf",
"hasImg",
"hasSvg",
"hasXls",
"hasTable",
"hasFullscreen",
"hasAltCopy",
"isFullscreen",
"titles",
"chartElement",
"position",
"hasAnnotator",
"isAnnotation",
"callbacks",
"printScale",
"tableDialog",
"isCursorPointer",
"onGeneratePdf",
"style"
])) : p("", !0),
h("div", Ge, [I.value.height > 0 ? (x(), m("svg", {
key: 0,
ref_key: "svgRef",
ref: tr,
xmlns: E(le),
"aria-describedby": `chart-instructions-${k.value}`,
class: v({
"vue-data-ui-fullscreen--on": jr.value,
"vue-data-ui-fulscreen--off": !jr.value
}),
viewBox: `0 0 ${I.value.width <= 0 ? 10 : I.value.width} ${I.value.height <= 0 ? 10 : I.value.height}`,
style: b(`overflow:visible;background:transparent;color:${N.value.style.chart.color}`),
tabindex: "0",
onFocus: ui,
onBlur: di,
onKeydown: fi
}, [
g(E(In)),
e.$slots["chart-background"] ? (x(), m("foreignObject", {
key: 0,
x: 0,
y: 0,
width: I.value.width <= 0 ? 10 : I.value.width,
height: I.value.height <= 0 ? 10 : I.value.height,
style: { pointerEvents: "none" }
}, [w(e.$slots, "chart-background", {}, void 0, !0)], 8, qe)) : p("", !0),
H.value ? p("", !0) : (x(), m("g", Je, [N.value.style.chart.layout.title.text ? (x(), m("text", {
key: 0,
"text-anchor": "middle",
fill: N.value.style.chart.layout.title.color,
"font-weight": N.value.style.chart.layout.title.bold ? "bold" : "normal",
"font-size": N.value.style.chart.layout.title.fontSize,
x: I.value.width / 2,
y: 12 + N.value.style.chart.layout.title.fontSize + N.value.style.chart.layout.title.offsetY,
onClick: t[0] ||= () => {
K(), $(), A.value = !1;
}
}, T(N.value.style.chart.layout.title.text), 9, Ye)) : p("", !0), N.value.style.chart.layout.title.subtitle.text ? (x(), m("text", {
key: 1,
"text-anchor": "middle",
fill: N.value.style.chart.layout.title.subtitle.color,
"font-weight": N.value.style.chart.layout.title.subtitle.bold ? "bold" : "normal",
"font-size": N.value.style.chart.layout.title.subtitle.fontSize,
x: I.value.width / 2,
y: 48 + N.value.style.chart.layout.title.subtitle.fontSize + N.value.style.chart.layout.title.subtitle.offsetY,
onClick: t[1] ||= () => {
K(), $(), A.value = !1;
}
}, T(N.value.style.chart.layout.title.subtitle.text), 9, Xe)) : p("", !0)])),
h("defs", null, [
(x(!0), m(u, null, C(z.value, (e, t) => (x(), f(Ce, {
t: "radial",
cx: "50%",
cy: "50%",
r: "50%",
fx: "50%",
fy: "50%",
id: `root_gradient_${k.value}_${e.rootIndex}`,
key: `root_gradient_${k.value}_${e.rootIndex}`,
stops: [[
"0%",
E(n)(E(te)(e.color, .05), 100 - N.value.style.chart.layout.roots.gradientIntensity),
1
], [
"100%",
e.color,
1
]]
}, null, 8, ["id", "stops"]))), 128)),
(x(!0), m(u, null, C(z.value, (e) => (x(), f(Ce, {
t: "linear",
x1: "0%",
y1: "0%",
x2: "100%",
y2: "0%",
id: `branch_gradient_${k.value}_${e.rootIndex}`,
key: `branch_gradient_${k.value}_${e.rootIndex}`,
stops: [[
"0%",
e.color,
1
], [
"100%",
E(n)(E(te)(e.color, .02), 100 - N.value.style.chart.layout.branches.gradientIntensity),
1
]]
}, null, 8, ["id", "stops"]))), 128)),
g(Ce, {
t: "radial",
cx: "50%",
cy: "50%",
r: "50%",
fx: "50%",
fy: "50%",
id: `nutpick_${k.value}`,
stops: [
[
"0%",
E(n)("#FFFFFF", 0),
0
],
[
"80%",
E(n)("#FFFFFF", N.value.style.chart.layout.nuts.selected.gradientIntensity),
1
],
[
"100%",
E(n)("#FFFFFF", 0),
0
]
]
}, null, 8, ["id", "stops"]),
g(Ce, {
t: "radial",
cx: "50%",
cy: "50%",
r: "50%",
fx: "50%",
fy: "50%",
id: `nut_${k.value}`,
stops: [
[
"0%",
E(n)("#FFFFFF", 0),
0
],
[
"80%",
E(n)("#FFFFFF", N.value.style.chart.layout.nuts.gradientIntensity),
1
],
[
"100%",
E(n)("#FFFFFF", 0),
0
]
]
}, null, 8, ["id", "stops"]),
g(Ce, {
t: "radial",
cx: "50%",
cy: "50%",
r: "50%",
fx: "50%",
fy: "50%",
id: `nut_underlayer_${k.value}`,
stops: [
[
"0%",
E(n)(N.value.style.chart.backgroundColor, 100),
1
],
[
"80%",
E(n)(N.value.style.chart.backgroundColor, 60),
1
],
[
"100%",
E(n)(N.value.style.chart.backgroundColor, 0),
1
]
]
}, null, 8, ["id", "stops"])
]),
N.value.style.chart.layout.grandTotal.show ? (x(), m("g", Ze, [h("text", {
x: L.value.seedX,
y: 32 + N.value.style.chart.layout.grandTotal.offsetY,
"font-size": N.value.style.chart.layout.grandTotal.fontSize,
"font-weight": N.value.style.chart.layout.grandTotal.bold ? "bold" : "normal",
fill: N.value.style.chart.layout.grandTotal.color,
"text-anchor": "middle",
onClick: t[2] ||= () => {
K(), $(), A.value = !1;
}
}, T(N.value.style.chart.layout.grandTotal.text), 9, Qe), h("text", {
x: L.value.seedX,
y: 38 + N.value.style.chart.layout.grandTotal.fontSize + N.value.style.chart.layout.grandTotal.offsetY,
"font-size": N.value.style.chart.layout.grandTotal.fontSize,
"font-weight": N.value.style.chart.layout.grandTotal.bold ? "bold" : "normal",
fill: N.value.style.chart.layout.grandTotal.color,
"text-anchor": "middle",
onClick: t[3] ||= () => {
K(), $(), A.value = !1;
}
}, T(E(l)(N.value.style.chart.layout.grandTotal.formatter, R.value, E(s)({
p: N.value.style.chart.layout.grandTotal.prefix,
v: R.value,
s: N.value.style.chart.layout.grandTotal.suffix,
r: N.value.style.chart.layout.grandTotal.roundingValue
}))), 9, $e)])) : p("", !0),
(x(!0), m(u, null, C(V.value, (e) => (x(), m("g", null, [h("defs", null, [g(Ce, {
t: "linear",
id: `link_grad_${e.id}`,
stops: [[
"0%",
e.color,
1
], [
"100%",
E(n)(e.color, N.value.style.chart.layout.links.opacity),
1
]]
}, null, 8, ["id", "stops"])]), h("path", {
d: Lr(e),
stroke: E(n)(e.color, N.value.style.chart.layout.links.opacity),
fill: `url(#link_grad_${e.id})`,
"stroke-linecap": "round",
"stroke-linejoin": "round",
style: b(`opacity:${+!!q(e)}`),
onClick: t[4] ||= () => {
K(), $(), A.value = !1;
}
}, null, 12, et)]))), 256)),
(x(!0), m(u, null, C(B.value, (e) => (x(), m("circle", {
cx: e.x,
cy: e.y,
r: e.r,
fill: N.value.style.chart.layout.roots.underlayerColor,
stroke: "none",
style: b(`cursor:${P.value ? "pointer" : "default"}; opacity:${q(e) ? 1 : .05}`)
}, null, 12, tt))), 256)),
(x(!0), m(u, null, C(B.value, (e, t) => (x(), m("circle", {
"aria-label": Zr(e),
cx: e.x,
cy: e.y,
r: e.r,
fill: N.value.style.chart.layout.roots.useGradient ? `url(#root_gradient_${k.value}_${e.rootIndex})` : e.color,
stroke: N.value.style.chart.layout.roots.stroke,
"stroke-width": N.value.style.chart.layout.roots.strokeWidth,
style: b(`cursor:${P.value ? "pointer" : "default"}; opacity:${q(e) ? 1 : .05}`),
onClick: (t) => Tr(e)
}, null, 12, nt))), 256)),
N.value.style.chart.layout.roots.labels.show ? (x(), m("g", rt, [(x(!0), m(u, null, C(B.value, (e, t) => (x(), m("text", {
x: e.x,
y: e.y + N.value.style.chart.layout.roots.labels.fontSize / 2.6,
"text-anchor": "middle",
"font-size": N.value.style.chart.layout.roots.labels.fontSize,
fill: N.value.style.chart.layout.roots.labels.adaptColorToBackground ? E(ce)(e.color) : N.value.style.chart.layout.roots.labels.color,
"font-weight": "bold",
style: b(`cursor:${P.value ? "pointer" : "default"}; opacity:${q(e) ? 1 : .05}`),
onClick: (t) => Tr(e)
}, T(E(l)(N.value.style.chart.layout.roots.labels.formatter, e.total, E(s)({
p: N.value.style.chart.layout.roots.labels.prefix,
v: e.total,
s: N.value.style.chart.layout.roots.labels.suffix,
r: N.value.style.chart.layout.roots.labels.roundingValue
}), { datapoint: e })), 13, it))), 256)), (x(!0), m(u, null, C(B.value, (e) => (x(), m("g", null, [H.value && e.rootIndex === H.value.rootIndex || W.value && e.rootIndex === W.value.rootIndex || G.value && e.rootIndex === G.value.rootIndex ? (x(), m("g", at, [h("text", {
x: e.x,
y: e.y + e.r + 24,
"text-anchor": "middle",
fill: N.value.style.chart.layout.roots.labels.name.color,
"font-size": N.value.style.chart.layout.roots.labels.name.fontSize,
"font-weight": N.value.style.chart.layout.roots.labels.name.bold ? "bold" : "normal",
onClick: t[5] ||= () => {
K(), $(), A.value = !1;
}
}, T(e.name), 9, ot)])) : p("", !0)]))), 256))])) : p("", !0),
(x(!0), m(u, null, C(V.value, (e) => (x(), m("rect", {
x: e.x1,
y: e.y1,
height: I.value.branchSize,
width: e.x2 - e.x1,
fill: N.value.style.chart.layout.branches.underlayerColor,
rx: N.value.style.chart.layout.branches.borderRadius,
stroke: "none",
style: b(`opacity:${q(e) ? 1 : .05}`),
onClick: (t) => wr(e)
}, null, 12, st))), 256)),
(x(!0), m(u, null, C(V.value, (e, t) => (x(), m("rect", {
"aria-label": Qr(e),
x: e.x1,
y: e.y1,
height: I.value.branchSize,
width: e.x2 - e.x1,
fill: N.value.style.chart.layout.branches.useGradient ? `url(#branch_gradient_${k.value}_${e.rootIndex})` : e.color,
rx: N.value.style.chart.layout.branches.borderRadius,
stroke: N.value.style.chart.layout.branches.stroke,
"stroke-width": N.value.style.chart.layout.branches.strokeWidth,
style: b(`cursor:${P.value ? "pointer" : "default"}; opacity:${q(e) ? 1 : .05}`),
onClick: (t) => wr(e)
}, null, 12, ct))), 256)),
N.value.style.chart.layout.branches.labels.dataLabels.show ? (x(), m("g", lt, [(x(!0), m(u, null, C(V.value, (e) => (x(), m("g", null, [e.proportionToRoot * 100 > N.value.style.chart.layout.branches.labels.dataLabels.hideUnderValue ? (x(), m("text", {
key: 0,
x: e.x1 + 6,
y: e.y1 + I.value.branchSize / 1.5,
"text-anchor": "start",
fill: E(ce)(e.color),
"font-size": N.value.style.chart.layout.branches.labels.dataLabels.fontSize,
"font-weight": "bold",
style: b(`cursor:${P.value ? "pointer" : "default"}; opacity:${q(e) ? 1 : .05}`),
onClick: (t) => wr(e)
}, T(E(l)(N.value.style.chart.layout.branches.labels.dataLabels.formatter, e.value, E(s)({
p: N.value.style.chart.layout.branches.labels.dataLabels.prefix,
v: e.value,
s: N.value.style.chart.layout.branches.labels.dataLabels.suffix,
r: N.value.style.chart.layout.branches.labels.dataLabels.roundingValue
}), { d