vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
1,549 lines • 60 kB
JavaScript
import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
import { $ as t, Bt as n, D as r, Jt as i, Kt as a, Ot as o, Pt as s, S as c, X as l, Y as u, b as d, f, h as p, i as m, jt as ee, kt as te, p as ne, pt as re, q as ie, t as ae, tt as h, w as oe } from "./lib-Bttd6u5E.js";
import { n as se } from "./useHints-Dq_w2E8B.js";
import { t as ce } from "./useConfig-D3scuR88.js";
import { t as le } from "./usePrinter-DN5bYhTG.js";
import { n as ue, t as de } from "./BaseScanner-DZvpgOjM.js";
import { t as fe } from "./useSvgExport-DH-FfcqQ.js";
import { t as pe } from "./useNestedProp-vPNvh7rV.js";
import { t as me } from "./useThemeCheck-C43Tcqmk.js";
import { t as he } from "./img-Bnokohej.js";
import { n as ge } from "./Title-BE3qg9xl.js";
import { t as _e } from "./_plugin-vue_export-helper-B3ysoDQm.js";
import { l as ve, t as ye } from "./useResponsive-ZtArZtUf.js";
import { t as g } from "./DefGrad-DVBqDjhO.js";
import { t as be } from "./A11yDataTable-DdRsVULz.js";
import { t as xe } from "./useUserOptionState-DK-_1ddE.js";
import { t as Se } from "./useChartAccessibility-DYqac8yF.js";
import { t as Ce } from "./vue_ui_3d_bar-C4R7o-yX.js";
import { Fragment as _, computed as v, createBlock as y, createCommentVNode as b, createElementBlock as x, createElementVNode as S, createSlots as we, createTextVNode as Te, createVNode as C, defineAsyncComponent as w, guardReactiveProps as T, mergeProps as Ee, nextTick as De, normalizeClass as Oe, normalizeProps as E, normalizeStyle as D, onMounted as ke, openBlock as O, ref as k, renderList as A, renderSlot as j, resolveDynamicComponent as Ae, toDisplayString as M, toRefs as je, unref as N, watch as Me, withCtx as P, withKeys as Ne, withModifiers as Pe } from "vue";
//#region src/components/vue-ui-3d-bar.vue
var Fe = /* @__PURE__ */ e({ default: () => en }), Ie = ["id"], Le = ["id"], Re = {
"aria-live": "polite",
class: "sr-only"
}, ze = { style: { position: "relative" } }, Be = [
"xmlns",
"viewBox",
"aria-describedby"
], Ve = ["width", "height"], He = { key: 1 }, Ue = [
"x",
"y",
"font-size",
"font-weight",
"fill"
], We = ["x", "y"], Ge = [
"cx",
"cy",
"stroke",
"opacity"
], Ke = ["d", "stroke"], qe = ["d", "stroke"], Je = { key: 4 }, Ye = { key: 0 }, Xe = [
"stroke-dasharray",
"d",
"stroke",
"stroke-width"
], Ze = [
"stroke-dasharray",
"d",
"stroke",
"stroke-width"
], Qe = [
"stroke-dasharray",
"d",
"stroke",
"stroke-width"
], $e = [
"stroke-dasharray",
"d",
"stroke",
"stroke-width"
], et = { key: 1 }, tt = [
"d",
"stroke",
"stroke-width",
"fill"
], nt = [
"d",
"stroke",
"stroke-width",
"fill"
], rt = [
"d",
"stroke",
"stroke-width",
"fill"
], it = { key: 2 }, at = ["aria-label"], ot = [
"d",
"fill",
"onMouseenter",
"onClick",
"onMouseout"
], st = [
"d",
"fill",
"onMouseenter",
"onClick",
"onMouseout"
], ct = [
"d",
"fill",
"onMouseenter",
"onClick",
"onMouseout"
], lt = [
"d",
"onMouseenter",
"onClick",
"onMouseout"
], ut = ["d"], dt = ["d", "stroke"], ft = ["onClick"], pt = ["stroke", "d"], mt = [
"cx",
"cy",
"fill",
"stroke"
], ht = [
"x",
"y",
"width",
"height"
], gt = [
"x",
"y",
"width",
"height"
], _t = { key: 3 }, vt = ["d", "stroke"], yt = [
"d",
"fill",
"stroke"
], bt = { key: 0 }, xt = [
"text-anchor",
"x",
"y",
"fill",
"font-size",
"font-weight"
], St = [
"text-anchor",
"x",
"y",
"fill",
"font-size",
"font-weight"
], Ct = { key: 4 }, wt = [
"d",
"fill",
"stroke"
], Tt = { key: 5 }, Et = { key: 0 }, Dt = [
"stroke-dasharray",
"d",
"stroke",
"stroke-width"
], Ot = [
"stroke-dasharray",
"d",
"stroke",
"stroke-width"
], kt = [
"stroke-dasharray",
"d",
"stroke",
"stroke-width"
], At = [
"stroke-dasharray",
"d",
"stroke",
"stroke-width"
], jt = [
"d",
"stroke",
"stroke-width",
"fill"
], Mt = [
"d",
"stroke",
"stroke-width",
"fill"
], Nt = ["d"], Pt = { key: 1 }, Ft = ["aria-label"], It = [
"onMouseenter",
"onClick",
"onMouseout",
"d",
"fill"
], Lt = [
"onMouseenter",
"onClick",
"onMouseout",
"d"
], Rt = [
"onMouseenter",
"onClick",
"onMouseout",
"d",
"fill"
], zt = ["onClick"], Bt = ["stroke", "d"], Vt = [
"cx",
"cy",
"fill",
"stroke"
], Ht = [
"x",
"y",
"width",
"height"
], Ut = [
"x",
"y",
"width",
"height"
], Wt = { key: 3 }, Gt = ["d", "stroke"], Kt = [
"d",
"fill",
"stroke"
], qt = { key: 0 }, Jt = [
"text-anchor",
"x",
"y",
"fill",
"font-size",
"font-weight"
], Yt = [
"text-anchor",
"x",
"y",
"fill",
"font-size",
"font-weight"
], Xt = { key: 4 }, Zt = [
"d",
"fill",
"stroke"
], Qt = {
key: 4,
class: "vue-data-ui-watermark"
}, $t = ["innerHTML"], en = /*#__PURE__*/ _e({
__name: "vue-ui-3d-bar",
props: {
config: {
type: Object,
default() {
return {};
}
},
dataset: {
type: Object,
default() {
return {};
}
}
},
emits: ["selectDatapoint", "copyAlt"],
setup(e, { expose: _e, emit: Fe }) {
let en = w(() => import("./BaseIcon-BfndwIWE.js").then((e) => e.n)), tn = w(() => import("./vue-ui-accordion-BxGriZik.js").then((e) => e.n)), nn = w(() => import("./DataTable-BbKgJ5UI.js")), rn = w(() => import("./PenAndPaper-DAE-tnEQ.js").then((e) => e.t)), an = w(() => import("./UserOptions-Dt98of5H.js").then((e) => e.n)), on = w(() => import("./PackageVersion-D6d8SCp9.js").then((e) => e.t)), sn = w(() => import("./BaseDraggableDialog-LoqqwRtV.js").then((e) => e.n)), { vue_ui_3d_bar: cn } = ce(), { isThemeValid: ln, warnInvalidTheme: un } = me(), F = e, dn = Fe, fn = v(() => !!F.dataset && Object.keys(F.dataset).length), I = k(ie()), L = k(null), R = k(!1), pn = k(0), mn = k(0), hn = k(null), gn = k(null), _n = k(null), vn = k(null), z = k(!1), yn = k(null), bn = k(null), xn = k(!1), Sn = k(!1), B = k(null), V = k(""), H = k(kn());
se({
config: () => H.value,
dataset: () => F.dataset,
component: "VueUi3dBar",
rules: [{
test: (e) => e?.series && e.series.length > 8,
message: [
"👀 The number of series is > 8. Consider:",
"",
"▶️ Grouping small values dynamically into a single \"Other\" series.",
"",
"▶️ Using filters to let users choose a maximum number of series to display.",
"",
"▶️ Using VueUiHorizontalBar instead to make the dataset breakdown easier to read."
]
}, {
test: (e) => e?.series && e.series.some((e) => e?.breakdown && e.breakdown.length > 6),
message: [
"👀 Some donut breakdowns have > 6 data points. Consider:",
"",
"▶️ Grouping small values dynamically into a single \"Other\" data point."
]
}]
});
let Cn = v(() => H.value.userOptions.useCursorPointer), wn = v(() => i({
defaultConfig: {
customPalette: [
"#808080",
"#ADADAD",
"#DBDBDB"
],
userOptions: { show: !1 },
table: { show: !1 },
style: { chart: {
backgroundColor: "#99999930",
color: "#6A6A6A",
bar: {
color: "#ADADAD",
stroke: "#6A6A6A"
},
box: { stroke: "#6A6A6A" }
} }
},
userConfig: H.value.skeletonConfig ?? {}
})), { loading: U, FINAL_DATASET: W } = ue({
...je(F),
FINAL_CONFIG: H,
prepareConfig: kn,
callback: () => {
Promise.resolve().then(async () => {
await De(), Ln();
});
},
skeletonDataset: F.config?.skeletonDataset ?? { series: [
{
name: "_",
value: 21,
breakdown: [{
name: "_",
value: 13
}, {
name: "_",
value: 8
}]
},
{
name: "_",
value: 13,
breakdown: [{
name: "_",
value: 8
}, {
name: "_",
value: 5
}]
},
{
name: "_",
value: 8,
breakdown: [{
name: "_",
value: 5
}, {
name: "_",
value: 3
}]
}
] },
skeletonConfig: i({
defaultConfig: H.value,
userConfig: wn.value
})
}), { userOptionsVisible: Tn, setUserOptionsVisibility: En, keepUserOptionState: Dn } = xe({ config: H.value }), { svgRef: On } = Se({ config: H.value.style.chart.title });
function kn() {
let e = pe({
userConfig: F.config,
defaultConfig: cn
}), t = e.theme;
if (!t) return e;
if (!ln.value(e)) return un(e), e;
let n = pe({
userConfig: Ce[t] || F.config,
defaultConfig: e
}), r = pe({
userConfig: F.config,
defaultConfig: n
});
return {
...r,
customPalette: r.customPalette.length ? r.customPalette : a[t] || s
};
}
Me(() => F.config, (e) => {
U.value || (H.value = kn()), Tn.value = !H.value.userOptions.showOnChartHover, zn(), pn.value += 1, mn.value += 1, G.value.showTable = H.value.table.show;
}, { deep: !0 });
let { isPrinting: An, isImaging: jn, generatePdf: Mn, generateImage: Nn } = le({
elementId: `3d_bar_${I.value}`,
fileName: H.value.style.chart.title.text || "vue-ui-3d-bar",
options: H.value.userOptions.print
}), Pn = v(() => oe(H.value.customPalette)), G = k({ showTable: H.value.table.show });
Me(H, () => {
G.value = { showTable: H.value.table.show };
}, { immediate: !0 });
let K = v(() => W.value.series && W.value.series.length), Fn = k(H.value.style.chart.box.dimensions.width * (K.value ? 2 : 1)), In = k(H.value.style.chart.box.dimensions.height), q = v(() => ({
height: In.value,
width: Fn.value,
absoluteWidth: Fn.value,
top: H.value.style.chart.box.dimensions.top,
bottom: H.value.style.chart.box.dimensions.bottom,
left: H.value.style.chart.box.dimensions.left,
right: H.value.style.chart.box.dimensions.right,
perspective: H.value.style.chart.box.dimensions.perspective
})), J = v(() => {
if (K.value) {
let e = W.value.series.map((e) => e.value || 0).reduce((e, t) => e + t, 0), t = W.value.series.map((t, n) => ({
...t,
seriesIndex: n,
id: ie(),
proportion: (t.value || 0) / e,
color: c(t.color) || Pn.value[n] || s[n] || s[n % s.length],
breakdown: t.breakdown ? t.breakdown.sort((e, t) => t.value - e.value) : null
})).sort((e, t) => t.value - e.value), n = [], r = 0;
for (let e = 0; e < t.length; e += 1) n.push({
...t[e],
fill: Vn(r, t[e].proportion, t[e].breakdown, t[e].color)
}), r += t[e].proportion;
return n;
}
return null;
}), Y = v(() => {
let e = q.value.width / 2;
return {
right: `M${e},${q.value.top} ${q.value.width - q.value.right}, ${q.value.top + q.value.perspective} ${q.value.width - q.value.right},${q.value.height - q.value.bottom - q.value.perspective} ${e},${q.value.height - q.value.bottom}`,
left: `M${e},${q.value.top} ${q.value.left},${q.value.top + q.value.perspective} ${q.value.left},${q.value.height - q.value.bottom - q.value.perspective} ${e},${q.value.height - q.value.bottom}`,
side: `M${e},${q.value.height - q.value.bottom} ${e},${q.value.top + q.value.perspective * 2}`,
topSides: `M${q.value.left},${q.value.top + q.value.perspective} ${e},${q.value.top + q.value.perspective * 2} ${q.value.width - q.value.right},${q.value.top + q.value.perspective}`,
tubeTop: `M${q.value.left},${q.value.top + q.value.perspective} C ${q.value.left},${q.value.top - q.value.perspective / 3} ${q.value.width - q.value.right},${q.value.top - q.value.perspective / 3} ${q.value.width - q.value.right},${q.value.top + q.value.perspective} C ${q.value.width - q.value.right},${q.value.top + q.value.perspective * 2.3} ${q.value.left},${q.value.top + q.value.perspective * 2.3} ${q.value.left},${q.value.top + q.value.perspective}`,
tubeLeft: `M${q.value.left},${q.value.top + q.value.perspective} ${q.value.left},${q.value.height - q.value.bottom - q.value.perspective}`,
tubeRight: `M${q.value.width - q.value.right},${q.value.top + q.value.perspective} ${q.value.width - q.value.right},${q.value.height - q.value.bottom - q.value.perspective}`,
tubeBottom: `M${q.value.width - q.value.right},${q.value.height - q.value.bottom - q.value.perspective} C ${q.value.width - q.value.right},${q.value.height} ${q.value.left},${q.value.height} ${q.value.left},${q.value.height - q.value.bottom - q.value.perspective}`
};
}), X = k(H.value.style.chart.animation.use ? 0 : W.value.percentage);
function Ln() {
let e = 0, t = H.value.style.chart.animation.speed, n = .005 * H.value.style.chart.animation.acceleration;
function r() {
X.value += t + e, e += n, X.value < W.value.percentage ? requestAnimationFrame(r) : X.value = W.value.percentage;
}
H.value.style.chart.animation.use && (X.value = 0, r());
}
ke(() => {
zn(), Ln();
});
let Rn = v(() => !!H.value.debug);
function zn() {
if (ee(F.dataset) ? h({
componentName: "VueUi3dBar",
type: "dataset",
debug: Rn.value
}) : F.dataset.series ? F.dataset.series.forEach((e, t) => {
re({
datasetObject: e,
requiredAttributes: ["name", "value"]
}).forEach((e) => {
h({
componentName: "VueUi3dBar",
type: "datasetSerieAttribute",
property: e,
index: t,
debug: Rn.value
});
}), e.breakdown && e.breakdown.forEach((e, n) => {
re({
datasetObject: e,
requiredAttributes: ["name", "value"]
}).forEach((e) => {
h({
componentName: "VueUi3dBar",
type: "datasetSerieAttribute",
property: e,
index: `${t} - ${n}`,
debug: Rn.value
});
});
});
}) : re({
datasetObject: F.dataset,
requiredAttributes: ["percentage"]
}).forEach((e) => {
h({
componentName: "VueUi3dBar",
type: "datasetAttribute",
property: e,
debug: Rn.value
});
}), H.value.responsive) {
let e = ve(() => {
let { width: e, height: t } = ye({
chart: L.value,
title: H.value.style.chart.title.text ? hn.value : null,
source: vn.value
});
requestAnimationFrame(() => {
In.value = t - 12, Fn.value = e;
});
});
gn.value && (_n.value && gn.value.unobserve(_n.value), gn.value.disconnect()), gn.value = new ResizeObserver(e), _n.value = L.value.parentNode, gn.value.observe(_n.value);
}
}
let Bn = v(() => q.value.width / 4);
function Vn(e, t, n, r) {
let i = q.value.height - q.value.bottom - q.value.top - q.value.perspective * 2, { width: a, height: s, bottom: c, right: l, left: u, perspective: d } = q.value, f = K.value ? a / 4 : a / 2, p = f * 2 + u, m = c + i * e, ee = s - m - d - i * t / 2, ne = ee > q.value.height / 2 ? "top" : "bottom", re = s * .25, ie = !!n, ae = null, h = null;
return ie && (n = n.map((e, t) => ({
...e,
value: e.value || 0,
color: o(r, t / n.length)
})), ae = te({ series: n }, a / 2 + a / 5, ne === "top" ? ee - re : ee + re, a / 10, a / 10, 1.99999, 2, 1, 360, 105.25, a / 20), h = te({ series: n }, a - p + a / 14, s - m - d - i * t / 2, a / 40, a / 40, 1.99999, 2, 1, 360, 105.25, a / 40)), {
donut: ae,
miniDonut: h,
donutR: a / 20,
CENTER_X: f,
sidePointer: {
x: a - p,
x2: a - p + a / 14,
xText: a - p + a / 9,
y: s - m - d - i * t / 2,
topY: s - m - d - i * t,
height: i * t
},
apexBottom: {
y: s - m,
x: f
},
apexTop: {
y: s - m - i * t,
x: f
},
right: `M${f},${s - m} ${f},${s - m - i * t} ${a - p},${s - m - d - i * t} ${a - p},${s - m - d}Z`,
left: `M${f},${s - m} ${f},${s - m - i * t} ${u}, ${s - m - d - i * t} ${u},${s - m - d}Z`,
liningTop: `M${u},${s - m - d - i * t} ${f},${s - m - i * t} ${a - p},${s - m - d - i * t}`,
liningTopShade: `M${u},${s - m - d - i * t - .5} ${f},${s - m - i * t - .5} ${a - p},${s - m - d - i * t - .5}`,
top: `M${f},${s - m - i * t} ${u},${s - m - d - i * t} ${f},${s - m - d * 2 - i * t} ${a - p},${s - m - d - i * t} Z`,
tubeTop: `M${u},${s - m - i * t - d} C ${u},${s - m - i * t - d * 2.5} ${a - p},${s - m - i * t - d * 2.5} ${a - p},${s - m - i * t - d} C ${a - p},${s - m - i * t + d / 2} ${u},${s - m - i * t + d / 2} ${u},${s - m - i * t - d}`,
bottomTubeTop: `M ${a - p - .5},${s - m - d} C ${a - p - .5},${s - m + d / 2} ${u},${s - m + d / 2} ${u + .5},${s - m - d}`,
tubeBody: `M
${u},${s - m - i * t - d}
C ${u},${s - m - i * t + d / 2}
${a - p},${s - m - i * t + d / 2}
${a - p},${s - m - i * t - d}
L${a - p},${s - m - d}
C
${a - p},${s - m + d / 2}
${u},${s - m + d / 2}
${u},${s - m - d}Z`
};
}
let Hn = v(() => {
let e = d(X.value / 100), t = q.value.height - q.value.bottom - q.value.top - q.value.perspective * 2, { width: n, height: r, bottom: i, right: a, left: o, perspective: s } = q.value, c = K.value ? n / 4 : n / 2, l = K.value ? c * 2 + o : a, u = i + t * 0;
return {
right: `M${c},${r - u} ${c},${r - u - t * e} ${n - l},${r - u - s - t * e} ${n - l},${r - u - s}Z`,
left: `M${c},${r - u} ${c},${r - u - t * e} ${o}, ${r - u - s - t * e} ${o},${r - u - s}Z`,
top: `M${c},${r - u - t * e} ${o},${r - u - s - t * e} ${c},${r - u - s * 2 - t * e} ${n - l},${r - u - s - t * e} Z`,
tubeTop: `M${o},${r - u - t * e - s} C ${o},${r - u - t * e - s * 2.5} ${n - l},${r - u - t * e - s * 2.5} ${n - l},${r - u - t * e - s} C ${n - l},${r - u - t * e + s / 2} ${o},${r - u - t * e + s / 2} ${o},${r - u - t * e - s}`,
tubeBody: `M
${o},${r - u - t * e - s}
C ${o},${r - u - t * e + s / 2}
${n - l},${r - u - t * e + s / 2}
${n - l},${r - u - t * e - s}
L${n - l},${r - s * 1.5}
C
${n - l},${r}
${o},${r}
${o},${r - u - s}Z`
};
}), Z = k(null);
function Q(e, t = !1) {
H.value.events.datapointEnter && !t && H.value.events.datapointEnter({
datapoint: e,
seriesIndex: e.seriesIndex
}), H.value.events.datapointClick && t && H.value.events.datapointClick({
datapoint: e,
seriesIndex: e.seriesIndex
}), dn("selectDatapoint", e);
let n = J.value?.findIndex((t) => t.id === e.id) ?? null;
n !== null && n !== -1 && (B.value = n, V.value = dr(e)), t || (Z.value = e.id), t && R.value && (R.value = !1), t && !R.value && (R.value = !0);
}
function $(e) {
H.value.events.datapointLeave && H.value.events.datapointLeave({
datapoint: e,
seriesIndex: e.seriesIndex
}), !R.value && (Z.value = null, B.value = null, V.value = "");
}
function Un(e, t, n = !1) {
let r = W.value.series.map((e) => e.value || 0).reduce((e, t) => e + t, 0), i = isNaN(e.value / r) ? 0 : e.value / r * 100, a = isNaN(e.value / Wn(t)) ? 0 : e.value / Wn(t) * 100;
return n ? a : i.toFixed(0) + "%";
}
function Wn(e) {
return [...e].map((e) => e.value).reduce((e, t) => e + t, 0);
}
let Gn = k(!1);
function Kn(e) {
Gn.value = e;
}
function qn() {
return K.value ? J.value : W.value.percentage;
}
let Jn = v(() => K.value ? {
head: J.value.flatMap((e) => e.breakdown && e.breakdown.length ? [{
name: e.name,
color: e.color
}, ...e.breakdown.map((t, n) => ({
name: t.name,
color: o(e.color, n / e.breakdown.length)
}))] : {
name: e.name,
color: e.color
}),
body: J.value.flatMap((e) => e.breakdown && e.breakdown.length ? [e.value, ...e.breakdown.map((e) => e.value)] : e.value)
} : null);
function Yn(e = null) {
if (!K.value) {
console.warn("VueUi3dBar : CSV download is only available in stack mode (providing dataset.series instead of dataset.percentage)");
return;
}
De(() => {
let n = J.value.map((e) => e.value).reduce((e, t) => e + t, 0), i = Jn.value.head.map((e, t) => [
[e.name],
[Jn.value.body[t]],
[isNaN(Jn.value.body[t] / n) ? "-" : Jn.value.body[t] / n * 100]
]), a = [
[H.value.style.chart.title.text],
[H.value.style.chart.title.subtitle.text],
[
[""],
["val"],
["%"]
]
].concat(i), o = r(a);
e ? e(o) : t({
csvContent: o,
title: H.value.style.chart.title.text || "vue-ui-3d-bar"
});
});
}
let Xn = v(() => {
if (!K.value || !Array.isArray(J.value) || !J.value.length) return {
colNames: [],
head: [],
body: [],
a11yBody: [],
config: {
th: {
backgroundColor: H.value.table.th.backgroundColor,
color: H.value.table.th.color,
outline: H.value.table.th.outline
},
td: {
backgroundColor: H.value.table.td.backgroundColor,
color: H.value.table.td.color,
outline: H.value.table.td.outline
},
breakpoint: H.value.table.responsiveBreakpoint,
shape: H.value.style.shape === "tube" ? "circle" : "square"
}
};
let e = J.value.reduce((e, t) => e + t.value, 0), t = [
" <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>",
l({
p: H.value.style.chart.legend.prefix,
v: e,
s: H.value.style.chart.legend.suffix,
r: H.value.table.td.roundingValue
}),
"100%"
], n = Jn.value.head.map((t, n) => {
let r = Jn.value.body[n];
return [
{
color: t.color,
name: t.name
},
l({
p: H.value.style.chart.legend.prefix,
v: r,
s: H.value.style.chart.legend.suffix,
r: H.value.table.td.roundingValue
}),
isNaN(r / e) ? "-" : l({
v: r / e * 100,
s: "%",
r: H.value.table.td.roundingPercentage
})
];
}), r = n.map((e) => e.map((e, t) => t === 0 ? e.name : e));
return {
colNames: [
H.value.table.columnNames.series,
H.value.table.columnNames.value,
H.value.table.columnNames.percentage
],
head: t,
body: n,
a11yBody: r,
config: {
th: {
backgroundColor: H.value.table.th.backgroundColor,
color: H.value.table.th.color,
outline: H.value.table.th.outline
},
td: {
backgroundColor: H.value.table.td.backgroundColor,
color: H.value.table.td.color,
outline: H.value.table.td.outline
},
breakpoint: H.value.table.responsiveBreakpoint,
shape: H.value.style.shape === "tube" ? "circle" : "square"
}
};
});
function Zn() {
G.value.showTable = !G.value.showTable;
}
let Qn = k(!1);
function $n() {
Qn.value = !Qn.value;
}
async function er({ scale: e = 2 } = {}) {
if (!L.value) return;
let { width: t, height: n } = L.value.getBoundingClientRect(), r = t / n, { imageUri: i, base64: a } = await he({
domElement: L.value,
base64: !0,
img: !0,
scale: e
});
return {
imageUri: i,
base64: a,
title: H.value.style.chart.title.text,
width: t,
height: n,
aspectRatio: r
};
}
let tr = v(() => {
let e = H.value.table.useDialog && !H.value.table.show, t = G.value.showTable;
return {
component: e ? sn : tn,
title: `${H.value.style.chart.title.text}${H.value.style.chart.title.subtitle.text ? `: ${H.value.style.chart.title.subtitle.text}` : ""}`,
props: e ? {
backgroundColor: H.value.table.th.backgroundColor,
color: H.value.table.th.color,
headerColor: H.value.table.th.color,
headerBg: H.value.table.th.backgroundColor,
isFullscreen: Gn.value,
fullscreenParent: L.value,
forcedWidth: Math.min(800, window.innerWidth * .8)
} : {
hideDetails: !0,
config: {
open: t,
maxHeight: 1e4,
body: {
backgroundColor: H.value.style.chart.backgroundColor,
color: H.value.style.chart.color
},
head: {
backgroundColor: H.value.style.chart.backgroundColor,
color: H.value.style.chart.color
}
}
}
};
});
Me(() => G.value.showTable, (e) => {
H.value.table.show || (e && H.value.table.useDialog && yn.value ? yn.value.open() : "close" in yn.value && yn.value.close());
});
function nr() {
G.value.showTable = !1, bn.value && bn.value.setTableIconState(!1);
}
let rr = v(() => H.value.style.chart.backgroundColor), ir = v(() => H.value.style.chart.title), { exportSvg: ar, getSvg: or } = fe({
svg: On,
title: ir,
backgroundColor: rr
});
async function sr({ isCb: e }) {
xn.value = !0, await De();
try {
if (e) {
let { blob: e, url: t, text: n, dataUrl: r } = await or();
await Promise.resolve(H.value.userOptions.callbacks.svg({
blob: e,
url: t,
text: n,
dataUrl: r
}));
} else await Promise.resolve(ar());
} finally {
xn.value = !1;
}
}
function cr(e) {
if (e?.stage === "start") {
Sn.value = !0;
return;
}
if (e?.stage === "end") {
Sn.value = !1;
return;
}
Nn();
}
async function lr() {
if (dn("copyAlt", {
config: H.value,
dataset: W.value
}), !H.value.userOptions.callbacks.altCopy) {
console.warn("Vue Data UI - A callback must be set for `altCopy` in userOptions.");
return;
}
await Promise.resolve(H.value.userOptions.callbacks.altCopy({
config: H.value,
dataset: W.value
}));
}
function ur() {
B.value = null, V.value = "", R.value = !1, Z.value = null;
}
function dr(e) {
if (!e) return "";
let t = l({
p: H.value.style.chart.legend.prefix,
v: e.value,
s: H.value.style.chart.legend.suffix,
r: H.value.style.chart.legend.roundingValue
}), n = l({
v: e.proportion * 100,
s: "%",
r: H.value.style.chart.legend.roundingPercentage
});
return `${e.name}: ${t}, ${n}`;
}
function fr(e) {
if (!K.value || !J.value?.length) return;
let t = J.value[e];
t && (B.value = e, Z.value = t.id, V.value = dr(t));
}
function pr() {
z.value = !0, !(!K.value || !J.value?.length) && B.value === null && fr(0);
}
function mr() {
z.value = !1, R.value || (B.value = null, Z.value = null, V.value = "");
}
function hr(e) {
if (!K.value || !J.value?.length || !On.value || document.activeElement !== On.value) return;
let t = ["ArrowLeft", "ArrowDown"].includes(e.key), n = ["ArrowRight", "ArrowUp"].includes(e.key), r = e.key === "Enter" || e.key === " ", i = e.key === "Escape";
if (!t && !n && !r && !i) return;
if (e.preventDefault(), e.stopPropagation(), i) {
ur();
return;
}
if (r) {
if (B.value === null) return;
let e = J.value[B.value];
if (!e) return;
Q(e, !0), V.value = `${dr(e)} selected`;
return;
}
let a = B.value;
a === null || a < 0 || a >= J.value.length ? a = n ? 0 : J.value.length - 1 : n ? (a += 1, a >= J.value.length && (a = 0)) : t && (--a, a < 0 && (a = J.value.length - 1)), fr(a);
}
let gr = v(() => ({
headers: Xn.value?.colNames ?? [],
rows: Xn.value?.a11yBody ?? []
}));
return _e({
getImage: er,
generateCsv: Yn,
generatePdf: Mn,
generateImage: Nn,
generateSvg: sr,
getData: qn,
toggleTable: Zn,
toggleAnnotator: $n,
toggleFullscreen: Kn,
copyAlt: lr
}), (e, t) => (O(), x("div", {
ref_key: "bar3dChart",
ref: L,
class: Oe("vue-data-ui-component vue-ui-3d-bar"),
style: D(`font-family:${H.value.style.fontFamily};width:100%; text-align:center;background:${H.value.style.chart.backgroundColor}`),
id: `3d_bar_${I.value}`,
onMouseenter: t[8] ||= () => N(En)(!0),
onMouseleave: t[9] ||= () => N(En)(!1)
}, [
S("div", {
id: `chart-instructions-${I.value}`,
class: "sr-only"
}, [S("p", null, M(H.value.a11y.translations.keyboardNavigation), 1)], 8, Le),
S("div", Re, M(V.value), 1),
gr.value?.rows?.length ? (O(), y(be, {
key: 0,
uid: I.value,
head: gr.value.headers,
body: gr.value.rows,
notice: H.value.a11y.translations.tableAvailable,
caption: H.value.a11y.translations.tableCaption
}, null, 8, [
"uid",
"head",
"body",
"notice",
"caption"
])) : b("", !0),
H.value.userOptions.buttons.annotator ? (O(), y(N(rn), {
key: 1,
svgRef: N(On),
backgroundColor: H.value.style.chart.backgroundColor,
color: H.value.style.chart.color,
active: Qn.value,
isCursorPointer: Cn.value,
onClose: $n
}, {
"annotator-action-close": P(() => [j(e.$slots, "annotator-action-close", {}, void 0, !0)]),
"annotator-action-color": P(({ color: t }) => [j(e.$slots, "annotator-action-color", E(T({ color: t })), void 0, !0)]),
"annotator-action-draw": P(({ mode: t }) => [j(e.$slots, "annotator-action-draw", E(T({ mode: t })), void 0, !0)]),
"annotator-action-undo": P(({ disabled: t }) => [j(e.$slots, "annotator-action-undo", E(T({ disabled: t })), void 0, !0)]),
"annotator-action-redo": P(({ disabled: t }) => [j(e.$slots, "annotator-action-redo", E(T({ disabled: t })), void 0, !0)]),
"annotator-action-delete": P(({ disabled: t }) => [j(e.$slots, "annotator-action-delete", E(T({ disabled: t })), void 0, !0)]),
_: 3
}, 8, [
"svgRef",
"backgroundColor",
"color",
"active",
"isCursorPointer"
])) : b("", !0),
H.value.style.chart.title.text ? (O(), x("div", {
key: 2,
ref_key: "chartTitle",
ref: hn,
style: "width:100%;background:transparent"
}, [(O(), y(ge, {
key: `title_${pn.value}`,
config: {
title: {
cy: "3dBar-div-title",
...H.value.style.chart.title
},
subtitle: {
cy: "3dBar-div-subtitle",
...H.value.style.chart.title.subtitle
}
}
}, null, 8, ["config"]))], 512)) : b("", !0),
H.value.userOptions.show && fn.value && (N(Dn) || N(Tn)) ? (O(), y(N(an), {
key: 3,
ref_key: "userOptionsRef",
ref: bn,
backgroundColor: H.value.style.chart.backgroundColor,
color: H.value.style.chart.color,
isPrinting: N(An),
isImaging: N(jn),
uid: I.value,
hasPdf: H.value.userOptions.buttons.pdf,
hasTable: !!K.value && H.value.userOptions.buttons.table,
hasXls: !!K.value && H.value.userOptions.buttons.csv,
hasImg: H.value.userOptions.buttons.img,
hasSvg: H.value.userOptions.buttons.svg,
hasFullscreen: H.value.userOptions.buttons.fullscreen,
hasAltCopy: H.value.userOptions.buttons.altCopy,
titles: { ...H.value.userOptions.buttonTitles },
chartElement: L.value,
position: H.value.userOptions.position,
hasAnnotator: H.value.userOptions.buttons.annotator,
isAnnotation: Qn.value,
callbacks: H.value.userOptions.callbacks,
printScale: H.value.userOptions.print.scale,
tableDialog: H.value.table.useDialog,
isCursorPointer: Cn.value,
onToggleFullscreen: Kn,
onGeneratePdf: N(Mn),
onGenerateCsv: Yn,
onGenerateImage: cr,
onGenerateSvg: sr,
onToggleTable: Zn,
onToggleAnnotator: $n,
onCopyAlt: lr,
style: D({ visibility: N(Dn) ? N(Tn) ? "visible" : "hidden" : "visible" })
}, we({ _: 2 }, [
e.$slots.menuIcon ? {
name: "menuIcon",
fn: P(({ isOpen: t, color: n }) => [j(e.$slots, "menuIcon", E(T({
isOpen: t,
color: n
})), void 0, !0)]),
key: "0"
} : void 0,
e.$slots.optionPdf ? {
name: "optionPdf",
fn: P(() => [j(e.$slots, "optionPdf", {}, void 0, !0)]),
key: "1"
} : void 0,
e.$slots.optionCsv ? {
name: "optionCsv",
fn: P(() => [j(e.$slots, "optionCsv", {}, void 0, !0)]),
key: "2"
} : void 0,
e.$slots.optionImg ? {
name: "optionImg",
fn: P(() => [j(e.$slots, "optionImg", {}, void 0, !0)]),
key: "3"
} : void 0,
e.$slots.optionSvg ? {
name: "optionSvg",
fn: P(() => [j(e.$slots, "optionSvg", {}, void 0, !0)]),
key: "4"
} : void 0,
e.$slots.optionTable ? {
name: "optionTable",
fn: P(() => [j(e.$slots, "optionTable", {}, void 0, !0)]),
key: "5"
} : void 0,
e.$slots.optionFullscreen ? {
name: "optionFullscreen",
fn: P(({ toggleFullscreen: t, isFullscreen: n }) => [j(e.$slots, "optionFullscreen", E(T({
toggleFullscreen: t,
isFullscreen: n
})), void 0, !0)]),
key: "6"
} : void 0,
e.$slots.optionAnnotator ? {
name: "optionAnnotator",
fn: P(({ toggleAnnotator: t, isAnnotator: n }) => [j(e.$slots, "optionAnnotator", E(T({
toggleAnnotator: t,
isAnnotator: n
})), void 0, !0)]),
key: "7"
} : void 0,
e.$slots.optionAltCopy ? {
name: "optionAltCopy",
fn: P(({ altCopy: t }) => [j(e.$slots, "optionAltCopy", E(T({ altCopy: t })), void 0, !0)]),
key: "8"
} : void 0,
e.$slots["custom-menu-before"] ? {
name: "custom-menu-before",
fn: P(() => [j(e.$slots, "custom-menu-before", {}, void 0, !0)]),
key: "9"
} : void 0,
e.$slots["custom-menu-after"] ? {
name: "custom-menu-after",
fn: P(() => [j(e.$slots, "custom-menu-after", {}, void 0, !0)]),
key: "10"
} : void 0
]), 1032, [
"backgroundColor",
"color",
"isPrinting",
"isImaging",
"uid",
"hasPdf",
"hasTable",
"hasXls",
"hasImg",
"hasSvg",
"hasFullscreen",
"hasAltCopy",
"titles",
"chartElement",
"position",
"hasAnnotator",
"isAnnotation",
"callbacks",
"printScale",
"tableDialog",
"isCursorPointer",
"onGeneratePdf",
"style"
])) : b("", !0),
S("div", ze, [(O(), x("svg", {
ref_key: "svgRef",
ref: On,
xmlns: N(ae),
class: Oe({
"vue-data-ui-fullscreen--on": Gn.value,
"vue-data-ui-fulscreen--off": !Gn.value
}),
viewBox: `0 0 ${q.value.absoluteWidth} ${q.value.height}`,
style: D(`max-width:100%; overflow: visible; background:transparent;color:${H.value.style.chart.color}`),
tabindex: "0",
"aria-describedby": `chart-instructions-${I.value}`,
onFocus: pr,
onBlur: mr,
onKeydown: hr
}, [
C(N(on)),
e.$slots["chart-background"] ? (O(), x("foreignObject", {
key: 0,
x: 0,
y: 0,
width: q.value.absoluteWidth,
height: q.value.height,
style: { pointerEvents: "none" }
}, [j(e.$slots, "chart-background", {}, void 0, !0)], 8, Ve)) : b("", !0),
S("defs", null, [
C(g, {
t: "radial",
id: `gradient_top${I.value}`,
stops: [[
"0%",
N(n)(H.value.style.chart.backgroundColor, 0),
1
], [
"100%",
H.value.style.chart.bar.color,
1
]]
}, null, 8, ["id", "stops"]),
C(g, {
t: "radial",
id: `gradient_tube_top${I.value}`,
stops: [[
"0%",
N(n)(N(o)(H.value.style.chart.bar.color, .5), 80),
1
], [
"100%",
N(n)(N(u)(H.value.style.chart.bar.color, .1), 80),
1
]]
}, null, 8, ["id", "stops"]),
C(g, {
t: "radial",
id: `gradient_left${I.value}`,
stops: [[
"0%",
N(n)(H.value.style.chart.backgroundColor, 0),
1
], [
"100%",
N(n)(H.value.style.chart.bar.color, 20),
1
]]
}, null, 8, ["id", "stops"]),
C(g, {
t: "radial",
id: `gradient_right${I.value}`,
stops: [[
"0%",
N(n)(H.value.style.chart.backgroundColor, 0),
1
], [
"100%",
N(n)(H.value.style.chart.bar.color, 20),
1
]]
}, null, 8, ["id", "stops"]),
C(g, {
t: "linear",
id: `gradient_tube_body${I.value}`,
x1: "0%",
y1: "0%",
x2: "100%",
y2: "0%",
stops: [
[
"0%",
H.value.style.chart.bar.color,
1
],
[
"10%",
N(n)(N(u)(H.value.style.chart.bar.color, .7), 100),
1
],
[
"25%",
N(n)(N(u)(H.value.style.chart.bar.color, .5), 100),
1
],
[
"75%",
N(n)(H.value.style.chart.bar.color, 80),
1
],
[
"100%",
N(n)(N(o)(H.value.style.chart.bar.color, .7), 100),
1
]
]
}, null, 8, ["id", "stops"])
]),
K.value ? (O(), x("defs", He, [
(O(!0), x(_, null, A(J.value, (e) => (O(), y(g, {
t: "radial",
id: `grad_top_${e.id}`,
key: `grad_top_${e.id}`,
stops: [[
"0%",
N(n)(N(o)(e.color, .5), 80),
1
], [
"100%",
e.color,
1
]]
}, null, 8, ["id", "stops"]))), 128)),
(O(!0), x(_, null, A(J.value, (e) => (O(), y(g, {
t: "linear",
id: `grad_left_${e.id}`,
key: `grad_left_${e.id}`,
stops: [[
"0%",
N(n)(e.color, 80),
1
], [
"100%",
N(n)(N(u)(e.color, .5), 100),
1
]]
}, null, 8, ["id", "stops"]))), 128)),
(O(!0), x(_, null, A(J.value, (e) => (O(), y(g, {
t: "linear",
id: `grad_right_${e.id}`,
key: `grad_right_${e.id}`,
stops: [[
"2%",
N(n)(N(o)(e.color, .5), 100),
1
], [
"100%",
N(n)(e.color, 80),
1
]]
}, null, 8, ["id", "stops"]))), 128)),
C(g, {
t: "linear",
x1: "0%",
y1: "0%",
x2: "0%",
y2: "100%",
id: `vertical_line_${I.value}`,
stops: [[
"0%",
"#FFFFFF",
1
], [
"100%",
"#FFFFFF33",
1
]]
}, null, 8, ["id"])
])) : b("", !0),
H.value.style.chart.dataLabel.show && ![null, void 0].includes(N(W).percentage) && [null, void 0].includes(N(W).series) ? (O(), x("text", {
key: 2,
x: q.value.width / 2,
y: q.value.top - H.value.style.chart.dataLabel.fontSize / 2,
"font-size": H.value.style.chart.dataLabel.fontSize,
"font-weight": H.value.style.chart.dataLabel.bold ? "bold" : "normal",
fill: H.value.style.chart.dataLabel.color,
"text-anchor": "middle"
}, M(N(l)({
v: X.value,
s: "%",
r: H.value.style.chart.dataLabel.rounding
})), 9, Ue)) : b("", !0),
R.value ? (O(), x("g", {
key: 3,
role: "button",
tabindex: "0",
"aria-label": "Clear selection",
onClick: t[0] ||= (e) => {
R.value = !1, Z.value = null;
},
onKeydown: [t[1] ||= Ne(Pe((e) => {
R.value = !1, Z.value = null;
}, ["prevent"]), ["enter"]), t[2] ||= Ne(Pe((e) => {
R.value = !1, Z.value = null;
}, ["prevent"]), ["space"])],
onFocus: t[3] ||= (e) => z.value = !0,
onBlur: t[4] ||= (e) => z.value = !1,
onMouseenter: t[5] ||= (e) => z.value = !0,
onMouseleave: t[6] ||= (e) => z.value = !1,
class: "svg-btn",
"data-dom-to-png-ignore": "",
style: D({
cursor: Cn.value ? "pointer" : "default",
outline: "none"
})
}, [
t[10] ||= S("title", null, "Clear selection", -1),
S("rect", {
x: Bn.value - 12,
y: q.value.top - 24,
width: 24,
height: 24,
fill: "transparent",
"pointer-events": "all"
}, null, 8, We),
S("circle", {
cx: Bn.value,
cy: q.value.top - 12,
r: "10",
fill: "none",
stroke: H.value.style.chart.color,
"stroke-width": "2",
"vector-effect": "non-scaling-stroke",
opacity: z.value ? .5 : 0
}, null, 8, Ge),
S("path", {
d: `M${Bn.value - 6},${q.value.top - 18} ${Bn.value + 6},${q.value.top - 6}`,
stroke: H.value.style.chart.color,
"stroke-linecap": "round",
"stroke-width": "2",
"vector-effect": "non-scaling-stroke"
}, null, 8, Ke),
S("path", {
d: `M${Bn.value + 6},${q.value.top - 18} ${Bn.value - 6},${q.value.top - 6}`,
stroke: H.value.style.chart.color,
"stroke-linecap": "round",
"stroke-width": "2",
"vector-effect": "non-scaling-stroke"
}, null, 8, qe)
], 36)) : b("", !0),
!H.value.style.shape || H.value.style.shape === "bar" ? (O(), x("g", Je, [
K.value ? b("", !0) : (O(), x("g", Ye, [
S("path", {
"stroke-dasharray": H.value.style.chart.box.strokeDasharray,
d: Y.value.right,
stroke: H.value.style.chart.box.stroke,
"stroke-width": H.value.style.chart.box.strokeWidth,
"stroke-linejoin": "round",
"stroke-linecap": "round",
fill: "none"
}, null, 8, Xe),
S("path", {
"stroke-dasharray": H.value.style.chart.box.strokeDasharray,
d: Y.value.left,
stroke: H.value.style.chart.box.stroke,
"stroke-width": H.value.style.chart.box.strokeWidth,
"stroke-linejoin": "round",
"stroke-linecap": "round",
fill: "none"
}, null, 8, Ze),
S("path", {
"stroke-dasharray": H.value.style.chart.box.strokeDasharray,
d: Y.value.side,
stroke: H.value.style.chart.box.stroke,
"stroke-width": H.value.style.chart.box.strokeWidth,
"stroke-linejoin": "round",
"stroke-linecap": "round",
fill: "none"
}, null, 8, Qe),
S("path", {
"stroke-dasharray": H.value.style.chart.box.strokeDasharray,
d: Y.value.topSides,
stroke: H.value.style.chart.box.stroke,
"stroke-width": H.value.style.chart.box.strokeWidth,
"stroke-linejoin": "round",
"stroke-linecap": "round",
fill: "none"
}, null, 8, $e)
])),
K.value ? b("", !0) : (O(), x("g", et, [
S("path", {
d: Hn.value.right,
stroke: H.value.style.chart.bar.stroke,
"stroke-width": H.value.style.chart.bar.strokeWidth,
"stroke-linejoin": "round",
"stroke-linecap": "round",
fill: `url(#gradient_right${I.value})`
}, null, 8, tt),
S("path", {
d: Hn.value.left,
stroke: H.value.style.chart.bar.stroke,
"stroke-width": H.value.style.chart.bar.strokeWidth,
"stroke-linejoin": "round",
"stroke-linecap": "round",
fill: `url(#gradient_left${I.value})`
}, null, 8, nt),
S("path", {
d: Hn.value.top,
stroke: H.value.style.chart.bar.stroke,
"stroke-width": H.value.style.chart.bar.strokeWidth,
"stroke-linejoin": "round",
"stroke-linecap": "round",
fill: `url(#gradient_top${I.value})`
}, null, 8, rt)
])),
K.value ? (O(), x("g", it, [
(O(!0), x(_, null, A(J.value, (e, t) => (O(), x("g", {
style: D(`opacity:${Z.value ? Z.value === e.id ? 1 : .3 : 1}`),
class: "vue-ui-3d-bar-stack",
role: "img",
"aria-label": dr(e)
}, [
S("path", {
d: e.fill.right,
fill: `url(#grad_right_${e.id})`,
onMouseenter: (t) => Q(e),
onClick: (t) => Q(e, !0),
onMouseout: (t) => $(e)
}, null, 40, ot),
S("path", {
d: e.fill.left,
fill: `url(#grad_left_${e.id})`,
onMouseenter: (t) => Q(e),
onClick: (t) => Q(e, !0),
onMouseout: (t) => $(e)
}, null, 40, st),
S("path", {
d: e.fill.top,
fill: `url(#grad_top_${e.id})`,
onMouseenter: (t) => Q(e),
onClick: (t) => Q(e, !0),
onMouseout: (t) => $(e)
}, null, 40, ct),
S("path", {
d: e.fill.liningTop,
stroke: "#FFFFFF",
"stroke-width": "0.5",
"stroke-linecap": "round",
fill: "none",
onMouseenter: (t) => Q(e),
onClick: (t) => Q(e, !0),
onMouseout: (t) => $(e)
}, null, 40, lt),
S("path", {
d: `M ${e.fill.apexTop.x},${e.fill.apexTop.y} ${e.fill.apexBottom.x},${e.fill.apexBottom.y}`,
stroke: "#FFFFFF",
"stroke-width": "0.5",
"stroke-linecap": "round"
}, null, 8, ut)
], 12, at))), 256)),
(O(!0), x(_, null, A(J.value, (e, t) => (O(), x("g", null, [t === J.value.length - 1 ? b("", !0) : (O(), x("path", {
key: 0,
d: e.fill.liningTopShade,
stroke: H.value.style.chart.bar.shadeColor,
"stroke-width": "0.5",
"stroke-linecap": "round",
fill: "none",
style: { "pointer-events": "none" }
}, null, 8, dt))]))), 256)),
(O(!0), x(_, null, A(J.value, (t, n) => (O(), x("g", {
style: D(`opacity:${Z.value ? +(Z.value === t.id) : +(t.proportion * 100 > H.value.style.chart.legend.hideUnderPercentage)}`),
onClick: (e) => dn("selectDatapoint", t)
}, [
S("path", {
stroke: H.value.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.x2},${t.fill.sidePointer.y}`
}, null, 8, pt),
!t.fill.miniDonut || Z.value ? (O(), x("circle", {
key: 0,
cx: t.fill.sidePointer.x2,
cy: t.fill.sidePointer.y,
r: 2,
fill: t.color,
stroke: H.value.style.chart.backgroundColor
}, null, 8, mt)) : b("", !0),
N(U) ? (O(), x("rect", {
key: 1,
x: t.fill.sidePointer.xText,
y: t.fill.sidePointer.y - H.value.style.chart.legend.fontSize / 2,
width: q.value.width / 3,
height: H.value.style.chart.legend.fontSize,
fill: "#6A6A6A80",
rx: "3"
}, null, 8, ht)) : b("", !0),
N(U) ? b("", !0) : (O(), x("foreignObject", {
key: 2,
x: t.fill.sidePointer.xText,
y: t.fill.sidePointer.y - H.value.style.chart.legend.fontSize,
width: q.value.absoluteWidth / 3,
height: H.value.style.chart.legend.fontSize * 2,
style: {
overflow: "visible",
position: "relative"
}
}, [H.value.style.chart.legend.showDefault ? (O(), x("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:${H.value.style.chart.legend.fontSize}px; text-align:left; line-height: ${H.value.style.chart.legend.fontSize}px; color:${H.value.style.chart.legend.color}; font-weight:${H.value.style.chart.legend.bold ? "bold" : "normal"}`)
}, M(N(m)(H.value.style.chart.dataLabel.formatter, t.value, `${t.name}: ${N(l)({
v: t.proportion * 100,
s: "%",
r: H.value.style.chart.legend.roundingPercentage
})} (${N(l)({
p: H.value.style.chart.legend.prefix,
v: t.value,
s: H.value.style.chart.legend.suffix,
r: H.value.style.chart.legend.roundingValue
})})`, {
datapoint: t,
seriesIndex: n,
type: "barDatapoint"
})), 5)) : b("", !0), j(e.$slots, "legend", Ee({ ref_for: !0 }, {
datapoint: t,
config: H.value,
dataset: J.value
}), void 0, !0)], 8, gt)),
t.fill.donut && Z.value === t.id ? (O(), x("g", _t, [
(O(!0), x(_, null, A(t.fill.donut, (e, n) => (O(), x("g", null, [Un(e, t.fill.donut, !0) > 6 ? (O(), x("path", {
key: 0,
d: N(p)(e, {
x: e.cx,
y: e.cy
}, 0, 8, !1, !0, 10),
stroke: e.color,
class: "vue-ui-donut-arc-path",
"stroke-width": "0.5",
"stroke-linecap": "round",
"stroke-linejoin": "round",
fill: "none"
}, null, 8, vt)) : b("", !0)]))), 256)),
(O(!0), x(_, null, A(t.fill.donut, (e, t) => (O(), x("path", {
class: "vue-ui-donut-arc-path",
d: e.arcSlice,
fill: `${e.color}`,
stroke: H.value.style.chart.backgroundColor,
"stroke-width": 1
}, null, 8, yt))), 256)),
(O(!0), x(_, null, A(t.fill.donut, (e, n) => (O(), x("g", null, [Un(e, t.fill.donut, !0) > 6 ? (O(), x("g", bt, [S("text", {
"text-anchor": N(f)(e, !0, 0).anchor,
x: N(f)(e, !0, 2).x,
y: N(ne)(e, 12, 12),
fill: H.value.style.chart.legend.color,
"font-size": H.value.style.chart.legend.fontSize / 1.5,
"font-weight": H.value.style.chart.legend.bold ? "bold" : "normal"
}, M(N(m)(H.value.style.chart.dataLabel.formatter, e.value, `${Un(e, t.fill.donut)} (${N(l)({
p: H.value.style.chart.legend.prefix,
v: e.value,
s: H.value.style.chart.legend.suffix,
r: H.value.style.chart.legend.roundingValue
})})`, {
datapoint: e,
seriesIndex: n,
type: "donutDatapoint"
})), 9, xt), S("text", {
"text-anchor": N(f)(e).anchor,
x: N(f)(e, !0, 2).x,
y: N(ne)(e, 12, 12) + H.value.style.chart.legend.fontSize / 1.5,
fill: H.value.style.chart.legend.color,
"font-size": H.value.style.chart.legend.fontSize / 1.5,
"font-weight": H.value.style.chart.legend.bold ? "bold" : "normal"
}, M(e.name), 9, St)])) : b("", !0)]))), 256))
])) : b("", !0),
t.fill.miniDonut && !Z.value ? (O(), x("g", Ct, [(O(!0), x(_, null, A(t.fill.miniDonut, (e, t) => (O(), x("path", {
class: "vue-ui-donut-arc-path",
d: e.arcSlice,
fill: `${e.color}`,
stroke: H.value.style.chart.backgroundColor,
"stroke-width": .5
}, null, 8, wt))), 256))])) : b("", !0)
], 12, ft))), 256))
])) : b("", !0)
])) : b("", !0),
H.value.style.shape === "tube" ? (O(), x("g", Tt, [K.value ? b("", !0) : (O(), x("g", Et, [
S("path", {
"stroke-dasharray": H.value.style.chart.box.strokeDasharray,
d: Y.value.tubeTop,
stroke: H.value.style.chart.box.stroke,
"stroke-width": H.value.style.chart.box.strokeWidth,
"stroke-linejoin": "round",
"stroke-linecap": "round",
fill: "none"
}, null, 8, Dt),
S("path", {
"stroke-dasharray": H.value.style.chart.box.strokeDasharray,
d: Y.value.tubeLeft,
stroke: H.value.style.chart.box.stroke,
"stroke-width": H.value.style.chart.box.strokeWidth,
"stroke-linejoin": "round",
"stroke-linecap": "round",
fill: "none"
}, null, 8, Ot),
S("path", {
"stroke-dasharray": H.value.style.chart.box.strokeDasharray,
d: Y.value.tubeRight,
stroke: H.value.style.chart.box.stroke,
"stroke-width": H.value.style.chart.box.strokeWidth,
"stroke-linejoin": "round",
"stroke-linecap": "round",
fill: "none"
}, null, 8, kt),
S("path", {
"stroke-dasharray": H.value.style.chart.box.strokeDasharray,
d: Y.value.tubeBottom,
stroke: H.value.style.chart.box.stroke,
"stroke-width": H.value.style