vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
1,452 lines • 66.6 kB
JavaScript
import { defineAsyncComponent as Z, computed as P, ref as b, toRefs as It, watch as xe, onMounted as Nt, createElementBlock as v, openBlock as u, unref as n, normalizeStyle as j, normalizeClass as Ke, createBlock as te, createCommentVNode as p, withCtx as x, renderSlot as _, normalizeProps as z, guardReactiveProps as I, createSlots as Je, createVNode as Qe, createElementVNode as i, Fragment as D, renderList as F, toDisplayString as N, withKeys as et, withModifiers as tt, mergeProps as we, resolveDynamicComponent as Lt, createTextVNode as ot, nextTick as lt } from "vue";
import { c as at, t as Wt, i as Rt, j as ve, k as Gt, m as Vt, o as Ut, g as he, l as Ae, q as V, a3 as st, U as Ht, d as O, X as Xt, s as $, u as q, a as fe, a4 as nt, a5 as pe, a6 as U, v as Zt, r as qt } from "./lib-BwysEpWI.js";
import { t as Yt, u as Kt } from "./useResponsive-DfdjqQps.js";
import { u as Jt, a as De } from "./useNestedProp-OFRiX4kU.js";
import { u as Qt, B as eo } from "./BaseScanner-BMpwQAfz.js";
import { u as to } from "./usePrinter-BJzHDpYF.js";
import { u as oo } from "./useSvgExport-ByUukOZt.js";
import { u as lo } from "./useThemeCheck-DGJ31Vi5.js";
import { u as ao } from "./useUserOptionState-BIvW1Kz7.js";
import { u as so } from "./useChartAccessibility-9icAAmYg.js";
import no from "./img-DKigoPDs.js";
import ro from "./Title-DGnfNZuO.js";
import { _ as uo } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const rt = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", box: { stroke: "#5A5A5A" }, title: { color: "#CCCCCC", subtitle: { color: "#757575" } }, legend: { color: "#CCCCCC" }, dataLabel: { color: "#CCCCCC" } } }, table: { th: { backgroundColor: "#1A1A1A", color: "#CCCCCC" }, td: { backgroundColor: "#1A1A1A", color: "#CCCCCC" } } }, ut = { style: { chart: { backgroundColor: "#FFF8E1", color: "#424242", bar: { color: "#D32F2F" }, box: { stroke: "#5D4037" }, title: { color: "#424242", subtitle: { color: "#757575" } }, legend: { color: "#424242" }, dataLabel: { color: "#424242" } } }, table: { th: { backgroundColor: "#FFF8E1", color: "#424242" }, td: { backgroundColor: "#FFF8E1", color: "#424242" } } }, it = { style: { chart: { backgroundColor: "#1E1E1E", color: "#BDBDBD", bar: { color: "#D32F2F" }, box: { stroke: "#5D4037" }, title: { color: "#FFF8E1", subtitle: { color: "#BDBDBD" } }, legend: { color: "#BDBDBD" }, dataLabel: { color: "#BDBDBD" } } }, table: { th: { backgroundColor: "#1E1E1E", color: "#BDBDBD" }, td: { backgroundColor: "#1E1E1E", color: "#BDBDBD" } } }, dt = { style: { chart: { backgroundColor: "#1A1A1A", color: "#99AA99", bar: { color: "#66CC66" }, box: { stroke: "#333333" }, title: { color: "#66CC66", subtitle: { color: "#99AA99" } }, legend: { color: "#99AA99" }, dataLabel: { color: "#AACCAA" } } }, table: { th: { backgroundColor: "#1A1A1A", color: "#99AA99" }, td: { backgroundColor: "#1A1A1A", color: "#AACCAA" } } }, ct = { style: { chart: { backgroundColor: "#fbfafa", color: "#8A9892", bar: { color: "#B9B99D" }, box: { stroke: "#DCDFE7" }, title: { color: "#8A9892", subtitle: { color: "#99AA99" } }, legend: { color: "#99AA99" }, dataLabel: { color: "#A0AC94" } } }, table: { th: { backgroundColor: "#fbfafa", color: "#8F837A" }, td: { backgroundColor: "#fbfafa", color: "#8F837A" } } }, vt = { style: { chart: { backgroundColor: "#f6f6fb", color: "#50606C", bar: { color: "#4A6A75" }, box: { stroke: "#DEE1DE" }, title: { color: "#50606C", subtitle: { color: "#718890" } }, legend: { color: "#61747E" }, dataLabel: { color: "#61747E" } } }, table: { th: { backgroundColor: "#f6f6fb", color: "#50606C" }, td: { backgroundColor: "#f6f6fb", color: "#50606C" } } }, ht = {
default: {},
dark: rt,
celebration: ut,
celebrationNight: it,
hack: dt,
zen: ct,
concrete: vt
}, Ca = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
__proto__: null,
celebration: ut,
celebrationNight: it,
concrete: vt,
dark: rt,
default: ht,
hack: dt,
zen: ct
}, Symbol.toStringTag, { value: "Module" })), io = ["id"], co = ["xmlns", "viewBox"], vo = ["width", "height"], ho = ["id"], fo = ["stop-color"], po = ["stop-color"], go = ["id"], ko = ["stop-color"], yo = ["stop-color"], $o = ["id"], bo = ["stop-color"], _o = ["stop-color"], mo = ["id"], Co = ["stop-color"], xo = ["stop-color"], wo = ["id"], Ao = ["stop-color"], Do = ["stop-color"], Fo = ["stop-color"], Mo = ["stop-color"], To = ["stop-color"], Po = { key: 1 }, So = ["id"], Bo = ["stop-color"], Oo = ["stop-color"], Eo = ["id"], jo = ["stop-color"], zo = ["stop-color"], Io = ["id"], No = ["stop-color"], Lo = ["stop-color"], Wo = ["id"], Ro = ["x", "y", "font-size", "font-weight", "fill"], Go = ["x", "y"], Vo = ["cx", "cy", "stroke", "opacity"], Uo = ["d", "stroke"], Ho = ["d", "stroke"], Xo = { key: 4 }, Zo = { key: 0 }, qo = ["stroke-dasharray", "d", "stroke", "stroke-width"], Yo = ["stroke-dasharray", "d", "stroke", "stroke-width"], Ko = ["stroke-dasharray", "d", "stroke", "stroke-width"], Jo = ["stroke-dasharray", "d", "stroke", "stroke-width"], Qo = { key: 1 }, el = ["d", "stroke", "stroke-width", "fill"], tl = ["d", "stroke", "stroke-width", "fill"], ol = ["d", "stroke", "stroke-width", "fill"], ll = { key: 2 }, al = ["d", "fill", "onMouseenter", "onClick", "onMouseout"], sl = ["d", "fill", "onMouseenter", "onClick", "onMouseout"], nl = ["d", "fill", "onMouseenter", "onClick", "onMouseout"], rl = ["d", "onMouseenter", "onClick", "onMouseout"], ul = ["d"], il = ["d", "stroke"], dl = ["onClick"], cl = ["stroke", "d"], vl = ["cx", "cy", "fill", "stroke"], hl = ["x", "y", "width", "height"], fl = ["x", "y", "width", "height"], pl = { key: 3 }, gl = ["d", "stroke"], kl = ["d", "fill", "stroke"], yl = { key: 0 }, $l = ["text-anchor", "x", "y", "fill", "font-size", "font-weight"], bl = ["text-anchor", "x", "y", "fill", "font-size", "font-weight"], _l = { key: 4 }, ml = ["d", "fill", "stroke"], Cl = { key: 5 }, xl = { key: 0 }, wl = ["stroke-dasharray", "d", "stroke", "stroke-width"], Al = ["stroke-dasharray", "d", "stroke", "stroke-width"], Dl = ["stroke-dasharray", "d", "stroke", "stroke-width"], Fl = ["stroke-dasharray", "d", "stroke", "stroke-width"], Ml = ["d", "stroke", "stroke-width", "fill"], Tl = ["d", "stroke", "stroke-width", "fill"], Pl = ["d"], Sl = { key: 1 }, Bl = ["onClick"], Ol = ["id"], El = ["stop-color"], jl = ["stop-color"], zl = ["id"], Il = ["stop-color"], Nl = ["stop-color"], Ll = ["stop-color"], Wl = ["stop-color"], Rl = ["stop-color"], Gl = ["onMouseenter", "onClick", "onMouseout", "d", "fill"], Vl = ["onMouseenter", "onClick", "onMouseout", "d"], Ul = ["onMouseenter", "onClick", "onMouseout", "d", "fill"], Hl = ["onClick"], Xl = ["stroke", "d"], Zl = ["cx", "cy", "fill", "stroke"], ql = ["x", "y", "width", "height"], Yl = ["x", "y", "width", "height"], Kl = { key: 3 }, Jl = ["d", "stroke"], Ql = ["d", "fill", "stroke"], ea = { key: 0 }, ta = ["text-anchor", "x", "y", "fill", "font-size", "font-weight"], oa = ["text-anchor", "x", "y", "fill", "font-size", "font-weight"], la = { key: 4 }, aa = ["d", "fill", "stroke"], sa = {
key: 3,
class: "vue-data-ui-watermark"
}, na = ["innerHTML"], ra = {
__name: "vue-ui-3d-bar",
props: {
config: {
type: Object,
default() {
return {};
}
},
dataset: {
type: Object,
default() {
return {};
}
}
},
emits: ["selectDatapoint"],
setup(ft, { expose: pt, emit: gt }) {
const kt = Z(() => import("./BaseIcon-4i3dd7Ty.js")), yt = Z(() => import("./vue-ui-accordion-DUuwVsuJ.js")), $t = Z(() => import("./DataTable-WrXCJkfE.js")), bt = Z(() => import("./PenAndPaper-DxIUvoQ8.js")), _t = Z(() => import("./UserOptions-CzJWRC4s.js")), mt = Z(() => import("./PackageVersion-BLzm8l_I.js")), Ct = Z(() => import("./BaseDraggableDialog-CAJxIF6g.js")), { vue_ui_3d_bar: xt } = Jt(), { isThemeValid: wt, warnInvalidTheme: At } = lo(), S = ft, ne = gt, Fe = P(() => !!S.dataset && Object.keys(S.dataset).length), M = b(at()), L = b(null), E = b(!1), Me = b(0), Te = b(0), Pe = b(null), oe = b(null), re = b(null), Se = b(null), le = b(!1), ae = b(null), ge = b(null), e = b($e()), { loading: Y, FINAL_DATASET: B } = Qt({
...It(S),
FINAL_CONFIG: e,
prepareConfig: $e,
callback: () => {
Promise.resolve().then(async () => {
await lt(), Le();
});
},
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: Wt({
defaultConfig: e.value,
userConfig: {
customPalette: ["#808080", "#ADADAD", "#DBDBDB"],
userOptions: { show: !1 },
table: { show: !1 },
style: {
chart: {
backgroundColor: "#99999930",
color: "#6A6A6A",
bar: {
color: "#ADADAD",
stroke: "#6A6A6A"
},
box: {
stroke: "#6A6A6A"
}
}
}
}
})
}), { userOptionsVisible: ke, setUserOptionsVisibility: Be, keepUserOptionState: Oe } = ao({ config: e.value }), { svgRef: ye } = so({ config: e.value.style.chart.title });
function $e() {
const a = De({
userConfig: S.config,
defaultConfig: xt
}), l = a.theme;
if (!l) return a;
if (!wt.value(a))
return At(a), a;
const t = De({
userConfig: ht[l] || S.config,
defaultConfig: a
}), d = De({
userConfig: S.config,
defaultConfig: t
});
return {
...d,
customPalette: d.customPalette.length ? d.customPalette : Rt[l] || ve
};
}
xe(() => S.config, (a) => {
Y.value || (e.value = $e()), ke.value = !e.value.userOptions.showOnChartHover, We(), Me.value += 1, Te.value += 1, H.value.showTable = e.value.table.show;
}, { deep: !0 });
const { isPrinting: Ee, isImaging: je, generatePdf: ze, generateImage: Ie } = to({
elementId: `3d_bar_${M.value}`,
fileName: e.value.style.chart.title.text || "vue-ui-3d-bar",
options: e.value.userOptions.print
}), Dt = P(() => Gt(e.value.customPalette)), H = b({
showTable: e.value.table.show
});
xe(e, () => {
H.value = {
showTable: e.value.table.show
};
}, { immediate: !0 });
const w = P(() => B.value.series && B.value.series.length), be = b(e.value.style.chart.box.dimensions.width * (w.value ? 2 : 1)), Ne = b(e.value.style.chart.box.dimensions.height), s = P(() => ({
height: Ne.value,
width: be.value,
absoluteWidth: be.value,
top: e.value.style.chart.box.dimensions.top,
bottom: e.value.style.chart.box.dimensions.bottom,
left: e.value.style.chart.box.dimensions.left,
right: e.value.style.chart.box.dimensions.right,
perspective: e.value.style.chart.box.dimensions.perspective
})), A = P(() => {
if (w.value) {
const a = B.value.series.map((o) => o.value || 0).reduce((o, c) => o + c, 0), l = B.value.series.map((o, c) => ({
...o,
seriesIndex: c,
id: at(),
proportion: (o.value || 0) / a,
color: Vt(o.color) || Dt.value[c] || ve[c] || ve[c % ve.length],
breakdown: o.breakdown ? o.breakdown.sort((r, k) => k.value - r.value) : null
})).sort((o, c) => c.value - o.value), t = [];
let d = 0;
for (let o = 0; o < l.length; o += 1)
t.push({
...l[o],
fill: Ft(d, l[o].proportion, l[o].breakdown, l[o].color)
}), d += l[o].proportion;
return t;
}
return null;
}), W = P(() => {
const a = s.value.width / 2;
return {
right: `M${a},${s.value.top} ${s.value.width - s.value.right}, ${s.value.top + s.value.perspective} ${s.value.width - s.value.right},${s.value.height - s.value.bottom - s.value.perspective} ${a},${s.value.height - s.value.bottom}`,
left: `M${a},${s.value.top} ${s.value.left},${s.value.top + s.value.perspective} ${s.value.left},${s.value.height - s.value.bottom - s.value.perspective} ${a},${s.value.height - s.value.bottom}`,
side: `M${a},${s.value.height - s.value.bottom} ${a},${s.value.top + s.value.perspective * 2}`,
topSides: `M${s.value.left},${s.value.top + s.value.perspective} ${a},${s.value.top + s.value.perspective * 2} ${s.value.width - s.value.right},${s.value.top + s.value.perspective}`,
tubeTop: `M${s.value.left},${s.value.top + s.value.perspective} C ${s.value.left},${s.value.top - s.value.perspective / 3} ${s.value.width - s.value.right},${s.value.top - s.value.perspective / 3} ${s.value.width - s.value.right},${s.value.top + s.value.perspective} C ${s.value.width - s.value.right},${s.value.top + s.value.perspective * 2.3} ${s.value.left},${s.value.top + s.value.perspective * 2.3} ${s.value.left},${s.value.top + s.value.perspective}`,
tubeLeft: `M${s.value.left},${s.value.top + s.value.perspective} ${s.value.left},${s.value.height - s.value.bottom - s.value.perspective}`,
tubeRight: `M${s.value.width - s.value.right},${s.value.top + s.value.perspective} ${s.value.width - s.value.right},${s.value.height - s.value.bottom - s.value.perspective}`,
tubeBottom: `M${s.value.width - s.value.right},${s.value.height - s.value.bottom - s.value.perspective} C ${s.value.width - s.value.right},${s.value.height} ${s.value.left},${s.value.height} ${s.value.left},${s.value.height - s.value.bottom - s.value.perspective}`
};
}), K = b(e.value.style.chart.animation.use ? 0 : B.value.percentage);
function Le() {
let a = 0, l = e.value.style.chart.animation.speed, t = 5e-3 * e.value.style.chart.animation.acceleration;
function d() {
K.value += l + a, a += t, K.value < B.value.percentage ? requestAnimationFrame(d) : K.value = B.value.percentage;
}
e.value.style.chart.animation.use && (K.value = 0, d());
}
Nt(() => {
We(), Le();
});
const ue = P(() => !!e.value.debug);
function We() {
if (Ut(S.dataset) ? he({
componentName: "VueUi3dBar",
type: "dataset",
debug: ue.value
}) : S.dataset.series ? S.dataset.series.forEach((a, l) => {
Ae({
datasetObject: a,
requiredAttributes: ["name", "value"]
}).forEach((t) => {
he({
componentName: "VueUi3dBar",
type: "datasetSerieAttribute",
property: t,
index: l,
debug: ue.value
});
}), a.breakdown && a.breakdown.forEach((t, d) => {
Ae({
datasetObject: t,
requiredAttributes: ["name", "value"]
}).forEach((o) => {
he({
componentName: "VueUi3dBar",
type: "datasetSerieAttribute",
property: o,
index: `${l} - ${d}`,
debug: ue.value
});
});
});
}) : Ae({
datasetObject: S.dataset,
requiredAttributes: ["percentage"]
}).forEach((a) => {
he({
componentName: "VueUi3dBar",
type: "datasetAttribute",
property: a,
debug: ue.value
});
}), e.value.responsive) {
const a = Yt(() => {
const { width: l, height: t } = Kt({
chart: L.value,
title: e.value.style.chart.title.text ? Pe.value : null,
source: Se.value
});
requestAnimationFrame(() => {
Ne.value = t - 12, be.value = l;
});
});
oe.value && (re.value && oe.value.unobserve(re.value), oe.value.disconnect()), oe.value = new ResizeObserver(a), re.value = L.value.parentNode, oe.value.observe(re.value);
}
}
const J = P(() => s.value.width / 4);
function Ft(a, l, t, d) {
const o = s.value.height - s.value.bottom - s.value.top - s.value.perspective * 2, { width: c, height: r, bottom: k, right: G, left: y, perspective: g } = s.value, f = w.value ? c / 4 : c / 2, C = f * 2 + y, h = k + o * a, Ce = r - h - g - o * l / 2, Et = Ce > s.value.height / 2 ? "top" : "bottom", Xe = r * 0.25, jt = !!t;
let Ze = null, qe = null;
return jt && (t = t.map((Ye, zt) => ({
...Ye,
value: Ye.value || 0,
color: V(d, zt / t.length)
})), Ze = st(
{ series: t },
c / 2 + c / 5,
Et === "top" ? Ce - Xe : Ce + Xe,
c / 10,
c / 10,
1.99999,
2,
1,
360,
105.25,
c / 20
), qe = st(
{ series: t },
c - C + c / 14,
r - h - g - o * l / 2,
c / 40,
c / 40,
1.99999,
2,
1,
360,
105.25,
c / 40
)), {
donut: Ze,
miniDonut: qe,
donutR: c / 20,
CENTER_X: f,
sidePointer: {
x: c - C,
x2: c - C + c / 14,
xText: c - C + c / 9,
y: r - h - g - o * l / 2,
topY: r - h - g - o * l,
height: o * l
},
apexBottom: { y: r - h, x: f },
apexTop: { y: r - h - o * l, x: f },
right: `M${f},${r - h} ${f},${r - h - o * l} ${c - C},${r - h - g - o * l} ${c - C},${r - h - g}Z`,
left: `M${f},${r - h} ${f},${r - h - o * l} ${y}, ${r - h - g - o * l} ${y},${r - h - g}Z`,
liningTop: `M${y},${r - h - g - o * l} ${f},${r - h - o * l} ${c - C},${r - h - g - o * l}`,
liningTopShade: `M${y},${r - h - g - o * l - 0.5} ${f},${r - h - o * l - 0.5} ${c - C},${r - h - g - o * l - 0.5}`,
top: `M${f},${r - h - o * l} ${y},${r - h - g - o * l} ${f},${r - h - g * 2 - o * l} ${c - C},${r - h - g - o * l} Z`,
tubeTop: `M${y},${r - h - o * l - g} C ${y},${r - h - o * l - g * 2.5} ${c - C},${r - h - o * l - g * 2.5} ${c - C},${r - h - o * l - g} C ${c - C},${r - h - o * l + g / 2} ${y},${r - h - o * l + g / 2} ${y},${r - h - o * l - g}`,
bottomTubeTop: `M ${c - C - 0.5},${r - h - g} C ${c - C - 0.5},${r - h + g / 2} ${y},${r - h + g / 2} ${y + 0.5},${r - h - g}`,
tubeBody: `M
${y},${r - h - o * l - g}
C ${y},${r - h - o * l + g / 2}
${c - C},${r - h - o * l + g / 2}
${c - C},${r - h - o * l - g}
L${c - C},${r - h - g}
C
${c - C},${r - h + g / 2}
${y},${r - h + g / 2}
${y},${r - h - g}Z`
};
}
const Q = P(() => {
const a = Ht(K.value / 100), l = s.value.height - s.value.bottom - s.value.top - s.value.perspective * 2, { width: t, height: d, bottom: o, right: c, left: r, perspective: k } = s.value, G = w.value ? t / 4 : t / 2, y = w.value ? G * 2 + r : c, f = o + l * 0;
return {
right: `M${G},${d - f} ${G},${d - f - l * a} ${t - y},${d - f - k - l * a} ${t - y},${d - f - k}Z`,
left: `M${G},${d - f} ${G},${d - f - l * a} ${r}, ${d - f - k - l * a} ${r},${d - f - k}Z`,
top: `M${G},${d - f - l * a} ${r},${d - f - k - l * a} ${G},${d - f - k * 2 - l * a} ${t - y},${d - f - k - l * a} Z`,
tubeTop: `M${r},${d - f - l * a - k} C ${r},${d - f - l * a - k * 2.5} ${t - y},${d - f - l * a - k * 2.5} ${t - y},${d - f - l * a - k} C ${t - y},${d - f - l * a + k / 2} ${r},${d - f - l * a + k / 2} ${r},${d - f - l * a - k}`,
tubeBody: `M
${r},${d - f - l * a - k}
C ${r},${d - f - l * a + k / 2}
${t - y},${d - f - l * a + k / 2}
${t - y},${d - f - l * a - k}
L${t - y},${d - k * 1.5}
C
${t - y},${d}
${r},${d}
${r},${d - f - k}Z`
};
}), m = b(null);
function T(a, l = !1) {
e.value.events.datapointEnter && !l && e.value.events.datapointEnter({ datapoint: a, seriesIndex: a.seriesIndex }), e.value.events.datapointClick && l && e.value.events.datapointClick({ datapoint: a, seriesIndex: a.seriesIndex }), ne("selectDatapoint", a), l || (m.value = a.id), l && E.value && (E.value = !1), l && !E.value && (E.value = !0);
}
function X(a) {
e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: a, seriesIndex: a.seriesIndex }), !E.value && (m.value = null);
}
function ee(a, l, t = !1) {
const d = B.value.series.map((r) => r.value || 0).reduce((r, k) => r + k, 0), o = isNaN(a.value / d) ? 0 : a.value / d * 100, c = isNaN(a.value / Re(l)) ? 0 : a.value / Re(l) * 100;
return t ? c : o.toFixed(0) + "%";
}
function Re(a) {
return [...a].map((l) => l.value).reduce((l, t) => l + t, 0);
}
const ie = b(!1);
function Ge(a) {
ie.value = a;
}
function Mt() {
return w.value ? A.value : B.value.percentage;
}
const R = P(() => {
if (w.value) {
const a = A.value.flatMap((t) => t.breakdown && t.breakdown.length ? [{ name: t.name, color: t.color }, ...t.breakdown.map((d, o) => ({
name: d.name,
color: V(t.color, o / t.breakdown.length)
}))] : {
name: t.name,
color: t.color
}), l = A.value.flatMap((t) => t.breakdown && t.breakdown.length ? [t.value, ...t.breakdown.map((d) => d.value)] : t.value);
return { head: a, body: l };
} else
return null;
});
function _e(a = null) {
if (!w.value) {
console.warn("VueUi3dBar : CSV download is only available in stack mode (providing dataset.series instead of dataset.percentage)");
return;
}
lt(() => {
const l = A.value.map((c) => c.value).reduce((c, r) => c + r, 0), t = R.value.head.map((c, r) => [[
c.name
], [R.value.body[r]], [isNaN(R.value.body[r] / l) ? "-" : R.value.body[r] / l * 100]]), d = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [[""], ["val"], ["%"]]].concat(t), o = Zt(d);
a ? a(o) : qt({ csvContent: o, title: e.value.style.chart.title.text || "vue-ui-3d-bar" });
});
}
const de = P(() => {
const a = A.value.map((c) => c.value).reduce((c, r) => c + r, 0), l = [
' <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>',
O({ p: e.value.style.chart.legend.prefix, v: a, s: e.value.style.chart.legend.suffix, r: e.value.table.td.roundingValue }),
"100%"
], t = R.value.head.map((c, r) => {
const k = O({ p: e.value.style.chart.legend.prefix, v: R.value.body[r], s: e.value.style.chart.legend.suffix, r: e.value.table.td.roundingValue });
return [
{
color: c.color,
name: c.name
},
k,
isNaN(R.value.body[r] / a) ? "-" : O({
v: R.value.body[r] / a * 100,
s: "%",
r: e.value.table.td.roundingPercentage
})
];
}), d = {
th: {
backgroundColor: e.value.table.th.backgroundColor,
color: e.value.table.th.color,
outline: e.value.table.th.outline
},
td: {
backgroundColor: e.value.table.td.backgroundColor,
color: e.value.table.td.color,
outline: e.value.table.td.outline
},
breakpoint: e.value.table.responsiveBreakpoint,
shape: e.value.style.shape === "tube" ? "circle" : "square"
};
return {
colNames: [
e.value.table.columnNames.series,
e.value.table.columnNames.value,
e.value.table.columnNames.percentage
],
head: l,
body: t,
config: d
};
});
function Ve() {
H.value.showTable = !H.value.showTable;
}
const ce = b(!1);
function me() {
ce.value = !ce.value;
}
async function Tt({ scale: a = 2 } = {}) {
if (!L.value) return;
const { width: l, height: t } = L.value.getBoundingClientRect(), d = l / t, { imageUri: o, base64: c } = await no({ domElement: L.value, base64: !0, img: !0, scale: a });
return {
imageUri: o,
base64: c,
title: e.value.style.chart.title.text,
width: l,
height: t,
aspectRatio: d
};
}
const se = P(() => {
const a = e.value.table.useDialog && !e.value.table.show, l = H.value.showTable;
return {
component: a ? Ct : yt,
title: `${e.value.style.chart.title.text}${e.value.style.chart.title.subtitle.text ? `: ${e.value.style.chart.title.subtitle.text}` : ""}`,
props: a ? {
backgroundColor: e.value.table.th.backgroundColor,
color: e.value.table.th.color,
headerColor: e.value.table.th.color,
headerBg: e.value.table.th.backgroundColor,
isFullscreen: ie.value,
fullscreenParent: L.value,
forcedWidth: Math.min(800, window.innerWidth * 0.8)
} : {
hideDetails: !0,
config: {
open: l,
maxHeight: 1e4,
body: {
backgroundColor: e.value.style.chart.backgroundColor,
color: e.value.style.chart.color
},
head: {
backgroundColor: e.value.style.chart.backgroundColor,
color: e.value.style.chart.color
}
}
}
};
});
xe(() => H.value.showTable, (a) => {
e.value.table.show || (a && e.value.table.useDialog && ae.value ? ae.value.open() : "close" in ae.value && ae.value.close());
});
function Ue() {
H.value.showTable = !1, ge.value && ge.value.setTableIconState(!1);
}
const Pt = P(() => e.value.style.chart.backgroundColor), St = P(() => e.value.style.chart.title), { exportSvg: Bt, getSvg: Ot } = oo({
svg: ye,
title: St,
backgroundColor: Pt
});
async function He({ isCb: a }) {
if (a) {
const { blob: l, url: t, text: d, dataUrl: o } = await Ot();
e.value.userOptions.callbacks.svg({ blob: l, url: t, text: d, dataUrl: o });
} else
Bt();
}
return pt({
getImage: Tt,
generateCsv: _e,
generatePdf: ze,
generateImage: Ie,
generateSvg: He,
getData: Mt,
toggleTable: Ve,
toggleAnnotator: me,
toggleFullscreen: Ge
}), (a, l) => (u(), v("div", {
ref_key: "bar3dChart",
ref: L,
class: Ke("vue-data-ui-component vue-ui-3d-bar"),
style: j(`font-family:${e.value.style.fontFamily};width:100%; text-align:center;background:${e.value.style.chart.backgroundColor}`),
id: `3d_bar_${M.value}`,
onMouseenter: l[8] || (l[8] = () => n(Be)(!0)),
onMouseleave: l[9] || (l[9] = () => n(Be)(!1))
}, [
e.value.userOptions.buttons.annotator ? (u(), te(n(bt), {
key: 0,
svgRef: n(ye),
backgroundColor: e.value.style.chart.backgroundColor,
color: e.value.style.chart.color,
active: ce.value,
onClose: me
}, {
"annotator-action-close": x(() => [
_(a.$slots, "annotator-action-close", {}, void 0, !0)
]),
"annotator-action-color": x(({ color: t }) => [
_(a.$slots, "annotator-action-color", z(I({ color: t })), void 0, !0)
]),
"annotator-action-draw": x(({ mode: t }) => [
_(a.$slots, "annotator-action-draw", z(I({ mode: t })), void 0, !0)
]),
"annotator-action-undo": x(({ disabled: t }) => [
_(a.$slots, "annotator-action-undo", z(I({ disabled: t })), void 0, !0)
]),
"annotator-action-redo": x(({ disabled: t }) => [
_(a.$slots, "annotator-action-redo", z(I({ disabled: t })), void 0, !0)
]),
"annotator-action-delete": x(({ disabled: t }) => [
_(a.$slots, "annotator-action-delete", z(I({ disabled: t })), void 0, !0)
]),
_: 3
}, 8, ["svgRef", "backgroundColor", "color", "active"])) : p("", !0),
e.value.style.chart.title.text ? (u(), v("div", {
key: 1,
ref_key: "chartTitle",
ref: Pe,
style: "width:100%;background:transparent"
}, [
(u(), te(ro, {
key: `title_${Me.value}`,
config: {
title: {
cy: "3dBar-div-title",
...e.value.style.chart.title
},
subtitle: {
cy: "3dBar-div-subtitle",
...e.value.style.chart.title.subtitle
}
}
}, null, 8, ["config"]))
], 512)) : p("", !0),
e.value.userOptions.show && Fe.value && (n(Oe) || n(ke)) ? (u(), te(n(_t), {
key: 2,
ref_key: "userOptionsRef",
ref: ge,
backgroundColor: e.value.style.chart.backgroundColor,
color: e.value.style.chart.color,
isPrinting: n(Ee),
isImaging: n(je),
uid: M.value,
hasPdf: e.value.userOptions.buttons.pdf,
hasTable: !!w.value && e.value.userOptions.buttons.table,
hasXls: !!w.value && e.value.userOptions.buttons.csv,
hasImg: e.value.userOptions.buttons.img,
hasSvg: e.value.userOptions.buttons.svg,
hasFullscreen: e.value.userOptions.buttons.fullscreen,
titles: { ...e.value.userOptions.buttonTitles },
chartElement: L.value,
position: e.value.userOptions.position,
hasAnnotator: e.value.userOptions.buttons.annotator,
isAnnotation: ce.value,
callbacks: e.value.userOptions.callbacks,
printScale: e.value.userOptions.print.scale,
tableDialog: e.value.table.useDialog,
onToggleFullscreen: Ge,
onGeneratePdf: n(ze),
onGenerateCsv: _e,
onGenerateImage: n(Ie),
onGenerateSvg: He,
onToggleTable: Ve,
onToggleAnnotator: me,
style: j({
visibility: n(Oe) ? n(ke) ? "visible" : "hidden" : "visible"
})
}, Je({ _: 2 }, [
a.$slots.menuIcon ? {
name: "menuIcon",
fn: x(({ isOpen: t, color: d }) => [
_(a.$slots, "menuIcon", z(I({ isOpen: t, color: d })), void 0, !0)
]),
key: "0"
} : void 0,
a.$slots.optionPdf ? {
name: "optionPdf",
fn: x(() => [
_(a.$slots, "optionPdf", {}, void 0, !0)
]),
key: "1"
} : void 0,
a.$slots.optionCsv ? {
name: "optionCsv",
fn: x(() => [
_(a.$slots, "optionCsv", {}, void 0, !0)
]),
key: "2"
} : void 0,
a.$slots.optionImg ? {
name: "optionImg",
fn: x(() => [
_(a.$slots, "optionImg", {}, void 0, !0)
]),
key: "3"
} : void 0,
a.$slots.optionSvg ? {
name: "optionSvg",
fn: x(() => [
_(a.$slots, "optionSvg", {}, void 0, !0)
]),
key: "4"
} : void 0,
a.$slots.optionTable ? {
name: "optionTable",
fn: x(() => [
_(a.$slots, "optionTable", {}, void 0, !0)
]),
key: "5"
} : void 0,
a.$slots.optionFullscreen ? {
name: "optionFullscreen",
fn: x(({ toggleFullscreen: t, isFullscreen: d }) => [
_(a.$slots, "optionFullscreen", z(I({ toggleFullscreen: t, isFullscreen: d })), void 0, !0)
]),
key: "6"
} : void 0,
a.$slots.optionAnnotator ? {
name: "optionAnnotator",
fn: x(({ toggleAnnotator: t, isAnnotator: d }) => [
_(a.$slots, "optionAnnotator", z(I({ toggleAnnotator: t, isAnnotator: d })), void 0, !0)
]),
key: "7"
} : void 0
]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasPdf", "hasTable", "hasXls", "hasImg", "hasSvg", "hasFullscreen", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "tableDialog", "onGeneratePdf", "onGenerateImage", "style"])) : p("", !0),
(u(), v("svg", {
ref_key: "svgRef",
ref: ye,
xmlns: n(Xt),
class: Ke({ "vue-data-ui-fullscreen--on": ie.value, "vue-data-ui-fulscreen--off": !ie.value, animated: e.value.useCssAnimation }),
viewBox: `0 0 ${s.value.absoluteWidth} ${s.value.height}`,
style: j(`max-width:100%; overflow: visible; background:transparent;color:${e.value.style.chart.color}`)
}, [
Qe(n(mt)),
a.$slots["chart-background"] ? (u(), v("foreignObject", {
key: 0,
x: 0,
y: 0,
width: s.value.absoluteWidth,
height: s.value.height,
style: {
pointerEvents: "none"
}
}, [
_(a.$slots, "chart-background", {}, void 0, !0)
], 8, vo)) : p("", !0),
i("defs", null, [
i("radialGradient", {
id: `gradient_top${M.value}`
}, [
i("stop", {
offset: "0%",
"stop-color": n($)(e.value.style.chart.backgroundColor, 0)
}, null, 8, fo),
i("stop", {
offset: "100%",
"stop-color": e.value.style.chart.bar.color
}, null, 8, po)
], 8, ho),
i("radialGradient", {
id: `gradient_tube_top${M.value}`
}, [
i("stop", {
offset: "0%",
"stop-color": n($)(n(V)(e.value.style.chart.bar.color, 0.5), 80)
}, null, 8, ko),
i("stop", {
offset: "100%",
"stop-color": n($)(n(q)(e.value.style.chart.bar.color, 0.1), 80)
}, null, 8, yo)
], 8, go),
i("radialGradient", {
id: `gradient_left${M.value}`
}, [
i("stop", {
offset: "0%",
"stop-color": n($)(e.value.style.chart.backgroundColor, 0)
}, null, 8, bo),
i("stop", {
offset: "100%",
"stop-color": n($)(e.value.style.chart.bar.color, 20)
}, null, 8, _o)
], 8, $o),
i("radialGradient", {
id: `gradient_right${M.value}`
}, [
i("stop", {
offset: "0%",
"stop-color": n($)(e.value.style.chart.backgroundColor, 0)
}, null, 8, Co),
i("stop", {
offset: "100%",
"stop-color": n($)(e.value.style.chart.bar.color, 20)
}, null, 8, xo)
], 8, mo),
i("linearGradient", {
id: `gradient_tube_body${M.value}`,
x1: "0%",
y1: "0%",
x2: "100%",
y2: "0%"
}, [
i("stop", {
offset: "0%",
"stop-color": `${e.value.style.chart.bar.color}`
}, null, 8, Ao),
i("stop", {
offset: "10%",
"stop-color": n($)(n(q)(e.value.style.chart.bar.color, 0.7), 100)
}, null, 8, Do),
i("stop", {
offset: "25%",
"stop-color": n($)(n(q)(e.value.style.chart.bar.color, 0.5), 100)
}, null, 8, Fo),
i("stop", {
offset: "75%",
"stop-color": n($)(e.value.style.chart.bar.color, 80)
}, null, 8, Mo),
i("stop", {
offset: "100%",
"stop-color": n($)(n(V)(e.value.style.chart.bar.color, 0.7), 100)
}, null, 8, To)
], 8, wo)
]),
w.value ? (u(), v("defs", Po, [
(u(!0), v(D, null, F(A.value, (t) => (u(), v("radialGradient", {
id: `grad_top_${t.id}`
}, [
i("stop", {
offset: "0%",
"stop-color": n($)(n(V)(t.color, 0.5), 80)
}, null, 8, Bo),
i("stop", {
offset: "100%",
"stop-color": t.color
}, null, 8, Oo)
], 8, So))), 256)),
(u(!0), v(D, null, F(A.value, (t) => (u(), v("linearGradient", {
id: `grad_left_${t.id}`
}, [
i("stop", {
offset: "0%",
"stop-color": n($)(t.color, 80)
}, null, 8, jo),
i("stop", {
offset: "100%",
"stop-color": n($)(n(q)(t.color, 0.5), 100)
}, null, 8, zo)
], 8, Eo))), 256)),
(u(!0), v(D, null, F(A.value, (t) => (u(), v("linearGradient", {
id: `grad_right_${t.id}`
}, [
i("stop", {
offset: "2%",
"stop-color": n($)(n(V)(t.color, 0.5), 100)
}, null, 8, No),
i("stop", {
offset: "100%",
"stop-color": n($)(t.color, 80)
}, null, 8, Lo)
], 8, Io))), 256)),
i("linearGradient", {
x1: "0%",
y1: "0%",
x2: "0%",
y2: "100%",
id: `vertical_line_${M.value}`
}, [...l[10] || (l[10] = [
i("stop", {
offset: "0%",
"stop-color": "#FFFFFF"
}, null, -1),
i("stop", {
offset: "100%",
"stop-color": "#FFFFFF33"
}, null, -1)
])], 8, Wo)
])) : p("", !0),
e.value.style.chart.dataLabel.show && ![null, void 0].includes(n(B).percentage) && [null, void 0].includes(n(B).series) ? (u(), v("text", {
key: 2,
x: s.value.width / 2,
y: s.value.top - e.value.style.chart.dataLabel.fontSize / 2,
"font-size": e.value.style.chart.dataLabel.fontSize,
"font-weight": e.value.style.chart.dataLabel.bold ? "bold" : "normal",
fill: e.value.style.chart.dataLabel.color,
"text-anchor": "middle"
}, N(n(O)({
v: K.value,
s: "%",
r: e.value.style.chart.dataLabel.rounding
})), 9, Ro)) : p("", !0),
E.value ? (u(), v("g", {
key: 3,
role: "button",
tabindex: "0",
"aria-label": "Clear selection",
onClick: l[0] || (l[0] = (t) => {
E.value = !1, m.value = null;
}),
onKeydown: [
l[1] || (l[1] = et(tt((t) => {
E.value = !1, m.value = null;
}, ["prevent"]), ["enter"])),
l[2] || (l[2] = et(tt((t) => {
E.value = !1, m.value = null;
}, ["prevent"]), ["space"]))
],
onFocus: l[3] || (l[3] = (t) => le.value = !0),
onBlur: l[4] || (l[4] = (t) => le.value = !1),
onMouseenter: l[5] || (l[5] = (t) => le.value = !0),
onMouseleave: l[6] || (l[6] = (t) => le.value = !1),
class: "svg-btn",
"data-dom-to-png-ignore": "",
style: { cursor: "pointer", outline: "none" }
}, [
l[11] || (l[11] = i("title", null, "Clear selection", -1)),
i("rect", {
x: J.value - 12,
y: s.value.top - 24,
width: 24,
height: 24,
fill: "transparent",
"pointer-events": "all"
}, null, 8, Go),
i("circle", {
cx: J.value,
cy: s.value.top - 12,
r: "10",
fill: "none",
stroke: e.value.style.chart.color,
"stroke-width": "2",
"vector-effect": "non-scaling-stroke",
opacity: le.value ? 0.5 : 0
}, null, 8, Vo),
i("path", {
d: `M${J.value - 6},${s.value.top - 18} ${J.value + 6},${s.value.top - 6}`,
stroke: e.value.style.chart.color,
"stroke-linecap": "round",
"stroke-width": "2",
"vector-effect": "non-scaling-stroke"
}, null, 8, Uo),
i("path", {
d: `M${J.value + 6},${s.value.top - 18} ${J.value - 6},${s.value.top - 6}`,
stroke: e.value.style.chart.color,
"stroke-linecap": "round",
"stroke-width": "2",
"vector-effect": "non-scaling-stroke"
}, null, 8, Ho)
], 32)) : p("", !0),
!e.value.style.shape || e.value.style.shape === "bar" ? (u(), v("g", Xo, [
w.value ? p("", !0) : (u(), v("g", Zo, [
i("path", {
"stroke-dasharray": e.value.style.chart.box.strokeDasharray,
d: W.value.right,
stroke: e.value.style.chart.box.stroke,
"stroke-width": e.value.style.chart.box.strokeWidth,
"stroke-linejoin": "round",
"stroke-linecap": "round",
fill: "none"
}, null, 8, qo),
i("path", {
"stroke-dasharray": e.value.style.chart.box.strokeDasharray,
d: W.value.left,
stroke: e.value.style.chart.box.stroke,
"stroke-width": e.value.style.chart.box.strokeWidth,
"stroke-linejoin": "round",
"stroke-linecap": "round",
fill: "none"
}, null, 8, Yo),
i("path", {
"stroke-dasharray": e.value.style.chart.box.strokeDasharray,
d: W.value.side,
stroke: e.value.style.chart.box.stroke,
"stroke-width": e.value.style.chart.box.strokeWidth,
"stroke-linejoin": "round",
"stroke-linecap": "round",
fill: "none"
}, null, 8, Ko),
i("path", {
"stroke-dasharray": e.value.style.chart.box.strokeDasharray,
d: W.value.topSides,
stroke: e.value.style.chart.box.stroke,
"stroke-width": e.value.style.chart.box.strokeWidth,
"stroke-linejoin": "round",
"stroke-linecap": "round",
fill: "none"
}, null, 8, Jo)
])),
w.value ? p("", !0) : (u(), v("g", Qo, [
i("path", {
d: Q.value.right,
stroke: e.value.style.chart.bar.stroke,
"stroke-width": e.value.style.chart.bar.strokeWidth,
"stroke-linejoin": "round",
"stroke-linecap": "round",
fill: `url(#gradient_right${M.value})`
}, null, 8, el),
i("path", {
d: Q.value.left,
stroke: e.value.style.chart.bar.stroke,
"stroke-width": e.value.style.chart.bar.strokeWidth,
"stroke-linejoin": "round",
"stroke-linecap": "round",
fill: `url(#gradient_left${M.value})`
}, null, 8, tl),
i("path", {
d: Q.value.top,
stroke: e.value.style.chart.bar.stroke,
"stroke-width": e.value.style.chart.bar.strokeWidth,
"stroke-linejoin": "round",
"stroke-linecap": "round",
fill: `url(#gradient_top${M.value})`
}, null, 8, ol)
])),
w.value ? (u(), v("g", ll, [
(u(!0), v(D, null, F(A.value, (t, d) => (u(), v("g", {
style: j(`opacity:${m.value ? m.value === t.id ? 1 : 0.3 : 1}`),
class: "vue-ui-3d-bar-stack"
}, [
i("path", {
d: t.fill.right,
fill: `url(#grad_right_${t.id})`,
onMouseenter: (o) => T(t),
onClick: (o) => T(t, !0),
onMouseout: (o) => X(t)
}, null, 40, al),
i("path", {
d: t.fill.left,
fill: `url(#grad_left_${t.id})`,
onMouseenter: (o) => T(t),
onClick: (o) => T(t, !0),
onMouseout: (o) => X(t)
}, null, 40, sl),
i("path", {
d: t.fill.top,
fill: `url(#grad_top_${t.id})`,
onMouseenter: (o) => T(t),
onClick: (o) => T(t, !0),
onMouseout: (o) => X(t)
}, null, 40, nl),
i("path", {
d: t.fill.liningTop,
stroke: "#FFFFFF",
"stroke-width": "0.5",
"stroke-linecap": "round",
fill: "none",
onMouseenter: (o) => T(t),
onClick: (o) => T(t, !0),
onMouseout: (o) => X(t)
}, null, 40, rl),
i("path", {
d: `M ${t.fill.apexTop.x},${t.fill.apexTop.y} ${t.fill.apexBottom.x},${t.fill.apexBottom.y}`,
stroke: "#FFFFFF",
"stroke-width": "0.5",
"stroke-linecap": "round"
}, null, 8, ul)
], 4))), 256)),
(u(!0), v(D, null, F(A.value, (t, d) => (u(), v("g", null, [
d !== A.value.length - 1 ? (u(), v("path", {
key: 0,
d: t.fill.liningTopShade,
stroke: e.value.style.chart.bar.shadeColor,
"stroke-width": "0.5",
"stroke-linecap": "round",
fill: "none",
style: { "pointer-events": "none" }
}, null, 8, il)) : p("", !0)
]))), 256)),
(u(!0), v(D, null, F(A.value, (t, d) => (u(), v("g", {
style: j(`opacity:${m.value ? m.value === t.id ? 1 : 0 : t.proportion * 100 > e.value.style.chart.legend.hideUnderPercentage ? 1 : 0}`),
onClick: (o) => ne("selectDatapoint", t)
}, [
i("path", {
stroke: e.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, cl),
!t.fill.miniDonut || m.value ? (u(), v("circle", {
key: 0,
cx: t.fill.sidePointer.x2,
cy: t.fill.sidePointer.y,
r: 2,
fill: t.color,
stroke: e.value.style.chart.backgroundColor
}, null, 8, vl)) : p("", !0),
n(Y) ? (u(), v("rect", {
key: 1,
x: t.fill.sidePointer.xText,
y: t.fill.sidePointer.y - e.value.style.chart.legend.fontSize / 2,
width: s.value.width / 3,
height: e.value.style.chart.legend.fontSize,
fill: "#6A6A6A80",
rx: "3"
}, null, 8, hl)) : p("", !0),
n(Y) ? p("", !0) : (u(), v("foreignObject", {
key: 2,
x: t.fill.sidePointer.xText,
y: t.fill.sidePointer.y - e.value.style.chart.legend.fontSize,
width: s.value.absoluteWidth / 3,
height: e.value.style.chart.legend.fontSize * 2,
style: { overflow: "visible", position: "relative" }
}, [
e.value.style.chart.legend.showDefault ? (u(), v("div", {
key: 0,
style: j(`height: 100%; width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; align-items:center;justify-content: flex-start; font-size:${e.value.style.chart.legend.fontSize}px; text-align:left; line-height: ${e.value.style.chart.legend.fontSize}px; color:${e.value.style.chart.legend.color}; font-weight:${e.value.style.chart.legend.bold ? "bold" : "normal"}`)
}, N(n(fe)(
e.value.style.chart.dataLabel.formatter,
t.value,
`${t.name}: ${n(O)({ v: t.proportion * 100, s: "%", r: e.value.style.chart.legend.roundingPercentage })} (${n(O)({
p: e.value.style.chart.legend.prefix,
v: t.value,
s: e.value.style.chart.legend.suffix,
r: e.value.style.chart.legend.roundingValue
})})`,
{ datapoint: t, seriesIndex: d, type: "barDatapoint" }
)), 5)) : p("", !0),
_(a.$slots, "legend", we({ ref_for: !0 }, { datapoint: t, config: e.value, dataset: A.value }), void 0, !0)
], 8, fl)),
t.fill.donut && m.value === t.id ? (u(), v("g", pl, [
(u(!0), v(D, null, F(t.fill.donut, (o, c) => (u(), v("g", null, [
ee(o, t.fill.donut, !0) > 6 ? (u(), v("path", {
key: 0,
d: n(nt)(o, { x: o.cx, y: o.cy }, 0, 8, !1, !0, 10),
stroke: o.color,
class: "vue-ui-donut-arc-path",
"stroke-width": "0.5",
"stroke-linecap": "round",
"stroke-linejoin": "round",
fill: "none"
}, null, 8, gl)) : p("", !0)
]))), 256)),
(u(!0), v(D, null, F(t.fill.donut, (o, c) => (u(), v("path", {
class: "vue-ui-donut-arc-path",
d: o.arcSlice,
fill: `${o.color}`,
stroke: e.value.style.chart.backgroundColor,
"stroke-width": 1
}, null, 8, kl))), 256)),
(u(!0), v(D, null, F(t.fill.donut, (o, c) => (u(), v("g", null, [
ee(o, t.fill.donut, !0) > 6 ? (u(), v("g", yl, [
i("text", {
"text-anchor": n(U)(o, !0, 0).anchor,
x: n(U)(o, !0, 2).x,
y: n(pe)(o, 12, 12),
fill: e.value.style.chart.legend.color,
"font-size": e.value.style.chart.legend.fontSize / 1.5,
"font-weight": e.value.style.chart.legend.bold ? "bold" : "normal"
}, N(n(fe)(
e.value.style.chart.dataLabel.formatter,
o.value,
`${ee(o, t.fill.donut)} (${n(O)({
p: e.value.style.chart.legend.prefix,
v: o.value,
s: e.value.style.chart.legend.suffix,
r: e.value.style.chart.legend.roundingValue
})})`,
{ datapoint: o, seriesIndex: c, type: "donutDatapoint" }
)), 9, $l),
i("text", {
"text-anchor": n(U)(o).anchor,
x: n(U)(o, !0, 2).x,
y: n(pe)(o, 12, 12) + e.value.style.chart.legend.fontSize / 1.5,
fill: e.value.style.chart.legend.color,
"font-size": e.value.style.chart.legend.fontSize / 1.5,
"font-weight": e.value.style.chart.legend.bold ? "bold" : "normal"
}, N(o.name), 9, bl)
])) : p("", !0)
]))), 256))
])) : p("", !0),
t.fill.miniDonut && !m.value ? (u(), v("g", _l, [
(u(!0), v(D, null, F(t.fill.miniDonut, (o, c) => (u(), v("path", {
class: "vue-ui-donut-arc-path",
d: o.arcSlice,
fill: `${o.color}`,
stroke: e.value.style.chart.backgroundColor,
"stroke-width": 0.5
}, null, 8, ml))), 256))
])) : p("", !0)
], 12, dl))), 256))
])) : p("", !0)
])) : p("", !0),
e.value.style.shape === "tube" ? (u(), v("g", Cl, [
w.value ? p("", !0) : (u(), v("g", xl, [
i("path", {
"stroke-dasharray": e.value.style.chart.box.strokeDasharray,
d: W.value.tubeTop,
stroke: e.value.style.chart.box.stroke,
"stroke-width": e.value.style.chart.box.strokeWidth,
"stroke-linejoin": "round",
"stroke-linecap": "round",
fill: "none"
}, null, 8, wl),
i("path", {
"stroke-dasharray": e.value.style.chart.box.strokeDasharray,
d: W.value.tubeLeft,
stroke: e.value.style.chart.box.stroke,
"stroke-width": e.value.style.chart.box.strokeWidth,
"stroke-linejoin": "round",
"stroke-linecap": "round",
fill: "none"
}, null, 8, Al),
i("path", {
"stroke-dasharray": e.value.style.chart.box.strokeDasharray,
d: W.value.tubeRight,
stroke: e.value.style.chart.box.stroke,
"stroke-width": e.value.style.chart.box.strokeWidth,
"stroke-linejoin": "round",
"stroke-linecap": "round",
fill: "none"
}, null, 8, Dl),
i("path", {
"stroke-dasharray": e.value.style.chart.box.strokeDasharray,
d: W.value.tubeBottom,
stroke: e.value.style.chart.box.stroke,
"stroke-width": e.value.style.chart.box.strokeWidth,
"stroke-linejoin": "round",
"stroke-linecap": "round",
fill: "none"
}, null, 8, Fl),
i("path", {
d: Q.value.tubeTop,
stroke: e.value.style.chart.bar.stroke,
"stroke-width": e.value.style.chart.bar.strokeWidth,
"stroke-linejoin": "round",
"stroke-linecap": "round",
fill: `url(#gradient_tube_top${M.value})`
}, null, 8, Ml),
i("path", {
d: Q.value.tubeBody,
stroke: e.value.style.chart.bar.stroke,
"stroke-width": e.value.style.chart.bar.strokeWidth,
"stroke-linejoin": "round",
"stroke-linecap": "round",
fill: `url(#gradient_tube_body${M.value})`
}, null, 8, Tl),
i("path", {
d: Q.value.tubeTop,
stroke: "#FFFFFF",
"stroke-width": 0.5,
"stroke-linejoin": "round",
"stroke-linecap": "round",
fill: "none"
}, null, 8, Pl)
])),
w.value ? (u(), v("g", Sl, [
(u(!0), v(D, null, F(A.value, (t, d) => (u(), v("g", {
style: j(`opacity:${m.value ? m.value === t.id ? 1 : 0.3 : 1}`),
class: "vue-ui-3d-bar-stack",
onClick: (o) => ne("selectDatapoint", t)
}, [
i("defs", null, [
i("radialGradient", {
id: `gradient_tube_top_${t.id}`,
fx: "10%",
cy: "55%"
}, [
i("stop", {
offset: "0%",
"stop-color": n($)(n(V)(t.color, 0.5), 80)
}, null, 8, El),
i("stop", {
offset: "100%",
"stop-color": n($)(n(q)(t.color, 0.1), 80)
}, null, 8, jl)
], 8, Ol),
i("linearGradient", {
id: `gradient_tube_body_${t.id}`,
x1: "0%",
y1: "0%",
x2: "100%",
y2: "0%"
}, [
i("stop", {
offset: "0%",
"stop-color": `${t.color}`
}, null, 8, Il),
i("stop", {
offset: "10%",
"stop-color": n($)(n(q)(t.color, 0.7), 100)
}, null, 8, Nl),
i("stop", {
offset: "25%",
"stop-color": n($)(n(q)(t.color, 0.5), 100)
}, null, 8, Ll),
i("stop", {
offset: "75%",
"stop-color": n($)(t.color, 80)
}, null, 8, Wl),
i("stop", {
offset: "100%",
"stop-color": n($)(n(V)(t.color, 0.7), 100)
}, null, 8, Rl)
], 8, zl)
]),
i("path", {
onMouseenter: (o) => T(t),
onClick: (o) => T(t, !0),
onMouseout: (o) => X(t),
d: t.fill.tubeBody,
stroke: "#FFFFFF",
"stroke-width": 0.5,
"stroke-linejoin": "round",
"stroke-linecap": "round",
fill: `url(#gradient_tube_body_${t.id})`
}, null, 40, Gl),
d > 0 ? (u(), v("path", {
key: 0,
onMouseenter: (o) => T(t),
onClick: (o) => T(t, !0),
onMouseout: (o) => X(t),
d: t.fill.bottomTubeTop,
stroke: "#000000",
"stroke-width": 0.5,
"stroke-linejoin": "round",
"stroke-linecap": "round",
fill: "none"
}, null, 40, Vl)) : p("", !0),
i("path", {
onMouseenter: (o) => T(t),
onClick: (o) => T(t, !0),
onMouseout: (o) => X(t),
d: t.fill.tubeTop,
stroke: "#FFFFFF",
"stroke-width": 0.5,
"stroke-linejoin": "round",
"stroke-linecap": "round",
fill: `url(#gradient_tube_top_${t.id})`
}, null, 40, Ul)
], 12, Bl))), 256)),
(u(!0), v(D, null, F(A.value, (t, d) => (u(), v("g", {
style: j(`opacity:${m.value ? m.value === t.id ? 1 : 0 : t.proportion * 100 > e.value.style.chart.legend.hideUnderPercentage ? 1 : 0}`),
onClick: (o) => ne("selectDatapoint", t)
}, [
i("path", {
stroke: e.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, Xl),
!t.fill.miniDonut || m.value ? (u(), v("circle", {
key: 0,
cx: t.fill.sidePointer.x2,
cy: t.fill.sidePointer.y,
r: 2,
fill: t.color,
stroke: e.value.style.chart.backgroundColor
}, null, 8, Zl)) : p("", !0),
n(Y) ? (u(), v("rect", {
key: 1,
x: t.fill.sidePointer.xText,
y: t.fill.sidePointer.y - e.value.style.chart.legend.fontSize / 2,
width: s.value.width / 3,
height: e.value.style.chart.legend.fontSize,
fill: "#6A6A6A80",
rx: "3"
}, null, 8, ql)) : p("", !0),
n(Y) ? p("", !0) : (u(), v("foreignObject", {
key: 2,
x: t.fill.sidePointer.xText,
y: t.fill.sidePointer.y - e.value.style.chart.legend.fontSize,
width: s.value.absoluteWidth / 3,
height: e.value.style.chart.legend.fontSize * 2,
style: { overflow: "visible", position: "relative" }
}, [
e.value.style.chart.legend.showDefault ? (u(), v("div", {
key: 0,
style: j(`height: 100%; width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; align-items:center;justify-content: flex-start; font-size:${e.value.style.chart.legend.fontSize}px; text-align:left; line-height: ${e.value.style.chart.legend.fontSize}px; color:${e.value.style.chart.legend.color};font-weight:${e.value.style.chart.legend.bold ? "bold" : "normal"}`)
}, N(n(fe)(
e.value.style.chart.dataLabel.formatter,
t.value,
`${t.name}: ${n(O)({ v: t.proportion * 100, s: "%", r: e.value.style.chart.legend.roundingPercentage })} (${n(O)({
p: e.value.style.chart.legend.prefix,
v: t.value,
s: e.value.style.chart.legend.suffix,
r: e.value.style.chart.legend.roundingValue
})})`,
{ datapoint: t, seriesIndex: d, type: "barDatapoint" }
)), 5)) : p("", !0),
_(a.$slots, "legend", we({ ref_for: !0 }, { datapoint: t, config: e.value, dataset: A.value }), void 0, !0)
], 8, Yl)),
t.fill.donut && m.value === t.id ? (u(), v("g", Kl, [
(u(!0), v(D, null, F(t.fill.donut, (o, c) => (u(), v("g", null, [
ee(o, t.fill.donut, !0) > 6 ? (u(), v("path", {
key: 0,
d: n(nt)(o, { x: o.cx, y: o.cy }, 0, 8, !1, !0, 10),
stroke: o.color,
class: "vue-ui-donut-arc-path",
"stroke-width": "0.5",
"stroke-linecap": "round",
"stroke-linejoin": "round",
fill: "none"
}, null, 8, Jl)) : p("", !0)
]))), 256)),
(u(!0), v(D, null, F(t.fill.donut, (o, c) => (u(), v("path", {
class: "vue-ui-donut-arc-path",
d: o.arcSlice,
fill: `${o.color}`,
stroke: e.value.style.chart.backgroundColor,
"stroke-width": 1
}, null, 8, Ql))), 256)),
(u(!0), v(D, null, F(t.fill.donut, (o, c) => (u(), v("g", null, [
ee(o, t.fill.donut, !0) > 6 ? (u(), v("g", ea, [
i("text", {
"text-anchor": n(U)(o, !0, 0).anchor,
x: n(U)(o, !0, 2).x,
y: n(pe)(o, 12, 12),
fill: e.value.style.chart.legend.color,
"font-size": e.value.style.chart.legend.fontSize / 1.5,
"font-weight": e.value.style.chart.legend.bold ? "bold" : "normal"
}, N(n(fe)(
e.value.style.chart.dataLabel.formatter,
o.value,
`${ee(o, t.fill.donut)} (${n(O)({
p: e.value.style.chart.legend.prefix,
v: o.value,
s: e.value.style.chart.legend.suffix,
r: e.value.style.chart.legend.roundingValue
})})`,
{ datapoint: o, seriesIndex: c, type: "donutDatapoint" }
)), 9, ta),
i("text", {
"text-anchor": n(U)(o).anchor,
x: n(U)(o, !0, 2).x,
y: n(pe)(o, 12, 12) + e.value.style.chart.legend.fontSize / 1.5,
fill: e.value.style.chart.legend.color,
"font-size": e.value.style.chart.legend.fontSize / 1.5,
"font-weight": e.value.style.chart.legend.bold ? "bold" : "normal"
}, N(o.name), 9, oa)
])) : p("", !0)
]))), 256))
])) : p("", !0),
t.fill.miniDonut && !m.value ? (u(), v("g", la, [
(u(!0), v(D, null, F(t.fill.miniDonut, (o, c) => (u(), v("path", {
class: "vue-ui-donut-arc-path",
d: o.arcSlice,
fill: `${o.color}`,
stroke: e.value.style.chart.backgroundColor,
"stroke-width": 0.5
}, null, 8, aa))), 256))
])) : p("", !0)
], 12, Hl))), 256))
])) : p("", !0)
])) : p("", !0),
_(a.$slots, "svg", { svg: s.value }, void 0, !0)
], 14, co)),
a.$slots.watermark ? (u(), v("div", sa, [
_(a.$slots, "watermark", z(I({ isPrinting: n(Ee) || n(je) })), void 0, !0)
])) : p("", !0),
a.$slots.source ? (u(), v("div", {
key: 4,
ref_key: "source",
ref: Se,
dir: "auto"
}, [
_(a.$slots, "source", {}, void 0, !0)
], 512)) : p("", !0),
Fe.value && w.value && e.value.userOptions.buttons.table ? (u(), te(Lt(se.value.component), we({ key: 5 }, se.value.props, {
ref_key: "tableUnit",
ref: ae,
onClose: Ue
}), Je({
content: x(() => [
(u(), te(n($t), {
key: `table_${Te.value}`,
colNames: de.value.colNames,
head: de.value.head,
body: de.value.body,
config: de.value.config,
title: e.value.table.useDialog ? "" : se.value.title,
withCloseButton: !e.value.table.useDialog,
onClose: Ue
}, {
th: x(({ th: t }) => [
i("div", {
innerHTML: t,
style: { display: "flex", "align-items": "center" }
}, null, 8, na)
]),
td: x(({ td: t }) => [
ot(N(t.name || t), 1)
]),
_: 1
}, 8, ["colNames", "head", "body", "config", "title", "withCloseButton"]))
]),
_: 2
}, [
e.value.table.useDialog ? {
name: "title",
fn: x(() => [
ot(N(se.value.title), 1)
]),
key: "0"
} : void 0,
e.value.table.useDialog ? {
name: "actions",
fn: x(() => [
i("button", {
tabindex: "0",
class: "vue-ui-user-options-button",
onClick: l[7] || (l[7] = (t) => _e(e.value.userOptions.callbacks.csv))
}, [
Qe(n(kt), {
name: "excel",
stroke: se.value.props.color
}, null, 8, ["stroke"])
])
]),
key: "1"
} : void 0
]), 1040)) : p("", !0),
n(Y) ? (u(), te(eo, { key: 6 })) : p("", !0)
], 44, io));
}
}, ua = /* @__PURE__ */ uo(ra, [["__scopeId", "data-v-e8c0c9f3"]]), xa = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
__proto__: null,
default: ua
}, Symbol.toStringTag, { value: "Module" }));
export {
Ca as a,
xa as b,
ua as v
};