@publishfx/publish-chart 2.1.13 → 2.1.15
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/CHANGELOG.md +13 -0
- package/dist/adapters/DataAdapter.js +5 -13
- package/dist/components/base/BarChart.js +0 -2
- package/dist/components/composite/BarLineCompareWeekend.js +1 -3
- package/dist/components/composite/GroupCompare.js +0 -2
- package/dist/components/g2/base/G2BarChart.js +7 -12
- package/dist/components/g2/base/G2BarLegend.js +0 -1
- package/dist/components/g2/base/G2CombineChart.js +49 -24
- package/dist/components/g2/base/G2GaugeChart.js +1 -4
- package/dist/components/g2/base/G2GroupBarChart.js +0 -4
- package/dist/components/g2/base/G2IndicatorCardChart.js +3 -7
- package/dist/components/g2/base/G2LineChart.js +9 -14
- package/dist/components/g2/base/g2Helpers.d.ts +2 -0
- package/dist/components/g2/base/g2Helpers.js +70 -29
- package/dist/components/g2/base/g2bar.js +1 -5
- package/dist/components/g2/base/g2combine.d.ts +4 -0
- package/dist/components/g2/base/g2combine.js +131 -177
- package/dist/components/g2/base/g2groupbar.js +0 -3
- package/dist/components/g2/base/g2line.js +2 -8
- package/dist/components/g2/base/gaugePropsValidator.js +11 -60
- package/dist/components/g2/shared/G2CompareTooltip.d.ts +3 -4
- package/dist/components/g2/shared/G2CompareTooltip.js +7 -9
- package/dist/components/shared/NodeDetail.js +1 -4
- package/dist/components/shared/NodePopover.d.ts +1 -1
- package/dist/components/shared/NodePopover.js +9 -3
- package/dist/utils/chartHelpers.js +1 -3
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,16 @@
|
|
|
1
|
+
**2.1.14** fix(chart): 修复组合图折线指标传空判断
|
|
2
|
+
- 2026-03-05T02:35:21+08:00 [fix(chart): 修复组合图折线指标传空判断](http://lf.git.oa.mt/publish_platform/web/publish/commit/abad3dc8688a3a06d57e2ef1c3884593f5bba88e)
|
|
3
|
+
- 2026-03-05T02:30:07+08:00 [fix(chart): 副轴和非副轴分别定义偏移](http://lf.git.oa.mt/publish_platform/web/publish/commit/6390674b94bcffb02e2145ecc51927a20d89d4a0)
|
|
4
|
+
- 2026-03-05T02:28:42+08:00 [fix(chart): 为了规避辅助线文本避让的问题仍然使用render渲染辅助线](http://lf.git.oa.mt/publish_platform/web/publish/commit/a005f7455772ee64b3e1b951de6eec7fc1529bc5)
|
|
5
|
+
- 2026-03-05T02:19:27+08:00 [fix(chart): 分组时不进行补充处理](http://lf.git.oa.mt/publish_platform/web/publish/commit/0dcc076cf441b16cb6a7a02aee5f6736c1574bc0)
|
|
6
|
+
- 2026-03-05T02:15:09+08:00 [fix(chart): 处理缺失数据导致的tooltip文本缺失问题](http://lf.git.oa.mt/publish_platform/web/publish/commit/ab1c7394ed7b80b5ed17237f59d6c222ad6f253b)
|
|
7
|
+
- 2026-03-05T01:16:46+08:00 [fix(chart): 着重函数axis调整减少顶部空白](http://lf.git.oa.mt/publish_platform/web/publish/commit/6100c4c96a98aa690a61783a64ae4cc3e1c3309f)
|
|
8
|
+
- 2026-03-05T01:03:57+08:00 [feat(chart): 处理图表tooltip和节点tooltip的冲突问题](http://lf.git.oa.mt/publish_platform/web/publish/commit/b502392f558e0d8fdec18c551f52c6f3dc6f9eb2)
|
|
9
|
+
- 2026-03-04T22:36:24+08:00 [fix(chart): 组合图数据处理](http://lf.git.oa.mt/publish_platform/web/publish/commit/6622bc898bdd8feed1655b1573545299164af09c)
|
|
10
|
+
- 2026-03-04T22:18:28+08:00 [fix(chart): 组合图tooltip滚动显示问题](http://lf.git.oa.mt/publish_platform/web/publish/commit/6180fdf4417da43bef0800b450f4d739ca1ab6ee)
|
|
11
|
+
- 2026-03-04T21:28:25+08:00 [fix(chart): 可视化看板、编辑看板tooltip位置问题](http://lf.git.oa.mt/publish_platform/web/publish/commit/c58e1851d1286fcf4290ede2435603e378a747ba)
|
|
12
|
+
- 2026-03-04T21:17:52+08:00 [fix(chart): 组合图total计算更新](http://lf.git.oa.mt/publish_platform/web/publish/commit/937597110cc96672a2f7fda5899cd6df660bd251)
|
|
13
|
+
|
|
1
14
|
**2.1.11** fix(chart): 组合图去掉主轴过滤逻辑,以支持tooltip展示
|
|
2
15
|
- 2026-03-04T20:56:34+08:00 [fix(chart): 组合图去掉主轴过滤逻辑,以支持tooltip展示](http://lf.git.oa.mt/publish_platform/web/publish/commit/215222fb1ae535a52aea475d3a8447cdc61dfa19)
|
|
3
16
|
- 2026-03-04T20:30:34+08:00 [fix(chart): 组合图数据处理逻辑优化](http://lf.git.oa.mt/publish_platform/web/publish/commit/bab29eb2897d1b7b60877c234d8cc14b4d79b9a9)
|
|
@@ -115,6 +115,7 @@ class DataAdapter {
|
|
|
115
115
|
static transformForBarLine(data, config) {
|
|
116
116
|
const ds = new lib();
|
|
117
117
|
const dv = ds.createView().source(data);
|
|
118
|
+
const allKeys = new Set(dv.rows.map((item)=>item[config.x || 'x']));
|
|
118
119
|
const tdv = ds.createView().source(data);
|
|
119
120
|
const combinedv = ds.createView().source(data);
|
|
120
121
|
if (config.y && config.x) {
|
|
@@ -144,14 +145,6 @@ class DataAdapter {
|
|
|
144
145
|
return row.isCombine;
|
|
145
146
|
}
|
|
146
147
|
});
|
|
147
|
-
console.log('tdv:', tdv.rows);
|
|
148
|
-
tdv.transform({
|
|
149
|
-
type: 'filter',
|
|
150
|
-
callback (row) {
|
|
151
|
-
return !row[config.y] || '-' !== row[config.y];
|
|
152
|
-
}
|
|
153
|
-
});
|
|
154
|
-
console.log('tdv:', tdv.rows);
|
|
155
148
|
if (config.isDescend) tdv.transform({
|
|
156
149
|
type: 'sort',
|
|
157
150
|
callback (a, b) {
|
|
@@ -159,20 +152,19 @@ class DataAdapter {
|
|
|
159
152
|
}
|
|
160
153
|
});
|
|
161
154
|
const xKey = config.x ?? 'x';
|
|
162
|
-
const sortData = tdv.rows.map((item)=>item[xKey]);
|
|
163
155
|
combinedv.rows.sort((a, b)=>{
|
|
164
|
-
const aIndex =
|
|
165
|
-
const bIndex =
|
|
156
|
+
const aIndex = allKeys.has(a[xKey]) ? Array.from(allKeys).indexOf(a[xKey]) : -1;
|
|
157
|
+
const bIndex = allKeys.has(b[xKey]) ? Array.from(allKeys).indexOf(b[xKey]) : -1;
|
|
166
158
|
if (-1 === aIndex) return 1;
|
|
167
159
|
if (-1 === bIndex) return -1;
|
|
168
160
|
return aIndex - bIndex;
|
|
169
161
|
});
|
|
170
162
|
}
|
|
171
|
-
console.log('leftData:', tdv.rows, 'rightData:', combinedv.rows);
|
|
172
163
|
return {
|
|
173
164
|
transformedData: dv.rows,
|
|
174
165
|
leftData: tdv.rows,
|
|
175
|
-
rightData: combinedv.rows
|
|
166
|
+
rightData: combinedv.rows,
|
|
167
|
+
xKey: Array.from(allKeys)
|
|
176
168
|
};
|
|
177
169
|
}
|
|
178
170
|
static transformForGroupCompare(data, _config) {
|
|
@@ -154,7 +154,6 @@ const BarChart = ({ height = 300, data, x = "", y = "", indicatorMap, onChartCli
|
|
|
154
154
|
},
|
|
155
155
|
appendPadding: padding,
|
|
156
156
|
onPointMouseover: (e)=>{
|
|
157
|
-
console.log("onPointMouseover", nodeSetting.showType, typeof nodeSetting.showType);
|
|
158
157
|
if (1 === nodeSetting.showType) try {
|
|
159
158
|
if (e?.data) {
|
|
160
159
|
setPointP({
|
|
@@ -168,7 +167,6 @@ const BarChart = ({ height = 300, data, x = "", y = "", indicatorMap, onChartCli
|
|
|
168
167
|
});
|
|
169
168
|
}
|
|
170
169
|
} catch (error) {
|
|
171
|
-
console.warn("Failed to handle point mouseover:", error);
|
|
172
170
|
setPointP({
|
|
173
171
|
x: 0,
|
|
174
172
|
y: 0
|
|
@@ -448,9 +448,7 @@ const BarLineCompareWeekend = ({ height = 310, data, x = '', y = '', z = '', ind
|
|
|
448
448
|
const mapValue = legendMapRef.current[key];
|
|
449
449
|
return false !== mapValue;
|
|
450
450
|
});
|
|
451
|
-
} catch (error) {
|
|
452
|
-
console.warn('Failed to apply filter:', error);
|
|
453
|
-
}
|
|
451
|
+
} catch (error) {}
|
|
454
452
|
};
|
|
455
453
|
if (chart && chart.geometries) {
|
|
456
454
|
const mainChartGeometries = chart.geometries || [];
|
|
@@ -26,8 +26,6 @@ const GroupCompare = ({ height = 300, data, x = "", y = "", indicatorMap, onChar
|
|
|
26
26
|
const BAR_PADDING_RIGHT = mergedConfig.layout.barPaddingRight || 10;
|
|
27
27
|
const HOR_BAR_PADDING_RIGHT = mergedConfig.layout.horBarPaddingRight || 50;
|
|
28
28
|
const { isDescend = false, isLegend = true, isHorizontal = false, isDataTag = false, isHighlight = true } = config || {};
|
|
29
|
-
console.log('isLegend', isLegend);
|
|
30
|
-
console.log('config', config);
|
|
31
29
|
const [chartInsWidth, setChartInsWidth] = useState(0);
|
|
32
30
|
const [mainBarSize, setMainBarSize] = useState(void 0);
|
|
33
31
|
const [backgroundHeight, setBackgroundHeight] = useState(1000);
|
|
@@ -16,7 +16,6 @@ const G2BarChart = ({ height = 300, data, x = "", y = "", indicatorMap, onChartC
|
|
|
16
16
|
showType: 0,
|
|
17
17
|
type: []
|
|
18
18
|
}, auxiliaryLineData, highlightDate = [], indicators = [], timeRange })=>{
|
|
19
|
-
console.log("props data:", data, nodeSetting, "x:", x, "y:", y, "legend:", legend, "indicators:", indicators, timeRange);
|
|
20
19
|
const { formatter, dataTransform, config: contextConfig } = useChartContext();
|
|
21
20
|
const tooltipContainerRef = useG2TooltipContainer();
|
|
22
21
|
const themeColors = contextConfig?.theme?.colors || [];
|
|
@@ -27,7 +26,6 @@ const G2BarChart = ({ height = 300, data, x = "", y = "", indicatorMap, onChartC
|
|
|
27
26
|
const chartConfig = config || {};
|
|
28
27
|
const { isDataTag = false, isDescend = false, isHorizontal = false, isLegend = true, isHighlight = true } = chartConfig;
|
|
29
28
|
const transformedData = useMemo(()=>{
|
|
30
|
-
console.log("transformedData: bar ---", legend, data, indicators);
|
|
31
29
|
if (!legend) {
|
|
32
30
|
let result = transformIndicatorList(indicators, data);
|
|
33
31
|
data = result[y] || [];
|
|
@@ -49,7 +47,6 @@ const G2BarChart = ({ height = 300, data, x = "", y = "", indicatorMap, onChartC
|
|
|
49
47
|
dataTransform,
|
|
50
48
|
contextConfig.nodeMap
|
|
51
49
|
]);
|
|
52
|
-
console.log("transformedData: bar final", transformedData);
|
|
53
50
|
const nodeData = transformedData.filter((item)=>item.nodeInfos?.info?.length > 0 || item.nodeInfos?.infosCompare?.length > 0);
|
|
54
51
|
const maxY = useMemo(()=>{
|
|
55
52
|
const values = transformedData.filter((item)=>"-" !== item[safeY] && void 0 !== item[safeY] && null !== item[safeY]).map((item)=>Number(item[safeY]) || 0);
|
|
@@ -71,6 +68,7 @@ const G2BarChart = ({ height = 300, data, x = "", y = "", indicatorMap, onChartC
|
|
|
71
68
|
const [legendItems, setLegendItems] = useState([]);
|
|
72
69
|
const containerRef = useRef(null);
|
|
73
70
|
const chartRef = useRef(null);
|
|
71
|
+
const currentTooltipTitleRef = useRef(null);
|
|
74
72
|
const [viewWidth, setViewWidth] = useState(0);
|
|
75
73
|
const [viewOffset, setViewOffset] = useState(0);
|
|
76
74
|
useEffect(()=>{
|
|
@@ -131,6 +129,7 @@ const G2BarChart = ({ height = 300, data, x = "", y = "", indicatorMap, onChartC
|
|
|
131
129
|
} : void 0,
|
|
132
130
|
height: height - canvasMarginBottom,
|
|
133
131
|
tooltipRender: (title, items)=>{
|
|
132
|
+
currentTooltipTitleRef.current = title;
|
|
134
133
|
const container = tooltipContainerRef.current;
|
|
135
134
|
if (!container) return null;
|
|
136
135
|
let safeItems = items.map((i)=>({
|
|
@@ -150,27 +149,24 @@ const G2BarChart = ({ height = 300, data, x = "", y = "", indicatorMap, onChartC
|
|
|
150
149
|
},
|
|
151
150
|
auxiliaryLineData: auxiliaryLineData ?? [],
|
|
152
151
|
onNodeListChange: (nodes)=>{
|
|
153
|
-
console.log("g2bar node list:", nodes);
|
|
154
152
|
setXYList(nodes);
|
|
155
153
|
},
|
|
156
154
|
timeRange,
|
|
157
155
|
onChartRender: (chartProps)=>{
|
|
158
|
-
console.log("chartProps:", chartProps);
|
|
159
156
|
setViewWidth(chartProps.layout.innerWidth);
|
|
160
157
|
setViewOffset(chartProps.layout.paddingLeft + chartProps.layout.marginLeft);
|
|
161
158
|
}
|
|
162
159
|
});
|
|
163
160
|
chartRef.current = chart;
|
|
164
|
-
if (onChartClick) chart.on("
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
title: datum[x]
|
|
161
|
+
if (onChartClick) chart.on("plot:click", (_e)=>{
|
|
162
|
+
const tooltipTitle = currentTooltipTitleRef.current;
|
|
163
|
+
if (null != tooltipTitle) onChartClick({
|
|
164
|
+
title: tooltipTitle
|
|
169
165
|
});
|
|
170
166
|
});
|
|
171
167
|
return ()=>{
|
|
172
168
|
if (chartRef.current) {
|
|
173
|
-
chartRef.current.off("
|
|
169
|
+
chartRef.current.off("plot:click");
|
|
174
170
|
chartRef.current.destroy();
|
|
175
171
|
chartRef.current = null;
|
|
176
172
|
}
|
|
@@ -195,7 +191,6 @@ const G2BarChart = ({ height = 300, data, x = "", y = "", indicatorMap, onChartC
|
|
|
195
191
|
auxiliaryLineData,
|
|
196
192
|
onChartClick
|
|
197
193
|
]);
|
|
198
|
-
console.log("xyList:", xyList);
|
|
199
194
|
return /*#__PURE__*/ jsxs("div", {
|
|
200
195
|
style: {
|
|
201
196
|
width: "100%",
|
|
@@ -2,7 +2,6 @@ import { jsx, jsxs } from "react/jsx-runtime";
|
|
|
2
2
|
import { useEffect, useMemo, useRef, useState } from "react";
|
|
3
3
|
import { Tooltip } from "@arco-design/web-react";
|
|
4
4
|
const G2BarLegend = ({ items, activeIds, onChange, pageSize: pageSizeProp, maxLabelChars = 8, style })=>{
|
|
5
|
-
console.log("G2BarLegend items:", items, activeIds);
|
|
6
5
|
const [page, setPage] = useState(1);
|
|
7
6
|
const [autoPageSize, setAutoPageSize] = useState(pageSizeProp || items.length || 1);
|
|
8
7
|
const containerRef = useRef(null);
|
|
@@ -54,9 +54,9 @@ const transformDataToGroupBarLineFormat = (data, x = "groupName", y = "", indica
|
|
|
54
54
|
}).flat();
|
|
55
55
|
};
|
|
56
56
|
const lineColors = [
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
57
|
+
"#FA8C16",
|
|
58
|
+
"#7CB305",
|
|
59
|
+
"#5CDBD3"
|
|
60
60
|
];
|
|
61
61
|
const G2CombineChart = ({ height = 300, data, x = "", y = "", z = "", indicatorMap, onChartClick, legend = "", config, nodeSetting = {
|
|
62
62
|
showType: 0,
|
|
@@ -68,7 +68,6 @@ const G2CombineChart = ({ height = 300, data, x = "", y = "", z = "", indicatorM
|
|
|
68
68
|
const [isOldData, setIsOldData] = useState(false);
|
|
69
69
|
const currentTooltipTitleRef = useRef(null);
|
|
70
70
|
isGroupRef.current = isGroup;
|
|
71
|
-
console.log("G2CombineChart props:", data, x, y, z, indicators, legend, config, nodeSetting);
|
|
72
71
|
const themeColors = contextConfig?.theme?.colors || [];
|
|
73
72
|
const safeIndicatorMap = indicatorMap || contextConfig.indicatorMap || {};
|
|
74
73
|
const safeLegend = legend || "groupType";
|
|
@@ -80,16 +79,13 @@ const G2CombineChart = ({ height = 300, data, x = "", y = "", z = "", indicatorM
|
|
|
80
79
|
const [xyList, setXYList] = useState([]);
|
|
81
80
|
const [activeIds, setActiveIds] = useState([]);
|
|
82
81
|
const [legendItems, setLegendItems] = useState([]);
|
|
83
|
-
const { transformedData, leftData, rightData } = useMemo(()=>{
|
|
84
|
-
console.log("G2CombineChart left useMemo: legend:", legend, data, x, y, z, indicators);
|
|
82
|
+
const { transformedData, leftData, rightData, xKey } = useMemo(()=>{
|
|
85
83
|
if (!legend) {
|
|
86
84
|
let result = transformDataToGroupBarLineFormat(data, x, y, indicators);
|
|
87
85
|
data = result;
|
|
88
86
|
setIsOldData(true);
|
|
89
|
-
console.log('tdv data:', data);
|
|
90
87
|
}
|
|
91
|
-
|
|
92
|
-
const { transformedData, leftData, rightData } = DataAdapter.transform(data, "barLine", {
|
|
88
|
+
const { transformedData, leftData, rightData, xKey } = DataAdapter.transform(data, "barLine", {
|
|
93
89
|
type: "barLine",
|
|
94
90
|
x,
|
|
95
91
|
y: safeY,
|
|
@@ -101,7 +97,8 @@ const G2CombineChart = ({ height = 300, data, x = "", y = "", z = "", indicatorM
|
|
|
101
97
|
return {
|
|
102
98
|
transformedData: transformedData.map((item)=>dataTransform.processNodeInfo(item, contextConfig.nodeMap)),
|
|
103
99
|
leftData: leftData.map((item)=>dataTransform.processNodeInfo(item, contextConfig.nodeMap)),
|
|
104
|
-
rightData: rightData.map((item)=>dataTransform.processNodeInfo(item, contextConfig.nodeMap))
|
|
100
|
+
rightData: rightData.map((item)=>dataTransform.processNodeInfo(item, contextConfig.nodeMap)),
|
|
101
|
+
xKey: xKey
|
|
105
102
|
};
|
|
106
103
|
}, [
|
|
107
104
|
data,
|
|
@@ -112,7 +109,6 @@ const G2CombineChart = ({ height = 300, data, x = "", y = "", z = "", indicatorM
|
|
|
112
109
|
contextConfig.nodeMap,
|
|
113
110
|
isDescend
|
|
114
111
|
]);
|
|
115
|
-
console.log("G2CombineChart transformedData:", transformedData, leftData, rightData);
|
|
116
112
|
const nodeData = transformedData.filter((item)=>item.nodeInfos?.info?.length > 0 || item.nodeInfos?.infosCompare?.length > 0);
|
|
117
113
|
const { maxY } = useMemo(()=>{
|
|
118
114
|
const key = isGroupRef.current ? "total" : safeY;
|
|
@@ -129,7 +125,7 @@ const G2CombineChart = ({ height = 300, data, x = "", y = "", z = "", indicatorM
|
|
|
129
125
|
y
|
|
130
126
|
]);
|
|
131
127
|
const formatLineAxis = useCallback((val)=>{
|
|
132
|
-
const indicatorId = indicators?.length >
|
|
128
|
+
const indicatorId = indicators?.length > 2 ? "" : safeZ;
|
|
133
129
|
return getAxisFormat(val, safeIndicatorMap, indicatorId);
|
|
134
130
|
}, [
|
|
135
131
|
safeIndicatorMap,
|
|
@@ -176,10 +172,30 @@ const G2CombineChart = ({ height = 300, data, x = "", y = "", z = "", indicatorM
|
|
|
176
172
|
const filterLeftData = useMemo(()=>{
|
|
177
173
|
if (!activeIds.length) return leftData;
|
|
178
174
|
const result = leftData.filter((d)=>d.groupType ? activeIds.includes(String(d.groupType.replace("_compare", "") + "_" + d.isCombine)) : true);
|
|
179
|
-
if (isGroupRef.current) result
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
175
|
+
if (!isGroupRef.current) return result;
|
|
176
|
+
{
|
|
177
|
+
const groupTypes = Array.from(new Set(result.map((d)=>d.groupType)));
|
|
178
|
+
let groupResult = [];
|
|
179
|
+
groupTypes.forEach((groupType)=>{
|
|
180
|
+
const groupData = leftData.filter((d)=>d.groupType === groupType);
|
|
181
|
+
xKey.forEach((key)=>{
|
|
182
|
+
if (!result.filter((d)=>d.groupType === groupType).some((d)=>d.groupName === key)) groupData.push({
|
|
183
|
+
groupName: key,
|
|
184
|
+
isCombine: false,
|
|
185
|
+
groupType: groupType,
|
|
186
|
+
groupValue: "",
|
|
187
|
+
total: 0,
|
|
188
|
+
percent: ""
|
|
189
|
+
});
|
|
190
|
+
});
|
|
191
|
+
groupData.sort((a, b)=>xKey.indexOf(a.groupName) - xKey.indexOf(b.groupName));
|
|
192
|
+
groupResult = groupResult.concat(groupData);
|
|
193
|
+
});
|
|
194
|
+
groupResult.forEach((item)=>{
|
|
195
|
+
item.total = result.filter((d)=>d.groupName === item.groupName).reduce((acc, d)=>acc + ("" === d.groupValue ? 0 : d.groupValue), 0);
|
|
196
|
+
});
|
|
197
|
+
return groupResult;
|
|
198
|
+
}
|
|
183
199
|
}, [
|
|
184
200
|
leftData,
|
|
185
201
|
activeIds
|
|
@@ -191,6 +207,18 @@ const G2CombineChart = ({ height = 300, data, x = "", y = "", z = "", indicatorM
|
|
|
191
207
|
rightData,
|
|
192
208
|
activeIds
|
|
193
209
|
]);
|
|
210
|
+
const maxLeft = useMemo(()=>filterLeftData.reduce((max, item)=>{
|
|
211
|
+
const key = isGroupRef.current ? "total" : safeY;
|
|
212
|
+
if (String(item[key]).includes("-") || void 0 === item[key] || null === item[key] || "" === item[key]) return max;
|
|
213
|
+
return Math.max(max, item[key]);
|
|
214
|
+
}, 0), [
|
|
215
|
+
filterLeftData,
|
|
216
|
+
isGroupRef,
|
|
217
|
+
safeY
|
|
218
|
+
]);
|
|
219
|
+
const maxRight = useMemo(()=>filterRightData.reduce((max, item)=>Math.max(max, item.groupValue), 0), [
|
|
220
|
+
filterRightData
|
|
221
|
+
]);
|
|
194
222
|
const filteredData = useMemo(()=>[
|
|
195
223
|
...filterLeftData,
|
|
196
224
|
...filterRightData
|
|
@@ -210,7 +238,6 @@ const G2CombineChart = ({ height = 300, data, x = "", y = "", z = "", indicatorM
|
|
|
210
238
|
chartRef.current.destroy();
|
|
211
239
|
chartRef.current = null;
|
|
212
240
|
}
|
|
213
|
-
console.log("canvasMarginBottom:", canvasMarginBottom);
|
|
214
241
|
const chart = renderG2CombineChart(containerRef.current, {
|
|
215
242
|
data: filteredData,
|
|
216
243
|
nodeData,
|
|
@@ -218,6 +245,8 @@ const G2CombineChart = ({ height = 300, data, x = "", y = "", z = "", indicatorM
|
|
|
218
245
|
y: safeY,
|
|
219
246
|
z,
|
|
220
247
|
maxY,
|
|
248
|
+
maxLeft,
|
|
249
|
+
maxRight,
|
|
221
250
|
themeColors,
|
|
222
251
|
indicatorMap: safeIndicatorMap,
|
|
223
252
|
formatAxis,
|
|
@@ -278,12 +307,9 @@ const G2CombineChart = ({ height = 300, data, x = "", y = "", z = "", indicatorM
|
|
|
278
307
|
chartRef.current = chart;
|
|
279
308
|
if (onChartClick) chart.on("plot:click", (_e)=>{
|
|
280
309
|
const tooltipTitle = currentTooltipTitleRef.current;
|
|
281
|
-
if (null != tooltipTitle) {
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
title: tooltipTitle
|
|
285
|
-
});
|
|
286
|
-
}
|
|
310
|
+
if (null != tooltipTitle) onChartClick({
|
|
311
|
+
title: tooltipTitle
|
|
312
|
+
});
|
|
287
313
|
});
|
|
288
314
|
return ()=>{
|
|
289
315
|
if (chartRef.current) {
|
|
@@ -315,7 +341,6 @@ const G2CombineChart = ({ height = 300, data, x = "", y = "", z = "", indicatorM
|
|
|
315
341
|
rightData,
|
|
316
342
|
isOldData
|
|
317
343
|
]);
|
|
318
|
-
console.log("G2BarLegend items: combie", legendItems, activeIds);
|
|
319
344
|
return /*#__PURE__*/ jsxs("div", {
|
|
320
345
|
style: {
|
|
321
346
|
width: "100%",
|
|
@@ -262,10 +262,7 @@ const G2GaugeChart = (props)=>{
|
|
|
262
262
|
if (tooltip.formatter) try {
|
|
263
263
|
tooltipValue = tooltip.formatter(value);
|
|
264
264
|
} catch (error) {
|
|
265
|
-
|
|
266
|
-
error,
|
|
267
|
-
value
|
|
268
|
-
});
|
|
265
|
+
process.env.NODE_ENV;
|
|
269
266
|
tooltipValue = value.toLocaleString();
|
|
270
267
|
}
|
|
271
268
|
else tooltipValue = value.toLocaleString();
|
|
@@ -14,7 +14,6 @@ const G2GroupBarChart = ({ height = 300, data, x = "", y = "", indicatorMap, onC
|
|
|
14
14
|
showType: 0,
|
|
15
15
|
type: []
|
|
16
16
|
}, auxiliaryLineData, highlightDate = [], indicators = [], timeRange })=>{
|
|
17
|
-
console.log("props data:", data, nodeSetting, "x:", x, "y:", y, "legend:", legend, "indicators:", indicators, timeRange, config);
|
|
18
17
|
const { formatter, dataTransform, config: contextConfig } = useChartContext();
|
|
19
18
|
const tooltipContainerRef = useG2TooltipContainer();
|
|
20
19
|
const themeColors = contextConfig?.theme?.colors || [];
|
|
@@ -24,7 +23,6 @@ const G2GroupBarChart = ({ height = 300, data, x = "", y = "", indicatorMap, onC
|
|
|
24
23
|
const chartConfig = config || {};
|
|
25
24
|
const { isDataTag = false, isDescend = false, isHorizontal = false, isLegend = true, isHighlight = true } = chartConfig;
|
|
26
25
|
const transformedData = useMemo(()=>{
|
|
27
|
-
console.log("transformedData: bar ---", legend, data, indicators);
|
|
28
26
|
if (!legend) {
|
|
29
27
|
let result = transformIndicatorList(indicators, data);
|
|
30
28
|
data = result[y] || [];
|
|
@@ -46,7 +44,6 @@ const G2GroupBarChart = ({ height = 300, data, x = "", y = "", indicatorMap, onC
|
|
|
46
44
|
dataTransform,
|
|
47
45
|
contextConfig.nodeMap
|
|
48
46
|
]);
|
|
49
|
-
console.log("transformedData: bar final", transformedData);
|
|
50
47
|
const maxY = useMemo(()=>{
|
|
51
48
|
const values = transformedData.filter((item)=>"-" !== item['total'] && void 0 !== item['total'] && null !== item['total']).map((item)=>Number(item['total']) || 0);
|
|
52
49
|
const dataMax = values.length > 0 ? Math.max(...values) : 0;
|
|
@@ -143,7 +140,6 @@ const G2GroupBarChart = ({ height = 300, data, x = "", y = "", indicatorMap, onC
|
|
|
143
140
|
},
|
|
144
141
|
auxiliaryLineData: auxiliaryLineData ?? [],
|
|
145
142
|
onNodeListChange: (nodes)=>{
|
|
146
|
-
console.log("g2bar node list:", nodes, nodes[0], nodes[1]);
|
|
147
143
|
setXYList(nodes);
|
|
148
144
|
},
|
|
149
145
|
timeRange,
|
|
@@ -75,13 +75,9 @@ const G2IndicatorCardChart = ({ data, height, x = '', y = '', legend = '', indic
|
|
|
75
75
|
});
|
|
76
76
|
const view = chart.view();
|
|
77
77
|
view.data(transformedData);
|
|
78
|
-
if (scale && scale.groupValue) {
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
view.scale({
|
|
82
|
-
y: scale.groupValue
|
|
83
|
-
});
|
|
84
|
-
}
|
|
78
|
+
if (scale && scale.groupValue) view.scale({
|
|
79
|
+
y: scale.groupValue
|
|
80
|
+
});
|
|
85
81
|
if (lineStyle.area) view.area().encode('x', x || 'groupName').encode('y', 'groupValue').encode('shape', lineStyle.shape || 'smooth').style({
|
|
86
82
|
fill: lineColor,
|
|
87
83
|
fillOpacity: 0.2
|
|
@@ -17,7 +17,6 @@ const G2LineChart = ({ height = 300, data, x = "", y = "", z = "", indicatorMap,
|
|
|
17
17
|
showType: 0,
|
|
18
18
|
type: []
|
|
19
19
|
}, auxiliaryLineData, highlightDate, indicators = [] })=>{
|
|
20
|
-
console.log("props data: G2LineChart", data, nodeSetting, config, "x, y, z", x, y, z, "highlightDate:", highlightDate, "indicators:", indicators);
|
|
21
20
|
const { formatter, dataTransform, config: contextConfig } = useChartContext();
|
|
22
21
|
const tooltipContainerRef = useG2TooltipContainer();
|
|
23
22
|
const themeColors = contextConfig?.theme?.colors || [];
|
|
@@ -54,7 +53,6 @@ const G2LineChart = ({ height = 300, data, x = "", y = "", z = "", indicatorMap,
|
|
|
54
53
|
contextConfig.nodeMap
|
|
55
54
|
]);
|
|
56
55
|
const nodeData = transformedData.filter((item)=>item.nodeInfos?.info?.length > 0 || item.nodeInfos?.infosCompare?.length > 0);
|
|
57
|
-
console.log('nodeData:', nodeData);
|
|
58
56
|
const { minY, maxY } = useMemo(()=>{
|
|
59
57
|
const dataValues = transformedData.filter((item)=>"-" !== item[safeY] && void 0 !== item[safeY] && null !== item[safeY]).map((item)=>Number(item[safeY]));
|
|
60
58
|
const compareValues = transformedData.filter((item)=>"-" !== item["subGroupValue"] && null != item["subGroupValue"]).map((item)=>Number(item["subGroupValue"]));
|
|
@@ -77,7 +75,7 @@ const G2LineChart = ({ height = 300, data, x = "", y = "", z = "", indicatorMap,
|
|
|
77
75
|
auxiliaryLineData
|
|
78
76
|
]);
|
|
79
77
|
const formatAxis = useCallback((val)=>{
|
|
80
|
-
const indicatorId = indicators?.length > 1 ?
|
|
78
|
+
const indicatorId = indicators?.length > 1 ? "" : safeLegend;
|
|
81
79
|
return getAxisFormat(val, safeIndicatorMap, indicatorId);
|
|
82
80
|
}, [
|
|
83
81
|
safeIndicatorMap,
|
|
@@ -130,7 +128,6 @@ const G2LineChart = ({ height = 300, data, x = "", y = "", z = "", indicatorMap,
|
|
|
130
128
|
chartRef.current.destroy();
|
|
131
129
|
chartRef.current = null;
|
|
132
130
|
}
|
|
133
|
-
console.log("G2LineChart", x, y, minY, maxY);
|
|
134
131
|
const chart = renderG2LineChart(containerRef.current, {
|
|
135
132
|
data: filteredData,
|
|
136
133
|
nodeData,
|
|
@@ -161,7 +158,6 @@ const G2LineChart = ({ height = 300, data, x = "", y = "", z = "", indicatorMap,
|
|
|
161
158
|
...i,
|
|
162
159
|
color: i.color ?? themeColors[0] ?? "#5B8FF9"
|
|
163
160
|
}));
|
|
164
|
-
console.log("safeItems:", safeItems);
|
|
165
161
|
react_dom.render(/*#__PURE__*/ jsx(G2CompareTooltip, {
|
|
166
162
|
title: title,
|
|
167
163
|
items: safeItems,
|
|
@@ -186,15 +182,15 @@ const G2LineChart = ({ height = 300, data, x = "", y = "", z = "", indicatorMap,
|
|
|
186
182
|
}
|
|
187
183
|
});
|
|
188
184
|
chartRef.current = chart;
|
|
189
|
-
if (onChartClick)
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
onChartClick({
|
|
185
|
+
if (onChartClick) {
|
|
186
|
+
chart.on("plot:click", (_e)=>{
|
|
187
|
+
const tooltipTitle = currentTooltipTitleRef.current;
|
|
188
|
+
if (null != tooltipTitle) onChartClick({
|
|
194
189
|
title: tooltipTitle
|
|
195
190
|
});
|
|
196
|
-
}
|
|
197
|
-
|
|
191
|
+
});
|
|
192
|
+
chart.on("plot:pointerenter:", (event)=>{});
|
|
193
|
+
}
|
|
198
194
|
return ()=>{
|
|
199
195
|
if (chartRef.current) {
|
|
200
196
|
chartRef.current.off("plot:click");
|
|
@@ -221,7 +217,6 @@ const G2LineChart = ({ height = 300, data, x = "", y = "", z = "", indicatorMap,
|
|
|
221
217
|
auxiliaryLineData,
|
|
222
218
|
themeColors
|
|
223
219
|
]);
|
|
224
|
-
console.log("legendItems:", legendItems);
|
|
225
220
|
return /*#__PURE__*/ jsxs("div", {
|
|
226
221
|
style: {
|
|
227
222
|
width: "100%",
|
|
@@ -255,7 +250,7 @@ const G2LineChart = ({ height = 300, data, x = "", y = "", z = "", indicatorMap,
|
|
|
255
250
|
children: xyList?.map((item, index)=>/*#__PURE__*/ jsx(NodePopover, {
|
|
256
251
|
style: {
|
|
257
252
|
position: "absolute",
|
|
258
|
-
top: item.pointP?.y +
|
|
253
|
+
top: item.pointP?.y + 12,
|
|
259
254
|
left: item.pointP?.x,
|
|
260
255
|
width: 12,
|
|
261
256
|
height: 12,
|
|
@@ -307,3 +307,5 @@ export declare function applyNodeData(view: any, nodeData: any[], x: string, y:
|
|
|
307
307
|
}[];
|
|
308
308
|
export declare function adjustDomainMax(domainMin: number, domainMax: number): number;
|
|
309
309
|
export declare const sortByIndicators: (arr: string[], indicators: string[]) => string[];
|
|
310
|
+
export declare function intervalSort(a: any, b: any): number;
|
|
311
|
+
export declare function fillMissingIndicator(baseItems: any[], safeTitle: string, isCompare: boolean, isGroup?: boolean): any[];
|