@ant-design/agentic-ui 2.0.28 → 2.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Hooks/useIntersectionOnce.d.ts +5 -0
- package/dist/Hooks/useIntersectionOnce.js +79 -0
- package/dist/MarkdownEditor/editor/store.d.ts +4 -0
- package/dist/MarkdownEditor/editor/store.js +110 -1
- package/dist/Plugins/chart/AreaChart/index.js +20 -9
- package/dist/Plugins/chart/BarChart/index.js +12 -1
- package/dist/Plugins/chart/ChartMark/Area.js +21 -10
- package/dist/Plugins/chart/ChartMark/Bar.js +19 -8
- package/dist/Plugins/chart/ChartMark/Column.js +19 -8
- package/dist/Plugins/chart/ChartMark/Line.js +20 -9
- package/dist/Plugins/chart/ChartMark/Pie.js +12 -1
- package/dist/Plugins/chart/ChartRender.js +182 -48
- package/dist/Plugins/chart/DonutChart/index.js +12 -1
- package/dist/Plugins/chart/FunnelChart/index.d.ts +2 -0
- package/dist/Plugins/chart/FunnelChart/index.js +69 -18
- package/dist/Plugins/chart/LineChart/index.js +20 -9
- package/dist/Plugins/chart/RadarChart/index.js +19 -8
- package/dist/Plugins/chart/ScatterChart/index.js +12 -1
- package/dist/Plugins/chart/loadChartRuntime.d.ts +18 -0
- package/dist/Plugins/chart/loadChartRuntime.js +91 -0
- package/dist/Plugins/defaultPlugins.d.ts +3 -0
- package/dist/Plugins/defaultPlugins.js +2 -0
- package/dist/Plugins/mermaid/Mermaid.d.ts +5 -2
- package/dist/Plugins/mermaid/Mermaid.js +131 -38
- package/dist/Plugins/mermaid/index.js +1 -1
- package/dist/TaskList/index.js +2 -8
- package/dist/TaskList/style.js +1 -7
- package/dist/ToolUseBar/ToolUseBarItem.js +43 -30
- package/dist/ToolUseBar/ToolUseBarItemComponents.js +53 -8
- package/dist/ToolUseBar/style.js +3 -1
- package/dist/ToolUseBar/thinkStyle.js +9 -1
- package/package.json +2 -1
|
@@ -21,14 +21,10 @@ import { ProForm, ProFormSelect } from "@ant-design/pro-components";
|
|
|
21
21
|
import { ConfigProvider, Descriptions, Dropdown, Popover, Table } from "antd";
|
|
22
22
|
import React, { useContext, useMemo, useState } from "react";
|
|
23
23
|
import { ActionIconBox } from "../../Components/ActionIconBox";
|
|
24
|
+
import { Loading } from "../../Components/Loading";
|
|
25
|
+
import { useIntersectionOnce } from "../../Hooks/useIntersectionOnce";
|
|
24
26
|
import { I18nContext } from "../../I18n";
|
|
25
|
-
import
|
|
26
|
-
import BarChart from "./BarChart";
|
|
27
|
-
import DonutChart from "./DonutChart";
|
|
28
|
-
import FunnelChart from "./FunnelChart";
|
|
29
|
-
import LineChart from "./LineChart";
|
|
30
|
-
import RadarChart from "./RadarChart";
|
|
31
|
-
import ScatterChart from "./ScatterChart";
|
|
27
|
+
import { loadChartRuntime } from "./loadChartRuntime";
|
|
32
28
|
import { isNotEmpty, toNumber } from "./utils";
|
|
33
29
|
var getChartMap = (i18n) => {
|
|
34
30
|
var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
|
|
@@ -95,6 +91,58 @@ var ChartRender = (props) => {
|
|
|
95
91
|
const i18n = useContext(I18nContext);
|
|
96
92
|
const [config, setConfig] = useState(() => props.config);
|
|
97
93
|
const [renderKey, setRenderKey] = useState(0);
|
|
94
|
+
const [runtime, setRuntime] = useState(null);
|
|
95
|
+
const [runtimeError, setRuntimeError] = useState(null);
|
|
96
|
+
const [isRuntimeLoading, setRuntimeLoading] = useState(false);
|
|
97
|
+
const containerRef = React.useRef(null);
|
|
98
|
+
const isIntersecting = useIntersectionOnce(containerRef);
|
|
99
|
+
const renderDescriptionsFallback = React.useMemo(() => {
|
|
100
|
+
var _a;
|
|
101
|
+
const columnCount = ((_a = config == null ? void 0 : config.columns) == null ? void 0 : _a.length) || 0;
|
|
102
|
+
return chartData.length < 2 && columnCount > 8;
|
|
103
|
+
}, [chartData, config == null ? void 0 : config.columns]);
|
|
104
|
+
const shouldLoadRuntime = chartType !== "table" && chartType !== "descriptions" && !renderDescriptionsFallback;
|
|
105
|
+
React.useEffect(() => {
|
|
106
|
+
if (!shouldLoadRuntime)
|
|
107
|
+
return;
|
|
108
|
+
if (!isIntersecting)
|
|
109
|
+
return;
|
|
110
|
+
if (runtime)
|
|
111
|
+
return;
|
|
112
|
+
if (isRuntimeLoading)
|
|
113
|
+
return;
|
|
114
|
+
if (runtimeError)
|
|
115
|
+
return;
|
|
116
|
+
let cancelled = false;
|
|
117
|
+
setRuntimeLoading(true);
|
|
118
|
+
loadChartRuntime().then((module) => {
|
|
119
|
+
if (cancelled)
|
|
120
|
+
return;
|
|
121
|
+
setRuntime(module);
|
|
122
|
+
}).catch((error) => {
|
|
123
|
+
if (cancelled)
|
|
124
|
+
return;
|
|
125
|
+
const message = error instanceof Error ? error.message : String(error);
|
|
126
|
+
setRuntimeError(message);
|
|
127
|
+
}).finally(() => {
|
|
128
|
+
if (cancelled)
|
|
129
|
+
return;
|
|
130
|
+
setRuntimeLoading(false);
|
|
131
|
+
});
|
|
132
|
+
return () => {
|
|
133
|
+
cancelled = true;
|
|
134
|
+
};
|
|
135
|
+
}, [
|
|
136
|
+
shouldLoadRuntime,
|
|
137
|
+
isIntersecting,
|
|
138
|
+
runtime,
|
|
139
|
+
isRuntimeLoading,
|
|
140
|
+
runtimeError
|
|
141
|
+
]);
|
|
142
|
+
const handleRetryRuntime = React.useCallback(() => {
|
|
143
|
+
setRuntime(null);
|
|
144
|
+
setRuntimeError(null);
|
|
145
|
+
}, []);
|
|
98
146
|
const ChartMap = useMemo(() => getChartMap(i18n), [i18n]);
|
|
99
147
|
const getAxisTitles = () => {
|
|
100
148
|
var _a, _b, _c, _d;
|
|
@@ -400,6 +448,111 @@ var ChartRender = (props) => {
|
|
|
400
448
|
)
|
|
401
449
|
);
|
|
402
450
|
}
|
|
451
|
+
if (chartType === "descriptions" || renderDescriptionsFallback) {
|
|
452
|
+
return /* @__PURE__ */ React.createElement(
|
|
453
|
+
"div",
|
|
454
|
+
{
|
|
455
|
+
key: config == null ? void 0 : config.index,
|
|
456
|
+
style: {
|
|
457
|
+
display: "flex",
|
|
458
|
+
flexDirection: "column",
|
|
459
|
+
gap: 8
|
|
460
|
+
}
|
|
461
|
+
},
|
|
462
|
+
chartData.map((row, rowIndex) => {
|
|
463
|
+
var _a2;
|
|
464
|
+
return /* @__PURE__ */ React.createElement(
|
|
465
|
+
Descriptions,
|
|
466
|
+
{
|
|
467
|
+
bordered: true,
|
|
468
|
+
key: `${config == null ? void 0 : config.index}-${rowIndex}`,
|
|
469
|
+
column: {
|
|
470
|
+
xxl: 2,
|
|
471
|
+
xl: 2,
|
|
472
|
+
lg: 2,
|
|
473
|
+
md: 2,
|
|
474
|
+
sm: 1,
|
|
475
|
+
xs: 1
|
|
476
|
+
},
|
|
477
|
+
items: (_a2 = config == null ? void 0 : config.columns) == null ? void 0 : _a2.map((column) => {
|
|
478
|
+
if (!column.title || !column.dataIndex)
|
|
479
|
+
return null;
|
|
480
|
+
return {
|
|
481
|
+
label: column.title || "",
|
|
482
|
+
children: row[column.dataIndex]
|
|
483
|
+
};
|
|
484
|
+
}).filter((item) => !!item)
|
|
485
|
+
}
|
|
486
|
+
);
|
|
487
|
+
})
|
|
488
|
+
);
|
|
489
|
+
}
|
|
490
|
+
if (!runtime && shouldLoadRuntime) {
|
|
491
|
+
const height = (config == null ? void 0 : config.height) || 240;
|
|
492
|
+
if (runtimeError) {
|
|
493
|
+
return /* @__PURE__ */ React.createElement(
|
|
494
|
+
"div",
|
|
495
|
+
{
|
|
496
|
+
style: {
|
|
497
|
+
minHeight: height,
|
|
498
|
+
display: "flex",
|
|
499
|
+
flexDirection: "column",
|
|
500
|
+
alignItems: "center",
|
|
501
|
+
justifyContent: "center",
|
|
502
|
+
width: "100%",
|
|
503
|
+
gap: 8,
|
|
504
|
+
color: "rgba(239, 68, 68, 0.8)"
|
|
505
|
+
},
|
|
506
|
+
role: "alert"
|
|
507
|
+
},
|
|
508
|
+
/* @__PURE__ */ React.createElement("span", null, runtimeError),
|
|
509
|
+
/* @__PURE__ */ React.createElement(
|
|
510
|
+
"button",
|
|
511
|
+
{
|
|
512
|
+
type: "button",
|
|
513
|
+
onClick: handleRetryRuntime,
|
|
514
|
+
style: {
|
|
515
|
+
padding: "4px 12px",
|
|
516
|
+
borderRadius: "0.5em",
|
|
517
|
+
border: "1px solid rgba(239, 68, 68, 0.5)",
|
|
518
|
+
background: "transparent",
|
|
519
|
+
color: "rgba(239, 68, 68, 0.8)",
|
|
520
|
+
cursor: "pointer"
|
|
521
|
+
}
|
|
522
|
+
},
|
|
523
|
+
"重试加载"
|
|
524
|
+
)
|
|
525
|
+
);
|
|
526
|
+
}
|
|
527
|
+
return /* @__PURE__ */ React.createElement(
|
|
528
|
+
"div",
|
|
529
|
+
{
|
|
530
|
+
style: {
|
|
531
|
+
minHeight: height,
|
|
532
|
+
display: "flex",
|
|
533
|
+
alignItems: "center",
|
|
534
|
+
justifyContent: "center",
|
|
535
|
+
width: "100%",
|
|
536
|
+
color: "#6B7280"
|
|
537
|
+
},
|
|
538
|
+
role: "status",
|
|
539
|
+
"aria-live": "polite"
|
|
540
|
+
},
|
|
541
|
+
isRuntimeLoading || !isIntersecting ? /* @__PURE__ */ React.createElement(Loading, null) : null
|
|
542
|
+
);
|
|
543
|
+
}
|
|
544
|
+
if (!runtime) {
|
|
545
|
+
return null;
|
|
546
|
+
}
|
|
547
|
+
const {
|
|
548
|
+
DonutChart,
|
|
549
|
+
FunnelChart,
|
|
550
|
+
AreaChart,
|
|
551
|
+
BarChart,
|
|
552
|
+
LineChart,
|
|
553
|
+
RadarChart,
|
|
554
|
+
ScatterChart
|
|
555
|
+
} = runtime;
|
|
403
556
|
if (chartType === "pie") {
|
|
404
557
|
return /* @__PURE__ */ React.createElement(
|
|
405
558
|
DonutChart,
|
|
@@ -563,48 +716,29 @@ var ChartRender = (props) => {
|
|
|
563
716
|
}
|
|
564
717
|
);
|
|
565
718
|
}
|
|
566
|
-
if (chartType === "descriptions" || chartData.length < 2 && (config == null ? void 0 : config.columns.length) > 8) {
|
|
567
|
-
return /* @__PURE__ */ React.createElement(
|
|
568
|
-
"div",
|
|
569
|
-
{
|
|
570
|
-
key: config == null ? void 0 : config.index,
|
|
571
|
-
style: {
|
|
572
|
-
display: "flex",
|
|
573
|
-
flexDirection: "column",
|
|
574
|
-
gap: 8
|
|
575
|
-
}
|
|
576
|
-
},
|
|
577
|
-
chartData.map((row) => {
|
|
578
|
-
return /* @__PURE__ */ React.createElement(
|
|
579
|
-
Descriptions,
|
|
580
|
-
{
|
|
581
|
-
bordered: true,
|
|
582
|
-
key: config == null ? void 0 : config.index,
|
|
583
|
-
column: {
|
|
584
|
-
xxl: 2,
|
|
585
|
-
xl: 2,
|
|
586
|
-
lg: 2,
|
|
587
|
-
md: 2,
|
|
588
|
-
sm: 1,
|
|
589
|
-
xs: 1
|
|
590
|
-
},
|
|
591
|
-
items: config == null ? void 0 : config.columns.map((column) => {
|
|
592
|
-
if (!column.title || !column.dataIndex)
|
|
593
|
-
return null;
|
|
594
|
-
return {
|
|
595
|
-
label: column.title || "",
|
|
596
|
-
children: row[column.dataIndex]
|
|
597
|
-
};
|
|
598
|
-
}).filter((item) => !!item)
|
|
599
|
-
}
|
|
600
|
-
);
|
|
601
|
-
})
|
|
602
|
-
);
|
|
603
|
-
}
|
|
604
|
-
}, [chartType, JSON.stringify(chartData), JSON.stringify(config)]);
|
|
605
|
-
if (!chartDom)
|
|
606
719
|
return null;
|
|
607
|
-
|
|
720
|
+
}, [
|
|
721
|
+
chartType,
|
|
722
|
+
JSON.stringify(chartData),
|
|
723
|
+
JSON.stringify(config),
|
|
724
|
+
renderKey,
|
|
725
|
+
toolBar,
|
|
726
|
+
convertDonutData,
|
|
727
|
+
convertFlatData,
|
|
728
|
+
title,
|
|
729
|
+
dataTime,
|
|
730
|
+
filterBy,
|
|
731
|
+
groupBy,
|
|
732
|
+
colorLegend,
|
|
733
|
+
runtime,
|
|
734
|
+
runtimeError,
|
|
735
|
+
isRuntimeLoading,
|
|
736
|
+
isIntersecting,
|
|
737
|
+
shouldLoadRuntime,
|
|
738
|
+
renderDescriptionsFallback,
|
|
739
|
+
handleRetryRuntime
|
|
740
|
+
]);
|
|
741
|
+
return /* @__PURE__ */ React.createElement("div", { ref: containerRef, style: { width: "100%" }, contentEditable: false }, chartDom);
|
|
608
742
|
};
|
|
609
743
|
export {
|
|
610
744
|
ChartRender
|
|
@@ -62,7 +62,7 @@ import {
|
|
|
62
62
|
import LegendView from "./Legend";
|
|
63
63
|
import { createBackgroundArcPlugin, createCenterTextPlugin } from "./plugins";
|
|
64
64
|
import { useStyle } from "./style";
|
|
65
|
-
|
|
65
|
+
var donutChartComponentsRegistered = false;
|
|
66
66
|
var DonutChart = (_a) => {
|
|
67
67
|
var _b = _a, {
|
|
68
68
|
data,
|
|
@@ -102,6 +102,17 @@ var DonutChart = (_a) => {
|
|
|
102
102
|
"statistic"
|
|
103
103
|
]);
|
|
104
104
|
var _a2;
|
|
105
|
+
useMemo(() => {
|
|
106
|
+
if (donutChartComponentsRegistered) {
|
|
107
|
+
return void 0;
|
|
108
|
+
}
|
|
109
|
+
if (typeof window === "undefined") {
|
|
110
|
+
return void 0;
|
|
111
|
+
}
|
|
112
|
+
ChartJS.register(ArcElement, Tooltip, Legend);
|
|
113
|
+
donutChartComponentsRegistered = true;
|
|
114
|
+
return void 0;
|
|
115
|
+
}, []);
|
|
105
116
|
const { isMobile, windowWidth } = useMobile();
|
|
106
117
|
const defaultConfigs = [{ showLegend: true }];
|
|
107
118
|
const finalConfigs = configs || defaultConfigs;
|
|
@@ -44,6 +44,8 @@ export interface FunnelChartProps extends ChartContainerProps {
|
|
|
44
44
|
toolbarExtra?: React.ReactNode;
|
|
45
45
|
/** 是否将过滤器渲染到工具栏 */
|
|
46
46
|
renderFilterInToolbar?: boolean;
|
|
47
|
+
/** 最底层的最小宽度占比(0-1),相对于最顶层的宽度,0-不限制 */
|
|
48
|
+
bottomLayerMinWidth?: number;
|
|
47
49
|
/** ChartStatistic组件配置:object表示单个配置,array表示多个配置 */
|
|
48
50
|
statistic?: StatisticConfigType;
|
|
49
51
|
typeNames?: {
|
|
@@ -53,7 +53,7 @@ import {
|
|
|
53
53
|
import { defaultColorList } from "../const";
|
|
54
54
|
import { findDataPointByXValue, isXValueEqual, toNumber } from "../utils";
|
|
55
55
|
import { useStyle } from "./style";
|
|
56
|
-
|
|
56
|
+
var funnelChartComponentsRegistered = false;
|
|
57
57
|
var FunnelChart = (_a) => {
|
|
58
58
|
var _b = _a, {
|
|
59
59
|
title,
|
|
@@ -70,6 +70,7 @@ var FunnelChart = (_a) => {
|
|
|
70
70
|
showPercent = true,
|
|
71
71
|
toolbarExtra,
|
|
72
72
|
renderFilterInToolbar = false,
|
|
73
|
+
bottomLayerMinWidth = 0,
|
|
73
74
|
typeNames,
|
|
74
75
|
statistic: statisticConfig
|
|
75
76
|
} = _b, props = __objRest(_b, [
|
|
@@ -87,9 +88,21 @@ var FunnelChart = (_a) => {
|
|
|
87
88
|
"showPercent",
|
|
88
89
|
"toolbarExtra",
|
|
89
90
|
"renderFilterInToolbar",
|
|
91
|
+
"bottomLayerMinWidth",
|
|
90
92
|
"typeNames",
|
|
91
93
|
"statistic"
|
|
92
94
|
]);
|
|
95
|
+
useMemo(() => {
|
|
96
|
+
if (funnelChartComponentsRegistered) {
|
|
97
|
+
return void 0;
|
|
98
|
+
}
|
|
99
|
+
if (typeof window === "undefined") {
|
|
100
|
+
return void 0;
|
|
101
|
+
}
|
|
102
|
+
ChartJS.register(CategoryScale, LinearScale, BarElement, Tooltip, Legend);
|
|
103
|
+
funnelChartComponentsRegistered = true;
|
|
104
|
+
return void 0;
|
|
105
|
+
}, []);
|
|
93
106
|
const safeData = Array.isArray(data) ? data : [];
|
|
94
107
|
const statistics = useMemo(() => {
|
|
95
108
|
if (!statisticConfig)
|
|
@@ -100,7 +113,6 @@ var FunnelChart = (_a) => {
|
|
|
100
113
|
typeof window !== "undefined" ? window.innerWidth : 768
|
|
101
114
|
);
|
|
102
115
|
const isMobile = windowWidth <= 768;
|
|
103
|
-
const responsiveWidth = isMobile ? "100%" : width;
|
|
104
116
|
useEffect(() => {
|
|
105
117
|
const handleResize = () => setWindowWidth(window.innerWidth);
|
|
106
118
|
if (typeof window !== "undefined") {
|
|
@@ -170,6 +182,12 @@ var FunnelChart = (_a) => {
|
|
|
170
182
|
}
|
|
171
183
|
return chartHeight;
|
|
172
184
|
}, [height, chartHeight]);
|
|
185
|
+
const originalValues = useMemo(() => {
|
|
186
|
+
return stages.map((x) => {
|
|
187
|
+
const dp = findDataPointByXValue(filteredData, x);
|
|
188
|
+
return toNumber(dp == null ? void 0 : dp.y, 0);
|
|
189
|
+
});
|
|
190
|
+
}, [filteredData, stages]);
|
|
173
191
|
const processedData = useMemo(() => {
|
|
174
192
|
const baseColor = color || defaultColorList[0];
|
|
175
193
|
const labels = stages.map((x) => x.toString());
|
|
@@ -179,7 +197,25 @@ var FunnelChart = (_a) => {
|
|
|
179
197
|
return n;
|
|
180
198
|
});
|
|
181
199
|
const typeName = (typeNames == null ? void 0 : typeNames.name) || "转化";
|
|
182
|
-
const
|
|
200
|
+
const adjustedValues = (() => {
|
|
201
|
+
if (bottomLayerMinWidth <= 0 || bottomLayerMinWidth > 1 || values.length === 0) {
|
|
202
|
+
return values;
|
|
203
|
+
}
|
|
204
|
+
const maxValue = Math.max(...values);
|
|
205
|
+
const minValue = Math.min(...values);
|
|
206
|
+
if (minValue >= maxValue * bottomLayerMinWidth) {
|
|
207
|
+
return values;
|
|
208
|
+
}
|
|
209
|
+
const minWidth = bottomLayerMinWidth * maxValue;
|
|
210
|
+
const range = maxValue - minValue;
|
|
211
|
+
return values.map((v) => {
|
|
212
|
+
if (range === 0)
|
|
213
|
+
return maxValue;
|
|
214
|
+
const normalized = (v - minValue) / range;
|
|
215
|
+
return minWidth + normalized * (maxValue - minWidth);
|
|
216
|
+
});
|
|
217
|
+
})();
|
|
218
|
+
const datasetData = adjustedValues.map(
|
|
183
219
|
(v) => [-v / 2, v / 2]
|
|
184
220
|
);
|
|
185
221
|
const hexToRgb = (hex) => {
|
|
@@ -223,7 +259,7 @@ var FunnelChart = (_a) => {
|
|
|
223
259
|
}
|
|
224
260
|
]
|
|
225
261
|
};
|
|
226
|
-
}, [filteredData, stages]);
|
|
262
|
+
}, [filteredData, stages, bottomLayerMinWidth, color, typeNames]);
|
|
227
263
|
const ratioDisplay = useMemo(() => {
|
|
228
264
|
const formatRaw = (v) => {
|
|
229
265
|
if (v === null || v === void 0)
|
|
@@ -379,15 +415,14 @@ var FunnelChart = (_a) => {
|
|
|
379
415
|
return (it == null ? void 0 : it.label) ? String(it.label) : "";
|
|
380
416
|
},
|
|
381
417
|
label: (ctx) => {
|
|
382
|
-
var _a2, _b2
|
|
383
|
-
const
|
|
384
|
-
const
|
|
385
|
-
const idx = (_c = ctx.dataIndex) != null ? _c : 0;
|
|
418
|
+
var _a2, _b2;
|
|
419
|
+
const idx = (_a2 = ctx.dataIndex) != null ? _a2 : 0;
|
|
420
|
+
const originalValue = (_b2 = originalValues == null ? void 0 : originalValues[idx]) != null ? _b2 : 0;
|
|
386
421
|
const percentStr = ratioDisplay == null ? void 0 : ratioDisplay[idx];
|
|
387
422
|
if (showPercent === false || !percentStr) {
|
|
388
|
-
return `${
|
|
423
|
+
return `${originalValue}`;
|
|
389
424
|
}
|
|
390
|
-
return `${
|
|
425
|
+
return `${originalValue}(${percentStr})`;
|
|
391
426
|
}
|
|
392
427
|
}
|
|
393
428
|
}
|
|
@@ -517,7 +552,7 @@ var FunnelChart = (_a) => {
|
|
|
517
552
|
const maxEnd = Math.max(...ends);
|
|
518
553
|
const padding = 12;
|
|
519
554
|
meta.data.forEach((el, i) => {
|
|
520
|
-
var _a3, _b3, _c;
|
|
555
|
+
var _a3, _b3, _c, _d;
|
|
521
556
|
const raw = ds == null ? void 0 : ds[i];
|
|
522
557
|
if (!raw || !Array.isArray(raw))
|
|
523
558
|
return;
|
|
@@ -527,30 +562,46 @@ var FunnelChart = (_a) => {
|
|
|
527
562
|
const start = Number((_b3 = raw[0]) != null ? _b3 : 0);
|
|
528
563
|
const end = Number((_c = raw[1]) != null ? _c : 0);
|
|
529
564
|
const mid = (start + end) / 2;
|
|
530
|
-
const
|
|
565
|
+
const originalValue = (_d = originalValues == null ? void 0 : originalValues[i]) != null ? _d : 0;
|
|
531
566
|
const cx = (xScale == null ? void 0 : xScale.getPixelForValue) ? xScale.getPixelForValue(mid) : el.x;
|
|
532
567
|
ctx.save();
|
|
533
568
|
ctx.fillStyle = "#fff";
|
|
534
569
|
ctx.textAlign = "center";
|
|
535
|
-
ctx.fillText(String(Math.round(
|
|
570
|
+
ctx.fillText(String(Math.round(originalValue)), cx, y);
|
|
536
571
|
ctx.restore();
|
|
537
572
|
});
|
|
538
573
|
ctx.restore();
|
|
539
574
|
}
|
|
540
575
|
};
|
|
541
|
-
}, [isMobile, axisTextColor]);
|
|
576
|
+
}, [isMobile, axisTextColor, originalValues]);
|
|
577
|
+
const containerClassName = useMemo(() => {
|
|
578
|
+
if (isMobile)
|
|
579
|
+
return "w-full";
|
|
580
|
+
if (typeof width === "number")
|
|
581
|
+
return "";
|
|
582
|
+
if (typeof width === "string" && width === "100%")
|
|
583
|
+
return "w-full";
|
|
584
|
+
return "";
|
|
585
|
+
}, [isMobile, width]);
|
|
586
|
+
const containerStyle = useMemo(() => {
|
|
587
|
+
if (isMobile)
|
|
588
|
+
return void 0;
|
|
589
|
+
if (typeof width === "number")
|
|
590
|
+
return { width };
|
|
591
|
+
if (typeof width === "string" && width !== "100%")
|
|
592
|
+
return { width };
|
|
593
|
+
return void 0;
|
|
594
|
+
}, [isMobile, width]);
|
|
542
595
|
return wrapSSR(
|
|
543
596
|
/* @__PURE__ */ React.createElement(
|
|
544
597
|
ChartContainer,
|
|
545
598
|
{
|
|
546
599
|
baseClassName,
|
|
547
|
-
className,
|
|
600
|
+
className: `${className || ""} ${containerClassName}`.trim(),
|
|
548
601
|
theme,
|
|
549
602
|
isMobile,
|
|
550
603
|
variant: props.variant,
|
|
551
|
-
style:
|
|
552
|
-
width: responsiveWidth
|
|
553
|
-
}
|
|
604
|
+
style: containerStyle
|
|
554
605
|
},
|
|
555
606
|
/* @__PURE__ */ React.createElement(
|
|
556
607
|
ChartToolBar,
|
|
@@ -58,15 +58,7 @@ import {
|
|
|
58
58
|
findDataPointByXValue
|
|
59
59
|
} from "../utils";
|
|
60
60
|
import { useStyle } from "./style";
|
|
61
|
-
|
|
62
|
-
CategoryScale,
|
|
63
|
-
LinearScale,
|
|
64
|
-
PointElement,
|
|
65
|
-
LineElement,
|
|
66
|
-
Filler,
|
|
67
|
-
Tooltip,
|
|
68
|
-
Legend
|
|
69
|
-
);
|
|
61
|
+
var lineChartComponentsRegistered = false;
|
|
70
62
|
var LineChart = (_a) => {
|
|
71
63
|
var _b = _a, {
|
|
72
64
|
title,
|
|
@@ -109,6 +101,25 @@ var LineChart = (_a) => {
|
|
|
109
101
|
"renderFilterInToolbar",
|
|
110
102
|
"statistic"
|
|
111
103
|
]);
|
|
104
|
+
useMemo(() => {
|
|
105
|
+
if (lineChartComponentsRegistered) {
|
|
106
|
+
return void 0;
|
|
107
|
+
}
|
|
108
|
+
if (typeof window === "undefined") {
|
|
109
|
+
return void 0;
|
|
110
|
+
}
|
|
111
|
+
ChartJS.register(
|
|
112
|
+
CategoryScale,
|
|
113
|
+
LinearScale,
|
|
114
|
+
PointElement,
|
|
115
|
+
LineElement,
|
|
116
|
+
Filler,
|
|
117
|
+
Tooltip,
|
|
118
|
+
Legend
|
|
119
|
+
);
|
|
120
|
+
lineChartComponentsRegistered = true;
|
|
121
|
+
return void 0;
|
|
122
|
+
}, []);
|
|
112
123
|
const safeData = Array.isArray(data) ? data : [];
|
|
113
124
|
const [windowWidth, setWindowWidth] = useState(
|
|
114
125
|
typeof window !== "undefined" ? window.innerWidth : 768
|
|
@@ -53,14 +53,7 @@ import {
|
|
|
53
53
|
} from "../components";
|
|
54
54
|
import { defaultColorList } from "../const";
|
|
55
55
|
import { useStyle } from "./style";
|
|
56
|
-
|
|
57
|
-
RadialLinearScale,
|
|
58
|
-
PointElement,
|
|
59
|
-
LineElement,
|
|
60
|
-
Filler,
|
|
61
|
-
Tooltip,
|
|
62
|
-
Legend
|
|
63
|
-
);
|
|
56
|
+
var radarChartComponentsRegistered = false;
|
|
64
57
|
var RadarChart = (_a) => {
|
|
65
58
|
var _b = _a, {
|
|
66
59
|
data,
|
|
@@ -87,6 +80,24 @@ var RadarChart = (_a) => {
|
|
|
87
80
|
"statistic",
|
|
88
81
|
"textMaxWidth"
|
|
89
82
|
]);
|
|
83
|
+
useMemo(() => {
|
|
84
|
+
if (radarChartComponentsRegistered) {
|
|
85
|
+
return void 0;
|
|
86
|
+
}
|
|
87
|
+
if (typeof window === "undefined") {
|
|
88
|
+
return void 0;
|
|
89
|
+
}
|
|
90
|
+
ChartJS.register(
|
|
91
|
+
RadialLinearScale,
|
|
92
|
+
PointElement,
|
|
93
|
+
LineElement,
|
|
94
|
+
Filler,
|
|
95
|
+
Tooltip,
|
|
96
|
+
Legend
|
|
97
|
+
);
|
|
98
|
+
radarChartComponentsRegistered = true;
|
|
99
|
+
return void 0;
|
|
100
|
+
}, []);
|
|
90
101
|
const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
|
|
91
102
|
const prefixCls = getPrefixCls("radar-chart");
|
|
92
103
|
const { wrapSSR, hashId } = useStyle(prefixCls);
|
|
@@ -52,7 +52,7 @@ import {
|
|
|
52
52
|
} from "../components";
|
|
53
53
|
import { defaultColorList } from "../const";
|
|
54
54
|
import { useStyle } from "./style";
|
|
55
|
-
|
|
55
|
+
var scatterChartComponentsRegistered = false;
|
|
56
56
|
var ScatterChart = (_a) => {
|
|
57
57
|
var _b = _a, {
|
|
58
58
|
data,
|
|
@@ -97,6 +97,17 @@ var ScatterChart = (_a) => {
|
|
|
97
97
|
"statistic",
|
|
98
98
|
"textMaxWidth"
|
|
99
99
|
]);
|
|
100
|
+
useMemo(() => {
|
|
101
|
+
if (scatterChartComponentsRegistered) {
|
|
102
|
+
return void 0;
|
|
103
|
+
}
|
|
104
|
+
if (typeof window === "undefined") {
|
|
105
|
+
return void 0;
|
|
106
|
+
}
|
|
107
|
+
ChartJS.register(LinearScale, PointElement, LineElement, Tooltip, Legend);
|
|
108
|
+
scatterChartComponentsRegistered = true;
|
|
109
|
+
return void 0;
|
|
110
|
+
}, []);
|
|
100
111
|
const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
|
|
101
112
|
const prefixCls = getPrefixCls("scatter-chart");
|
|
102
113
|
const { wrapSSR, hashId } = useStyle(prefixCls);
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
type AreaChartComponent = typeof import('./AreaChart').default;
|
|
2
|
+
type BarChartComponent = typeof import('./BarChart').default;
|
|
3
|
+
type DonutChartComponent = typeof import('./DonutChart').default;
|
|
4
|
+
type FunnelChartComponent = typeof import('./FunnelChart').default;
|
|
5
|
+
type LineChartComponent = typeof import('./LineChart').default;
|
|
6
|
+
type RadarChartComponent = typeof import('./RadarChart').default;
|
|
7
|
+
type ScatterChartComponent = typeof import('./ScatterChart').default;
|
|
8
|
+
export interface ChartRuntime {
|
|
9
|
+
AreaChart: AreaChartComponent;
|
|
10
|
+
BarChart: BarChartComponent;
|
|
11
|
+
DonutChart: DonutChartComponent;
|
|
12
|
+
FunnelChart: FunnelChartComponent;
|
|
13
|
+
LineChart: LineChartComponent;
|
|
14
|
+
RadarChart: RadarChartComponent;
|
|
15
|
+
ScatterChart: ScatterChartComponent;
|
|
16
|
+
}
|
|
17
|
+
export declare const loadChartRuntime: () => Promise<ChartRuntime>;
|
|
18
|
+
export {};
|
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
var __create = Object.create;
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
+
var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
|
|
8
|
+
get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
|
|
9
|
+
}) : x)(function(x) {
|
|
10
|
+
if (typeof require !== "undefined")
|
|
11
|
+
return require.apply(this, arguments);
|
|
12
|
+
throw new Error('Dynamic require of "' + x + '" is not supported');
|
|
13
|
+
});
|
|
14
|
+
var __copyProps = (to, from, except, desc) => {
|
|
15
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
16
|
+
for (let key of __getOwnPropNames(from))
|
|
17
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
18
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
19
|
+
}
|
|
20
|
+
return to;
|
|
21
|
+
};
|
|
22
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
23
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
24
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
25
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
26
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
27
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
28
|
+
mod
|
|
29
|
+
));
|
|
30
|
+
var __async = (__this, __arguments, generator) => {
|
|
31
|
+
return new Promise((resolve, reject) => {
|
|
32
|
+
var fulfilled = (value) => {
|
|
33
|
+
try {
|
|
34
|
+
step(generator.next(value));
|
|
35
|
+
} catch (e) {
|
|
36
|
+
reject(e);
|
|
37
|
+
}
|
|
38
|
+
};
|
|
39
|
+
var rejected = (value) => {
|
|
40
|
+
try {
|
|
41
|
+
step(generator.throw(value));
|
|
42
|
+
} catch (e) {
|
|
43
|
+
reject(e);
|
|
44
|
+
}
|
|
45
|
+
};
|
|
46
|
+
var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
|
|
47
|
+
step((generator = generator.apply(__this, __arguments)).next());
|
|
48
|
+
});
|
|
49
|
+
};
|
|
50
|
+
|
|
51
|
+
// src/Plugins/chart/loadChartRuntime.ts
|
|
52
|
+
var runtimeLoader = null;
|
|
53
|
+
var loadChartRuntime = () => __async(void 0, null, function* () {
|
|
54
|
+
if (typeof window === "undefined") {
|
|
55
|
+
throw new Error("图表运行时仅在浏览器环境中可用");
|
|
56
|
+
}
|
|
57
|
+
if (!runtimeLoader) {
|
|
58
|
+
runtimeLoader = Promise.all([
|
|
59
|
+
Promise.resolve().then(() => __toESM(__require("./AreaChart"))),
|
|
60
|
+
Promise.resolve().then(() => __toESM(__require("./BarChart"))),
|
|
61
|
+
Promise.resolve().then(() => __toESM(__require("./DonutChart"))),
|
|
62
|
+
Promise.resolve().then(() => __toESM(__require("./FunnelChart"))),
|
|
63
|
+
Promise.resolve().then(() => __toESM(__require("./LineChart"))),
|
|
64
|
+
Promise.resolve().then(() => __toESM(__require("./RadarChart"))),
|
|
65
|
+
Promise.resolve().then(() => __toESM(__require("./ScatterChart")))
|
|
66
|
+
]).then(([
|
|
67
|
+
areaModule,
|
|
68
|
+
barModule,
|
|
69
|
+
donutModule,
|
|
70
|
+
funnelModule,
|
|
71
|
+
lineModule,
|
|
72
|
+
radarModule,
|
|
73
|
+
scatterModule
|
|
74
|
+
]) => ({
|
|
75
|
+
AreaChart: areaModule.default,
|
|
76
|
+
BarChart: barModule.default,
|
|
77
|
+
DonutChart: donutModule.default,
|
|
78
|
+
FunnelChart: funnelModule.default,
|
|
79
|
+
LineChart: lineModule.default,
|
|
80
|
+
RadarChart: radarModule.default,
|
|
81
|
+
ScatterChart: scatterModule.default
|
|
82
|
+
})).catch((error) => {
|
|
83
|
+
runtimeLoader = null;
|
|
84
|
+
throw error;
|
|
85
|
+
});
|
|
86
|
+
}
|
|
87
|
+
return runtimeLoader;
|
|
88
|
+
});
|
|
89
|
+
export {
|
|
90
|
+
loadChartRuntime
|
|
91
|
+
};
|