@ant-design/agentic-ui 2.30.2 → 2.30.3
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/Hooks/useLanguage.d.ts +3 -0
- package/dist/I18n/locales.d.ts +3 -0
- package/dist/I18n/locales.js +6 -0
- package/dist/MarkdownRenderer/useMarkdownToReact.js +3 -1
- package/dist/Plugins/chart/AreaChart/index.js +4 -3
- package/dist/Plugins/chart/BarChart/index.js +3 -3
- package/dist/Plugins/chart/BoxPlotChart/index.d.ts +65 -0
- package/dist/Plugins/chart/BoxPlotChart/index.js +665 -0
- package/dist/Plugins/chart/BoxPlotChart/style.d.ts +8 -0
- package/dist/Plugins/chart/BoxPlotChart/style.js +118 -0
- package/dist/Plugins/chart/ChartAttrToolBar/index.js +5 -16
- package/dist/Plugins/chart/ChartMark/Area.d.ts +2 -1
- package/dist/Plugins/chart/ChartMark/Area.js +5 -4
- package/dist/Plugins/chart/ChartMark/Bar.d.ts +2 -1
- package/dist/Plugins/chart/ChartMark/Bar.js +5 -4
- package/dist/Plugins/chart/ChartMark/Column.d.ts +2 -1
- package/dist/Plugins/chart/ChartMark/Column.js +5 -4
- package/dist/Plugins/chart/ChartMark/Line.d.ts +2 -1
- package/dist/Plugins/chart/ChartMark/Line.js +5 -4
- package/dist/Plugins/chart/ChartMark/Pie.d.ts +2 -1
- package/dist/Plugins/chart/ChartMark/Pie.js +5 -4
- package/dist/Plugins/chart/ChartRender.d.ts +1 -1
- package/dist/Plugins/chart/ChartRender.js +188 -12
- package/dist/Plugins/chart/DonutChart/Legend.d.ts +5 -3
- package/dist/Plugins/chart/DonutChart/Legend.js +30 -38
- package/dist/Plugins/chart/DonutChart/index.js +82 -23
- package/dist/Plugins/chart/DonutChart/plugins.d.ts +2 -2
- package/dist/Plugins/chart/DonutChart/plugins.js +5 -5
- package/dist/Plugins/chart/DonutChart/types.d.ts +2 -0
- package/dist/Plugins/chart/FunnelChart/index.js +24 -14
- package/dist/Plugins/chart/HistogramChart/index.d.ts +65 -0
- package/dist/Plugins/chart/HistogramChart/index.js +665 -0
- package/dist/Plugins/chart/HistogramChart/style.d.ts +8 -0
- package/dist/Plugins/chart/HistogramChart/style.js +118 -0
- package/dist/Plugins/chart/LineChart/index.js +4 -3
- package/dist/Plugins/chart/RadarChart/index.d.ts +2 -0
- package/dist/Plugins/chart/RadarChart/index.js +28 -26
- package/dist/Plugins/chart/ScatterChart/index.d.ts +2 -0
- package/dist/Plugins/chart/ScatterChart/index.js +43 -28
- package/dist/Plugins/chart/components/ChartContainer/ChartContainer.d.ts +1 -0
- package/dist/Plugins/chart/components/ChartContainer/ChartContainer.js +14 -0
- package/dist/Plugins/chart/components/ChartContainer/ChartDarkAntdContext.d.ts +7 -0
- package/dist/Plugins/chart/components/ChartContainer/ChartDarkAntdContext.js +8 -0
- package/dist/Plugins/chart/components/ChartContainer/ChartErrorBoundary.d.ts +8 -2
- package/dist/Plugins/chart/components/ChartContainer/style.js +3 -3
- package/dist/Plugins/chart/components/ChartToolBar/ChartToolBar.d.ts +2 -0
- package/dist/Plugins/chart/components/ChartToolBar/ChartToolBar.js +23 -32
- package/dist/Plugins/chart/index.d.ts +4 -0
- package/dist/Plugins/chart/index.js +2 -0
- package/dist/Plugins/chart/loadChartRuntime.d.ts +4 -0
- package/dist/Plugins/chart/loadChartRuntime.js +5 -1
- package/package.json +3 -1
|
@@ -0,0 +1,665 @@
|
|
|
1
|
+
function _array_like_to_array(arr, len) {
|
|
2
|
+
if (len == null || len > arr.length) len = arr.length;
|
|
3
|
+
for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
|
|
4
|
+
return arr2;
|
|
5
|
+
}
|
|
6
|
+
function _array_with_holes(arr) {
|
|
7
|
+
if (Array.isArray(arr)) return arr;
|
|
8
|
+
}
|
|
9
|
+
function _array_without_holes(arr) {
|
|
10
|
+
if (Array.isArray(arr)) return _array_like_to_array(arr);
|
|
11
|
+
}
|
|
12
|
+
function _define_property(obj, key, value) {
|
|
13
|
+
if (key in obj) {
|
|
14
|
+
Object.defineProperty(obj, key, {
|
|
15
|
+
value: value,
|
|
16
|
+
enumerable: true,
|
|
17
|
+
configurable: true,
|
|
18
|
+
writable: true
|
|
19
|
+
});
|
|
20
|
+
} else {
|
|
21
|
+
obj[key] = value;
|
|
22
|
+
}
|
|
23
|
+
return obj;
|
|
24
|
+
}
|
|
25
|
+
function _iterable_to_array(iter) {
|
|
26
|
+
if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
|
|
27
|
+
}
|
|
28
|
+
function _iterable_to_array_limit(arr, i) {
|
|
29
|
+
var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
|
|
30
|
+
if (_i == null) return;
|
|
31
|
+
var _arr = [];
|
|
32
|
+
var _n = true;
|
|
33
|
+
var _d = false;
|
|
34
|
+
var _s, _e;
|
|
35
|
+
try {
|
|
36
|
+
for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
|
|
37
|
+
_arr.push(_s.value);
|
|
38
|
+
if (i && _arr.length === i) break;
|
|
39
|
+
}
|
|
40
|
+
} catch (err) {
|
|
41
|
+
_d = true;
|
|
42
|
+
_e = err;
|
|
43
|
+
} finally{
|
|
44
|
+
try {
|
|
45
|
+
if (!_n && _i["return"] != null) _i["return"]();
|
|
46
|
+
} finally{
|
|
47
|
+
if (_d) throw _e;
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
return _arr;
|
|
51
|
+
}
|
|
52
|
+
function _non_iterable_rest() {
|
|
53
|
+
throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
|
54
|
+
}
|
|
55
|
+
function _non_iterable_spread() {
|
|
56
|
+
throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
|
57
|
+
}
|
|
58
|
+
function _object_spread(target) {
|
|
59
|
+
for(var i = 1; i < arguments.length; i++){
|
|
60
|
+
var source = arguments[i] != null ? arguments[i] : {};
|
|
61
|
+
var ownKeys = Object.keys(source);
|
|
62
|
+
if (typeof Object.getOwnPropertySymbols === "function") {
|
|
63
|
+
ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
|
|
64
|
+
return Object.getOwnPropertyDescriptor(source, sym).enumerable;
|
|
65
|
+
}));
|
|
66
|
+
}
|
|
67
|
+
ownKeys.forEach(function(key) {
|
|
68
|
+
_define_property(target, key, source[key]);
|
|
69
|
+
});
|
|
70
|
+
}
|
|
71
|
+
return target;
|
|
72
|
+
}
|
|
73
|
+
function ownKeys(object, enumerableOnly) {
|
|
74
|
+
var keys = Object.keys(object);
|
|
75
|
+
if (Object.getOwnPropertySymbols) {
|
|
76
|
+
var symbols = Object.getOwnPropertySymbols(object);
|
|
77
|
+
if (enumerableOnly) {
|
|
78
|
+
symbols = symbols.filter(function(sym) {
|
|
79
|
+
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
|
|
80
|
+
});
|
|
81
|
+
}
|
|
82
|
+
keys.push.apply(keys, symbols);
|
|
83
|
+
}
|
|
84
|
+
return keys;
|
|
85
|
+
}
|
|
86
|
+
function _object_spread_props(target, source) {
|
|
87
|
+
source = source != null ? source : {};
|
|
88
|
+
if (Object.getOwnPropertyDescriptors) {
|
|
89
|
+
Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
|
|
90
|
+
} else {
|
|
91
|
+
ownKeys(Object(source)).forEach(function(key) {
|
|
92
|
+
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
|
|
93
|
+
});
|
|
94
|
+
}
|
|
95
|
+
return target;
|
|
96
|
+
}
|
|
97
|
+
function _object_without_properties(source, excluded) {
|
|
98
|
+
if (source == null) return {};
|
|
99
|
+
var target = {}, sourceKeys, key, i;
|
|
100
|
+
if (typeof Reflect !== "undefined" && Reflect.ownKeys) {
|
|
101
|
+
sourceKeys = Reflect.ownKeys(source);
|
|
102
|
+
for(i = 0; i < sourceKeys.length; i++){
|
|
103
|
+
key = sourceKeys[i];
|
|
104
|
+
if (excluded.indexOf(key) >= 0) continue;
|
|
105
|
+
if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
|
|
106
|
+
target[key] = source[key];
|
|
107
|
+
}
|
|
108
|
+
return target;
|
|
109
|
+
}
|
|
110
|
+
target = _object_without_properties_loose(source, excluded);
|
|
111
|
+
if (Object.getOwnPropertySymbols) {
|
|
112
|
+
sourceKeys = Object.getOwnPropertySymbols(source);
|
|
113
|
+
for(i = 0; i < sourceKeys.length; i++){
|
|
114
|
+
key = sourceKeys[i];
|
|
115
|
+
if (excluded.indexOf(key) >= 0) continue;
|
|
116
|
+
if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
|
|
117
|
+
target[key] = source[key];
|
|
118
|
+
}
|
|
119
|
+
}
|
|
120
|
+
return target;
|
|
121
|
+
}
|
|
122
|
+
function _object_without_properties_loose(source, excluded) {
|
|
123
|
+
if (source == null) return {};
|
|
124
|
+
var target = {}, sourceKeys = Object.getOwnPropertyNames(source), key, i;
|
|
125
|
+
for(i = 0; i < sourceKeys.length; i++){
|
|
126
|
+
key = sourceKeys[i];
|
|
127
|
+
if (excluded.indexOf(key) >= 0) continue;
|
|
128
|
+
if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
|
|
129
|
+
target[key] = source[key];
|
|
130
|
+
}
|
|
131
|
+
return target;
|
|
132
|
+
}
|
|
133
|
+
function _sliced_to_array(arr, i) {
|
|
134
|
+
return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
|
|
135
|
+
}
|
|
136
|
+
function _to_consumable_array(arr) {
|
|
137
|
+
return _array_without_holes(arr) || _iterable_to_array(arr) || _unsupported_iterable_to_array(arr) || _non_iterable_spread();
|
|
138
|
+
}
|
|
139
|
+
function _unsupported_iterable_to_array(o, minLen) {
|
|
140
|
+
if (!o) return;
|
|
141
|
+
if (typeof o === "string") return _array_like_to_array(o, minLen);
|
|
142
|
+
var n = Object.prototype.toString.call(o).slice(8, -1);
|
|
143
|
+
if (n === "Object" && o.constructor) n = o.constructor.name;
|
|
144
|
+
if (n === "Map" || n === "Set") return Array.from(n);
|
|
145
|
+
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
|
|
146
|
+
}
|
|
147
|
+
import { ConfigProvider } from "antd";
|
|
148
|
+
import { BarElement, CategoryScale, Chart as ChartJS, Legend, LinearScale, Tooltip } from "chart.js";
|
|
149
|
+
import classNames from "clsx";
|
|
150
|
+
import React, { useContext, useEffect, useMemo, useRef, useState } from "react";
|
|
151
|
+
import { Bar } from "react-chartjs-2";
|
|
152
|
+
import ChartStatistic from "../ChartStatistic";
|
|
153
|
+
import { ChartContainer, ChartFilter, ChartToolBar, downloadChart } from "../components";
|
|
154
|
+
import { defaultColorList } from "../const";
|
|
155
|
+
import { hexToRgba, resolveCssVariable } from "../utils";
|
|
156
|
+
import { useStyle } from "./style";
|
|
157
|
+
var histogramChartComponentsRegistered = false;
|
|
158
|
+
/**
|
|
159
|
+
* 计算 Sturges 规则的分箱数量
|
|
160
|
+
* k = ceil(log2(n) + 1)
|
|
161
|
+
*/ function calculateBinCount(n) {
|
|
162
|
+
if (n <= 0) return 1;
|
|
163
|
+
return Math.ceil(Math.log2(n) + 1);
|
|
164
|
+
}
|
|
165
|
+
/**
|
|
166
|
+
* 计算分箱边界
|
|
167
|
+
*/ function calculateBinEdges(values, binCount) {
|
|
168
|
+
var _Math, _Math1;
|
|
169
|
+
if (values.length === 0) {
|
|
170
|
+
return {
|
|
171
|
+
edges: [],
|
|
172
|
+
min: 0,
|
|
173
|
+
max: 0
|
|
174
|
+
};
|
|
175
|
+
}
|
|
176
|
+
var min = (_Math = Math).min.apply(_Math, _to_consumable_array(values));
|
|
177
|
+
var max = (_Math1 = Math).max.apply(_Math1, _to_consumable_array(values));
|
|
178
|
+
// 如果所有值相同,创建一个默认范围
|
|
179
|
+
if (min === max) {
|
|
180
|
+
var edge = min;
|
|
181
|
+
return {
|
|
182
|
+
edges: [
|
|
183
|
+
edge - 0.5,
|
|
184
|
+
edge + 0.5
|
|
185
|
+
],
|
|
186
|
+
min: edge - 0.5,
|
|
187
|
+
max: edge + 0.5
|
|
188
|
+
};
|
|
189
|
+
}
|
|
190
|
+
var range = max - min;
|
|
191
|
+
var binWidth = range / binCount;
|
|
192
|
+
var edges = [];
|
|
193
|
+
for(var i = 0; i <= binCount; i++){
|
|
194
|
+
edges.push(min + i * binWidth);
|
|
195
|
+
}
|
|
196
|
+
return {
|
|
197
|
+
edges: edges,
|
|
198
|
+
min: min,
|
|
199
|
+
max: max
|
|
200
|
+
};
|
|
201
|
+
}
|
|
202
|
+
/**
|
|
203
|
+
* 格式化分箱标签
|
|
204
|
+
*/ function formatBinLabel(start, end) {
|
|
205
|
+
var formatNum = function formatNum(n) {
|
|
206
|
+
if (Math.abs(n) >= 1000 || Math.abs(n) < 0.01 && n !== 0) {
|
|
207
|
+
return n.toExponential(1);
|
|
208
|
+
}
|
|
209
|
+
return n.toFixed(2);
|
|
210
|
+
};
|
|
211
|
+
return "".concat(formatNum(start), " - ").concat(formatNum(end));
|
|
212
|
+
}
|
|
213
|
+
var HistogramChart = function HistogramChart(_0) {
|
|
214
|
+
var title = _0.title, data = _0.data, _0_width = _0.width, width = _0_width === void 0 ? 600 : _0_width, _0_height = _0.height, height = _0_height === void 0 ? 400 : _0_height, className = _0.className, classNamesProp = _0.classNames, style = _0.style, styles = _0.styles, dataTime = _0.dataTime, _0_theme = _0.theme, theme = _0_theme === void 0 ? 'light' : _0_theme, color = _0.color, _0_showLegend = _0.showLegend, showLegend = _0_showLegend === void 0 ? true : _0_showLegend, _0_legendPosition = _0.legendPosition, legendPosition = _0_legendPosition === void 0 ? 'bottom' : _0_legendPosition, _0_showGrid = _0.showGrid, showGrid = _0_showGrid === void 0 ? true : _0_showGrid, xAxisLabel = _0.xAxisLabel, yAxisLabel = _0.yAxisLabel, _0_stacked = _0.stacked, stacked = _0_stacked === void 0 ? true : _0_stacked, customBinCount = _0.binCount, _0_showFrequency = _0.showFrequency, showFrequency = _0_showFrequency === void 0 ? false : _0_showFrequency, toolbarExtra = _0.toolbarExtra, _0_renderFilterInToolbar = _0.renderFilterInToolbar, renderFilterInToolbar = _0_renderFilterInToolbar === void 0 ? false : _0_renderFilterInToolbar, statisticConfig = _0.statistic, _0_loading = _0.loading, loading = _0_loading === void 0 ? false : _0_loading, props = _object_without_properties(_0, [
|
|
215
|
+
"title",
|
|
216
|
+
"data",
|
|
217
|
+
"width",
|
|
218
|
+
"height",
|
|
219
|
+
"className",
|
|
220
|
+
"classNames",
|
|
221
|
+
"style",
|
|
222
|
+
"styles",
|
|
223
|
+
"dataTime",
|
|
224
|
+
"theme",
|
|
225
|
+
"color",
|
|
226
|
+
"showLegend",
|
|
227
|
+
"legendPosition",
|
|
228
|
+
"showGrid",
|
|
229
|
+
"xAxisLabel",
|
|
230
|
+
"yAxisLabel",
|
|
231
|
+
"stacked",
|
|
232
|
+
"binCount",
|
|
233
|
+
"showFrequency",
|
|
234
|
+
"toolbarExtra",
|
|
235
|
+
"renderFilterInToolbar",
|
|
236
|
+
"statistic",
|
|
237
|
+
"loading"
|
|
238
|
+
]);
|
|
239
|
+
// 注册 Chart.js 组件
|
|
240
|
+
useMemo(function() {
|
|
241
|
+
if (histogramChartComponentsRegistered) {
|
|
242
|
+
return undefined;
|
|
243
|
+
}
|
|
244
|
+
if (typeof window === 'undefined') {
|
|
245
|
+
return undefined;
|
|
246
|
+
}
|
|
247
|
+
ChartJS.register(CategoryScale, LinearScale, BarElement, Tooltip, Legend);
|
|
248
|
+
histogramChartComponentsRegistered = true;
|
|
249
|
+
return undefined;
|
|
250
|
+
}, []);
|
|
251
|
+
var getPrefixCls = useContext(ConfigProvider.ConfigContext).getPrefixCls;
|
|
252
|
+
var prefixCls = getPrefixCls('histogram-chart');
|
|
253
|
+
var _useStyle = useStyle(prefixCls), wrapSSR = _useStyle.wrapSSR, hashId = _useStyle.hashId;
|
|
254
|
+
// 处理 ChartStatistic 组件配置
|
|
255
|
+
var statistics = useMemo(function() {
|
|
256
|
+
if (!statisticConfig) return null;
|
|
257
|
+
if (Array.isArray(statisticConfig) && statisticConfig.length === 0) return null;
|
|
258
|
+
return Array.isArray(statisticConfig) ? statisticConfig : [
|
|
259
|
+
statisticConfig
|
|
260
|
+
];
|
|
261
|
+
}, [
|
|
262
|
+
statisticConfig
|
|
263
|
+
]);
|
|
264
|
+
// 响应式尺寸计算
|
|
265
|
+
var _useState = _sliced_to_array(useState(typeof window !== 'undefined' ? window.innerWidth : 768), 2), windowWidth = _useState[0], setWindowWidth = _useState[1];
|
|
266
|
+
var isMobile = windowWidth <= 768;
|
|
267
|
+
var responsiveWidth = isMobile ? '100%' : width;
|
|
268
|
+
var responsiveHeight = isMobile ? Math.min(windowWidth * 0.8, 400) : height;
|
|
269
|
+
// 监听窗口大小变化
|
|
270
|
+
useEffect(function() {
|
|
271
|
+
var handleResize = function handleResize() {
|
|
272
|
+
setWindowWidth(window.innerWidth);
|
|
273
|
+
};
|
|
274
|
+
if (typeof window !== 'undefined') {
|
|
275
|
+
window.addEventListener('resize', handleResize);
|
|
276
|
+
return function() {
|
|
277
|
+
return window.removeEventListener('resize', handleResize);
|
|
278
|
+
};
|
|
279
|
+
}
|
|
280
|
+
}, []);
|
|
281
|
+
var chartRef = useRef(null);
|
|
282
|
+
// 数据安全检查
|
|
283
|
+
var safeData = Array.isArray(data) ? data : [];
|
|
284
|
+
// 从数据中提取分类
|
|
285
|
+
var categories = useMemo(function() {
|
|
286
|
+
var uniqueCategories = _to_consumable_array(new Set(safeData.map(function(item) {
|
|
287
|
+
return item === null || item === void 0 ? void 0 : item.category;
|
|
288
|
+
}))).filter(Boolean);
|
|
289
|
+
return uniqueCategories;
|
|
290
|
+
}, [
|
|
291
|
+
safeData
|
|
292
|
+
]);
|
|
293
|
+
// 从数据中提取 filterLabel
|
|
294
|
+
var validFilterLabels = useMemo(function() {
|
|
295
|
+
return safeData.map(function(item) {
|
|
296
|
+
return item === null || item === void 0 ? void 0 : item.filterLabel;
|
|
297
|
+
}).filter(function(filterLabel) {
|
|
298
|
+
return filterLabel !== undefined;
|
|
299
|
+
});
|
|
300
|
+
}, [
|
|
301
|
+
safeData
|
|
302
|
+
]);
|
|
303
|
+
var filterLabels = useMemo(function() {
|
|
304
|
+
return validFilterLabels.length > 0 ? _to_consumable_array(new Set(validFilterLabels)) : undefined;
|
|
305
|
+
}, [
|
|
306
|
+
validFilterLabels
|
|
307
|
+
]);
|
|
308
|
+
// 状态管理
|
|
309
|
+
var _useState1 = _sliced_to_array(useState(categories.find(Boolean) || ''), 2), selectedFilter = _useState1[0], setSelectedFilter = _useState1[1];
|
|
310
|
+
var _useState2 = _sliced_to_array(useState(filterLabels && filterLabels.length > 0 ? filterLabels[0] : undefined), 2), selectedFilterLabel = _useState2[0], setSelectedFilterLabel = _useState2[1];
|
|
311
|
+
// 当数据变化导致当前选中分类失效时,自动回退
|
|
312
|
+
useEffect(function() {
|
|
313
|
+
if (selectedFilter && !categories.includes(selectedFilter)) {
|
|
314
|
+
setSelectedFilter(categories.find(Boolean) || '');
|
|
315
|
+
}
|
|
316
|
+
}, [
|
|
317
|
+
categories,
|
|
318
|
+
selectedFilter
|
|
319
|
+
]);
|
|
320
|
+
// 筛选数据
|
|
321
|
+
var filteredData = useMemo(function() {
|
|
322
|
+
var base = selectedFilter ? safeData.filter(function(item) {
|
|
323
|
+
return item.category === selectedFilter;
|
|
324
|
+
}) : safeData;
|
|
325
|
+
var withFilterLabel = !filterLabels || !selectedFilterLabel ? base : base.filter(function(item) {
|
|
326
|
+
return item.filterLabel === selectedFilterLabel;
|
|
327
|
+
});
|
|
328
|
+
return withFilterLabel.filter(function(item) {
|
|
329
|
+
return item && typeof item.value === 'number' && Number.isFinite(item.value);
|
|
330
|
+
});
|
|
331
|
+
}, [
|
|
332
|
+
safeData,
|
|
333
|
+
selectedFilter,
|
|
334
|
+
filterLabels,
|
|
335
|
+
selectedFilterLabel
|
|
336
|
+
]);
|
|
337
|
+
// 从数据中提取唯一的类型
|
|
338
|
+
var types = useMemo(function() {
|
|
339
|
+
var allTypes = filteredData.map(function(item) {
|
|
340
|
+
return item.type;
|
|
341
|
+
}).filter(Boolean);
|
|
342
|
+
return allTypes.length > 0 ? _to_consumable_array(new Set(allTypes)) : [
|
|
343
|
+
'默认'
|
|
344
|
+
];
|
|
345
|
+
}, [
|
|
346
|
+
filteredData
|
|
347
|
+
]);
|
|
348
|
+
// 计算分箱
|
|
349
|
+
var binning = useMemo(function() {
|
|
350
|
+
if (filteredData.length === 0) {
|
|
351
|
+
return {
|
|
352
|
+
edges: [],
|
|
353
|
+
labels: [],
|
|
354
|
+
binCount: 0
|
|
355
|
+
};
|
|
356
|
+
}
|
|
357
|
+
var allValues = filteredData.map(function(item) {
|
|
358
|
+
return item.value;
|
|
359
|
+
});
|
|
360
|
+
var autoBinCount = customBinCount || calculateBinCount(allValues.length);
|
|
361
|
+
var edges = calculateBinEdges(allValues, autoBinCount).edges;
|
|
362
|
+
// 生成分箱标签
|
|
363
|
+
var labels = [];
|
|
364
|
+
for(var i = 0; i < edges.length - 1; i++){
|
|
365
|
+
labels.push(formatBinLabel(edges[i], edges[i + 1]));
|
|
366
|
+
}
|
|
367
|
+
return {
|
|
368
|
+
edges: edges,
|
|
369
|
+
labels: labels,
|
|
370
|
+
binCount: autoBinCount
|
|
371
|
+
};
|
|
372
|
+
}, [
|
|
373
|
+
filteredData,
|
|
374
|
+
customBinCount
|
|
375
|
+
]);
|
|
376
|
+
// 计算每个分箱的频率/计数
|
|
377
|
+
var histogramData = useMemo(function() {
|
|
378
|
+
var edges = binning.edges, labels = binning.labels;
|
|
379
|
+
if (edges.length === 0 || types.length === 0) {
|
|
380
|
+
return {};
|
|
381
|
+
}
|
|
382
|
+
var result = {};
|
|
383
|
+
types.forEach(function(type) {
|
|
384
|
+
if (!type) return; // Skip undefined types
|
|
385
|
+
var typeData = filteredData.filter(function(item) {
|
|
386
|
+
return (item.type || '默认') === type;
|
|
387
|
+
});
|
|
388
|
+
var counts = new Array(labels.length).fill(0);
|
|
389
|
+
typeData.forEach(function(item) {
|
|
390
|
+
var value = item.value;
|
|
391
|
+
// 找到所属分箱
|
|
392
|
+
for(var i = 0; i < edges.length - 1; i++){
|
|
393
|
+
if (value >= edges[i] && (value < edges[i + 1] || i === edges.length - 2)) {
|
|
394
|
+
counts[i]++;
|
|
395
|
+
break;
|
|
396
|
+
}
|
|
397
|
+
}
|
|
398
|
+
});
|
|
399
|
+
// 如果需要显示频率而非计数
|
|
400
|
+
if (showFrequency && typeData.length > 0) {
|
|
401
|
+
var total = typeData.length;
|
|
402
|
+
result[type] = counts.map(function(c) {
|
|
403
|
+
return c / total;
|
|
404
|
+
});
|
|
405
|
+
} else {
|
|
406
|
+
result[type] = counts;
|
|
407
|
+
}
|
|
408
|
+
});
|
|
409
|
+
return result;
|
|
410
|
+
}, [
|
|
411
|
+
filteredData,
|
|
412
|
+
types,
|
|
413
|
+
binning,
|
|
414
|
+
showFrequency
|
|
415
|
+
]);
|
|
416
|
+
// 构建 Chart.js 数据结构
|
|
417
|
+
var processedData = useMemo(function() {
|
|
418
|
+
var labels = binning.labels;
|
|
419
|
+
if (labels.length === 0) {
|
|
420
|
+
return {
|
|
421
|
+
labels: [],
|
|
422
|
+
datasets: []
|
|
423
|
+
};
|
|
424
|
+
}
|
|
425
|
+
var datasets = types.map(function(type, index) {
|
|
426
|
+
if (!type) return null;
|
|
427
|
+
var provided = color;
|
|
428
|
+
var pickByIndex = function pickByIndex(i) {
|
|
429
|
+
return Array.isArray(provided) ? provided[i] || provided[0] || defaultColorList[i % defaultColorList.length] : provided || defaultColorList[i % defaultColorList.length];
|
|
430
|
+
};
|
|
431
|
+
var baseColor = pickByIndex(index);
|
|
432
|
+
var resolvedBaseColor = resolveCssVariable(baseColor);
|
|
433
|
+
return {
|
|
434
|
+
label: type,
|
|
435
|
+
data: histogramData[type] || [],
|
|
436
|
+
backgroundColor: hexToRgba(resolvedBaseColor, 0.6),
|
|
437
|
+
borderColor: resolvedBaseColor,
|
|
438
|
+
borderWidth: 1,
|
|
439
|
+
categoryPercentage: 1.0,
|
|
440
|
+
barPercentage: 1.0,
|
|
441
|
+
stack: stacked ? 'stack' : undefined,
|
|
442
|
+
borderRadius: 4,
|
|
443
|
+
borderSkipped: false
|
|
444
|
+
};
|
|
445
|
+
});
|
|
446
|
+
return {
|
|
447
|
+
labels: labels,
|
|
448
|
+
datasets: datasets.filter(function(d) {
|
|
449
|
+
return d !== null;
|
|
450
|
+
})
|
|
451
|
+
};
|
|
452
|
+
}, [
|
|
453
|
+
histogramData,
|
|
454
|
+
types,
|
|
455
|
+
binning,
|
|
456
|
+
color,
|
|
457
|
+
stacked
|
|
458
|
+
]);
|
|
459
|
+
var isLight = theme === 'light';
|
|
460
|
+
var axisTextColor = isLight ? 'rgba(0, 25, 61, 0.3255)' : 'rgba(255, 255, 255, 0.8)';
|
|
461
|
+
var gridColor = isLight ? 'rgba(0,0,0,0.08)' : 'rgba(255,255,255,0.2)';
|
|
462
|
+
// 图表配置选项
|
|
463
|
+
var options = {
|
|
464
|
+
responsive: true,
|
|
465
|
+
maintainAspectRatio: false,
|
|
466
|
+
plugins: {
|
|
467
|
+
legend: {
|
|
468
|
+
display: showLegend && types.length > 1,
|
|
469
|
+
position: legendPosition,
|
|
470
|
+
labels: {
|
|
471
|
+
color: axisTextColor,
|
|
472
|
+
font: {
|
|
473
|
+
size: isMobile ? 10 : 12,
|
|
474
|
+
weight: 'normal'
|
|
475
|
+
},
|
|
476
|
+
padding: isMobile ? 10 : 12,
|
|
477
|
+
usePointStyle: true,
|
|
478
|
+
pointStyle: 'rectRounded'
|
|
479
|
+
}
|
|
480
|
+
},
|
|
481
|
+
tooltip: {
|
|
482
|
+
backgroundColor: isLight ? 'rgba(255,255,255,0.95)' : 'rgba(0,0,0,0.85)',
|
|
483
|
+
titleColor: isLight ? '#333' : '#fff',
|
|
484
|
+
bodyColor: isLight ? '#333' : '#fff',
|
|
485
|
+
borderColor: isLight ? 'rgba(0,0,0,0.12)' : 'rgba(255,255,255,0.2)',
|
|
486
|
+
borderWidth: 1,
|
|
487
|
+
cornerRadius: isMobile ? 6 : 8,
|
|
488
|
+
displayColors: true,
|
|
489
|
+
callbacks: {
|
|
490
|
+
label: function label(context) {
|
|
491
|
+
var value = context.parsed.y;
|
|
492
|
+
return "".concat(context.dataset.label, ": ").concat((value !== null && value !== void 0 ? value : 0).toFixed(showFrequency ? 4 : 0));
|
|
493
|
+
}
|
|
494
|
+
}
|
|
495
|
+
}
|
|
496
|
+
},
|
|
497
|
+
scales: {
|
|
498
|
+
x: {
|
|
499
|
+
stacked: stacked,
|
|
500
|
+
title: {
|
|
501
|
+
display: !!xAxisLabel,
|
|
502
|
+
text: xAxisLabel || '值范围',
|
|
503
|
+
color: axisTextColor,
|
|
504
|
+
font: {
|
|
505
|
+
size: isMobile ? 10 : 12,
|
|
506
|
+
weight: 'normal'
|
|
507
|
+
}
|
|
508
|
+
},
|
|
509
|
+
grid: {
|
|
510
|
+
display: showGrid,
|
|
511
|
+
color: gridColor,
|
|
512
|
+
lineWidth: 1
|
|
513
|
+
},
|
|
514
|
+
ticks: {
|
|
515
|
+
color: axisTextColor,
|
|
516
|
+
font: {
|
|
517
|
+
size: isMobile ? 8 : 10
|
|
518
|
+
},
|
|
519
|
+
maxRotation: 45,
|
|
520
|
+
minRotation: 0
|
|
521
|
+
}
|
|
522
|
+
},
|
|
523
|
+
y: {
|
|
524
|
+
stacked: stacked,
|
|
525
|
+
beginAtZero: true,
|
|
526
|
+
title: {
|
|
527
|
+
display: !!yAxisLabel,
|
|
528
|
+
text: yAxisLabel || (showFrequency ? '频率' : '计数'),
|
|
529
|
+
color: axisTextColor,
|
|
530
|
+
font: {
|
|
531
|
+
size: isMobile ? 10 : 12,
|
|
532
|
+
weight: 'normal'
|
|
533
|
+
}
|
|
534
|
+
},
|
|
535
|
+
grid: {
|
|
536
|
+
display: showGrid,
|
|
537
|
+
color: gridColor,
|
|
538
|
+
lineWidth: 1
|
|
539
|
+
},
|
|
540
|
+
ticks: {
|
|
541
|
+
color: axisTextColor,
|
|
542
|
+
font: {
|
|
543
|
+
size: isMobile ? 10 : 12
|
|
544
|
+
}
|
|
545
|
+
}
|
|
546
|
+
}
|
|
547
|
+
},
|
|
548
|
+
animation: {
|
|
549
|
+
duration: isMobile ? 200 : 400
|
|
550
|
+
}
|
|
551
|
+
};
|
|
552
|
+
var handleDownload = function handleDownload() {
|
|
553
|
+
downloadChart(chartRef.current, 'histogram-chart');
|
|
554
|
+
};
|
|
555
|
+
// 筛选器选项
|
|
556
|
+
var filterOptions = useMemo(function() {
|
|
557
|
+
return categories.map(function(category) {
|
|
558
|
+
return {
|
|
559
|
+
label: category || '默认',
|
|
560
|
+
value: category || '默认'
|
|
561
|
+
};
|
|
562
|
+
});
|
|
563
|
+
}, [
|
|
564
|
+
categories
|
|
565
|
+
]);
|
|
566
|
+
var filteredDataByFilterLabel = useMemo(function() {
|
|
567
|
+
return filterLabels === null || filterLabels === void 0 ? void 0 : filterLabels.map(function(item) {
|
|
568
|
+
return {
|
|
569
|
+
key: item,
|
|
570
|
+
label: item
|
|
571
|
+
};
|
|
572
|
+
});
|
|
573
|
+
}, [
|
|
574
|
+
filterLabels
|
|
575
|
+
]);
|
|
576
|
+
// 空数据处理
|
|
577
|
+
if (safeData.length === 0 || filteredData.length === 0) {
|
|
578
|
+
return wrapSSR(/*#__PURE__*/ React.createElement(ChartContainer, {
|
|
579
|
+
baseClassName: classNames("".concat(prefixCls, "-container"), hashId),
|
|
580
|
+
theme: theme,
|
|
581
|
+
className: classNames(classNamesProp === null || classNamesProp === void 0 ? void 0 : classNamesProp.root, className),
|
|
582
|
+
isMobile: isMobile,
|
|
583
|
+
variant: props.variant,
|
|
584
|
+
style: _object_spread({
|
|
585
|
+
width: responsiveWidth,
|
|
586
|
+
height: responsiveHeight
|
|
587
|
+
}, style, styles === null || styles === void 0 ? void 0 : styles.root)
|
|
588
|
+
}, /*#__PURE__*/ React.createElement(ChartToolBar, {
|
|
589
|
+
title: title || '直方图',
|
|
590
|
+
onDownload: function onDownload() {},
|
|
591
|
+
extra: toolbarExtra,
|
|
592
|
+
dataTime: dataTime,
|
|
593
|
+
loading: loading
|
|
594
|
+
}), /*#__PURE__*/ React.createElement("div", {
|
|
595
|
+
className: classNames("".concat(prefixCls, "-empty-wrapper"), hashId),
|
|
596
|
+
style: {
|
|
597
|
+
display: 'flex',
|
|
598
|
+
alignItems: 'center',
|
|
599
|
+
justifyContent: 'center',
|
|
600
|
+
height: responsiveHeight,
|
|
601
|
+
color: '#999',
|
|
602
|
+
fontSize: '14px'
|
|
603
|
+
}
|
|
604
|
+
}, "暂无有效数据")));
|
|
605
|
+
}
|
|
606
|
+
return wrapSSR(/*#__PURE__*/ React.createElement(ChartContainer, {
|
|
607
|
+
baseClassName: classNames("".concat(prefixCls, "-container"), hashId),
|
|
608
|
+
theme: theme,
|
|
609
|
+
className: classNames(classNamesProp === null || classNamesProp === void 0 ? void 0 : classNamesProp.root, className),
|
|
610
|
+
isMobile: isMobile,
|
|
611
|
+
variant: props.variant,
|
|
612
|
+
style: _object_spread({
|
|
613
|
+
width: responsiveWidth,
|
|
614
|
+
height: responsiveHeight
|
|
615
|
+
}, style, styles === null || styles === void 0 ? void 0 : styles.root)
|
|
616
|
+
}, /*#__PURE__*/ React.createElement(ChartToolBar, {
|
|
617
|
+
title: title || '直方图',
|
|
618
|
+
theme: theme,
|
|
619
|
+
onDownload: handleDownload,
|
|
620
|
+
extra: toolbarExtra,
|
|
621
|
+
dataTime: dataTime,
|
|
622
|
+
loading: loading,
|
|
623
|
+
filter: renderFilterInToolbar && filterOptions.length > 1 ? /*#__PURE__*/ React.createElement(ChartFilter, _object_spread_props(_object_spread({
|
|
624
|
+
filterOptions: filterOptions,
|
|
625
|
+
selectedFilter: selectedFilter,
|
|
626
|
+
onFilterChange: setSelectedFilter
|
|
627
|
+
}, filterLabels && {
|
|
628
|
+
customOptions: filteredDataByFilterLabel,
|
|
629
|
+
selectedCustomSelection: selectedFilterLabel,
|
|
630
|
+
onSelectionChange: setSelectedFilterLabel
|
|
631
|
+
}), {
|
|
632
|
+
theme: theme,
|
|
633
|
+
variant: "compact"
|
|
634
|
+
})) : undefined
|
|
635
|
+
}), statistics && /*#__PURE__*/ React.createElement("div", {
|
|
636
|
+
className: classNames(classNamesProp === null || classNamesProp === void 0 ? void 0 : classNamesProp.statisticContainer, "".concat(prefixCls, "-statistic-container")),
|
|
637
|
+
style: styles === null || styles === void 0 ? void 0 : styles.statisticContainer
|
|
638
|
+
}, statistics.map(function(config, index) {
|
|
639
|
+
return /*#__PURE__*/ React.createElement(ChartStatistic, _object_spread_props(_object_spread({
|
|
640
|
+
key: index
|
|
641
|
+
}, config), {
|
|
642
|
+
theme: theme
|
|
643
|
+
}));
|
|
644
|
+
})), !renderFilterInToolbar && filterOptions.length > 1 && /*#__PURE__*/ React.createElement(ChartFilter, _object_spread_props(_object_spread({
|
|
645
|
+
filterOptions: filterOptions,
|
|
646
|
+
selectedFilter: selectedFilter,
|
|
647
|
+
onFilterChange: setSelectedFilter
|
|
648
|
+
}, filterLabels && {
|
|
649
|
+
customOptions: filteredDataByFilterLabel,
|
|
650
|
+
selectedCustomSelection: selectedFilterLabel,
|
|
651
|
+
onSelectionChange: setSelectedFilterLabel
|
|
652
|
+
}), {
|
|
653
|
+
theme: theme
|
|
654
|
+
})), /*#__PURE__*/ React.createElement("div", {
|
|
655
|
+
className: classNames(classNamesProp === null || classNamesProp === void 0 ? void 0 : classNamesProp.wrapper, "".concat(prefixCls, "-wrapper")),
|
|
656
|
+
style: _object_spread({
|
|
657
|
+
height: responsiveHeight
|
|
658
|
+
}, styles === null || styles === void 0 ? void 0 : styles.wrapper)
|
|
659
|
+
}, /*#__PURE__*/ React.createElement(Bar, {
|
|
660
|
+
ref: chartRef,
|
|
661
|
+
data: processedData,
|
|
662
|
+
options: options
|
|
663
|
+
}))));
|
|
664
|
+
};
|
|
665
|
+
export default HistogramChart;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
export declare function useStyle(prefixCls?: string): {
|
|
3
|
+
hashId: string;
|
|
4
|
+
wrapSSR: (node: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").JSX.Element;
|
|
5
|
+
} | {
|
|
6
|
+
wrapSSR: (node: any) => any;
|
|
7
|
+
hashId: string;
|
|
8
|
+
};
|