x-next 1.7.0 → 1.8.1
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/AI_USAGE.md +129 -4
- package/CHANGELOG.md +47 -0
- package/dist/_hooks/use-chart-size.d.ts +25 -0
- package/dist/_utils/chart/index.d.ts +6 -0
- package/dist/_utils/chart/padding.d.ts +15 -0
- package/dist/_utils/chart/path.d.ts +34 -0
- package/dist/_utils/chart/scale.d.ts +55 -0
- package/dist/components/_components/chart/ChartAxis.d.ts +85 -0
- package/dist/components/_components/chart/ChartLegend.d.ts +26 -0
- package/dist/components/_components/chart/ChartTooltip.d.ts +76 -0
- package/dist/components/_components/chart/colors.d.ts +10 -0
- package/dist/components/_components/chart/interface.d.ts +38 -0
- package/dist/components/bar-chart/BarChart.d.ts +278 -0
- package/dist/components/bar-chart/helpers/layout.d.ts +55 -0
- package/dist/components/bar-chart/index.d.ts +600 -0
- package/dist/components/bar-chart/interface.d.ts +74 -0
- package/dist/components/bar-chart/props.d.ts +145 -0
- package/dist/components/heatmap/Heatmap.d.ts +10 -1
- package/dist/components/heatmap/index.d.ts +30 -3
- package/dist/components/index.d.ts +3 -0
- package/dist/components/line-chart/LineChart.d.ts +295 -0
- package/dist/components/line-chart/helpers/layout.d.ts +74 -0
- package/dist/components/line-chart/index.d.ts +614 -0
- package/dist/components/line-chart/interface.d.ts +76 -0
- package/dist/components/line-chart/props.d.ts +173 -0
- package/dist/components/pie-chart/PieChart.d.ts +219 -0
- package/dist/components/pie-chart/index.d.ts +470 -0
- package/dist/components/pie-chart/interface.d.ts +58 -0
- package/dist/components/pie-chart/props.d.ts +107 -0
- package/dist/components/trend-chart/components/TrendChart.d.ts +19 -96
- package/dist/components/trend-chart/index.d.ts +33 -187
- package/dist/components/trend-chart/props.d.ts +9 -78
- package/dist/components/trend-chart/themes.d.ts +0 -1
- package/dist/es/_hooks/use-chart-size.js +25 -0
- package/dist/es/_styles/palette-aliases.js +5 -0
- package/dist/es/_utils/chart/padding.js +22 -0
- package/dist/es/_utils/chart/path.js +69 -0
- package/dist/es/_utils/chart/scale.js +77 -0
- package/dist/es/components/_components/chart/ChartAxis.js +79 -0
- package/dist/es/components/_components/chart/ChartLegend.js +53 -0
- package/dist/es/components/_components/chart/ChartTooltip.js +64 -0
- package/dist/es/components/_components/chart/colors.js +12 -0
- package/dist/es/components/bar-chart/BarChart.js +470 -0
- package/dist/es/components/bar-chart/helpers/layout.js +53 -0
- package/dist/es/components/bar-chart/index.js +8 -0
- package/dist/es/components/bar-chart/props.js +148 -0
- package/dist/es/components/heatmap/Heatmap.js +249 -172
- package/dist/es/components/index.js +132 -126
- package/dist/es/components/line-chart/LineChart.js +532 -0
- package/dist/es/components/line-chart/helpers/layout.js +80 -0
- package/dist/es/components/line-chart/index.js +8 -0
- package/dist/es/components/line-chart/props.js +178 -0
- package/dist/es/components/pie-chart/PieChart.js +397 -0
- package/dist/es/components/pie-chart/index.js +8 -0
- package/dist/es/components/pie-chart/props.js +104 -0
- package/dist/es/components/trend-chart/components/TrendChart.js +143 -183
- package/dist/es/components/trend-chart/components/trend-chart-curve.js +85 -81
- package/dist/es/components/trend-chart/props.js +28 -74
- package/dist/es/components/trend-chart/themes.js +30 -31
- package/dist/es/index.js +193 -187
- package/dist/es/locale/en-US.js +8 -1
- package/dist/es/locale/zh-CN.js +8 -1
- package/dist/es/style.css +1 -1
- package/dist/index.cjs +4 -4
- package/dist/index.umd.js +4 -4
- package/dist/locale/interface.d.ts +13 -0
- package/dist/style/bar-chart.css +1 -0
- package/dist/style/bar-chart.js +2 -0
- package/dist/style/base.css +1 -1
- package/dist/style/heatmap.css +1 -1
- package/dist/style/line-chart.css +1 -0
- package/dist/style/line-chart.js +2 -0
- package/dist/style/pie-chart.css +1 -0
- package/dist/style/pie-chart.js +2 -0
- package/dist/style.css +1 -1
- package/dist/types.d.ts +3 -0
- package/package.json +1 -1
- package/volar.d.ts +3 -0
- package/dist/components/trend-chart/components/trend-chart-grid.d.ts +0 -55
- package/dist/components/trend-chart/components/trend-chart-labels.d.ts +0 -26
- package/dist/components/trend-chart/helpers/genPath.d.ts +0 -8
- package/dist/components/trend-chart/helpers/getPadding.d.ts +0 -8
- package/dist/components/trend-chart/helpers/validatePadding.d.ts +0 -2
- package/dist/es/components/trend-chart/components/trend-chart-grid.js +0 -62
- package/dist/es/components/trend-chart/components/trend-chart-labels.js +0 -75
- package/dist/es/components/trend-chart/helpers/genPath.js +0 -22
- package/dist/es/components/trend-chart/helpers/getPadding.js +0 -21
- package/dist/es/components/trend-chart/helpers/validatePadding.js +0 -7
|
@@ -0,0 +1,470 @@
|
|
|
1
|
+
import { defineComponent as xe, createVNode as h, mergeProps as ge, Fragment as be, ref as ee, reactive as pe, computed as i, watch as le, nextTick as ye } from "vue";
|
|
2
|
+
import { getComponentPrefix as Ie, getClassNameMixin as we } from "../../_utils/config.js";
|
|
3
|
+
import { useLocale as ke } from "../../locale/index.js";
|
|
4
|
+
import { isObject as Me } from "../../_utils/is.js";
|
|
5
|
+
import { useChartSize as Le } from "../../_hooks/use-chart-size.js";
|
|
6
|
+
import { Spin as Ce } from "../spin/index.js";
|
|
7
|
+
import Te from "../_components/chart/ChartAxis.js";
|
|
8
|
+
import Ae from "../_components/chart/ChartLegend.js";
|
|
9
|
+
import Se from "../_components/chart/ChartTooltip.js";
|
|
10
|
+
import { barChartProps as ze } from "./props.js";
|
|
11
|
+
import { computeBarLayout as Ee } from "./helpers/layout.js";
|
|
12
|
+
import { getSeriesColor as Ne } from "../_components/chart/colors.js";
|
|
13
|
+
import { getScale as Ve, estimateTextWidth as ie, pickLabelIndices as Be } from "../../_utils/chart/scale.js";
|
|
14
|
+
import { getPadding as Fe } from "../../_utils/chart/padding.js";
|
|
15
|
+
const Re = 4, oe = 8, Je = /* @__PURE__ */ xe({
|
|
16
|
+
name: Ie("BarChart"),
|
|
17
|
+
props: ze,
|
|
18
|
+
emits: {
|
|
19
|
+
/**
|
|
20
|
+
* @zh 点击柱体或绘图区时触发
|
|
21
|
+
* @en Emitted when a bar or the plot area is clicked
|
|
22
|
+
*/
|
|
23
|
+
"bar-click": (n) => !0,
|
|
24
|
+
/**
|
|
25
|
+
* @zh 图例切换后触发,参数为当前可见的系列下标
|
|
26
|
+
* @en Emitted after a legend toggle, with the visible series indexes
|
|
27
|
+
*/
|
|
28
|
+
"legend-change": (n) => !0
|
|
29
|
+
},
|
|
30
|
+
slots: Object,
|
|
31
|
+
setup(n, {
|
|
32
|
+
emit: y,
|
|
33
|
+
slots: B
|
|
34
|
+
}) {
|
|
35
|
+
const {
|
|
36
|
+
t: M
|
|
37
|
+
} = ke(), d = we("bar-chart"), H = ee(null), F = ee(null), z = ee(null), O = {
|
|
38
|
+
root: H,
|
|
39
|
+
canvas: F,
|
|
40
|
+
tooltip: z
|
|
41
|
+
}, s = pe({
|
|
42
|
+
activeIndex: null,
|
|
43
|
+
/** 键盘导航触发的激活态才做读屏播报,鼠标悬浮不播报 */
|
|
44
|
+
keyboardActive: !1,
|
|
45
|
+
hiddenIndexes: [],
|
|
46
|
+
tooltipWidth: 0
|
|
47
|
+
}), {
|
|
48
|
+
size: L
|
|
49
|
+
} = Le({
|
|
50
|
+
elementRef: F,
|
|
51
|
+
width: () => n.width,
|
|
52
|
+
height: () => n.height
|
|
53
|
+
}), f = i(() => {
|
|
54
|
+
var e;
|
|
55
|
+
return ((e = n.labels) == null ? void 0 : e.fontSize) ?? 12;
|
|
56
|
+
}), E = i(() => {
|
|
57
|
+
var e;
|
|
58
|
+
return ((e = n.labels) == null ? void 0 : e.yVisible) !== !1;
|
|
59
|
+
}), R = i(() => {
|
|
60
|
+
var e;
|
|
61
|
+
return ((e = n.labels) == null ? void 0 : e.xVisible) !== !1;
|
|
62
|
+
}), C = i(() => {
|
|
63
|
+
var e;
|
|
64
|
+
return Math.max(2, Math.floor(((e = n.grid) == null ? void 0 : e.horizontalLinesNumber) ?? Re));
|
|
65
|
+
}), N = i(() => {
|
|
66
|
+
var e;
|
|
67
|
+
return ((e = n.grid) == null ? void 0 : e.horizontalLines) !== !1;
|
|
68
|
+
}), v = i(() => n.series ?? []), W = i(() => (n.categories ?? []).map((e) => String(e))), I = i(() => v.value.length), m = i(() => I.value === 0 ? [] : Array.from({
|
|
69
|
+
length: I.value
|
|
70
|
+
}, (e, t) => t).filter((e) => !s.hiddenIndexes.includes(e))), c = i(() => {
|
|
71
|
+
const e = v.value.reduce((t, a) => Math.max(t, (a.data ?? []).length), 0);
|
|
72
|
+
return Math.max(W.value.length, e);
|
|
73
|
+
}), w = i(() => v.value.map((e) => {
|
|
74
|
+
const t = e.data ?? [];
|
|
75
|
+
return Array.from({
|
|
76
|
+
length: c.value
|
|
77
|
+
}, (a, l) => Number.isFinite(t[l]) && t[l] > 0 ? t[l] : 0);
|
|
78
|
+
})), T = i(() => m.value.map((e) => w.value[e] ?? [])), $ = i(() => w.value.some((e) => e.some((t) => t > 0))), te = i(() => {
|
|
79
|
+
if (!T.value.length || c.value === 0) return 0;
|
|
80
|
+
if (n.stack) {
|
|
81
|
+
let e = 0;
|
|
82
|
+
for (let t = 0; t < c.value; t += 1) {
|
|
83
|
+
const a = T.value.reduce((l, u) => l + (u[t] ?? 0), 0);
|
|
84
|
+
a > e && (e = a);
|
|
85
|
+
}
|
|
86
|
+
return e;
|
|
87
|
+
}
|
|
88
|
+
return T.value.reduce((e, t) => t.reduce((a, l) => Math.max(a, l), e), 0);
|
|
89
|
+
}), A = i(() => Ve(te.value, C.value, n.max)), g = i(() => n.valueFormatter), _ = (e) => {
|
|
90
|
+
var t;
|
|
91
|
+
return (t = n.labels) != null && t.yFormatter ? n.labels.yFormatter(e) : g.value(e);
|
|
92
|
+
}, X = i(() => {
|
|
93
|
+
var e;
|
|
94
|
+
return ((e = n.labels) == null ? void 0 : e.color) ?? "var(--x-chart-color-axis-text)";
|
|
95
|
+
}), k = (e) => {
|
|
96
|
+
var a;
|
|
97
|
+
const t = W.value[e] ?? String(e + 1);
|
|
98
|
+
return (a = n.labels) != null && a.xFormatter ? n.labels.xFormatter(t, e) : t;
|
|
99
|
+
}, j = i(() => {
|
|
100
|
+
if (!E.value) return 0;
|
|
101
|
+
const e = A.value.ticks, t = e.reduce((a, l) => Math.max(a, ie(_(l), f.value)), 0);
|
|
102
|
+
return e.length ? Math.round(t) + 6 : 0;
|
|
103
|
+
}), K = i(() => !R.value || c.value === 0 ? 0 : Math.ceil(8 + f.value * 1.15)), x = i(() => {
|
|
104
|
+
const e = Fe(n.padding), t = E.value ? Math.ceil(f.value * 0.7) : 0, a = e.left + j.value, l = Math.max(e.top, t), u = L.width - e.right, r = L.height - e.bottom - K.value;
|
|
105
|
+
return {
|
|
106
|
+
left: a,
|
|
107
|
+
top: l,
|
|
108
|
+
right: u,
|
|
109
|
+
bottom: r,
|
|
110
|
+
width: Math.max(0, u - a),
|
|
111
|
+
height: Math.max(0, r - l)
|
|
112
|
+
};
|
|
113
|
+
}), b = i(() => Ee({
|
|
114
|
+
count: c.value,
|
|
115
|
+
values: T.value,
|
|
116
|
+
stack: n.stack,
|
|
117
|
+
plot: x.value,
|
|
118
|
+
domainMax: A.value.max,
|
|
119
|
+
barRadius: n.barRadius,
|
|
120
|
+
barWidth: n.barWidth
|
|
121
|
+
})), P = i(() => {
|
|
122
|
+
if (c.value === 0) return [];
|
|
123
|
+
const e = Array.from({
|
|
124
|
+
length: c.value
|
|
125
|
+
}, (t, a) => ie(k(a), f.value)).reduce((t, a) => Math.max(t, a), 0);
|
|
126
|
+
return Be(c.value, b.value.band, e, f.value * 0.6);
|
|
127
|
+
}), S = (e) => {
|
|
128
|
+
var t;
|
|
129
|
+
return ((t = v.value[e]) == null ? void 0 : t.color) ?? Ne(e);
|
|
130
|
+
}, G = (e) => {
|
|
131
|
+
const {
|
|
132
|
+
max: t
|
|
133
|
+
} = A.value;
|
|
134
|
+
return t <= 0 ? x.value.bottom : x.value.bottom - e / t * x.value.height;
|
|
135
|
+
}, Y = i(() => A.value.ticks.map((e) => ({
|
|
136
|
+
y: G(e),
|
|
137
|
+
label: _(e),
|
|
138
|
+
isBaseline: e === 0
|
|
139
|
+
}))), U = i(() => P.value.map((e) => ({
|
|
140
|
+
x: b.value.categoryCenters[e] ?? 0,
|
|
141
|
+
text: k(e)
|
|
142
|
+
}))), q = i(() => b.value.bars.map((e) => ({
|
|
143
|
+
...e,
|
|
144
|
+
color: S(e.seriesIndex)
|
|
145
|
+
}))), o = i(() => {
|
|
146
|
+
const e = s.activeIndex;
|
|
147
|
+
if (e === null || e < 0 || e >= c.value) return null;
|
|
148
|
+
const t = m.value.map((l) => {
|
|
149
|
+
var u, r;
|
|
150
|
+
return {
|
|
151
|
+
seriesIndex: l,
|
|
152
|
+
name: (u = v.value[l]) == null ? void 0 : u.name,
|
|
153
|
+
value: ((r = w.value[l]) == null ? void 0 : r[e]) ?? 0,
|
|
154
|
+
color: S(l)
|
|
155
|
+
};
|
|
156
|
+
}).filter((l) => l.value > 0 || m.value.length === 1), a = t.reduce((l, u) => l + u.value, 0);
|
|
157
|
+
return {
|
|
158
|
+
index: e,
|
|
159
|
+
label: k(e),
|
|
160
|
+
items: t,
|
|
161
|
+
total: a
|
|
162
|
+
};
|
|
163
|
+
}), J = i(() => {
|
|
164
|
+
const e = o.value;
|
|
165
|
+
return e ? {
|
|
166
|
+
...e,
|
|
167
|
+
formatValue: g.value
|
|
168
|
+
} : null;
|
|
169
|
+
}), Q = i(() => {
|
|
170
|
+
var e;
|
|
171
|
+
return (((e = o.value) == null ? void 0 : e.items) ?? []).map((t) => ({
|
|
172
|
+
key: t.seriesIndex,
|
|
173
|
+
name: t.name ?? Z(t.seriesIndex),
|
|
174
|
+
value: g.value(t.value),
|
|
175
|
+
color: t.color
|
|
176
|
+
}));
|
|
177
|
+
}), se = i(() => {
|
|
178
|
+
const e = o.value;
|
|
179
|
+
return !e || e.items.length <= 1 ? null : {
|
|
180
|
+
label: M("chart.total"),
|
|
181
|
+
value: g.value(e.total)
|
|
182
|
+
};
|
|
183
|
+
}), re = i(() => {
|
|
184
|
+
const e = o.value;
|
|
185
|
+
if (!e) return {};
|
|
186
|
+
const t = b.value.categoryCenters[e.index] ?? 0, a = s.tooltipWidth / 2 || 0, l = a + 4, u = Math.max(l, L.width - a - 4), r = Math.min(Math.max(t, l), u), p = Math.max(oe, (b.value.categoryTops[e.index] ?? x.value.bottom) - oe);
|
|
187
|
+
return {
|
|
188
|
+
left: `${r}px`,
|
|
189
|
+
top: `${p}px`
|
|
190
|
+
};
|
|
191
|
+
});
|
|
192
|
+
le(() => [c.value, I.value], () => {
|
|
193
|
+
s.activeIndex !== null && s.activeIndex >= c.value && (s.activeIndex = null), s.hiddenIndexes = s.hiddenIndexes.filter((e) => e < I.value);
|
|
194
|
+
}), le(() => s.activeIndex, (e) => {
|
|
195
|
+
e !== null && ye(() => {
|
|
196
|
+
var a;
|
|
197
|
+
const t = ((a = z.value) == null ? void 0 : a.offsetWidth) ?? 0;
|
|
198
|
+
t !== s.tooltipWidth && (s.tooltipWidth = t);
|
|
199
|
+
});
|
|
200
|
+
});
|
|
201
|
+
const ce = (e) => {
|
|
202
|
+
var l;
|
|
203
|
+
const t = e.target, a = (l = t == null ? void 0 : t.closest) == null ? void 0 : l.call(t, "[data-bar-category]");
|
|
204
|
+
if (a) {
|
|
205
|
+
const u = Number(a.getAttribute("data-bar-series")), r = Number(a.getAttribute("data-bar-value"));
|
|
206
|
+
return {
|
|
207
|
+
seriesIndex: u,
|
|
208
|
+
value: r
|
|
209
|
+
};
|
|
210
|
+
}
|
|
211
|
+
return {
|
|
212
|
+
seriesIndex: null,
|
|
213
|
+
value: null
|
|
214
|
+
};
|
|
215
|
+
}, ae = (e) => {
|
|
216
|
+
const {
|
|
217
|
+
left: t,
|
|
218
|
+
width: a
|
|
219
|
+
} = x.value;
|
|
220
|
+
if (a <= 0 || e < t || e > t + a) return null;
|
|
221
|
+
const l = a / c.value;
|
|
222
|
+
return Math.min(c.value - 1, Math.max(0, Math.floor((e - t) / l)));
|
|
223
|
+
}, ue = (e) => {
|
|
224
|
+
if (!n.tooltip || !$.value) return;
|
|
225
|
+
const t = e.currentTarget.getBoundingClientRect();
|
|
226
|
+
s.keyboardActive = !1, s.activeIndex = ae(e.clientX - t.left);
|
|
227
|
+
}, ne = () => {
|
|
228
|
+
s.activeIndex = null, s.keyboardActive = !1;
|
|
229
|
+
}, de = (e) => {
|
|
230
|
+
const t = e.currentTarget.getBoundingClientRect(), a = ae(e.clientX - t.left);
|
|
231
|
+
if (a === null) return;
|
|
232
|
+
const {
|
|
233
|
+
seriesIndex: l,
|
|
234
|
+
value: u
|
|
235
|
+
} = ce(e), r = o.value;
|
|
236
|
+
y("bar-click", {
|
|
237
|
+
index: a,
|
|
238
|
+
label: k(a),
|
|
239
|
+
items: (r == null ? void 0 : r.index) === a ? r.items : m.value.map((p) => {
|
|
240
|
+
var D, V;
|
|
241
|
+
return {
|
|
242
|
+
seriesIndex: p,
|
|
243
|
+
name: (D = v.value[p]) == null ? void 0 : D.name,
|
|
244
|
+
value: ((V = w.value[p]) == null ? void 0 : V[a]) ?? 0,
|
|
245
|
+
color: S(p)
|
|
246
|
+
};
|
|
247
|
+
}),
|
|
248
|
+
total: (r == null ? void 0 : r.index) === a ? r.total : m.value.reduce((p, D) => {
|
|
249
|
+
var V;
|
|
250
|
+
return p + (((V = w.value[D]) == null ? void 0 : V[a]) ?? 0);
|
|
251
|
+
}, 0),
|
|
252
|
+
seriesIndex: l,
|
|
253
|
+
value: u
|
|
254
|
+
});
|
|
255
|
+
}, he = (e) => {
|
|
256
|
+
if (!n.tooltip) return;
|
|
257
|
+
const t = c.value - 1;
|
|
258
|
+
if (t < 0) return;
|
|
259
|
+
let a = null;
|
|
260
|
+
if (e.key === "ArrowRight") a = Math.min(t, (s.activeIndex ?? -1) + 1);
|
|
261
|
+
else if (e.key === "ArrowLeft") a = Math.max(0, (s.activeIndex ?? t + 1) - 1);
|
|
262
|
+
else if (e.key === "Home") a = 0;
|
|
263
|
+
else if (e.key === "End") a = t;
|
|
264
|
+
else if (e.key === "Escape") {
|
|
265
|
+
ne();
|
|
266
|
+
return;
|
|
267
|
+
}
|
|
268
|
+
a !== null && (e.preventDefault(), s.keyboardActive = !0, s.activeIndex = a);
|
|
269
|
+
}, ve = (e) => {
|
|
270
|
+
const t = s.hiddenIndexes.includes(e) ? s.hiddenIndexes.filter((a) => a !== e) : [...s.hiddenIndexes, e];
|
|
271
|
+
s.hiddenIndexes = t, y("legend-change", Array.from({
|
|
272
|
+
length: I.value
|
|
273
|
+
}, (a, l) => l).filter((a) => !t.includes(a)));
|
|
274
|
+
}, Z = (e) => {
|
|
275
|
+
var t;
|
|
276
|
+
return ((t = v.value[e]) == null ? void 0 : t.name) ?? M("chart.seriesName", {
|
|
277
|
+
index: e + 1
|
|
278
|
+
});
|
|
279
|
+
}, me = i(() => v.value.map((e, t) => ({
|
|
280
|
+
key: t,
|
|
281
|
+
name: Z(t),
|
|
282
|
+
color: S(t),
|
|
283
|
+
hidden: s.hiddenIndexes.includes(t)
|
|
284
|
+
}))), fe = i(() => {
|
|
285
|
+
const e = o.value;
|
|
286
|
+
if (!s.keyboardActive || !e) return "";
|
|
287
|
+
const t = e.items.map((a) => `${a.name ?? Z(a.seriesIndex)} ${g.value(a.value)}`);
|
|
288
|
+
return `${e.label}:${t.join(",")}`;
|
|
289
|
+
});
|
|
290
|
+
return {
|
|
291
|
+
className: d,
|
|
292
|
+
state: s,
|
|
293
|
+
size: L,
|
|
294
|
+
/*
|
|
295
|
+
* refs 必须是普通对象容器,不能把 rootRef / tooltipRef 直接 return:
|
|
296
|
+
* setup 返回的顶层 ref 会在选项式 render 的 this 上被自动解包成 DOM 元素,
|
|
297
|
+
* `ref={已解包的节点}` 不会绑定任何东西,尺寸测量会一直拿到 0。
|
|
298
|
+
* 放进普通对象后 unref 不再深入,属性仍是原始 Ref。
|
|
299
|
+
*/
|
|
300
|
+
refs: O,
|
|
301
|
+
slots: B,
|
|
302
|
+
t: M,
|
|
303
|
+
fontSize: f,
|
|
304
|
+
labelColor: X,
|
|
305
|
+
yVisible: E,
|
|
306
|
+
xVisible: R,
|
|
307
|
+
showHorizontalLines: N,
|
|
308
|
+
seriesList: v,
|
|
309
|
+
visibleSeriesIndexes: m,
|
|
310
|
+
categoryCount: c,
|
|
311
|
+
hasData: $,
|
|
312
|
+
plot: x,
|
|
313
|
+
layout: b,
|
|
314
|
+
axisTicks: Y,
|
|
315
|
+
axisXLabels: U,
|
|
316
|
+
visibleBarEntries: q,
|
|
317
|
+
activeCategory: o,
|
|
318
|
+
tooltipSlotProps: J,
|
|
319
|
+
tooltipEntries: Q,
|
|
320
|
+
tooltipTotal: se,
|
|
321
|
+
tooltipStyle: re,
|
|
322
|
+
legendItems: me,
|
|
323
|
+
categoryLabel: k,
|
|
324
|
+
formatValue: g,
|
|
325
|
+
liveText: fe,
|
|
326
|
+
handleMouseMove: ue,
|
|
327
|
+
handleClick: de,
|
|
328
|
+
handleKeydown: he,
|
|
329
|
+
clearActive: ne,
|
|
330
|
+
toggleSeries: ve,
|
|
331
|
+
setTooltipElement: (e) => {
|
|
332
|
+
z.value = e;
|
|
333
|
+
}
|
|
334
|
+
};
|
|
335
|
+
},
|
|
336
|
+
render() {
|
|
337
|
+
const {
|
|
338
|
+
className: n,
|
|
339
|
+
state: y,
|
|
340
|
+
size: B,
|
|
341
|
+
refs: M,
|
|
342
|
+
slots: d,
|
|
343
|
+
t: H,
|
|
344
|
+
fontSize: F,
|
|
345
|
+
labelColor: z,
|
|
346
|
+
yVisible: O,
|
|
347
|
+
xVisible: s,
|
|
348
|
+
showHorizontalLines: L,
|
|
349
|
+
seriesList: f,
|
|
350
|
+
visibleSeriesIndexes: E,
|
|
351
|
+
hasData: R,
|
|
352
|
+
plot: C,
|
|
353
|
+
layout: N,
|
|
354
|
+
axisTicks: v,
|
|
355
|
+
axisXLabels: W,
|
|
356
|
+
visibleBarEntries: I,
|
|
357
|
+
tooltipSlotProps: m,
|
|
358
|
+
tooltipEntries: c,
|
|
359
|
+
tooltipTotal: w,
|
|
360
|
+
tooltipStyle: T,
|
|
361
|
+
legendItems: $,
|
|
362
|
+
categoryLabel: te,
|
|
363
|
+
liveText: A,
|
|
364
|
+
handleMouseMove: g,
|
|
365
|
+
handleClick: _,
|
|
366
|
+
handleKeydown: X,
|
|
367
|
+
clearActive: k,
|
|
368
|
+
toggleSeries: j,
|
|
369
|
+
setTooltipElement: K
|
|
370
|
+
} = this, x = typeof this.width == "number" ? `${this.width}px` : this.width, b = typeof this.height == "number" ? `${this.height}px` : this.height, P = B.width > 0 && B.height > 0 && C.width > 0, S = () => I.map((o) => {
|
|
371
|
+
const J = y.activeIndex === o.index, Q = d.bar ? d.bar({
|
|
372
|
+
seriesIndex: o.seriesIndex,
|
|
373
|
+
index: o.index,
|
|
374
|
+
value: o.value,
|
|
375
|
+
x: o.x,
|
|
376
|
+
y: o.y,
|
|
377
|
+
width: o.width,
|
|
378
|
+
height: o.height,
|
|
379
|
+
color: o.color
|
|
380
|
+
}) : h("path", {
|
|
381
|
+
class: n.element("bar-shape"),
|
|
382
|
+
d: o.path,
|
|
383
|
+
fill: o.color
|
|
384
|
+
}, null);
|
|
385
|
+
return h("g", {
|
|
386
|
+
key: `${o.seriesIndex}-${o.index}`,
|
|
387
|
+
class: [n.element("bar"), {
|
|
388
|
+
[n.is("active")]: J
|
|
389
|
+
}],
|
|
390
|
+
"data-bar-category": o.index,
|
|
391
|
+
"data-bar-series": o.seriesIndex,
|
|
392
|
+
"data-bar-value": o.value
|
|
393
|
+
}, [Q]);
|
|
394
|
+
}), G = () => y.activeIndex === null || !P ? null : h("rect", {
|
|
395
|
+
class: n.element("active-band"),
|
|
396
|
+
x: (N.categoryCenters[y.activeIndex] ?? 0) - N.band / 2,
|
|
397
|
+
y: C.top,
|
|
398
|
+
width: N.band,
|
|
399
|
+
height: C.height
|
|
400
|
+
}, null), Y = () => !this.legend || f.length === 0 ? null : h(Ae, {
|
|
401
|
+
items: $,
|
|
402
|
+
onToggle: j
|
|
403
|
+
}, d.legend ? {
|
|
404
|
+
default: () => {
|
|
405
|
+
var o;
|
|
406
|
+
return (o = d.legend) == null ? void 0 : o.call(d, {
|
|
407
|
+
series: f,
|
|
408
|
+
hiddenIndexes: y.hiddenIndexes
|
|
409
|
+
});
|
|
410
|
+
}
|
|
411
|
+
} : void 0), U = () => !this.tooltip || !m ? null : h(Se, {
|
|
412
|
+
visible: !0,
|
|
413
|
+
title: m.label,
|
|
414
|
+
entries: c,
|
|
415
|
+
total: w,
|
|
416
|
+
position: T,
|
|
417
|
+
onElement: K
|
|
418
|
+
}, d.tooltip ? {
|
|
419
|
+
default: () => {
|
|
420
|
+
var o;
|
|
421
|
+
return (o = d.tooltip) == null ? void 0 : o.call(d, m);
|
|
422
|
+
}
|
|
423
|
+
} : void 0), q = () => R && E.length > 0 ? null : h("div", {
|
|
424
|
+
class: "x-chart--empty"
|
|
425
|
+
}, [d.empty ? d.empty() : H("common.noData")]);
|
|
426
|
+
return h("div", {
|
|
427
|
+
ref: M.root,
|
|
428
|
+
class: n.block
|
|
429
|
+
}, [h(Ce, ge(Me(this.loading) ? this.loading : {
|
|
430
|
+
loading: this.loading
|
|
431
|
+
}, {
|
|
432
|
+
display: "block"
|
|
433
|
+
}), {
|
|
434
|
+
default: () => [h("div", {
|
|
435
|
+
ref: M.canvas,
|
|
436
|
+
class: n.element("canvas"),
|
|
437
|
+
role: this.ariaLabel ? "img" : void 0,
|
|
438
|
+
"aria-label": this.ariaLabel
|
|
439
|
+
}, [h("svg", {
|
|
440
|
+
class: n.element("svg"),
|
|
441
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
442
|
+
style: {
|
|
443
|
+
width: x,
|
|
444
|
+
height: b
|
|
445
|
+
},
|
|
446
|
+
"aria-hidden": this.ariaLabel ? "true" : void 0,
|
|
447
|
+
tabindex: this.tooltip ? 0 : void 0,
|
|
448
|
+
onMousemove: g,
|
|
449
|
+
onMouseleave: k,
|
|
450
|
+
onClick: _,
|
|
451
|
+
onKeydown: X
|
|
452
|
+
}, [P && h(be, null, [h(Te, {
|
|
453
|
+
plot: C,
|
|
454
|
+
ticks: v,
|
|
455
|
+
xLabels: W,
|
|
456
|
+
fontSize: F,
|
|
457
|
+
color: z,
|
|
458
|
+
showX: s,
|
|
459
|
+
showY: O,
|
|
460
|
+
showHorizontalLines: L
|
|
461
|
+
}, null), G(), S()])]), U(), q()])]
|
|
462
|
+
}), Y(), h("span", {
|
|
463
|
+
class: "x-chart--live",
|
|
464
|
+
"aria-live": "polite"
|
|
465
|
+
}, [A])]);
|
|
466
|
+
}
|
|
467
|
+
});
|
|
468
|
+
export {
|
|
469
|
+
Je as default
|
|
470
|
+
};
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
import { roundedTopRectPath as S } from "../../../_utils/chart/path.js";
|
|
2
|
+
const C = 32, p = (s) => Math.round(s * 100) / 100, A = (s, n, l) => Math.min(Math.max(s, n), l), Y = (s) => {
|
|
3
|
+
var R;
|
|
4
|
+
const { count: n, values: l, stack: i, plot: a, domainMax: x, barRadius: G } = s, e = l.length, T = s.stackGap ?? 1, d = n > 0 ? a.width / n : 0, k = (t) => a.left + d * (t + 0.5), y = (t) => {
|
|
5
|
+
if (x <= 0) return a.bottom;
|
|
6
|
+
const r = A(t, 0, x);
|
|
7
|
+
return a.bottom - r / x * a.height;
|
|
8
|
+
}, b = 2, L = i || e <= 1 ? A(d * 0.6, 1, C) : A((d * 0.7 - (e - 1) * b) / e, 1, 24), D = e > 1 && !i ? (d * 0.95 - (e - 1) * b) / e : d * 0.95, h = Math.max(
|
|
9
|
+
0.5,
|
|
10
|
+
Math.min(s.barWidth && s.barWidth > 0 ? s.barWidth : L, D, C)
|
|
11
|
+
), w = [], H = Array.from({ length: n }, (t, r) => k(r)), f = Array.from({ length: n }, () => a.bottom), B = Array.from({ length: n }, () => e - 1);
|
|
12
|
+
if (i) {
|
|
13
|
+
for (let t = 0; t < n; t += 1)
|
|
14
|
+
for (let r = e - 1; r >= 0; r -= 1)
|
|
15
|
+
if ((((R = l[r]) == null ? void 0 : R[t]) ?? 0) > 0) {
|
|
16
|
+
B[t] = r;
|
|
17
|
+
break;
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
const O = i ? h : e * h + (e - 1) * b, I = (t) => k(t) - O / 2, M = new Array(n).fill(0);
|
|
21
|
+
for (let t = 0; t < e; t += 1) {
|
|
22
|
+
const r = l[t] ?? [];
|
|
23
|
+
for (let o = 0; o < n; o += 1) {
|
|
24
|
+
const m = r[o] ?? 0;
|
|
25
|
+
if (m <= 0) continue;
|
|
26
|
+
let g, c, W;
|
|
27
|
+
if (i) {
|
|
28
|
+
const _ = M[o], v = _ + m;
|
|
29
|
+
M[o] = v, g = I(o), c = y(v), W = y(_), c < f[o] && (f[o] = c);
|
|
30
|
+
} else
|
|
31
|
+
g = I(o) + t * (h + b), c = y(m), W = a.bottom, c < f[o] && (f[o] = c);
|
|
32
|
+
let u = W - c;
|
|
33
|
+
if (i && M[o] - m > 0 && u > T + 0.5 && (u -= T), u <= 0) continue;
|
|
34
|
+
const P = !i || t === B[o] ? Math.min(G, h / 2, u) : 0;
|
|
35
|
+
w.push({
|
|
36
|
+
index: o,
|
|
37
|
+
seriesIndex: t,
|
|
38
|
+
value: m,
|
|
39
|
+
x: p(g),
|
|
40
|
+
y: p(c),
|
|
41
|
+
width: p(h),
|
|
42
|
+
height: p(u),
|
|
43
|
+
path: S(g, c, h, u, P)
|
|
44
|
+
});
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
return { band: d, barWidth: p(h), bars: w, categoryCenters: H, categoryTops: f };
|
|
48
|
+
};
|
|
49
|
+
export {
|
|
50
|
+
C as MAX_BAR_WIDTH,
|
|
51
|
+
Y as computeBarLayout,
|
|
52
|
+
S as roundedTopRectPath
|
|
53
|
+
};
|
|
@@ -0,0 +1,148 @@
|
|
|
1
|
+
import { definePropType as e } from "../../_utils/vue-eco.js";
|
|
2
|
+
import { defaultValueFormatter as a } from "../../_utils/chart/scale.js";
|
|
3
|
+
import { validatePadding as r } from "../../_utils/chart/padding.js";
|
|
4
|
+
const o = {
|
|
5
|
+
/**
|
|
6
|
+
* @zh 类目轴标签,与每个系列 data 的下标一一对应;缺省时按 1、2、3… 显示
|
|
7
|
+
* @en Category axis labels, aligned by index with each series data
|
|
8
|
+
*/
|
|
9
|
+
categories: {
|
|
10
|
+
type: Array,
|
|
11
|
+
default: () => []
|
|
12
|
+
},
|
|
13
|
+
/**
|
|
14
|
+
* @zh 数据系列;单系列渲染为普通柱状图,多系列可并排或堆叠
|
|
15
|
+
* @en Data series; a single series renders plain bars, multiple series render
|
|
16
|
+
* grouped or stacked
|
|
17
|
+
*/
|
|
18
|
+
series: {
|
|
19
|
+
required: !0,
|
|
20
|
+
type: e(Array),
|
|
21
|
+
default: () => []
|
|
22
|
+
},
|
|
23
|
+
/**
|
|
24
|
+
* @zh 是否堆叠多系列;false 时同组柱体并排
|
|
25
|
+
* @en Whether to stack multiple series; side-by-side when false
|
|
26
|
+
* @defaultValue false
|
|
27
|
+
*/
|
|
28
|
+
stack: {
|
|
29
|
+
type: Boolean,
|
|
30
|
+
default: !1
|
|
31
|
+
},
|
|
32
|
+
/**
|
|
33
|
+
* @zh 图表高度,数字按 px 处理
|
|
34
|
+
* @en Chart height; numbers are treated as px
|
|
35
|
+
* @defaultValue 240
|
|
36
|
+
*/
|
|
37
|
+
height: {
|
|
38
|
+
type: [Number, String],
|
|
39
|
+
default: 240
|
|
40
|
+
},
|
|
41
|
+
/**
|
|
42
|
+
* @zh 图表宽度,数字按 px 处理,默认撑满父容器
|
|
43
|
+
* @en Chart width; numbers are treated as px, defaults to filling the parent
|
|
44
|
+
* @defaultValue '100%'
|
|
45
|
+
*/
|
|
46
|
+
width: {
|
|
47
|
+
type: [Number, String],
|
|
48
|
+
default: "100%"
|
|
49
|
+
},
|
|
50
|
+
/**
|
|
51
|
+
* @zh 数值轴上界;传入后不再自动计算「好看」的刻度,超出部分被截断
|
|
52
|
+
* @en Upper bound of the value axis; disables nice-tick calculation and clamps
|
|
53
|
+
* larger values
|
|
54
|
+
*/
|
|
55
|
+
max: {
|
|
56
|
+
type: Number
|
|
57
|
+
},
|
|
58
|
+
/**
|
|
59
|
+
* @zh 柱体宽度,默认按类目带自适应(并排时不超过 24px,单柱不超过 32px)
|
|
60
|
+
* @en Bar width; defaults to adapting to the band (max 24px grouped, 32px single)
|
|
61
|
+
*/
|
|
62
|
+
barWidth: {
|
|
63
|
+
type: Number
|
|
64
|
+
},
|
|
65
|
+
/**
|
|
66
|
+
* @zh 柱顶圆角半径
|
|
67
|
+
* @en Radius of the bar top corners
|
|
68
|
+
* @defaultValue 4
|
|
69
|
+
*/
|
|
70
|
+
barRadius: {
|
|
71
|
+
type: Number,
|
|
72
|
+
default: 4
|
|
73
|
+
},
|
|
74
|
+
/**
|
|
75
|
+
* @zh 绘制边距,支持 1-4 个非负数字字符串或单个非负数字
|
|
76
|
+
* @en Plot padding; supports a single non-negative number or CSS-like 1-4 values
|
|
77
|
+
* @defaultValue '8'
|
|
78
|
+
*/
|
|
79
|
+
padding: {
|
|
80
|
+
default: "8",
|
|
81
|
+
type: [String, Number],
|
|
82
|
+
validator(t) {
|
|
83
|
+
return r(t);
|
|
84
|
+
}
|
|
85
|
+
},
|
|
86
|
+
/**
|
|
87
|
+
* @zh 横向网格线配置
|
|
88
|
+
* @en Horizontal grid line options
|
|
89
|
+
*/
|
|
90
|
+
grid: {
|
|
91
|
+
default: null,
|
|
92
|
+
type: e(Object)
|
|
93
|
+
},
|
|
94
|
+
/**
|
|
95
|
+
* @zh 坐标轴标签配置
|
|
96
|
+
* @en Axis label options
|
|
97
|
+
*/
|
|
98
|
+
labels: {
|
|
99
|
+
default: null,
|
|
100
|
+
type: e(Object)
|
|
101
|
+
},
|
|
102
|
+
/**
|
|
103
|
+
* @zh 悬浮提示
|
|
104
|
+
* @en Hover tooltip
|
|
105
|
+
* @defaultValue true
|
|
106
|
+
*/
|
|
107
|
+
tooltip: {
|
|
108
|
+
type: Boolean,
|
|
109
|
+
default: !0
|
|
110
|
+
},
|
|
111
|
+
/**
|
|
112
|
+
* @zh 图例;多系列时建议开启,点击图例项可临时隐藏/显示对应系列
|
|
113
|
+
* @en Legend; recommended for multiple series, clicking an item toggles the
|
|
114
|
+
* series visibility
|
|
115
|
+
* @defaultValue false
|
|
116
|
+
*/
|
|
117
|
+
legend: {
|
|
118
|
+
type: Boolean,
|
|
119
|
+
default: !1
|
|
120
|
+
},
|
|
121
|
+
/**
|
|
122
|
+
* @zh 数值格式化函数,用于提示、图例与数值轴
|
|
123
|
+
* @en Value formatter used by tooltip, legend and the value axis
|
|
124
|
+
*/
|
|
125
|
+
valueFormatter: {
|
|
126
|
+
type: Function,
|
|
127
|
+
default: a
|
|
128
|
+
},
|
|
129
|
+
/**
|
|
130
|
+
* @zh 加载中
|
|
131
|
+
* @en Loading state
|
|
132
|
+
* @defaultValue false
|
|
133
|
+
*/
|
|
134
|
+
loading: {
|
|
135
|
+
type: [Boolean, Object],
|
|
136
|
+
default: !1
|
|
137
|
+
},
|
|
138
|
+
/**
|
|
139
|
+
* @zh 无障碍名称;设置后根节点带 role="img"
|
|
140
|
+
* @en Accessible name; adds role="img" to the root when set
|
|
141
|
+
*/
|
|
142
|
+
ariaLabel: {
|
|
143
|
+
type: String
|
|
144
|
+
}
|
|
145
|
+
};
|
|
146
|
+
export {
|
|
147
|
+
o as barChartProps
|
|
148
|
+
};
|