@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 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
- "#FE765E",
58
- "#945FB9",
59
- "#FF99C3"
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.forEach((item)=>{
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 + 1 : 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 auxValues = auxiliaryLineData?.length ? auxiliaryLineData.map((item)=>item.value) : [];
44
- const maxAux = auxValues.length ? Math.max(...auxValues) : 0;
45
- const finalIntervalMax = Math.max(intervalMaxY, maxAux);
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, maxAux);
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 groupTypeSet = new Set(lineData.map((item)=>item.groupType));
170
- const groupTypeArr = [
171
- ...groupTypeSet
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 groupTypeSet = new Set(lineData.map((item)=>item.groupType));
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: lineColors[index] || lineColors[0],
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
- ...combineItems
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(title, [
299
- ...baseItems,
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.8",
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": [