vue-data-ui 2.2.92 → 2.2.93
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/dist/index-DZlxUin4.js +57288 -0
- package/dist/{index.es-Dc9Fd4o6.js → index.es-Cgqo-FBk.js} +1 -1
- package/dist/style.css +1 -1
- package/dist/vue-data-ui.js +61 -455
- package/package.json +1 -1
- package/dist/data-table-d-VcuH-r.js +0 -1488
- package/dist/legend-DJCYLsl_.js +0 -61
- package/dist/themes-lgjsYHsH.js +0 -4967
- package/dist/title-BF-9Qcni.js +0 -56
- package/dist/tooltip-D85WEOKi.js +0 -94
- package/dist/user-options-DZgCz8UA.js +0 -415
- package/dist/vue-ui-3d-bar-DW7kGJSz.js +0 -20360
- package/dist/vue-ui-age-pyramid-4hcuKpFY.js +0 -781
- package/dist/vue-ui-annotator-C83FVvl8.js +0 -2175
- package/dist/vue-ui-candlestick-diclGj95.js +0 -807
- package/dist/vue-ui-chestnut-ACetHLdG.js +0 -1049
- package/dist/vue-ui-cursor-Rx7UNaYT.js +0 -229
- package/dist/vue-ui-dashboard-B3PlN0ks.js +0 -231
- package/dist/vue-ui-digits-CxMXID42.js +0 -154
- package/dist/vue-ui-donut-DMiwVXNd.js +0 -1534
- package/dist/vue-ui-dumbbell-B_X1T8TR.js +0 -621
- package/dist/vue-ui-flow-B72wzQ6V.js +0 -451
- package/dist/vue-ui-galaxy-DXX5yivT.js +0 -482
- package/dist/vue-ui-gauge-Cs9PDurH.js +0 -466
- package/dist/vue-ui-heatmap-PcoNSLdN.js +0 -581
- package/dist/vue-ui-kpi-DchEmPtB.js +0 -55
- package/dist/vue-ui-mini-loader-DltJLkqy.js +0 -131
- package/dist/vue-ui-molecule-CWvukBzs.js +0 -746
- package/dist/vue-ui-mood-radar-DEfdtIi8.js +0 -544
- package/dist/vue-ui-nested-donuts-9URpqgXE.js +0 -768
- package/dist/vue-ui-onion-C0eowUT6.js +0 -551
- package/dist/vue-ui-parallel-coordinate-plot-Bc_pAaPJ.js +0 -647
- package/dist/vue-ui-quadrant-_ddVAm9V.js +0 -1174
- package/dist/vue-ui-quick-chart-Cio0hDYO.js +0 -1310
- package/dist/vue-ui-radar-Dyg38i33.js +0 -853
- package/dist/vue-ui-rating-CE1Lmwd2.js +0 -271
- package/dist/vue-ui-relation-circle-BMlB3k3d.js +0 -303
- package/dist/vue-ui-rings-BuXeijvb.js +0 -507
- package/dist/vue-ui-scatter-B1hZfOua.js +0 -870
- package/dist/vue-ui-screenshot-0QXgxzGs.js +0 -160
- package/dist/vue-ui-smiley-B7kR7exr.js +0 -763
- package/dist/vue-ui-spark-trend-BmL2KiYL.js +0 -245
- package/dist/vue-ui-sparkgauge-BMzFv14L.js +0 -158
- package/dist/vue-ui-sparkhistogram-DWpOXqHm.js +0 -243
- package/dist/vue-ui-sparkstackbar-DB9VQXlc.js +0 -244
- package/dist/vue-ui-strip-plot-DyN6P0JO.js +0 -614
- package/dist/vue-ui-table-DM3zL89q.js +0 -2180
- package/dist/vue-ui-table-heatmap-gWx0Nslu.js +0 -237
- package/dist/vue-ui-thermometer-Bcqv5kd_.js +0 -384
- package/dist/vue-ui-timer-BIFxjujK.js +0 -451
- package/dist/vue-ui-tiremarks-zBwHpED_.js +0 -248
- package/dist/vue-ui-treemap-BaplVc_z.js +0 -719
- package/dist/vue-ui-vertical-bar-CdK6ZJPM.js +0 -734
- package/dist/vue-ui-waffle-COOzH7M3.js +0 -635
- package/dist/vue-ui-wheel-BEpuVTBk.js +0 -226
- package/dist/vue-ui-word-cloud-DNqxAAiX.js +0 -344
- package/dist/vue-ui-xy-_mHq-czW.js +0 -2058
- package/dist/vue-ui-xy-canvas-DqX8Gee5.js +0 -1003
|
@@ -1,1003 +0,0 @@
|
|
|
1
|
-
import { ref as c, computed as b, watch as le, onMounted as da, onBeforeUnmount as ha, openBlock as O, createElementBlock as de, normalizeStyle as U, normalizeClass as ya, createVNode as he, createCommentVNode as te, createBlock as X, unref as Y, createSlots as fa, withCtx as m, renderSlot as C, normalizeProps as oe, guardReactiveProps as ue, createElementVNode as Z, toDisplayString as _e, createTextVNode as ga } from "vue";
|
|
2
|
-
import { _ as pa, e as ba, f as ma, p as E, g as xa, A as ye, n as G, h as De, U as La, i as ka, j as Ca, y as He, D as wa, z as Sa, v as za, w as $a, o as j, l as Ta } from "./data-table-d-VcuH-r.js";
|
|
3
|
-
import { d as Ma, c as Ra, a as We, t as Oa, l as k, r as fe, b as I, p as Ae, u as Ia } from "./vue-ui-age-pyramid-4hcuKpFY.js";
|
|
4
|
-
import { t as Pa } from "./themes-lgjsYHsH.js";
|
|
5
|
-
import { _ as Fa } from "./tooltip-D85WEOKi.js";
|
|
6
|
-
import { L as Ea } from "./legend-DJCYLsl_.js";
|
|
7
|
-
import { u as Be, _ as Na } from "./title-BF-9Qcni.js";
|
|
8
|
-
import { S as _a } from "./vue-ui-candlestick-diclGj95.js";
|
|
9
|
-
import { U as Da } from "./user-options-DZgCz8UA.js";
|
|
10
|
-
import { u as Ha, a as Wa, S as Aa, A as Ba } from "./vue-ui-3d-bar-DW7kGJSz.js";
|
|
11
|
-
const Ua = ["id"], Xa = ["onClick"], Ya = ["innerHTML"], Za = {
|
|
12
|
-
__name: "vue-ui-xy-canvas",
|
|
13
|
-
props: {
|
|
14
|
-
dataset: {
|
|
15
|
-
type: Array,
|
|
16
|
-
default() {
|
|
17
|
-
return [];
|
|
18
|
-
}
|
|
19
|
-
},
|
|
20
|
-
config: {
|
|
21
|
-
type: Object,
|
|
22
|
-
default() {
|
|
23
|
-
return {};
|
|
24
|
-
}
|
|
25
|
-
}
|
|
26
|
-
},
|
|
27
|
-
emits: ["selectLegend"],
|
|
28
|
-
setup(ge, { expose: Ue, emit: Xe }) {
|
|
29
|
-
const N = ge, { vue_ui_xy_canvas: Ye } = Ha(), re = c(ba()), V = c(null), S = c(null), D = c(null), s = c(null), y = c(1), T = c(1), q = c(!1), d = c(null), J = c(""), pe = c(null), w = c([]), _ = c(1), P = c(!0), z = c(!0), se = c(null), be = c(0), me = c(0), ne = c(!1), xe = c(null), Le = c(null), ke = c(null), ie = b(() => !!N.dataset && N.dataset.length), a = b(() => {
|
|
30
|
-
const e = Be({
|
|
31
|
-
userConfig: N.config,
|
|
32
|
-
defaultConfig: Ye
|
|
33
|
-
});
|
|
34
|
-
return e.theme ? {
|
|
35
|
-
...Be({
|
|
36
|
-
userConfig: Pa.vue_ui_xy_canvas[e.theme] || N.config,
|
|
37
|
-
defaultConfig: e
|
|
38
|
-
}),
|
|
39
|
-
customPalette: ma[e.theme] || E
|
|
40
|
-
} : e;
|
|
41
|
-
}), Ce = c(a.value.style.chart.aspectRatio), { isPrinting: Ze, isImaging: Ge, generatePdf: we, generateImage: Se } = Wa({
|
|
42
|
-
elementId: `xy_canvas_${re.value}`,
|
|
43
|
-
fileName: a.value.style.chart.title.text || "vue-ui-xy-canvas"
|
|
44
|
-
}), r = c({
|
|
45
|
-
showTable: a.value.table.show,
|
|
46
|
-
showDataLabels: a.value.style.chart.dataLabels.show,
|
|
47
|
-
stacked: a.value.style.chart.stacked,
|
|
48
|
-
showTooltip: a.value.style.chart.tooltip.show
|
|
49
|
-
});
|
|
50
|
-
function je(e) {
|
|
51
|
-
ne.value = e, me.value += 1;
|
|
52
|
-
}
|
|
53
|
-
const ze = b(() => xa(a.value.customPalette)), F = b(() => Math.max(...H.value.filter((e, t) => !w.value.includes(e.absoluteIndex)).map((e) => e.series.length))), l = b(() => {
|
|
54
|
-
const e = y.value - y.value * (a.value.style.chart.paddingProportions.left + a.value.style.chart.paddingProportions.right);
|
|
55
|
-
return {
|
|
56
|
-
canvasWidth: y.value,
|
|
57
|
-
canvasHeight: T.value,
|
|
58
|
-
left: y.value * a.value.style.chart.paddingProportions.left,
|
|
59
|
-
top: T.value * a.value.style.chart.paddingProportions.top,
|
|
60
|
-
right: y.value - y.value * a.value.style.chart.paddingProportions.right,
|
|
61
|
-
bottom: T.value - T.value * a.value.style.chart.paddingProportions.bottom,
|
|
62
|
-
width: e,
|
|
63
|
-
height: T.value - T.value * (a.value.style.chart.paddingProportions.top + a.value.style.chart.paddingProportions.bottom),
|
|
64
|
-
slot: e / (u.value.end - u.value.start)
|
|
65
|
-
};
|
|
66
|
-
});
|
|
67
|
-
function $e(e, t) {
|
|
68
|
-
return e / t;
|
|
69
|
-
}
|
|
70
|
-
function Ve({ hasAutoScale: e, series: t, min: o, max: i, scale: v, yOffset: f, individualHeight: n, stackIndex: g = null }) {
|
|
71
|
-
return t.map((L, ce) => {
|
|
72
|
-
const $ = v.min < 0 ? Math.abs(v.min) : 0, M = $e(L + $, $ + v.max);
|
|
73
|
-
let R, W;
|
|
74
|
-
e && (R = Math.abs(v.min), W = $e(L + R, v.max + R));
|
|
75
|
-
let A = 0;
|
|
76
|
-
return g === null ? A = l.value.bottom - l.value.height * (e ? W : M) : A = l.value.bottom - f - n * (e ? W : M), {
|
|
77
|
-
x: l.value.left + l.value.slot * ce + l.value.slot / 2,
|
|
78
|
-
y: A,
|
|
79
|
-
value: L
|
|
80
|
-
};
|
|
81
|
-
});
|
|
82
|
-
}
|
|
83
|
-
const p = b(() => {
|
|
84
|
-
const e = Math.min(...H.value.filter((n, g) => !w.value.includes(n.absoluteIndex)).flatMap((n) => n.series.slice(u.value.start, u.value.end))), t = Math.max(...H.value.filter((n, g) => !w.value.includes(n.absoluteIndex)).flatMap((n) => n.series.slice(u.value.start, u.value.end))), o = ye(e < 0 ? e : 0, t === e ? e + 1 < 0 ? 0 : e + 1 : t < 0 ? 0 : t, a.value.style.chart.scale.ticks), i = o.min < 0 ? Math.abs(o.min) : 0, v = l.value.bottom - l.value.height * (i / (o.max + i)), f = o.ticks.map((n) => ({
|
|
85
|
-
y: l.value.bottom - l.value.height * ((n + i) / (o.max + i)),
|
|
86
|
-
x: l.value.left - 8,
|
|
87
|
-
value: n
|
|
88
|
-
}));
|
|
89
|
-
return {
|
|
90
|
-
absoluteMin: i,
|
|
91
|
-
max: t,
|
|
92
|
-
min: e,
|
|
93
|
-
scale: o,
|
|
94
|
-
yLabels: f,
|
|
95
|
-
zero: v
|
|
96
|
-
};
|
|
97
|
-
}), qe = b(() => h.value.map((e) => `
|
|
98
|
-
<div style="display:flex;flex-direction:row;gap:6px;align-items:center;">
|
|
99
|
-
<svg viewBox="0 0 10 10" height="12" width="12">
|
|
100
|
-
<circle cx="5" cy="5" r="5" fill="${e.color}"/>
|
|
101
|
-
</svg>
|
|
102
|
-
<span>${e.name ? e.name + ": " : ""}</span>
|
|
103
|
-
<span>${G({
|
|
104
|
-
p: e.prefix || "",
|
|
105
|
-
v: e.series[d.value],
|
|
106
|
-
s: e.suffix || "",
|
|
107
|
-
r: e.rounding || 0
|
|
108
|
-
})}</span>
|
|
109
|
-
</div>
|
|
110
|
-
`)), H = b(() => N.dataset.map((e, t) => ({
|
|
111
|
-
...e,
|
|
112
|
-
absoluteIndex: t,
|
|
113
|
-
color: De(e.color || ze.value[t] || E[t] || E[t % E.length])
|
|
114
|
-
}))), h = b(() => La(H.value.filter((e, t) => !w.value.includes(e.absoluteIndex))).map((e, t) => ({
|
|
115
|
-
...e,
|
|
116
|
-
series: e.series.slice(u.value.start, u.value.end)
|
|
117
|
-
})).map((e, t) => {
|
|
118
|
-
let o = Math.min(...e.series) || 0, i = Math.max(...e.series) || 1;
|
|
119
|
-
o === i && (o = o >= 0 ? i - 1 : o, i = i >= 0 ? i : o + 1);
|
|
120
|
-
const f = {
|
|
121
|
-
ratios: e.series.filter((B) => ![null, void 0].includes(B)).map((B) => (B - o) / (i - o)),
|
|
122
|
-
valueMin: o,
|
|
123
|
-
valueMax: i
|
|
124
|
-
}, n = e.scaleSteps || a.value.style.chart.scale.ticks;
|
|
125
|
-
let g;
|
|
126
|
-
e.autoScaling ? g = ye(f.valueMin, f.valueMax, n) : g = ye(f.valueMin < 0 ? f.valueMin : 0, f.valueMax <= 0 ? 0 : f.valueMax, n);
|
|
127
|
-
const L = r.value.stacked ? l.value.height * (1 - e.cumulatedStackRatio) : 0, ce = r.value.stacked ? l.value.height / a.value.style.chart.stackGap : 0, $ = r.value.stacked ? l.value.height * e.stackRatio - ce : l.value.height, M = g.min < 0 ? Math.abs(g.min) : 0;
|
|
128
|
-
let R;
|
|
129
|
-
e.autoScaling && r.value.stacked && i <= 0 ? R = l.value.bottom - L - $ : R = l.value.bottom - L - $ * (M / (g.max + M));
|
|
130
|
-
const W = g.ticks.map((B, ca) => ({
|
|
131
|
-
y: l.value.bottom - L - $ * (ca / (g.ticks.length - 1)),
|
|
132
|
-
x: l.value.left - 8,
|
|
133
|
-
value: B
|
|
134
|
-
})), A = Ve({
|
|
135
|
-
hasAutoScale: r.value.stacked && e.autoScaling,
|
|
136
|
-
series: e.series,
|
|
137
|
-
min: r.value.stacked ? o : p.value.min,
|
|
138
|
-
max: r.value.stacked ? i : p.value.max,
|
|
139
|
-
scale: r.value.stacked ? g : p.value.scale,
|
|
140
|
-
yOffset: L,
|
|
141
|
-
individualHeight: $,
|
|
142
|
-
stackIndex: r.value.stacked ? t : null
|
|
143
|
-
});
|
|
144
|
-
return {
|
|
145
|
-
...e,
|
|
146
|
-
coordinatesLine: A,
|
|
147
|
-
min: o,
|
|
148
|
-
max: i,
|
|
149
|
-
localScale: g,
|
|
150
|
-
localZero: R,
|
|
151
|
-
localMin: M,
|
|
152
|
-
localYLabels: W,
|
|
153
|
-
yOffset: L,
|
|
154
|
-
individualHeight: $
|
|
155
|
-
};
|
|
156
|
-
})), u = c({
|
|
157
|
-
start: 0,
|
|
158
|
-
end: F.value
|
|
159
|
-
});
|
|
160
|
-
function Je() {
|
|
161
|
-
u.value = {
|
|
162
|
-
start: 0,
|
|
163
|
-
end: F.value
|
|
164
|
-
}, be.value += 1;
|
|
165
|
-
}
|
|
166
|
-
const Ke = b(() => h.value.filter((e) => ["line", "plot", void 0].includes(e.type))), x = b(() => h.value.filter((e) => e.type === "bar"));
|
|
167
|
-
function Qe() {
|
|
168
|
-
if (!S.value)
|
|
169
|
-
return;
|
|
170
|
-
const e = D.value.offsetWidth, t = D.value.offsetHeight;
|
|
171
|
-
S.value.width = e * _.value * 2, S.value.height = t * _.value * 2, y.value = e * _.value * 2, T.value = t * _.value * 2, s.value.scale(_.value, _.value), ve();
|
|
172
|
-
}
|
|
173
|
-
function ea() {
|
|
174
|
-
if (s.value.fillStyle = a.value.style.chart.backgroundColor, s.value.fillRect(0, 0, l.value.canvasWidth, l.value.canvasHeight), r.value.stacked)
|
|
175
|
-
a.value.style.chart.grid.y.verticalLines.show && u.value.end - u.value.start < a.value.style.chart.grid.y.verticalLines.hideUnderXLength && h.value.forEach((e) => {
|
|
176
|
-
for (let t = 0; t < u.value.end - u.value.start + 1; t += 1)
|
|
177
|
-
k(
|
|
178
|
-
s.value,
|
|
179
|
-
[
|
|
180
|
-
{
|
|
181
|
-
x: l.value.left + l.value.slot * t,
|
|
182
|
-
y: l.value.bottom - e.yOffset - e.individualHeight
|
|
183
|
-
},
|
|
184
|
-
{
|
|
185
|
-
x: l.value.left + l.value.slot * t,
|
|
186
|
-
y: l.value.bottom - e.yOffset
|
|
187
|
-
}
|
|
188
|
-
],
|
|
189
|
-
{
|
|
190
|
-
color: a.value.style.chart.grid.y.verticalLines.color
|
|
191
|
-
}
|
|
192
|
-
);
|
|
193
|
-
}), a.value.style.chart.grid.x.horizontalLines.show && (a.value.style.chart.grid.x.horizontalLines.alternate ? h.value.forEach((e) => {
|
|
194
|
-
e.localYLabels.forEach((t, o) => {
|
|
195
|
-
o < e.localYLabels.length - 1 && fe(
|
|
196
|
-
s.value,
|
|
197
|
-
[
|
|
198
|
-
{ x: l.value.left, y: t.y },
|
|
199
|
-
{ x: l.value.right, y: t.y },
|
|
200
|
-
{ x: l.value.right, y: e.localYLabels[o + 1].y },
|
|
201
|
-
{ x: l.value.left, y: e.localYLabels[o + 1].y }
|
|
202
|
-
],
|
|
203
|
-
{
|
|
204
|
-
fillColor: o % 2 === 0 ? "transparent" : a.value.style.chart.grid.x.horizontalLines.color + j[a.value.style.chart.grid.x.horizontalLines.opacity],
|
|
205
|
-
strokeColor: "transparent"
|
|
206
|
-
}
|
|
207
|
-
);
|
|
208
|
-
});
|
|
209
|
-
}) : h.value.forEach((e) => {
|
|
210
|
-
e.localYLabels.slice(u.value.start, u.value.end).forEach((t) => {
|
|
211
|
-
k(
|
|
212
|
-
s.value,
|
|
213
|
-
[
|
|
214
|
-
{ x: l.value.left, y: t.y },
|
|
215
|
-
{ x: l.value.right, y: t.y }
|
|
216
|
-
],
|
|
217
|
-
{
|
|
218
|
-
color: a.value.style.chart.grid.x.horizontalLines.color
|
|
219
|
-
}
|
|
220
|
-
);
|
|
221
|
-
});
|
|
222
|
-
})), a.value.style.chart.grid.zeroLine.show && h.value.forEach((e) => {
|
|
223
|
-
k(
|
|
224
|
-
s.value,
|
|
225
|
-
[
|
|
226
|
-
{ x: l.value.left, y: e.localZero },
|
|
227
|
-
{ x: l.value.right, y: e.localZero }
|
|
228
|
-
],
|
|
229
|
-
{
|
|
230
|
-
color: a.value.style.chart.grid.zeroLine.color,
|
|
231
|
-
lineDash: a.value.style.chart.grid.zeroLine.dashed ? [10, 10] : [0, 0]
|
|
232
|
-
}
|
|
233
|
-
);
|
|
234
|
-
}), a.value.style.chart.grid.y.axisLabels.show && h.value.forEach((e) => {
|
|
235
|
-
k(
|
|
236
|
-
s.value,
|
|
237
|
-
[
|
|
238
|
-
{ x: l.value.left, y: l.value.bottom - e.yOffset },
|
|
239
|
-
{ x: l.value.left, y: l.value.bottom - e.yOffset - e.individualHeight }
|
|
240
|
-
],
|
|
241
|
-
{
|
|
242
|
-
color: e.color
|
|
243
|
-
}
|
|
244
|
-
), k(
|
|
245
|
-
s.value,
|
|
246
|
-
[
|
|
247
|
-
{ x: l.value.right, y: l.value.bottom - e.yOffset },
|
|
248
|
-
{ x: l.value.right, y: l.value.bottom - e.yOffset - e.individualHeight }
|
|
249
|
-
],
|
|
250
|
-
{
|
|
251
|
-
color: e.color
|
|
252
|
-
}
|
|
253
|
-
), e.localYLabels.forEach((t) => {
|
|
254
|
-
I(
|
|
255
|
-
s.value,
|
|
256
|
-
G({
|
|
257
|
-
p: e.prefix || a.value.style.chart.grid.y.axisLabels.prefix || "",
|
|
258
|
-
v: t.value,
|
|
259
|
-
s: e.suffix || a.value.style.chart.grid.y.axisLabels.suffix || "",
|
|
260
|
-
r: e.rounding || a.value.style.chart.grid.y.axisLabels.rounding || 0
|
|
261
|
-
}),
|
|
262
|
-
t.x + a.value.style.chart.grid.y.axisLabels.offsetX,
|
|
263
|
-
t.y,
|
|
264
|
-
{
|
|
265
|
-
align: "right",
|
|
266
|
-
font: `${y.value / 40 * a.value.style.chart.grid.y.axisLabels.fontSizeRatio}px ${a.value.style.fontFamily}`,
|
|
267
|
-
color: e.color
|
|
268
|
-
}
|
|
269
|
-
);
|
|
270
|
-
});
|
|
271
|
-
}), h.value.forEach((e) => {
|
|
272
|
-
I(
|
|
273
|
-
s.value,
|
|
274
|
-
e.name,
|
|
275
|
-
y.value / 35,
|
|
276
|
-
l.value.bottom - e.yOffset - e.individualHeight / 2,
|
|
277
|
-
{
|
|
278
|
-
align: "center",
|
|
279
|
-
rotation: -90,
|
|
280
|
-
color: e.color,
|
|
281
|
-
font: `${y.value / 40 * a.value.style.chart.grid.y.axisLabels.fontSizeRatio}px ${a.value.style.fontFamily}`
|
|
282
|
-
}
|
|
283
|
-
);
|
|
284
|
-
});
|
|
285
|
-
else {
|
|
286
|
-
if (a.value.style.chart.grid.y.verticalLines.show && u.value.end - u.value.start < a.value.style.chart.grid.y.verticalLines.hideUnderXLength)
|
|
287
|
-
for (let e = 0; e < u.value.end - u.value.start + 1; e += 1)
|
|
288
|
-
k(
|
|
289
|
-
s.value,
|
|
290
|
-
[
|
|
291
|
-
{ x: l.value.left + l.value.slot * e, y: l.value.top },
|
|
292
|
-
{ x: l.value.left + l.value.slot * e, y: l.value.bottom }
|
|
293
|
-
],
|
|
294
|
-
{
|
|
295
|
-
color: a.value.style.chart.grid.y.verticalLines.color
|
|
296
|
-
}
|
|
297
|
-
);
|
|
298
|
-
a.value.style.chart.grid.x.horizontalLines.show && (a.value.style.chart.grid.x.horizontalLines.alternate ? p.value.yLabels.forEach((e, t) => {
|
|
299
|
-
t < p.value.yLabels.length - 1 && fe(
|
|
300
|
-
s.value,
|
|
301
|
-
[
|
|
302
|
-
{ x: l.value.left, y: e.y },
|
|
303
|
-
{ x: l.value.right, y: e.y },
|
|
304
|
-
{ x: l.value.right, y: p.value.yLabels[t + 1].y },
|
|
305
|
-
{ x: l.value.left, y: p.value.yLabels[t + 1].y }
|
|
306
|
-
],
|
|
307
|
-
{
|
|
308
|
-
fillColor: t % 2 === 0 ? "transparent" : a.value.style.chart.grid.x.horizontalLines.color + j[a.value.style.chart.grid.x.horizontalLines.opacity],
|
|
309
|
-
strokeColor: "transparent"
|
|
310
|
-
}
|
|
311
|
-
);
|
|
312
|
-
}) : p.value.yLabels.forEach((e) => {
|
|
313
|
-
k(
|
|
314
|
-
s.value,
|
|
315
|
-
[
|
|
316
|
-
{ x: l.value.left, y: e.y },
|
|
317
|
-
{ x: l.value.right, y: e.y }
|
|
318
|
-
],
|
|
319
|
-
{
|
|
320
|
-
color: a.value.style.chart.grid.x.horizontalLines.color
|
|
321
|
-
}
|
|
322
|
-
);
|
|
323
|
-
})), a.value.style.chart.grid.y.showAxis && k(
|
|
324
|
-
s.value,
|
|
325
|
-
[
|
|
326
|
-
{ x: l.value.left, y: l.value.top },
|
|
327
|
-
{ x: l.value.left, y: l.value.bottom }
|
|
328
|
-
],
|
|
329
|
-
{
|
|
330
|
-
color: a.value.style.chart.grid.y.axisColor,
|
|
331
|
-
lineWidth: a.value.style.chart.grid.y.axisThickness
|
|
332
|
-
}
|
|
333
|
-
), a.value.style.chart.grid.x.showAxis && k(
|
|
334
|
-
s.value,
|
|
335
|
-
[
|
|
336
|
-
{ x: l.value.left, y: l.value.bottom },
|
|
337
|
-
{ x: l.value.right, y: l.value.bottom }
|
|
338
|
-
],
|
|
339
|
-
{
|
|
340
|
-
color: a.value.style.chart.grid.x.axisColor,
|
|
341
|
-
lineWidth: a.value.style.chart.grid.x.axisThickness
|
|
342
|
-
}
|
|
343
|
-
), a.value.style.chart.grid.zeroLine.show && k(
|
|
344
|
-
s.value,
|
|
345
|
-
[
|
|
346
|
-
{ x: l.value.left, y: p.value.zero },
|
|
347
|
-
{ x: l.value.right, y: p.value.zero }
|
|
348
|
-
],
|
|
349
|
-
{
|
|
350
|
-
color: a.value.style.chart.grid.zeroLine.color,
|
|
351
|
-
lineDash: a.value.style.chart.grid.zeroLine.dashed ? [10, 10] : [0, 0]
|
|
352
|
-
}
|
|
353
|
-
), a.value.style.chart.grid.y.axisLabels.show && p.value.yLabels.forEach((e) => {
|
|
354
|
-
I(
|
|
355
|
-
s.value,
|
|
356
|
-
G({
|
|
357
|
-
p: a.value.style.chart.grid.y.axisLabels.prefix || "",
|
|
358
|
-
v: e.value,
|
|
359
|
-
s: a.value.style.chart.grid.y.axisLabels.suffix || "",
|
|
360
|
-
r: a.value.style.chart.grid.y.axisLabels.rounding || 0
|
|
361
|
-
}),
|
|
362
|
-
e.x + a.value.style.chart.grid.y.axisLabels.offsetX,
|
|
363
|
-
e.y,
|
|
364
|
-
{
|
|
365
|
-
align: "right",
|
|
366
|
-
font: `${y.value / 40 * a.value.style.chart.grid.y.axisLabels.fontSizeRatio}px ${a.value.style.fontFamily}`,
|
|
367
|
-
color: a.value.style.chart.grid.y.axisLabels.color
|
|
368
|
-
}
|
|
369
|
-
);
|
|
370
|
-
});
|
|
371
|
-
}
|
|
372
|
-
a.value.style.chart.grid.y.axisName && I(
|
|
373
|
-
s.value,
|
|
374
|
-
a.value.style.chart.grid.y.axisName,
|
|
375
|
-
y.value - y.value / 40 * a.value.style.chart.grid.y.axisLabels.fontSizeRatio * 1.2,
|
|
376
|
-
l.value.bottom - l.value.height / 2,
|
|
377
|
-
{
|
|
378
|
-
font: `${y.value / 40 * a.value.style.chart.grid.y.axisLabels.fontSizeRatio}px ${a.value.style.fontFamily}`,
|
|
379
|
-
color: a.value.style.chart.color,
|
|
380
|
-
align: "center",
|
|
381
|
-
rotation: 90
|
|
382
|
-
}
|
|
383
|
-
), a.value.style.chart.grid.x.axisName && I(
|
|
384
|
-
s.value,
|
|
385
|
-
a.value.style.chart.grid.x.axisName,
|
|
386
|
-
y.value / 2,
|
|
387
|
-
T.value,
|
|
388
|
-
{
|
|
389
|
-
font: `${y.value / 40 * a.value.style.chart.grid.y.axisLabels.fontSizeRatio}px ${a.value.style.fontFamily}`,
|
|
390
|
-
color: a.value.style.chart.color,
|
|
391
|
-
align: "center"
|
|
392
|
-
}
|
|
393
|
-
);
|
|
394
|
-
}
|
|
395
|
-
function aa(e) {
|
|
396
|
-
for (let t = 0; t < e.coordinatesLine.length; t += 1) {
|
|
397
|
-
const o = (d.value === t ? y.value / 150 : a.value.style.chart.line.plots.show ? y.value / 200 : 0) * a.value.style.chart.line.plots.radiusRatio;
|
|
398
|
-
We(
|
|
399
|
-
s.value,
|
|
400
|
-
{ x: e.coordinatesLine[t].x, y: e.coordinatesLine[t].y },
|
|
401
|
-
o,
|
|
402
|
-
{
|
|
403
|
-
color: a.value.style.chart.backgroundColor,
|
|
404
|
-
fillStyle: e.color,
|
|
405
|
-
strokeColor: "transparent"
|
|
406
|
-
}
|
|
407
|
-
);
|
|
408
|
-
}
|
|
409
|
-
}
|
|
410
|
-
function la(e) {
|
|
411
|
-
for (let t = 0; t < e.coordinatesLine.length; t += 1)
|
|
412
|
-
I(
|
|
413
|
-
s.value,
|
|
414
|
-
G({
|
|
415
|
-
p: e.prefix || "",
|
|
416
|
-
v: e.coordinatesLine[t].value,
|
|
417
|
-
s: e.suffix || "",
|
|
418
|
-
r: e.rounding || 0
|
|
419
|
-
}),
|
|
420
|
-
e.coordinatesLine[t].x,
|
|
421
|
-
e.coordinatesLine[t].y + a.value.style.chart.dataLabels.offsetY,
|
|
422
|
-
{
|
|
423
|
-
align: "center",
|
|
424
|
-
font: `${y.value / 40 * a.value.style.chart.dataLabels.fontSizeRatio}px ${a.value.style.fontFamily}`,
|
|
425
|
-
color: a.value.style.chart.dataLabels.useSerieColor ? e.color : a.value.style.chart.dataLabels.color,
|
|
426
|
-
strokeColor: a.value.style.chart.backgroundColor,
|
|
427
|
-
lineWidth: 0.8
|
|
428
|
-
}
|
|
429
|
-
);
|
|
430
|
-
}
|
|
431
|
-
function ta() {
|
|
432
|
-
for (let e = u.value.start; e < u.value.end; e += 1)
|
|
433
|
-
(u.value.end - u.value.start < a.value.style.chart.grid.y.timeLabels.modulo || u.value.end - u.value.start >= a.value.style.chart.grid.y.timeLabels.modulo && (e % Math.floor((u.value.end - u.value.start) / a.value.style.chart.grid.y.timeLabels.modulo) === 0 || e === d.value + u.value.start)) && I(
|
|
434
|
-
s.value,
|
|
435
|
-
a.value.style.chart.grid.y.timeLabels.values[e] || e + 1,
|
|
436
|
-
l.value.left + l.value.slot * (e - u.value.start) + l.value.slot / 2,
|
|
437
|
-
l.value.bottom + y.value / a.value.style.chart.grid.y.timeLabels.offsetY,
|
|
438
|
-
{
|
|
439
|
-
align: a.value.style.chart.grid.y.timeLabels.rotation === 0 ? "center" : a.value.style.chart.grid.y.timeLabels.rotation > 0 ? "left" : "right",
|
|
440
|
-
font: `${y.value / 40 * a.value.style.chart.grid.y.timeLabels.fontSizeRatio}px ${a.value.style.fontFamily}`,
|
|
441
|
-
color: a.value.style.chart.grid.y.timeLabels.color + j[d.value !== null ? d.value + u.value.start === e ? 100 : 20 : 100],
|
|
442
|
-
rotation: a.value.style.chart.grid.y.timeLabels.rotation
|
|
443
|
-
}
|
|
444
|
-
);
|
|
445
|
-
}
|
|
446
|
-
function Te() {
|
|
447
|
-
k(
|
|
448
|
-
s.value,
|
|
449
|
-
[
|
|
450
|
-
{ x: l.value.left + l.value.slot * d.value + l.value.slot / 2, y: l.value.top },
|
|
451
|
-
{ x: l.value.left + l.value.slot * d.value + l.value.slot / 2, y: l.value.bottom }
|
|
452
|
-
],
|
|
453
|
-
{
|
|
454
|
-
color: a.value.style.chart.selector.color,
|
|
455
|
-
lineDash: a.value.style.chart.selector.dashed ? [8, 8] : [0, 0],
|
|
456
|
-
lineWidth: 2,
|
|
457
|
-
linceCap: "round"
|
|
458
|
-
}
|
|
459
|
-
);
|
|
460
|
-
}
|
|
461
|
-
function oa() {
|
|
462
|
-
x.value.forEach((e, t) => {
|
|
463
|
-
for (let o = 0; o < e.coordinatesLine.length; o += 1)
|
|
464
|
-
fe(
|
|
465
|
-
s.value,
|
|
466
|
-
[
|
|
467
|
-
{
|
|
468
|
-
x: l.value.left + l.value.slot * o + l.value.slot / 10 + (r.value.stacked ? 0 : l.value.slot / x.value.length * t - (t === 0 ? 0 : l.value.slot / (5 * x.value.length) * t)),
|
|
469
|
-
y: r.value.stacked ? e.localZero : p.value.zero
|
|
470
|
-
},
|
|
471
|
-
{
|
|
472
|
-
x: l.value.left + l.value.slot * o + l.value.slot / 10 + (r.value.stacked ? 0 : l.value.slot / x.value.length * t - (t === 0 ? 0 : l.value.slot / (5 * x.value.length) * t)) + l.value.slot * 0.8 / (r.value.stacked ? 1 : x.value.length),
|
|
473
|
-
y: r.value.stacked ? e.localZero : p.value.zero
|
|
474
|
-
},
|
|
475
|
-
{
|
|
476
|
-
x: l.value.left + l.value.slot * o + l.value.slot / 10 + (r.value.stacked ? 0 : l.value.slot / x.value.length * t - (t === 0 ? 0 : l.value.slot / (5 * x.value.length) * t)) + l.value.slot * 0.8 / (r.value.stacked ? 1 : x.value.length),
|
|
477
|
-
y: e.coordinatesLine[o].y
|
|
478
|
-
},
|
|
479
|
-
{
|
|
480
|
-
x: l.value.left + l.value.slot * o + l.value.slot / 10 + (r.value.stacked ? 0 : l.value.slot / x.value.length * t - (t === 0 ? 0 : l.value.slot / (5 * x.value.length) * t)),
|
|
481
|
-
y: e.coordinatesLine[o].y
|
|
482
|
-
}
|
|
483
|
-
],
|
|
484
|
-
{
|
|
485
|
-
strokeColor: a.value.style.chart.backgroundColor,
|
|
486
|
-
gradient: {
|
|
487
|
-
type: "linear",
|
|
488
|
-
start: {
|
|
489
|
-
x: e.coordinatesLine[o].x,
|
|
490
|
-
y: e.coordinatesLine[o].y
|
|
491
|
-
},
|
|
492
|
-
end: {
|
|
493
|
-
x: e.coordinatesLine[o].x,
|
|
494
|
-
y: r.value.stacked ? e.localZero : p.value.zero
|
|
495
|
-
},
|
|
496
|
-
stops: [
|
|
497
|
-
{ offset: 0, color: e.color },
|
|
498
|
-
{ offset: 1, color: Ta(e.color, 0.5) }
|
|
499
|
-
]
|
|
500
|
-
}
|
|
501
|
-
}
|
|
502
|
-
), r.value.showDataLabels && [!0, void 0].includes(e.dataLabels) && I(
|
|
503
|
-
s.value,
|
|
504
|
-
G({
|
|
505
|
-
p: e.prefix || "",
|
|
506
|
-
v: e.coordinatesLine[o].value,
|
|
507
|
-
s: e.suffix || "",
|
|
508
|
-
r: e.rounding || 0
|
|
509
|
-
}),
|
|
510
|
-
l.value.left + l.value.slot * o + l.value.slot / 10 + (r.value.stacked ? 0 : l.value.slot / x.value.length * t - (t === 0 ? 0 : l.value.slot / (5 * x.value.length) * t)) + l.value.slot * 0.4 / (r.value.stacked ? 1 : x.value.length),
|
|
511
|
-
(e.coordinatesLine[o].value < 0 ? r.value.stacked ? e.localZero : p.value.zero : e.coordinatesLine[o].y) + a.value.style.chart.dataLabels.offsetY,
|
|
512
|
-
{
|
|
513
|
-
align: "center",
|
|
514
|
-
font: `${y.value / 40 * a.value.style.chart.dataLabels.fontSizeRatio}px ${a.value.style.fontFamily}`,
|
|
515
|
-
color: a.value.style.chart.dataLabels.useSerieColor ? e.color : a.value.style.chart.dataLabels.color,
|
|
516
|
-
strokeColor: a.value.style.chart.backgroundColor,
|
|
517
|
-
lineWidth: 0.8
|
|
518
|
-
}
|
|
519
|
-
);
|
|
520
|
-
});
|
|
521
|
-
}
|
|
522
|
-
function ua(e) {
|
|
523
|
-
e.useArea ? r.value.stacked ? Ae(
|
|
524
|
-
s.value,
|
|
525
|
-
[{ x: e.coordinatesLine[0].x, y: e.localZero }, ...e.coordinatesLine, { x: e.coordinatesLine.at(-1).x, y: e.localZero }],
|
|
526
|
-
{
|
|
527
|
-
fillColor: e.color + j[a.value.style.chart.area.opacity],
|
|
528
|
-
strokeColor: "transparent"
|
|
529
|
-
}
|
|
530
|
-
) : Ae(
|
|
531
|
-
s.value,
|
|
532
|
-
[{ x: e.coordinatesLine[0].x, y: p.value.zero }, ...e.coordinatesLine, { x: e.coordinatesLine.at(-1).x, y: p.value.zero }],
|
|
533
|
-
{
|
|
534
|
-
fillColor: e.color + j[a.value.style.chart.area.opacity],
|
|
535
|
-
strokeColor: "transparent"
|
|
536
|
-
}
|
|
537
|
-
) : k(s.value, e.coordinatesLine, {
|
|
538
|
-
color: e.color,
|
|
539
|
-
lineWidth: 3
|
|
540
|
-
});
|
|
541
|
-
}
|
|
542
|
-
function ra() {
|
|
543
|
-
h.value.forEach((e, t) => {
|
|
544
|
-
k(
|
|
545
|
-
s.value,
|
|
546
|
-
[
|
|
547
|
-
{ x: l.value.left, y: l.value.bottom - e.yOffset },
|
|
548
|
-
{ x: l.value.right, y: l.value.bottom - e.yOffset }
|
|
549
|
-
],
|
|
550
|
-
{
|
|
551
|
-
color: a.value.style.chart.grid.x.horizontalLines.color,
|
|
552
|
-
lineWidth: 1
|
|
553
|
-
}
|
|
554
|
-
);
|
|
555
|
-
});
|
|
556
|
-
}
|
|
557
|
-
function ve() {
|
|
558
|
-
ea(), P.value ? (z.value && d.value !== null && a.value.style.chart.selector.show && Te(), oa(), r.value.stacked && a.value.style.chart.grid.x.showAxis && ra(), Ke.value.forEach((e) => {
|
|
559
|
-
(e.type === "line" || !e.type) && ua(e), z.value && (aa(e), r.value.showDataLabels && [!0, void 0].includes(e.dataLabels) && la(e));
|
|
560
|
-
}), se.value = Ra(S.value)) : (se.value && s.value.drawImage(se.value, 0, 0), z.value && d.value !== null && a.value.style.chart.selector.show && Te(), z.value && d.value !== null && h.value.forEach((e) => {
|
|
561
|
-
if (e.type === "line" || !e.type || e.type === "plot") {
|
|
562
|
-
if (!e.coordinatesLine[d.value]) return;
|
|
563
|
-
e.coordinatesLine[d.value].x !== void 0 && e.coordinatesLine[d.value].y !== void 0 && We(
|
|
564
|
-
s.value,
|
|
565
|
-
{
|
|
566
|
-
x: e.coordinatesLine[d.value].x,
|
|
567
|
-
y: e.coordinatesLine[d.value].y
|
|
568
|
-
},
|
|
569
|
-
y.value / 150 * a.value.style.chart.line.plots.radiusRatio,
|
|
570
|
-
{
|
|
571
|
-
color: a.value.style.chart.backgroundColor,
|
|
572
|
-
fillStyle: e.color,
|
|
573
|
-
strokeColor: "transparent"
|
|
574
|
-
}
|
|
575
|
-
);
|
|
576
|
-
}
|
|
577
|
-
})), a.value.style.chart.grid.y.timeLabels.show && ta(), P.value = !1;
|
|
578
|
-
}
|
|
579
|
-
const K = Ma(() => {
|
|
580
|
-
z.value = !0, Qe();
|
|
581
|
-
}, F.value > 200 ? 10 : 1, !z.value);
|
|
582
|
-
function sa(e) {
|
|
583
|
-
const { left: t } = S.value.getBoundingClientRect(), o = e.clientX - t;
|
|
584
|
-
if (o * 2 < l.value.left || o * 2 > l.value.right) {
|
|
585
|
-
q.value = !1, d.value = null;
|
|
586
|
-
return;
|
|
587
|
-
}
|
|
588
|
-
const i = o * 2 - l.value.left;
|
|
589
|
-
if (d.value = Math.floor(i / l.value.slot), q.value = !0, !z.value) return;
|
|
590
|
-
let v = "";
|
|
591
|
-
const f = a.value.style.chart.tooltip.customFormat;
|
|
592
|
-
He(f) && Sa(() => f({
|
|
593
|
-
seriesIndex: d.value,
|
|
594
|
-
datapoint: h.value.map((n) => ({
|
|
595
|
-
shape: n.shape || null,
|
|
596
|
-
name: n.name,
|
|
597
|
-
color: n.color,
|
|
598
|
-
type: n.type || "line",
|
|
599
|
-
value: n.series.find((g, L) => L === d.value)
|
|
600
|
-
})),
|
|
601
|
-
series: h.value,
|
|
602
|
-
config: a.value
|
|
603
|
-
})) ? J.value = f({
|
|
604
|
-
seriesIndex: d.value,
|
|
605
|
-
datapoint: h.value.map((n) => ({
|
|
606
|
-
shape: n.shape || null,
|
|
607
|
-
name: n.name,
|
|
608
|
-
color: n.color,
|
|
609
|
-
type: n.type || "line",
|
|
610
|
-
value: n.series.find((g, L) => L === d.value)
|
|
611
|
-
})),
|
|
612
|
-
series: h.value,
|
|
613
|
-
config: a.value
|
|
614
|
-
}) : (a.value.style.chart.grid.y.timeLabels.values.slice(u.value.start, u.value.end)[d.value] && (v += `<div style="padding-bottom: 6px; margin-bottom: 4px; border-bottom: 1px solid ${a.value.style.chart.tooltip.borderColor}; width:100%">${a.value.style.chart.grid.y.timeLabels.values.slice(u.value.start, u.value.end)[d.value]}</div>`), v += qe.value.join(""), J.value = v), z.value = !1;
|
|
615
|
-
}
|
|
616
|
-
le(() => d.value, (e) => {
|
|
617
|
-
K();
|
|
618
|
-
}), le(() => u.value, (e) => {
|
|
619
|
-
P.value = !0, ve();
|
|
620
|
-
}, {
|
|
621
|
-
deep: !0
|
|
622
|
-
}), le(() => r.value.showDataLabels, (e) => {
|
|
623
|
-
P.value = !0, ve();
|
|
624
|
-
}), le(() => r.value.stacked, (e) => {
|
|
625
|
-
P.value = !0, z.value = !0, K();
|
|
626
|
-
});
|
|
627
|
-
function na() {
|
|
628
|
-
q.value = !1, d.value = null, J.value = "";
|
|
629
|
-
}
|
|
630
|
-
const Q = c(null), ee = c(null);
|
|
631
|
-
da(() => {
|
|
632
|
-
if (ka(N.dataset) ? Ca({
|
|
633
|
-
componentName: "VueUiXyCanvas",
|
|
634
|
-
type: "dataset"
|
|
635
|
-
}) : S.value && (s.value = S.value.getContext("2d", { willReadFrequently: !0 })), a.value.responsive) {
|
|
636
|
-
const e = Oa(() => {
|
|
637
|
-
const { width: t, height: o } = Ia({
|
|
638
|
-
chart: V.value,
|
|
639
|
-
title: a.value.style.chart.title.text ? xe.value : null,
|
|
640
|
-
legend: a.value.style.chart.legend.show ? Le.value : null,
|
|
641
|
-
slicer: a.value.style.chart.zoom.show && F.value > 1 ? ke.value : null
|
|
642
|
-
});
|
|
643
|
-
Ce.value = `${t} / ${o}`;
|
|
644
|
-
});
|
|
645
|
-
Q.value = new ResizeObserver(e), Q.value.observe(V.value.parentNode);
|
|
646
|
-
}
|
|
647
|
-
ee.value = new ResizeObserver((e) => {
|
|
648
|
-
for (const t of e)
|
|
649
|
-
t.contentBoxSize && D.value && (P.value = !0, K());
|
|
650
|
-
}), ee.value.observe(D.value);
|
|
651
|
-
}), ha(() => {
|
|
652
|
-
ee.value && ee.value.disconnect(), Q.value && Q.value.disconnect();
|
|
653
|
-
});
|
|
654
|
-
function Me(e) {
|
|
655
|
-
Xe("selectLegend", h.value.find((t) => t.absoluteIndex === e)), w.value.includes(e) ? w.value = w.value.filter((t) => t !== e) : w.value.push(e), P.value = !0, K();
|
|
656
|
-
}
|
|
657
|
-
const Re = b(() => H.value.map((e, t) => ({
|
|
658
|
-
...e,
|
|
659
|
-
name: e.name,
|
|
660
|
-
color: De(e.color) || ze.value[t] || E[t] || E[t % E.length],
|
|
661
|
-
shape: e.shape || "circle",
|
|
662
|
-
prefix: e.prefix || "",
|
|
663
|
-
suffix: e.suffix || "",
|
|
664
|
-
rounding: e.rounding || 0
|
|
665
|
-
})).map((e) => ({
|
|
666
|
-
...e,
|
|
667
|
-
opacity: w.value.includes(e.absoluteIndex) ? 0.5 : 1,
|
|
668
|
-
segregate: () => Me(e.absoluteIndex),
|
|
669
|
-
isSegregated: w.value.includes(e.absoluteIndex)
|
|
670
|
-
}))), ia = b(() => ({
|
|
671
|
-
cy: "donut-div-legend",
|
|
672
|
-
backgroundColor: a.value.style.chart.legend.backgroundColor,
|
|
673
|
-
color: a.value.style.chart.legend.color,
|
|
674
|
-
fontSize: a.value.style.chart.legend.fontSize,
|
|
675
|
-
paddingBottom: 12,
|
|
676
|
-
fontWeight: a.value.style.chart.legend.bold ? "bold" : ""
|
|
677
|
-
})), ae = b(() => {
|
|
678
|
-
const e = [""].concat(h.value.map((v) => v.name)).concat(' <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>');
|
|
679
|
-
let t = [];
|
|
680
|
-
for (let v = 0; v < F.value; v += 1) {
|
|
681
|
-
const f = h.value.map((n) => n.series[v] ?? 0).reduce((n, g) => n + g, 0);
|
|
682
|
-
t.push([a.value.style.chart.grid.y.timeLabels.values.slice(u.value.start, u.value.end)[v] ?? v + 1].concat(h.value.map((n) => (n.series[v] ?? 0).toFixed(a.value.table.rounding))).concat((f ?? 0).toFixed(a.value.table.rounding)));
|
|
683
|
-
}
|
|
684
|
-
const o = {
|
|
685
|
-
th: {
|
|
686
|
-
backgroundColor: a.value.table.th.backgroundColor,
|
|
687
|
-
color: a.value.table.th.color,
|
|
688
|
-
outline: a.value.table.th.outline
|
|
689
|
-
},
|
|
690
|
-
td: {
|
|
691
|
-
backgroundColor: a.value.table.td.backgroundColor,
|
|
692
|
-
color: a.value.table.td.color,
|
|
693
|
-
outline: a.value.table.td.outline
|
|
694
|
-
},
|
|
695
|
-
breakpoint: a.value.table.responsiveBreakpoint
|
|
696
|
-
}, i = [a.value.table.columnNames.period].concat(h.value.map((v) => v.name)).concat(a.value.table.columnNames.total);
|
|
697
|
-
return { head: e, body: t.slice(0, u.value.end - u.value.start), config: o, colNames: i };
|
|
698
|
-
}), Oe = b(() => {
|
|
699
|
-
if (h.value.length === 0) return { head: [], body: [], config: {}, columnNames: [] };
|
|
700
|
-
const e = h.value.map((o) => ({
|
|
701
|
-
label: o.name,
|
|
702
|
-
color: o.color,
|
|
703
|
-
type: o.type
|
|
704
|
-
})), t = [];
|
|
705
|
-
for (let o = u.value.start; o < u.value.end; o += 1) {
|
|
706
|
-
const i = [a.value.style.chart.grid.y.timeLabels.values[o] || o + 1];
|
|
707
|
-
h.value.forEach((v) => {
|
|
708
|
-
i.push(Number((v.series[o] || 0).toFixed(a.value.table.rounding)));
|
|
709
|
-
}), t.push(i);
|
|
710
|
-
}
|
|
711
|
-
return { head: e, body: t };
|
|
712
|
-
});
|
|
713
|
-
function Ie() {
|
|
714
|
-
const e = [[a.value.style.chart.title.text], [a.value.style.chart.title.subtitle.text], [""]], t = ["", ...Oe.value.head.map((f) => f.label)], o = Oe.value.body, i = e.concat([t]).concat(o), v = za(i);
|
|
715
|
-
$a({ csvContent: v, title: a.value.style.chart.title.text || "vue-ui-xy-canvas" });
|
|
716
|
-
}
|
|
717
|
-
function va() {
|
|
718
|
-
return h.value;
|
|
719
|
-
}
|
|
720
|
-
function Pe() {
|
|
721
|
-
r.value.showTable = !r.value.showTable;
|
|
722
|
-
}
|
|
723
|
-
function Fe() {
|
|
724
|
-
r.value.showDataLabels = !r.value.showDataLabels;
|
|
725
|
-
}
|
|
726
|
-
function Ee() {
|
|
727
|
-
r.value.stacked = !r.value.stacked;
|
|
728
|
-
}
|
|
729
|
-
function Ne() {
|
|
730
|
-
r.value.showTooltip = !r.value.showTooltip;
|
|
731
|
-
}
|
|
732
|
-
return Ue({
|
|
733
|
-
getData: va,
|
|
734
|
-
generateCsv: Ie,
|
|
735
|
-
generatePdf: we,
|
|
736
|
-
generateImage: Se,
|
|
737
|
-
toggleTable: Pe,
|
|
738
|
-
toggleLabels: Fe,
|
|
739
|
-
toggleStack: Ee,
|
|
740
|
-
toggleTooltip: Ne
|
|
741
|
-
}), (e, t) => (O(), de("div", {
|
|
742
|
-
style: U(`width:100%; position: relative;${a.value.responsive ? "height: 100%" : ""}`),
|
|
743
|
-
ref_key: "xy",
|
|
744
|
-
ref: V,
|
|
745
|
-
id: `xy_canvas_${re.value}`,
|
|
746
|
-
class: ya(`vue-ui-donut ${ne.value ? "vue-data-ui-wrapper-fullscreen" : ""}`)
|
|
747
|
-
}, [
|
|
748
|
-
a.value.style.chart.title.text ? (O(), de("div", {
|
|
749
|
-
key: 0,
|
|
750
|
-
ref_key: "chartTitle",
|
|
751
|
-
ref: xe,
|
|
752
|
-
style: U(`width:100%;background:${a.value.style.chart.backgroundColor};`)
|
|
753
|
-
}, [
|
|
754
|
-
he(Na, {
|
|
755
|
-
config: {
|
|
756
|
-
title: {
|
|
757
|
-
cy: "xy-canvas-title",
|
|
758
|
-
...a.value.style.chart.title
|
|
759
|
-
},
|
|
760
|
-
subtitle: {
|
|
761
|
-
cy: "xy-canvas-subtitle",
|
|
762
|
-
...a.value.style.chart.title.subtitle
|
|
763
|
-
}
|
|
764
|
-
}
|
|
765
|
-
}, null, 8, ["config"])
|
|
766
|
-
], 4)) : te("", !0),
|
|
767
|
-
a.value.userOptions.show && ie.value ? (O(), X(Da, {
|
|
768
|
-
ref: "details",
|
|
769
|
-
key: `user_option_${me.value}`,
|
|
770
|
-
backgroundColor: a.value.style.chart.backgroundColor,
|
|
771
|
-
color: a.value.style.chart.color,
|
|
772
|
-
isPrinting: Y(Ze),
|
|
773
|
-
isImaging: Y(Ge),
|
|
774
|
-
uid: re.value,
|
|
775
|
-
hasTooltip: a.value.userOptions.buttons.tooltip && a.value.style.chart.tooltip.show,
|
|
776
|
-
hasPdf: a.value.userOptions.buttons.pdf,
|
|
777
|
-
hasImg: a.value.userOptions.buttons.img,
|
|
778
|
-
hasXls: a.value.userOptions.buttons.csv,
|
|
779
|
-
hasLabel: a.value.userOptions.buttons.labels,
|
|
780
|
-
hasStack: ge.dataset.length > 1 && a.value.userOptions.buttons.stack,
|
|
781
|
-
hasFullscreen: a.value.userOptions.buttons.fullscreen,
|
|
782
|
-
hasTable: u.value.end - u.value.start < 200 && a.value.userOptions.buttons.table,
|
|
783
|
-
isFullscreen: ne.value,
|
|
784
|
-
isTooltip: r.value.showTooltip,
|
|
785
|
-
isStacked: r.value.stacked,
|
|
786
|
-
titles: { ...a.value.userOptions.buttonTitles },
|
|
787
|
-
chartElement: V.value,
|
|
788
|
-
onToggleFullscreen: je,
|
|
789
|
-
onGeneratePdf: Y(we),
|
|
790
|
-
onGenerateCsv: Ie,
|
|
791
|
-
onGenerateImage: Y(Se),
|
|
792
|
-
onToggleTable: Pe,
|
|
793
|
-
onToggleLabels: Fe,
|
|
794
|
-
onToggleStack: Ee,
|
|
795
|
-
onToggleTooltip: Ne
|
|
796
|
-
}, fa({ _: 2 }, [
|
|
797
|
-
e.$slots.optionTooltip ? {
|
|
798
|
-
name: "optionTooltip",
|
|
799
|
-
fn: m(() => [
|
|
800
|
-
C(e.$slots, "optionTooltip", {}, void 0, !0)
|
|
801
|
-
]),
|
|
802
|
-
key: "0"
|
|
803
|
-
} : void 0,
|
|
804
|
-
e.$slots.optionPdf ? {
|
|
805
|
-
name: "optionPdf",
|
|
806
|
-
fn: m(() => [
|
|
807
|
-
C(e.$slots, "optionPdf", {}, void 0, !0)
|
|
808
|
-
]),
|
|
809
|
-
key: "1"
|
|
810
|
-
} : void 0,
|
|
811
|
-
e.$slots.optionCsv ? {
|
|
812
|
-
name: "optionCsv",
|
|
813
|
-
fn: m(() => [
|
|
814
|
-
C(e.$slots, "optionCsv", {}, void 0, !0)
|
|
815
|
-
]),
|
|
816
|
-
key: "2"
|
|
817
|
-
} : void 0,
|
|
818
|
-
e.$slots.optionImg ? {
|
|
819
|
-
name: "optionImg",
|
|
820
|
-
fn: m(() => [
|
|
821
|
-
C(e.$slots, "optionImg", {}, void 0, !0)
|
|
822
|
-
]),
|
|
823
|
-
key: "3"
|
|
824
|
-
} : void 0,
|
|
825
|
-
e.$slots.optionTable ? {
|
|
826
|
-
name: "optionTable",
|
|
827
|
-
fn: m(() => [
|
|
828
|
-
C(e.$slots, "optionTable", {}, void 0, !0)
|
|
829
|
-
]),
|
|
830
|
-
key: "4"
|
|
831
|
-
} : void 0,
|
|
832
|
-
e.$slots.optionLabels ? {
|
|
833
|
-
name: "optionLabels",
|
|
834
|
-
fn: m(() => [
|
|
835
|
-
C(e.$slots, "optionLabels", {}, void 0, !0)
|
|
836
|
-
]),
|
|
837
|
-
key: "5"
|
|
838
|
-
} : void 0,
|
|
839
|
-
e.$slots.optionStack ? {
|
|
840
|
-
name: "optionStack",
|
|
841
|
-
fn: m(() => [
|
|
842
|
-
C(e.$slots, "optionStack", {}, void 0, !0)
|
|
843
|
-
]),
|
|
844
|
-
key: "6"
|
|
845
|
-
} : void 0,
|
|
846
|
-
e.$slots.optionFullscreen ? {
|
|
847
|
-
name: "optionFullscreen",
|
|
848
|
-
fn: m(({ toggleFullscreen: o, isFullscreen: i }) => [
|
|
849
|
-
C(e.$slots, "optionFullscreen", oe(ue({ toggleFullscreen: o, isFullscreen: i })), void 0, !0)
|
|
850
|
-
]),
|
|
851
|
-
key: "7"
|
|
852
|
-
} : void 0
|
|
853
|
-
]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasTooltip", "hasPdf", "hasImg", "hasXls", "hasLabel", "hasStack", "hasFullscreen", "hasTable", "isFullscreen", "isTooltip", "isStacked", "titles", "chartElement", "onGeneratePdf", "onGenerateImage"])) : te("", !0),
|
|
854
|
-
Z("div", {
|
|
855
|
-
class: "vue-ui-xy-canvas",
|
|
856
|
-
style: U(`position: relative; aspect-ratio: ${Ce.value}`),
|
|
857
|
-
ref_key: "container",
|
|
858
|
-
ref: D
|
|
859
|
-
}, [
|
|
860
|
-
ie.value ? (O(), de("canvas", {
|
|
861
|
-
key: 0,
|
|
862
|
-
ref_key: "canvas",
|
|
863
|
-
ref: S,
|
|
864
|
-
style: { width: "100%", height: "100%" },
|
|
865
|
-
onMousemove: t[0] || (t[0] = (o) => sa(o)),
|
|
866
|
-
onMouseleave: na
|
|
867
|
-
}, null, 544)) : (O(), X(Aa, {
|
|
868
|
-
key: 1,
|
|
869
|
-
config: {
|
|
870
|
-
type: "line",
|
|
871
|
-
style: {
|
|
872
|
-
backgroundColor: a.value.style.chart.backgroundColor,
|
|
873
|
-
line: {
|
|
874
|
-
axis: {
|
|
875
|
-
color: "#CCCCCC"
|
|
876
|
-
},
|
|
877
|
-
path: {
|
|
878
|
-
color: "#CCCCCC",
|
|
879
|
-
strokeWidth: 0.5
|
|
880
|
-
}
|
|
881
|
-
}
|
|
882
|
-
}
|
|
883
|
-
}
|
|
884
|
-
}, null, 8, ["config"])),
|
|
885
|
-
he(Fa, {
|
|
886
|
-
show: r.value.showTooltip && q.value,
|
|
887
|
-
backgroundColor: a.value.style.chart.tooltip.backgroundColor,
|
|
888
|
-
color: a.value.style.chart.tooltip.color,
|
|
889
|
-
fontSize: a.value.style.chart.tooltip.fontSize,
|
|
890
|
-
borderRadius: a.value.style.chart.tooltip.borderRadius,
|
|
891
|
-
borderColor: a.value.style.chart.tooltip.borderColor,
|
|
892
|
-
borderWidth: a.value.style.chart.tooltip.borderWidth,
|
|
893
|
-
parent: S.value,
|
|
894
|
-
content: J.value,
|
|
895
|
-
backgroundOpacity: a.value.style.chart.tooltip.backgroundOpacity,
|
|
896
|
-
isCustom: Y(He)(a.value.style.chart.tooltip.customFormat)
|
|
897
|
-
}, {
|
|
898
|
-
"tooltip-before": m(() => [
|
|
899
|
-
C(e.$slots, "tooltip-before", oe(ue({ ...pe.value })), void 0, !0)
|
|
900
|
-
]),
|
|
901
|
-
"tooltip-after": m(() => [
|
|
902
|
-
C(e.$slots, "tooltip-after", oe(ue({ ...pe.value })), void 0, !0)
|
|
903
|
-
]),
|
|
904
|
-
_: 3
|
|
905
|
-
}, 8, ["show", "backgroundColor", "color", "fontSize", "borderRadius", "borderColor", "borderWidth", "parent", "content", "backgroundOpacity", "isCustom"])
|
|
906
|
-
], 4),
|
|
907
|
-
Z("div", {
|
|
908
|
-
ref_key: "chartSlicer",
|
|
909
|
-
ref: ke,
|
|
910
|
-
style: U(`width:100%;background:${a.value.style.chart.backgroundColor}`),
|
|
911
|
-
"data-html2canvas-ignore": ""
|
|
912
|
-
}, [
|
|
913
|
-
a.value.style.chart.zoom.show && F.value > 1 ? (O(), X(_a, {
|
|
914
|
-
key: `slicer_${be.value}`,
|
|
915
|
-
background: a.value.style.chart.zoom.color,
|
|
916
|
-
borderColor: a.value.style.chart.backgroundColor,
|
|
917
|
-
fontSize: a.value.style.chart.zoom.fontSize,
|
|
918
|
-
useResetSlot: a.value.style.chart.zoom.useResetSlot,
|
|
919
|
-
labelLeft: a.value.style.chart.grid.y.timeLabels.values[u.value.start] ? a.value.style.chart.grid.y.timeLabels.values[u.value.start] : "",
|
|
920
|
-
labelRight: a.value.style.chart.grid.y.timeLabels.values[u.value.end - 1] ? a.value.style.chart.grid.y.timeLabels.values[u.value.end - 1] : "",
|
|
921
|
-
textColor: a.value.style.chart.color,
|
|
922
|
-
inputColor: a.value.style.chart.zoom.color,
|
|
923
|
-
selectColor: a.value.style.chart.zoom.highlightColor,
|
|
924
|
-
max: F.value,
|
|
925
|
-
min: 0,
|
|
926
|
-
valueStart: u.value.start,
|
|
927
|
-
valueEnd: u.value.end,
|
|
928
|
-
start: u.value.start,
|
|
929
|
-
"onUpdate:start": t[1] || (t[1] = (o) => u.value.start = o),
|
|
930
|
-
end: u.value.end,
|
|
931
|
-
"onUpdate:end": t[2] || (t[2] = (o) => u.value.end = o),
|
|
932
|
-
onReset: Je
|
|
933
|
-
}, {
|
|
934
|
-
"reset-action": m(({ reset: o }) => [
|
|
935
|
-
C(e.$slots, "reset-action", oe(ue({ reset: o })), void 0, !0)
|
|
936
|
-
]),
|
|
937
|
-
_: 3
|
|
938
|
-
}, 8, ["background", "borderColor", "fontSize", "useResetSlot", "labelLeft", "labelRight", "textColor", "inputColor", "selectColor", "max", "valueStart", "valueEnd", "start", "end"])) : te("", !0)
|
|
939
|
-
], 4),
|
|
940
|
-
Z("div", {
|
|
941
|
-
ref_key: "chartLegend",
|
|
942
|
-
ref: Le
|
|
943
|
-
}, [
|
|
944
|
-
a.value.style.chart.legend.show && ie.value ? (O(), X(Ea, {
|
|
945
|
-
key: 0,
|
|
946
|
-
legendSet: Re.value,
|
|
947
|
-
config: ia.value,
|
|
948
|
-
onClickMarker: t[3] || (t[3] = ({ i: o }) => Me(o))
|
|
949
|
-
}, {
|
|
950
|
-
item: m(({ legend: o, index: i }) => [
|
|
951
|
-
Z("div", {
|
|
952
|
-
onClick: (v) => o.segregate(),
|
|
953
|
-
style: U(`opacity:${w.value.includes(i) ? 0.5 : 1}`)
|
|
954
|
-
}, _e(o.name), 13, Xa)
|
|
955
|
-
]),
|
|
956
|
-
_: 1
|
|
957
|
-
}, 8, ["legendSet", "config"])) : C(e.$slots, "legend", {
|
|
958
|
-
key: 1,
|
|
959
|
-
legend: Re.value
|
|
960
|
-
}, void 0, !0)
|
|
961
|
-
], 512),
|
|
962
|
-
u.value.end - u.value.start < 200 ? (O(), X(Ba, {
|
|
963
|
-
key: 2,
|
|
964
|
-
hideDetails: "",
|
|
965
|
-
config: {
|
|
966
|
-
open: r.value.showTable,
|
|
967
|
-
maxHeight: 1e4,
|
|
968
|
-
body: {
|
|
969
|
-
backgroundColor: a.value.style.chart.backgroundColor,
|
|
970
|
-
color: a.value.style.chart.color
|
|
971
|
-
},
|
|
972
|
-
head: {
|
|
973
|
-
backgroundColor: a.value.style.chart.backgroundColor,
|
|
974
|
-
color: a.value.style.chart.color
|
|
975
|
-
}
|
|
976
|
-
}
|
|
977
|
-
}, {
|
|
978
|
-
content: m(() => [
|
|
979
|
-
he(wa, {
|
|
980
|
-
colNames: ae.value.colNames,
|
|
981
|
-
head: ae.value.head,
|
|
982
|
-
body: ae.value.body,
|
|
983
|
-
config: ae.value.config,
|
|
984
|
-
title: `${a.value.style.chart.title.text}${a.value.style.chart.title.subtitle.text ? ` : ${a.value.style.chart.title.subtitle.text}` : ""}`,
|
|
985
|
-
onClose: t[4] || (t[4] = (o) => r.value.showTable = !1)
|
|
986
|
-
}, {
|
|
987
|
-
th: m(({ th: o }) => [
|
|
988
|
-
Z("div", { innerHTML: o }, null, 8, Ya)
|
|
989
|
-
]),
|
|
990
|
-
td: m(({ td: o }) => [
|
|
991
|
-
ga(_e(o), 1)
|
|
992
|
-
]),
|
|
993
|
-
_: 1
|
|
994
|
-
}, 8, ["colNames", "head", "body", "config", "title"])
|
|
995
|
-
]),
|
|
996
|
-
_: 1
|
|
997
|
-
}, 8, ["config"])) : te("", !0)
|
|
998
|
-
], 14, Ua));
|
|
999
|
-
}
|
|
1000
|
-
}, tl = /* @__PURE__ */ pa(Za, [["__scopeId", "data-v-2630b430"]]);
|
|
1001
|
-
export {
|
|
1002
|
-
tl as default
|
|
1003
|
-
};
|