@publishfx/publish-chart 2.1.0 → 2.1.2
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 +33 -0
- package/dist/adapters/DataAdapter.d.ts +5 -1
- package/dist/adapters/DataAdapter.js +67 -0
- package/dist/components/g2/base/G2CombineChart.js +36 -12
- package/dist/components/g2/base/g2Helpers.d.ts +1 -1
- package/dist/components/g2/base/g2Helpers.js +19 -8
- package/dist/components/g2/base/g2bar.js +20 -15
- package/dist/components/g2/base/g2combine.d.ts +9 -0
- package/dist/components/g2/base/g2combine.js +25 -4
- package/dist/components/g2/base/g2groupbar.js +3 -2
- package/dist/components/g2/base/g2line.js +4 -18
- package/dist/core/ChartTypes.d.ts +2 -0
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,36 @@
|
|
|
1
|
+
**2.1.1** feat(chart): 柱状图支持crossharisY
|
|
2
|
+
- 2026-02-28T18:37:26+08:00 [feat(chart): 柱状图支持crossharisY](http://lf.git.oa.mt/publish_platform/web/publish/commit/b77a0932f1710144915d209c0186640bafdff492)
|
|
3
|
+
|
|
4
|
+
**2.1.1** feat(chart): 柱状图支持crossharisY
|
|
5
|
+
- 2026-02-28T18:37:26+08:00 [feat(chart): 柱状图支持crossharisY](http://lf.git.oa.mt/publish_platform/web/publish/commit/b77a0932f1710144915d209c0186640bafdff492)
|
|
6
|
+
- 2026-02-28T16:06:24+08:00 [fix(chart): ts错误修复](http://lf.git.oa.mt/publish_platform/web/publish/commit/7a070b0f77b3ff41450fce0884f8713ebd58f4b2)
|
|
7
|
+
- 2026-02-28T15:53:07+08:00 [fix(chart): 柱状图和折线图的图例分别设置为square和line](http://lf.git.oa.mt/publish_platform/web/publish/commit/a11ccf463d4fad84ae0d4b84672bc1db79951bb1)
|
|
8
|
+
- 2026-02-28T15:40:18+08:00 [feat(chart): 折线图和组合图支持节点详情](http://lf.git.oa.mt/publish_platform/web/publish/commit/73593a0644bc956772395a307f6e73f43b80a159)
|
|
9
|
+
- 2026-02-28T15:19:08+08:00 [fix(chart): 节点详情Dom结构修改](http://lf.git.oa.mt/publish_platform/web/publish/commit/0e8de83391883c976bf9a4aaaff161679f845c09)
|
|
10
|
+
- 2026-02-28T15:17:44+08:00 [feat: 堆积图数据标签&高亮](http://lf.git.oa.mt/publish_platform/web/publish/commit/867b4341e71a8703f31b4c1808b7d57e0a58c480)
|
|
11
|
+
- 2026-02-28T15:09:33+08:00 [feat(chart): 新增柱状图节点详情支持](http://lf.git.oa.mt/publish_platform/web/publish/commit/fd94eacc4618f04704caf4c61c8e914900ceb688)
|
|
12
|
+
- 2026-02-28T12:22:23+08:00 [feat(chart): 着重显示的逻辑联动tooltipRender的数据处理](http://lf.git.oa.mt/publish_platform/web/publish/commit/934e5a798d8424327aa13a3d739fb03cc00935f4)
|
|
13
|
+
- 2026-02-28T12:12:29+08:00 [feat(chart): 新增高亮日期辅助函数](http://lf.git.oa.mt/publish_platform/web/publish/commit/539ccc99d93680497fa770ea5c08c80b119eb098)
|
|
14
|
+
- 2026-02-28T00:08:09+08:00 [feat(chart): 组合图tooltip修正](http://lf.git.oa.mt/publish_platform/web/publish/commit/12ac7885e508cf26a1b8322a6c048c25accfba54)
|
|
15
|
+
- 2026-02-27T22:50:37+08:00 [feat(chart): G2Combine组合图支持双轴展示](http://lf.git.oa.mt/publish_platform/web/publish/commit/8c4428edecd5922f75746c168fd76da68364c690)
|
|
16
|
+
- 2026-02-27T21:46:47+08:00 [feat: 堆积图](http://lf.git.oa.mt/publish_platform/web/publish/commit/55e60330c83cc19e548bbb91c9ed0837d39a9282)
|
|
17
|
+
- 2026-02-27T20:58:12+08:00 [feat(chart): 图例组件支持symbol符号](http://lf.git.oa.mt/publish_platform/web/publish/commit/06435b768d54913aacf12280ff9e7b2e782fb7cb)
|
|
18
|
+
- 2026-02-27T20:44:47+08:00 [fix(chart): G2Combine组合图的图例逻辑修改成线上一致](http://lf.git.oa.mt/publish_platform/web/publish/commit/ff7d39e61c9945aa9c1db61d319a7ae3d0cba23b)
|
|
19
|
+
- 2026-02-27T19:49:23+08:00 [fix(chart): 组合图补充节点逻辑](http://lf.git.oa.mt/publish_platform/web/publish/commit/05ab21057b5c7695e559ab664c8e2135fd8b7f49)
|
|
20
|
+
- 2026-02-27T19:45:55+08:00 [feat(chart): G2CombineChart组合图初步提交](http://lf.git.oa.mt/publish_platform/web/publish/commit/36e1d93d3d9714c8899e23bb86a829c22ce24aab)
|
|
21
|
+
- 2026-02-27T16:10:00+08:00 [fix(chart): 修复折线图高亮参数支持](http://lf.git.oa.mt/publish_platform/web/publish/commit/691e792838831d92d2b1229ee500dab30b5af913)
|
|
22
|
+
- 2026-02-27T16:01:24+08:00 [fix(chart): 辅助线使用自定义render渲染](http://lf.git.oa.mt/publish_platform/web/publish/commit/a9285296553ccb0c1c7e52a2365a1bd6c386d26b)
|
|
23
|
+
- 2026-02-27T15:57:34+08:00 [feat(chart): 更新G2LineChart组件](http://lf.git.oa.mt/publish_platform/web/publish/commit/c7c25e369fcebf1c04f1c9487d0de0dc7b533ef3)
|
|
24
|
+
- 2026-02-26T23:33:58+08:00 [fix(chart): G2BarChart的图例文案保持一致](http://lf.git.oa.mt/publish_platform/web/publish/commit/01b0ae29d1deccb600163cefb983788c38e0948d)
|
|
25
|
+
- 2026-02-26T22:58:27+08:00 [feat(chart): 增加G2BarChart柱状图](http://lf.git.oa.mt/publish_platform/web/publish/commit/b69d46602f28d3f68531f516a162ea6717a21ffc)
|
|
26
|
+
- 2026-02-26T22:32:20+08:00 [feat(chart): G2版本Tooltip渲染函数更新](http://lf.git.oa.mt/publish_platform/web/publish/commit/2788488cdbe38561ec19b8f1fab814f0292029ed)
|
|
27
|
+
- 2026-02-11T23:23:12+08:00 [feat(chart): 新增G2PieChart饼图和G2IndicatorCardChart指标卡图表组件](http://lf.git.oa.mt/publish_platform/web/publish/commit/42e516b980dbccc39def106611af29eea64e42de)
|
|
28
|
+
- 2026-02-11T20:19:51+08:00 [feat(chart): legend](http://lf.git.oa.mt/publish_platform/web/publish/commit/dc1957c73dbd91107ba6ca2f8e4f2aefbedb4b36)
|
|
29
|
+
- 2026-02-10T16:31:05+08:00 [feat(chart): tooltip优化](http://lf.git.oa.mt/publish_platform/web/publish/commit/6a486017fcaf23bd478d269b4e74962347e316ba)
|
|
30
|
+
- 2026-02-10T15:55:53+08:00 [feat(chart): tooltips](http://lf.git.oa.mt/publish_platform/web/publish/commit/bceab306e7ff2dd855a789982b9df37292bca2fe)
|
|
31
|
+
- 2026-02-06T20:03:25+08:00 [feat: 节点信息&对比时间](http://lf.git.oa.mt/publish_platform/web/publish/commit/893949661301676195b1dba1a9531678da50f926)
|
|
32
|
+
- 2026-02-05T18:38:44+08:00 [feat: 着重日功能](http://lf.git.oa.mt/publish_platform/web/publish/commit/a50195b6cc5d0f6645151194fa8d6e856e5af69a)
|
|
33
|
+
|
|
1
34
|
**2.1.0** fix(chart): ts错误修复
|
|
2
35
|
- 2026-02-28T16:06:24+08:00 [fix(chart): ts错误修复](http://lf.git.oa.mt/publish_platform/web/publish/commit/7a070b0f77b3ff41450fce0884f8713ebd58f4b2)
|
|
3
36
|
- 2026-02-28T15:53:07+08:00 [fix(chart): 柱状图和折线图的图例分别设置为square和line](http://lf.git.oa.mt/publish_platform/web/publish/commit/a11ccf463d4fad84ae0d4b84672bc1db79951bb1)
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export interface TransformConfig {
|
|
2
|
-
type: 'bar' | 'groupBar' | 'line' | 'barLine' | 'groupCompare';
|
|
2
|
+
type: 'bar' | 'groupBar' | 'line' | 'barLine' | 'groupBarLine' | 'groupCompare';
|
|
3
3
|
x?: string;
|
|
4
4
|
y?: string;
|
|
5
5
|
z?: string;
|
|
@@ -30,6 +30,10 @@ export declare class DataAdapter {
|
|
|
30
30
|
* 柱状折线组合图数据转换
|
|
31
31
|
*/
|
|
32
32
|
private static transformForBarLine;
|
|
33
|
+
/**
|
|
34
|
+
* 分组柱状折线组合图数据转换
|
|
35
|
+
*/
|
|
36
|
+
private static transformForGroupBarLine;
|
|
33
37
|
/**
|
|
34
38
|
* 分组对比图数据转换
|
|
35
39
|
*/
|
|
@@ -11,6 +11,8 @@ class DataAdapter {
|
|
|
11
11
|
return this.transformForLine(data, config);
|
|
12
12
|
case 'barLine':
|
|
13
13
|
return this.transformForBarLine(data, config);
|
|
14
|
+
case 'groupBarLine':
|
|
15
|
+
return this.transformForGroupBarLine(data, config);
|
|
14
16
|
case 'groupCompare':
|
|
15
17
|
return this.transformForGroupCompare(data, config);
|
|
16
18
|
default:
|
|
@@ -129,6 +131,71 @@ class DataAdapter {
|
|
|
129
131
|
});
|
|
130
132
|
return dv.rows;
|
|
131
133
|
}
|
|
134
|
+
static transformForGroupBarLine(data, config) {
|
|
135
|
+
const ds = new lib();
|
|
136
|
+
const dv = ds.createView().source(data);
|
|
137
|
+
const tdv = ds.createView().source(data);
|
|
138
|
+
if (config.y && config.x) {
|
|
139
|
+
dv.transform({
|
|
140
|
+
type: 'map',
|
|
141
|
+
callback: (row)=>{
|
|
142
|
+
row[config.y] = '' !== row[config.y] ? +row[config.y] : '-';
|
|
143
|
+
return row;
|
|
144
|
+
}
|
|
145
|
+
});
|
|
146
|
+
tdv.transform({
|
|
147
|
+
type: 'map',
|
|
148
|
+
callback: (row)=>{
|
|
149
|
+
row[config.y] = '' !== row[config.y] ? +row[config.y] : '-';
|
|
150
|
+
return row;
|
|
151
|
+
}
|
|
152
|
+
});
|
|
153
|
+
tdv.transform({
|
|
154
|
+
type: 'filter',
|
|
155
|
+
callback (row) {
|
|
156
|
+
return !row.isCombine;
|
|
157
|
+
}
|
|
158
|
+
});
|
|
159
|
+
tdv.transform({
|
|
160
|
+
type: 'filter',
|
|
161
|
+
callback (row) {
|
|
162
|
+
return !row[config.y] || '-' !== row[config.y];
|
|
163
|
+
}
|
|
164
|
+
});
|
|
165
|
+
tdv.transform({
|
|
166
|
+
type: 'aggregate',
|
|
167
|
+
fields: [
|
|
168
|
+
config.y
|
|
169
|
+
],
|
|
170
|
+
groupBy: [
|
|
171
|
+
config.x
|
|
172
|
+
],
|
|
173
|
+
operations: [
|
|
174
|
+
'sum'
|
|
175
|
+
],
|
|
176
|
+
as: [
|
|
177
|
+
'total'
|
|
178
|
+
]
|
|
179
|
+
});
|
|
180
|
+
tdv.transform({
|
|
181
|
+
type: 'sort',
|
|
182
|
+
callback (a, b) {
|
|
183
|
+
return b.total - a.total;
|
|
184
|
+
}
|
|
185
|
+
});
|
|
186
|
+
const xKey = config.x ?? 'x';
|
|
187
|
+
const sortData = tdv.rows.map((item)=>item[xKey]);
|
|
188
|
+
if (config.isDescend) dv.transform({
|
|
189
|
+
type: 'sort',
|
|
190
|
+
callback (a, b) {
|
|
191
|
+
if (-1 === sortData.indexOf(a[xKey])) return 1;
|
|
192
|
+
if (-1 === sortData.indexOf(b[xKey])) return -1;
|
|
193
|
+
return sortData.indexOf(a[xKey]) - sortData.indexOf(b[xKey]);
|
|
194
|
+
}
|
|
195
|
+
});
|
|
196
|
+
}
|
|
197
|
+
return dv.rows;
|
|
198
|
+
}
|
|
132
199
|
static transformForGroupCompare(data, _config) {
|
|
133
200
|
return data;
|
|
134
201
|
}
|
|
@@ -60,18 +60,26 @@ const lineColors = [
|
|
|
60
60
|
const G2CombineChart = ({ height = 300, data, x = "", y = "", z = "", indicatorMap, onChartClick, legend = "", config, nodeSetting = {
|
|
61
61
|
showType: 0,
|
|
62
62
|
type: []
|
|
63
|
-
}, indicators = [], auxiliaryLineData, highlightDate, timeRange })=>{
|
|
63
|
+
}, indicators = [], auxiliaryLineData, highlightDate, timeRange, isGroup })=>{
|
|
64
64
|
const { formatter, dataTransform, config: contextConfig } = useChartContext();
|
|
65
65
|
const tooltipContainerRef = useG2TooltipContainer();
|
|
66
|
-
console.log("G2CombineChart props:", data, x, y, z,
|
|
66
|
+
console.log("G2CombineChart props:", data, x, y, z, indicators, legend, config, nodeSetting);
|
|
67
67
|
const themeColors = contextConfig?.theme?.colors || [];
|
|
68
68
|
const safeIndicatorMap = indicatorMap || contextConfig.indicatorMap || {};
|
|
69
|
-
const safeLegend =
|
|
69
|
+
const safeLegend = useMemo(()=>{
|
|
70
|
+
if (isGroup) return legend || 'groupType';
|
|
71
|
+
if ("groupType" === legend) return y;
|
|
72
|
+
return legend || y;
|
|
73
|
+
}, [
|
|
74
|
+
isGroup,
|
|
75
|
+
legend,
|
|
76
|
+
y
|
|
77
|
+
]);
|
|
70
78
|
const safeZ = z;
|
|
71
79
|
const safeY = "groupValue";
|
|
72
80
|
const isCompare = timeRange?.compareStartTime !== "";
|
|
73
81
|
const chartConfig = config || {};
|
|
74
|
-
const { isDataTag = false, isLegend = true } = chartConfig;
|
|
82
|
+
const { isDataTag = false, isLegend = true, isDescend = false } = chartConfig;
|
|
75
83
|
const [xyList, setXYList] = useState([]);
|
|
76
84
|
const [activeIds, setActiveIds] = useState([]);
|
|
77
85
|
const [legendItems, setLegendItems] = useState([]);
|
|
@@ -81,7 +89,12 @@ const G2CombineChart = ({ height = 300, data, x = "", y = "", z = "", indicatorM
|
|
|
81
89
|
data = result;
|
|
82
90
|
}
|
|
83
91
|
console.log("G2CombineChart transformedData2:", data);
|
|
84
|
-
const result = DataAdapter.transform(data, "
|
|
92
|
+
const result = isGroup ? DataAdapter.transform(data, "groupBarLine", {
|
|
93
|
+
type: "barLine",
|
|
94
|
+
x,
|
|
95
|
+
y: safeY,
|
|
96
|
+
isDescend
|
|
97
|
+
}) : DataAdapter.transform(data, "barLine", {
|
|
85
98
|
type: "barLine",
|
|
86
99
|
x,
|
|
87
100
|
y: safeY,
|
|
@@ -89,6 +102,7 @@ const G2CombineChart = ({ height = 300, data, x = "", y = "", z = "", indicatorM
|
|
|
89
102
|
});
|
|
90
103
|
return result.map((item)=>dataTransform.processNodeInfo(item, contextConfig.nodeMap));
|
|
91
104
|
}, [
|
|
105
|
+
isGroup,
|
|
92
106
|
data,
|
|
93
107
|
x,
|
|
94
108
|
safeY,
|
|
@@ -98,11 +112,13 @@ const G2CombineChart = ({ height = 300, data, x = "", y = "", z = "", indicatorM
|
|
|
98
112
|
]);
|
|
99
113
|
console.log("G2CombineChart transformedData:", transformedData);
|
|
100
114
|
const { maxY } = useMemo(()=>{
|
|
101
|
-
const
|
|
115
|
+
const key = isGroup ? "total" : safeY;
|
|
116
|
+
const yValues = transformedData.filter((item)=>"-" !== item[key] && void 0 !== item[key] && null !== item[key]).map((item)=>Number(item[key]) || 0);
|
|
102
117
|
return {
|
|
103
118
|
maxY: yValues.length > 0 ? Math.max(...yValues) : 0
|
|
104
119
|
};
|
|
105
120
|
}, [
|
|
121
|
+
isGroup,
|
|
106
122
|
transformedData,
|
|
107
123
|
safeY
|
|
108
124
|
]);
|
|
@@ -124,18 +140,20 @@ const G2CombineChart = ({ height = 300, data, x = "", y = "", z = "", indicatorM
|
|
|
124
140
|
const items = groupTypes.map((id, index)=>{
|
|
125
141
|
const colorIndex = index;
|
|
126
142
|
const indicatorId = id.split("_")[0];
|
|
127
|
-
const
|
|
143
|
+
const isCombine = "true" === id.split("_")[1];
|
|
144
|
+
const color = isGroup ? themeColors[colorIndex] || themeColors[0] : 0 === colorIndex ? themeColors[colorIndex] : lineColors[colorIndex - 1];
|
|
128
145
|
return {
|
|
129
146
|
id,
|
|
130
|
-
label: getIndicatorCompareName(safeIndicatorMap, String(indicatorId)) + (String(indicatorId).includes("_compare") ? `(对比时间:${timeRange?.compareStartTime}~${timeRange?.compareEndTime})` : ""),
|
|
147
|
+
label: isGroup ? isCombine ? getIndicatorCompareName(safeIndicatorMap, String(indicatorId)) : indicatorId : getIndicatorCompareName(safeIndicatorMap, String(indicatorId)) + (String(indicatorId).includes("_compare") ? `(对比时间:${timeRange?.compareStartTime}~${timeRange?.compareEndTime})` : ""),
|
|
131
148
|
color,
|
|
132
149
|
isCompare: String(indicatorId).includes("_compare"),
|
|
133
|
-
symbol: 0 === colorIndex ? "square" : "line"
|
|
150
|
+
symbol: isGroup ? isCombine ? 'line' : 'square' : 0 === colorIndex ? "square" : "line"
|
|
134
151
|
};
|
|
135
152
|
});
|
|
136
153
|
setLegendItems(items);
|
|
137
154
|
if (!activeIds.length) setActiveIds(items.map((i)=>i.id));
|
|
138
155
|
}, [
|
|
156
|
+
isGroup,
|
|
139
157
|
transformedData,
|
|
140
158
|
safeIndicatorMap,
|
|
141
159
|
themeColors,
|
|
@@ -187,8 +205,9 @@ const G2CombineChart = ({ height = 300, data, x = "", y = "", z = "", indicatorM
|
|
|
187
205
|
...i,
|
|
188
206
|
color: i.color ?? themeColors[0] ?? "#5B8FF9"
|
|
189
207
|
}));
|
|
190
|
-
|
|
208
|
+
safeItems = safeItems.filter((i)=>i.indicatorId);
|
|
191
209
|
react_dom.render(/*#__PURE__*/ jsx(G2CompareTooltip, {
|
|
210
|
+
isGroupBar: true,
|
|
192
211
|
title: title,
|
|
193
212
|
items: safeItems,
|
|
194
213
|
safeIndicatorMap: safeIndicatorMap,
|
|
@@ -210,7 +229,10 @@ const G2CombineChart = ({ height = 300, data, x = "", y = "", z = "", indicatorM
|
|
|
210
229
|
setViewOffset((layout.paddingLeft ?? 0) + (layout.marginLeft ?? 0));
|
|
211
230
|
}
|
|
212
231
|
},
|
|
213
|
-
lineColors
|
|
232
|
+
lineColors,
|
|
233
|
+
isGroup,
|
|
234
|
+
legendItems,
|
|
235
|
+
indicatorId: y
|
|
214
236
|
});
|
|
215
237
|
chartRef.current = chart;
|
|
216
238
|
if (onChartClick) chart.on("element:click", (e)=>{
|
|
@@ -237,7 +259,9 @@ const G2CombineChart = ({ height = 300, data, x = "", y = "", z = "", indicatorM
|
|
|
237
259
|
safeIndicatorMap,
|
|
238
260
|
formatter,
|
|
239
261
|
formatAxis,
|
|
240
|
-
onChartClick
|
|
262
|
+
onChartClick,
|
|
263
|
+
isGroup,
|
|
264
|
+
legendItems
|
|
241
265
|
]);
|
|
242
266
|
if (!z) return /*#__PURE__*/ jsx("div", {
|
|
243
267
|
style: {
|
|
@@ -290,4 +290,4 @@ export interface GetColorByGroupTypeOptions {
|
|
|
290
290
|
* 根据 groupType(或去掉 _compare 后的 baseKey)返回颜色,折线 stroke / 柱状 fill 共用
|
|
291
291
|
*/
|
|
292
292
|
export declare function getColorByGroupType(groupType: string, options: GetColorByGroupTypeOptions): string;
|
|
293
|
-
export declare function applyHighlightDate(view: any, x: string, data: any, highlightDate: string[]): void;
|
|
293
|
+
export declare function applyHighlightDate(view: any, x: string, data: any, highlightDate: string[], isHighlight: boolean): void;
|
|
@@ -140,28 +140,39 @@ function getColorByGroupType(groupType, options) {
|
|
|
140
140
|
const idx = indicators.indexOf(baseKey);
|
|
141
141
|
return themeColors[idx >= 0 ? idx : 0] ?? themeColors[0] ?? '#5AD8A6';
|
|
142
142
|
}
|
|
143
|
-
function applyHighlightDate(view, x, data, highlightDate) {
|
|
143
|
+
function applyHighlightDate(view, x, data, highlightDate, isHighlight) {
|
|
144
144
|
const allXValues = data.map((item)=>item[x]);
|
|
145
145
|
const highlightX = Array.from(new Set(allXValues));
|
|
146
146
|
const highlightData = highlightX.map((item)=>({
|
|
147
147
|
[x]: item,
|
|
148
148
|
['highlight']: highlightDate.includes(item) ? 100 : 0
|
|
149
149
|
}));
|
|
150
|
-
view.interval().data(highlightData).encode('x', x).encode('y', 'highlight').scale('y', {
|
|
150
|
+
const highlightInterval = view.interval().data(highlightData).encode('x', x).encode('y', 'highlight').scale('y', {
|
|
151
151
|
type: 'linear',
|
|
152
152
|
domainMin: 0,
|
|
153
153
|
domainMax: 100,
|
|
154
|
-
nice: true,
|
|
155
|
-
clamp: true,
|
|
156
154
|
independent: true
|
|
157
|
-
}).axis('y', {
|
|
155
|
+
}).tooltip(false).axis('y', {
|
|
156
|
+
title: false,
|
|
157
|
+
grid: false,
|
|
158
|
+
label: false
|
|
159
|
+
});
|
|
160
|
+
highlightInterval.style({
|
|
161
|
+
fill: '#cccccc',
|
|
162
|
+
fillOpacity: isHighlight ? 0.3 : 0
|
|
163
|
+
});
|
|
164
|
+
view.line().data(highlightData).encode('x', x).encode('y', 'highlight').scale('y', {
|
|
165
|
+
type: 'linear',
|
|
166
|
+
domainMin: 0,
|
|
167
|
+
domainMax: 100,
|
|
168
|
+
independent: true
|
|
169
|
+
}).tooltip(true).axis('y', {
|
|
158
170
|
title: false,
|
|
159
171
|
grid: false,
|
|
160
172
|
label: false
|
|
161
173
|
}).style({
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
fillOpacity: 0.3
|
|
174
|
+
stroke: 'transparent',
|
|
175
|
+
strokeOpacity: 0
|
|
165
176
|
});
|
|
166
177
|
}
|
|
167
178
|
export { applyAuxiliaryLineY, applyAxisX, applyAxisY, applyHighlightDate, applyLegendColor, applyScaleYLinear, createChart, getColorByGroupType, getMainView };
|
|
@@ -2,7 +2,7 @@ import { lines } from "@antv/g-pattern";
|
|
|
2
2
|
import { applyAuxiliaryLineY, applyAxisX, applyAxisY, applyHighlightDate, applyScaleYLinear, createChart, getColorByGroupType, getMainView } from "./g2Helpers.js";
|
|
3
3
|
const Y_AXIS_FIELD = 'groupValue';
|
|
4
4
|
function renderG2BarChart(container, options) {
|
|
5
|
-
const { data, x, y, maxY, timeRange: _timeRange, themeColors, indicators = [], indicatorMap: _indicatorMap = {}, formatAxis, highlightDate = [], isDataTag = false, isLegend = true, isHorizontal = false, isHighlight
|
|
5
|
+
const { data, x, y, maxY, timeRange: _timeRange, themeColors, indicators = [], indicatorMap: _indicatorMap = {}, formatAxis, highlightDate = [], isDataTag = false, isLegend = true, isHorizontal = false, isHighlight = true, isCompare = false, legend, formatLabel, height = 300, tooltipRender, auxiliaryLineData = [], onNodeListChange, onChartRender } = options;
|
|
6
6
|
const colorOpts = {
|
|
7
7
|
themeColors,
|
|
8
8
|
primaryKey: y,
|
|
@@ -36,12 +36,22 @@ function renderG2BarChart(container, options) {
|
|
|
36
36
|
nice: true,
|
|
37
37
|
clamp: true
|
|
38
38
|
});
|
|
39
|
-
applyHighlightDate(view, x, data, highlightDate);
|
|
40
|
-
|
|
39
|
+
applyHighlightDate(view, x, data, highlightDate, isHighlight);
|
|
40
|
+
console.log('g2bar data:', data, y);
|
|
41
|
+
const interval = view.interval().encode('x', x).encode('y', y).encode('color', 'groupType').transform({
|
|
41
42
|
type: 'dodgeX',
|
|
42
43
|
padding: isHorizontal ? 0.2 : 0
|
|
43
|
-
})
|
|
44
|
-
|
|
44
|
+
});
|
|
45
|
+
interval.style({
|
|
46
|
+
columnWidthRatio: 0.6,
|
|
47
|
+
insetLeft: (_d, index, _data, _column)=>{
|
|
48
|
+
if (isCompare) return index % 2 === 0 ? 4 : 0;
|
|
49
|
+
return 4;
|
|
50
|
+
},
|
|
51
|
+
insetRight: (_d, index, _data, _column)=>{
|
|
52
|
+
if (isCompare) return index % 2 === 1 ? 4 : 0;
|
|
53
|
+
return 4;
|
|
54
|
+
},
|
|
45
55
|
fill: (datum)=>{
|
|
46
56
|
const groupType = String(datum.groupType ?? '');
|
|
47
57
|
if (groupType.includes('_compare')) return {
|
|
@@ -56,20 +66,12 @@ function renderG2BarChart(container, options) {
|
|
|
56
66
|
transform: 'rotate(-30deg)'
|
|
57
67
|
};
|
|
58
68
|
return getColorByGroupType(groupType, colorOpts);
|
|
59
|
-
}
|
|
60
|
-
stroke: 'transparent'
|
|
69
|
+
}
|
|
61
70
|
});
|
|
62
71
|
applyAxisX(view, {
|
|
63
|
-
title: false,
|
|
64
72
|
grid: false
|
|
65
73
|
});
|
|
66
74
|
applyAxisY(view, {
|
|
67
|
-
title: false,
|
|
68
|
-
grid: true,
|
|
69
|
-
gridLineDash: [
|
|
70
|
-
0,
|
|
71
|
-
0
|
|
72
|
-
],
|
|
73
75
|
labelFormatter: formatAxis
|
|
74
76
|
});
|
|
75
77
|
view.legend(false);
|
|
@@ -99,8 +101,11 @@ function renderG2BarChart(container, options) {
|
|
|
99
101
|
}) : null
|
|
100
102
|
].filter(Boolean)
|
|
101
103
|
});
|
|
102
|
-
if (tooltipRender)
|
|
104
|
+
if (tooltipRender) view.interaction('tooltip', {
|
|
103
105
|
shared: true,
|
|
106
|
+
crosshairsY: true,
|
|
107
|
+
wait: 100,
|
|
108
|
+
marker: false,
|
|
104
109
|
render: (_event, payload)=>{
|
|
105
110
|
const { title, items } = payload;
|
|
106
111
|
const lastIsChange = items.filter((item)=>item.isChange);
|
|
@@ -64,6 +64,15 @@ export interface RenderG2CombineChartOptions {
|
|
|
64
64
|
onChartRender?: (chartProps: {
|
|
65
65
|
layout: any;
|
|
66
66
|
}) => void;
|
|
67
|
+
/** 是否为分组柱状(影响 legend / tooltip 文案) */
|
|
68
|
+
isGroup?: boolean;
|
|
69
|
+
/** 图例项列表(用于 tooltip 取色与文案) */
|
|
70
|
+
legendItems?: Array<{
|
|
71
|
+
id: string;
|
|
72
|
+
[key: string]: any;
|
|
73
|
+
}>;
|
|
74
|
+
/** 当前指标 id(用于 tooltip 展示) */
|
|
75
|
+
indicatorId?: string;
|
|
67
76
|
}
|
|
68
77
|
/**
|
|
69
78
|
* 在容器上渲染 G2 柱状 + 折线组合图,返回 Chart 实例便于 destroy/更新
|
|
@@ -4,7 +4,7 @@ const Y_AXIS_FIELD = 'groupValue';
|
|
|
4
4
|
const BAR_Y_FIELD = 'barValue';
|
|
5
5
|
const LINE_Y_FIELD = 'lineValue';
|
|
6
6
|
function renderG2CombineChart(container, options) {
|
|
7
|
-
const { data, x, y, z: _z, maxY, themeColors, indicatorMap: _indicatorMap, formatAxis, formatLineAxis, isDataTag = false, isLegend: _isLegend = false, isCompare = false, formatLabel, highlightDate = [], height = 300, isHighlight = true, indicators = [], tooltipRender, onNodeListChange, lineColors, onChartRender } = options;
|
|
7
|
+
const { data, x, y, z: _z, maxY, themeColors, indicatorMap: _indicatorMap, formatAxis, formatLineAxis, isDataTag = false, isLegend: _isLegend = false, isCompare = false, formatLabel, highlightDate = [], height = 300, isHighlight = true, indicators = [], tooltipRender, onNodeListChange, lineColors, onChartRender, isGroup, legendItems = [], indicatorId } = options;
|
|
8
8
|
const chart = createChart({
|
|
9
9
|
container,
|
|
10
10
|
height,
|
|
@@ -36,13 +36,21 @@ function renderG2CombineChart(container, options) {
|
|
|
36
36
|
...item,
|
|
37
37
|
[BAR_Y_FIELD]: item[Y_AXIS_FIELD]
|
|
38
38
|
}));
|
|
39
|
-
const intervalMaxY = intervalData.reduce((max, item)=>
|
|
40
|
-
|
|
39
|
+
const intervalMaxY = intervalData.reduce((max, item)=>{
|
|
40
|
+
const key = isGroup ? "total" : BAR_Y_FIELD;
|
|
41
|
+
return Math.max(max, item[key]);
|
|
42
|
+
}, 0);
|
|
43
|
+
const interval = view.interval().data(intervalData).encode("x", x).encode("y", BAR_Y_FIELD).encode("color", "groupType").transform(isGroup ? {
|
|
44
|
+
type: 'stackY',
|
|
45
|
+
reverse: true
|
|
46
|
+
} : {
|
|
41
47
|
type: 'dodgeX'
|
|
42
48
|
}).style({
|
|
43
49
|
columnWidthRatio: 0.5,
|
|
44
50
|
fill: (datum)=>{
|
|
45
51
|
const groupType = String(datum.groupType ?? '');
|
|
52
|
+
const index = legendItems.findIndex((item)=>item.id === `${groupType}_${datum.isCombine}`);
|
|
53
|
+
if (isGroup) return themeColors[index % themeColors.length] ?? themeColors[0] ?? "#5B8FF9";
|
|
46
54
|
if (groupType.includes('_compare')) return {
|
|
47
55
|
image: lines({
|
|
48
56
|
backgroundColor: '#fff',
|
|
@@ -84,7 +92,20 @@ function renderG2CombineChart(container, options) {
|
|
|
84
92
|
});
|
|
85
93
|
console.log('tooltip:', barColor, isCompare);
|
|
86
94
|
interval.tooltip({
|
|
87
|
-
items: [
|
|
95
|
+
items: isGroup ? [
|
|
96
|
+
(datum)=>{
|
|
97
|
+
const groupType = String(datum.groupType ?? '');
|
|
98
|
+
const index = legendItems.findIndex((item)=>item.id === `${groupType}_${datum.isCombine}`);
|
|
99
|
+
return {
|
|
100
|
+
value: datum[Y_AXIS_FIELD],
|
|
101
|
+
name: datum['groupType'],
|
|
102
|
+
indicatorId,
|
|
103
|
+
channel: Y_AXIS_FIELD,
|
|
104
|
+
color: themeColors[index % themeColors.length] ?? themeColors[0] ?? "#5B8FF9",
|
|
105
|
+
percent: `${(100 * Number(datum.percent)).toFixed(2)}%`
|
|
106
|
+
};
|
|
107
|
+
}
|
|
108
|
+
].filter(Boolean) : [
|
|
88
109
|
(datum)=>datum.groupType.includes('_compare') ? false : {
|
|
89
110
|
value: datum[BAR_Y_FIELD],
|
|
90
111
|
name: datum['groupType'],
|
|
@@ -32,7 +32,7 @@ function renderG2GroupBarChart(container, options) {
|
|
|
32
32
|
nice: true,
|
|
33
33
|
clamp: true
|
|
34
34
|
});
|
|
35
|
-
|
|
35
|
+
applyHighlightDate(view, x, data, highlightDate, isHighlight);
|
|
36
36
|
const interval = view.interval().encode('x', x).encode('y', y).encode('color', 'groupType').transform({
|
|
37
37
|
type: 'stackY',
|
|
38
38
|
reverse: true
|
|
@@ -53,7 +53,8 @@ function renderG2GroupBarChart(container, options) {
|
|
|
53
53
|
transform: 'rotate(-30deg)'
|
|
54
54
|
};
|
|
55
55
|
return themeColors[index % themeColors.length] ?? themeColors[0] ?? "#5B8FF9";
|
|
56
|
-
}
|
|
56
|
+
},
|
|
57
|
+
stroke: 'transparent'
|
|
57
58
|
});
|
|
58
59
|
applyAxisX(view, {
|
|
59
60
|
title: false,
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { applyAuxiliaryLineY, applyAxisX, applyAxisY, applyScaleYLinear, createChart, getColorByGroupType, getMainView } from "./g2Helpers.js";
|
|
1
|
+
import { applyAuxiliaryLineY, applyAxisX, applyAxisY, applyHighlightDate, applyScaleYLinear, createChart, getColorByGroupType, getMainView } from "./g2Helpers.js";
|
|
2
2
|
const Y_AXIS_FIELD = 'groupValue';
|
|
3
3
|
function renderG2LineChart(container, options) {
|
|
4
4
|
const { data, x, y, minY, maxY, timeRange: _timeRange, themeColors, indicators = [], indicatorMap: _indicatorMap = {}, formatAxis, highlightDate = [], auxiliaryLineData = [], isDataTag = false, isLegend = true, isHighlight = true, formatLabel, height = 300, legendLength: _legendLength, legendSize: _legendSize, tooltipRender, onNodeListChange, onChartRender } = options;
|
|
@@ -29,6 +29,7 @@ function renderG2LineChart(container, options) {
|
|
|
29
29
|
nice: true,
|
|
30
30
|
clamp: true
|
|
31
31
|
});
|
|
32
|
+
applyHighlightDate(view, x, data, highlightDate, isHighlight);
|
|
32
33
|
console.log('g2linets:', x, Y_AXIS_FIELD, data);
|
|
33
34
|
const line = view.line().data(data.filter((item)=>!item.groupType.includes('_compare'))).encode('x', x).encode('y', Y_AXIS_FIELD).encode('color', 'groupType').style({
|
|
34
35
|
lineWidth: 2,
|
|
@@ -43,23 +44,9 @@ function renderG2LineChart(container, options) {
|
|
|
43
44
|
stroke: (_datum, index)=>themeColors[index] ?? themeColors[0]
|
|
44
45
|
});
|
|
45
46
|
applyAxisX(view, {
|
|
46
|
-
|
|
47
|
-
grid: true,
|
|
48
|
-
gridStroke: '#333',
|
|
49
|
-
gridLineWidth: 50,
|
|
50
|
-
gridLineDash: [
|
|
51
|
-
1000
|
|
52
|
-
],
|
|
53
|
-
gridFilter: highlightDate.length > 0 && isHighlight ? (val)=>highlightDate.includes(val?.label) : ()=>false
|
|
47
|
+
grid: false
|
|
54
48
|
});
|
|
55
49
|
applyAxisY(view, {
|
|
56
|
-
title: false,
|
|
57
|
-
grid: true,
|
|
58
|
-
gridStrokeOpacity: 0.2,
|
|
59
|
-
gridLineDash: [
|
|
60
|
-
0,
|
|
61
|
-
0
|
|
62
|
-
],
|
|
63
50
|
labelFormatter: formatAxis
|
|
64
51
|
});
|
|
65
52
|
line.tooltip({
|
|
@@ -94,9 +81,8 @@ function renderG2LineChart(container, options) {
|
|
|
94
81
|
})
|
|
95
82
|
]
|
|
96
83
|
});
|
|
97
|
-
if (tooltipRender)
|
|
84
|
+
if (tooltipRender) view.interaction('tooltip', {
|
|
98
85
|
shared: true,
|
|
99
|
-
crosshairsY: true,
|
|
100
86
|
marker: false,
|
|
101
87
|
render: (_event, payload)=>{
|
|
102
88
|
const { title, items } = payload;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@publishfx/publish-chart",
|
|
3
|
-
"version": "2.1.
|
|
3
|
+
"version": "2.1.2",
|
|
4
4
|
"description": "A React chart component library for the Publish platform, including BarChart, LineChart, BarLineChart and other visualization components",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"keywords": [
|