@publishfx/publish-chart 2.1.8 → 2.1.10
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/components/g2/base/G2CombineChart.js +3 -3
- package/dist/components/g2/base/g2Helpers.js +2 -2
- package/dist/components/g2/base/g2bar.js +3 -0
- package/dist/components/g2/base/g2combine.js +47 -28
- package/dist/components/g2/base/g2line.js +6 -0
- package/dist/components/g2/shared/G2CompareTooltip.js +1 -0
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,16 @@
|
|
|
1
|
+
**2.1.10** fix(chart): 修复剩余数据全为0时的Y轴异常问题
|
|
2
|
+
- 2026-03-04T17:34:02+08:00 [fix(chart): 修复剩余数据全为0时的Y轴异常问题](http://lf.git.oa.mt/publish_platform/web/publish/commit/0d64328b1c38b71ad0289579592870fa20bc37b1)
|
|
3
|
+
- 2026-03-04T17:13:55+08:00 [fix(chart): 辅助线分左右,分别影响主、副轴的刻度尺](http://lf.git.oa.mt/publish_platform/web/publish/commit/0c91a39b4fe8ff1b13999766e8f6f90dce85f37e)
|
|
4
|
+
|
|
5
|
+
**2.1.9** feat(chart): 组合图折线色彩设置
|
|
6
|
+
- 2026-03-04T16:45:43+08:00 [feat(chart): 组合图折线色彩设置](http://lf.git.oa.mt/publish_platform/web/publish/commit/2d456a5bd13fbed534b125a71955e8d18f62bbfc)
|
|
7
|
+
- 2026-03-04T16:42:51+08:00 [feat(chart): 组合图副轴最大值逻辑复原](http://lf.git.oa.mt/publish_platform/web/publish/commit/6a1e758f64f6e7ef202c8089afecdd49580cf133)
|
|
8
|
+
- 2026-03-04T16:28:16+08:00 [fix(chart): 解决缺数据场景下的tooltip问题](http://lf.git.oa.mt/publish_platform/web/publish/commit/163c2e4e4ca33c92179a505b18f8f4e03d4d5229)
|
|
9
|
+
- 2026-03-04T16:18:04+08:00 [feat(chart): 固定组合图副轴最大值](http://lf.git.oa.mt/publish_platform/web/publish/commit/1dde15ae135b27676db7d57940dee63fb0c7d4cb)
|
|
10
|
+
- 2026-03-04T16:06:17+08:00 [fix(chart): 修复空数据导致的tooltip异常问题](http://lf.git.oa.mt/publish_platform/web/publish/commit/59ddceb66f4bf9dc893cf68eb2be15464a53303c)
|
|
11
|
+
- 2026-03-04T15:42:22+08:00 [feat(chart): 数据标签加粗](http://lf.git.oa.mt/publish_platform/web/publish/commit/3ab4756a4fdea0979e56de01e5e9581bed568625)
|
|
12
|
+
- 2026-03-04T15:12:27+08:00 [feat(chart): 组合图颜色](http://lf.git.oa.mt/publish_platform/web/publish/commit/d448d5203de936018e95d8bcc301aaa877a64666)
|
|
13
|
+
|
|
1
14
|
**2.1.8** feat(chart): 柱状、折线、组合图的节点单独传递
|
|
2
15
|
- 2026-03-04T11:59:34+08:00 [feat(chart): 柱状、折线、组合图的节点单独传递](http://lf.git.oa.mt/publish_platform/web/publish/commit/5ef7b6c79b51438f7ae49edce74e060e5ffbd595)
|
|
3
16
|
- 2026-03-04T11:45:15+08:00 [fix(chart): 将node信息单独传递](http://lf.git.oa.mt/publish_platform/web/publish/commit/20b4209876bd464ff63674480eb3a308e7007a02)
|
|
@@ -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,
|
|
@@ -214,7 +214,7 @@ function applyHighlightDate(view, x, data, highlightDate, isHighlight) {
|
|
|
214
214
|
}
|
|
215
215
|
function applyNodeData(view, nodeData, x, y) {
|
|
216
216
|
const nodeList = [];
|
|
217
|
-
nodeData
|
|
217
|
+
nodeData?.forEach((item)=>{
|
|
218
218
|
view.shape().data([
|
|
219
219
|
{
|
|
220
220
|
[x]: item[x],
|
|
@@ -263,7 +263,7 @@ function applyNodeData(view, nodeData, x, y) {
|
|
|
263
263
|
return nodeList;
|
|
264
264
|
}
|
|
265
265
|
function adjustDomainMax(domainMin, domainMax) {
|
|
266
|
-
return domainMax === domainMin ? domainMin > 0 ? 1.1 * domainMax : domainMax +
|
|
266
|
+
return domainMax === domainMin ? domainMin > 0 ? 1.1 * domainMax : domainMax + 1000 : domainMax;
|
|
267
267
|
}
|
|
268
268
|
const sortByIndicators = (arr, indicators)=>arr.sort((a, b)=>{
|
|
269
269
|
const baseA = a.split('_')[0];
|
|
@@ -151,6 +151,9 @@ function renderG2BarChart(container, options) {
|
|
|
151
151
|
onNodeListChange?.(nodeList);
|
|
152
152
|
}
|
|
153
153
|
if (isDataTag && formatLabel) interval.label({
|
|
154
|
+
style: {
|
|
155
|
+
fontWeight: 600
|
|
156
|
+
},
|
|
154
157
|
text: (d)=>formatLabel(d),
|
|
155
158
|
position: isHorizontal ? 'right' : 'top',
|
|
156
159
|
offset: 0,
|
|
@@ -40,9 +40,11 @@ function renderG2CombineChart(container, options) {
|
|
|
40
40
|
const key = isGroup ? "total" : BAR_Y_FIELD;
|
|
41
41
|
return Math.max(max, item[key]);
|
|
42
42
|
}, 0);
|
|
43
|
-
const
|
|
44
|
-
const
|
|
45
|
-
const
|
|
43
|
+
const auxLeftValues = auxiliaryLineData?.length ? auxiliaryLineData.filter((item)=>'left' === item.axis).map((item)=>item.value) : [];
|
|
44
|
+
const maxAuxLeft = auxLeftValues.length ? Math.max(...auxLeftValues) : 0;
|
|
45
|
+
const auxRightValues = auxiliaryLineData?.length ? auxiliaryLineData.filter((item)=>'right' === item.axis).map((item)=>item.value) : [];
|
|
46
|
+
const maxAuxRight = auxRightValues.length ? Math.max(...auxRightValues) : 0;
|
|
47
|
+
const finalIntervalMax = Math.max(intervalMaxY, maxAuxLeft);
|
|
46
48
|
const interval = view.interval().data(intervalData).encode("x", x).encode("y", BAR_Y_FIELD).encode("color", "groupType").transform(isGroup ? {
|
|
47
49
|
type: 'stackY',
|
|
48
50
|
reverse: true
|
|
@@ -128,7 +130,8 @@ function renderG2CombineChart(container, options) {
|
|
|
128
130
|
indicatorId: datum['groupType'],
|
|
129
131
|
channel: Y_AXIS_FIELD,
|
|
130
132
|
color: barColor || 'transparent',
|
|
131
|
-
isCombine: false
|
|
133
|
+
isCombine: false,
|
|
134
|
+
x: datum[x]
|
|
132
135
|
},
|
|
133
136
|
isCompare ? (datum)=>datum.groupType.includes('_compare') ? {
|
|
134
137
|
value: datum[BAR_Y_FIELD],
|
|
@@ -149,12 +152,12 @@ function renderG2CombineChart(container, options) {
|
|
|
149
152
|
} : false : false
|
|
150
153
|
].filter(Boolean)
|
|
151
154
|
});
|
|
152
|
-
const lineData = data.filter((item)=>item.isCombine && !item.groupType.includes('_compare')).map((item)=>({
|
|
155
|
+
const lineData = data.filter((item)=>item.isCombine && !item.groupType.includes('_compare')).filter((item)=>'' !== item[Y_AXIS_FIELD]).map((item)=>({
|
|
153
156
|
...item,
|
|
154
157
|
[LINE_Y_FIELD]: item[Y_AXIS_FIELD]
|
|
155
158
|
}));
|
|
156
159
|
console.log('renderG2CombineChart: line data:', lineData);
|
|
157
|
-
const compareLineData = data.filter((item)=>item.isCombine && item.groupType.includes('_compare')).map((item)=>({
|
|
160
|
+
const compareLineData = data.filter((item)=>item.isCombine && item.groupType.includes('_compare')).filter((item)=>'' !== item[Y_AXIS_FIELD]).map((item)=>({
|
|
158
161
|
...item,
|
|
159
162
|
[LINE_Y_FIELD]: item[Y_AXIS_FIELD]
|
|
160
163
|
}));
|
|
@@ -162,37 +165,29 @@ function renderG2CombineChart(container, options) {
|
|
|
162
165
|
const lineMaxY = lineData.reduce((max, item)=>Math.max(max, item[LINE_Y_FIELD]), 0);
|
|
163
166
|
const compareLineMaxY = compareLineData.reduce((max, item)=>Math.max(max, item[LINE_Y_FIELD]), 0);
|
|
164
167
|
const lineFinalMaxY = Math.max(lineMaxY, compareLineMaxY) || 1;
|
|
165
|
-
const finalLineMax = Math.max(lineFinalMaxY,
|
|
168
|
+
const finalLineMax = Math.max(lineFinalMaxY, maxAuxRight);
|
|
169
|
+
console.log('lineData:', lineData);
|
|
166
170
|
const line = view.line().data(lineData).encode("x", x).encode("y", LINE_Y_FIELD).encode('color', 'groupType').style({
|
|
167
171
|
lineWidth: 2,
|
|
168
172
|
stroke: (datum)=>{
|
|
169
|
-
const
|
|
170
|
-
const
|
|
171
|
-
|
|
172
|
-
];
|
|
173
|
-
const groupType = String(datum[0]?.groupType ?? '');
|
|
174
|
-
const index = groupTypeArr.findIndex((item)=>item === groupType);
|
|
175
|
-
const color = lineColors[index] || lineColors[0];
|
|
176
|
-
return color;
|
|
173
|
+
const currentDatum = datum[0];
|
|
174
|
+
const item = legendItems.find((item)=>item.id === `${currentDatum?.groupType}_${currentDatum?.isCombine}`);
|
|
175
|
+
return item?.color || lineColors[0];
|
|
177
176
|
}
|
|
178
177
|
});
|
|
179
178
|
line.tooltip({
|
|
180
179
|
items: [
|
|
181
180
|
(datum)=>{
|
|
182
|
-
const
|
|
183
|
-
const groupTypeArr = [
|
|
184
|
-
...groupTypeSet
|
|
185
|
-
];
|
|
186
|
-
const groupType = String(datum?.groupType ?? '');
|
|
187
|
-
const index = groupTypeArr.findIndex((item)=>item === groupType);
|
|
181
|
+
const item = legendItems.find((item)=>item.id === `${datum?.groupType}_${datum?.isCombine}`);
|
|
188
182
|
return {
|
|
189
183
|
value: datum[LINE_Y_FIELD],
|
|
190
184
|
name: getIndicatorCompareName(_indicatorMap, datum['groupType']),
|
|
191
185
|
indicatorId: datum['groupType'],
|
|
192
186
|
channel: Y_AXIS_FIELD,
|
|
193
|
-
color:
|
|
187
|
+
color: item?.color || lineColors[0],
|
|
194
188
|
isCombine: true,
|
|
195
|
-
tipType: 'line'
|
|
189
|
+
tipType: 'line',
|
|
190
|
+
x: datum[x]
|
|
196
191
|
};
|
|
197
192
|
}
|
|
198
193
|
]
|
|
@@ -257,7 +252,8 @@ function renderG2CombineChart(container, options) {
|
|
|
257
252
|
channel: Y_AXIS_FIELD,
|
|
258
253
|
color: lineColors[indicators.slice(1).indexOf(String(datum['groupType'])) ?? 0] || 'transparent',
|
|
259
254
|
isCombine: true,
|
|
260
|
-
tipType: 'compareline'
|
|
255
|
+
tipType: 'compareline',
|
|
256
|
+
x: datum[x]
|
|
261
257
|
} : false,
|
|
262
258
|
(datum)=>datum.groupType.includes('_compare') ? {
|
|
263
259
|
name: datum['groupType'].replace('_compare', '_change'),
|
|
@@ -266,7 +262,8 @@ function renderG2CombineChart(container, options) {
|
|
|
266
262
|
value: datum?.change,
|
|
267
263
|
isChange: true,
|
|
268
264
|
isCombine: true,
|
|
269
|
-
tipType: 'compareline'
|
|
265
|
+
tipType: 'compareline',
|
|
266
|
+
x: datum[x]
|
|
270
267
|
} : false
|
|
271
268
|
].filter(Boolean)
|
|
272
269
|
});
|
|
@@ -276,14 +273,30 @@ function renderG2CombineChart(container, options) {
|
|
|
276
273
|
marker: false,
|
|
277
274
|
render: (event, payload)=>{
|
|
278
275
|
const { title, items } = payload;
|
|
276
|
+
console.log('tooltipRender:', title, items);
|
|
277
|
+
let safeTitle = title.replace(/,.*$/, '');
|
|
279
278
|
const baseItems = items.filter((item)=>!item.isCombine);
|
|
279
|
+
const safeItems = baseItems.map((item)=>{
|
|
280
|
+
if (item.x !== safeTitle) return {
|
|
281
|
+
...item,
|
|
282
|
+
value: '-'
|
|
283
|
+
};
|
|
284
|
+
return item;
|
|
285
|
+
});
|
|
280
286
|
const combineItems = items.filter((item)=>item.isCombine);
|
|
287
|
+
const safeCombineItems = combineItems.map((item)=>{
|
|
288
|
+
if (item.x !== safeTitle) return {
|
|
289
|
+
...item,
|
|
290
|
+
value: '-'
|
|
291
|
+
};
|
|
292
|
+
return item;
|
|
293
|
+
});
|
|
281
294
|
const indicatorOrder = new Map(indicators.map((id, i)=>[
|
|
282
295
|
id,
|
|
283
296
|
i
|
|
284
297
|
]));
|
|
285
298
|
const sortedCombineItems = [
|
|
286
|
-
...
|
|
299
|
+
...safeCombineItems
|
|
287
300
|
].sort((a, b)=>{
|
|
288
301
|
const orderA = indicatorOrder.get(a.indicatorId) ?? 1 / 0;
|
|
289
302
|
const orderB = indicatorOrder.get(b.indicatorId) ?? 1 / 0;
|
|
@@ -295,8 +308,8 @@ function renderG2CombineChart(container, options) {
|
|
|
295
308
|
};
|
|
296
309
|
return typeRank(a) - typeRank(b);
|
|
297
310
|
});
|
|
298
|
-
const content = tooltipRender(
|
|
299
|
-
...
|
|
311
|
+
const content = tooltipRender(safeTitle, [
|
|
312
|
+
...safeItems,
|
|
300
313
|
...sortedCombineItems
|
|
301
314
|
]) ?? null;
|
|
302
315
|
if (content) {
|
|
@@ -375,6 +388,9 @@ function renderG2CombineChart(container, options) {
|
|
|
375
388
|
dy: -16,
|
|
376
389
|
dx: -10,
|
|
377
390
|
offset: 0,
|
|
391
|
+
style: {
|
|
392
|
+
fontWeight: 600
|
|
393
|
+
},
|
|
378
394
|
text: (d)=>{
|
|
379
395
|
if (!isGroup) return formatLabel(d);
|
|
380
396
|
if (lastItemsInEachStack.has(d)) return formatLabel(d);
|
|
@@ -386,6 +402,9 @@ function renderG2CombineChart(container, options) {
|
|
|
386
402
|
dy: -10,
|
|
387
403
|
dx: 10,
|
|
388
404
|
offset: 0,
|
|
405
|
+
style: {
|
|
406
|
+
fontWeight: 600
|
|
407
|
+
},
|
|
389
408
|
text: (d)=>formatLabel(d)
|
|
390
409
|
});
|
|
391
410
|
view.labelTransform([
|
|
@@ -139,12 +139,18 @@ function renderG2LineChart(container, options) {
|
|
|
139
139
|
dy: -10,
|
|
140
140
|
dx: -10,
|
|
141
141
|
offset: 0,
|
|
142
|
+
style: {
|
|
143
|
+
fontWeight: 600
|
|
144
|
+
},
|
|
142
145
|
text: (d)=>formatLabel(d)
|
|
143
146
|
});
|
|
144
147
|
compareLine.label({
|
|
145
148
|
dy: -10,
|
|
146
149
|
dx: -10,
|
|
147
150
|
offset: 0,
|
|
151
|
+
style: {
|
|
152
|
+
fontWeight: 600
|
|
153
|
+
},
|
|
148
154
|
text: (d)=>formatLabel(d)
|
|
149
155
|
});
|
|
150
156
|
view.labelTransform([
|
|
@@ -4,6 +4,7 @@ import { CompareChange } from "@publishfx/publish-components";
|
|
|
4
4
|
import { getIndicatorCompareName } from "../../../utils/indicatorHelpers.js";
|
|
5
5
|
const G2CompareTooltip = ({ isGroupBar = false, title, items, safeIndicatorMap, formatter, safeLegend, auxiliaryLineData })=>{
|
|
6
6
|
let auxiIndicatorId = "";
|
|
7
|
+
console.log('G2CompareTooltip:', items);
|
|
7
8
|
const uniqueColors = [];
|
|
8
9
|
return /*#__PURE__*/ jsxs("div", {
|
|
9
10
|
style: {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@publishfx/publish-chart",
|
|
3
|
-
"version": "2.1.
|
|
3
|
+
"version": "2.1.10",
|
|
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": [
|