vue-data-ui-hq
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
1,123 lines • 50.3 kB
JavaScript
import { computed as w, ref as h, onMounted as nt, onBeforeUnmount as rt, watch as Ge, openBlock as s, createElementBlock as i, normalizeClass as de, unref as e, normalizeStyle as z, createBlock as G, createCommentVNode as u, renderSlot as b, createSlots as it, withCtx as $, normalizeProps as K, guardReactiveProps as Q, createVNode as Ue, createElementVNode as y, Fragment as k, renderList as X, toDisplayString as x, mergeProps as ut, createTextVNode as je, nextTick as ct } from "vue";
import { u as dt, o as ht, e as He, g as yt, c as ft, b as vt, d as Ee, p as U, m as pt, H as gt, f as F, X as bt, s as Z, w as mt, j as wt, I as L, i as Y, k as m, n as ee, t as kt, a as _t, x as xt, q as Ct, r as $t } from "./index-WrV3SAID.js";
import { t as Pt, u as St } from "./useResponsive-CoxXLe23.js";
import { _ as Ft } from "./Title-BR-xoRp4.js";
import { u as Lt, U as Tt } from "./usePrinter-kVpf1iV8.js";
import { D as zt } from "./DataTable-DNPvKWC0.js";
import { _ as Ot } from "./Tooltip-ho4JxRm-.js";
import { L as Yt } from "./Legend-7H4oi6Sq.js";
import At from "./vue-ui-skeleton-Qec_XSRf.js";
import Nt from "./vue-ui-accordion-BQCDXXDs.js";
import { u as Re } from "./useNestedProp-Cj0kHD7k.js";
import { _ as Xt } from "./PackageVersion-1NslmM8M.js";
import { P as Dt } from "./PenAndPaper-BF1ZRVm3.js";
import { u as It } from "./useUserOptionState-BIvW1Kz7.js";
import { _ as Mt } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const Bt = ["id"], Vt = ["xmlns", "viewBox"], Gt = ["width", "height"], Ut = { key: 1 }, jt = ["id"], Ht = ["stop-color"], Et = ["offset", "stop-color"], Rt = ["offset", "stop-color"], Wt = ["stop-color"], qt = { key: 2 }, Jt = ["id", "cx", "cy"], Kt = ["stop-color", "stop-opacity"], Qt = ["stop-color"], Zt = ["id"], el = ["id"], tl = ["id"], ll = ["flood-color"], ol = ["id"], al = ["flood-color"], sl = ["d", "stroke", "filter"], nl = ["x1", "y1", "x2", "y2", "stroke", "filter"], rl = ["cx", "cy", "r", "fill", "filter"], il = ["stroke", "d"], ul = ["d", "fill", "stroke", "stroke-width", "filter"], cl = { key: 0 }, dl = ["stroke", "d"], hl = { key: 0 }, yl = ["d", "stroke", "stroke-width", "filter"], fl = ["d", "fill", "stroke", "stroke-width", "filter"], vl = { key: 1 }, pl = ["cx", "cy", "r", "fill", "stroke", "stroke-width"], gl = ["cx", "cy", "r", "stroke"], bl = ["cx", "cy", "r", "fill"], ml = { key: 0 }, wl = ["d", "fill", "onMouseenter", "onClick"], kl = { key: 1 }, _l = ["cx", "cy", "r", "fill"], xl = ["x", "y", "fill", "font-size"], Cl = ["x", "y", "fill", "font-size"], $l = ["x", "y", "fill", "font-size"], Pl = ["x", "y", "fill", "font-size"], Sl = ["filter"], Fl = { key: 0 }, Ll = ["x", "y"], Tl = { key: 1 }, zl = ["cx", "cy", "fill", "stroke", "filter", "onClick"], Ol = ["cx", "cy", "fill", "stroke", "filter", "onClick"], Yl = ["text-anchor", "x", "y", "fill", "font-size", "onClick"], Al = ["text-anchor", "x", "y", "fill", "font-size", "onClick"], Nl = ["text-anchor", "x", "y", "fill", "font-size", "onClick"], Xl = ["text-anchor", "x", "y", "fill", "font-size", "onClick"], Dl = { key: 2 }, Il = ["x", "y", "width"], Ml = ["x", "y", "width"], Bl = {
key: 5,
class: "vue-data-ui-watermark"
}, Vl = ["onClick"], Gl = {
key: 0,
style: { "font-variant-numeric": "tabular-nums" }
}, Ul = { key: 1 }, jl = ["innerHTML"], Hl = {
__name: "vue-ui-donut",
props: {
config: {
type: Object,
default() {
return {};
}
},
dataset: {
type: Array,
default() {
return [];
}
}
},
emits: ["selectLegend", "selectDatapoint"],
setup(We, { expose: qe, emit: Je }) {
const { vue_ui_donut: Ke } = dt(), A = We, R = w({
get() {
return !!A.dataset && A.dataset.length;
},
set(o) {
return o;
}
}), j = h(null), he = h(null), ye = h(null), te = h(null), fe = h(null), ve = h(null), pe = h(0), ge = h(0), be = h(0);
nt(() => {
me();
}), rt(() => {
te.value && te.value.disconnect();
});
function me() {
if (ht(A.dataset) ? He({
componentName: "VueUiDonut",
type: "dataset"
}) : A.dataset.forEach((o, r) => {
yt({
datasetObject: o,
requiredAttributes: ["name", "values"]
}).forEach((l) => {
R.value = !1, He({
componentName: "VueUiDonut",
type: "datasetSerieAttribute",
property: l,
index: r
});
});
}), t.value.responsive) {
const o = Pt(() => {
const { width: r, height: l } = St({
chart: j.value,
title: t.value.style.chart.title.text ? he.value : null,
legend: t.value.style.chart.legend.show ? ye.value : null,
source: fe.value,
noTitle: ve.value
});
n.value.width = r, n.value.height = l;
});
te.value = new ResizeObserver(o), te.value.observe(j.value.parentNode);
}
}
const _ = h(ft()), Qe = h(null), le = h(!1), se = h(""), P = h(null), we = h(0);
function ke() {
const o = Re({
userConfig: A.config,
defaultConfig: Ke
});
return o.theme ? {
...Re({
userConfig: kt.vue_ui_donut[o.theme] || A.config,
defaultConfig: o
}),
customPalette: _t[o.theme] || U
} : o;
}
const t = w({
get: () => ke(),
set: (o) => o
}), { userOptionsVisible: ne, setUserOptionsVisibility: _e, keepUserOptionState: xe } = It({ config: t.value });
Ge(() => A.config, (o) => {
t.value = ke(), ne.value = !t.value.showOnChartHover, me(), pe.value += 1, ge.value += 1, be.value += 1;
}, { deep: !0 });
const { isPrinting: Ce, isImaging: $e, generatePdf: Pe, generateImage: Se } = Lt({
elementId: `donut__${_.value}`,
fileName: t.value.style.chart.title.text || "vue-ui-donut"
}), Ze = w(() => t.value.userOptions.show && !t.value.style.chart.title.text), Fe = w(() => vt(t.value.customPalette)), f = h({
dataLabels: {
show: t.value.style.chart.layout.labels.dataLabels.show
},
showTable: t.value.table.show,
showTooltip: t.value.style.chart.tooltip.show
}), n = h({
height: 360,
width: 512
}), W = w(() => {
const o = t.value.style.chart.layout.donut.strokeWidth / 512, r = n.value.width * o, l = r > C.value ? C.value : r;
return l < 24 ? 24 : l;
}), Le = Je, B = w(() => A.dataset.map((o, r) => ({
name: o.name,
color: Ee(o.color) || Fe.value[r] || U[r] || U[r % U.length],
value: o.values.reduce((l, a) => l + a, 0),
absoluteValues: o.values,
comment: o.comment || ""
}))), T = h(B.value);
Ge(() => B.value, (o) => T.value = o);
function et() {
return B.value.map((o) => ({
name: o.name,
color: o.color,
value: o.value
}));
}
const N = h([]), Te = h(null), ze = h(null), V = h(!1);
function Oe(o) {
const r = B.value.find((c, g) => g === o), l = T.value.find((c, g) => g === o);
let a = l.value;
if (N.value.includes(o)) {
let g = function() {
a > c ? (cancelAnimationFrame(Te.value), T.value = T.value.map((p, ce) => o === ce ? {
...p,
value: c
} : p), V.value = !1) : (V.value = !0, a += c * 0.025, T.value = T.value.map((p, ce) => o === ce ? {
...p,
value: a
} : p), Te.value = requestAnimationFrame(g));
};
N.value = N.value.filter((p) => p !== o);
const c = r.value;
g();
} else if (N.value.length < B.value.length - 1) {
let c = function() {
a < l.value / 100 ? (cancelAnimationFrame(ze.value), N.value.push(o), T.value = T.value.map((g, p) => o === p ? {
...g,
value: 0
} : g), V.value = !1) : (V.value = !0, a /= 1.1, T.value = T.value.map((g, p) => o === p ? {
...g,
value: a
} : g), ze.value = requestAnimationFrame(c));
};
c();
}
Le("selectLegend", D.value.map((c) => ({
name: c.name,
color: c.color,
value: c.value
})));
}
const D = w(() => (T.value.forEach((o, r) => {
if ([null, void 0].includes(o.values))
return {
...o,
values: []
};
}), T.value.map((o, r) => ({
...o,
seriesIndex: r
})).filter((o, r) => !N.value.includes(r)))), Ye = w(() => A.dataset.map((o, r) => ({
name: o.name,
color: Ee(o.color) || Fe.value[r] || U[r] || U[r % U.length],
value: (o.values || []).reduce((l, a) => l + a, 0),
shape: "circle"
})).map((o, r) => ({
...o,
proportion: o.value / A.dataset.map((l) => (l.values || []).reduce((a, c) => a + c, 0)).reduce((l, a) => l + a, 0),
opacity: N.value.includes(r) ? 0.5 : 1,
segregate: () => !V.value && Oe(r),
isSegregated: N.value.includes(r)
}))), tt = w(() => ({
cy: "donut-div-legend",
backgroundColor: t.value.style.chart.legend.backgroundColor,
color: t.value.style.chart.legend.color,
fontSize: t.value.style.chart.legend.fontSize,
paddingBottom: 12,
fontWeight: t.value.style.chart.legend.bold ? "bold" : ""
})), C = w(() => {
const o = Math.min(n.value.width / 3, n.value.height / 3);
return o < 55 ? 55 : o;
}), v = w(() => pt({ series: D.value }, n.value.width / 2, n.value.height / 2, C.value, C.value, 1.99999, 2, 1, 360, 105.25, W.value)), d = w(() => {
const o = Math.max(...D.value.map((l) => l.value)), r = D.value.map((l) => l.value / o);
return gt({
series: r,
center: {
x: n.value.width / 2,
y: n.value.height / 2
},
maxRadius: Math.min(n.value.width, n.value.height) / 3
});
});
function H(o) {
return o.x > n.value.width / 2 + 6 ? "start" : o.x < n.value.width / 2 - 6 ? "end" : "middle";
}
function lt(o) {
return o.middlePoint.y > n.value.height / 2 ? L({ initX: o.middlePoint.x, initY: o.middlePoint.y, offset: 100, centerX: n.value.width / 2, centerY: n.value.height / 2 }).y : L({ initX: o.middlePoint.x, initY: o.middlePoint.y, offset: 0, centerX: n.value.width / 2, centerY: n.value.height / 2 }).y - 100;
}
function O(o) {
return o.proportion * 100 > t.value.style.chart.layout.labels.dataLabels.hideUnderValue;
}
function re(o, r) {
const l = o.value / ot(r);
return isNaN(l) ? 0 : Y(
t.value.style.chart.layout.labels.percentage.formatter,
l * 100,
F({
v: l * 100,
s: "%",
r: t.value.style.chart.layout.labels.percentage.rounding
}),
{ datapoint: o }
);
}
function ot(o) {
return [...o].map((r) => r.value).reduce((r, l) => r + l, 0);
}
const S = w(() => D.value.map((o) => o.value).reduce((o, r) => o + r, 0)), Ae = w(() => S.value / D.value.length), Ne = w(() => (o) => V.value ? o.proportion * 100 : o.value / S.value * 100), ie = h(null), q = h(!1);
function Xe({ datapoint: o, relativeIndex: r, seriesIndex: l, show: a = !1 }) {
ie.value = { datapoint: o, seriesIndex: l, config: t.value, series: B.value }, le.value = a, P.value = r;
let c = "";
const g = t.value.style.chart.tooltip.customFormat;
if (q.value = !1, xt(g))
try {
const p = g({
seriesIndex: l,
datapoint: o,
series: B.value,
config: t.value
});
typeof p == "string" && (se.value = p, q.value = !0);
} catch {
console.warn("Custom format cannot be applied."), q.value = !1;
}
if (!q.value) {
if (c += `<div style="width:100%;text-align:center;border-bottom:1px solid ${t.value.style.chart.tooltip.borderColor};padding-bottom:6px;margin-bottom:3px;">${o.name}</div>`, c += `<div style="display:flex;flex-direction:row;gap:6px;align-items:center;"><svg viewBox="0 0 12 12" height="14" width="14"><circle cx="6" cy="6" r="6" stroke="none" fill="${o.color}"/></svg>`, t.value.style.chart.tooltip.showValue && (c += `<b>${Y(
t.value.style.chart.layout.labels.value.formatter,
o.value,
F({
p: t.value.style.chart.layout.labels.dataLabels.prefix,
v: o.value,
s: t.value.style.chart.layout.labels.dataLabels.suffix,
r: t.value.style.chart.tooltip.roundingValue
}),
{
datapoint: o,
relativeIndex: r,
seriesIndex: l
}
)}</b>`), t.value.style.chart.tooltip.showPercentage) {
const p = Y(
t.value.style.chart.layout.labels.percentage.formatter,
o.proportion * 100,
F({
v: o.proportion * 100,
s: "%",
r: t.value.style.chart.tooltip.roundingPercentage
}),
{
datapoint: o,
relativeIndex: r,
seriesIndex: l
}
);
t.value.style.chart.tooltip.showValue ? c += `<span>(${p})</span></div>` : c += `<b>${p}</b></div>`;
}
t.value.style.chart.comments.showInTooltip && o.comment && (c += `<div class="vue-data-ui-tooltip-comment" style="background:${o.color}20; padding: 6px; margin-bottom: 6px; margin-top:6px; border-left: 1px solid ${o.color}">${o.comment}</div>`), se.value = `<div>${c}</div>`;
}
}
function J(o) {
return t.value.useBlurOnHover && ![null, void 0].includes(P.value) && P.value !== o ? `url(#blur_${_.value})` : "";
}
const I = w(() => {
const o = D.value.map((l) => ({
name: l.name,
color: l.color
})), r = D.value.map((l) => l.value);
return { head: o, body: r };
});
function De() {
ct(() => {
const o = I.value.head.map((a, c) => [[
a.name
], [I.value.body[c]], [isNaN(I.value.body[c] / S.value) ? "-" : I.value.body[c] / S.value * 100]]), r = [[t.value.style.chart.title.text], [t.value.style.chart.title.subtitle.text], [[""], ["val"], ["%"]]].concat(o), l = Ct(r);
$t({ csvContent: l, title: t.value.style.chart.title.text || "vue-ui-donut" });
});
}
const oe = w(() => {
const o = [
' <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>',
F({ p: t.value.style.chart.layout.labels.dataLabels.prefix, v: S.value, s: t.value.style.chart.layout.labels.dataLabels.suffix, r: t.value.table.td.roundingValue }),
"100%"
], r = I.value.head.map((c, g) => {
const p = F({ p: t.value.style.chart.layout.labels.dataLabels.prefix, v: I.value.body[g], s: t.value.style.chart.layout.labels.dataLabels.suffix, r: t.value.table.td.roundingValue });
return [
{
color: c.color,
name: c.name
},
p,
isNaN(I.value.body[g] / S.value) ? "-" : (I.value.body[g] / S.value * 100).toFixed(t.value.table.td.roundingPercentage) + "%"
];
}), l = {
th: {
backgroundColor: t.value.table.th.backgroundColor,
color: t.value.table.th.color,
outline: t.value.table.th.outline
},
td: {
backgroundColor: t.value.table.td.backgroundColor,
color: t.value.table.td.color,
outline: t.value.table.td.outline
},
breakpoint: t.value.table.responsiveBreakpoint
};
return {
colNames: [
t.value.table.columnNames.series,
t.value.table.columnNames.value,
t.value.table.columnNames.percentage
],
head: o,
body: r,
config: l
};
}), E = h(!1);
function at(o) {
E.value = o, we.value += 1;
}
const Ie = w(() => /^((?!chrome|android).)*safari/i.test(navigator.userAgent));
function st(o) {
return o.toFixed(t.value.style.chart.legend.roundingPercentage).split("").map((r) => "-").join("");
}
function M(o, r) {
Le("selectDatapoint", { datapoint: o, index: r });
}
function Me() {
f.value.showTable = !f.value.showTable;
}
function Be() {
f.value.dataLabels.show = !f.value.dataLabels.show;
}
function Ve() {
f.value.showTooltip = !f.value.showTooltip;
}
const ae = h(!1);
function ue() {
ae.value = !ae.value;
}
return qe({
getData: et,
generatePdf: Pe,
generateCsv: De,
generateImage: Se,
toggleTable: Me,
toggleLabels: Be,
toggleTooltip: Ve,
toggleAnnotator: ue
}), (o, r) => (s(), i("div", {
ref_key: "donutChart",
ref: j,
class: de(`vue-ui-donut ${e(E) ? "vue-data-ui-wrapper-fullscreen" : ""} ${e(t).useCssAnimation ? "" : "vue-ui-dna"}`),
style: z(`font-family:${e(t).style.fontFamily};width:100%; ${e(t).responsive ? "height:100%;" : ""} text-align:center;background:${e(t).style.chart.backgroundColor}`),
id: `donut__${e(_)}`,
onMouseenter: r[6] || (r[6] = () => e(_e)(!0)),
onMouseleave: r[7] || (r[7] = () => e(_e)(!1))
}, [
e(t).userOptions.buttons.annotator ? (s(), G(Dt, {
key: 0,
parent: e(j),
backgroundColor: e(t).style.chart.backgroundColor,
color: e(t).style.chart.color,
active: e(ae),
onClose: ue
}, null, 8, ["parent", "backgroundColor", "color", "active"])) : u("", !0),
b(o.$slots, "userConfig", {}, void 0, !0),
e(Ze) ? (s(), i("div", {
key: 1,
ref_key: "noTitle",
ref: ve,
class: "vue-data-ui-no-title-space",
style: "height:36px; width: 100%;background:transparent"
}, null, 512)) : u("", !0),
e(t).style.chart.title.text ? (s(), i("div", {
key: 2,
ref_key: "chartTitle",
ref: he,
style: "width:100%;background:transparent;padding-bottom:24px"
}, [
(s(), G(Ft, {
key: `title_${e(pe)}`,
config: {
title: {
cy: "donut-div-title",
...e(t).style.chart.title
},
subtitle: {
cy: "donut-div-subtitle",
...e(t).style.chart.title.subtitle
}
}
}, null, 8, ["config"]))
], 512)) : u("", !0),
e(t).userOptions.show && e(R) && (e(xe) || e(ne)) ? (s(), G(Tt, {
ref_key: "details",
ref: Qe,
key: `user_option_${e(we)}`,
backgroundColor: e(t).style.chart.backgroundColor,
color: e(t).style.chart.color,
isPrinting: e(Ce),
isImaging: e($e),
uid: e(_),
hasTooltip: e(t).style.chart.tooltip.show && e(t).userOptions.buttons.tooltip,
hasPdf: e(t).userOptions.buttons.pdf,
hasImg: e(t).userOptions.buttons.img,
hasXls: e(t).userOptions.buttons.csv,
hasTable: e(t).userOptions.buttons.table,
hasLabel: e(t).userOptions.buttons.labels,
hasFullscreen: e(t).userOptions.buttons.fullscreen,
isFullscreen: e(E),
chartElement: e(j),
position: e(t).userOptions.position,
isTooltip: e(f).showTooltip,
titles: { ...e(t).userOptions.buttonTitles },
hasAnnotator: e(t).userOptions.buttons.annotator,
isAnnotation: e(ae),
onToggleFullscreen: at,
onGeneratePdf: e(Pe),
onGenerateCsv: De,
onGenerateImage: e(Se),
onToggleTable: Me,
onToggleLabels: Be,
onToggleTooltip: Ve,
onToggleAnnotator: ue,
style: z({
visibility: e(xe) ? e(ne) ? "visible" : "hidden" : "visible"
})
}, it({ _: 2 }, [
o.$slots.optionTooltip ? {
name: "optionTooltip",
fn: $(() => [
b(o.$slots, "optionTooltip", {}, void 0, !0)
]),
key: "0"
} : void 0,
o.$slots.optionPdf ? {
name: "optionPdf",
fn: $(() => [
b(o.$slots, "optionPdf", {}, void 0, !0)
]),
key: "1"
} : void 0,
o.$slots.optionCsv ? {
name: "optionCsv",
fn: $(() => [
b(o.$slots, "optionCsv", {}, void 0, !0)
]),
key: "2"
} : void 0,
o.$slots.optionImg ? {
name: "optionImg",
fn: $(() => [
b(o.$slots, "optionImg", {}, void 0, !0)
]),
key: "3"
} : void 0,
o.$slots.optionTable ? {
name: "optionTable",
fn: $(() => [
b(o.$slots, "optionTable", {}, void 0, !0)
]),
key: "4"
} : void 0,
o.$slots.optionLabels ? {
name: "optionLabels",
fn: $(() => [
b(o.$slots, "optionLabels", {}, void 0, !0)
]),
key: "5"
} : void 0,
o.$slots.optionFullscreen ? {
name: "optionFullscreen",
fn: $(({ toggleFullscreen: l, isFullscreen: a }) => [
b(o.$slots, "optionFullscreen", K(Q({ toggleFullscreen: l, isFullscreen: a })), void 0, !0)
]),
key: "6"
} : void 0,
o.$slots.optionAnnotator ? {
name: "optionAnnotator",
fn: $(({ toggleAnnotator: l, isAnnotator: a }) => [
b(o.$slots, "optionAnnotator", K(Q({ toggleAnnotator: l, isAnnotator: a })), void 0, !0)
]),
key: "7"
} : void 0
]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasTooltip", "hasPdf", "hasImg", "hasXls", "hasTable", "hasLabel", "hasFullscreen", "isFullscreen", "chartElement", "position", "isTooltip", "titles", "hasAnnotator", "isAnnotation", "onGeneratePdf", "onGenerateImage", "style"])) : u("", !0),
e(R) ? (s(), i("svg", {
key: 4,
xmlns: e(bt),
class: de({ "vue-data-ui-fullscreen--on": e(E), "vue-data-ui-fulscreen--off": !e(E) }),
viewBox: `0 0 ${e(n).width <= 0 ? 10 : e(n).width} ${e(n).height <= 0 ? 10 : e(n).height}`,
style: z(`max-width:100%; overflow: visible; background:transparent;color:${e(t).style.chart.color}`)
}, [
Ue(Xt),
o.$slots["chart-background"] ? (s(), i("foreignObject", {
key: 0,
x: 0,
y: 0,
width: e(n).width <= 0 ? 10 : e(n).width,
height: e(n).height <= 0 ? 10 : e(n).height,
style: {
pointerEvents: "none"
}
}, [
b(o.$slots, "chart-background", {}, void 0, !0)
], 8, Gt)) : u("", !0),
e(t).type === "classic" ? (s(), i("defs", Ut, [
e(t).style.chart.useGradient ? (s(), i("radialGradient", {
key: 0,
id: `gradient_${e(_)}`
}, [
y("stop", {
offset: "0%",
"stop-color": e(Z)(e(t).style.chart.backgroundColor, 0),
"stop-opacity": "0"
}, null, 8, Ht),
y("stop", {
offset: `${(1 - e(W) / e(C)) * 100}%`,
"stop-color": e(Z)("#FFFFFF", 0),
"stop-opacity": "0"
}, null, 8, Et),
y("stop", {
offset: `${(1 - e(W) / e(C) / 2) * 100}%`,
"stop-color": e(Z)("#FFFFFF", e(t).style.chart.gradientIntensity)
}, null, 8, Rt),
y("stop", {
offset: "100%",
"stop-color": e(Z)(e(t).style.chart.backgroundColor, 0),
"stop-opacity": "0"
}, null, 8, Wt)
], 8, jt)) : u("", !0)
])) : u("", !0),
e(t).type === "polar" ? (s(), i("defs", qt, [
(s(!0), i(k, null, X(e(d), (l, a) => (s(), i("radialGradient", {
id: `polar_gradient_${a}_${e(_)}`,
cx: l.middlePoint.x / e(n).width * 100 + "%",
cy: l.middlePoint.y / e(n).height * 100 + "%",
r: "62%"
}, [
y("stop", {
offset: "0%",
"stop-color": e(mt)(e(v)[a].color, 0.05),
"stop-opacity": e(t).style.chart.gradientIntensity / 100
}, null, 8, Kt),
y("stop", {
offset: "100%",
"stop-color": e(v)[a].color
}, null, 8, Qt)
], 8, Jt))), 256))
])) : u("", !0),
y("defs", null, [
y("filter", {
id: `blur_${e(_)}`,
x: "-50%",
y: "-50%",
width: "200%",
height: "200%"
}, [
y("feGaussianBlur", {
in: "SourceGraphic",
stdDeviation: 2,
id: `blur_std_${e(_)}`
}, null, 8, el),
r[8] || (r[8] = y("feColorMatrix", {
type: "saturate",
values: "0"
}, null, -1))
], 8, Zt),
y("filter", {
id: `shadow_${e(_)}`,
"color-interpolation-filters": "sRGB"
}, [
y("feDropShadow", {
dx: "0",
dy: "0",
stdDeviation: "10",
"flood-opacity": "0.5",
"flood-color": e(t).style.chart.layout.donut.shadowColor
}, null, 8, ll)
], 8, tl),
y("filter", {
id: `drop_shadow_${e(_)}`,
"color-interpolation-filters": "sRGB",
x: "-50%",
y: "-50%",
width: "200%",
height: "200%"
}, [
y("feDropShadow", {
dx: "0",
dy: "0",
stdDeviation: "3",
"flood-opacity": "1",
"flood-color": e(t).style.chart.layout.donut.shadowColor
}, null, 8, al)
], 8, ol)
]),
e(t).type === "classic" ? (s(!0), i(k, { key: 3 }, X(e(v), (l, a) => (s(), i("g", null, [
O(l) && e(f).dataLabels.show ? (s(), i("path", {
key: 0,
d: e(wt)(l, { x: e(n).width / 2, y: e(n).height / 2 }, 16, 16, !1, !1, e(W)),
stroke: l.color,
"stroke-width": "1",
"stroke-linecap": "round",
"stroke-linejoin": "round",
fill: "none",
filter: J(a)
}, null, 8, sl)) : u("", !0)
]))), 256)) : u("", !0),
e(t).type === "polar" ? (s(!0), i(k, { key: 4 }, X(e(v), (l, a) => (s(), i("g", null, [
O(l) && e(f).dataLabels.show ? (s(), i("line", {
key: 0,
x1: e(L)({ initX: e(d)[a].middlePoint.x, initY: e(d)[a].middlePoint.y, offset: 24, centerX: e(n).width / 2, centerY: e(n).height / 2 }).x,
y1: e(L)({ initX: e(d)[a].middlePoint.x, initY: e(d)[a].middlePoint.y, offset: 24, centerX: e(n).width / 2, centerY: e(n).height / 2 }).y,
x2: e(d)[a].middlePoint.x,
y2: e(d)[a].middlePoint.y,
stroke: l.color,
"stroke-width": "1",
"stroke-linecap": "round",
"stroke-linejoin": "round",
fill: "none",
filter: J(a)
}, null, 8, nl)) : u("", !0)
]))), 256)) : u("", !0),
e(t).type === "classic" && e(t).style.chart.layout.donut.useShadow ? (s(), i("circle", {
key: 5,
cx: e(n).width / 2,
cy: e(n).height / 2,
r: e(C) <= 0 ? 10 : e(C),
fill: e(t).style.chart.backgroundColor,
filter: `url(#shadow_${e(_)})`
}, null, 8, rl)) : u("", !0),
e(S) && e(t).type === "classic" ? (s(), i(k, { key: 6 }, [
(s(!0), i(k, null, X(e(v), (l, a) => (s(), i("path", {
stroke: e(t).style.chart.backgroundColor,
d: l.arcSlice,
fill: "#FFFFFF"
}, null, 8, il))), 256)),
(s(!0), i(k, null, X(e(v), (l, a) => (s(), i("path", {
class: "vue-ui-donut-arc-path",
d: l.arcSlice,
fill: e(Z)(l.color, 80),
stroke: e(t).style.chart.backgroundColor,
"stroke-width": e(t).style.chart.layout.donut.borderWidth,
filter: J(a)
}, null, 8, ul))), 256))
], 64)) : u("", !0),
e(S) && e(t).type === "polar" ? (s(), i(k, { key: 7 }, [
e(v).length > 1 ? (s(), i("g", cl, [
(s(!0), i(k, null, X(e(v), (l, a) => (s(), i("path", {
stroke: e(t).style.chart.backgroundColor,
d: e(d)[a].path,
fill: "#FFFFFF"
}, null, 8, dl))), 256)),
e(t).style.chart.layout.donut.useShadow ? (s(), i("g", hl, [
(s(!0), i(k, null, X(e(v), (l, a) => (s(), i("path", {
class: "vue-ui-donut-arc-path",
d: e(d)[a].path,
fill: "transparent",
stroke: e(t).style.chart.backgroundColor,
"stroke-width": e(t).style.chart.layout.donut.borderWidth,
filter: `url(#drop_shadow_${e(_)})`
}, null, 8, yl))), 256))
])) : u("", !0),
(s(!0), i(k, null, X(e(v), (l, a) => (s(), i("path", {
class: "vue-ui-donut-arc-path",
d: e(d)[a].path,
fill: e(t).style.chart.useGradient ? `url(#polar_gradient_${a}_${e(_)})` : l.color,
stroke: e(t).style.chart.backgroundColor,
"stroke-width": e(t).style.chart.layout.donut.borderWidth,
filter: J(a)
}, null, 8, fl))), 256))
])) : (s(), i("g", vl, [
y("circle", {
cx: e(n).width / 2,
cy: e(n).height / 2,
r: e(C),
fill: e(t).style.chart.useGradient ? `url(#polar_gradient_0_${e(_)})` : e(v)[0].color,
stroke: e(t).style.chart.backgroundColor,
"stroke-width": e(t).style.chart.layout.donut.borderWidth
}, null, 8, pl)
]))
], 64)) : (s(), i("circle", {
key: 8,
cx: e(n).width / 2,
cy: e(n).height / 2,
r: e(C) <= 0 ? 10 : e(C),
fill: "transparent",
stroke: e(t).style.chart.backgroundColor
}, null, 8, gl)),
e(t).style.chart.useGradient && e(t).type === "classic" ? (s(), i("circle", {
key: 9,
cx: e(n).width / 2,
cy: e(n).height / 2,
r: (
/* This might require adjustments */
e(C) <= 0 ? 10 : e(C)
),
fill: `url(#gradient_${e(_)})`
}, null, 8, bl)) : u("", !0),
e(S) ? (s(), i(k, { key: 10 }, [
e(v).length > 1 || e(t).type === "classic" ? (s(), i("g", ml, [
(s(!0), i(k, null, X(e(v), (l, a) => (s(), i("path", {
"data-cy-donut-trap": "",
d: e(t).type === "classic" ? l.arcSlice : e(d)[a].path,
fill: e(P) === a ? "rgba(0,0,0,0.1)" : "transparent",
onMouseenter: (c) => Xe({
datapoint: l,
relativeIndex: a,
seriesIndex: l.seriesIndex,
show: !0
}),
onMouseleave: r[0] || (r[0] = (c) => {
le.value = !1, P.value = null;
}),
onClick: (c) => M(l, a)
}, null, 40, wl))), 256))
])) : (s(), i("g", kl, [
y("circle", {
cx: e(n).width / 2,
cy: e(n).height / 2,
r: e(C),
fill: e(P) === o.i ? "rgba(0,0,0,0.1)" : "transparent",
"data-cy-donut-trap": "",
onMouseenter: r[1] || (r[1] = (l) => Xe({
datapoint: e(v)[0],
relativeIndex: 0,
seriesIndex: e(v)[0].seriesIndex,
show: !0
})),
onMouseleave: r[2] || (r[2] = (l) => {
le.value = !1, P.value = null;
}),
onClick: r[3] || (r[3] = (l) => M(e(v)[0], o.i))
}, null, 40, _l)
]))
], 64)) : u("", !0),
e(t).type === "classic" ? (s(), i(k, { key: 11 }, [
e(t).style.chart.layout.labels.hollow.total.show ? (s(), i("text", {
key: 0,
"text-anchor": "middle",
x: e(n).width / 2,
y: e(n).height / 2 - (e(t).style.chart.layout.labels.hollow.average.show ? e(t).style.chart.layout.labels.hollow.total.fontSize : 0) + e(t).style.chart.layout.labels.hollow.total.offsetY,
fill: e(t).style.chart.layout.labels.hollow.total.color,
"font-size": e(t).style.chart.layout.labels.hollow.total.fontSize,
style: z(`font-weight:${e(t).style.chart.layout.labels.hollow.total.bold ? "bold" : ""}`)
}, x(e(t).style.chart.layout.labels.hollow.total.text), 13, xl)) : u("", !0),
e(t).style.chart.layout.labels.hollow.total.show ? (s(), i("text", {
key: 1,
"text-anchor": "middle",
x: e(n).width / 2,
y: e(n).height / 2 + e(t).style.chart.layout.labels.hollow.total.fontSize - (e(t).style.chart.layout.labels.hollow.average.show ? e(t).style.chart.layout.labels.hollow.total.fontSize : 0) + e(t).style.chart.layout.labels.hollow.total.value.offsetY,
fill: e(t).style.chart.layout.labels.hollow.total.value.color,
"font-size": e(t).style.chart.layout.labels.hollow.total.value.fontSize,
style: z(`font-weight:${e(t).style.chart.layout.labels.hollow.total.value.bold ? "bold" : ""}`)
}, x(e(Y)(
e(t).style.chart.layout.labels.hollow.total.value.formatter,
e(S),
e(F)({
p: e(t).style.chart.layout.labels.hollow.total.value.prefix,
v: e(S),
s: e(t).style.chart.layout.labels.hollow.total.value.suffix
})
)), 13, Cl)) : u("", !0),
e(t).style.chart.layout.labels.hollow.average.show ? (s(), i("text", {
key: 2,
"text-anchor": "middle",
x: e(n).width / 2,
y: e(n).height / 2 + (e(t).style.chart.layout.labels.hollow.total.show ? e(t).style.chart.layout.labels.hollow.average.fontSize : 0) + e(t).style.chart.layout.labels.hollow.average.offsetY,
fill: e(t).style.chart.layout.labels.hollow.average.color,
"font-size": e(t).style.chart.layout.labels.hollow.average.fontSize,
style: z(`font-weight:${e(t).style.chart.layout.labels.hollow.average.bold ? "bold" : ""}`)
}, x(e(t).style.chart.layout.labels.hollow.average.text), 13, $l)) : u("", !0),
e(t).style.chart.layout.labels.hollow.average.show ? (s(), i("text", {
key: 3,
"text-anchor": "middle",
x: e(n).width / 2,
y: e(n).height / 2 + (e(t).style.chart.layout.labels.hollow.total.show ? e(t).style.chart.layout.labels.hollow.average.fontSize : 0) + e(t).style.chart.layout.labels.hollow.average.fontSize + e(t).style.chart.layout.labels.hollow.average.value.offsetY,
fill: e(t).style.chart.layout.labels.hollow.average.value.color,
"font-size": e(t).style.chart.layout.labels.hollow.average.value.fontSize,
style: z(`font-weight:${e(t).style.chart.layout.labels.hollow.average.value.bold ? "bold" : ""}`)
}, x(e(V) ? "--" : e(Y)(
e(t).style.chart.layout.labels.hollow.average.value.formatter,
e(Ae),
e(F)({
p: e(t).style.chart.layout.labels.hollow.average.value.prefix,
v: e(Ae),
s: e(t).style.chart.layout.labels.hollow.average.value.suffix,
r: e(t).style.chart.layout.labels.hollow.average.value.rounding
})
)), 13, Pl)) : u("", !0)
], 64)) : u("", !0),
(s(!0), i(k, null, X(e(v), (l, a) => (s(), i("g", {
filter: J(a),
class: de({ animated: e(t).useCssAnimation })
}, [
e(t).style.chart.layout.labels.dataLabels.useLabelSlots ? (s(), i("g", Fl, [
(s(), i("foreignObject", {
x: e(m)(l, !0).anchor === "end" ? e(m)(l).x - 120 : e(m)(l, !0).anchor === "middle" ? e(m)(l).x - 60 : e(m)(l).x,
y: e(ee)(l) - (e(Ie) ? 20 : 0),
width: "120",
height: "60",
style: { overflow: "visible" }
}, [
y("div", null, [
b(o.$slots, "dataLabel", ut({ ref_for: !0 }, {
datapoint: l,
isBlur: !e(t).useBlurOnHover || [null, void 0].includes(e(P)) || e(P) === a,
isSafari: e(Ie),
isVisible: O(l) && e(f).dataLabels.show,
textAlign: e(m)(l, !0, 16, !0).anchor,
flexAlign: e(m)(l, !0, 16).anchor,
percentage: re(l, e(v))
}), void 0, !0)
])
], 8, Ll))
])) : (s(), i("g", Tl, [
e(t).type === "classic" ? (s(), i(k, { key: 0 }, [
O(l) && e(f).dataLabels.show ? (s(), i("circle", {
key: 0,
cx: e(m)(l).x,
cy: e(ee)(l) - 3.5,
fill: l.color,
stroke: e(t).style.chart.backgroundColor,
"stroke-width": 1,
r: 3,
filter: !e(t).useBlurOnHover || [null, void 0].includes(e(P)) || e(P) === a ? "" : `url(#blur_${e(_)})`,
onClick: (c) => M(l, a)
}, null, 8, zl)) : u("", !0)
], 64)) : u("", !0),
e(t).type === "polar" ? (s(), i(k, { key: 1 }, [
O(l) && e(f).dataLabels.show ? (s(), i("circle", {
key: 0,
cx: e(L)({ initX: e(d)[a].middlePoint.x, initY: e(d)[a].middlePoint.y, offset: 24, centerX: e(n).width / 2, centerY: e(n).height / 2 }).x,
cy: e(L)({ initX: e(d)[a].middlePoint.x, initY: e(d)[a].middlePoint.y, offset: 24, centerX: e(n).width / 2, centerY: e(n).height / 2 }).y,
fill: l.color,
stroke: e(t).style.chart.backgroundColor,
"stroke-width": 1,
r: 3,
filter: !e(t).useBlurOnHover || [null, void 0].includes(e(P)) || e(P) === a ? "" : `url(#blur_${e(_)})`,
onClick: (c) => M(l, a)
}, null, 8, Ol)) : u("", !0)
], 64)) : u("", !0),
e(t).type === "classic" ? (s(), i(k, { key: 2 }, [
O(l) && e(f).dataLabels.show ? (s(), i("text", {
key: 0,
"text-anchor": e(m)(l, !0, 12).anchor,
x: e(m)(l, !0, 12).x,
y: e(ee)(l),
fill: e(t).style.chart.layout.labels.percentage.color,
"font-size": e(t).style.chart.layout.labels.percentage.fontSize,
style: z(`font-weight:${e(t).style.chart.layout.labels.percentage.bold ? "bold" : ""}`),
onClick: (c) => M(l, a)
}, x(re(l, e(v))) + " " + x(e(t).style.chart.layout.labels.value.show ? `(${e(Y)(
e(t).style.chart.layout.labels.value.formatter,
l.value,
e(F)({
p: e(t).style.chart.layout.labels.dataLabels.prefix,
v: l.value,
s: e(t).style.chart.layout.labels.dataLabels.suffix,
r: e(t).style.chart.layout.labels.value.rounding
}),
{ datapoint: l }
)})` : ""), 13, Yl)) : u("", !0),
O(l) && e(f).dataLabels.show ? (s(), i("text", {
key: 1,
"text-anchor": e(m)(l).anchor,
x: e(m)(l, !0, 12).x,
y: e(ee)(l) + e(t).style.chart.layout.labels.percentage.fontSize,
fill: e(t).style.chart.layout.labels.name.color,
"font-size": e(t).style.chart.layout.labels.name.fontSize,
style: z(`font-weight:${e(t).style.chart.layout.labels.name.bold ? "bold" : ""}`),
onClick: (c) => M(l, a)
}, x(l.name), 13, Al)) : u("", !0)
], 64)) : u("", !0),
e(t).type === "polar" ? (s(), i(k, { key: 3 }, [
O(l) && e(f).dataLabels.show ? (s(), i("text", {
key: 0,
"text-anchor": H(e(d)[a].middlePoint),
x: e(L)({ initX: e(d)[a].middlePoint.x, initY: e(d)[a].middlePoint.y, offset: 42, centerX: e(n).width / 2, centerY: e(n).height / 2 }).x,
y: e(L)({ initX: e(d)[a].middlePoint.x, initY: e(d)[a].middlePoint.y, offset: 42, centerX: e(n).width / 2, centerY: e(n).height / 2 }).y,
fill: e(t).style.chart.layout.labels.percentage.color,
"font-size": e(t).style.chart.layout.labels.percentage.fontSize,
style: z(`font-weight:${e(t).style.chart.layout.labels.percentage.bold ? "bold" : ""}`),
onClick: (c) => M(l, a)
}, x(re(l, e(v))) + " " + x(e(t).style.chart.layout.labels.value.show ? `(${e(Y)(
e(t).style.chart.layout.labels.value.formatter,
l.value,
e(F)({
p: e(t).style.chart.layout.labels.dataLabels.prefix,
v: l.value,
s: e(t).style.chart.layout.labels.dataLabels.suffix,
r: e(t).style.chart.layout.labels.value.rounding
}),
{ datapoint: l }
)})` : ""), 13, Nl)) : u("", !0),
O(l) && e(f).dataLabels.show ? (s(), i("text", {
key: 1,
"text-anchor": H(e(d)[a].middlePoint),
x: e(L)({ initX: e(d)[a].middlePoint.x, initY: e(d)[a].middlePoint.y, offset: 42, centerX: e(n).width / 2, centerY: e(n).height / 2 }).x,
y: e(L)({ initX: e(d)[a].middlePoint.x, initY: e(d)[a].middlePoint.y, offset: 42, centerX: e(n).width / 2, centerY: e(n).height / 2 }).y + e(t).style.chart.layout.labels.percentage.fontSize,
fill: e(t).style.chart.layout.labels.name.color,
"font-size": e(t).style.chart.layout.labels.name.fontSize,
style: z(`font-weight:${e(t).style.chart.layout.labels.name.bold ? "bold" : ""}`),
onClick: (c) => M(l, a)
}, x(l.name), 13, Xl)) : u("", !0)
], 64)) : u("", !0)
])),
e(f).dataLabels.show && e(t).style.chart.comments.show && l.comment ? (s(), i("g", Dl, [
O(l) && e(t).type === "classic" ? (s(), i("foreignObject", {
key: 0,
x: e(t).style.chart.comments.offsetX + (e(m)(l, !0).anchor === "end" ? e(m)(l).x - e(t).style.chart.comments.width : e(m)(l, !0).anchor === "middle" ? e(m)(l).x - e(t).style.chart.comments.width / 2 : e(m)(l).x),
y: e(ee)(l) + 24 + e(t).style.chart.comments.offsetY,
width: e(t).style.chart.comments.width,
height: "200",
style: { overflow: "visible", "pointer-events": "none" }
}, [
y("div", null, [
b(o.$slots, "plot-comment", {
plot: { ...l, textAlign: e(m)(l, !0, 16, !0).anchor, flexAlign: e(m)(l, !0, 16).anchor }
}, void 0, !0)
])
], 8, Il)) : u("", !0),
O(l) && e(t).type === "polar" ? (s(), i("foreignObject", {
key: 1,
x: e(t).style.chart.comments.offsetX + (H(e(d)[a].middlePoint) === "end" ? e(L)({ initX: e(d)[a].middlePoint.x, initY: e(d)[a].middlePoint.y, offset: 42, centerX: e(n).width / 2, centerY: e(n).height / 2 }).x - e(t).style.chart.comments.width : H(e(d)[a].middlePoint) === "middle" ? e(L)({ initX: e(d)[a].middlePoint.x, initY: e(d)[a].middlePoint.y, offset: 42, centerX: e(n).width / 2, centerY: e(n).height / 2 }).x - e(t).style.chart.comments.width / 2 : e(L)({ initX: e(d)[a].middlePoint.x, initY: e(d)[a].middlePoint.y, offset: 42, centerX: e(n).width / 2, centerY: e(n).height / 2 }).x),
y: lt(e(d)[a]) + e(t).style.chart.comments.offsetY,
width: e(t).style.chart.comments.width,
height: "200",
style: { overflow: "visible", "pointer-events": "none" }
}, [
y("div", null, [
b(o.$slots, "plot-comment", {
plot: { ...l, textAlign: H(e(d)[a].middlePoint), flexAlign: H(e(d)[a].middlePoint) }
}, void 0, !0)
])
], 8, Ml)) : u("", !0)
])) : u("", !0)
], 10, Sl))), 256)),
b(o.$slots, "svg", { svg: e(n) }, void 0, !0)
], 14, Vt)) : u("", !0),
o.$slots.watermark ? (s(), i("div", Bl, [
b(o.$slots, "watermark", K(Q({ isPrinting: e(Ce) || e($e) })), void 0, !0)
])) : u("", !0),
e(R) ? u("", !0) : (s(), G(At, {
key: 6,
config: {
type: "donut",
style: {
backgroundColor: e(t).style.chart.backgroundColor,
donut: {
color: "#CCCCCC",
strokeWidth: e(W) * 0.8
}
}
}
}, null, 8, ["config"])),
y("div", {
ref_key: "chartLegend",
ref: ye
}, [
e(t).style.chart.legend.show ? (s(), G(Yt, {
key: `legend_${e(be)}`,
legendSet: e(Ye),
config: e(tt),
onClickMarker: r[4] || (r[4] = ({ i: l }) => Oe(l))
}, {
item: $(({ legend: l, index: a }) => [
y("div", {
style: z(`opacity:${e(N).includes(a) ? 0.5 : 1}`),
onClick: (c) => l.segregate()
}, [
je(x(l.name) + ": " + x(e(Y)(
e(t).style.chart.layout.labels.value.formatter,
l.value,
e(F)({
p: e(t).style.chart.layout.labels.dataLabels.prefix,
v: l.value,
s: e(t).style.chart.layout.labels.dataLabels.suffix,
r: e(t).style.chart.legend.roundingValue
}),
{
datapoint: l,
index: a
}
)) + " ", 1),
e(N).includes(a) ? (s(), i("span", Ul, " ( " + x(st(l.proportion * 100)) + " % ) ", 1)) : (s(), i("span", Gl, " (" + x(isNaN(l.value / e(S)) ? "-" : e(Y)(
e(t).style.chart.layout.labels.percentage.formatter,
e(Ne)(l),
e(F)({
v: e(Ne)(l),
s: "%",
r: e(t).style.chart.legend.roundingPercentage
})
)) + ") ", 1))
], 12, Vl)
]),
_: 1
}, 8, ["legendSet", "config"])) : u("", !0),
b(o.$slots, "legend", { legend: e(Ye) }, void 0, !0)
], 512),
o.$slots.source ? (s(), i("div", {
key: 7,
ref_key: "source",
ref: fe,
dir: "auto"
}, [
b(o.$slots, "source", {}, void 0, !0)
], 512)) : u("", !0),
Ue(Ot, {
show: e(f).showTooltip && e(le),
backgroundColor: e(t).style.chart.tooltip.backgroundColor,
color: e(t).style.chart.tooltip.color,
fontSize: e(t).style.chart.tooltip.fontSize,
borderRadius: e(t).style.chart.tooltip.borderRadius,
borderColor: e(t).style.chart.tooltip.borderColor,
borderWidth: e(t).style.chart.tooltip.borderWidth,
backgroundOpacity: e(t).style.chart.tooltip.backgroundOpacity,
position: e(t).style.chart.tooltip.position,
offsetY: e(t).style.chart.tooltip.offsetY,
parent: e(j),
content: e(se),
isCustom: e(q),
isFullscreen: e(E)
}, {
"tooltip-before": $(() => [
b(o.$slots, "tooltip-before", K(Q({ ...e(ie) })), void 0, !0)
]),
"tooltip-after": $(() => [
b(o.$slots, "tooltip-after", K(Q({ ...e(ie) })), void 0, !0)
]),
_: 3
}, 8, ["show", "backgroundColor", "color", "fontSize", "borderRadius", "borderColor", "borderWidth", "backgroundOpacity", "position", "offsetY", "parent", "content", "isCustom", "isFullscreen"]),
e(R) ? (s(), G(Nt, {
key: 8,
hideDetails: "",
config: {
open: e(f).showTable,
maxHeight: 1e4,
body: {
backgroundColor: e(t).style.chart.backgroundColor,
color: e(t).style.chart.color
},
head: {
backgroundColor: e(t).style.chart.backgroundColor,
color: e(t).style.chart.color
}
}
}, {
content: $(() => [
(s(), G(zt, {
key: `table_${e(ge)}`,
colNames: e(oe).colNames,
head: e(oe).head,
body: e(oe).body,
config: e(oe).config,
title: `${e(t).style.chart.title.text}${e(t).style.chart.title.subtitle.text ? ` : ${e(t).style.chart.title.subtitle.text}` : ""}`,
onClose: r[5] || (r[5] = (l) => e(f).showTable = !1)
}, {
th: $(({ th: l }) => [
y("div", {
innerHTML: l,
style: { display: "flex", "align-items": "center" }
}, null, 8, jl)
]),
td: $(({ td: l }) => [
je(x(l.name ? l.name : isNaN(Number(l)) ? l.includes("%") ? l : e(Y)(
e(t).style.chart.layout.labels.percentage.formatter,
l,
e(F)({
v: l,
s: "%",
r: e(t).style.chart.layout.labels.percentage.rounding
})
) : e(Y)(
e(t).style.chart.layout.labels.value.formatter,
l,
e(F)({
p: e(t).style.chart.layout.labels.dataLabels.prefix,
v: l,
s: e(t).style.chart.layout.labels.dataLabels.suffix,
r: e(t).style.chart.layout.labels.value.rounding
})
)), 1)
]),
_: 1
}, 8, ["colNames", "head", "body", "config", "title"]))
]),
_: 1
}, 8, ["config"])) : u("", !0)
], 46, Bt));
}
}, ro = /* @__PURE__ */ Mt(Hl, [["__scopeId", "data-v-1a12aa08"]]);
export {
ro as default
};