vue-data-ui-hq
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
1,044 lines • 58.9 kB
JavaScript
import { useCssVars as qt, computed as m, ref as T, watch as Ht, onMounted as Wt, openBlock as a, createElementBlock as s, normalizeClass as k, unref as t, normalizeStyle as f, createBlock as K, createCommentVNode as b, createSlots as Kt, withCtx as X, renderSlot as F, normalizeProps as nt, guardReactiveProps as rt, createVNode as $t, toDisplayString as c, createElementVNode as n, Fragment as v, renderList as _, createTextVNode as J, withKeys as Jt, nextTick as Ct } from "vue";
import { u as Qt, c as Zt, t as te, a as ee, p as P, b as le, g as it, e as Q, d as ut, o as oe, X as ae, s as S, w as Tt, i as G, f as z, G as zt, m as Nt, j as se, k as V, n as H, q as ne, r as re } from "./index-WrV3SAID.js";
import { u as ie, U as ue } from "./usePrinter-kVpf1iV8.js";
import ce from "./vue-ui-skeleton-Qec_XSRf.js";
import de from "./BaseIcon-MqKW8Nkx.js";
import ye from "./vue-ui-accordion-BQCDXXDs.js";
import { u as St } from "./useNestedProp-Cj0kHD7k.js";
import { _ as he } from "./PackageVersion-1NslmM8M.js";
import { P as fe } from "./PenAndPaper-BF1ZRVm3.js";
import { u as be } from "./useUserOptionState-BIvW1Kz7.js";
import { _ as pe } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const ge = ["id"], ve = {
key: 1,
ref: "noTitle",
class: "vue-data-ui-no-title-space",
style: "height:36px; width: 100%;background:transparent"
}, _e = ["xmlns", "viewBox"], xe = ["width", "height"], me = { key: 1 }, ke = ["fill", "font-weight", "font-size", "x", "y"], we = ["fill", "font-weight", "font-size", "x", "y"], $e = ["id"], Ce = ["stop-color"], Te = ["stop-color"], ze = ["id"], Ne = ["stop-color"], Se = ["stop-color"], Fe = ["id"], Le = ["stop-color"], Ie = ["stop-color"], Pe = ["stop-color"], Ve = ["id"], Oe = ["stop-color"], Me = ["stop-color"], Re = ["stop-color"], Be = ["id"], je = ["stop-color"], Ae = ["stop-color"], Xe = ["stop-color"], Ge = { key: 2 }, Ee = ["x", "y", "font-size", "font-weight", "fill"], Ue = ["x", "y", "font-size", "font-weight", "fill"], De = ["d", "stroke"], Ye = ["cx", "cy", "r", "fill"], qe = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onClick"], He = { key: 3 }, We = ["x", "y", "font-size", "fill", "onClick"], Ke = { key: 0 }, Je = ["x", "y", "fill", "font-size", "font-weight"], Qe = ["x", "y", "height", "width", "fill", "rx", "onClick"], Ze = ["x", "y", "height", "width", "fill", "rx", "stroke", "stroke-width", "onClick"], tl = { key: 4 }, el = ["x", "y", "fill", "font-size", "onClick"], ll = ["d", "stroke"], ol = ["fill", "cx", "cy", "r", "onClick"], al = { key: 5 }, sl = ["x", "y", "font-size", "font-weight", "fill"], nl = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], rl = ["y", "height", "width"], il = { style: { width: "100%", height: "100%", display: "flex", "align-items": "center", "justify-content": "center", "flex-direction": "column" } }, ul = { style: { display: "flex", "align-items": "center", "justify-content": "center", gap: "12px", "flex-wrap": "wrap", "flex-direction": "row" } }, cl = {
viewBox: "0 0 20 20",
height: "16",
width: "16"
}, dl = ["fill"], yl = { key: 7 }, hl = ["y", "height", "width"], fl = { style: { width: "100%", height: "100%", display: "flex", "align-items": "center", "justify-content": "center", "flex-direction": "column" } }, bl = { style: { display: "flex", "align-items": "center", "justify-content": "center", gap: "12px", "flex-wrap": "wrap", "flex-direction": "row" } }, pl = {
viewBox: "0 0 20 20",
height: "16",
width: "16"
}, gl = ["fill"], vl = ["cx", "cy", "fill"], _l = ["d", "stroke"], xl = ["cx", "cy", "fill"], ml = ["d", "stroke"], kl = ["cx", "cy", "fill"], wl = ["cx", "cy", "fill"], $l = ["x", "y", "fill", "font-size", "font-weight"], Cl = ["x", "y", "fill", "font-size", "font-weight"], Tl = ["x", "text-anchor", "y", "fill", "font-size"], zl = ["x", "text-anchor", "y", "fill", "font-size"], Nl = ["x", "text-anchor", "y", "fill", "font-size"], Sl = ["x", "text-anchor", "y", "fill", "font-size"], Fl = ["x", "text-anchor", "y", "fill", "font-size"], Ll = ["x", "y", "font-size", "fill"], Il = ["x", "y", "font-size", "fill"], Pl = ["x", "y", "font-size", "fill"], Vl = {
key: 4,
class: "vue-data-ui-watermark"
}, Ol = {
key: 6,
ref: "source",
dir: "auto"
}, Ml = { style: { "padding-top": "36px", position: "relative" } }, Rl = { class: "vue-ui-data-table" }, Bl = { key: 0 }, jl = ["data-cell"], Al = { style: { display: "flex", "align-items": "center", gap: "5px", "justify-content": "flex-end", width: "100%", "padding-right": "3px" } }, Xl = { key: 0 }, Gl = { key: 1 }, El = ["data-cell"], Ul = { style: { display: "flex", "align-items": "center", gap: "5px", "justify-content": "flex-end", width: "100%", "padding-right": "3px" } }, Dl = { key: 0 }, Yl = { key: 1 }, ql = ["data-cell"], Hl = { style: { display: "flex", "align-items": "center", gap: "5px", "justify-content": "flex-end", width: "100%", "padding-right": "3px" } }, Wl = { key: 0 }, Kl = { key: 1 }, Jl = ["data-cell"], Ql = { style: { display: "flex", "align-items": "center", gap: "5px", "justify-content": "flex-end", width: "100%", "padding-right": "3px" } }, Zl = { key: 0 }, to = { key: 1 }, eo = ["data-cell"], lo = { style: { display: "flex", "align-items": "center", gap: "5px", "justify-content": "flex-end", width: "100%", "padding-right": "3px" } }, oo = { key: 0 }, ao = { key: 1 }, so = ["data-cell"], no = { style: { display: "flex", "align-items": "center", gap: "5px", "justify-content": "flex-end", width: "100%", "padding-right": "3px" } }, ro = { key: 0 }, io = { key: 1 }, uo = ["data-cell"], co = { style: { display: "flex", "align-items": "center", gap: "5px", "justify-content": "flex-end", width: "100%", "padding-right": "3px" } }, yo = { key: 0 }, ho = { key: 1 }, fo = ["data-cell"], bo = { style: { display: "flex", "align-items": "center", gap: "5px", "justify-content": "flex-end", width: "100%", "padding-right": "3px" } }, po = ["data-cell"], go = { style: { display: "flex", "align-items": "center", gap: "5px", "justify-content": "flex-end", width: "100%", "padding-right": "3px" } }, vo = ["data-cell"], _o = { style: { display: "flex", "align-items": "center", gap: "5px", "justify-content": "flex-end", width: "100%", "padding-right": "3px" } }, xo = ["data-cell"], mo = { style: { display: "flex", "align-items": "center", gap: "5px", "justify-content": "flex-end", width: "100%", "padding-right": "3px" } }, ko = ["data-cell"], wo = { style: { display: "flex", "align-items": "center", gap: "5px", "justify-content": "flex-end", width: "100%", "padding-right": "3px" } }, $o = {
__name: "vue-ui-chestnut",
props: {
config: {
type: Object,
default() {
return {};
}
},
dataset: {
type: Array,
default() {
return [];
}
}
},
emits: ["selectRoot", "selectBranch", "selectNut"],
setup(Ft, { expose: Lt, emit: It }) {
qt((o) => ({
"19c36e36": o.tdo
}));
const { vue_ui_chestnut: Pt } = Qt(), O = Ft, D = m(() => !!O.dataset && O.dataset.length), w = T(Zt()), Z = T(null), Vt = T(null), ct = T(0), e = m({
get: () => ht(),
set: (o) => o
}), { userOptionsVisible: tt, setUserOptionsVisibility: dt, keepUserOptionState: yt } = be({ config: e.value });
function ht() {
const o = St({
userConfig: O.config,
defaultConfig: Pt
});
return o.theme ? {
...St({
userConfig: te.vue_ui_chestnut[o.theme] || O.config,
defaultConfig: o
}),
customPalette: ee[o.theme] || P
} : o;
}
Ht(() => O.config, (o) => {
e.value = ht(), tt.value = !e.value.showOnChartHover, mt();
}, { deep: !0 });
const { isPrinting: ft, isImaging: bt, generatePdf: pt, generateImage: gt } = ie({
elementId: `vue-ui-chestnut_${w.value}`,
fileName: e.value.style.chart.layout.title.text || "vue-ui-chestnut"
}), Ot = m(() => e.value.userOptions.show), et = m(() => le(e.value.customPalette)), Y = T({
showTable: e.value.table.show
}), lt = T(null), vt = T(!1), Mt = m(() => e.value.table.responsiveBreakpoint), i = T({
gap: 6,
padding: {
top: 102,
left: 12,
right: 12,
bottom: 96
},
width: 1024,
height: 0,
branchSize: 32,
branchStart: 128
}), C = m(() => ({
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
})), M = m(() => D.value ? O.dataset.flatMap((o) => (o.branches || []).map((u) => u.value || 0)).reduce((o, u) => o + u, 0) : 0), N = m(() => (O.dataset.forEach((o, u) => {
it({
datasetObject: o,
requiredAttributes: ["name", "branches"]
}).forEach((l) => {
Q({
componentName: "VueUiChestnut",
type: "datasetSerieAttribute",
property: l,
index: u
});
}), o.branches && o.branches.forEach((l, r) => {
it({
datasetObject: l,
requiredAttributes: ["name", "value"]
}).forEach((p) => {
Q({
componentName: "VueUiChestnut",
type: "datasetSerieAttribute",
property: p,
index: `${u} - ${r}`
});
}), l.breakdown && l.breakdown.forEach((p, h) => {
it({
datasetObject: p,
requiredAttributes: ["name", "value"]
}).forEach((g) => {
Q({
componentName: "VueUiChestnut",
type: "datasetSerieAttribute",
property: g,
index: `${u} - ${r} - ${h}`
});
});
});
});
}), O.dataset.map((o, u) => {
const l = (o.branches || []).map((r) => r.value || 0).reduce((r, p) => r + p, 0);
return {
...o,
color: ut(o.color) || et.value[u] || P[u] || P[u % P.length],
id: o.id || `root_${u}_${w.value}`,
type: "root",
total: l,
rootIndex: u,
branches: (o.branches || []).map((r, p) => ({
...r,
rootName: o.name,
rootIndex: u,
color: ut(o.color) || et.value[u] || P[u] || P[u % P.length],
value: r.value >= 0 ? r.value : 0,
id: r.id || `branch_${u}_${p}_${w.value}`,
proportionToRoot: r.value / l,
type: "branch",
breakdown: (r.breakdown || []).map((h, g) => ({
table: {
rootName: o.name,
rootValue: l,
rootToTotal: l / M.value,
branchName: r.name,
branchValue: r.value,
branchToTotal: r.value / M.value,
branchToRoot: r.value / l,
nutName: h.name,
nutValue: h.value,
nutToTotal: h.value / M.value,
nutToRoot: h.value / l,
nutToBranch: h.value / r.value
},
...h,
type: "nut",
branchName: r.name,
rootName: o.name,
branchTotal: r.value >= 0 ? r.value : 0,
proportionToBranch: h.value / r.value,
proportionToRoot: h.value / l,
proportionToTree: h.value / M.value,
rootIndex: u,
id: h.id || `nut_${u}_${p}_${g}_${w.value}`,
color: ut(h.color) || et.value[g] || P[g] || P[g % P.length],
value: h.value >= 0 ? h.value : 0
}))
}))
};
})));
function Rt() {
return N.value;
}
const E = It, Bt = m(() => N.value.flatMap((o) => o.branches).length), jt = m(() => Math.max(...N.value.map((o) => o.branches.map((u) => u.value).reduce((u, l) => u + l, 0)))), At = m(() => Math.max(...N.value.flatMap((o) => o.branches.map((u) => u.value)))), _t = m(() => 256 + i.value.padding.left), B = m(() => N.value.sort((o, u) => u.total - o.total).map((o, u) => {
const l = C.value.height / N.value.length / 2, r = o.total / jt.value * (l > 64 ? 64 : l);
return {
...o,
x: C.value.seedX,
y: C.value.top + C.value.height / N.value.length * (u + 1) - (C.value.height / N.value.length / 2 + i.value.gap / 2),
r: r < i.value.branchSize / 2 ? i.value.branchSize / 2 : r
};
})), Xt = m(() => e.value.style.chart.layout.branches.widthRatio <= 0 ? 0.1 : e.value.style.chart.layout.branches.widthRatio > 1.8 ? 1.8 : e.value.style.chart.layout.branches.widthRatio), Gt = m(() => B.value.flatMap((o) => o.branches)), j = m(() => Gt.value.sort((o, u) => u.value - o.value).map((o, u) => ({
...o,
y1: u * i.value.branchSize + C.value.top + u * i.value.gap,
y2: u * i.value.branchSize + i.value.branchSize,
x1: _t.value,
x2: 384 * o.value / At.value * Xt.value + _t.value
})));
function ot(o) {
const u = B.value.find((l) => l.rootIndex === o.rootIndex);
return { x: u.x, y: u.y, r: u.r };
}
const d = T(null), R = T(null), x = T(null), L = T(null);
function $() {
d.value = null, x.value = null, L.value = null;
}
function I(o) {
return L.value ? L.value === null ? !0 : o.type === "root" ? o.id === L.value.id : o.rootIndex === L.value.rootIndex : d.value === null && x.value === null ? !0 : o.type === "nut" ? d.value.id === o.id : o.type === "branch" ? x.value.id === o.id : o.type === "root" ? x.value && x.value.rootIndex === o.rootIndex || d.value && d.value.rootIndex === o.rootIndex : !1;
}
function Et(o) {
$(), Ct(() => {
d.value = o, x.value = o, R.value = Nt(
{ series: o.breakdown, base: 1 },
o.x2 + 24 + e.value.style.chart.layout.nuts.offsetX,
o.y1 + i.value.branchSize / 2,
80,
80
), E("selectNut", o.breakdown);
});
}
function A() {
d.value = null, R.value = null, E("selectNut", null);
}
function at(o) {
x.value && x.value.id === o.id ? (x.value = null, $(), E("selectBranch", null)) : ($(), x.value = o, E("selectBranch", o));
}
function xt(o) {
L.value && L.value.id === o.id ? ($(), E("selectRoot", null)) : ($(), L.value = o, E("selectRoot", o));
}
function Ut() {
return C.value.bottom - (d.value.y1 + 180) < 0 ? 0 : C.value.bottom;
}
function U(o) {
return o.proportion * 100 > e.value.style.chart.layout.nuts.selected.labels.dataLabels.hideUnderValue;
}
function Dt() {
const o = new ResizeObserver((u) => {
u.forEach((l) => {
vt.value = l.contentRect.width < Mt.value;
});
});
lt.value && o.observe(lt.value);
}
Wt(() => {
mt();
});
function mt() {
oe(O.dataset) && Q({
componentName: "VueUiChestnut",
type: "dataset"
});
const o = Bt.value * (i.value.branchSize + i.value.gap) + i.value.padding.top + i.value.padding.bottom;
i.value.height = o, Dt();
}
const y = m(() => {
const o = [
e.value.table.th.translations.rootName,
e.value.table.th.translations.rootValue,
e.value.table.th.translations.rootToTotal,
e.value.table.th.translations.branchName,
e.value.table.th.translations.branchValue,
e.value.table.th.translations.branchToRoot,
e.value.table.th.translations.branchToTotal,
e.value.table.th.translations.nutName,
e.value.table.th.translations.nutValue,
e.value.table.th.translations.nutToBranch,
e.value.table.th.translations.nutToRoot,
e.value.table.th.translations.nutToTotal
], u = N.value.flatMap((l, r) => l.branches.flatMap((p, h) => p.breakdown.flatMap((g, Co) => g.table)));
return { head: o, body: u };
});
function kt() {
Ct(() => {
const o = [[e.value.style.chart.layout.title.text], [e.value.style.chart.layout.title.subtitle.text], [""], ["Grand total", M.value], [""]], u = y.value.head, l = y.value.body.map((h, g) => [
y.value.body[g - 1] && y.value.body[g - 1].rootName === h.rootName ? "" : h.rootName,
y.value.body[g - 1] && y.value.body[g - 1].rootName === h.rootName ? "" : h.rootValue,
y.value.body[g - 1] && y.value.body[g - 1].rootName === h.rootName ? "" : h.rootToTotal,
y.value.body[g - 1] && y.value.body[g - 1].branchName === h.branchName ? "" : h.branchName,
y.value.body[g - 1] && y.value.body[g - 1].branchName === h.branchName ? "" : h.branchValue,
y.value.body[g - 1] && y.value.body[g - 1].branchName === h.branchName ? "" : h.branchToRoot,
y.value.body[g - 1] && y.value.body[g - 1].branchName === h.branchName ? "" : h.branchToTotal,
h.nutName,
h.nutValue,
h.nutToBranch,
h.nutToRoot,
h.nutToTotal
]), r = o.concat([u]).concat(l), p = ne(r);
re({ csvContent: p, title: e.value.style.chart.layout.title.text || "vue-ui-chestnut" });
});
}
const q = T(!1);
function Yt(o) {
q.value = o, ct.value += 1;
}
function wt() {
Y.value.showTable = !Y.value.showTable;
}
const W = T(!1);
function st() {
W.value = !W.value;
}
return Lt({
getData: Rt,
generatePdf: pt,
generateCsv: kt,
generateImage: gt,
toggleTable: wt,
toggleAnnotator: st
}), (o, u) => (a(), s("div", {
class: k(`vue-ui-chestnut ${t(q) ? "vue-data-ui-wrapper-fullscreen" : ""}`),
ref_key: "chestnutChart",
ref: Z,
id: `vue-ui-chestnut_${t(w)}`,
style: f(`font-family:${t(e).style.fontFamily};width:100%; text-align:center;background:${t(e).style.chart.backgroundColor}`),
onMouseenter: u[2] || (u[2] = () => t(dt)(!0)),
onMouseleave: u[3] || (u[3] = () => t(dt)(!1))
}, [
t(e).userOptions.buttons.annotator ? (a(), K(fe, {
key: 0,
parent: t(Z),
backgroundColor: t(e).style.chart.backgroundColor,
color: t(e).style.chart.color,
active: t(W),
onClose: st
}, null, 8, ["parent", "backgroundColor", "color", "active"])) : b("", !0),
t(Ot) ? (a(), s("div", ve, null, 512)) : b("", !0),
t(e).userOptions.show && t(D) && (t(yt) || t(tt)) ? (a(), K(ue, {
ref_key: "details",
ref: Vt,
key: `user_options_${t(ct)}`,
backgroundColor: t(e).style.chart.backgroundColor,
color: t(e).style.chart.color,
isImaging: t(bt),
isPrinting: t(ft),
uid: t(w),
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(q),
titles: { ...t(e).userOptions.buttonTitles },
chartElement: t(Z),
position: t(e).userOptions.position,
hasAnnotator: t(e).userOptions.buttons.annotator,
isAnnotation: t(W),
onToggleFullscreen: Yt,
onGeneratePdf: t(pt),
onGenerateCsv: kt,
onGenerateImage: t(gt),
onToggleTable: wt,
onToggleAnnotator: st,
style: f({
visibility: t(yt) ? t(tt) ? "visible" : "hidden" : "visible"
})
}, Kt({ _: 2 }, [
o.$slots.optionPdf ? {
name: "optionPdf",
fn: X(() => [
F(o.$slots, "optionPdf", {}, void 0, !0)
]),
key: "0"
} : void 0,
o.$slots.optionCsv ? {
name: "optionCsv",
fn: X(() => [
F(o.$slots, "optionCsv", {}, void 0, !0)
]),
key: "1"
} : void 0,
o.$slots.optionImg ? {
name: "optionImg",
fn: X(() => [
F(o.$slots, "optionImg", {}, void 0, !0)
]),
key: "2"
} : void 0,
o.$slots.optionTable ? {
name: "optionTable",
fn: X(() => [
F(o.$slots, "optionTable", {}, void 0, !0)
]),
key: "3"
} : void 0,
o.$slots.optionFullscreen ? {
name: "optionFullscreen",
fn: X(({ toggleFullscreen: l, isFullscreen: r }) => [
F(o.$slots, "optionFullscreen", nt(rt({ toggleFullscreen: l, isFullscreen: r })), void 0, !0)
]),
key: "4"
} : void 0,
o.$slots.optionAnnotator ? {
name: "optionAnnotator",
fn: X(({ toggleAnnotator: l, isAnnotator: r }) => [
F(o.$slots, "optionAnnotator", nt(rt({ toggleAnnotator: l, isAnnotator: r })), void 0, !0)
]),
key: "5"
} : void 0
]), 1032, ["backgroundColor", "color", "isImaging", "isPrinting", "uid", "hasPdf", "hasImg", "hasXls", "hasTable", "hasFullscreen", "isFullscreen", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "onGeneratePdf", "onGenerateImage", "style"])) : b("", !0),
t(i).height > 0 && t(D) ? (a(), s("svg", {
key: 3,
xmlns: t(ae),
class: k({ "vue-data-ui-fullscreen--on": t(q), "vue-data-ui-fulscreen--off": !t(q) }),
viewBox: `0 0 ${t(i).width <= 0 ? 10 : t(i).width} ${t(i).height <= 0 ? 10 : t(i).height}`,
style: f(`overflow:visible;background:transparent;color:${t(e).style.chart.color}`)
}, [
$t(he),
o.$slots["chart-background"] ? (a(), s("foreignObject", {
key: 0,
x: 0,
y: 0,
width: t(i).width <= 0 ? 10 : t(i).width,
height: t(i).height <= 0 ? 10 : t(i).height,
style: {
pointerEvents: "none"
}
}, [
F(o.$slots, "chart-background", {}, void 0, !0)
], 8, xe)) : b("", !0),
t(d) ? b("", !0) : (a(), s("g", me, [
t(e).style.chart.layout.title.text ? (a(), s("text", {
key: 0,
"text-anchor": "middle",
fill: t(e).style.chart.layout.title.color,
"font-weight": t(e).style.chart.layout.title.bold ? "bold" : "normal",
"font-size": t(e).style.chart.layout.title.fontSize,
x: t(i).width / 2,
y: 12 + t(e).style.chart.layout.title.fontSize + t(e).style.chart.layout.title.offsetY,
onClick: $
}, c(t(e).style.chart.layout.title.text), 9, ke)) : b("", !0),
t(e).style.chart.layout.title.subtitle.text ? (a(), s("text", {
key: 1,
"text-anchor": "middle",
fill: t(e).style.chart.layout.title.subtitle.color,
"font-weight": t(e).style.chart.layout.title.subtitle.bold ? "bold" : "normal",
"font-size": t(e).style.chart.layout.title.subtitle.fontSize,
x: t(i).width / 2,
y: 48 + t(e).style.chart.layout.title.subtitle.fontSize + t(e).style.chart.layout.title.subtitle.offsetY,
onClick: $
}, c(t(e).style.chart.layout.title.subtitle.text), 9, we)) : b("", !0)
])),
n("defs", null, [
(a(!0), s(v, null, _(t(N), (l, r) => (a(), s("radialGradient", {
cx: "50%",
cy: "50%",
r: "50%",
fx: "50%",
fy: "50%",
id: `root_gradient_${t(w)}_${l.rootIndex}`
}, [
n("stop", {
offset: "0%",
"stop-color": t(S)(t(Tt)(l.color, 0.05), 100 - t(e).style.chart.layout.roots.gradientIntensity)
}, null, 8, Ce),
n("stop", {
offset: "100%",
"stop-color": l.color
}, null, 8, Te)
], 8, $e))), 256)),
(a(!0), s(v, null, _(t(N), (l) => (a(), s("linearGradient", {
x1: "0%",
y1: "0%",
x2: "100%",
y2: "0%",
id: `branch_gradient_${t(w)}_${l.rootIndex}`
}, [
n("stop", {
offset: "0%",
"stop-color": l.color
}, null, 8, Ne),
n("stop", {
offset: "100%",
"stop-color": t(S)(t(Tt)(l.color, 0.02), 100 - t(e).style.chart.layout.branches.gradientIntensity)
}, null, 8, Se)
], 8, ze))), 256)),
n("radialGradient", {
cx: "50%",
cy: "50%",
r: "50%",
fx: "50%",
fy: "50%",
id: `nutpick_${t(w)}`
}, [
n("stop", {
offset: "0%",
"stop-color": t(S)("#FFFFFF", 0)
}, null, 8, Le),
n("stop", {
offset: "80%",
"stop-color": t(S)("#FFFFFF", t(e).style.chart.layout.nuts.selected.gradientIntensity)
}, null, 8, Ie),
n("stop", {
offset: "100%",
"stop-color": t(S)("#FFFFFF", 0)
}, null, 8, Pe)
], 8, Fe),
n("radialGradient", {
cx: "50%",
cy: "50%",
r: "50%",
fx: "50%",
fy: "50%",
id: `nut_${t(w)}`
}, [
n("stop", {
offset: "0%",
"stop-color": t(S)("#FFFFFF", 0)
}, null, 8, Oe),
n("stop", {
offset: "80%",
"stop-color": t(S)("#FFFFFF", t(e).style.chart.layout.nuts.gradientIntensity)
}, null, 8, Me),
n("stop", {
offset: "100%",
"stop-color": t(S)("#FFFFFF", 0)
}, null, 8, Re)
], 8, Ve),
n("radialGradient", {
cx: "50%",
cy: "50%",
r: "50%",
fx: "50%",
fy: "50%",
id: `nut_underlayer_${t(w)}`
}, [
n("stop", {
offset: "0%",
"stop-color": t(S)(t(e).style.chart.backgroundColor, 100)
}, null, 8, je),
n("stop", {
offset: "80%",
"stop-color": t(S)(t(e).style.chart.backgroundColor, 60)
}, null, 8, Ae),
n("stop", {
offset: "100%",
"stop-color": t(S)(t(e).style.chart.backgroundColor, 0)
}, null, 8, Xe)
], 8, Be)
]),
t(e).style.chart.layout.grandTotal.show ? (a(), s("g", Ge, [
n("text", {
x: t(C).seedX,
y: 32 + t(e).style.chart.layout.grandTotal.offsetY,
"font-size": t(e).style.chart.layout.grandTotal.fontSize,
"font-weight": t(e).style.chart.layout.grandTotal.bold ? "bold" : "normal",
fill: t(e).style.chart.layout.grandTotal.color,
"text-anchor": "middle",
onClick: $
}, c(t(e).style.chart.layout.grandTotal.text), 9, Ee),
n("text", {
x: t(C).seedX,
y: 38 + t(e).style.chart.layout.grandTotal.fontSize + t(e).style.chart.layout.grandTotal.offsetY,
"font-size": t(e).style.chart.layout.grandTotal.fontSize,
"font-weight": t(e).style.chart.layout.grandTotal.bold ? "bold" : "normal",
fill: t(e).style.chart.layout.grandTotal.color,
"text-anchor": "middle",
onClick: $
}, c(t(G)(
t(e).style.chart.layout.grandTotal.formatter,
t(M),
t(z)({
p: t(e).style.chart.layout.grandTotal.prefix,
v: t(M),
s: t(e).style.chart.layout.grandTotal.suffix,
r: t(e).style.chart.layout.grandTotal.roundingValue
})
)), 9, Ue)
])) : b("", !0),
(a(!0), s(v, null, _(t(j), (l) => (a(), s("g", null, [
(a(!0), s(v, null, _(t(i).branchSize, (r, p) => (a(), s("path", {
d: `M
${l.x1},${l.y1 + p}
C${l.x1 - 20},${l.y1 + p}
${l.x1 - 80},${l.y1 + p}
${ot(l).x + ot(l).r / 2}, ${ot(l).y}
`,
stroke: t(S)(l.color, t(e).style.chart.layout.links.opacity),
fill: "none",
"stroke-width": "2",
"shape-rendering": "cirspEdges",
style: f(`opacity:${I(l) ? 1 : 0}`),
onClick: $
}, null, 12, De))), 256))
]))), 256)),
(a(!0), s(v, null, _(t(B), (l) => (a(), s("circle", {
cx: l.x,
cy: l.y,
r: l.r,
fill: t(e).style.chart.layout.roots.underlayerColor,
stroke: "none",
style: f(`cursor:pointer; opacity:${I(l) ? 1 : 0.05}`)
}, null, 12, Ye))), 256)),
(a(!0), s(v, null, _(t(B), (l, r) => (a(), s("circle", {
cx: l.x,
cy: l.y,
r: l.r,
fill: t(e).style.chart.layout.roots.useGradient ? `url(#root_gradient_${t(w)}_${l.rootIndex})` : l.color,
stroke: t(e).style.chart.layout.roots.stroke,
"stroke-width": t(e).style.chart.layout.roots.strokeWidth,
style: f(`cursor:pointer; opacity:${I(l) ? 1 : 0.05}`),
onClick: (p) => xt(l)
}, null, 12, qe))), 256)),
t(e).style.chart.layout.roots.labels.show ? (a(), s("g", He, [
(a(!0), s(v, null, _(t(B), (l, r) => (a(), s("text", {
x: l.x,
y: l.y + t(e).style.chart.layout.roots.labels.fontSize / 2.6,
"text-anchor": "middle",
"font-size": t(e).style.chart.layout.roots.labels.fontSize,
fill: t(e).style.chart.layout.roots.labels.adaptColorToBackground ? t(zt)(l.color) : t(e).style.chart.layout.roots.labels.color,
"font-weight": "bold",
style: f(`cursor:pointer; opacity:${I(l) ? 1 : 0.05}`),
onClick: (p) => xt(l)
}, c(t(G)(
t(e).style.chart.layout.roots.labels.formatter,
l.total,
t(z)({
p: t(e).style.chart.layout.roots.labels.prefix,
v: l.total,
s: t(e).style.chart.layout.roots.labels.suffix,
r: t(e).style.chart.layout.roots.labels.roundingValue
}),
{ datapoint: l }
)), 13, We))), 256)),
(a(!0), s(v, null, _(t(B), (l) => (a(), s("g", null, [
t(d) && l.rootIndex === t(d).rootIndex || t(x) && l.rootIndex === t(x).rootIndex || t(L) && l.rootIndex === t(L).rootIndex ? (a(), s("g", Ke, [
n("text", {
x: l.x,
y: l.y + l.r + 24,
"text-anchor": "middle",
fill: t(e).style.chart.layout.roots.labels.name.color,
"font-size": t(e).style.chart.layout.roots.labels.name.fontSize,
"font-weight": t(e).style.chart.layout.roots.labels.name.bold ? "bold" : "normal",
onClick: $
}, c(l.name), 9, Je)
])) : b("", !0)
]))), 256))
])) : b("", !0),
(a(!0), s(v, null, _(t(j), (l) => (a(), s("rect", {
x: l.x1,
y: l.y1,
height: t(i).branchSize,
width: l.x2 - l.x1,
fill: t(e).style.chart.layout.branches.underlayerColor,
rx: t(e).style.chart.layout.branches.borderRadius,
stroke: "none",
style: f(`opacity:${I(l) ? 1 : 0.05}`),
onClick: (r) => at(l)
}, null, 12, Qe))), 256)),
(a(!0), s(v, null, _(t(j), (l, r) => (a(), s("rect", {
x: l.x1,
y: l.y1,
height: t(i).branchSize,
width: l.x2 - l.x1,
fill: t(e).style.chart.layout.branches.useGradient ? `url(#branch_gradient_${t(w)}_${l.rootIndex})` : l.color,
rx: t(e).style.chart.layout.branches.borderRadius,
stroke: t(e).style.chart.layout.branches.stroke,
"stroke-width": t(e).style.chart.layout.branches.strokeWidth,
style: f(`cursor:pointer; opacity:${I(l) ? 1 : 0.05}`),
onClick: (p) => at(l)
}, null, 12, Ze))), 256)),
t(e).style.chart.layout.branches.labels.dataLabels.show ? (a(), s("g", tl, [
(a(!0), s(v, null, _(t(j), (l) => (a(), s("g", null, [
l.proportionToRoot * 100 > t(e).style.chart.layout.branches.labels.dataLabels.hideUnderValue ? (a(), s("text", {
key: 0,
x: l.x1 + 6,
y: l.y1 + t(i).branchSize / 1.5,
"text-anchor": "start",
fill: t(zt)(l.color),
"font-size": t(e).style.chart.layout.branches.labels.dataLabels.fontSize,
"font-weight": "bold",
style: f(`cursor:pointer; opacity:${I(l) ? 1 : 0.05}`),
onClick: (r) => at(l)
}, c(t(G)(
t(e).style.chart.layout.branches.labels.dataLabels.formatter,
l.value,
t(z)({
p: t(e).style.chart.layout.branches.labels.dataLabels.prefix,
v: l.value,
s: t(e).style.chart.layout.branches.labels.dataLabels.suffix,
r: t(e).style.chart.layout.branches.labels.dataLabels.roundingValue
}),
{ datapoint: l }
)), 13, el)) : b("", !0)
]))), 256))
])) : b("", !0),
(a(!0), s(v, null, _(t(j), (l, r) => (a(), s("g", null, [
(a(!0), s(v, null, _(t(Nt)(
{ series: l.breakdown, base: 1 },
l.x2 + 24 + t(e).style.chart.layout.nuts.offsetX,
l.y1 + t(i).branchSize / 2,
t(i).branchSize / 3,
t(i).branchSize / 3
), (p, h) => (a(), s("path", {
d: p.path,
stroke: p.color,
"stroke-width": 10,
fill: "none",
style: f(`opacity:${I(l) ? 1 : 0.1}`)
}, null, 12, ll))), 256)),
n("circle", {
fill: t(e).style.chart.layout.nuts.useGradient ? `url(#nut_${t(w)})` : "transparent",
cx: l.x2 + 24 + t(e).style.chart.layout.nuts.offsetX,
cy: l.y1 + t(i).branchSize / 2,
r: t(i).branchSize / 2 + 2,
onClick: (p) => Et(l),
style: f(`cursor:pointer;opacity:${I(l) ? 1 : 0.1}`)
}, null, 12, ol)
]))), 256)),
t(e).style.chart.layout.branches.labels.show && !t(x) ? (a(), s("g", al, [
(a(!0), s(v, null, _(t(j), (l) => (a(), s("text", {
x: l.x2 + t(i).branchSize + 24 + t(e).style.chart.layout.nuts.offsetX,
y: l.y1 + t(i).branchSize / 2 + 5,
"font-size": t(e).style.chart.layout.branches.labels.fontSize,
"font-weight": t(e).style.chart.layout.branches.labels.bold ? "bold" : "normal",
fill: t(e).style.chart.layout.branches.labels.color,
"text-anchor": "start",
style: f(`opacity:${I(l) ? 1 : 0.1}`)
}, c(l.name), 13, sl))), 256))
])) : b("", !0),
n("line", {
x1: 256 + t(i).padding.left,
x2: 256 + t(i).padding.left,
y1: t(C).top,
y2: t(C).bottom,
stroke: t(e).style.chart.layout.verticalSeparator.stroke,
"stroke-width": t(e).style.chart.layout.verticalSeparator.strokeWidth
}, null, 8, nl),
!t(d) && !t(x) ? (a(), s("foreignObject", {
key: 6,
x: 0,
y: t(C).bottom,
height: t(i).height - t(C).bottom,
width: t(i).width,
style: { overflow: "visible" },
onClick: $
}, [
n("div", il, [
n("div", ul, [
(a(!0), s(v, null, _(t(B), (l) => (a(), s("div", {
style: f(`display:flex;align-items:center;gap:3px;flex-direction:row;font-size:${t(e).style.chart.layout.legend.fontSize}px;`)
}, [
(a(), s("svg", cl, [
n("circle", {
cx: "10",
cy: "10",
r: "10",
fill: l.color,
stroke: "none"
}, null, 8, dl)
])),
n("span", null, c(l.name) + ":", 1),
n("b", null, c(t(G)(
t(e).style.chart.layout.roots.labels.formatter,
l.total,
t(z)({
p: t(e).style.chart.layout.legend.prefix,
v: l.total,
s: t(e).style.chart.layout.legend.suffix,
r: t(e).style.chart.layout.legend.roundingValue
}),
{ datapoint: l }
)), 1),
J(" (" + c(t(z)({
v: l.total / t(M) * 100,
s: "%",
r: t(e).style.chart.layout.legend.roundingPercentage
})) + ") ", 1)
], 4))), 256))
])
])
], 8, rl)) : b("", !0),
t(d) && t(R) ? (a(), s("g", yl, [
(a(), s("foreignObject", {
x: 0,
y: Ut(),
height: t(i).height - t(C).bottom,
width: t(i).width,
style: { overflow: "visible" },
onClick: $
}, [
n("div", fl, [
n("b", null, c(t(d).name), 1),
n("div", bl, [
(a(!0), s(v, null, _(t(d).breakdown, (l, r) => (a(), s("div", {
style: f(`display:flex;align-items:center;gap:6px;flex-direction:row;font-size:${t(e).style.chart.layout.legend.fontSize}px;`)
}, [
(a(), s("svg", pl, [
n("circle", {
cx: "10",
cy: "10",
r: "10",
fill: l.color,
stroke: "none"
}, null, 8, gl)
])),
n("span", null, [
J(c(l.name) + ": ", 1),
n("b", null, c(t(e).style.chart.layout.legend.prefix) + " " + c(l.value.toFixed(t(e).style.chart.layout.nuts.selected.labels.roundingValue)) + " " + c(t(e).style.chart.layout.legend.suffix), 1),
J(" (" + c((l.proportionToBranch * 100).toFixed(t(e).style.chart.layout.nuts.selected.labels.roundingPercentage)) + "%)", 1)
])
], 4))), 256))
])
])
], 8, hl)),
n("circle", {
cx: t(d).x2 + 24 + t(e).style.chart.layout.nuts.offsetX,
cy: t(d).y1 + t(i).branchSize / 2,
r: 256,
fill: `url(#nut_underlayer_${t(w)})`,
onClick: A,
class: k(t(e).style.chart.layout.nuts.selected.useMotion ? "vue-ui-chestnut-animated" : "")
}, null, 10, vl),
(a(!0), s(v, null, _(t(R), (l) => (a(), s("g", null, [
U(l) ? (a(), s("path", {
key: 0,
d: t(se)(
l,
{
x: t(d).x2 + 24 + t(e).style.chart.layout.nuts.offsetX,
y: t(d).y1 + t(i).branchSize / 2
},
16,
16,
!1,
!1,
64
),
stroke: l.color,
"stroke-width": "1",
"stroke-linecap": "round",
"stroke-linejoin": "round",
fill: "none",
class: k(t(e).style.chart.layout.nuts.selected.useMotion ? "vue-ui-chestnut-animated" : "")
}, null, 10, _l)) : b("", !0)
]))), 256)),
n("circle", {
cx: t(d).x2 + 24 + t(e).style.chart.layout.nuts.offsetX,
cy: t(d).y1 + t(i).branchSize / 2,
r: 118,
fill: t(e).style.chart.backgroundColor,
onClick: A,
class: k(t(e).style.chart.layout.nuts.selected.useMotion ? "vue-ui-chestnut-animated" : "")
}, null, 10, xl),
(a(!0), s(v, null, _(t(R), (l) => (a(), s("path", {
d: l.path,
stroke: l.color,
"stroke-width": 64,
fill: "none",
onClick: A,
class: k(t(e).style.chart.layout.nuts.selected.useMotion ? "vue-ui-chestnut-animated" : "")
}, null, 10, ml))), 256)),
n("circle", {
cx: t(d).x2 + 24 + t(e).style.chart.layout.nuts.offsetX,
cy: t(d).y1 + t(i).branchSize / 2,
r: 100,
fill: `url(#nutpick_${t(w)})`,
onClick: A,
class: k(t(e).style.chart.layout.nuts.selected.useMotion ? "vue-ui-chestnut-animated" : "")
}, null, 10, kl),
n("circle", {
cx: t(d).x2 + 24 + t(e).style.chart.layout.nuts.offsetX,
cy: t(d).y1 + t(i).branchSize / 2,
r: 48,
fill: t(e).style.chart.backgroundColor,
onClick: A,
class: k(t(e).style.chart.layout.nuts.selected.useMotion ? "vue-ui-chestnut-animated" : "")
}, null, 10, wl),
n("text", {
x: t(d).x2 + 24 + t(e).style.chart.layout.nuts.offsetX,
y: t(d).y1 + 8,
fill: t(e).style.chart.layout.nuts.selected.labels.core.total.color,
"font-size": t(e).style.chart.layout.nuts.selected.labels.core.total.fontSize,
"font-weight": t(e).style.chart.layout.nuts.selected.labels.core.total.bold ? "bold" : "normal",
"text-anchor": "middle",
onClick: A,
class: k(t(e).style.chart.layout.nuts.selected.useMotion ? "vue-ui-chestnut-animated" : "")
}, c(t(e).translations.total), 11, $l),
n("text", {
x: t(d).x2 + 24 + t(e).style.chart.layout.nuts.offsetX,
y: t(d).y1 + 36,
fill: t(e).style.chart.layout.nuts.selected.labels.core.value.color,
"font-size": t(e).style.chart.layout.nuts.selected.labels.core.value.fontSize,
"font-weight": t(e).style.chart.layout.nuts.selected.labels.core.value.bold ? "bold" : "normal",
"text-anchor": "middle",
onClick: A,
class: k(t(e).style.chart.layout.nuts.selected.useMotion ? "vue-ui-chestnut-animated" : "")
}, c(t(G)(
t(e).style.chart.layout.nuts.selected.labels.dataLabels.formatter,
t(d).value,
t(z)({
p: t(e).style.chart.layout.nuts.selected.labels.core.value.prefix,
v: t(d).value,
s: t(e).style.chart.layout.nuts.selected.labels.core.value.suffix,
r: t(e).style.chart.layout.nuts.selected.roundingValue
}),
{ datapoint: t(d) }
)), 11, Cl),
(a(!0), s(v, null, _(t(R), (l, r) => (a(), s("g", null, [
U(l) ? (a(), s("text", {
key: 0,
x: t(V)(l).x,
"text-anchor": t(V)(l).anchor,
y: t(H)(l),
fill: l.color,
"font-size": t(e).style.chart.layout.nuts.selected.labels.dataLabels.fontSize,
style: f(`font-weight:${t(e).style.chart.layout.nuts.selected.labels.dataLabels.bold ? "bold" : ""}`),
class: k(t(e).style.chart.layout.nuts.selected.useMotion ? "vue-ui-chestnut-animated" : "")
}, " ⬤ ", 14, Tl)) : b("", !0),
U(l) ? (a(), s("text", {
key: 1,
x: t(V)(l, !0).x,
"text-anchor": t(V)(l, !0).anchor,
y: t(H)(l),
fill: t(e).style.chart.layout.nuts.selected.labels.dataLabels.color,
"font-size": t(e).style.chart.layout.nuts.selected.labels.dataLabels.fontSize,
style: f(`font-weight:${t(e).style.chart.layout.nuts.selected.labels.dataLabels.bold ? "bold" : ""}`),
class: k(t(e).style.chart.layout.nuts.selected.useMotion ? "vue-ui-chestnut-animated" : "")
}, c(t(d).breakdown[r].name), 15, zl)) : b("", !0)
]))), 256)),
(a(!0), s(v, null, _(t(R), (l, r) => (a(), s("g", null, [
U(l) ? (a(), s("text", {
key: 0,
x: t(V)(l, !0).x,
"text-anchor": t(V)(l).anchor,
y: t(H)(l) + t(e).style.chart.layout.nuts.selected.labels.dataLabels.fontSize,
fill: t(e).style.chart.layout.nuts.selected.labels.dataLabels.color,
"font-size": t(e).style.chart.layout.nuts.selected.labels.dataLabels.fontSize,
style: f(`font-weight:${t(e).style.chart.layout.nuts.selected.labels.dataLabels.bold ? "bold" : ""}`),
class: k(t(e).style.chart.layout.nuts.selected.useMotion ? "vue-ui-chestnut-animated" : "")
}, c(t(z)({
v: t(d).breakdown[r].value / t(d).value * 100,
s: "%",
r: t(e).style.chart.layout.nuts.selected.labels.roundingPercentage
})) + " " + c(t(e).translations.of) + " " + c(t(d).breakdown[r].branchName) + " " + c(t(G)(
t(e).style.chart.layout.nuts.selected.labels.dataLabels.formatter,
t(d).breakdown[r].value,
t(z)({
p: t(e).style.chart.layout.nuts.selected.labels.dataLabels.prefix,
v: t(d).breakdown[r].value,
s: t(e).style.chart.layout.nuts.selected.labels.dataLabels.suffix,
r: t(e).style.chart.layout.nuts.selected.roundingValue
}),
{ datapoint: t(R), seriesIndex: r }
)), 15, Nl)) : b("", !0),
U(l) ? (a(), s("text", {
key: 1,
x: t(V)(l, !0).x,
"text-anchor": t(V)(l).anchor,
y: t(H)(l) + t(e).style.chart.layout.nuts.selected.labels.dataLabels.fontSize * 2,
fill: t(e).style.chart.layout.nuts.selected.labels.dataLabels.color,
"font-size": t(e).style.chart.layout.nuts.selected.labels.dataLabels.fontSize,
style: f(`font-weight:${t(e).style.chart.layout.nuts.selected.labels.dataLabels.bold ? "bold" : ""}`),
class: k(t(e).style.chart.layout.nuts.selected.useMotion ? "vue-ui-chestnut-animated" : "")
}, c(t(z)({
v: t(d).breakdown[r].proportionToRoot * 100,
s: "%",
r: t(e).style.chart.layout.nuts.selected.labels.roundingPercentage
})) + " " + c(t(e).translations.of) + " " + c(t(d).breakdown[r].rootName), 15, Sl)) : b("", !0),
U(l) ? (a(), s("text", {
key: 2,
x: t(V)(l, !0).x,
"text-anchor": t(V)(l).anchor,
y: t(H)(l) + t(e).style.chart.layout.nuts.selected.labels.dataLabels.fontSize * 3,
fill: t(e).style.chart.layout.nuts.selected.labels.dataLabels.color,
"font-size": t(e).style.chart.layout.nuts.selected.labels.dataLabels.fontSize,
style: f(`font-weight:${t(e).style.chart.layout.nuts.selected.labels.dataLabels.bold ? "bold" : ""}`),
class: k(t(e).style.chart.layout.nuts.selected.useMotion ? "vue-ui-chestnut-animated" : "")
}, c(t(z)({
v: t(d).breakdown[r].proportionToTree * 100,
s: "%",
r: t(e).style.chart.layout.nuts.selected.labels.roundingPercentage
})) + " " + c(t(e).translations.proportionToTree), 15, Fl)) : b("", !0)
]))), 256))
])) : b("", !0),
(a(!0), s(v, null, _(t(j), (l) => (a(), s("g", null, [
t(x) && t(x).id === l.id && !t(d) ? (a(), s("text", {
key: 0,
x: l.x1 + 6,
y: l.y1 + t(i).branchSize + 24,
"font-weight": "bold",
"text-anchor": "start",
"font-size": t(e).style.chart.layout.branches.labels.dataLabels.fontSize,
fill: t(e).style.chart.layout.branches.labels.color,
onClick: $
}, c(l.name) + ": " + c(t(G)(
t(e).style.chart.layout.branches.labels.dataLabels.formatter,
l.value,
t(z)({
p: t(e).style.chart.layout.branches.labels.dataLabels.prefix,
v: l.value,
s: t(e).style.chart.layout.branches.labels.dataLabels.suffix,
r: t(e).style.chart.layout.branches.labels.dataLabels.roundingValue
}),
{ datapoint: l }
)), 9, Ll)) : b("", !0),
t(x) && t(x).id === l.id && !t(d) ? (a(), s("text", {
key: 1,
x: l.x1 + 6,
y: l.y1 + t(i).branchSize + 48,
"text-anchor": "start",
"font-size": t(e).style.chart.layout.branches.labels.dataLabels.fontSize,
fill: t(e).style.chart.layout.branches.labels.color,
onClick: $
}, c(t(z)({
v: l.proportionToRoot * 100,
s: "%",
r: t(e).style.chart.layout.branches.labels.dataLabels.roundingPercentage
})) + " " + c(t(e).translations.of) + " " + c(l.rootName), 9, Il)) : b("", !0),
t(x) && t(x).id === l.id && !t(d) ? (a(), s("text", {
key: 2,
x: l.x1 + 6,
y: l.y1 + t(i).branchSize + 72,
"text-anchor": "start",
"font-size": t(e).style.chart.layout.branches.labels.dataLabels.fontSize,
fill: t(e).style.chart.layout.branches.labels.color,
onClick: $
}, c(t(z)({
v: l.value / t(M) * 100,
s: "%",
r: t(e).style.chart.layout.branches.labels.dataLabels.roundingPercentage
})) + " " + c(t(e).translations.proportionToTree), 9, Pl)) : b("", !0)
]))), 256)),
F(o.$slots, "svg", { svg: t(i) }, void 0, !0)
], 14, _e)) : b("", !0),
o.$slots.watermark ? (a(), s("div", Vl, [
F(o.$slots, "watermark", nt(rt({ isPrinting: t(ft) || t(bt) })), void 0, !0)
])) : b("", !0),
t(D) ? b("", !0) : (a(), K(ce, {
key: 5,
config: {
type: "chestnut",
style: {
backgroundColor: t(e).style.chart.backgroundColor,
chestnut: {
color: "#CCCCCC"
}
}
}
}, null, 8, ["config"])),
F(o.$slots, "legend", { legend: t(N) }, void 0, !0),
o.$slots.source ? (a(), s("div", Ol, [
F(o.$slots, "source", {}, v