vue-data-ui-hq
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
917 lines (916 loc) • 37.9 kB
JavaScript
import { computed as g, ref as i, watch as Ve, onMounted as at, onBeforeUnmount as ot, openBlock as r, createElementBlock as u, normalizeClass as P, unref as e, normalizeStyle as K, createBlock as D, createCommentVNode as h, createSlots as st, withCtx as m, renderSlot as k, normalizeProps as B, guardReactiveProps as E, createVNode as Me, createElementVNode as p, Fragment as C, renderList as T, toDisplayString as S, createTextVNode as Q, nextTick as nt } from "vue";
import { u as rt, c as ut, t as it, a as dt, p as Z, o as ct, e as M, b as ft, J as Ue, d as ht, m as Be, f as x, X as vt, s as Ee, L as yt, k as U, n as ie, i as R, x as Re, y as pt, q as bt, r as gt } from "./index-WrV3SAID.js";
import { t as mt, u as kt } from "./useResponsive-CoxXLe23.js";
import { _ as wt } from "./Title-BR-xoRp4.js";
import { u as $t, U as Lt } from "./usePrinter-kVpf1iV8.js";
import { D as Ct } from "./DataTable-DNPvKWC0.js";
import { _ as xt } from "./Tooltip-ho4JxRm-.js";
import { L as _t } from "./Legend-7H4oi6Sq.js";
import Ft from "./vue-ui-skeleton-Qec_XSRf.js";
import Tt from "./vue-ui-accordion-BQCDXXDs.js";
import { u as Ge } from "./useNestedProp-Cj0kHD7k.js";
import { _ as Nt } from "./PackageVersion-1NslmM8M.js";
import { P as St } from "./PenAndPaper-BF1ZRVm3.js";
import { u as Ot } from "./useUserOptionState-BIvW1Kz7.js";
import { _ as At } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const It = ["id"], Pt = ["xmlns", "viewBox"], Dt = ["width", "height"], zt = ["id"], Vt = ["offset", "stop-color"], Mt = ["offset", "stop-opacity"], Ut = ["id"], Bt = ["id"], Et = ["id"], Rt = ["flood-color"], Gt = ["d", "fill", "stroke", "stroke-width", "filter"], Yt = { key: 1 }, Xt = ["d", "fill"], Ht = { key: 2 }, Wt = ["x", "y", "font-size", "font-weight", "fill"], qt = { key: 3 }, Jt = ["filter"], Kt = ["text-anchor", "x", "y", "fill", "font-size", "font-weight"], Qt = ["text-anchor", "x", "y", "fill", "font-size", "font-weight"], Zt = ["text-anchor", "x", "y", "fill", "font-size", "font-weight"], jt = ["d", "fill", "onMouseenter", "onClick"], el = {
key: 5,
class: "vue-data-ui-watermark"
}, tl = {
key: 0,
class: "vue-ui-nested-donuts-legend-title"
}, ll = ["onClick"], al = ["innerHTML"], ol = {
__name: "vue-ui-nested-donuts",
props: {
config: {
type: Object,
default() {
return {};
}
},
dataset: {
type: Array,
default() {
return [];
}
}
},
emits: ["selectLegend", "selectDatapoint"],
setup(Ye, { expose: Xe, emit: He }) {
const { vue_ui_nested_donuts: We } = rt(), O = Ye, G = g(() => !!O.dataset && O.dataset.length), w = i(ut()), j = i(!1), ee = i(""), qe = i(null), de = i(0), z = i(null), ce = i(null), te = i(null), fe = i(null), he = i(null), ve = i(0), ye = i(0), pe = i(0), V = i(!1);
function Je(l) {
V.value = l, de.value += 1;
}
const t = g({
get: () => me(),
set: (l) => l
}), { userOptionsVisible: le, setUserOptionsVisibility: be, keepUserOptionState: ge } = Ot({ config: t.value });
function me() {
const l = Ge({
userConfig: O.config,
defaultConfig: We
});
return l.theme ? {
...Ge({
userConfig: it.vue_ui_nested_donuts[l.theme] || O.config,
defaultConfig: l
}),
customPalette: dt[l.theme] || Z
} : l;
}
Ve(() => O.config, (l) => {
t.value = me(), le.value = !t.value.showOnChartHover, ke(), ve.value += 1, ye.value += 1, pe.value += 1;
}, { deep: !0 });
const Y = i(null);
at(() => {
ke();
});
function ke() {
if (ct(O.dataset) && M({
componentName: "VueUiNestedDonuts",
type: "dataset"
}), t.value.responsive) {
const l = mt(() => {
const { width: n, height: o } = kt({
chart: z.value,
title: t.value.style.chart.title.text ? ce.value : null,
legend: t.value.style.chart.legend.show ? te.value : null,
source: fe.value,
noTitle: he.value
});
f.value.width = n, f.value.height = o;
});
Y.value = new ResizeObserver(l), Y.value.observe(z.value.parentNode);
}
}
ot(() => {
Y.value && Y.value.disconnect();
});
const { isPrinting: we, isImaging: $e, generatePdf: Le, generateImage: Ce } = $t({
elementId: `nested_donuts_${w.value}`,
fileName: t.value.style.chart.title.text || "vue-ui-nested-donuts"
}), Ke = g(() => t.value.userOptions.show && !t.value.style.chart.title.text), Qe = g(() => ft(t.value.customPalette)), $ = i({
dataLabels: {
show: t.value.style.chart.layout.labels.dataLabels.show
},
showTable: t.value.table.show,
showTooltip: t.value.style.chart.tooltip.show
}), f = i({
height: 512,
width: 512
}), xe = He;
function Ze({ datapoint: l, index: n }) {
xe("selectDatapoint", { datapoint: l, index: n });
}
const y = i([]), _ = g(() => (O.dataset.forEach((l, n) => {
[null, void 0].includes(l.name) && M({
componentName: "VueUiNestedDonuts",
type: "datasetSerieAttribute",
property: "name",
index: n
}), [null, void 0].includes(l.series) ? M({
componentName: "VueUiNestedDonuts",
type: "datasetSerieAttribute",
property: "series",
index: n
}) : l.series.length === 0 ? M({
componentName: "VueUiNestedDonuts",
type: "datasetAttributeEmpty",
property: `series at index ${n}`
}) : l.series.forEach((o, s) => {
[null, void 0].includes(o.name) && M({
componentName: "VueUiNestedDonuts",
type: "datasetSerieAttribute",
property: "name",
index: s,
key: "serie"
}), [null, void 0].includes(o.values) && M({
componentName: "VueUiNestedDonuts",
type: "datasetSerieAttribute",
property: "values",
index: s,
key: "serie"
});
});
}), O.dataset.map((l, n) => ({
...l,
total: l.series.filter((o) => !y.value.includes(o.id)).map((o) => Ue(o.values).reduce((s, a) => s + a, 0)).reduce((o, s) => o + s, 0),
datasetIndex: n,
id: `${w.value}_${n}`,
series: l.series.map((o, s) => ({
name: o.name,
arcOf: l.name,
arcOfId: `${w.value}_${n}`,
id: `${w.value}_${n}_${s}`,
seriesIndex: s,
datasetIndex: n,
color: ht(o.color) || Qe.value[s] || Z[s] || Z[s % Z.length],
value: Ue(o.values).reduce((a, d) => a + d, 0),
absoluteValues: o.values || []
}))
})))), F = g(() => Math.min(f.value.height, f.value.width) * (t.value.style.chart.layout.donut.strokeWidth / 512)), _e = g(() => [..._.value].map((l, n) => {
const o = l.series.filter((s) => !y.value.includes(s.id)).map((s) => s.value).reduce((s, a) => s + a, 0);
return {
...l,
total: o,
series: l.series.filter((s) => !y.value.includes(s.id)).map((s) => ({
...s,
proportion: s.value / o
}))
};
}));
function je(l, n, o) {
let s = 0;
for (let a = 0; a < l.length; a += 1)
o.includes(l[a]) && (s += 1);
return s < n;
}
const v = i(_e.value);
Ve(() => _e.value, (l) => v.value = l);
const Fe = i(null), Te = i(null);
function ae(l) {
xe("selectLegend", l);
const n = _.value.flatMap((c) => c.series).find((c) => c.id === l.id), o = v.value.flatMap((c) => c.series).find((c) => c.id === l.id);
let a = o ? o.value : 0;
const d = _.value.find((c) => c.id === n.arcOfId).series.map((c) => c.id), b = je(d, d.length - 1, y.value);
if (y.value.includes(l.id)) {
let c = function() {
a > n.value ? (cancelAnimationFrame(Fe.value), v.value = v.value.map((L) => ({
...L,
series: L.series.map((N) => N.id == l.id ? {
...N,
value: n.value
} : N)
}))) : (a += n.value * 0.025, v.value = v.value.map((L) => ({
...L,
series: L.series.map((N) => N.id === l.id ? {
...N,
value: a
} : N)
})), Fe.value = requestAnimationFrame(c));
};
y.value = y.value.filter((L) => L !== l.id), c();
} else if (b) {
let c = function() {
a < 0.1 ? (cancelAnimationFrame(Te.value), y.value.push(l.id), v.value = v.value.map((L, N) => ({
...L,
series: L.series.map((I) => I.id === l.id ? {
...I,
value: 0
} : I)
}))) : (a /= 1.1, v.value = v.value.map((L, N) => ({
...L,
series: L.series.map((I) => I.id === l.id ? {
...I,
value: a
} : I)
})), Te.value = requestAnimationFrame(c));
};
c();
}
}
const oe = g(() => F.value / _.value.length * t.value.style.chart.layout.donut.spacingRatio), Ne = g(() => v.value.map((l, n) => F.value - n * F.value / _.value.length)), X = g(() => v.value.map((l, n) => {
const o = n * F.value / _.value.length;
return {
...l,
radius: F.value - o,
donut: Be(
{ series: l.series },
f.value.width / 2,
f.value.height / 2,
F.value - o,
F.value - o,
1.99999,
2,
1,
360,
105.25,
oe.value
)
};
})), Se = g(() => [..._.value].map((l, n) => {
const o = n * F.value / _.value.length;
return {
sizeRatio: o,
donut: Be(
{ series: [{ value: 1 }] },
f.value.width / 2,
f.value.height / 2,
F.value - o,
F.value - o,
1.99999,
2,
1,
360,
105.25,
F.value / _.value.length * t.value.style.chart.layout.donut.spacingRatio
)[0]
};
})), Oe = i(null), H = i(null), W = i(null), se = i(null);
function et({ datapoint: l, _relativeIndex: n, seriesIndex: o }) {
Oe.value = l.arcOfId, H.value = l.id, W.value = o, se.value = {
datapoint: l,
seriesIndex: o,
series: v.value,
config: t.value
};
const s = t.value.style.chart.tooltip.customFormat;
if (Re(s) && pt(() => s({
seriesIndex: o,
datapoint: l,
series: v.value,
config: t.value
})))
ee.value = s({
seriesIndex: o,
datapoint: l,
series: v.value,
config: t.value
});
else {
let a = "";
if (t.value.style.chart.tooltip.showAllItemsAtIndex && y.value.length === 0) {
const d = v.value.map((b) => b.series.find((c) => c.seriesIndex === o));
d.forEach((b, c) => {
if (!b) return "";
a += `
<div style="display:flex; flex-direction: column; justify-content:flex-start; align-items:flex-start;padding:6px 0; ${c < d.length - 1 ? `border-bottom:1px solid ${t.value.style.chart.tooltip.borderColor}` : ""}">
<div style="display:flex; flex-direction: row; gap: 3px; justify-content:flex-start; align-items:center;">
<svg viewBox="0 0 20 20" height="${t.value.style.chart.tooltip.fontSize}" width="${t.value.style.chart.tooltip.fontSize}">
<circle cx="10" cy="10" r="10" fill="${b.color}"/>
</svg>
<span>
${b.arcOf ?? ""} - ${b.name}
</span>
</div>
<span>
${t.value.style.chart.tooltip.showValue ? `<b>${R(
t.value.style.chart.layout.labels.dataLabels.formatter,
l.value,
x({
p: t.value.style.chart.layout.labels.dataLabels.prefix,
v: l.value,
s: t.value.style.chart.layout.labels.dataLabels.suffix,
r: t.value.style.chart.tooltip.roundingValue
}),
{ datapoint: l, seriesIndex: o }
)}
</b>` : ""}
${t.value.style.chart.tooltip.showPercentage ? `(${x({
v: b.proportion * 100,
s: "%",
r: t.value.style.chart.tooltip.roundingPercentage
})})` : ""}
</span>
</div>
`;
});
} else
a += `<div style="width:100%;text-align:center;border-bottom:1px solid ${t.value.style.chart.tooltip.borderColor};padding-bottom:6px;margin-bottom:3px;">${l.arcOf ?? ""} - ${l.name}</div>`, a += `<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="${l.color}"/></svg>`, t.value.style.chart.tooltip.showValue && (a += `<b>${R(
t.value.style.chart.layout.labels.dataLabels.formatter,
l.value,
x({
p: t.value.style.chart.layout.labels.dataLabels.prefix,
v: l.value,
s: t.value.style.chart.layout.labels.dataLabels.suffix,
r: t.value.style.chart.tooltip.roundingValue
}),
{ datapoint: l, seriesIndex: o }
)}</b>`), t.value.style.chart.tooltip.showPercentage && (t.value.style.chart.tooltip.showValue ? a += `<span>(${x({
v: l.proportion * 100,
s: "%",
r: t.value.style.chart.tooltip.roundingPercentage
})})</span></div>` : a += `<b>${x({
v: l.proportion * 100,
s: "%",
r: t.value.style.chart.tooltip.roundingPercentage
})}</b></div>`);
ee.value = `<div style="font-size:${t.value.style.chart.tooltip.fontSize}px">${a}</div>`;
}
j.value = !0;
}
function ne(l) {
return l.proportion * 100 > t.value.style.chart.layout.labels.dataLabels.hideUnderValue;
}
function Ae(l, n) {
if (!t.value.useBlurOnHover)
return "";
if (t.value.style.chart.tooltip.showAllItemsAtIndex && y.value.length === 0)
return [null, void 0].includes(W.value) || W.value === n ? "" : `url(#blur_${w.value})`;
if (!t.value.style.chart.tooltip.showAllItemsAtIndex || y.value.length)
return [null, void 0].includes(H.value) || H.value === l.id ? "" : `url(#blur_${w.value})`;
}
const re = g(() => _.value.map((l, n) => l.series.map((o, s) => ({
name: o.name,
color: o.color,
value: o.value,
shape: "circle",
arcOf: o.arcOf,
id: o.id,
seriesIndex: s,
datasetIndex: n,
total: l.series.filter((a) => !y.value.includes(a.id)).map((a) => a.value).reduce((a, d) => a + d, 0)
})).map((o) => ({
...o,
opacity: y.value.includes(o.id) ? 0.5 : 1,
segregate: () => ae(o),
isSegregated: y.value.includes(o.id)
})))), tt = g(() => ({
cy: "nested-donuts-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" : ""
})), A = g(() => {
const l = v.value.flatMap((o) => o.series.map((s) => ({
name: `${o.name} - ${s.name}`,
color: s.color,
total: o.total
}))), n = v.value.flatMap((o) => o.series.map((s) => s.value));
return { head: l, body: n };
});
function Ie() {
nt(() => {
const l = A.value.head.map((s, a) => [[
s.name
], [A.value.body[a]], [isNaN(A.value.body[a] / s.total) ? "-" : A.value.body[a] / s.total * 100]]), n = [[t.value.style.chart.title.text], [t.value.style.chart.title.subtitle.text], [[""], ["val"], ["%"]]].concat(l), o = bt(n);
gt({ csvContent: o, title: t.value.style.chart.title.text || "vue-ui-nested-donuts" });
});
}
const q = g(() => {
const l = [
t.value.table.columnNames.series,
t.value.table.columnNames.value,
t.value.table.columnNames.percentage
], n = A.value.head.map((a, d) => {
const b = x({ p: t.value.style.chart.layout.labels.dataLabels.prefix, v: A.value.body[d], s: t.value.style.chart.layout.labels.dataLabels.suffix, r: t.value.table.td.roundingValue });
return [
{
color: a.color,
name: a.name
},
b,
isNaN(A.value.body[d] / a.total) ? "-" : x({
v: A.value.body[d] / a.total * 100,
s: "%",
r: t.value.table.td.roundingPercentage
})
];
}), o = {
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: l,
body: n,
config: o
};
});
function lt() {
return _.value;
}
function Pe() {
$.value.showTable = !$.value.showTable;
}
function De() {
$.value.dataLabels.show = !$.value.dataLabels.show;
}
function ze() {
$.value.showTooltip = !$.value.showTooltip;
}
const J = i(!1);
function ue() {
J.value = !J.value;
}
return Xe({
getData: lt,
generatePdf: Le,
generateCsv: Ie,
generateImage: Ce,
toggleTable: Pe,
toggleLabels: De,
toggleTooltip: ze,
toggleAnnotator: ue
}), (l, n) => (r(), u("div", {
ref_key: "nestedDonutsChart",
ref: z,
class: P(`vue-ui-nested-donuts ${e(V) ? "vue-data-ui-wrapper-fullscreen" : ""} ${e(t).useCssAnimation ? "" : "vue-ui-dna"}`),
style: K(`font-family:${e(t).style.fontFamily};width:100%; text-align:center;background:${e(t).style.chart.backgroundColor}`),
id: `nested_donuts_${e(w)}`,
onMouseenter: n[3] || (n[3] = () => e(be)(!0)),
onMouseleave: n[4] || (n[4] = () => e(be)(!1))
}, [
e(t).userOptions.buttons.annotator ? (r(), D(St, {
key: 0,
parent: e(z),
backgroundColor: e(t).style.chart.backgroundColor,
color: e(t).style.chart.color,
active: e(J),
onClose: ue
}, null, 8, ["parent", "backgroundColor", "color", "active"])) : h("", !0),
e(Ke) ? (r(), u("div", {
key: 1,
ref_key: "noTitle",
ref: he,
class: "vue-data-ui-no-title-space",
style: "height:36px; width: 100%;background:transparent"
}, null, 512)) : h("", !0),
e(t).style.chart.title.text ? (r(), u("div", {
key: 2,
ref_key: "chartTitle",
ref: ce
}, [
(r(), D(wt, {
key: `title_${e(ve)}`,
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)) : h("", !0),
e(t).userOptions.show && e(G) && (e(ge) || e(le)) ? (r(), D(Lt, {
ref: "details",
key: `user_option_${e(de)}`,
backgroundColor: e(t).style.chart.backgroundColor,
color: e(t).style.chart.color,
isPrinting: e(we),
isImaging: e($e),
uid: e(w),
hasTooltip: e(t).userOptions.buttons.tooltip && e(t).style.chart.tooltip.show,
hasPdf: e(t).userOptions.buttons.pdf,
hasXls: e(t).userOptions.buttons.csv,
hasImg: e(t).userOptions.buttons.img,
hasTable: e(t).userOptions.buttons.table,
hasLabel: e(t).userOptions.buttons.labels,
hasFullscreen: e(t).userOptions.buttons.fullscreen,
isFullscreen: e(V),
isTooltip: e($).showTooltip,
titles: { ...e(t).userOptions.buttonTitles },
chartElement: e(z),
position: e(t).userOptions.position,
hasAnnotator: e(t).userOptions.buttons.annotator,
isAnnotation: e(J),
onToggleFullscreen: Je,
onGeneratePdf: e(Le),
onGenerateCsv: Ie,
onGenerateImage: e(Ce),
onToggleTable: Pe,
onToggleLabels: De,
onToggleTooltip: ze,
onToggleAnnotator: ue,
style: K({
visibility: e(ge) ? e(le) ? "visible" : "hidden" : "visible"
})
}, st({ _: 2 }, [
l.$slots.optionTooltip ? {
name: "optionTooltip",
fn: m(() => [
k(l.$slots, "optionTooltip", {}, void 0, !0)
]),
key: "0"
} : void 0,
l.$slots.optionPdf ? {
name: "optionPdf",
fn: m(() => [
k(l.$slots, "optionPdf", {}, void 0, !0)
]),
key: "1"
} : void 0,
l.$slots.optionCsv ? {
name: "optionCsv",
fn: m(() => [
k(l.$slots, "optionCsv", {}, void 0, !0)
]),
key: "2"
} : void 0,
l.$slots.optionImg ? {
name: "optionImg",
fn: m(() => [
k(l.$slots, "optionImg", {}, void 0, !0)
]),
key: "3"
} : void 0,
l.$slots.optionTable ? {
name: "optionTable",
fn: m(() => [
k(l.$slots, "optionTable", {}, void 0, !0)
]),
key: "4"
} : void 0,
l.$slots.optionLabels ? {
name: "optionLabels",
fn: m(() => [
k(l.$slots, "optionLabels", {}, void 0, !0)
]),
key: "5"
} : void 0,
l.$slots.optionFullscreen ? {
name: "optionFullscreen",
fn: m(({ toggleFullscreen: o, isFullscreen: s }) => [
k(l.$slots, "optionFullscreen", B(E({ toggleFullscreen: o, isFullscreen: s })), void 0, !0)
]),
key: "6"
} : void 0,
l.$slots.optionAnnotator ? {
name: "optionAnnotator",
fn: m(({ toggleAnnotator: o, isAnnotator: s }) => [
k(l.$slots, "optionAnnotator", B(E({ toggleAnnotator: o, isAnnotator: s })), void 0, !0)
]),
key: "7"
} : void 0
]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasTooltip", "hasPdf", "hasXls", "hasImg", "hasTable", "hasLabel", "hasFullscreen", "isFullscreen", "isTooltip", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "onGeneratePdf", "onGenerateImage", "style"])) : h("", !0),
e(G) ? (r(), u("svg", {
key: 4,
xmlns: e(vt),
class: P({ "vue-data-ui-fullscreen--on": e(V), "vue-data-ui-fulscreen--off": !e(V) }),
viewBox: `0 0 ${e(f).width <= 0 ? 1e-3 : e(f).width} ${e(f).height < 0 ? 1e-3 : e(f).height}`,
style: K(`max-width:100%; overflow: visible; background:transparent;color:${e(t).style.chart.color}`)
}, [
Me(Nt),
l.$slots["chart-background"] ? (r(), u("foreignObject", {
key: 0,
x: 0,
y: 0,
width: e(f).width <= 0 ? 1e-3 : e(f).width,
height: e(f).height < 0 ? 1e-3 : e(f).height,
style: {
pointerEvents: "none"
}
}, [
k(l.$slots, "chart-background", {}, void 0, !0)
], 8, Dt)) : h("", !0),
p("defs", null, [
(r(!0), u(C, null, T(e(Se), (o, s) => (r(), u("radialGradient", {
id: `radial_${e(w)}_${s}`
}, [
n[5] || (n[5] = p("stop", {
offset: "0%",
"stop-color": "#FFFFFF",
"stop-opacity": "0"
}, null, -1)),
p("stop", {
offset: `${(1 - e(oe) / e(Ne)[s]) * 100}%`,
"stop-color": e(Ee)("#FFFFFF", 0),
"stop-opacity": "0"
}, null, 8, Vt),
p("stop", {
offset: `${(1 - e(oe) / e(Ne)[s] / 2) * 100}%`,
"stop-color": "#FFFFFF",
"stop-opacity": e(t).style.chart.gradientIntensity / 100
}, null, 8, Mt),
n[6] || (n[6] = p("stop", {
offset: "100%",
"stop-color": "#FFFFFF",
"stop-opacity": "0"
}, null, -1))
], 8, zt))), 256))
]),
p("defs", null, [
p("filter", {
id: `blur_${e(w)}`,
x: "-50%",
y: "-50%",
width: "200%",
height: "200%"
}, [
p("feGaussianBlur", {
in: "SourceGraphic",
stdDeviation: 2,
id: `blur_std_${e(w)}`
}, null, 8, Bt),
n[7] || (n[7] = p("feColorMatrix", {
type: "saturate",
values: "0"
}, null, -1))
], 8, Ut),
p("filter", {
id: `shadow_${e(w)}`,
"color-interpolation-filters": "sRGB"
}, [
p("feDropShadow", {
dx: "0",
dy: "0",
stdDeviation: "10",
"flood-opacity": "0.5",
"flood-color": e(t).style.chart.layout.donut.shadowColor
}, null, 8, Rt)
], 8, Et)
]),
(r(!0), u(C, null, T(e(X), (o, s) => (r(), u("g", null, [
(r(!0), u(C, null, T(o.donut, (a, d) => (r(), u("g", null, [
p("path", {
class: "vue-ui-donut-arc-path",
d: a.arcSlice,
fill: e(Ee)(a.color, 80),
stroke: e(t).style.chart.backgroundColor,
"stroke-width": e(t).style.chart.layout.donut.borderWidth,
filter: Ae(a, d)
}, null, 8, Gt)
]))), 256))
]))), 256)),
e(t).style.chart.useGradient ? (r(), u("g", Yt, [
(r(!0), u(C, null, T(e(Se), (o, s) => (r(), u("g", null, [
p("path", {
d: o.donut.arcSlice,
fill: `url(#radial_${e(w)}_${s})`,
stroke: "transparent",
"stroke-width": "0"
}, null, 8, Xt)
]))), 256))
])) : h("", !0),
e(t).style.chart.layout.labels.dataLabels.showDonutName ? (r(), u("g", Ht, [
(r(!0), u(C, null, T(e(X), (o, s) => (r(), u("g", null, [
(r(!0), u(C, null, T(o.donut, (a, d) => (r(), u("g", null, [
d === 0 && e(f).width && e(f).height ? (r(), u("text", {
key: 0,
class: P({ animated: e(t).useCssAnimation }),
x: e(f).width / 2,
y: a.startY - e(t).style.chart.layout.labels.dataLabels.fontSize + e(t).style.chart.layout.labels.dataLabels.donutNameOffsetY,
"text-anchor": "middle",
"font-size": e(t).style.chart.layout.labels.dataLabels.fontSize,
"font-weight": e(t).style.chart.layout.labels.dataLabels.boldDonutName ? "bold" : "normal",
fill: e(t).style.chart.layout.labels.dataLabels.color
}, S(e(t).style.chart.layout.labels.dataLabels.donutNameAbbreviation ? e(yt)({ source: o.name, length: e(t).style.chart.layout.labels.dataLabels.donutNameMaxAbbreviationSize }) : o.name), 11, Wt)) : h("", !0)
]))), 256))
]))), 256))
])) : h("", !0),
e(t).style.chart.layout.labels.dataLabels.show ? (r(), u("g", qt, [
(r(!0), u(C, null, T(e(X), (o, s) => (r(), u("g", null, [
(r(!0), u(C, null, T(o.donut, (a, d) => (r(), u("g", {
filter: Ae(a, d)
}, [
ne(a) && e($).dataLabels.show && e(t).style.chart.layout.labels.dataLabels.showPercentage ? (r(), u("text", {
key: 0,
class: P({ animated: e(t).useCssAnimation }),
"text-anchor": e(U)(a, !0).anchor,
x: e(U)(a, !1, e(t).style.chart.layout.labels.dataLabels.offsetX).x || 0,
y: e(ie)(a, e(t).style.chart.layout.labels.dataLabels.offsetY, e(t).style.chart.layout.labels.dataLabels.offsetY),
fill: e(t).style.chart.layout.labels.dataLabels.useSerieColor ? a.color : e(t).style.chart.layout.labels.dataLabels.color,
"font-size": e(t).style.chart.layout.labels.dataLabels.fontSize,
"font-weight": e(t).style.chart.layout.labels.dataLabels.boldPercentage ? "bold" : "normal"
}, S(e(x)({ v: a.proportion * 100, s: "%", r: e(t).style.chart.layout.labels.dataLabels.roundingPercentage })), 11, Kt)) : h("", !0),
ne(a) && e($).dataLabels.show && e(t).style.chart.layout.labels.dataLabels.showPercentage && e(t).style.chart.layout.labels.dataLabels.showValue ? (r(), u("text", {
key: 1,
class: P({ animated: e(t).useCssAnimation }),
"text-anchor": e(U)(a, !0).anchor,
x: e(U)(a, !1, e(t).style.chart.layout.labels.dataLabels.offsetX).x || 0,
y: e(ie)(a, e(t).style.chart.layout.labels.dataLabels.offsetY, e(t).style.chart.layout.labels.dataLabels.offsetY) + e(t).style.chart.layout.labels.dataLabels.fontSize,
fill: e(t).style.chart.layout.labels.dataLabels.useSerieColor ? a.color : e(t).style.chart.layout.labels.dataLabels.color,
"font-size": e(t).style.chart.layout.labels.dataLabels.fontSize,
"font-weight": e(t).style.chart.layout.labels.dataLabels.boldValue ? "bold" : "normal"
}, " (" + S(e(R)(
e(t).style.chart.layout.labels.dataLabels.formatter,
a.value,
e(x)({
p: e(t).style.chart.layout.labels.dataLabels.prefix,
v: a.value,
s: e(t).style.chart.layout.labels.dataLabels.suffix,
r: e(t).style.chart.layout.labels.dataLabels.roundingValue
}),
{ datapoint: a, seriesIndex: s, datapointIndex: d }
)) + ") ", 11, Qt)) : h("", !0),
ne(a) && e($).dataLabels.show && !e(t).style.chart.layout.labels.dataLabels.showPercentage && e(t).style.chart.layout.labels.dataLabels.showValue ? (r(), u("text", {
key: 2,
class: P({ animated: e(t).useCssAnimation }),
"text-anchor": e(U)(a, !0).anchor,
x: e(U)(a, !1, e(t).style.chart.layout.labels.dataLabels.offsetX).x || 0,
y: e(ie)(a, e(t).style.chart.layout.labels.dataLabels.offsetY, e(t).style.chart.layout.labels.dataLabels.offsetY),
fill: e(t).style.chart.layout.labels.dataLabels.useSerieColor ? a.color : e(t).style.chart.layout.labels.dataLabels.color,
"font-size": e(t).style.chart.layout.labels.dataLabels.fontSize,
"font-weight": e(t).style.chart.layout.labels.dataLabels.boldValue ? "bold" : "normal"
}, S(e(R)(
e(t).style.chart.layout.labels.dataLabels.formatter,
a.value,
e(x)({
p: e(t).style.chart.layout.labels.dataLabels.prefix,
v: a.value,
s: e(t).style.chart.layout.labels.dataLabels.suffix,
r: e(t).style.chart.layout.labels.dataLabels.roundingValue
}),
{ datapoint: a, seriesIndex: s, datapointIndex: d }
)), 11, Zt)) : h("", !0)
], 8, Jt))), 256))
]))), 256))
])) : h("", !0),
(r(!0), u(C, null, T(e(X), (o, s) => (r(), u("g", null, [
(r(!0), u(C, null, T(o.donut, (a, d) => (r(), u("g", null, [
p("path", {
"data-cy-donut-trap": "",
d: a.arcSlice,
fill: e(qe) === s ? "rgba(0,0,0,0.1)" : "transparent",
onMouseenter: (b) => et({
datapoint: a,
relativeIndex: s,
seriesIndex: a.seriesIndex
}),
onClick: (b) => Ze({ datapoint: a, index: d }),
onMouseleave: n[0] || (n[0] = (b) => {
j.value = !1, Oe.value = null, H.value = null, W.value = null;
})
}, null, 40, jt)
]))), 256))
]))), 256)),
k(l.$slots, "svg", { svg: e(f) }, void 0, !0)
], 14, Pt)) : h("", !0),
l.$slots.watermark ? (r(), u("div", el, [
k(l.$slots, "watermark", B(E({ isPrinting: e(we) || e($e) })), void 0, !0)
])) : h("", !0),
e(G) ? h("", !0) : (r(), D(Ft, {
key: 6,
config: {
type: "donut",
style: {
backgroundColor: e(t).style.chart.backgroundColor,
donut: {
color: "#CCCCCC"
}
}
}
}, null, 8, ["config"])),
Me(xt, {
show: e($).showTooltip && e(j),
backgroundColor: e(t).style.chart.tooltip.backgroundColor,
color: e(t).style.chart.tooltip.color,
borderRadius: e(t).style.chart.tooltip.borderRadius,
borderColor: e(t).style.chart.tooltip.borderColor,
borderWidth: e(t).style.chart.tooltip.borderWidth,
fontSize: e(t).style.chart.tooltip.fontSize,
backgroundOpacity: e(t).style.chart.tooltip.backgroundOpacity,
position: e(t).style.chart.tooltip.position,
offsetY: e(t).style.chart.tooltip.offsetY,
parent: e(z),
content: e(ee),
isFullscreen: e(V),
isCustom: e(Re)(e(t).style.chart.tooltip.customFormat)
}, {
"tooltip-before": m(() => [
k(l.$slots, "tooltip-before", B(E({ ...e(se) })), void 0, !0)
]),
"tooltip-after": m(() => [
k(l.$slots, "tooltip-after", B(E({ ...e(se) })), void 0, !0)
]),
_: 3
}, 8, ["show", "backgroundColor", "color", "borderRadius", "borderColor", "borderWidth", "fontSize", "backgroundOpacity", "position", "offsetY", "parent", "content", "isFullscreen", "isCustom"]),
e(t).style.chart.legend.show ? (r(), u("div", {
key: 7,
ref_key: "chartLegend",
ref: te,
class: P({ "vue-ui-nested-donuts-legend": e(re).length > 1 })
}, [
(r(!0), u(C, null, T(e(re), (o, s) => (r(), D(_t, {
key: `legend_${s}_${e(pe)}`,
legendSet: o,
config: e(tt),
onClickMarker: n[1] || (n[1] = ({ legend: a }) => ae(a))
}, {
legendTitle: m(({ titleSet: a }) => [
a[0] && a[0].arcOf ? (r(), u("div", tl, S(a[0].arcOf), 1)) : h("", !0)
]),
item: m(({ legend: a, index: d }) => [
p("div", {
onClick: (b) => ae(a),
style: K(`opacity:${e(y).includes(a.id) ? 0.5 : 1}`)
}, [
Q(S(a.name) + ": " + S(e(R)(
e(t).style.chart.layout.labels.dataLabels.formatter,
a.value,
e(x)({
p: e(t).style.chart.layout.labels.dataLabels.prefix,
v: a.value,
s: e(t).style.chart.layout.labels.dataLabels.suffix,
r: e(t).style.chart.legend.roundingValue
}),
{ datapoint: a, seriesIndex: d }
)) + " ", 1),
e(y).includes(a.id) ? (r(), u(C, { key: 1 }, [
Q(" ( - % ) ")
], 64)) : (r(), u(C, { key: 0 }, [
Q(" (" + S(isNaN(a.value / a.total) ? "-" : e(x)({ v: a.value / a.total * 100, s: "%", r: e(t).style.chart.legend.roundingPercentage })) + ") ", 1)
], 64))
], 12, ll)
]),
_: 2
}, 1032, ["legendSet", "config"]))), 128))
], 2)) : h("", !0),
e(t).style.chart.legend.show ? h("", !0) : (r(), u("div", {
key: 8,
ref_key: "chartLegend",
ref: te
}, [
k(l.$slots, "legend", { legend: e(re) }, void 0, !0)
], 512)),
l.$slots.source ? (r(), u("div", {
key: 9,
ref_key: "source",
ref: fe,
dir: "auto"
}, [
k(l.$slots, "source", {}, void 0, !0)
], 512)) : h("", !0),
e(G) ? (r(), D(Tt, {
key: 10,
hideDetails: "",
config: {
open: e($).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: m(() => [
(r(), D(Ct, {
key: `table_${e(ye)}`,
colNames: e(q).colNames,
head: e(q).head,
body: e(q).body,
config: e(q).config,
title: `${e(t).style.chart.title.text}${e(t).style.chart.title.subtitle.text ? ` : ${e(t).style.chart.title.subtitle.text}` : ""}`,
onClose: n[2] || (n[2] = (o) => e($).showTable = !1)
}, {
th: m(({ th: o }) => [
p("div", {
innerHTML: o,
style: { display: "flex", "align-items": "center" }
}, null, 8, al)
]),
td: m(({ td: o }) => [
Q(S(o.name || o), 1)
]),
_: 1
}, 8, ["colNames", "head", "body", "config", "title"]))
]),
_: 1
}, 8, ["config"])) : h("", !0)
], 46, It));
}
}, kl = /* @__PURE__ */ At(ol, [["__scopeId", "data-v-b36de847"]]);
export {
kl as default
};