vue-data-ui 3.0.0-next.8 → 3.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +32 -30
- package/dist/{Arrow-BRtNjitS.js → Arrow-r2f8Bpd-.js} +1 -1
- package/dist/{BaseDraggableDialog-CO9ok1PR.js → BaseDraggableDialog-CGGcf8d8.js} +4 -4
- package/dist/{BaseIcon-BuOIF6t5.js → BaseIcon-CXtL10fo.js} +1 -1
- package/dist/{ColorPicker-FH6oc0mS.js → ColorPicker-H91bBsqM.js} +2 -2
- package/dist/{DataTable-D36ZRtpU.js → DataTable-BSSXpM7w.js} +2 -2
- package/dist/{Legend-DInM-hku.js → Legend-BUk0WvWJ.js} +2 -2
- package/dist/{NonSvgPenAndPaper-B60MxEaz.js → NonSvgPenAndPaper-DQDgPoW8.js} +3 -3
- package/dist/{PackageVersion-CGQlqnmq.js → PackageVersion-CJ6Vd7V5.js} +3 -3
- package/dist/{PenAndPaper-B5slIHlh.js → PenAndPaper-D3zudcNI.js} +32 -32
- package/dist/{RecursiveCircles-Dn3TGoL6.js → RecursiveCircles-BcLb1aRS.js} +15 -13
- package/dist/RecursiveLabels-Bgcv0pzu.js +50 -0
- package/dist/{RecursiveLinks-ld_gDZH4.js → RecursiveLinks-00zGWPf9.js} +20 -18
- package/dist/{Shape-BGr3dQKt.js → Shape-BRzOzubn.js} +43 -37
- package/dist/Slicer-MID8pgT3.js +602 -0
- package/dist/{SparkTooltip-BWA23VgJ.js → SparkTooltip-DATI1fGZ.js} +7 -7
- package/dist/{Title-BSlAPr_H.js → Title-BGu6gEd2.js} +1 -1
- package/dist/{Tooltip-lPcsweXz.js → Tooltip-Bh2zYSoM.js} +23 -19
- package/dist/{UserOptions-Dn5TCQxg.js → UserOptions-Ck8fz9f4.js} +2 -2
- package/dist/{dom-to-png-Br-eVhJZ.js → dom-to-png-DhIh24Ti.js} +1 -1
- package/dist/{img-CgMUOQnb.js → img-DrR839Ot.js} +1 -1
- package/dist/{index-Cfm5-hMQ.js → index-BtNwOUja.js} +2885 -2010
- package/dist/{pdf-BMVHBLq5.js → pdf-DoShrdT5.js} +1 -1
- package/dist/style.css +1 -1
- package/dist/types/vue-data-ui.d.cts +753 -65
- package/dist/types/vue-data-ui.d.ts +753 -65
- package/dist/useAutoSizeLabelsInsideViewbox-FmDQyX4z.js +81 -0
- package/dist/useFitSvgText-2crs6Fv5.js +69 -0
- package/dist/useLoading-D7YHNtLX.js +29 -0
- package/dist/useNestedProp-f2H3m6Yj.js +13 -0
- package/dist/usePanZoom-BVca3eMk.js +122 -0
- package/dist/{usePrinter-B1Hgs47c.js → usePrinter-DUNjpQNe.js} +2 -2
- package/dist/useTimeLabelCollider-CIsgDrl9.js +78 -0
- package/dist/{useTimeLabels-Mrr0jrpL.js → useTimeLabels-DkzmKfZn.js} +211 -152
- package/dist/{vue-data-ui-CD674-M3.js → vue-data-ui-D7QVxNhO.js} +105 -100
- package/dist/vue-data-ui.js +26 -25
- package/dist/vue-ui-3d-bar-ITaF-6Kn.js +1323 -0
- package/dist/{vue-ui-accordion-CEDGlyKI.js → vue-ui-accordion-BKUrAowe.js} +3 -3
- package/dist/vue-ui-age-pyramid-DxsuDr6o.js +835 -0
- package/dist/{vue-ui-annotator-CosgP-Fl.js → vue-ui-annotator-B06QtxgJ.js} +12 -12
- package/dist/vue-ui-bullet-B7Fy45tA.js +571 -0
- package/dist/vue-ui-candlestick-Dw0U4uIQ.js +1000 -0
- package/dist/{vue-ui-carousel-table-BG1ItsAb.js → vue-ui-carousel-table-DGz0nw28.js} +29 -29
- package/dist/{vue-ui-chestnut-6uKesZW9.js → vue-ui-chestnut-CFfKYm9i.js} +664 -536
- package/dist/vue-ui-chord-EhlQhMSs.js +1038 -0
- package/dist/vue-ui-circle-pack-BHrrEUUd.js +709 -0
- package/dist/{vue-ui-cursor-CkVnNEGn.js → vue-ui-cursor-Dd-HtWzG.js} +2 -2
- package/dist/{vue-ui-dashboard-D07ivGS7.js → vue-ui-dashboard-6R8udDY3.js} +64 -64
- package/dist/{vue-ui-digits-Doidl3Lz.js → vue-ui-digits-zKn3uhGN.js} +2 -2
- package/dist/{vue-ui-donut-CWvzqAAa.js → vue-ui-donut-BtnIwS_E.js} +433 -424
- package/dist/vue-ui-donut-evolution-DHo1MuMM.js +1076 -0
- package/dist/vue-ui-dumbbell-Czi9r9Na.js +1120 -0
- package/dist/vue-ui-flow-jOfM0RZY.js +841 -0
- package/dist/{vue-ui-funnel-D1pFzjJa.js → vue-ui-funnel-tBvVpdhy.js} +16 -16
- package/dist/vue-ui-galaxy-IdoY2oqG.js +680 -0
- package/dist/vue-ui-gauge-DR6Xm_Hz.js +791 -0
- package/dist/vue-ui-gizmo-Dto73UsB.js +210 -0
- package/dist/vue-ui-heatmap-zmFv-0z1.js +1078 -0
- package/dist/vue-ui-history-plot-ILemyyYw.js +1074 -0
- package/dist/{vue-ui-kpi-DTeZbrJk.js → vue-ui-kpi-hmqSCvxr.js} +26 -26
- package/dist/{vue-ui-mini-loader-itpDcfZU.js → vue-ui-mini-loader-CbD-E8ci.js} +2 -2
- package/dist/vue-ui-molecule-mTy6YIm6.js +656 -0
- package/dist/vue-ui-mood-radar-BEnSYV3Q.js +785 -0
- package/dist/vue-ui-nested-donuts-CGE9dmJK.js +1284 -0
- package/dist/vue-ui-onion-Dh2J9GV0.js +776 -0
- package/dist/vue-ui-parallel-coordinate-plot-xsgmMIJK.js +916 -0
- package/dist/{vue-ui-quadrant-0milmSNS.js → vue-ui-quadrant-DA0Kw6eq.js} +512 -459
- package/dist/vue-ui-quick-chart-DKbxF5Yt.js +1762 -0
- package/dist/vue-ui-radar-BFY9bN_h.js +796 -0
- package/dist/{vue-ui-rating-C3QUdrMw.js → vue-ui-rating-Bh35aujf.js} +2 -2
- package/dist/vue-ui-relation-circle-B-05kQ_l.js +598 -0
- package/dist/vue-ui-ridgeline-CuGfF83t.js +1157 -0
- package/dist/vue-ui-rings-DrQXXzAM.js +728 -0
- package/dist/vue-ui-scatter-CWn9c7e9.js +1178 -0
- package/dist/{vue-ui-skeleton-P-1SRvsT.js → vue-ui-skeleton-oG4Bm5nL.js} +13 -13
- package/dist/{vue-ui-smiley-Cd1bhDuU.js → vue-ui-smiley-Cnwba_gV.js} +46 -46
- package/dist/vue-ui-spark-trend-D9iNCf4o.js +315 -0
- package/dist/vue-ui-sparkbar-iJkiubZC.js +351 -0
- package/dist/vue-ui-sparkgauge-BH3uA5rh.js +232 -0
- package/dist/vue-ui-sparkhistogram-B3kR62pf.js +380 -0
- package/dist/vue-ui-sparkline-DczR2ZAf.js +513 -0
- package/dist/vue-ui-sparkstackbar-Cg0ItRGH.js +421 -0
- package/dist/vue-ui-stackbar-d4PrzcGS.js +1371 -0
- package/dist/vue-ui-strip-plot-BXBpN5rl.js +916 -0
- package/dist/{vue-ui-table-B1tjuVi0.js → vue-ui-table-BXOLZXuz.js} +17 -17
- package/dist/{vue-ui-table-heatmap-BI8eIQG7.js → vue-ui-table-heatmap-7YT7VF2H.js} +5 -5
- package/dist/{vue-ui-table-sparkline-CqBD7xhZ.js → vue-ui-table-sparkline-BfgqajJ2.js} +19 -16
- package/dist/vue-ui-thermometer-C7Tg6HLz.js +541 -0
- package/dist/{vue-ui-timer-sgO_Z6ja.js → vue-ui-timer-Ch5JP1pQ.js} +5 -5
- package/dist/vue-ui-tiremarks-fY-4pWAK.js +406 -0
- package/dist/vue-ui-treemap-DTSX6suB.js +1035 -0
- package/dist/{vue-ui-vertical-bar-BPay31_q.js → vue-ui-vertical-bar-C-i2dRnU.js} +107 -105
- package/dist/vue-ui-waffle-BbgLlhGH.js +910 -0
- package/dist/vue-ui-wheel-waZf462K.js +379 -0
- package/dist/vue-ui-word-cloud-DtLK91Dk.js +765 -0
- package/dist/{vue-ui-world-DWskeHfE.js → vue-ui-world-Cx4uuwTY.js} +364 -327
- package/dist/vue-ui-xy-DDOT8cyx.js +3808 -0
- package/dist/{vue-ui-xy-canvas-Dkmsguo1.js → vue-ui-xy-canvas-CUCsC8vD.js} +265 -264
- package/package.json +4 -4
- package/dist/RecursiveLabels-NTMB9w5C.js +0 -49
- package/dist/Slicer-O07lQwRC.js +0 -577
- package/dist/useLoading-Bt5Doa8m.js +0 -28
- package/dist/useNestedProp-Hh7nGEjp.js +0 -13
- package/dist/usePanZoom-BQMvRXEQ.js +0 -115
- package/dist/vue-ui-3d-bar-DWtJoryQ.js +0 -1227
- package/dist/vue-ui-age-pyramid-DbrA1G0r.js +0 -746
- package/dist/vue-ui-bullet-9IB3mGon.js +0 -513
- package/dist/vue-ui-candlestick-CWqPF_zW.js +0 -873
- package/dist/vue-ui-chord-Crd3l1b6.js +0 -949
- package/dist/vue-ui-circle-pack-CAm2gxBi.js +0 -673
- package/dist/vue-ui-donut-evolution-Djp_eBqw.js +0 -903
- package/dist/vue-ui-dumbbell-B7GySnYf.js +0 -753
- package/dist/vue-ui-flow-XDpZAYWI.js +0 -765
- package/dist/vue-ui-galaxy-DBQy21se.js +0 -617
- package/dist/vue-ui-gauge-FBZaUrBD.js +0 -738
- package/dist/vue-ui-gizmo-CDbPxUzE.js +0 -192
- package/dist/vue-ui-heatmap-DsDWxYOS.js +0 -877
- package/dist/vue-ui-history-plot-CzO1Z1FH.js +0 -924
- package/dist/vue-ui-molecule-Ddd3FgID.js +0 -597
- package/dist/vue-ui-mood-radar-24XAq8mg.js +0 -670
- package/dist/vue-ui-nested-donuts-DjWASp62.js +0 -1212
- package/dist/vue-ui-onion-B9thdF_c.js +0 -701
- package/dist/vue-ui-parallel-coordinate-plot-DT-GhOaA.js +0 -807
- package/dist/vue-ui-quick-chart-D0DukVN6.js +0 -1612
- package/dist/vue-ui-radar-DY8y6oRc.js +0 -741
- package/dist/vue-ui-relation-circle-8Gd7_fxt.js +0 -542
- package/dist/vue-ui-ridgeline-iPtG1McW.js +0 -969
- package/dist/vue-ui-rings-BXPo4MMo.js +0 -685
- package/dist/vue-ui-scatter-26d0eebx.js +0 -1045
- package/dist/vue-ui-spark-trend-Dt3ctzpl.js +0 -291
- package/dist/vue-ui-sparkbar-RrxErqrU.js +0 -301
- package/dist/vue-ui-sparkgauge-CyNi1b0O.js +0 -201
- package/dist/vue-ui-sparkhistogram-DPpZCPuE.js +0 -313
- package/dist/vue-ui-sparkline-BMjQ_uYx.js +0 -459
- package/dist/vue-ui-sparkstackbar-CjO8pfE-.js +0 -381
- package/dist/vue-ui-stackbar-wgyvMlE6.js +0 -1207
- package/dist/vue-ui-strip-plot-BF1o8lvY.js +0 -761
- package/dist/vue-ui-thermometer-CtuxuYVt.js +0 -495
- package/dist/vue-ui-tiremarks-DOwj4ZE-.js +0 -358
- package/dist/vue-ui-treemap-C4LtyFug.js +0 -965
- package/dist/vue-ui-waffle-D8mzGTeo.js +0 -863
- package/dist/vue-ui-wheel-C6uAotal.js +0 -352
- package/dist/vue-ui-word-cloud-Bge2211V.js +0 -659
- package/dist/vue-ui-xy-UzQacbnA.js +0 -2982
|
@@ -0,0 +1,513 @@
|
|
|
1
|
+
import { defineAsyncComponent as he, computed as h, ref as y, toRefs as Pe, watch as J, shallowRef as fe, onMounted as Re, onBeforeUnmount as ye, createElementBlock as c, openBlock as s, normalizeStyle as D, renderSlot as I, createCommentVNode as f, createBlock as pe, normalizeProps as ge, guardReactiveProps as me, createElementVNode as p, toDisplayString as T, unref as n, createVNode as Fe, Fragment as Q, renderList as ee, withCtx as Ee, createTextVNode as Oe, nextTick as Be } from "vue";
|
|
2
|
+
import { u as Ge, c as je, t as Ue, b as Xe, C as be, a6 as te, o as ke, f as xe, g as Ye, x as W, a7 as qe, a8 as Ze, X as Ke, s as P, V as _e, U as He, a9 as we, k as ae, i as le, aa as Je } from "./index-BtNwOUja.js";
|
|
3
|
+
import { u as Le } from "./useNestedProp-f2H3m6Yj.js";
|
|
4
|
+
import { t as Qe, u as et } from "./useResponsive-DfdjqQps.js";
|
|
5
|
+
import { u as tt } from "./useChartAccessibility-9icAAmYg.js";
|
|
6
|
+
import { u as at, B as lt } from "./useLoading-D7YHNtLX.js";
|
|
7
|
+
import { u as ut } from "./useTimeLabels-DkzmKfZn.js";
|
|
8
|
+
import { _ as ot } from "./_plugin-vue_export-helper-CHgC5LLL.js";
|
|
9
|
+
const st = ["id"], nt = ["xmlns", "viewBox"], rt = ["width", "height"], it = ["id"], vt = ["stop-color"], dt = ["stop-color"], ct = ["id"], ht = ["stop-color"], ft = ["stop-color"], yt = ["id"], pt = ["stop-color"], gt = ["stop-color"], mt = { key: 1 }, bt = ["d", "fill"], kt = ["d", "fill"], xt = ["d", "stroke", "stroke-width"], _t = ["d", "stroke", "stroke-width"], wt = ["x", "y", "width", "height", "fill", "rx"], Lt = ["x1", "x2", "y1", "y2", "stroke", "stroke-width", "stroke-dasharray"], At = ["x1", "x2", "y1", "y2", "stroke", "stroke-dasharray", "stroke-width"], $t = ["cx", "cy", "r", "fill", "stroke", "stroke-width"], Nt = ["x", "y", "font-size", "font-weight", "fill"], Mt = ["x", "y", "height", "width", "onMouseenter", "onMouseleave", "onClick"], Ct = {
|
|
10
|
+
__name: "vue-ui-sparkline",
|
|
11
|
+
props: {
|
|
12
|
+
config: {
|
|
13
|
+
type: Object,
|
|
14
|
+
default() {
|
|
15
|
+
return {};
|
|
16
|
+
}
|
|
17
|
+
},
|
|
18
|
+
dataset: {
|
|
19
|
+
type: Array,
|
|
20
|
+
default() {
|
|
21
|
+
return [];
|
|
22
|
+
}
|
|
23
|
+
},
|
|
24
|
+
showInfo: {
|
|
25
|
+
type: Boolean,
|
|
26
|
+
default: !0
|
|
27
|
+
},
|
|
28
|
+
selectedIndex: {
|
|
29
|
+
type: Number,
|
|
30
|
+
default: void 0
|
|
31
|
+
},
|
|
32
|
+
heightRatio: {
|
|
33
|
+
type: Number,
|
|
34
|
+
default: 1
|
|
35
|
+
},
|
|
36
|
+
forcedPadding: {
|
|
37
|
+
type: Number,
|
|
38
|
+
default: 30
|
|
39
|
+
}
|
|
40
|
+
},
|
|
41
|
+
emits: ["hoverIndex", "selectDatapoint"],
|
|
42
|
+
setup(x, { emit: Ae }) {
|
|
43
|
+
const $e = he(() => import("./PackageVersion-CJ6Vd7V5.js")), Ne = he(() => import("./SparkTooltip-DATI1fGZ.js")), { vue_ui_sparkline: Me } = Ge(), r = x, ue = h(() => Array.isArray(r.dataset) && r.dataset.length > 0), g = y(je()), R = y(null), oe = y(null), se = y(null), e = y(O());
|
|
44
|
+
function Ce(t) {
|
|
45
|
+
return Je(t).map((a) => ({ period: "-", value: a }));
|
|
46
|
+
}
|
|
47
|
+
const { loading: F, FINAL_DATASET: S, manualLoading: E } = at({
|
|
48
|
+
...Pe(r),
|
|
49
|
+
FINAL_CONFIG: e,
|
|
50
|
+
prepareConfig: O,
|
|
51
|
+
callback: () => {
|
|
52
|
+
Promise.resolve().then(async () => {
|
|
53
|
+
await Be(), X();
|
|
54
|
+
});
|
|
55
|
+
},
|
|
56
|
+
skeletonDataset: Ce(12),
|
|
57
|
+
skeletonConfig: Ue({
|
|
58
|
+
defaultConfig: e.value,
|
|
59
|
+
userConfig: {
|
|
60
|
+
style: {
|
|
61
|
+
backgroundColor: "#99999930",
|
|
62
|
+
scaleMin: 0,
|
|
63
|
+
scaleMax: null,
|
|
64
|
+
animation: { show: !1 },
|
|
65
|
+
line: { color: "#AAAAAA" },
|
|
66
|
+
bar: { color: "#AAAAAA" },
|
|
67
|
+
area: { color: "#CACACA" },
|
|
68
|
+
zeroLine: { color: "#6A6A6A" },
|
|
69
|
+
dataLabel: { show: !1 },
|
|
70
|
+
tooltip: { show: !1 }
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
})
|
|
74
|
+
}), { svgRef: ne } = tt({ config: e.value.style.title });
|
|
75
|
+
function O() {
|
|
76
|
+
const t = Le({
|
|
77
|
+
userConfig: r.config,
|
|
78
|
+
defaultConfig: Me
|
|
79
|
+
});
|
|
80
|
+
let a = {};
|
|
81
|
+
return t.theme ? a = {
|
|
82
|
+
...Le({
|
|
83
|
+
userConfig: Xe.vue_ui_sparkline[t.theme] || r.config,
|
|
84
|
+
defaultConfig: t
|
|
85
|
+
})
|
|
86
|
+
} : a = t, r.config && be(r.config, "style.scaleMin") ? a.style.scaleMin = r.config.style.scaleMin : a.style.scaleMin = null, r.config && be(r.config, "style.scaleMax") ? a.style.scaleMax = r.config.style.scaleMax : a.style.scaleMax = null, a;
|
|
87
|
+
}
|
|
88
|
+
const _ = h(() => te({
|
|
89
|
+
data: S.value,
|
|
90
|
+
threshold: e.value.downsample.threshold
|
|
91
|
+
}));
|
|
92
|
+
J(() => r.config, (t) => {
|
|
93
|
+
F.value || (e.value = O()), ie(), o.value.chartWidth = e.value.style.chartWidth;
|
|
94
|
+
}, { deep: !0 }), J(() => r.dataset, (t) => {
|
|
95
|
+
Array.isArray(t) && t.length > 0 && (E.value = !1), m.value = te({
|
|
96
|
+
data: S.value.map((a) => ({
|
|
97
|
+
...a,
|
|
98
|
+
value: [void 0].includes(a.value) ? null : a.value
|
|
99
|
+
})),
|
|
100
|
+
threshold: e.value.downsample.threshold
|
|
101
|
+
});
|
|
102
|
+
}, { deep: !0 });
|
|
103
|
+
const m = y(Ie());
|
|
104
|
+
function Ie() {
|
|
105
|
+
return te({
|
|
106
|
+
data: S.value.map((t) => e.value.style.animation.show && S.value.length > 1 ? {
|
|
107
|
+
...t,
|
|
108
|
+
value: null
|
|
109
|
+
} : {
|
|
110
|
+
...t,
|
|
111
|
+
value: [void 0].includes(t.value) ? null : t.value
|
|
112
|
+
}),
|
|
113
|
+
threshold: e.value.downsample.threshold
|
|
114
|
+
});
|
|
115
|
+
}
|
|
116
|
+
const b = fe(null), w = fe(null), B = y(!1), N = y(0), G = y([]), j = y(""), U = h(() => {
|
|
117
|
+
const a = (_.value || []).map((u) => `${u.period}::${Number.isFinite(u.value) ? u.value : 0}`).join("|"), l = e.value?.style?.animation || {};
|
|
118
|
+
return `${a}#${!!l.show}#${l.animationFrames || 0}`;
|
|
119
|
+
});
|
|
120
|
+
function V() {
|
|
121
|
+
N.value && (cancelAnimationFrame(N.value), N.value = 0), G.value.forEach((t) => clearTimeout(t)), G.value = [], B.value = !1;
|
|
122
|
+
}
|
|
123
|
+
function X() {
|
|
124
|
+
const t = e.value?.style?.animation || {}, a = _.value || [], l = U.value;
|
|
125
|
+
if (l && l === j.value && (B.value || m.value.length === a.length))
|
|
126
|
+
return;
|
|
127
|
+
if (V(), !t.show || F.value || a.length <= 1) {
|
|
128
|
+
m.value = a, j.value = l;
|
|
129
|
+
return;
|
|
130
|
+
}
|
|
131
|
+
B.value = !0, j.value = l, m.value = [];
|
|
132
|
+
const u = Math.max(1, Number(t.animationFrames) || 1), K = Math.max(1, Math.floor(u / a.length));
|
|
133
|
+
let H = 0;
|
|
134
|
+
const ce = () => {
|
|
135
|
+
if (l !== U.value) {
|
|
136
|
+
V();
|
|
137
|
+
return;
|
|
138
|
+
}
|
|
139
|
+
if (H < a.length) {
|
|
140
|
+
m.value.push(a[H]);
|
|
141
|
+
const We = setTimeout(() => {
|
|
142
|
+
N.value = requestAnimationFrame(ce);
|
|
143
|
+
}, K);
|
|
144
|
+
G.value.push(We), H += 1;
|
|
145
|
+
} else
|
|
146
|
+
m.value = a, V();
|
|
147
|
+
};
|
|
148
|
+
N.value = requestAnimationFrame(ce);
|
|
149
|
+
}
|
|
150
|
+
J(U, () => {
|
|
151
|
+
X();
|
|
152
|
+
}), Re(() => {
|
|
153
|
+
ie(), X();
|
|
154
|
+
}), ye(() => {
|
|
155
|
+
V();
|
|
156
|
+
});
|
|
157
|
+
const re = h(() => !!e.value.debug);
|
|
158
|
+
function ie() {
|
|
159
|
+
if (ke(r.dataset) ? (xe({
|
|
160
|
+
componentName: "VueUiSparkline",
|
|
161
|
+
type: "dataset",
|
|
162
|
+
debug: re.value
|
|
163
|
+
}), E.value = !0) : r.dataset.forEach((t, a) => {
|
|
164
|
+
Ye({
|
|
165
|
+
datasetObject: t,
|
|
166
|
+
requiredAttributes: ["period", "value"]
|
|
167
|
+
}).forEach((l) => {
|
|
168
|
+
xe({
|
|
169
|
+
componentName: "VueUiSparkline",
|
|
170
|
+
type: "datasetSerieAttribute",
|
|
171
|
+
property: l,
|
|
172
|
+
index: a,
|
|
173
|
+
debug: re.value
|
|
174
|
+
});
|
|
175
|
+
});
|
|
176
|
+
}), ke(r.dataset) || (E.value = e.value.loading), e.value.responsive) {
|
|
177
|
+
const t = Qe(() => {
|
|
178
|
+
const { width: a, height: l } = et({
|
|
179
|
+
chart: R.value,
|
|
180
|
+
title: e.value.style.title.show && r.showInfo ? oe.value : null,
|
|
181
|
+
source: se.value
|
|
182
|
+
});
|
|
183
|
+
requestAnimationFrame(() => {
|
|
184
|
+
o.value.width = a, o.value.height = l, o.value.chartWidth = e.value.style.chartWidth / 500 * a, o.value.padding = r.forcedPadding / 500 * a;
|
|
185
|
+
});
|
|
186
|
+
});
|
|
187
|
+
b.value && (w.value && b.value.unobserve(w.value), b.value.disconnect()), b.value = new ResizeObserver(t), w.value = R.value.parentNode, b.value.observe(w.value);
|
|
188
|
+
}
|
|
189
|
+
}
|
|
190
|
+
ye(() => {
|
|
191
|
+
b.value && (w.value && b.value.unobserve(w.value), b.value.disconnect());
|
|
192
|
+
});
|
|
193
|
+
const o = y({
|
|
194
|
+
height: 80 * r.heightRatio,
|
|
195
|
+
width: 500,
|
|
196
|
+
chartWidth: e.value.style.chartWidth,
|
|
197
|
+
padding: r.forcedPadding
|
|
198
|
+
}), Y = Ae, i = h(() => {
|
|
199
|
+
const { top: t, right: a, bottom: l, left: u } = e.value.style.padding;
|
|
200
|
+
return {
|
|
201
|
+
top: t,
|
|
202
|
+
left: u,
|
|
203
|
+
right: o.value.width - a,
|
|
204
|
+
bottom: o.value.height - l,
|
|
205
|
+
start: r.showInfo && e.value.style.dataLabel.show && e.value.style.dataLabel.position === "left" ? o.value.width - o.value.chartWidth + u : o.value.padding + u,
|
|
206
|
+
width: r.showInfo && e.value.style.dataLabel.show ? o.value.chartWidth - u - a : o.value.width - o.value.padding - u - a,
|
|
207
|
+
height: o.value.height - t - l
|
|
208
|
+
};
|
|
209
|
+
}), q = h(() => [null, void 0].includes(e.value.style.scaleMin) ? Math.min(...m.value.map((t) => isNaN(t.value) || [void 0, null, "NaN", NaN, 1 / 0, -1 / 0].includes(t.value) ? 0 : t.value || 0)) : e.value.style.scaleMin), Se = h(() => [null, void 0].includes(e.value.style.scaleMax) ? Math.max(...m.value.map((t) => isNaN(t.value) || [void 0, null, "NaN", NaN, 1 / 0, -1 / 0].includes(t.value) ? 0 : t.value || 0)) : e.value.style.scaleMax), M = h(() => {
|
|
210
|
+
const t = q.value >= 0 ? 0 : q.value;
|
|
211
|
+
return Math.abs(t);
|
|
212
|
+
}), ve = h(() => Se.value + M.value), L = h(() => i.value.bottom - i.value.height * Z(M.value));
|
|
213
|
+
function Z(t) {
|
|
214
|
+
return isNaN(t / ve.value) ? 0 : t / ve.value;
|
|
215
|
+
}
|
|
216
|
+
const A = h(() => _.value.length - 1 || 1), z = h(() => ut({
|
|
217
|
+
values: _.value.map((t) => t.period),
|
|
218
|
+
maxDatapoints: _.value.length,
|
|
219
|
+
formatter: e.value.style.dataLabel.datetimeFormatter,
|
|
220
|
+
start: 0,
|
|
221
|
+
end: _.value.length
|
|
222
|
+
})), d = h(() => m.value.map((t, a) => {
|
|
223
|
+
const l = isNaN(t.value) || [void 0, null, "NaN", NaN, 1 / 0, -1 / 0].includes(t.value) ? 0 : t.value || 0, u = i.value.width / A.value;
|
|
224
|
+
return {
|
|
225
|
+
absoluteValue: l,
|
|
226
|
+
period: z.value && z.value[a] && z.value[a].text ? z.value[a].text : t.period,
|
|
227
|
+
plotValue: l + M.value,
|
|
228
|
+
toMax: Z(l + M.value),
|
|
229
|
+
x: i.value.start + a * u,
|
|
230
|
+
y: i.value.bottom - i.value.height * Z(l + M.value),
|
|
231
|
+
id: `plot_${g.value}_${a}`,
|
|
232
|
+
color: C.value ? e.value.style.bar.color : e.value.style.area.useGradient ? W(e.value.style.line.color, 0.05 * (1 - a / A.value)) : e.value.style.line.color,
|
|
233
|
+
width: u
|
|
234
|
+
};
|
|
235
|
+
})), Ve = h(() => {
|
|
236
|
+
const t = { x: d.value[0].x || 0, y: (o.value.height || 0) - 6 }, a = { x: d.value[d.value.length - 1].x || 0, y: (o.value.height || 0) - 6 }, l = [];
|
|
237
|
+
return d.value.forEach((u) => {
|
|
238
|
+
l.push(`${u.x || 0},${u.y || 0} `);
|
|
239
|
+
}), [t.x, t.y, ...l, a.x, a.y].toString();
|
|
240
|
+
}), v = y(void 0), $ = y(void 0);
|
|
241
|
+
function ze(t, a) {
|
|
242
|
+
e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: t, seriesIndex: a }), v.value = t, $.value || ($.value = t), Y("hoverIndex", { index: a });
|
|
243
|
+
}
|
|
244
|
+
function De(t, a) {
|
|
245
|
+
e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: t, seriesIndex: a }), $.value = v.value, v.value = void 0, Y("hoverIndex", { index: void 0 });
|
|
246
|
+
}
|
|
247
|
+
const k = h(() => {
|
|
248
|
+
if (ue.value) {
|
|
249
|
+
const t = d.value.map((l) => l.absoluteValue), a = t.reduce((l, u) => l + u, 0);
|
|
250
|
+
return {
|
|
251
|
+
latest: d.value[d.value.length - 1] ? d.value[d.value.length - 1].absoluteValue : 0,
|
|
252
|
+
sum: a,
|
|
253
|
+
average: a / d.value.length,
|
|
254
|
+
median: Ze(t),
|
|
255
|
+
trend: qe(d.value.map(({ x: l, y: u, absoluteValue: K }) => ({
|
|
256
|
+
x: l,
|
|
257
|
+
y: u,
|
|
258
|
+
value: K
|
|
259
|
+
}))).trend
|
|
260
|
+
};
|
|
261
|
+
} else
|
|
262
|
+
return {
|
|
263
|
+
latest: null,
|
|
264
|
+
sum: null,
|
|
265
|
+
average: null,
|
|
266
|
+
median: null,
|
|
267
|
+
trend: null
|
|
268
|
+
};
|
|
269
|
+
}), de = h(() => ue.value ? e.value.style.dataLabel.valueType === "latest" ? k.value.latest : e.value.style.dataLabel.valueType === "sum" ? k.value.sum : e.value.style.dataLabel.valueType === "average" ? k.value.average : 0 : 0), C = h(() => e.value.type && e.value.type === "bar");
|
|
270
|
+
function Te(t, a) {
|
|
271
|
+
e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: t, seriesIndex: a }), Y("selectDatapoint", { datapoint: t, index: a });
|
|
272
|
+
}
|
|
273
|
+
return (t, a) => (s(), c("div", {
|
|
274
|
+
ref_key: "sparklineChart",
|
|
275
|
+
ref: R,
|
|
276
|
+
class: "vue-ui-sparkline",
|
|
277
|
+
id: g.value,
|
|
278
|
+
style: D(`width:100%;font-family:${e.value.style.fontFamily};`)
|
|
279
|
+
}, [
|
|
280
|
+
I(t.$slots, "before", ge(me({
|
|
281
|
+
selected: v.value,
|
|
282
|
+
latest: k.value.latest,
|
|
283
|
+
sum: k.value.sum,
|
|
284
|
+
average: k.value.average,
|
|
285
|
+
median: k.value.median,
|
|
286
|
+
trend: k.value.trend
|
|
287
|
+
})), void 0, !0),
|
|
288
|
+
e.value.style.title.show && x.showInfo ? (s(), c("div", {
|
|
289
|
+
key: 0,
|
|
290
|
+
ref_key: "chartTitle",
|
|
291
|
+
ref: oe,
|
|
292
|
+
class: "vue-ui-sparkline-title",
|
|
293
|
+
style: D(`display:flex;align-items:center;width:100%;color:${e.value.style.title.color};background:${e.value.style.backgroundColor};justify-content:${e.value.style.title.textAlign === "left" ? "flex-start" : e.value.style.title.textAlign === "right" ? "flex-end" : "center"};height:${e.value.style.title.fontSize * 2}px;font-size:${e.value.style.title.fontSize}px;font-weight:${e.value.style.title.bold ? "bold" : "normal"};`)
|
|
294
|
+
}, [
|
|
295
|
+
p("span", {
|
|
296
|
+
style: D(`padding:${e.value.style.title.textAlign === "left" ? "0 0 0 12px" : e.value.style.title.textAlign === "right" ? "0 12px 0 0" : "0"}`)
|
|
297
|
+
}, T(v.value ? v.value.period : e.value.style.title.text), 5)
|
|
298
|
+
], 4)) : f("", !0),
|
|
299
|
+
(s(), c("svg", {
|
|
300
|
+
ref_key: "svgRef",
|
|
301
|
+
ref: ne,
|
|
302
|
+
xmlns: n(Ke),
|
|
303
|
+
viewBox: `0 0 ${o.value.width} ${o.value.height}`,
|
|
304
|
+
style: D(`background:${e.value.style.backgroundColor};overflow:visible`),
|
|
305
|
+
onMouseleave: a[0] || (a[0] = (l) => $.value = void 0)
|
|
306
|
+
}, [
|
|
307
|
+
Fe(n($e)),
|
|
308
|
+
t.$slots["chart-background"] ? (s(), c("foreignObject", {
|
|
309
|
+
key: 0,
|
|
310
|
+
x: 0,
|
|
311
|
+
y: 0,
|
|
312
|
+
width: o.value.width <= 0 ? 10 : o.value.width,
|
|
313
|
+
height: o.value.height <= 0 ? 10 : o.value.height,
|
|
314
|
+
style: {
|
|
315
|
+
pointerEvents: "none"
|
|
316
|
+
}
|
|
317
|
+
}, [
|
|
318
|
+
I(t.$slots, "chart-background", {}, void 0, !0)
|
|
319
|
+
], 8, rt)) : f("", !0),
|
|
320
|
+
p("defs", null, [
|
|
321
|
+
p("linearGradient", {
|
|
322
|
+
x1: "0%",
|
|
323
|
+
y1: "0%",
|
|
324
|
+
x2: "100%",
|
|
325
|
+
y2: "0%",
|
|
326
|
+
id: `sparkline_gradient_${g.value}`
|
|
327
|
+
}, [
|
|
328
|
+
p("stop", {
|
|
329
|
+
offset: "0%",
|
|
330
|
+
"stop-color": n(P)(n(W)(e.value.style.area.color, 0.05), e.value.style.area.opacity)
|
|
331
|
+
}, null, 8, vt),
|
|
332
|
+
p("stop", {
|
|
333
|
+
offset: "100%",
|
|
334
|
+
"stop-color": n(P)(e.value.style.area.color, e.value.style.area.opacity)
|
|
335
|
+
}, null, 8, dt)
|
|
336
|
+
], 8, it),
|
|
337
|
+
p("linearGradient", {
|
|
338
|
+
x2: "0%",
|
|
339
|
+
y2: "100%",
|
|
340
|
+
id: `sparkline_bar_gradient_pos_${g.value}`
|
|
341
|
+
}, [
|
|
342
|
+
p("stop", {
|
|
343
|
+
offset: "0%",
|
|
344
|
+
"stop-color": e.value.style.bar.color
|
|
345
|
+
}, null, 8, ht),
|
|
346
|
+
p("stop", {
|
|
347
|
+
offset: "100%",
|
|
348
|
+
"stop-color": n(W)(e.value.style.bar.color, 0.05)
|
|
349
|
+
}, null, 8, ft)
|
|
350
|
+
], 8, ct),
|
|
351
|
+
p("linearGradient", {
|
|
352
|
+
x2: "0%",
|
|
353
|
+
y2: "100%",
|
|
354
|
+
id: `sparkline_bar_gradient_neg_${g.value}`
|
|
355
|
+
}, [
|
|
356
|
+
p("stop", {
|
|
357
|
+
offset: "0%",
|
|
358
|
+
"stop-color": n(W)(e.value.style.bar.color, 0.05)
|
|
359
|
+
}, null, 8, pt),
|
|
360
|
+
p("stop", {
|
|
361
|
+
offset: "100%",
|
|
362
|
+
"stop-color": e.value.style.bar.color
|
|
363
|
+
}, null, 8, gt)
|
|
364
|
+
], 8, yt)
|
|
365
|
+
]),
|
|
366
|
+
e.value.style.area.show && !C.value && d.value[0] && d.value.length > 1 ? (s(), c("g", mt, [
|
|
367
|
+
e.value.style.line.smooth ? (s(), c("path", {
|
|
368
|
+
key: 0,
|
|
369
|
+
d: `M ${d.value[0].x},${i.value.bottom} ${n(_e)(d.value)} L ${d.value.at(-1).x},${i.value.bottom} Z`,
|
|
370
|
+
fill: e.value.style.area.useGradient ? `url(#sparkline_gradient_${g.value})` : n(P)(e.value.style.area.color, e.value.style.area.opacity)
|
|
371
|
+
}, null, 8, bt)) : (s(), c("path", {
|
|
372
|
+
key: 1,
|
|
373
|
+
d: `M${Ve.value}Z`,
|
|
374
|
+
fill: e.value.style.area.useGradient ? `url(#sparkline_gradient_${g.value})` : n(P)(e.value.style.area.color, e.value.style.area.opacity)
|
|
375
|
+
}, null, 8, kt))
|
|
376
|
+
])) : f("", !0),
|
|
377
|
+
e.value.style.line.smooth && !C.value ? (s(), c("path", {
|
|
378
|
+
key: 2,
|
|
379
|
+
d: `M ${n(_e)(d.value) || "0,0"}`,
|
|
380
|
+
stroke: e.value.style.line.color,
|
|
381
|
+
fill: "none",
|
|
382
|
+
"stroke-width": e.value.style.line.strokeWidth,
|
|
383
|
+
"stroke-linecap": "round"
|
|
384
|
+
}, null, 8, xt)) : f("", !0),
|
|
385
|
+
!e.value.style.line.smooth && !C.value ? (s(), c("path", {
|
|
386
|
+
key: 3,
|
|
387
|
+
d: `M ${n(He)(d.value) || "0,0"}`,
|
|
388
|
+
stroke: e.value.style.line.color,
|
|
389
|
+
fill: "none",
|
|
390
|
+
"stroke-width": e.value.style.line.strokeWidth,
|
|
391
|
+
"stroke-linecap": "round"
|
|
392
|
+
}, null, 8, _t)) : f("", !0),
|
|
393
|
+
(s(!0), c(Q, null, ee(d.value, (l, u) => (s(), c("g", null, [
|
|
394
|
+
C.value ? (s(), c("rect", {
|
|
395
|
+
key: 0,
|
|
396
|
+
x: l.x - l.width / 2,
|
|
397
|
+
y: isNaN(l.absoluteValue > 0 ? l.y : L.value) ? 0 : l.absoluteValue > 0 ? l.y : L.value,
|
|
398
|
+
width: l.width,
|
|
399
|
+
height: isNaN(Math.abs(l.y - L.value)) ? 0 : Math.abs(l.y - L.value),
|
|
400
|
+
fill: l.absoluteValue > 0 ? `url(#sparkline_bar_gradient_pos_${g.value})` : `url(#sparkline_bar_gradient_neg_${g.value})`,
|
|
401
|
+
rx: e.value.style.bar.borderRadius
|
|
402
|
+
}, null, 8, wt)) : f("", !0),
|
|
403
|
+
e.value.style.verticalIndicator.show && (v.value && l.id === v.value.id || x.selectedIndex === u) ? (s(), c("line", {
|
|
404
|
+
key: 1,
|
|
405
|
+
x1: l.x,
|
|
406
|
+
x2: l.x,
|
|
407
|
+
y1: i.value.top - 6,
|
|
408
|
+
y2: i.value.bottom,
|
|
409
|
+
stroke: e.value.style.verticalIndicator.color || l.color,
|
|
410
|
+
"stroke-width": e.value.style.verticalIndicator.strokeWidth,
|
|
411
|
+
"stroke-linecap": "round",
|
|
412
|
+
"stroke-dasharray": e.value.style.verticalIndicator.strokeDasharray || 0
|
|
413
|
+
}, null, 8, Lt)) : f("", !0)
|
|
414
|
+
]))), 256)),
|
|
415
|
+
q.value < 0 ? (s(), c("line", {
|
|
416
|
+
key: 4,
|
|
417
|
+
x1: i.value.start,
|
|
418
|
+
x2: i.value.start + i.value.width,
|
|
419
|
+
y1: n(we)(L.value, i.value.bottom),
|
|
420
|
+
y2: n(we)(L.value, i.value.bottom),
|
|
421
|
+
stroke: e.value.style.zeroLine.color,
|
|
422
|
+
"stroke-dasharray": e.value.style.zeroLine.strokeWidth * 2,
|
|
423
|
+
"stroke-width": e.value.style.zeroLine.strokeWidth,
|
|
424
|
+
"stroke-linecap": "round"
|
|
425
|
+
}, null, 8, At)) : f("", !0),
|
|
426
|
+
e.value.style.plot.show ? (s(!0), c(Q, { key: 5 }, ee(d.value, (l, u) => (s(), c("g", null, [
|
|
427
|
+
v.value && l.id === v.value.id || x.selectedIndex === u || x.dataset.length === 1 ? (s(), c("circle", {
|
|
428
|
+
key: 0,
|
|
429
|
+
cx: l.x,
|
|
430
|
+
cy: l.y,
|
|
431
|
+
r: e.value.style.plot.radius,
|
|
432
|
+
fill: l.color,
|
|
433
|
+
stroke: e.value.style.plot.stroke,
|
|
434
|
+
"stroke-width": e.value.style.plot.strokeWidth
|
|
435
|
+
}, null, 8, $t)) : f("", !0)
|
|
436
|
+
]))), 256)) : f("", !0),
|
|
437
|
+
x.showInfo && e.value.style.dataLabel.show ? (s(), c("text", {
|
|
438
|
+
key: 6,
|
|
439
|
+
x: e.value.style.dataLabel.position === "left" ? 12 + e.value.style.dataLabel.offsetX : i.value.width + 12 + e.value.style.dataLabel.offsetX,
|
|
440
|
+
y: o.value.height / 2 + e.value.style.dataLabel.fontSize / 2.5 + e.value.style.dataLabel.offsetY,
|
|
441
|
+
"font-size": e.value.style.dataLabel.fontSize,
|
|
442
|
+
"font-weight": e.value.style.dataLabel.bold ? "bold" : "normal",
|
|
443
|
+
fill: e.value.style.dataLabel.color
|
|
444
|
+
}, T(v.value ? n(ae)(
|
|
445
|
+
e.value.style.dataLabel.formatter,
|
|
446
|
+
v.value.absoluteValue,
|
|
447
|
+
n(le)({ p: e.value.style.dataLabel.prefix, v: v.value.absoluteValue, s: e.value.style.dataLabel.suffix, r: e.value.style.dataLabel.roundingValue }),
|
|
448
|
+
{ datapoint: v.value }
|
|
449
|
+
) : n(ae)(
|
|
450
|
+
e.value.style.dataLabel.formatter,
|
|
451
|
+
de.value,
|
|
452
|
+
n(le)({ p: e.value.style.dataLabel.prefix, v: de.value, s: e.value.style.dataLabel.suffix, r: e.value.style.dataLabel.roundingValue })
|
|
453
|
+
)), 9, Nt)) : f("", !0),
|
|
454
|
+
(s(!0), c(Q, null, ee(d.value, (l, u) => (s(), c("rect", {
|
|
455
|
+
x: l.x - (i.value.width / (A.value + 1) > o.value.padding ? o.value.padding : i.value.width / (A.value + 1)) / 2,
|
|
456
|
+
y: i.value.top - 6,
|
|
457
|
+
height: i.value.height + 6,
|
|
458
|
+
width: i.value.width / (A.value + 1) > o.value.padding ? o.value.padding : i.value.width / (A.value + 1),
|
|
459
|
+
fill: "transparent",
|
|
460
|
+
onMouseenter: () => ze(l, u),
|
|
461
|
+
onMouseleave: () => De(l, u),
|
|
462
|
+
onClick: () => Te(l, u)
|
|
463
|
+
}, null, 40, Mt))), 256)),
|
|
464
|
+
I(t.$slots, "svg", { svg: o.value }, void 0, !0)
|
|
465
|
+
], 44, nt)),
|
|
466
|
+
v.value && e.value.style.tooltip.show ? (s(), pe(n(Ne), {
|
|
467
|
+
key: 1,
|
|
468
|
+
x: v.value.x,
|
|
469
|
+
y: v.value.y,
|
|
470
|
+
prevX: $.value.x,
|
|
471
|
+
prevY: $.value.y,
|
|
472
|
+
offsetY: e.value.style.plot.radius * 3 + e.value.style.tooltip.offsetY,
|
|
473
|
+
svgRef: n(ne),
|
|
474
|
+
background: e.value.style.tooltip.backgroundColor,
|
|
475
|
+
color: e.value.style.tooltip.color,
|
|
476
|
+
fontSize: e.value.style.tooltip.fontSize,
|
|
477
|
+
borderWidth: e.value.style.tooltip.borderWidth,
|
|
478
|
+
borderColor: e.value.style.tooltip.borderColor,
|
|
479
|
+
borderRadius: e.value.style.tooltip.borderRadius,
|
|
480
|
+
backgroundOpacity: e.value.style.tooltip.backgroundOpacity
|
|
481
|
+
}, {
|
|
482
|
+
default: Ee(() => [
|
|
483
|
+
I(t.$slots, "tooltip", ge(me({ ...v.value })), () => [
|
|
484
|
+
Oe(T(v.value.period) + ": " + T(n(ae)(
|
|
485
|
+
e.value.style.dataLabel.formatter,
|
|
486
|
+
v.value.absoluteValue,
|
|
487
|
+
n(le)({
|
|
488
|
+
p: e.value.style.dataLabel.prefix,
|
|
489
|
+
v: v.value.absoluteValue,
|
|
490
|
+
s: e.value.style.dataLabel.suffix,
|
|
491
|
+
r: e.value.style.dataLabel.roundingValue
|
|
492
|
+
}),
|
|
493
|
+
{ datapoint: v.value }
|
|
494
|
+
)), 1)
|
|
495
|
+
], !0)
|
|
496
|
+
]),
|
|
497
|
+
_: 3
|
|
498
|
+
}, 8, ["x", "y", "prevX", "prevY", "offsetY", "svgRef", "background", "color", "fontSize", "borderWidth", "borderColor", "borderRadius", "backgroundOpacity"])) : f("", !0),
|
|
499
|
+
t.$slots.source ? (s(), c("div", {
|
|
500
|
+
key: 2,
|
|
501
|
+
ref_key: "source",
|
|
502
|
+
ref: se,
|
|
503
|
+
dir: "auto"
|
|
504
|
+
}, [
|
|
505
|
+
I(t.$slots, "source", {}, void 0, !0)
|
|
506
|
+
], 512)) : f("", !0),
|
|
507
|
+
n(F) ? (s(), pe(lt, { key: 3 })) : f("", !0)
|
|
508
|
+
], 12, st));
|
|
509
|
+
}
|
|
510
|
+
}, Rt = /* @__PURE__ */ ot(Ct, [["__scopeId", "data-v-12334391"]]);
|
|
511
|
+
export {
|
|
512
|
+
Rt as default
|
|
513
|
+
};
|