vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
1,238 lines • 62.7 kB
JavaScript
import { defineAsyncComponent as R, ref as i, shallowRef as pt, computed as v, onMounted as pl, toRefs as xl, nextTick as Be, watch as ie, watchEffect as kl, onBeforeUnmount as wl, createElementBlock as n, openBlock as u, unref as c, normalizeStyle as ee, normalizeClass as z, createBlock as B, createCommentVNode as d, createElementVNode as m, withCtx as y, renderSlot as A, normalizeProps as T, guardReactiveProps as I, createSlots as xt, createVNode as kt, Fragment as L, renderList as _, toDisplayString as k, Teleport as Dl, resolveDynamicComponent as Ll, mergeProps as _l, createTextVNode as Ee } from "vue";
import { c as wt, o as Dt, g as ce, l as Sl, t as Fl, i as Bl, j as de, a1 as Lt, k as El, m as $e, a7 as $l, E as _t, N as zl, a3 as ze, a as Te, d as ve, X as Tl, s as te, a8 as Il, $ as Ol, a4 as Pl, a5 as Nl, a6 as St, v as Rl, r as Vl, a9 as Ft, aa as Ml } from "./lib-2iaAPQ_c.js";
import { t as Bt, u as Ul } from "./useResponsive-DfdjqQps.js";
import { u as Hl, a as Ie } from "./useNestedProp-2p4Tjzc8.js";
import { u as Xl } from "./usePrinter-ChVMpU2f.js";
import { u as Wl, B as jl } from "./BaseScanner-BMpwQAfz.js";
import { u as Gl } from "./useSvgExport-ByUukOZt.js";
import { u as Yl } from "./useTimeLabels-DKoynYae.js";
import { u as ql } from "./useThemeCheck-DGJ31Vi5.js";
import { u as Jl } from "./useUserOptionState-BIvW1Kz7.js";
import { u as Kl } from "./useChartAccessibility-9icAAmYg.js";
import { u as Ql } from "./useTimeLabelCollider-CIsgDrl9.js";
import Zl from "./img-CqYIrJ8I.js";
import eo from "./Title-DSOZzIrU.js";
import to from "./Legend-D2xmnFPH.js";
import { S as lo } from "./Slicer-BCPOPoP2.js";
import { _ as oo } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const Et = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", zoom: { color: "#4A4A4A", highlightColor: "#9A9A9A" }, dialog: { backgroundColor: "#1A1A1A", color: "#CCCCCC", header: { backgroundColor: "#1A1A1A", color: "#CCCCCC" }, donutChart: { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", layout: { labels: { percentage: { color: "#CCCCCC" }, name: { color: "#CCCCCC" }, hollow: { total: { color: "#CCCCCC", value: { color: "#CCCCCC" } }, average: { color: "#CCCCCC", value: { color: "#CCCCCC" } } } } }, legend: { backgroundColor: "#1A1A1A", color: "#CCCCCC" }, title: { color: "#CCCCCC", subtitle: { color: "#757575" } }, tooltip: { backgroundColor: "#1A1A1A", backgroundOpacity: 70, color: "#CCCCCC", borderColor: "#5A5A5A" } } }, table: { th: { backgroundColor: "#1A1A1A", color: "#CCCCCC" }, td: { backgroundColor: "#1A1A1A", color: "#CCCCCC" } } } }, layout: { grid: { stroke: "#5A5A5A", yAxis: { dataLabels: { color: "#CCCCCC" } }, xAxis: { dataLabels: { color: "#CCCCCC" } } }, line: { stroke: "#4A4A4A" }, highlighter: { color: "#CCCCCC" }, dataLabels: { color: "#CCCCCC" } }, legend: { backgroundColor: "#1A1A1A", color: "#CCCCCC" }, title: { color: "#CCCCCC", subtitle: { color: "#757575" } } } }, table: { th: { backgroundColor: "#1A1A1A", color: "#CCCCCC" }, td: { backgroundColor: "#1A1A1A", color: "#CCCCCC" } } }, $t = { style: { chart: { backgroundColor: "#FFF8E1", color: "#424242", zoom: { color: "#5D4037", highlightColor: "#FF8A65" }, dialog: { backgroundColor: "#FFF8E1", color: "#424242", header: { backgroundColor: "##FFF8E1", color: "#424242" }, donutChart: { style: { chart: { backgroundColor: "##FFF8E1", color: "#424242", layout: { labels: { percentage: { color: "#424242" }, name: { color: "#424242" }, hollow: { total: { color: "#424242", value: { color: "#424242" } }, average: { color: "#424242", value: { color: "#424242" } } } } }, legend: { backgroundColor: "##FFF8E1", color: "#424242" }, title: { color: "#424242", subtitle: { color: "#757575" } }, tooltip: { backgroundColor: "#FFECB3", backgroundOpacity: 30, color: "#424242", borderColor: "#FF8A65" } } }, table: { th: { backgroundColor: "#1A1A1A", color: "#CCCCCC" }, td: { backgroundColor: "#1A1A1A", color: "#CCCCCC" } } } }, layout: { grid: { stroke: "#5D4037", showVerticalLines: !1, yAxis: { dataLabels: { color: "#424242" } }, xAxis: { dataLabels: { color: "#424242" } } }, line: { stroke: "#5D4037" }, highlighter: { color: "#424242" }, dataLabels: { color: "#424242" } }, legend: { backgroundColor: "#FFF8E1", color: "#424242" }, title: { color: "#424242", subtitle: { color: "#757575" } } } }, table: { th: { backgroundColor: "#FFF8E1", color: "#424242" }, td: { backgroundColor: "#FFF8E1", color: "#424242" } } }, zt = { style: { chart: { backgroundColor: "#1E1E1E", color: "#BDBDBD", zoom: { color: "#5D4037", highlightColor: "#FF8A65" }, dialog: { backgroundColor: "#1E1E1E", color: "#BDBDBD", header: { backgroundColor: "#1E1E1E", color: "#BDBDBD" }, donutChart: { style: { chart: { backgroundColor: "#1E1E1E", color: "#BDBDBD", layout: { labels: { percentage: { color: "#BDBDBD" }, name: { color: "#BDBDBD" }, hollow: { total: { color: "#BDBDBD", value: { color: "#BDBDBD" } }, average: { color: "#BDBDBD", value: { color: "#BDBDBD" } } } } }, legend: { backgroundColor: "#1E1E1E", color: "#BDBDBD" }, title: { color: "#FFF8E1", subtitle: { color: "#BDBDBD" } }, tooltip: { backgroundColor: "#1E1E1E", backgroundOpacity: 30, color: "#FFF8E1", borderColor: "#FF8A65" } } }, table: { th: { backgroundColor: "#1A1A1A", color: "#CCCCCC" }, td: { backgroundColor: "#1A1A1A", color: "#CCCCCC" } } } }, layout: { grid: { stroke: "#5D4037", showVerticalLines: !1, yAxis: { dataLabels: { color: "#BDBDBD" } }, xAxis: { dataLabels: { color: "#BDBDBD" } } }, line: { stroke: "#5D4037" }, highlighter: { color: "#FFF8E1" }, dataLabels: { color: "#BDBDBD" } }, legend: { backgroundColor: "#1E1E1E", color: "#BDBDBD" }, title: { color: "#FFF8E1", subtitle: { color: "#BDBDBD" } } } }, table: { th: { backgroundColor: "#1E1E1E", color: "#BDBDBD" }, td: { backgroundColor: "#1E1E1E", color: "#BDBDBD" } } }, Tt = { style: { chart: { backgroundColor: "#1A1A1A", color: "#99AA99", zoom: { color: "#5F6A5F", highlightColor: "#66CC66" }, dialog: { backgroundColor: "#1A1A1A", color: "#BDBDBD", header: { backgroundColor: "#1A1A1A", color: "#BDBDBD" }, donutChart: { style: { chart: { backgroundColor: "#1A1A1A", color: "#99AA99", layout: { labels: { percentage: { color: "#99AA99" }, name: { color: "#99AA99" }, hollow: { total: { color: "#99AA99", value: { color: "#99AA99" } }, average: { color: "#99AA99", value: { color: "#99AA99" } } } } }, legend: { backgroundColor: "#1A1A1A", color: "#99AA99" }, title: { color: "#66CC66", subtitle: { color: "#99AA99" } }, tooltip: { backgroundColor: "#2A2F2A", color: "#AACCAA", borderColor: "#66CC66" } } }, table: { th: { backgroundColor: "#1A1A1A", color: "#CCCCCC" }, td: { backgroundColor: "#1A1A1A", color: "#CCCCCC" } } } }, layout: { grid: { show: !1, stroke: "#5F6A5F", yAxis: { dataLabels: { color: "#AACCAA" } }, xAxis: { dataLabels: { color: "#AACCAA" } } }, line: { stroke: "#5F6A5F" }, highlighter: { color: "#66CC66" }, dataLabels: { color: "#AACCAA" } }, legend: { backgroundColor: "#1A1A1A", color: "#99AA99" }, title: { color: "#66CC66", subtitle: { color: "#99AA99" } } } }, table: { th: { backgroundColor: "#1A1A1A", color: "#99AA99" }, td: { backgroundColor: "#1A1A1A", color: "#AACCAA" } } }, It = { style: { chart: { backgroundColor: "#fbfafa", color: "#8A9892", zoom: { color: "#E0CFC3", highlightColor: "#8F837A" }, dialog: { backgroundColor: "#fbfafa", color: "#8A9892", header: { backgroundColor: "#fbfafa", color: "#8A9892" }, donutChart: { style: { chart: { backgroundColor: "#fbfafa", color: "#99AA99", layout: { labels: { percentage: { color: "#A0AC94" }, name: { color: "#A0AC94" }, hollow: { total: { color: "#A0AC94", value: { color: "#A0AC94" } }, average: { color: "#A0AC94", value: { color: "#A0AC94" } } } } }, legend: { backgroundColor: "#fbfafa", color: "#A0AC94" }, title: { color: "#8A9892", subtitle: { color: "#99AA99" } }, tooltip: { backgroundColor: "#fbfafa", color: "#8A9892" } } }, table: { th: { backgroundColor: "#1A1A1A", color: "#CCCCCC" }, td: { backgroundColor: "#1A1A1A", color: "#CCCCCC" } } } }, layout: { grid: { show: !1, yAxis: { dataLabels: { show: !1 } }, xAxis: { dataLabels: { show: !1 } } }, line: { stroke: "#DCDFE7" }, highlighter: { color: "#8F837A" }, dataLabels: { color: "#A0AC94" } }, legend: { backgroundColor: "#fbfafa", color: "#99AA99" }, title: { color: "#8A9892", subtitle: { color: "#99AA99" } } } }, table: { th: { backgroundColor: "#fbfafa", color: "#8F837A" }, td: { backgroundColor: "#fbfafa", color: "#8F837A" } } }, Ot = { style: { chart: { backgroundColor: "#f6f6fb", color: "#50606C", zoom: { color: "#92B0AB", highlightColor: "#50606C" }, dialog: { backgroundColor: "#f6f6fb", color: "#50606C", header: { backgroundColor: "#f6f6fb", color: "#50606C" }, donutChart: { style: { chart: { backgroundColor: "#f6f6fb", color: "#50606C", layout: { labels: { percentage: { color: "#61747E" }, name: { color: "#61747E" }, hollow: { total: { color: "#61747E", value: { color: "#61747E" } }, average: { color: "#61747E", value: { color: "#61747E" } } } } }, legend: { backgroundColor: "#f6f6fb", color: "#61747E" }, title: { color: "#50606C", subtitle: { color: "#718890" } }, tooltip: { backgroundColor: "#f6f6fb", color: "#50606C" } } }, table: { th: { backgroundColor: "#1A1A1A", color: "#CCCCCC" }, td: { backgroundColor: "#1A1A1A", color: "#CCCCCC" } } } }, layout: { grid: { stroke: "#BBC4D3", yAxis: { dataLabels: { color: "#61747E" } }, xAxis: { dataLabels: { color: "#61747E" } } }, line: { stroke: "#92B0AB" }, highlighter: { color: "#50606C" }, dataLabels: { color: "#61747E" } }, legend: { backgroundColor: "#f6f6fb", color: "#61747E" }, title: { color: "#50606C", subtitle: { color: "#718890" } } } }, table: { th: { backgroundColor: "#f6f6fb", color: "#50606C" }, td: { backgroundColor: "#f6f6fb", color: "#50606C" } } }, Pt = {
default: {},
dark: Et,
celebration: $t,
celebrationNight: zt,
hack: Tt,
zen: It,
concrete: Ot
}, fa = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
__proto__: null,
celebration: $t,
celebrationNight: zt,
concrete: Ot,
dark: Et,
default: Pt,
hack: Tt,
zen: It
}, Symbol.toStringTag, { value: "Module" })), ao = ["id"], ro = ["id"], uo = ["xmlns", "viewBox"], no = ["x", "y", "width", "height"], so = ["id"], io = ["stop-color"], co = ["stop-color"], vo = ["id"], ho = ["stop-color"], go = ["stop-color"], fo = ["stop-color"], yo = { key: 1 }, bo = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], Co = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], mo = { key: 0 }, Ao = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], po = ["font-size", "fill", "transform"], xo = ["x", "y", "font-size", "fill"], ko = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], wo = ["x", "y", "font-size", "fill", "font-weight"], Do = { key: 0 }, Lo = ["text-anchor", "font-size", "fill", "transform"], _o = ["text-anchor", "font-size", "fill", "transform", "innerHTML"], So = ["x1", "y1", "x2", "y2", "stroke", "stroke-width"], Fo = { key: 1 }, Bo = ["cx", "cy", "r", "fill"], Eo = { key: 0 }, $o = { key: 0 }, zo = ["d", "stroke"], To = ["text-anchor", "x", "y", "fill"], Io = ["cx", "cy", "r", "fill"], Oo = { key: 0 }, Po = ["cx", "cy", "fill"], No = { key: 1 }, Ro = ["d", "fill", "stroke"], Vo = { key: 2 }, Mo = ["d", "fill", "stroke"], Uo = ["x", "y", "font-size", "fill"], Ho = ["x", "y", "width", "height", "fill"], Xo = ["x", "y", "width", "height", "onMouseenter", "onMouseleave", "onClick"], Wo = {
key: 4,
class: "vue-data-ui-watermark"
}, jo = ["id"], Go = ["onClick"], Yo = { key: 0 }, qo = { key: 1 }, Jo = {
__name: "vue-ui-donut-evolution",
props: {
config: {
type: Object,
default() {
return {};
}
},
dataset: {
type: Array,
default() {
return [];
}
}
},
emits: ["selectLegend"],
setup(Nt, { expose: Rt, emit: Vt }) {
const Mt = R(() => import("./vue-ui-accordion-Dm0mNNKQ.js")), Ut = R(() => import("./BaseIcon-CbVDYv89.js")), Ht = R(() => import("./DataTable-BT_IeqPe.js")), Xt = R(() => import("./PackageVersion-Br3DrrFh.js")), Wt = R(() => import("./PenAndPaper-CvyKWfNl.js")), jt = R(() => import("./UserOptions-BQO4YFrn.js")), Gt = R(() => import("./vue-ui-donut-CN7x4Wrm.js").then((t) => t.a)), Oe = R(() => import("./BaseDraggableDialog-Z5LfhW87.js")), { vue_ui_donut_evolution: Yt } = Hl(), { isThemeValid: qt, warnInvalidTheme: Jt } = ql(), p = Nt, E = i(wt()), x = i([]), b = i(null), le = i(null), he = i(!1), V = i(null), O = i(null), Kt = i(null), Pe = i(0), Ne = i(0), Re = i(0), Ve = i(0), Me = i(0), ge = i(null), oe = i(null), fe = i(null), ye = i(null), Ue = i(!1), j = i(null), be = i(null), He = i(null), Xe = i(null), We = i(null), je = i(null), Ge = i(null), Ce = i(!1), G = pt(null), ae = pt(null), Ye = i(null), qe = Vt, Je = v(() => !!p.dataset && p.dataset.length);
pl(() => {
Ue.value = !0, Ke();
});
const re = v(() => !!e.value.debug);
function Ke() {
if (Dt(p.dataset) ? (ce({
componentName: "VueUiDonutEvolution",
type: "dataset",
debug: re.value
}), ue.value = !0) : p.dataset.length && p.dataset.forEach((t, o) => {
Sl({
datasetObject: t,
requiredAttributes: ["name", "values"]
}).forEach((l) => {
ce({
componentName: "VueUiDonutEvolution",
type: "datasetSerieAttribute",
property: l,
index: o,
debug: re.value
}), ue.value = !0;
});
}), Dt(p.dataset) || (ue.value = e.value.loading), setTimeout(() => {
Ce.value = !0;
}, 10), Ae(), e.value.responsive) {
const t = Bt(() => {
Ce.value = !1;
const { width: o, height: l } = Ul({
chart: O.value,
title: e.value.style.chart.title.text ? He.value : null,
legend: e.value.style.chart.legend.show ? Xe.value : null,
slicer: e.value.style.chart.zoom.show && Ze.value > 1 ? Ge.value : null,
source: We.value
});
requestAnimationFrame(() => {
X.value.width = o, X.value.height = l - 12, clearTimeout(Ye.value), Ye.value = setTimeout(() => {
Ce.value = !0;
}, 10);
});
});
G.value && (ae.value && G.value.unobserve(ae.value), G.value.disconnect()), G.value = new ResizeObserver(t), ae.value = O.value.parentNode, G.value.observe(ae.value);
}
}
const e = i(ke()), { loading: Qe, FINAL_DATASET: me, manualLoading: ue } = Wl({
...xl(p),
FINAL_CONFIG: e,
prepareConfig: ke,
callback: () => {
Promise.resolve().then(async () => {
await Ae();
});
},
skeletonDataset: [
{
name: "",
values: [1, 2, 3, 5, 8, 13],
color: "#AAAAAA"
},
{
name: "",
values: [1, 2, 3, 5, 8, 13],
color: "#BABABA"
},
{
name: "",
values: [1, 2, 3, 5, 8, 13],
color: "#CACACA"
}
],
skeletonConfig: Fl({
defaultConfig: e.value,
userConfig: {
useCssAnimation: !1,
table: { show: !1 },
userOptions: { show: !1 },
style: {
chart: {
backgroundColor: "#99999930",
layout: {
dataLabels: { show: !1 },
grid: {
stroke: "#6A6A6A",
axis: {
yLabel: "",
xLabel: ""
},
yAxis: {
scaleMin: null,
scaleMax: null,
autoScale: !1,
dataLabels: { show: !1 }
},
xAxis: {
dataLabels: { show: !1 }
}
},
line: {
stroke: "#CACACA60"
}
},
legend: {
backgroundColor: "transparent",
showValue: !1,
showPercentage: !1
},
zoom: {
show: !1,
startIndex: null,
endIndex: null
}
}
}
}
})
}), X = i({
width: e.value.style.chart.layout.width,
height: e.value.style.chart.layout.height
}), Ze = v(() => Math.max(...me.value.map((t) => t.values.length))), h = i({
start: 0,
end: Ze.value
});
function et() {
Ae();
}
async function Ae() {
await Be(), await Be();
const { startIndex: t, endIndex: o } = e.value.style.chart.zoom, l = je.value;
h.value = { start: 0, max: F.value }, (t != null || o != null) && l ? (t != null ? l.setStartValue(t) : (h.value.start = 0, l.setStartValue(0)), o != null ? l.setEndValue(Qt(o + 1)) : (h.value.end = F.value, l.setEndValue(F.value))) : (h.value = {
start: 0,
end: F.value
}, Ne.value += 1);
}
function Qt(t) {
const o = F.value;
return t > o ? o : t < 0 || e.value.style.chart.zoom.startIndex !== null && t < e.value.style.chart.zoom.startIndex ? e.value.style.chart.zoom.startIndex !== null ? e.value.style.chart.zoom.startIndex + 1 : 1 : t;
}
const { userOptionsVisible: pe, setUserOptionsVisibility: tt, keepUserOptionState: lt } = Jl({ config: e.value }), { svgRef: xe } = Kl({ config: e.value.style.chart.title });
function ke() {
const t = Ie({
userConfig: p.config,
defaultConfig: Yt
});
let o = {};
const l = t.theme;
if (l)
if (!qt.value(t))
Jt(t), o = t;
else {
const r = Ie({
userConfig: Pt[l] || p.config,
defaultConfig: t
});
o = {
...Ie({
userConfig: p.config,
defaultConfig: r
}),
customPalette: t.customPalette ? t.customPalette : Bl[l] || de
};
}
else
o = t;
return p.config && Lt(p.config, "style.chart.zoom.startIndex") ? o.style.chart.zoom.startIndex = p.config.style.chart.zoom.startIndex : o.style.chart.zoom.startIndex = null, p.config && Lt(p.config, "style.chart.zoom.endIndex") ? o.style.chart.zoom.endIndex = p.config.style.chart.zoom.endIndex : o.style.chart.zoom.endIndex = null, o;
}
ie(() => p.config, (t) => {
Qe.value || (e.value = ke()), pe.value = !e.value.userOptions.showOnChartHover, Ke(), Re.value += 1, Ve.value += 1, Me.value += 1, M.value.showTable = e.value.table.show;
}, { deep: !0 }), ie(() => p.dataset, (t) => {
Array.isArray(t) && t.length > 0 && (ue.value = !1), et();
}, { deep: !0 });
const { isPrinting: ot, isImaging: at, generatePdf: rt, generateImage: ut } = Xl({
elementId: E.value,
fileName: e.value.style.chart.title.text || "vue-ui-donut-evolution",
options: e.value.userOptions.print
}), Zt = v(() => e.value.userOptions.show && !e.value.style.chart.title.text), el = v(() => El(e.value.customPalette)), M = i({
showTable: e.value.table.show
});
ie(e, () => {
M.value = {
showTable: e.value.table.show
};
}, { immediate: !0 });
const U = v(() => ({
top: e.value.style.chart.layout.padding.top,
right: e.value.style.chart.layout.padding.right,
bottom: e.value.style.chart.layout.padding.bottom,
left: e.value.style.chart.layout.padding.left
}));
function tl() {
let t = 0;
ge.value && (t = Array.from(ge.value.querySelectorAll("text")).reduce((a, f) => {
const g = f.getComputedTextLength();
return g > a ? g : a;
}, 0));
const o = ye.value ? ye.value.getBoundingClientRect().width + e.value.style.chart.layout.grid.axis.yLabelOffsetX + e.value.style.chart.layout.grid.axis.fontSize : 0;
return t + o + 5;
}
const we = i(0), ll = Bt((t) => {
we.value = t;
}, 100);
kl((t) => {
const o = oe.value;
if (!o) return;
const l = new ResizeObserver((r) => {
ll(r[0].contentRect.height);
});
l.observe(o), t(() => l.disconnect());
}), wl(() => {
we.value = 0;
});
const nt = v(() => {
let t = 0;
fe.value && (t = fe.value.getBBox().height);
let o = 0;
return oe.value && (o = we.value), t + o + e.value.style.chart.layout.grid.axis.fontSize + e.value.style.chart.layout.grid.xAxis.dataLabels.offsetY;
}), s = v(() => {
const t = tl(), o = e.value.style.chart.layout.dataLabels.fontSize * 3, l = X.value.width, r = X.value.height, a = U.value.left + t, f = l - U.value.right, g = l - a - U.value.right, C = r - U.value.top - U.value.bottom - o - nt.value, N = U.value.top + o, Q = r - U.value.bottom - nt.value;
return {
top: N,
left: a,
right: f,
bottom: Q,
absoluteHeight: r,
absoluteWidth: l,
centerX: a + Math.max(10, g) / 2,
centerY: N + Math.max(10, C) / 2,
width: Math.max(10, g),
height: Math.max(10, C)
};
}), $ = v(() => (me.value.forEach((t, o) => {
[null, void 0].includes(t.name) && ce({
componentName: "VueUiDonutEvolution",
type: "datasetSerieAttribute",
property: "name",
index: o,
debug: re.value
}), [null, void 0].includes(t.values) && ce({
componentName: "VueUiDonutEvolution",
type: "datasetSerieAttribute",
property: "values",
index: o,
debug: re.value
});
}), me.value.map((t, o) => ({
...t,
values: $l(t.values),
color: $e(t.color) || el.value[o] || de[o] || de[o % de.length],
length: (t.values || []).length,
uid: wt()
})))), Y = v(() => $.value.filter((t) => !x.value.includes(t.uid)).map((t) => ({
...t,
values: t.values.filter((o, l) => l >= h.value.start && l <= h.value.end)
}))), F = v(() => Math.max(...Y.value.map((t) => t.length))), D = v(() => Yl({
values: e.value.style.chart.layout.grid.xAxis.dataLabels.values,
maxDatapoints: F.value,
formatter: e.value.style.chart.layout.grid.xAxis.dataLabels.datetimeFormatter,
start: h.value.start,
end: h.value.end
})), w = v(() => s.value.width / (h.value.end - h.value.start)), ne = v(() => {
const t = [];
for (let o = 0; o < h.value.end - h.value.start; o += 1) {
const l = Y.value.map((C) => C.values[o] ?? null), r = l.filter((C) => [void 0, null].includes(C)).length === l.length, a = l.reduce((C, N) => C + N, 0), f = l.map((C) => C / a), g = s.value.left + w.value * o + w.value / 2;
t.push({
index: o,
percentages: f,
subtotal: r || a < 0 ? null : a,
values: l,
x: g
});
}
return t;
}), De = v(() => {
const t = Math.max(...ne.value.map((a) => a.subtotal).filter((a) => _t(a))) ?? 1, o = Math.min(...ne.value.map((a) => a.subtotal).filter((a) => _t(a))) ?? 0;
let l = Math.max(e.value.style.chart.layout.grid.yAxis.scaleMax ?? 0, t), r;
return e.value.style.chart.layout.grid.yAxis.scaleMin != null ? r = Math.min(o, e.value.style.chart.layout.grid.yAxis.scaleMin) : r = 0, e.value.style.chart.layout.grid.yAxis.autoScale && (r = o, l = t), r === l && (r = l / 2, l *= 1.5), {
max: l,
min: r
};
}), P = v(() => {
const t = ne.value.length === 1 ? De.value.max * 2 : De.value.max;
return zl(De.value.min, t, e.value.style.chart.layout.grid.yAxis.dataLabels.steps);
});
function st(t) {
return (t - P.value.min) / (P.value.max - P.value.min);
}
const ol = v(() => P.value.ticks.map((t) => ({
y: s.value.bottom - s.value.height * st(t),
value: t
}))), S = v(() => {
const t = ne.value, o = Math.max(...t.map((l) => l.subtotal));
return t.length === 1 && o * 2, t.map((l, r) => {
const a = Math.min(s.value.width / 24, w.value / 2 * 0.7), f = a > s.value.width / 16 ? s.value.width / 16 : a, g = b.value === l.index ? s.value.width / 16 : f, C = t.length > 4 ? a * 2 : a * 2 > w.value / 2 * 0.7 ? w.value / 2 * 0.7 : a * 2, N = s.value.bottom - s.value.height * st(l.subtotal), Q = Y.value.map((Z) => ({
color: Z.color,
name: Z.name,
value: Z.values[r] ?? 0
})).toSorted((Z, Al) => Al.value - Z.value);
return {
...l,
y: N,
radius: f,
activeRadius: g,
hoverRadius: C,
donut: ze({ series: Q }, l.x, N, f, f, 1.99999, 2, 1, 360, 105.25, f / 2),
donutHover: ze({ series: Q }, l.x, N, C, C, 1.99999, 2, 1, 360, 105.25, C / 2),
donutFocus: ze({ series: Q }, s.value.centerX, s.value.centerY, s.value.height / 3.6, s.value.height / 3.6, 1.99999, 2, 1, 360, 105.25, s.value.height / 6)
};
});
});
function it(t, o, l) {
return Te(
e.value.style.chart.layout.dataLabels.formatter,
t,
ve({
p: e.value.style.chart.layout.dataLabels.prefix,
v: t,
s: e.value.style.chart.layout.dataLabels.suffix,
r: e.value.style.chart.layout.dataLabels.rounding
}),
{ datapoint: o, index: l }
);
}
function al(t, o) {
return isNaN(t.value / Ft(o, "value")) ? 0 : (t.value / Ft(o, "value") * 100).toFixed(0) + "%";
}
function ct(t) {
b.value = null, le.value = null, e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: t, seriesIndex: t.seriesIndex + h.value.start });
}
function rl(t) {
e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: t, seriesIndex: t.index + h.value.start }), b.value = t.index, le.value = t;
}
const q = i(null);
function dt(t, o) {
e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: t, seriesIndex: t.index + h.value.start }), !(!t.subtotal || !e.value.style.chart.dialog.show) && (le.value = null, b.value = null, he.value = !0, V.value = t, cl(t), [null, void 0].includes(o) || (q.value = o));
}
const Le = v(() => $.value.map((t, o) => ({
name: t.name,
value: t.values.slice(h.value.start, h.value.end).reduce((l, r) => l + r, 0),
shape: "circle",
uid: t.uid,
color: t.color
})).sort((t, o) => o.value - t.value).map((t, o) => ({
...t,
opacity: x.value.includes(t.uid) ? 0.5 : 1,
segregate: () => J(t.uid),
isSegregated: x.value.includes(t.uid),
display: `${t.name}${e.value.style.chart.legend.showPercentage || e.value.style.chart.legend.showValue ? ": " : ""}${e.value.style.chart.legend.showValue ? Te(
e.value.style.chart.layout.dataLabels.formatter,
t.value,
ve({
p: e.value.style.chart.layout.dataLabels.prefix,
v: t.value,
s: e.value.style.chart.layout.dataLabels.suffix,
r: e.value.style.chart.legend.roundingValue
}),
{ datapoint: t, seriesIndex: o }
) : ""}${e.value.style.chart.legend.showPercentage ? x.value.includes(t.uid) ? `${e.value.style.chart.legend.showValue ? " (" : ""}- %${e.value.style.chart.legend.showValue ? ")" : ""}` : `${e.value.style.chart.legend.showValue ? " (" : ""}${isNaN(t.value / vt.value) ? "-" : ve({
v: t.value / vt.value * 100,
s: "%",
r: e.value.style.chart.legend.roundingPercentage
})}${e.value.style.chart.legend.showValue ? ")" : ""}` : ""}`
}))), vt = v(() => S.value.map((t) => t.subtotal).reduce((t, o) => t + o, 0)), ul = v(() => ({
cy: "donut-div-legend",
backgroundColor: e.value.style.chart.legend.backgroundColor,
color: e.value.style.chart.legend.color,
fontSize: e.value.style.chart.legend.fontSize,
paddingBottom: 12,
fontWeight: e.value.style.chart.legend.bold ? "bold" : ""
}));
function J(t) {
if (x.value.includes(t))
x.value = x.value.filter((o) => o !== t), qe("selectLegend", Y.value);
else {
if (x.value.length === $.value.length - 1) return;
x.value.push(t), qe("selectLegend", Y.value);
}
V.value && dt(S.value.find((o, l) => l === q.value));
}
function ht(t) {
if (!$.value.length)
return e.value.debug && console.warn("VueUiDonutEvolution - There are no series to show."), null;
const o = $.value.find((l) => l.name === t);
return o || (e.value.debug && console.warn(`VueUiDonutEvolution - Series name not found "${t}"`), null);
}
function nl(t) {
const o = ht(t);
o !== null && x.value.includes(o.uid) && J(o.uid);
}
function sl(t) {
const o = ht(t);
o !== null && (x.value.includes(o.uid) || J(o.uid));
}
const W = v(() => {
const t = [""].concat($.value.filter((a) => !x.value.includes(a.uid)).map((a) => ({
name: a.name,
color: a.color
}))).concat(["Σ"]);
let o = [];
for (let a = 0; a < F.value; a += 1) {
const f = $.value.filter((g) => !x.value.includes(g.uid)).map((g) => g.values[a] ?? 0).reduce((g, C) => g + C, 0);
o.push([D.value[a] ? D.value[a].text : "-"].concat($.value.filter((g) => !x.value.includes(g.uid)).map((g) => ({
value: g.values[a] ?? 0,
percentage: g.values[a] ? g.values[a] / f * 100 : 0
}))).concat([`${e.value.style.chart.layout.dataLabels.prefix}${Number(f.toFixed(e.value.table.td.roundingValue))}${e.value.style.chart.layout.dataLabels.suffix}`]));
}
const l = {
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
}, r = [
e.value.table.columnNames.period
].concat($.value.filter((a) => !x.value.includes(a.uid)).map((a) => a.name)).concat(e.value.table.columnNames.total);
return { head: t, body: o, config: l, colNames: r };
});
function il() {
return $.value;
}
function _e(t = null) {
Be(() => {
const o = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [""]], l = [...W.value.head.map((g) => g.name ?? g)], r = [...W.value.body.map((g) => g.map((C) => C.value ?? C))], a = o.concat([l]).concat(r), f = Rl(a);
t ? t(f) : Vl({ csvContent: f, title: e.value.style.chart.title.text || "vue-ui-donut-evolution" });
});
}
const H = i(!1);
function gt(t) {
H.value = t, Pe.value += 1;
}
function ft() {
M.value.showTable = !M.value.showTable;
}
const se = i(!1);
function Se() {
se.value = !se.value;
}
function yt(t) {
return t.proportion * 100 > e.value.style.chart.donuts.hover.hideLabelsUnderValue;
}
const bt = i([]), Ct = i({}), Fe = i(null);
function cl(t) {
bt.value = t.donut.map((o) => ({
name: o.name,
values: [o.value],
color: o.color
})), Ct.value = Ml({
...e.value.style.chart.dialog.donutChart,
responsive: !0,
theme: e.value.theme
}), Fe.value && Fe.value.open();
}
async function dl({ scale: t = 2 } = {}) {
if (!O.value) return;
const { width: o, height: l } = O.value.getBoundingClientRect(), r = o / l, { imageUri: a, base64: f } = await Zl({ domElement: O.value, base64: !0, img: !0, scale: t });
return {
imageUri: a,
base64: f,
title: e.value.style.chart.title.text,
width: o,
height: l,
aspectRatio: r
};
}
const vl = v(() => X.value.width), hl = v(() => X.value.height);
Ql({
timeLabelsEls: oe,
timeLabels: D,
slicer: h,
configRef: e,
rotationPath: ["style", "chart", "layout", "grid", "xAxis", "dataLabels", "rotation"],
autoRotatePath: ["style", "chart", "layout", "grid", "xAxis", "dataLabels", "autoRotate", "enable"],
isAutoSize: !1,
width: vl,
height: hl,
rotation: e.value.style.chart.layout.grid.xAxis.dataLabels.autoRotate.angle
});
const K = v(() => {
const t = e.value.table.useDialog && !e.value.table.show, o = M.value.showTable;
return {
component: t ? Oe : Mt,
title: `${e.value.style.chart.title.text}${e.value.style.chart.title.subtitle.text ? `: ${e.value.style.chart.title.subtitle.text}` : ""}`,
props: t ? {
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: H.value,
fullscreenParent: O.value,
forcedWidth: Math.min(800, window.innerWidth * 0.8)
} : {
hideDetails: !0,
config: {
open: o,
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
}
}
}
};
});
ie(() => M.value.showTable, (t) => {
e.value.table.show || (t && e.value.table.useDialog && j.value ? j.value.open() : "close" in j.value && j.value.close());
});
function mt() {
M.value.showTable = !1, be.value && be.value.setTableIconState(!1);
}
const gl = v(() => Le.value.map((t) => ({
...t,
name: t.display
}))), fl = v(() => e.value.style.chart.backgroundColor), yl = v(() => e.value.style.chart.legend), bl = v(() => e.value.style.chart.title), { exportSvg: Cl, getSvg: ml } = Gl({
svg: xe,
title: bl,
legend: yl,
legendItems: gl,
backgroundColor: fl
});
async function At({ isCb: t }) {
if (t) {
const { blob: o, url: l, text: r, dataUrl: a } = await ml();
e.value.userOptions.callbacks.svg({ blob: o, url: l, text: r, dataUrl: a });
} else
Cl();
}
return Rt({
getData: il,
getImage: dl,
generatePdf: rt,
generateCsv: _e,
generateImage: ut,
generateSvg: At,
hideSeries: sl,
showSeries: nl,
toggleTable: ft,
toggleAnnotator: Se,
toggleFullscreen: gt
}), (t, o) => (u(), n("div", {
ref_key: "donutEvolutionChart",
ref: O,
class: z(`vue-data-ui-component vue-ui-donut-evolution ${H.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${e.value.useCssAnimation ? "" : "vue-ui-dna"}`),
style: ee(`font-family:${e.value.style.fontFamily};width:100%; text-align:center;background:${e.value.style.chart.backgroundColor}`),
id: E.value,
onMouseenter: o[5] || (o[5] = () => c(tt)(!0)),
onMouseleave: o[6] || (o[6] = () => c(tt)(!1))
}, [
e.value.userOptions.buttons.annotator ? (u(), B(c(Wt), {
key: 0,
svgRef: c(xe),
backgroundColor: e.value.style.chart.backgroundColor,
color: e.value.style.chart.color,
active: se.value,
onClose: Se
}, {
"annotator-action-close": y(() => [
A(t.$slots, "annotator-action-close", {}, void 0, !0)
]),
"annotator-action-color": y(({ color: l }) => [
A(t.$slots, "annotator-action-color", T(I({ color: l })), void 0, !0)
]),
"annotator-action-draw": y(({ mode: l }) => [
A(t.$slots, "annotator-action-draw", T(I({ mode: l })), void 0, !0)
]),
"annotator-action-undo": y(({ disabled: l }) => [
A(t.$slots, "annotator-action-undo", T(I({ disabled: l })), void 0, !0)
]),
"annotator-action-redo": y(({ disabled: l }) => [
A(t.$slots, "annotator-action-redo", T(I({ disabled: l })), void 0, !0)
]),
"annotator-action-delete": y(({ disabled: l }) => [
A(t.$slots, "annotator-action-delete", T(I({ disabled: l })), void 0, !0)
]),
_: 3
}, 8, ["svgRef", "backgroundColor", "color", "active"])) : d("", !0),
Zt.value ? (u(), n("div", {
key: 1,
ref_key: "noTitle",
ref: Kt,
class: "vue-data-ui-no-title-space",
style: "height:36px; width: 100%;background:transparent"
}, null, 512)) : d("", !0),
e.value.style.chart.title.text ? (u(), n("div", {
key: 2,
ref_key: "chartTitle",
ref: He,
style: "width:100%;background:transparent;padding-bottom:24px",
onMouseleave: ct
}, [
(u(), B(eo, {
key: `title_${Re.value}`,
config: {
title: {
cy: "donut-evolution-div-title",
...e.value.style.chart.title
},
subtitle: {
cy: "donut-evolution-div-subtitle",
...e.value.style.chart.title.subtitle
}
}
}, null, 8, ["config"]))
], 544)) : d("", !0),
m("div", {
id: `legend-top-${E.value}`
}, null, 8, ro),
e.value.userOptions.show && Je.value && (c(lt) || c(pe)) ? (u(), B(c(jt), {
ref_key: "userOptionsRef",
ref: be,
key: `user_options_${Pe.value}`,
backgroundColor: e.value.style.chart.backgroundColor,
color: e.value.style.chart.color,
isPrinting: c(ot),
isImaging: c(at),
uid: E.value,
hasPdf: e.value.userOptions.buttons.pdf,
hasImg: e.value.userOptions.buttons.img,
hasSvg: e.value.userOptions.buttons.svg,
hasXls: e.value.userOptions.buttons.csv,
hasTable: e.value.userOptions.buttons.table,
hasFullscreen: e.value.userOptions.buttons.fullscreen,
isFullscreen: H.value,
titles: { ...e.value.userOptions.buttonTitles },
chartElement: O.value,
position: e.value.userOptions.position,
hasAnnotator: e.value.userOptions.buttons.annotator,
isAnnotation: se.value,
callbacks: e.value.userOptions.callbacks,
printScale: e.value.userOptions.print.scale,
tableDialog: e.value.table.useDialog,
onToggleFullscreen: gt,
onGeneratePdf: c(rt),
onGenerateCsv: _e,
onGenerateImage: c(ut),
onGenerateSvg: At,
onToggleTable: ft,
onToggleAnnotator: Se,
style: ee({
visibility: c(lt) ? c(pe) ? "visible" : "hidden" : "visible"
})
}, xt({ _: 2 }, [
t.$slots.menuIcon ? {
name: "menuIcon",
fn: y(({ isOpen: l, color: r }) => [
A(t.$slots, "menuIcon", T(I({ isOpen: l, color: r })), void 0, !0)
]),
key: "0"
} : void 0,
t.$slots.optionPdf ? {
name: "optionPdf",
fn: y(() => [
A(t.$slots, "optionPdf", {}, void 0, !0)
]),
key: "1"
} : void 0,
t.$slots.optionCsv ? {
name: "optionCsv",
fn: y(() => [
A(t.$slots, "optionCsv", {}, void 0, !0)
]),
key: "2"
} : void 0,
t.$slots.optionImg ? {
name: "optionImg",
fn: y(() => [
A(t.$slots, "optionImg", {}, void 0, !0)
]),
key: "3"
} : void 0,
t.$slots.optionSvg ? {
name: "optionSvg",
fn: y(() => [
A(t.$slots, "optionSvg", {}, void 0, !0)
]),
key: "4"
} : void 0,
t.$slots.optionTable ? {
name: "optionTable",
fn: y(() => [
A(t.$slots, "optionTable", {}, void 0, !0)
]),
key: "5"
} : void 0,
t.$slots.optionFullscreen ? {
name: "optionFullscreen",
fn: y(({ toggleFullscreen: l, isFullscreen: r }) => [
A(t.$slots, "optionFullscreen", T(I({ toggleFullscreen: l, isFullscreen: r })), void 0, !0)
]),
key: "6"
} : void 0,
t.$slots.optionAnnotator ? {
name: "optionAnnotator",
fn: y(({ toggleAnnotator: l, isAnnotator: r }) => [
A(t.$slots, "optionAnnotator", T(I({ toggleAnnotator: l, isAnnotator: r })), void 0, !0)
]),
key: "7"
} : void 0
]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasPdf", "hasImg", "hasSvg", "hasXls", "hasTable", "hasFullscreen", "isFullscreen", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "tableDialog", "onGeneratePdf", "onGenerateImage", "style"])) : d("", !0),
(u(), n("svg", {
ref_key: "svgRef",
ref: xe,
xmlns: c(Tl),
class: z({ "vue-data-ui-fullscreen--on": H.value, "vue-data-ui-fulscreen--off": !H.value }),
viewBox: `0 0 ${s.value.absoluteWidth} ${s.value.absoluteHeight}`,
style: ee(`max-width:100%; overflow: visible; background:transparent;color:${e.value.style.chart.color};`)
}, [
kt(c(Xt)),
t.$slots["chart-background"] ? (u(), n("foreignObject", {
key: 0,
x: s.value.left,
y: s.value.top,
width: s.value.width,
height: s.value.height,
style: {
pointerEvents: "none"
}
}, [
A(t.$slots, "chart-background", {}, void 0, !0)
], 8, no)) : d("", !0),
m("defs", null, [
m("linearGradient", {
id: `hover_${E.value}`,
x1: "0%",
y1: "0%",
x2: "0%",
y2: "100%"
}, [
m("stop", {
offset: "0%",
"stop-color": c(te)(e.value.style.chart.backgroundColor, e.value.style.chart.layout.highlighter.opacity)
}, null, 8, io),
m("stop", {
offset: "100%",
"stop-color": c(te)(e.value.style.chart.layout.highlighter.color, e.value.style.chart.layout.highlighter.opacity)
}, null, 8, co)
], 8, so),
m("radialGradient", {
id: `focus_${E.value}`
}, [
m("stop", {
offset: "0%",
"stop-color": c(te)(c($e)(e.value.style.chart.backgroundColor), 0)
}, null, 8, ho),
m("stop", {
offset: "77%",
"stop-color": c(te)("#FFFFFF", 30)
}, null, 8, go),
m("stop", {
offset: "100%",
"stop-color": c(te)(c($e)(e.value.style.chart.backgroundColor), 0)
}, null, 8, fo)
], 8, vo)
]),
e.value.style.chart.layout.grid.show ? (u(), n("g", yo, [
m("line", {
x1: s.value.left,
x2: s.value.left,
y1: s.value.top,
y2: s.value.top + s.value.height,
stroke: e.value.style.chart.layout.grid.stroke,
"stroke-width": e.value.style.chart.layout.grid.strokeWidth,
"stroke-linecap": "round"
}, null, 8, bo),
m("line", {
x1: s.value.left,
x2: s.value.right,
y1: s.value.bottom,
y2: s.value.bottom,
stroke: e.value.style.chart.layout.grid.stroke,
"stroke-width": e.value.style.chart.layout.grid.strokeWidth,
"stroke-linecap": "round"
}, null, 8, Co),
e.value.style.chart.layout.grid.showVerticalLines ? (u(), n("g", mo, [
(u(!0), n(L, null, _(h.value.end - h.value.start, (l, r) => (u(), n("line", {
x1: s.value.left + (r + 1) * w.value,
x2: s.value.left + (r + 1) * w.value,
y1: s.value.top,
y2: s.value.bottom,
stroke: e.value.style.chart.layout.grid.stroke,
"stroke-width": e.value.style.chart.layout.grid.strokeWidth,
"stroke-linecap": "round"
}, null, 8, Ao))), 256))
])) : d("", !0)
])) : d("", !0),
m("g", null, [
e.value.style.chart.layout.grid.axis.yLabel ? (u(), n("text", {
key: 0,
ref_key: "yAxisLabel",
ref: ye,
"font-size": e.value.style.chart.layout.grid.axis.fontSize,
fill: e.value.style.chart.layout.grid.axis.color,
transform: `translate(${e.value.style.chart.layout.grid.axis.fontSize}, ${s.value.top + s.value.height / 2}) rotate(-90)`,
"text-anchor": "middle",
style: { transition: "none" }
}, k(e.value.style.chart.layout.grid.axis.yLabel), 9, po)) : d("", !0),
e.value.style.chart.layout.grid.axis.xLabel ? (u(), n("text", {
key: 1,
ref_key: "xAxisLabel",
ref: fe,
"text-anchor": "middle",
x: s.value.absoluteWidth / 2,
y: s.value.absoluteHeight - 3,
"font-size": e.value.style.chart.layout.grid.axis.fontSize,
fill: e.value.style.chart.layout.grid.axis.color
}, k(e.value.style.chart.layout.grid.axis.xLabel), 9, xo)) : d("", !0)
]),
e.value.style.chart.layout.grid.yAxis.dataLabels.show ? (u(), n("g", {
key: 2,
ref_key: "scaleLabels",
ref: ge,
class: z({ "donut-opacity": !0, "donut-behind": b.value !== null })
}, [
(u(!0), n(L, null, _(ol.value, (l, r) => (u(), n("g", null, [
l.value >= P.value.min && l.value <= P.value.max ? (u(), n("line", {
key: 0,
x1: s.value.left,
x2: s.value.left - 5,
y1: l.y,
y2: l.y,
stroke: e.value.style.chart.layout.grid.stroke,
"stroke-width": e.value.style.chart.layout.grid.strokeWidth
}, null, 8, ko)) : d("", !0),
l.value >= P.value.min && l.value <= P.value.max ? (u(), n("text", {
key: 1,
x: s.value.left + e.value.style.chart.layout.grid.yAxis.dataLabels.offsetX - 7,
y: l.y + e.value.style.chart.layout.grid.yAxis.dataLabels.fontSize / 3,
"font-size": e.value.style.chart.layout.grid.yAxis.dataLabels.fontSize,
"text-anchor": "end",
fill: e.value.style.chart.layout.grid.yAxis.dataLabels.color,
"font-weight": e.value.style.chart.layout.grid.yAxis.dataLabels.bold ? "bold" : "normal"
}, k(c(Il)(l.value) ? c(Te)(
e.value.style.chart.layout.dataLabels.formatter,
l.value,
c(ve)({
p: e.value.style.chart.layout.dataLabels.prefix,
v: l.value,
s: e.value.style.chart.layout.dataLabels.suffix,
r: e.value.style.chart.layout.grid.yAxis.dataLabels.roundingValue
}),
{ datapoint: l, seriesIndex: r }
) : ""), 9, wo)) : d("", !0)
]))), 256))
], 2)) : d("", !0),
e.value.style.chart.layout.grid.xAxis.dataLabels.show ? (u(), n("g", {
key: 3,
ref_key: "timeLabelsEls",
ref: oe,
class: z({ "donut-opacity": !0 })
}, [
(u(!0), n(L, null, _(h.value.end - h.value.start, (l, r) => (u(), n("g", null, [
(e.value.style.chart.layout.grid.xAxis.dataLabels.showOnlyFirstAndLast && (r === 0 || r === F.value - 1) || !e.value.style.chart.layout.grid.xAxis.dataLabels.showOnlyFirstAndLast) && D.value[r] && D.value[r].text ? (u(), n("g", Do, [
String(D.value[r].text).includes(`
`) ? (u(), n("text", {
key: 1,
class: "vue-data-ui-time-label",
"text-anchor": e.value.style.chart.layout.grid.xAxis.dataLabels.rotation > 0 ? "start" : e.value.style.chart.layout.grid.xAxis.dataLabels.rotation < 0 ? "end" : "middle",
"font-size": e.value.style.chart.layout.grid.xAxis.dataLabels.fontSize,
fill: e.value.style.chart.layout.grid.xAxis.dataLabels.color,
transform: `translate(${s.value.left + w.value * r + w.value / 2}, ${s.value.bottom + e.value.style.chart.layout.grid.xAxis.dataLabels.fontSize + e.value.style.chart.layout.grid.xAxis.dataLabels.offsetY}), rotate(${e.value.style.chart.layout.grid.xAxis.dataLabels.rotation})`,
innerHTML: c(Ol)({
content: String(D.value[r].text),
fontSize: e.value.style.chart.layout.grid.xAxis.dataLabels.fontSize,
fill: e.value.style.chart.layout.grid.xAxis.dataLabels.color,
x: 0,
y: 0
})
}, null, 8, _o)) : (u(), n("text", {
key: 0,
class: "vue-data-ui-time-label",
"text-anchor": e.value.style.chart.layout.grid.xAxis.dataLabels.rotation > 0 ? "start" : e.value.style.chart.layout.grid.xAxis.dataLabels.rotation < 0 ? "end" : "middle",
"font-size": e.value.style.chart.layout.grid.xAxis.dataLabels.fontSize,
fill: e.value.style.chart.layout.grid.xAxis.dataLabels.color,
transform: `translate(${s.value.left + w.value * r + w.value / 2}, ${s.value.bottom + e.value.style.chart.layout.grid.xAxis.dataLabels.fontSize + e.value.style.chart.layout.grid.xAxis.dataLabels.offsetY}), rotate(${e.value.style.chart.layout.grid.xAxis.dataLabels.rotation})`
}, k(D.value[r].text || ""), 9, Lo))
])) : d("", !0)
]))), 256))
], 512)) : d("", !0),
(u(!0), n(L, null, _(S.value, (l, r) => (u(), n("g", null, [
e.value.style.chart.layout.line.show && r < S.value.length - 1 && ![l.subtotal, S.value[r + 1].subtotal].includes(null) ? (u(), n("line", {
key: 0,
class: z({ "donut-opacity": !0, "donut-behind": b.value !== null }),
x1: l.x,
y1: l.y,
x2: S.value[r + 1].x,
y2: S.value[r + 1].y,
stroke: e.value.style.chart.layout.line.stroke,
"stroke-width": e.value.style.chart.layout.line.strokeWidth,
"stroke-linecap": "round",
"stroke-linejoin": "round"
}, null, 10, So)) : d("", !0),
l.subtotal !== null ? (u(), n("g", Fo, [
l.subtotal ? (u(), n("circle", {
key: 0,
cx: l.x,
cy: l.y,
r: l.activeRadius,
fill: e.value.style.chart.backgroundColor
}, null, 8, Bo)) : d("", !0)
])) : d("", !0)
]))), 256)),
(u(!0), n(L, null, _(S.value, (l, r) => (u(), n("g", {
class: z({ "donut-opacity": !0, "donut-behind": r !== b.value && b.value !== null })
}, [
l.subtotal ? (u(), n("g", Eo, [
b.value !== null && b.value === r ? (u(), n("g", $o, [
(u(!0), n(L, null, _(l.donutHover, (a) => (u(), n("g", null, [
yt(a) ? (u(), n("path", {
key: 0,
d: c(Pl)(a, { x: a.center.endX, y: a.center.endY }, 12, 12, { x: l.x, y: l.y }, !1, 20),
stroke: a.color,
"stroke-width": "1",
"stroke-linecap": "round",
"stroke-linejoin": "round",
fill: "none"
}, null, 8, zo)) : d("", !0)
]))), 256)),
(u(!0), n(L, null, _(l.donutHover, (a, f) => (u(), n("g", null, [
yt(a) ? (u(), n("text", {
key: 0,
"data-cy-hover-label": "",
"text-anchor": c(St)(a, !0, 0).anchor,
x: c(St)(a, !0, 9).x,
y: c(Nl)(a, 14, 10),
fill: e.value.style.chart.layout.grid.yAxis.dataLabels.color,
"font-size": 8,
"font-weight": "bold"
}, k(a.name) + ": " + k(al(a, l.donut)) + " (" + k(a.value === null ? "-" : it(a.value, a, f)) + ") ", 9, To)) : d("", !0)
]))), 256)),
m("g", null, [
m("circle", {
cx: l.x,
cy: l.y,
r: l.hoverRadius,
fill: e.value.style.chart.backgroundColor
}, null, 8, Io)
])
])) : d("", !0)
])) : d("", !0)
], 2))), 256)),
(u(!0), n(L, null, _(S.value, (l, r) => (u(), n("g", {
class: z({ "donut-opacity": !0, "donut-behind": r !== b.value && b.value !== null })
}, [
l.subtotal !== null ? (u(), n("g", Oo, [
l.subtotal === 0 ? (u(), n("circle", {
key: 0,
cx: l.x,
cy: l.y,
r: 3,
fill: e.value.style.chart.color
}, null, 8, Po)) : b.value !== null && b.value === r ? (u(), n("g", No, [
(u(!0), n(L, null, _(l.donutHover, (a, f) => (u(), n("path", {
d: a.arcSlice,
fill: `${a.color}`,
"stroke-width": 1,
stroke: e.value.style.chart.backgroundColor
}, null, 8, Ro))), 256))
])) : (u(), n("g", Vo, [
(u(!0), n(L, null, _(l.donut, (a, f) => (u(), n("path", {
d: a.arcSlice,
fill: `${a.color}`,
"stroke-width": 0.5,
stroke: e.value.style.chart.backgroundColor
}, null, 8, Mo))), 256))
]))
])) : d("", !0)
], 2))), 256)),
(u(!0), n(L, null, _(S.value, (l, r) => (u(), n("g", {
class: z({ "donut-opacity": !0, "donut-behind": r !== b.value && b.value !== null || he.value && r !== V.value.index })
}, [
l.subtotal !== null && e.value.style.chart.layout.dataLabels.show ? (u(), n("text", {
key: 0,
"text-anchor": "middle",
x: l.x,
y: b.value === l.index && l.subtotal ? l.y + e.value.style.chart.layout.dataLabels.fontSize / 3 : l.y - l.radius - e.value.style.chart.layout.dataLabels.fontSize + e.value.style.chart.layout.dataLabels.offsetY,
"font-size": e.value.style.chart.layout.dataLabels.fontSize,
"font-weight": "bold",
fill: e.value.style.chart.layout.dataLabels.color
}, k(it(l.subtotal, l, r)), 9, Uo)) : d("", !0)
], 2))), 256)),
(u(!0), n(L, null, _(S.value, (l, r) => (u(), n("rect", {
x: s.value.left + r * w.value,
y: s.value.top,
width: w.value,
height: s.value.height,
fill: [b.value, q.value].includes(l.index) ? `url(#hover_${E.value})` : "transparent",
class: z({ "donut-hover": l.subtotal && [b.value, q.value].includes(l.index) }),
style: {
pointerEvents: "none"
}
}, null, 10, Ho))), 256)),
(u(!0), n(L, null, _(S.value, (l, r) => (u(), n("rect", {
"data-cy-trap": "",
x: s.value.left + r * w.value,
y: s.value.top,
width: w.value,
height: s.value.height,
fill: "transparent",
onMouseenter: (a) => rl(l),
onMouseleave: (a) => ct(l),
onClick: (a) => dt(l, r),
class: z({ "donut-hover": b.value === l.index && l.subtotal })
}, null, 42, Xo))), 256)),
A(t.$slots, "svg", { svg: s.value }, void 0, !0)
], 14, uo)),
t.$slots.watermark ? (u(), n("div", Wo, [
A(t.$slots, "watermark", T(I({ isPrinting: c(ot) || c(at) })), void 0, !0)
])) : d("", !0),
m("div", {
ref_key: "chartSlicer",
ref: Ge,
style: ee(`width:100%;background:${e.value.style.chart.backgroundColor}`),
"data-dom-to-png-ignore": ""
}, [
F.value > 1 && e.value.style.chart.zoom.show ? (u(), B(lo, {
ref_key: "slicerComponent",
ref: je,
key: `slicer_${Ne.value}`,
background: e.value.style.chart.zoom.color,
borderColor: e.value.style.chart.backgroundColor,
fontSize: e.value.style.chart.zoom.fontSize,
useResetSlot: e.value.style.chart.zoom.useResetSlot,
labelLeft: D.value[0] ? D.value[0].text : "",
labelRight: D.value.at(-1) ? D.value.at(-1).text : "",
textColor: e.value.style.chart.color,
inputColor: e.value.style.chart.zoom.color,
selectColor: e.value.style.chart.zoom.highlightColor,
max: F.value,
min: 0,
valueStart: h.value.start,
valueEnd: h.value.end,
start: h.value.start,
"onUpdate:start": o[0] || (o[0] = (l) => h.value.start = l),
end: h.value.end,
"onUpdate:end": o[1] || (o[1] = (l) => h.value.end = l),
refreshStartPoint: e.value.style.chart.zoom.startIndex !== null ? e.value.style.chart.zoom.startIndex : 0,
refreshEndPoint: e.value.style.chart.zoom.endIndex !== null ? e.value.style.chart.zoom.endIndex + 1 : F.value,
enableRangeHandles: e.value.style.chart.zoom.enableRangeHandles,
enableSelectionDrag: e.value.style.chart.zoom.enableSelectionDrag,
focusOnDrag: e.value.style.chart.zoom.focusOnDrag,
focusRangeRatio: e.value.style.chart.zoom.focusRangeRatio,
onReset: et
}, {
"reset-action": y(({ reset: l }) => [
A(t.$slots, "reset-action", T(I({ reset: l })), void 0, !0)
]),
_: 3
}, 8, ["background", "borderColor", "fontSize", "useResetSlot", "labelLeft", "labelRight", "textColor", "inputColor", "selectColor", "max", "valueStart", "valueEnd", "start", "end", "refreshStartPoint", "refreshEndPoint", "enableRangeHandles", "enableSelectionDrag", "focusOnDrag", "focusRangeRatio"])) : d("", !0)
], 4),
m("div", {
id: `legend-bottom-${E.value}`
}, null, 8, jo),
Ue.value ? (u(), B(Dl, {
key: 5,
to: e.value.style.chart.legend.position === "top" ? `#legend-top-${E.value}` : `#legend-bottom-${E.value}`
}, [
m("div", {
ref_key: "chartLegend",
ref: Xe
}, [
e.value.style.chart.legend.show ? (u(), B(to, {
key: `legend_${Me.value}`,
legendSet: Le.value,
config: ul.value,
onClickMarker: o[2] || (o[2] = ({ legend: l }) => J(l.uid))
}, {
item: y(({ legend: l, index: r }) => [
m("div", {
onClick: (a) => J(l.uid),
style: ee(`opacity:${x.value.includes(l.uid) ? 0.5 : 1}`)
}, k(l.display), 13, Go)
]),
_: 1
}, 8, ["legendSet", "config"])) : d("", !0),
A(t.$slots, "legend", { legend: Le.value }, void 0, !0)
], 512)
], 8, ["to"])) : d("", !0),
t.$slots.source ? (u(), n("div", {
key: 6,
ref_key: "source",
ref: We,
dir: "auto"
}, [
A(t.$slots, "source", {}, void 0, !0)
], 512)) : d("", !0),
Je.value && e.value.userOptions.buttons.table ? (u(), B(Ll(K.value.component), _l({ key: 7 }, K.value.props, {
ref_key: "tableUnit",
ref: j,
onClose: mt
}), xt({
content: y(() => [
(u(), B(c(Ht), {
key: `table_${Ve.value}`,
colNames: W.value.colNames,
head: W.value.head,
body: W.value.body,
config: W.value.config,
title: e.value.table.useDialog ? "" : K.value.title,
withCloseButton: !e.value.table.useDialog,
onClose: mt
}, {
th: y(({ th: l }) => [
Ee(k(l.name ?? l), 1)
]),
td: y(({ td: l }) => [
l.value === null ? (u(), n("span", Yo, "-")) : (u(), n("b", qo, k(isNaN(l.value) ? "" : e.value.style.chart.layout.dataLabels.prefix) + k(!isNaN(l.value) && l.value !== null ? Number(l.value.toFixed(e.value.table.td.roundingValue)).toLocaleString() : l) + k(isNaN(l.value) ? "" : e.value.style.chart.layout.dataLabels.suffix), 1)),
m("span", null, k(l.percentage && !isNaN(l.percentage) ? `(${Number(l.percentage.toFixed(e.value.table.td.roundingPercentage)).toLocaleString()}%)` : ""), 1)
]),
_: 1
}, 8, ["colNames", "head", "body", "config", "title", "withCloseButton"]))
]),
_: 2
}, [
e.value.table.useDialog ? {
name: "title",
fn: y(() => [
Ee(k(K.value.title), 1)
]),
key: "0"
} : void 0,
e.value.table.useDialog ? {
name: "actions",
fn: y(() => [
m("button", {
tabindex: "0",
class: "vue-ui-user-options-button",
onClick: o[3] || (o[3] = (l) => _e(e.value.userOptions.callbacks.csv))
}, [
kt(c(Ut), {
name: "excel",
stroke: K.value.props.color
}, null, 8, ["stroke"])
])
]),
key: "1"
} : void 0
]), 1040)) : d("", !0),
e.value.style.chart.dialog.show ? (u(), B(c(Oe), {
key: 8,
ref_key: "dialog",
ref: Fe,
onClose: o[4] || (o[4] = (l) => {
V.value = null, he.value = !1, le.value = null, b.value = null, q.value = null;
}),
backgroundColor: e.value.style.chart.dialog.backgroundColor,
color: e.value.style.chart.dialog.color,
headerBg: e.value.style.chart.dialog.header.backgroundColor,
headerColor: e.value.style.chart.dialog.header.color,
isFullscreen: H.value,
fullscreenParent: O.value
}, {
title: y(() => [
Ee(k(D.value[Number(V.value.index)] ? D.value[Number(V.value.index)].text : ""), 1)
]),
content: y(() => [
V.value ? (u(), B(c(Gt), {
key: 0,
config: Ct.value,
dataset: bt.value
}, null, 8, ["config", "dataset"])) : d("", !0)
]),
_: 1
}, 8, ["backgroundColor", "color", "headerBg", "headerColor", "isFullscreen", "fullscreenParent"])) : d("", !0),
c(Qe) ? (u(), B(jl, { key: 9 })) : d("", !0)
], 46, ao));
}
}, Ko = /* @__PURE__ */ oo(Jo, [["__scopeId", "data-v-e8783857"]]), ya = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
__proto__: null,
default: Ko
}, Symbol.toStringTag, { value: "Module" }));
export {
fa as a,
ya as b,
Ko as v
};