x-next 1.7.0 → 1.8.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.
Files changed (88) hide show
  1. package/AI_USAGE.md +129 -4
  2. package/CHANGELOG.md +38 -0
  3. package/dist/_hooks/use-chart-size.d.ts +25 -0
  4. package/dist/_utils/chart/index.d.ts +6 -0
  5. package/dist/_utils/chart/padding.d.ts +15 -0
  6. package/dist/_utils/chart/path.d.ts +34 -0
  7. package/dist/_utils/chart/scale.d.ts +55 -0
  8. package/dist/components/_components/chart/ChartAxis.d.ts +85 -0
  9. package/dist/components/_components/chart/ChartLegend.d.ts +26 -0
  10. package/dist/components/_components/chart/ChartTooltip.d.ts +76 -0
  11. package/dist/components/_components/chart/colors.d.ts +10 -0
  12. package/dist/components/_components/chart/interface.d.ts +38 -0
  13. package/dist/components/bar-chart/BarChart.d.ts +278 -0
  14. package/dist/components/bar-chart/helpers/layout.d.ts +55 -0
  15. package/dist/components/bar-chart/index.d.ts +600 -0
  16. package/dist/components/bar-chart/interface.d.ts +74 -0
  17. package/dist/components/bar-chart/props.d.ts +145 -0
  18. package/dist/components/heatmap/Heatmap.d.ts +10 -0
  19. package/dist/components/heatmap/index.d.ts +30 -0
  20. package/dist/components/index.d.ts +3 -0
  21. package/dist/components/line-chart/LineChart.d.ts +295 -0
  22. package/dist/components/line-chart/helpers/layout.d.ts +74 -0
  23. package/dist/components/line-chart/index.d.ts +614 -0
  24. package/dist/components/line-chart/interface.d.ts +76 -0
  25. package/dist/components/line-chart/props.d.ts +173 -0
  26. package/dist/components/pie-chart/PieChart.d.ts +219 -0
  27. package/dist/components/pie-chart/index.d.ts +470 -0
  28. package/dist/components/pie-chart/interface.d.ts +58 -0
  29. package/dist/components/pie-chart/props.d.ts +107 -0
  30. package/dist/components/trend-chart/components/TrendChart.d.ts +19 -96
  31. package/dist/components/trend-chart/index.d.ts +33 -187
  32. package/dist/components/trend-chart/props.d.ts +9 -78
  33. package/dist/components/trend-chart/themes.d.ts +0 -1
  34. package/dist/es/_hooks/use-chart-size.js +25 -0
  35. package/dist/es/_styles/palette-aliases.js +5 -0
  36. package/dist/es/_utils/chart/padding.js +22 -0
  37. package/dist/es/_utils/chart/path.js +69 -0
  38. package/dist/es/_utils/chart/scale.js +77 -0
  39. package/dist/es/components/_components/chart/ChartAxis.js +79 -0
  40. package/dist/es/components/_components/chart/ChartLegend.js +53 -0
  41. package/dist/es/components/_components/chart/ChartTooltip.js +64 -0
  42. package/dist/es/components/_components/chart/colors.js +12 -0
  43. package/dist/es/components/bar-chart/BarChart.js +470 -0
  44. package/dist/es/components/bar-chart/helpers/layout.js +53 -0
  45. package/dist/es/components/bar-chart/index.js +8 -0
  46. package/dist/es/components/bar-chart/props.js +148 -0
  47. package/dist/es/components/heatmap/Heatmap.js +244 -169
  48. package/dist/es/components/index.js +132 -126
  49. package/dist/es/components/line-chart/LineChart.js +532 -0
  50. package/dist/es/components/line-chart/helpers/layout.js +80 -0
  51. package/dist/es/components/line-chart/index.js +8 -0
  52. package/dist/es/components/line-chart/props.js +178 -0
  53. package/dist/es/components/pie-chart/PieChart.js +397 -0
  54. package/dist/es/components/pie-chart/index.js +8 -0
  55. package/dist/es/components/pie-chart/props.js +104 -0
  56. package/dist/es/components/trend-chart/components/TrendChart.js +143 -183
  57. package/dist/es/components/trend-chart/components/trend-chart-curve.js +85 -81
  58. package/dist/es/components/trend-chart/props.js +28 -74
  59. package/dist/es/components/trend-chart/themes.js +30 -31
  60. package/dist/es/index.js +193 -187
  61. package/dist/es/locale/en-US.js +8 -1
  62. package/dist/es/locale/zh-CN.js +8 -1
  63. package/dist/es/style.css +1 -1
  64. package/dist/index.cjs +4 -4
  65. package/dist/index.umd.js +4 -4
  66. package/dist/locale/interface.d.ts +13 -0
  67. package/dist/style/bar-chart.css +1 -0
  68. package/dist/style/bar-chart.js +2 -0
  69. package/dist/style/base.css +1 -1
  70. package/dist/style/heatmap.css +1 -1
  71. package/dist/style/line-chart.css +1 -0
  72. package/dist/style/line-chart.js +2 -0
  73. package/dist/style/pie-chart.css +1 -0
  74. package/dist/style/pie-chart.js +2 -0
  75. package/dist/style.css +1 -1
  76. package/dist/types.d.ts +3 -0
  77. package/package.json +1 -1
  78. package/volar.d.ts +3 -0
  79. package/dist/components/trend-chart/components/trend-chart-grid.d.ts +0 -55
  80. package/dist/components/trend-chart/components/trend-chart-labels.d.ts +0 -26
  81. package/dist/components/trend-chart/helpers/genPath.d.ts +0 -8
  82. package/dist/components/trend-chart/helpers/getPadding.d.ts +0 -8
  83. package/dist/components/trend-chart/helpers/validatePadding.d.ts +0 -2
  84. package/dist/es/components/trend-chart/components/trend-chart-grid.js +0 -62
  85. package/dist/es/components/trend-chart/components/trend-chart-labels.js +0 -75
  86. package/dist/es/components/trend-chart/helpers/genPath.js +0 -22
  87. package/dist/es/components/trend-chart/helpers/getPadding.js +0 -21
  88. 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,8 @@
1
+ import r from "./BarChart.js";
2
+ import { generateComponent as t } from "../../_utils/vue-eco.js";
3
+ import { getComponentPrefix as o } from "../../_utils/config.js";
4
+ const n = t(o("BarChart"), r);
5
+ export {
6
+ n as BarChart,
7
+ n as default
8
+ };
@@ -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
+ };