@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 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, indicatorMap, indicators, legend, config, nodeSetting);
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 = "groupType" !== legend ? legend || y : y;
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, "barLine", {
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 yValues = transformedData.filter((item)=>"-" !== item[safeY] && void 0 !== item[safeY] && null !== item[safeY]).map((item)=>Number(item[safeY]) || 0);
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 color = 0 === colorIndex ? themeColors[colorIndex] : lineColors[colorIndex - 1];
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
- console.log("safeItems:", safeItems);
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
- columnWidthRatio: 0.65,
163
- fill: '#CCCCCC',
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: _isHighlight = true, isCompare = false, legend, formatLabel, height = 300, tooltipRender, auxiliaryLineData = [], onNodeListChange, onChartRender } = options;
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
- const interval = view.interval().encode('x', x).encode('y', y).encode('color', 'groupType').encode('series', 'groupType').transform({
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
- }).style({
44
- columnWidthRatio: 0.5,
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) interval.interaction('tooltip', {
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)=>Math.max(max, item[BAR_Y_FIELD]), 0);
40
- const interval = view.interval().data(intervalData).encode("x", x).encode("y", BAR_Y_FIELD).encode("color", "groupType").transform({
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
- if (isHighlight) applyHighlightDate(view, x, data, highlightDate);
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
- title: false,
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) line.interaction('tooltip', {
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;
@@ -98,6 +98,8 @@ export interface BaseChartProps {
98
98
  auxiliaryLineData?: AuxiliaryLineData[];
99
99
  /** 高亮日期数组 */
100
100
  highlightDate?: string[];
101
+ /** 是否为分组柱状(组合图等场景) */
102
+ isGroup?: boolean;
101
103
  }
102
104
  /**
103
105
  * 业务组件 Props(可选,通过 Context 注入)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@publishfx/publish-chart",
3
- "version": "2.1.0",
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": [