vue-data-ui-hq
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
1,098 lines • 54 kB
JavaScript
import { computed as T, ref as S, watch as Ee, onMounted as He, openBlock as i, createElementBlock as d, normalizeClass as Fe, normalizeStyle as D, unref as e, createBlock as G, createCommentVNode as y, createSlots as Ze, withCtx as N, renderSlot as j, normalizeProps as re, guardReactiveProps as ie, createVNode as qe, createElementVNode as u, Fragment as _, renderList as m, toDisplayString as P, mergeProps as Me, createTextVNode as Xe, nextTick as Re } from "vue";
import { u as Ye, c as Pe, t as Je, a as Ke, p as Y, b as Qe, d as et, o as tt, e as J, g as ae, l as U, m as je, f as z, X as ot, s as g, h as K, i as Q, j as Se, k as A, n as ee, q as lt, r as st } from "./index-WrV3SAID.js";
import { _ as nt } from "./Title-BR-xoRp4.js";
import { u as rt, U as it } from "./usePrinter-kVpf1iV8.js";
import at from "./vue-ui-skeleton-Qec_XSRf.js";
import { D as ut } from "./DataTable-DNPvKWC0.js";
import dt from "./vue-ui-accordion-BQCDXXDs.js";
import { u as Te } from "./useNestedProp-Cj0kHD7k.js";
import { _ as ct } from "./PackageVersion-1NslmM8M.js";
import { P as ht } from "./PenAndPaper-BF1ZRVm3.js";
import { u as ft } from "./useUserOptionState-BIvW1Kz7.js";
import { _ as pt } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const vt = ["id"], yt = {
key: 1,
style: "width:100%;background:transparent"
}, kt = ["xmlns", "viewBox"], gt = ["width", "height"], $t = ["id"], _t = ["stop-color"], mt = ["stop-color"], bt = ["id"], xt = ["stop-color"], wt = ["stop-color"], Ct = ["id"], Ft = ["stop-color"], Mt = ["stop-color"], Pt = ["id"], jt = ["stop-color"], St = ["stop-color"], Tt = ["stop-color"], zt = { key: 1 }, Dt = ["id"], Nt = ["stop-color"], Ot = ["stop-color"], Bt = ["id"], At = ["stop-color"], Lt = ["stop-color"], It = ["id"], Wt = ["stop-color"], Vt = ["stop-color"], Gt = ["id"], Ut = ["x", "y", "font-size", "font-weight", "fill"], Et = ["x", "y"], Ht = ["d", "stroke"], Zt = ["d", "stroke"], qt = { key: 4 }, Xt = { key: 0 }, Rt = ["stroke-dasharray", "d", "stroke", "stroke-width"], Yt = ["stroke-dasharray", "d", "stroke", "stroke-width"], Jt = ["stroke-dasharray", "d", "stroke", "stroke-width"], Kt = ["stroke-dasharray", "d", "stroke", "stroke-width"], Qt = { key: 1 }, eo = ["d", "stroke", "stroke-width", "fill"], to = ["d", "stroke", "stroke-width", "fill"], oo = ["d", "stroke", "stroke-width", "fill"], lo = { key: 2 }, so = ["d", "fill", "onMouseenter", "onClick"], no = ["d", "fill", "onMouseenter", "onClick"], ro = ["d", "fill", "onMouseenter", "onClick"], io = ["d", "onMouseenter", "onClick"], ao = ["d"], uo = ["d", "stroke"], co = ["onClick"], ho = ["stroke", "d"], fo = ["cx", "cy", "fill", "stroke"], po = ["x", "y", "width", "height"], vo = { key: 1 }, yo = ["d", "stroke"], ko = ["d", "fill", "stroke"], go = ["id"], $o = ["stop-color"], _o = ["stop-color"], mo = ["cx", "cy", "fill"], bo = ["cx", "cy", "fill"], xo = { key: 0 }, wo = ["text-anchor", "x", "y", "fill", "font-size"], Co = ["text-anchor", "x", "y", "fill", "font-size"], Fo = { key: 2 }, Mo = ["d", "fill", "stroke"], Po = { key: 5 }, jo = { key: 0 }, So = ["stroke-dasharray", "d", "stroke", "stroke-width"], To = ["stroke-dasharray", "d", "stroke", "stroke-width"], zo = ["stroke-dasharray", "d", "stroke", "stroke-width"], Do = ["stroke-dasharray", "d", "stroke", "stroke-width"], No = ["d", "stroke", "stroke-width", "fill"], Oo = ["d", "stroke", "stroke-width", "fill"], Bo = { key: 1 }, Ao = ["onClick"], Lo = ["id"], Io = ["stop-color"], Wo = ["stop-color"], Vo = ["id"], Go = ["stop-color"], Uo = ["stop-color"], Eo = ["stop-color"], Ho = ["stop-color"], Zo = ["stop-color"], qo = ["onMouseenter", "onClick", "d", "fill"], Xo = ["onMouseenter", "onClick", "d"], Ro = ["onMouseenter", "onClick", "d", "fill"], Yo = ["onClick"], Jo = ["stroke", "d"], Ko = ["cx", "cy", "fill", "stroke"], Qo = ["x", "y", "width", "height"], el = { key: 1 }, tl = ["d", "stroke"], ol = ["d", "fill", "stroke"], ll = ["id"], sl = ["stop-color"], nl = ["stop-color"], rl = ["cx", "cy", "fill"], il = ["cx", "cy", "fill"], al = { key: 0 }, ul = ["text-anchor", "x", "y", "fill", "font-size"], dl = ["text-anchor", "x", "y", "fill", "font-size"], cl = { key: 2 }, hl = ["d", "fill", "stroke"], fl = {
key: 4,
class: "vue-data-ui-watermark"
}, pl = {
key: 6,
ref: "source",
dir: "auto"
}, vl = ["innerHTML"], yl = {
__name: "vue-ui-3d-bar",
props: {
config: {
type: Object,
default() {
return {};
}
},
dataset: {
type: Object,
default() {
return {};
}
}
},
emits: ["selectDatapoint"],
setup(ze, { expose: De, emit: Ne }) {
const { vue_ui_3d_bar: Oe } = Ye(), $ = ze, H = Ne, Z = T(() => !!$.dataset && Object.keys($.dataset).length), b = S(Pe()), Be = S(null), te = S(null), L = S(!1), ue = S(0), de = S(0), o = T({
get: () => fe(),
set: (r) => r
}), { userOptionsVisible: oe, setUserOptionsVisibility: ce, keepUserOptionState: he } = ft({ config: o.value });
function fe() {
const r = Te({
userConfig: $.config,
defaultConfig: Oe
});
return r.theme ? {
...Te({
userConfig: Je.vue_ui_3d_bar[r.theme] || $.config,
defaultConfig: r
}),
customPalette: Ke[r.theme] || Y
} : r;
}
Ee(() => $.config, (r) => {
o.value = fe(), oe.value = !o.value.showOnChartHover, ge(), ue.value += 1, de.value += 1;
}, { deep: !0 });
const { isPrinting: pe, isImaging: ve, generatePdf: ye, generateImage: ke } = rt({
elementId: `3d_bar_${b.value}`,
fileName: o.value.style.chart.title.text || "vue-ui-3d-bar"
}), Ae = T(() => Qe(o.value.customPalette)), q = S({
showTable: o.value.table.show
}), F = T(() => $.dataset.series && $.dataset.series.length), s = T(() => ({
height: o.value.style.chart.box.dimensions.height,
width: o.value.style.chart.box.dimensions.width,
absoluteWidth: o.value.style.chart.box.dimensions.width * (F.value ? 2 : 1),
top: o.value.style.chart.box.dimensions.top,
bottom: o.value.style.chart.box.dimensions.bottom,
left: o.value.style.chart.box.dimensions.left,
right: o.value.style.chart.box.dimensions.right,
perspective: o.value.style.chart.box.dimensions.perspective
})), C = T(() => {
if (F.value) {
const r = $.dataset.series.map((l) => l.value || 0).reduce((l, a) => l + a, 0), n = $.dataset.series.map((l, a) => ({
...l,
id: Pe(),
proportion: (l.value || 0) / r,
color: et(l.color) || Ae.value[a] || Y[a] || Y[a % Y.length],
breakdown: l.breakdown ? l.breakdown.sort((c, k) => k.value - c.value) : null
})).sort((l, a) => a.value - l.value), t = [];
let h = 0;
for (let l = 0; l < n.length; l += 1)
t.push({
...n[l],
fill: Le(h, n[l].proportion, n[l].breakdown, n[l].color)
}), h += n[l].proportion;
return t;
}
return null;
}), O = T(() => ({
right: `M${s.value.width / 2},${s.value.top} ${s.value.width - s.value.right}, ${s.value.top + s.value.perspective} ${s.value.width - s.value.right},${s.value.height - s.value.bottom - s.value.perspective} ${s.value.width / 2},${s.value.height - s.value.bottom}`,
left: `M${s.value.width / 2},${s.value.top} ${s.value.left},${s.value.top + s.value.perspective} ${s.value.left},${s.value.height - s.value.bottom - s.value.perspective} ${s.value.width / 2},${s.value.height - s.value.bottom}`,
side: `M${s.value.width / 2},${s.value.height - s.value.bottom} ${s.value.width / 2},${s.value.top + s.value.perspective * 2}`,
topSides: `M${s.value.left},${s.value.top + s.value.perspective} ${s.value.width / 2},${s.value.top + s.value.perspective * 2} ${s.value.width - s.value.right},${s.value.top + s.value.perspective}`,
tubeTop: `M${s.value.left},${s.value.top + s.value.perspective} C ${s.value.left},${s.value.top - s.value.perspective / 3} ${s.value.width - s.value.right},${s.value.top - s.value.perspective / 3} ${s.value.width - s.value.right},${s.value.top + s.value.perspective} C ${s.value.width - s.value.right},${s.value.top + s.value.perspective * 2.3} ${s.value.left},${s.value.top + s.value.perspective * 2.3} ${s.value.left},${s.value.top + s.value.perspective}`,
tubeLeft: `M${s.value.left},${s.value.top + s.value.perspective} ${s.value.left},${s.value.height - s.value.bottom - s.value.perspective}`,
tubeRight: `M${s.value.width - s.value.right},${s.value.top + s.value.perspective} ${s.value.width - s.value.right},${s.value.height - s.value.bottom - s.value.perspective}`,
tubeBottom: `M${s.value.width - s.value.right},${s.value.height - s.value.bottom - s.value.perspective} C ${s.value.width - s.value.right},${s.value.height} ${s.value.left},${s.value.height} ${s.value.left},${s.value.height - s.value.bottom - s.value.perspective}`
})), W = S(o.value.style.chart.animation.use ? 0 : $.dataset.percentage);
He(() => {
ge();
let r = 0, n = o.value.style.chart.animation.speed, t = 5e-3 * o.value.style.chart.animation.acceleration;
function h() {
W.value += n + r, r += t, W.value < $.dataset.percentage ? requestAnimationFrame(h) : W.value = $.dataset.percentage;
}
o.value.style.chart.animation.use && (W.value = 0, h());
});
function ge() {
tt($.dataset) ? J({
componentName: "VueUi3dBar",
type: "dataset"
}) : $.dataset.series ? $.dataset.series.forEach((r, n) => {
ae({
datasetObject: r,
requiredAttributes: ["name", "value"]
}).forEach((t) => {
J({
componentName: "VueUi3dBar",
type: "datasetSerieAttribute",
property: t,
index: n
});
}), r.breakdown && r.breakdown.forEach((t, h) => {
ae({
datasetObject: t,
requiredAttributes: ["name", "value"]
}).forEach((l) => {
J({
componentName: "VueUi3dBar",
type: "datasetSerieAttribute",
property: l,
index: `${n} - ${h}`
});
});
});
}) : ae({
datasetObject: $.dataset,
requiredAttributes: ["percentage"]
}).forEach((r) => {
J({
componentName: "VueUi3dBar",
type: "datasetAttribute",
property: r
});
});
}
function Le(r, n, t, h) {
const l = s.value.height - s.value.bottom - s.value.top - s.value.perspective * 2, { width: a, height: c, bottom: k, right: w, left: p, perspective: v } = s.value, f = k + l * r, ne = c - f - v - l * n / 2, Ve = ne > s.value.height / 2 ? "top" : "bottom", be = 64, Ge = !!t;
let xe = null, we = null;
return Ge && (t = t.map((Ce, Ue) => ({
...Ce,
value: Ce.value || 0,
color: U(h, Ue / t.length)
})), xe = je(
{ series: t },
a + s.value.absoluteWidth / 4 - 14,
Ve === "top" ? ne - be : ne + be,
28,
28,
1.99999,
2,
1,
360,
105.25,
14
), we = je(
{ series: t },
a - w + 20,
c - f - v - l * n / 2,
6,
6,
1.99999,
2,
1,
360,
105.25,
6
)), {
donut: xe,
miniDonut: we,
sidePointer: {
x: a - w,
y: c - f - v - l * n / 2,
topY: c - f - v - l * n,
height: l * n
},
apexBottom: { y: c - f, x: a / 2 },
apexTop: { y: c - f - l * n, x: a / 2 },
right: `M${a / 2},${c - f} ${a / 2},${c - f - l * n} ${a - w},${c - f - v - l * n} ${a - w},${c - f - v}Z`,
left: `M${a / 2},${c - f} ${a / 2},${c - f - l * n} ${p}, ${c - f - v - l * n} ${p},${c - f - v}Z`,
liningTop: `M${p},${c - f - v - l * n} ${a / 2},${c - f - l * n} ${a - w},${c - f - v - l * n}`,
liningTopShade: `M${p},${c - f - v - l * n - 0.5} ${a / 2},${c - f - l * n - 0.5} ${a - w},${c - f - v - l * n - 0.5}`,
top: `M${a / 2},${c - f - l * n} ${p},${c - f - v - l * n} ${a / 2},${c - f - v * 2 - l * n} ${a - w},${c - f - v - l * n} Z`,
tubeTop: `M${p},${c - f - l * n - v} C ${p},${c - f - l * n - v * 2.5} ${a - w},${c - f - l * n - v * 2.5} ${a - w},${c - f - l * n - v} C ${a - w},${c - f - l * n + v / 2} ${p},${c - f - l * n + v / 2} ${p},${c - f - l * n - v}`,
bottomTubeTop: `M ${a - w - 0.5},${c - f - v} C ${a - w - 0.5},${c - f + v / 2} ${p},${c - f + v / 2} ${p + 0.5},${c - f - v}`,
tubeBody: `M
${p},${c - f - l * n - v}
C ${p},${c - f - l * n + v / 2}
${a - w},${c - f - l * n + v / 2}
${a - w},${c - f - l * n - v}
L${a - w},${c - f - v}
C
${a - w},${c - f + v / 2}
${p},${c - f + v / 2}
${p},${c - f - v}Z`
};
}
const E = T(() => {
const r = W.value / 100, n = s.value.height - s.value.bottom - s.value.top - s.value.perspective * 2, { width: t, height: h, bottom: l, right: a, left: c, perspective: k } = s.value, p = l + n * 0;
return {
right: `M${t / 2},${h - p} ${t / 2},${h - p - n * r} ${t - a},${h - p - k - n * r} ${t - a},${h - p - k}Z`,
left: `M${t / 2},${h - p} ${t / 2},${h - p - n * r} ${c}, ${h - p - k - n * r} ${c},${h - p - k}Z`,
top: `M${t / 2},${h - p - n * r} ${c},${h - p - k - n * r} ${t / 2},${h - p - k * 2 - n * r} ${t - a},${h - p - k - n * r} Z`,
tubeTop: `M${c},${h - p - n * r - k} C ${c},${h - p - n * r - k * 2.5} ${t - a},${h - p - n * r - k * 2.5} ${t - a},${h - p - n * r - k} C ${t - a},${h - p - n * r + k / 2} ${c},${h - p - n * r + k / 2} ${c},${h - p - n * r - k}`,
tubeBody: `M
${c},${h - p - n * r - k}
C ${c},${h - p - n * r + k / 2}
${t - a},${h - p - n * r + k / 2}
${t - a},${h - p - n * r - k}
L${t - a},${h - k * 1.5}
C
${t - a},${h}
${c},${h}
${c},${h - p - k}Z`
};
}), x = S(null);
function M(r, n = !1) {
H("selectDatapoint", r), n || (x.value = r.id), n && L.value && (L.value = !1), n && !L.value && (L.value = !0);
}
function I() {
L.value || (x.value = null);
}
function V(r, n, t = !1) {
const h = $.dataset.series.map((c) => c.value || 0).reduce((c, k) => c + k, 0), l = isNaN(r.value / h) ? 0 : r.value / h * 100, a = isNaN(r.value / $e(n)) ? 0 : r.value / $e(n) * 100;
return t ? a : l.toFixed(0) + "%";
}
function $e(r) {
return [...r].map((n) => n.value).reduce((n, t) => n + t, 0);
}
const le = S(!1);
function Ie(r) {
le.value = r;
}
function We() {
return F.value ? C.value : $.dataset.percentage;
}
const B = T(() => {
if (F.value) {
const r = C.value.flatMap((t) => t.breakdown && t.breakdown.length ? [{ name: t.name, color: t.color }, ...t.breakdown.map((h, l) => ({
name: h.name,
color: U(t.color, l / t.breakdown.length)
}))] : {
name: t.name,
color: t.color
}), n = C.value.flatMap((t) => t.breakdown && t.breakdown.length ? [t.value, ...t.breakdown.map((h) => h.value)] : t.value);
return { head: r, body: n };
} else
return null;
});
function _e() {
if (!F.value) {
console.warn("VueUi3dBar : CSV download is only available in stack mode (providing dataset.series instead of dataset.percentage)");
return;
}
Re(() => {
const r = C.value.map((l) => l.value).reduce((l, a) => l + a, 0), n = B.value.head.map((l, a) => [[
l.name
], [B.value.body[a]], [isNaN(B.value.body[a] / r) ? "-" : B.value.body[a] / r * 100]]), t = [[o.value.style.chart.title.text], [o.value.style.chart.title.subtitle.text], [[""], ["val"], ["%"]]].concat(n), h = lt(t);
st({ csvContent: h, title: o.value.style.chart.title.text || "vue-ui-3d-bar" });
});
}
const X = T(() => {
const r = C.value.map((a) => a.value).reduce((a, c) => a + c, 0), n = [
' <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M18 16v2a1 1 0 0 1 -1 1h-11l6 -7l-6 -7h11a1 1 0 0 1 1 1v2" /></svg>',
z({ p: o.value.style.chart.legend.prefix, v: r, s: o.value.style.chart.legend.suffix, r: o.value.table.td.roundingValue }),
"100%"
], t = B.value.head.map((a, c) => {
const k = z({ p: o.value.style.chart.legend.prefix, v: B.value.body[c], s: o.value.style.chart.legend.suffix, r: o.value.table.td.roundingValue });
return [
{
color: a.color,
name: a.name
},
k,
isNaN(B.value.body[c] / r) ? "-" : z({
v: B.value.body[c] / r * 100,
s: "%",
r: o.value.table.td.roundingPercentage
})
];
}), h = {
th: {
backgroundColor: o.value.table.th.backgroundColor,
color: o.value.table.th.color,
outline: o.value.table.th.outline
},
td: {
backgroundColor: o.value.table.td.backgroundColor,
color: o.value.table.td.color,
outline: o.value.table.td.outline
},
breakpoint: o.value.table.responsiveBreakpoint,
shape: o.value.style.shape === "tube" ? "circle" : "square"
};
return {
colNames: [
o.value.table.columnNames.series,
o.value.table.columnNames.value,
o.value.table.columnNames.percentage
],
head: n,
body: t,
config: h
};
});
function me() {
q.value.showTable = !q.value.showTable;
}
const R = S(!1);
function se() {
R.value = !R.value;
}
return De({
generateCsv: _e,
generatePdf: ye,
generateImage: ke,
getData: We,
toggleTable: me,
toggleAnnotator: se
}), (r, n) => (i(), d("div", {
ref_key: "bar3dChart",
ref: te,
class: Fe("vue-ui-3d-bar"),
style: D(`font-family:${e(o).style.fontFamily};width:100%; text-align:center;background:${e(o).style.chart.backgroundColor}`),
id: `3d_bar_${e(b)}`,
onMouseenter: n[2] || (n[2] = () => e(ce)(!0)),
onMouseleave: n[3] || (n[3] = () => e(ce)(!1))
}, [
e(o).userOptions.buttons.annotator ? (i(), G(ht, {
key: 0,
parent: e(te),
backgroundColor: e(o).style.chart.backgroundColor,
color: e(o).style.chart.color,
active: e(R),
onClose: se
}, null, 8, ["parent", "backgroundColor", "color", "active"])) : y("", !0),
e(o).style.chart.title.text ? (i(), d("div", yt, [
(i(), G(nt, {
key: `title_${e(ue)}`,
config: {
title: {
cy: "3dBar-div-title",
...e(o).style.chart.title
},
subtitle: {
cy: "3dBar-div-subtitle",
...e(o).style.chart.title.subtitle
}
}
}, null, 8, ["config"]))
])) : y("", !0),
e(o).userOptions.show && e(Z) && (e(he) || e(oe)) ? (i(), G(it, {
key: 2,
ref_key: "details",
ref: Be,
backgroundColor: e(o).style.chart.backgroundColor,
color: e(o).style.chart.color,
isPrinting: e(pe),
isImaging: e(ve),
uid: e(b),
hasPdf: e(o).userOptions.buttons.pdf,
hasTable: !!e(F) && e(o).userOptions.buttons.table,
hasXls: !!e(F) && e(o).userOptions.buttons.csv,
hasImg: e(o).userOptions.buttons.img,
hasFullscreen: e(o).userOptions.buttons.fullscreen,
titles: { ...e(o).userOptions.buttonTitles },
chartElement: e(te),
position: e(o).userOptions.position,
hasAnnotator: e(o).userOptions.buttons.annotator,
isAnnotation: e(R),
onToggleFullscreen: Ie,
onGeneratePdf: e(ye),
onGenerateCsv: _e,
onGenerateImage: e(ke),
onToggleTable: me,
onToggleAnnotator: se,
style: D({
visibility: e(he) ? e(oe) ? "visible" : "hidden" : "visible"
})
}, Ze({ _: 2 }, [
r.$slots.optionPdf ? {
name: "optionPdf",
fn: N(() => [
j(r.$slots, "optionPdf", {}, void 0, !0)
]),
key: "0"
} : void 0,
r.$slots.optionCsv ? {
name: "optionCsv",
fn: N(() => [
j(r.$slots, "optionCsv", {}, void 0, !0)
]),
key: "1"
} : void 0,
r.$slots.optionImg ? {
name: "optionImg",
fn: N(() => [
j(r.$slots, "optionImg", {}, void 0, !0)
]),
key: "2"
} : void 0,
r.$slots.optionTable ? {
name: "optionTable",
fn: N(() => [
j(r.$slots, "optionTable", {}, void 0, !0)
]),
key: "3"
} : void 0,
r.$slots.optionFullscreen ? {
name: "optionFullscreen",
fn: N(({ toggleFullscreen: t, isFullscreen: h }) => [
j(r.$slots, "optionFullscreen", re(ie({ toggleFullscreen: t, isFullscreen: h })), void 0, !0)
]),
key: "4"
} : void 0,
r.$slots.optionAnnotator ? {
name: "optionAnnotator",
fn: N(({ toggleAnnotator: t, isAnnotator: h }) => [
j(r.$slots, "optionAnnotator", re(ie({ toggleAnnotator: t, isAnnotator: h })), void 0, !0)
]),
key: "5"
} : void 0
]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasPdf", "hasTable", "hasXls", "hasImg", "hasFullscreen", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "onGeneratePdf", "onGenerateImage", "style"])) : y("", !0),
e(Z) ? (i(), d("svg", {
key: 3,
xmlns: e(ot),
class: Fe({ "vue-data-ui-fullscreen--on": e(le), "vue-data-ui-fulscreen--off": !e(le) }),
viewBox: `0 0 ${e(s).absoluteWidth} ${e(s).height}`,
style: D(`max-width:100%; overflow: visible; background:transparent;color:${e(o).style.chart.color}`)
}, [
qe(ct),
r.$slots["chart-background"] ? (i(), d("foreignObject", {
key: 0,
x: 0,
y: 0,
width: e(s).absoluteWidth,
height: e(s).height,
style: {
pointerEvents: "none"
}
}, [
j(r.$slots, "chart-background", {}, void 0, !0)
], 8, gt)) : y("", !0),
u("defs", null, [
u("radialGradient", {
id: `gradient_top${e(b)}`
}, [
u("stop", {
offset: "0%",
"stop-color": e(g)(e(o).style.chart.backgroundColor, 0)
}, null, 8, _t),
u("stop", {
offset: "100%",
"stop-color": e(o).style.chart.bar.color
}, null, 8, mt)
], 8, $t),
u("radialGradient", {
id: `gradient_left${e(b)}`
}, [
u("stop", {
offset: "0%",
"stop-color": e(g)(e(o).style.chart.backgroundColor, 0)
}, null, 8, xt),
u("stop", {
offset: "100%",
"stop-color": e(g)(e(o).style.chart.bar.color, 20)
}, null, 8, wt)
], 8, bt),
u("radialGradient", {
id: `gradient_right${e(b)}`
}, [
u("stop", {
offset: "0%",
"stop-color": e(g)(e(o).style.chart.backgroundColor, 0)
}, null, 8, Ft),
u("stop", {
offset: "100%",
"stop-color": e(g)(e(o).style.chart.bar.color, 20)
}, null, 8, Mt)
], 8, Ct),
u("linearGradient", {
id: `gradient_tube_body${e(b)}`,
x1: "0%",
y1: "0%",
x2: "100%",
y2: "0%"
}, [
u("stop", {
offset: "0%",
"stop-color": `${e(o).style.chart.bar.color}`
}, null, 8, jt),
u("stop", {
offset: "75%",
"stop-color": e(g)(e(o).style.chart.backgroundColor, 0)
}, null, 8, St),
u("stop", {
offset: "100%",
"stop-color": e(g)(e(o).style.chart.bar.color, 40)
}, null, 8, Tt)
], 8, Pt)
]),
e(F) ? (i(), d("defs", zt, [
(i(!0), d(_, null, m(e(C), (t) => (i(), d("radialGradient", {
id: `grad_top_${t.id}`
}, [
u("stop", {
offset: "0%",
"stop-color": e(g)(e(U)(t.color, 0.5), 80)
}, null, 8, Nt),
u("stop", {
offset: "100%",
"stop-color": t.color
}, null, 8, Ot)
], 8, Dt))), 256)),
(i(!0), d(_, null, m(e(C), (t) => (i(), d("linearGradient", {
id: `grad_left_${t.id}`
}, [
u("stop", {
offset: "0%",
"stop-color": e(g)(t.color, 80)
}, null, 8, At),
u("stop", {
offset: "100%",
"stop-color": e(g)(e(K)(t.color, 0.5), 100)
}, null, 8, Lt)
], 8, Bt))), 256)),
(i(!0), d(_, null, m(e(C), (t) => (i(), d("linearGradient", {
id: `grad_right_${t.id}`
}, [
u("stop", {
offset: "2%",
"stop-color": e(g)(e(U)(t.color, 0.5), 100)
}, null, 8, Wt),
u("stop", {
offset: "100%",
"stop-color": e(g)(t.color, 80)
}, null, 8, Vt)
], 8, It))), 256)),
u("linearGradient", {
x1: "0%",
y1: "0%",
x2: "0%",
y2: "100%",
id: `vertical_line_${e(b)}`
}, n[4] || (n[4] = [
u("stop", {
offset: "0%",
"stop-color": "#FFFFFF"
}, null, -1),
u("stop", {
offset: "100%",
"stop-color": "#FFFFFF33"
}, null, -1)
]), 8, Gt)
])) : y("", !0),
e(o).style.chart.dataLabel.show && ![null, void 0].includes($.dataset.percentage) && [null, void 0].includes($.dataset.series) ? (i(), d("text", {
key: 2,
x: e(s).width / 2,
y: e(s).top - e(o).style.chart.dataLabel.fontSize / 2,
"font-size": e(o).style.chart.dataLabel.fontSize,
"font-weight": e(o).style.chart.dataLabel.bold ? "bold" : "normal",
fill: e(o).style.chart.dataLabel.color,
"text-anchor": "middle"
}, P(e(z)({
v: e(W),
s: "%",
r: e(o).style.chart.dataLabel.rounding
})), 9, Ut)) : y("", !0),
e(L) ? (i(), d("g", {
key: 3,
onClick: n[0] || (n[0] = (t) => {
L.value = !1, x.value = null;
}),
"data-html2canvas-ignore": "",
style: { cursor: "pointer" }
}, [
u("rect", {
x: e(s).width / 2 - 6,
y: e(s).top - 20,
height: 12,
width: 12,
fill: "transparent"
}, null, 8, Et),
u("path", {
d: `M${e(s).width / 2 - 6},${e(s).top - 20} ${e(s).width / 2 + 6},${e(s).top - 9}`,
stroke: e(o).style.chart.color,
"stroke-linecap": "round",
"stroke-width": "1"
}, null, 8, Ht),
u("path", {
d: `M${e(s).width / 2 + 6},${e(s).top - 20} ${e(s).width / 2 - 6},${e(s).top - 9}`,
stroke: e(o).style.chart.color,
"stroke-linecap": "round",
"stroke-width": "1"
}, null, 8, Zt)
])) : y("", !0),
!e(o).style.shape || e(o).style.shape === "bar" ? (i(), d("g", qt, [
e(F) ? y("", !0) : (i(), d("g", Xt, [
u("path", {
"stroke-dasharray": e(o).style.chart.box.strokeDasharray,
d: e(O).right,
stroke: e(o).style.chart.box.stroke,
"stroke-width": e(o).style.chart.box.strokeWidth,
"stroke-linejoin": "round",
"stroke-linecap": "round",
fill: "none"
}, null, 8, Rt),
u("path", {
"stroke-dasharray": e(o).style.chart.box.strokeDasharray,
d: e(O).left,
stroke: e(o).style.chart.box.stroke,
"stroke-width": e(o).style.chart.box.strokeWidth,
"stroke-linejoin": "round",
"stroke-linecap": "round",
fill: "none"
}, null, 8, Yt),
u("path", {
"stroke-dasharray": e(o).style.chart.box.strokeDasharray,
d: e(O).side,
stroke: e(o).style.chart.box.stroke,
"stroke-width": e(o).style.chart.box.strokeWidth,
"stroke-linejoin": "round",
"stroke-linecap": "round",
fill: "none"
}, null, 8, Jt),
u("path", {
"stroke-dasharray": e(o).style.chart.box.strokeDasharray,
d: e(O).topSides,
stroke: e(o).style.chart.box.stroke,
"stroke-width": e(o).style.chart.box.strokeWidth,
"stroke-linejoin": "round",
"stroke-linecap": "round",
fill: "none"
}, null, 8, Kt)
])),
e(F) ? y("", !0) : (i(), d("g", Qt, [
u("path", {
d: e(E).right,
stroke: e(o).style.chart.bar.stroke,
"stroke-width": e(o).style.chart.bar.strokeWidth,
"stroke-linejoin": "round",
"stroke-linecap": "round",
fill: `url(#gradient_right${e(b)})`
}, null, 8, eo),
u("path", {
d: e(E).left,
stroke: e(o).style.chart.bar.stroke,
"stroke-width": e(o).style.chart.bar.strokeWidth,
"stroke-linejoin": "round",
"stroke-linecap": "round",
fill: `url(#gradient_left${e(b)})`
}, null, 8, to),
u("path", {
d: e(E).top,
stroke: e(o).style.chart.bar.stroke,
"stroke-width": e(o).style.chart.bar.strokeWidth,
"stroke-linejoin": "round",
"stroke-linecap": "round",
fill: `url(#gradient_top${e(b)})`
}, null, 8, oo)
])),
e(F) ? (i(), d("g", lo, [
(i(!0), d(_, null, m(e(C), (t, h) => (i(), d("g", {
style: D(`opacity:${e(x) ? e(x) === t.id ? 1 : 0.3 : 1}`),
class: "vue-ui-3d-bar-stack"
}, [
u("path", {
d: t.fill.right,
fill: `url(#grad_right_${t.id})`,
onMouseenter: (l) => M(t),
onClick: (l) => M(t, !0),
onMouseout: I
}, null, 40, so),
u("path", {
d: t.fill.left,
fill: `url(#grad_left_${t.id})`,
onMouseenter: (l) => M(t),
onClick: (l) => M(t, !0),
onMouseout: I
}, null, 40, no),
u("path", {
d: t.fill.top,
fill: `url(#grad_top_${t.id})`,
onMouseenter: (l) => M(t),
onClick: (l) => M(t, !0),
onMouseout: I
}, null, 40, ro),
u("path", {
d: t.fill.liningTop,
stroke: "#FFFFFF",
"stroke-width": "0.5",
"stroke-linecap": "round",
fill: "none",
onMouseenter: (l) => M(t),
onClick: (l) => M(t, !0),
onMouseout: I
}, null, 40, io),
u("path", {
d: `M ${t.fill.apexTop.x},${t.fill.apexTop.y} ${t.fill.apexBottom.x},${t.fill.apexBottom.y}`,
stroke: "#FFFFFF",
"stroke-width": "0.5",
"stroke-linecap": "round"
}, null, 8, ao)
], 4))), 256)),
(i(!0), d(_, null, m(e(C), (t, h) => (i(), d("g", null, [
h !== e(C).length - 1 ? (i(), d("path", {
key: 0,
d: t.fill.liningTopShade,
stroke: e(o).style.chart.bar.shadeColor,
"stroke-width": "0.5",
"stroke-linecap": "round",
fill: "none",
style: { "pointer-events": "none" }
}, null, 8, uo)) : y("", !0)
]))), 256)),
(i(!0), d(_, null, m(e(C), (t, h) => (i(), d("g", {
style: D(`opacity:${e(x) ? e(x) === t.id ? 1 : 0 : t.proportion * 100 > e(o).style.chart.legend.hideUnderPercentage ? 1 : 0}`),
onClick: (l) => H("selectDatapoint", t)
}, [
u("path", {
stroke: e(o).style.chart.color,
"stroke-dasharray": "1",
"stroke-width": "0.5",
"stroke-linecap": "round",
d: `M${t.fill.sidePointer.x},${t.fill.sidePointer.y} ${t.fill.sidePointer.x + 20},${t.fill.sidePointer.y}`
}, null, 8, ho),
!t.fill.miniDonut || e(x) ? (i(), d("circle", {
key: 0,
cx: t.fill.sidePointer.x + 20,
cy: t.fill.sidePointer.y,
r: 2,
fill: t.color,
stroke: e(o).style.chart.backgroundColor
}, null, 8, fo)) : y("", !0),
(i(), d("foreignObject", {
x: t.fill.sidePointer.x + 30,
y: t.fill.sidePointer.y - e(o).style.chart.legend.fontSize,
width: e(s).absoluteWidth / 2 - 12,
height: e(o).style.chart.legend.fontSize * 2,
style: { overflow: "visible", position: "relative" }
}, [
e(o).style.chart.legend.showDefault ? (i(), d("div", {
key: 0,
style: D(`height: 100%; width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; align-items:center;justify-content: flex-start; font-size:${e(o).style.chart.legend.fontSize}px; text-align:left; line-height: ${e(o).style.chart.legend.fontSize}px; color:${e(o).style.chart.legend.color}`)
}, P(t.name) + ": " + P(e(z)({ v: t.proportion * 100, s: "%", r: e(o).style.chart.legend.roundingPercentage })) + " (" + P(e(Q)(
e(o).style.chart.dataLabel.formatter,
t.value,
e(z)({
p: e(o).style.chart.legend.prefix,
v: t.value,
s: e(o).style.chart.legend.suffix,
r: e(o).style.chart.legend.roundingValue
}),
{ datapoint: t, seriesIndex: h }
)) + ") ", 5)) : y("", !0),
j(r.$slots, "legend", Me({ ref_for: !0 }, { datapoint: t, config: e(o), dataset: e(C) }), void 0, !0)
], 8, po)),
t.fill.donut && e(x) === t.id ? (i(), d("g", vo, [
(i(!0), d(_, null, m(t.fill.donut, (l, a) => (i(), d("g", null, [
V(l, t.fill.donut, !0) > 6 ? (i(), d("path", {
key: 0,
d: e(Se)(l, { x: l.cx, y: l.cy }, 0, 8, !1, !0, 10),
stroke: l.color,
class: "vue-ui-donut-arc-path",
"stroke-width": "0.5",
"stroke-linecap": "round",
"stroke-linejoin": "round",
fill: "none"
}, null, 8, yo)) : y("", !0)
]))), 256)),
(i(!0), d(_, null, m(t.fill.donut, (l, a) => (i(), d("path", {
class: "vue-ui-donut-arc-path",
d: l.arcSlice,
fill: `${l.color}`,
stroke: e(o).style.chart.backgroundColor,
"stroke-width": 1
}, null, 8, ko))), 256)),
u("defs", null, [
u("radialGradient", {
id: `hollow_gradient_${e(b)}`
}, [
u("stop", {
offset: "0%",
"stop-color": e(g)(e(o).style.chart.backgroundColor, 0)
}, null, 8, $o),
n[5] || (n[5] = u("stop", {
offset: "77%",
"stop-color": "#FFFFFF20"
}, null, -1)),
u("stop", {
offset: "100%",
"stop-color": e(g)(e(o).style.chart.backgroundColor, 0)
}, null, 8, _o)
], 8, go)
]),
(i(!0), d(_, null, m(t.fill.donut, (l, a) => (i(), d("circle", {
class: "vue-ui-donut-arc-path",
cx: l.cx,
cy: l.cy,
r: 28,
fill: `url(#hollow_gradient_${e(b)})`
}, null, 8, mo))), 256)),
(i(!0), d(_, null, m(t.fill.donut, (l, a) => (i(), d("circle", {
class: "vue-ui-donut-arc-path",
cx: l.cx,
cy: l.cy,
r: 14,
fill: e(o).style.chart.backgroundColor
}, null, 8, bo))), 256)),
(i(!0), d(_, null, m(t.fill.donut, (l, a) => (i(), d("g", null, [
V(l, t.fill.donut, !0) > 6 ? (i(), d("g", xo, [
u("text", {
"text-anchor": e(A)(l, !0, 0).anchor,
x: e(A)(l, !0, 2).x,
y: e(ee)(l, 12, 12),
fill: e(o).style.chart.legend.color,
"font-size": e(o).style.chart.legend.fontSize / 1.5
}, P(V(l, t.fill.donut)) + " (" + P(e(Q)(
e(o).style.chart.dataLabel.formatter,
l.value,
e(z)({
p: e(o).style.chart.legend.prefix,
v: l.value,
s: e(o).style.chart.legend.suffix,
r: e(o).style.chart.legend.roundingValue
}),
{ datapoint: l, seriesIndex: a }
)) + ") ", 9, wo),
u("text", {
"text-anchor": e(A)(l).anchor,
x: e(A)(l, !0, 2).x,
y: e(ee)(l, 12, 12) + e(o).style.chart.legend.fontSize / 1.5,
fill: e(o).style.chart.legend.color,
"font-size": e(o).style.chart.legend.fontSize / 1.5
}, P(l.name), 9, Co)
])) : y("", !0)
]))), 256))
])) : y("", !0),
t.fill.miniDonut && !e(x) ? (i(), d("g", Fo, [
(i(!0), d(_, null, m(t.fill.miniDonut, (l, a) => (i(), d("path", {
class: "vue-ui-donut-arc-path",
d: l.arcSlice,
fill: `${l.color}`,
stroke: e(o).style.chart.backgroundColor,
"stroke-width": 0.5
}, null, 8, Mo))), 256))
])) : y("", !0)
], 12, co))), 256))
])) : y("", !0)
])) : y("", !0),
e(o).style.shape === "tube" ? (i(), d("g", Po, [
e(F) ? y("", !0) : (i(), d("g", jo, [
u("path", {
"stroke-dasharray": e(o).style.chart.box.strokeDasharray,
d: e(O).tubeTop,
stroke: e(o).style.chart.box.stroke,
"stroke-width": e(o).style.chart.box.strokeWidth,
"stroke-linejoin": "round",
"stroke-linecap": "round",
fill: "none"
}, null, 8, So),
u("path", {
"stroke-dasharray": e(o).style.chart.box.strokeDasharray,
d: e(O).tubeLeft,
stroke: e(o).style.chart.box.stroke,
"stroke-width": e(o).style.chart.box.strokeWidth,
"stroke-linejoin": "round",
"stroke-linecap": "round",
fill: "none"
}, null, 8, To),
u("path", {
"stroke-dasharray": e(o).style.chart.box.strokeDasharray,
d: e(O).tubeRight,
stroke: e(o).style.chart.box.stroke,
"stroke-width": e(o).style.chart.box.strokeWidth,
"stroke-linejoin": "round",
"stroke-linecap": "round",
fill: "none"
}, null, 8, zo),
u("path", {
"stroke-dasharray": e(o).style.chart.box.strokeDasharray,
d: e(O).tubeBottom,
stroke: e(o).style.chart.box.stroke,
"stroke-width": e(o).style.chart.box.strokeWidth,
"stroke-linejoin": "round",
"stroke-linecap": "round",
fill: "none"
}, null, 8, Do),
u("path", {
d: e(E).tubeTop,
stroke: e(o).style.chart.bar.stroke,
"stroke-width": e(o).style.chart.bar.strokeWidth,
"stroke-linejoin": "round",
"stroke-linecap": "round",
fill: `url(#gradient_top${e(b)})`
}, null, 8, No),
u("path", {
d: e(E).tubeBody,
stroke: e(o).style.chart.bar.stroke,
"stroke-width": e(o).style.chart.bar.strokeWidth,
"stroke-linejoin": "round",
"stroke-linecap": "round",
fill: `url(#gradient_tube_body${e(b)})`
}, null, 8, Oo)
])),
e(F) ? (i(), d("g", Bo, [
(i(!0), d(_, null, m(e(C), (t, h) => (i(), d("g", {
style: D(`opacity:${e(x) ? e(x) === t.id ? 1 : 0.3 : 1}`),
class: "vue-ui-3d-bar-stack",
onClick: (l) => H("selectDatapoint", t)
}, [
u("defs", null, [
u("radialGradient", {
id: `gradient_tube_top_${t.id}`,
fx: "10%",
cy: "55%"
}, [
u("stop", {
offset: "0%",
"stop-color": e(g)(e(U)(t.color, 0.5), 80)
}, null, 8, Io),
u("stop", {
offset: "100%",
"stop-color": e(g)(e(K)(t.color, 0.1), 80)
}, null, 8, Wo)
], 8, Lo),
u("linearGradient", {
id: `gradient_tube_body_${t.id}`,
x1: "0%",
y1: "0%",
x2: "100%",
y2: "0%"
}, [
u("stop", {
offset: "0%",
"stop-color": `${t.color}`
}, null, 8, Go),
u("stop", {
offset: "10%",
"stop-color": e(g)(e(K)(t.color, 0.7), 100)
}, null, 8, Uo),
u("stop", {
offset: "25%",
"stop-color": e(g)(e(K)(t.color, 0.5), 100)
}, null, 8, Eo),
u("stop", {
offset: "75%",
"stop-color": e(g)(t.color, 80)
}, null, 8, Ho),
u("stop", {
offset: "100%",
"stop-color": e(g)(e(U)(t.color, 0.7), 100)
}, null, 8, Zo)
], 8, Vo)
]),
u("path", {
onMouseenter: (l) => M(t),
onClick: (l) => M(t, !0),
onMouseout: I,
d: t.fill.tubeBody,
stroke: "#FFFFFF",
"stroke-width": 0.5,
"stroke-linejoin": "round",
"stroke-linecap": "round",
fill: `url(#gradient_tube_body_${t.id})`
}, null, 40, qo),
h > 0 ? (i(), d("path", {
key: 0,
onMouseenter: (l) => M(t),
onClick: (l) => M(t, !0),
onMouseout: I,
d: t.fill.bottomTubeTop,
stroke: "#000000",
"stroke-width": 0.5,
"stroke-linejoin": "round",
"stroke-linecap": "round",
fill: "none"
}, null, 40, Xo)) : y("", !0),
u("path", {
onMouseenter: (l) => M(t),
onClick: (l) => M(t, !0),
onMouseout: I,
d: t.fill.tubeTop,
stroke: "#FFFFFF",
"stroke-width": 0.5,
"stroke-linejoin": "round",
"stroke-linecap": "round",
fill: `url(#gradient_tube_top_${t.id})`
}, null, 40, Ro)
], 12, Ao))), 256)),
(i(!0), d(_, null, m(e(C), (t, h) => (i(), d("g", {
style: D(`opacity:${e(x) ? e(x) === t.id ? 1 : 0 : t.proportion * 100 > e(o).style.chart.legend.hideUnderPercentage ? 1 : 0}`),
onClick: (l) => H("selectDatapoint", t)
}, [
u("path", {
stroke: e(o).style.chart.color,
"stroke-dasharray": "1",
"stroke-width": "0.5",
"stroke-linecap": "round",
d: `M${t.fill.sidePointer.x},${t.fill.sidePointer.y} ${t.fill.sidePointer.x + 20},${t.fill.sidePointer.y}`
}, null, 8, Jo),
!t.fill.miniDonut || e(x) ? (i(), d("circle", {
key: 0,
cx: t.fill.sidePointer.x + 20,
cy: t.fill.sidePointer.y,
r: 2,
fill: t.color,
stroke: e(o).style.chart.backgroundColor
}, null, 8, Ko)) : y("", !0),
(i(), d("foreignObject", {
x: t.fill.sidePointer.x + 30,
y: t.fill.sidePointer.y - e(o).style.chart.legend.fontSize,
width: e(s).absoluteWidth / 2 - 12,
height: e(o).style.chart.legend.fontSize * 2,
style: { overflow: "visible", position: "relative" }
}, [
e(o).style.chart.legend.showDefault ? (i(), d("div", {
key: 0,
style: D(`height: 100%; width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; align-items:center;justify-content: flex-start; font-size:${e(o).style.chart.legend.fontSize}px; text-align:left; line-height: ${e(o).style.chart.legend.fontSize}px; color:${e(o).style.chart.legend.color}`)
}, P(t.name) + ": " + P(e(z)({ v: t.proportion * 100, s: "%", r: e(o).style.chart.legend.roundingPercentage })) + " (" + P(e(Q)(
e(o).style.chart.dataLabel.formatter,
t.value,
e(z)({
p: e(o).style.chart.legend.prefix,
v: t.value,
s: e(o).style.chart.legend.suffix,
r: e(o).style.chart.legend.roundingValue
}),
{ datapoint: t, seriesIndex: h }
)) + ") ", 5)) : y("", !0),
j(r.$slots, "legend", Me({ ref_for: !0 }, { datapoint: t, config: e(o), dataset: e(C) }), void 0, !0)
], 8, Qo)),
t.fill.donut && e(x) === t.id ? (i(), d("g", el, [
(i(!0), d(_, null, m(t.fill.donut, (l, a) => (i(), d("g", null, [
V(l, t.fill.donut, !0) > 6 ? (i(), d("path", {
key: 0,
d: e(Se)(l, { x: l.cx, y: l.cy }, 0, 8, !1, !0, 10),
stroke: l.color,
class: "vue-ui-donut-arc-path",
"stroke-width": "0.5",
"stroke-linecap": "round",
"stroke-linejoin": "round",
fill: "none"
}, null, 8, tl)) : y("", !0)
]))), 256)),
(i(!0), d(_, null, m(t.fill.donut, (l, a) => (i(), d("path", {
class: "vue-ui-donut-arc-path",
d: l.arcSlice,
fill: `${l.color}`,
stroke: e(o).style.chart.backgroundColor,
"stroke-width": 1
}, null, 8, ol))), 256)),
u("defs", null, [
u("radialGradient", {
id: `hollow_gradient_${e(b)}`
}, [
u("stop", {
offset: "0%",
"stop-color": e(g)(e(o).style.chart.backgroundColor, 0)
}, null, 8, sl),
n[6] || (n[6] = u("stop", {
offset: "77%",
"stop-color": "#FFFFFF20"
}, null, -1)),
u("stop", {
offset: "100%",
"stop-color": e(g)(e(o).style.chart.backgroundColor, 0)
}, null, 8, nl)
], 8, ll)
]),
(i(!0), d(_, null, m(t.fill.donut, (l, a) => (i(), d("circle", {
class: "vue-ui-donut-arc-path",
cx: l.cx,
cy: l.cy,
r: 28,
fill: `url(#hollow_gradient_${e(b)})`
}, null, 8, rl))), 256)),
(i(!0), d(_, null, m(t.fill.donut, (l, a) => (i(), d("circle", {
class: "vue-ui-donut-arc-path",
cx: l.cx,
cy: l.cy,
r: 14,
fill: e(o).style.chart.backgroundColor
}, null, 8, il))), 256)),
(i(!0), d(_, null, m(t.fill.donut, (l, a) => (i(), d(