@publishfx/publish-chart 2.1.22 → 2.1.23

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.
@@ -122,14 +122,7 @@ class DataAdapter {
122
122
  dv.transform({
123
123
  type: 'map',
124
124
  callback: (row)=>{
125
- row[config.y] = '' !== row[config.y] ? +row[config.y] : '-';
126
- return row;
127
- }
128
- });
129
- tdv.transform({
130
- type: 'map',
131
- callback: (row)=>{
132
- row[config.y] = '' !== row[config.y] ? +row[config.y] : '-';
125
+ row[config.y] = '' !== row[config.y] ? +row[config.y] : null;
133
126
  return row;
134
127
  }
135
128
  });
@@ -145,6 +138,20 @@ class DataAdapter {
145
138
  return row.isCombine;
146
139
  }
147
140
  });
141
+ tdv.transform({
142
+ type: 'map',
143
+ callback: (row)=>{
144
+ row[config.y] = '' !== row[config.y] ? +row[config.y] : null;
145
+ return row;
146
+ }
147
+ });
148
+ combinedv.transform({
149
+ type: 'map',
150
+ callback: (row)=>{
151
+ row[config.y] = '' !== row[config.y] ? +row[config.y] : null;
152
+ return row;
153
+ }
154
+ });
148
155
  if (config.isDescend) tdv.transform({
149
156
  type: 'sort',
150
157
  callback (a, b) {
@@ -123,13 +123,9 @@ const G2CombineChart = ({ height = 300, data, x = "", y = "", z = "", indicatorM
123
123
  safeIndicatorMap,
124
124
  y
125
125
  ]);
126
- const formatLineAxis = useCallback((val)=>{
127
- const indicatorId = indicators?.length > 2 ? "" : safeZ;
128
- return getAxisFormat(val, safeIndicatorMap, indicatorId);
129
- }, [
126
+ const formatLineAxis = useCallback((val)=>getAxisFormat(val, safeIndicatorMap, safeZ), [
130
127
  safeIndicatorMap,
131
- safeZ,
132
- indicators
128
+ safeZ
133
129
  ]);
134
130
  useEffect(()=>{
135
131
  if (!transformedData.length) {
@@ -182,7 +178,7 @@ const G2CombineChart = ({ height = 300, data, x = "", y = "", z = "", indicatorM
182
178
  groupName: key,
183
179
  isCombine: false,
184
180
  groupType: groupType,
185
- groupValue: "",
181
+ groupValue: null,
186
182
  total: 0,
187
183
  percent: ""
188
184
  });
@@ -203,7 +203,6 @@ const G2LineChart = ({ height = 300, data, x = "", y = "", z = "", indicatorMap,
203
203
  };
204
204
  }, [
205
205
  filteredData,
206
- height,
207
206
  x,
208
207
  y,
209
208
  safeLegend,
@@ -155,11 +155,13 @@ function applyAuxiliaryLineY(view, lines, options = {}) {
155
155
  ]).encode('y', auxLine.value).style('stroke', stroke).style('strokeOpacity', strokeOpacity).style('lineWidth', 1).style('shadowColor', 'transparent').animate(false).scale('y', {
156
156
  key: auxLine?.axis === 'right' ? 'line' : 'main'
157
157
  }).axis('x', false).label({
158
+ opacity: 1,
158
159
  dx: 0,
159
160
  dy: 0,
160
161
  text: splitTextToMultiline(auxLine.name, labelMaxLength, '<br />'),
161
162
  position: auxLine?.axis === 'right' ? 'bottom-right' : 'bottom-left',
162
- render: (text)=>`<div style="background-color: transparent; padding: 5px; border-radius: 5px;font-size: 14px;position: absolute;left: ${auxLine?.axis === 'right' ? '-105px' : '0px'}; top: -24px; width: 100px;color: ${stroke}; font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;">${text}</div>`
163
+ render: (text)=>`<div style="background-color: transparent; padding: 5px; border-radius: 5px;font-size: 12px;position: absolute;left: ${auxLine?.axis === 'right' ? '-105px' : '0px'}; top: ${auxLine?.name?.length > 5 ? '-38px' : '-24px'} ; width: 100px; line-height: 14px; color: ${stroke}; text-shadow: 0 0 10px red;
164
+ font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;">${text}</div>`
163
165
  });
164
166
  });
165
167
  }
@@ -114,18 +114,11 @@ function renderG2BarChart(container, options) {
114
114
  }) : null
115
115
  ].filter(Boolean)
116
116
  });
117
- const tooltipBounding = {
118
- x: 0,
119
- y: 0,
120
- width: container.clientWidth || container.offsetWidth,
121
- height: container.clientHeight || container.offsetHeight
122
- };
123
117
  if (tooltipRender) view.interaction('tooltip', {
124
118
  shared: true,
125
119
  crosshairsY: true,
126
120
  wait: 100,
127
121
  marker: false,
128
- bounding: tooltipBounding,
129
122
  render: (_event, payload)=>{
130
123
  const { title, items } = payload;
131
124
  const lastIsChange = items.filter((item)=>item.isChange);
@@ -137,9 +130,6 @@ function renderG2BarChart(container, options) {
137
130
  return tooltipRender(title, safeItems ?? []) ?? null;
138
131
  }
139
132
  });
140
- else view.interaction('tooltip', {
141
- bounding: tooltipBounding
142
- });
143
133
  applyAuxiliaryLineY(view, auxiliaryLineData, {
144
134
  labelMaxLength: 5
145
135
  });
@@ -104,7 +104,7 @@ function renderG2CombineChart(container, options) {
104
104
  const groupType = String(datum.groupType ?? '');
105
105
  const index = legendItems.findIndex((item)=>item.id === `${groupType}_${datum.isCombine}`);
106
106
  return {
107
- value: datum[Y_AXIS_FIELD],
107
+ value: datum[BAR_Y_FIELD],
108
108
  name: datum['groupType'],
109
109
  indicatorId,
110
110
  channel: Y_AXIS_FIELD,
@@ -253,49 +253,40 @@ function renderG2CombineChart(container, options) {
253
253
  } : false
254
254
  ].filter(Boolean)
255
255
  });
256
- if (tooltipRender) {
257
- const tooltipBounding = {
258
- x: 0,
259
- y: 0,
260
- width: container.clientWidth || container.offsetWidth,
261
- height: container.clientHeight || container.offsetHeight
262
- };
263
- view.interaction('tooltip', {
264
- shared: true,
265
- crosshairsY: true,
266
- marker: false,
267
- bounding: tooltipBounding,
268
- render: (_event, payload)=>{
269
- const { title, items } = payload;
270
- let safeTitle = title.replace(/,.*$/, '');
271
- const baseItems = items.filter((item)=>item.hasOwnProperty('isCombine') && !item.isCombine);
272
- const safeItems = fillMissingIndicator(baseItems, safeTitle, isCompare, isGroup);
273
- const combineItems = items.filter((item)=>item.hasOwnProperty('isCombine') && item.isCombine);
274
- const safeCombineItems = fillMissingIndicator(combineItems, safeTitle, isCompare, isGroup);
275
- const indicatorOrder = new Map(indicators.map((id, i)=>[
276
- id,
277
- i
278
- ]));
279
- const sortedCombineItems = [
280
- ...safeCombineItems
281
- ].sort((a, b)=>{
282
- const orderA = indicatorOrder.get(a.indicatorId) ?? 1 / 0;
283
- const orderB = indicatorOrder.get(b.indicatorId) ?? 1 / 0;
284
- if (orderA !== orderB) return orderA - orderB;
285
- const typeRank = (item)=>{
286
- if (item.isChange) return 2;
287
- if ('compareline' === item.tipType) return 1;
288
- return 0;
289
- };
290
- return typeRank(a) - typeRank(b);
291
- });
292
- return tooltipRender(safeTitle, [
293
- ...safeItems,
294
- ...sortedCombineItems
295
- ]) ?? null;
296
- }
297
- });
298
- }
256
+ if (tooltipRender) view.interaction('tooltip', {
257
+ shared: true,
258
+ crosshairsY: true,
259
+ marker: false,
260
+ render: (_event, payload)=>{
261
+ const { title, items } = payload;
262
+ let safeTitle = title.replace(/,.*$/, '');
263
+ const baseItems = items.filter((item)=>item.hasOwnProperty('isCombine') && !item.isCombine);
264
+ const safeItems = fillMissingIndicator(baseItems, safeTitle, isCompare, isGroup);
265
+ const combineItems = items.filter((item)=>item.hasOwnProperty('isCombine') && item.isCombine);
266
+ const safeCombineItems = fillMissingIndicator(combineItems, safeTitle, isCompare, isGroup);
267
+ const indicatorOrder = new Map(indicators.map((id, i)=>[
268
+ id,
269
+ i
270
+ ]));
271
+ const sortedCombineItems = [
272
+ ...safeCombineItems
273
+ ].sort((a, b)=>{
274
+ const orderA = indicatorOrder.get(a.indicatorId) ?? 1 / 0;
275
+ const orderB = indicatorOrder.get(b.indicatorId) ?? 1 / 0;
276
+ if (orderA !== orderB) return orderA - orderB;
277
+ const typeRank = (item)=>{
278
+ if (item.isChange) return 2;
279
+ if ('compareline' === item.tipType) return 1;
280
+ return 0;
281
+ };
282
+ return typeRank(a) - typeRank(b);
283
+ });
284
+ return tooltipRender(safeTitle, [
285
+ ...safeItems,
286
+ ...sortedCombineItems
287
+ ]) ?? null;
288
+ }
289
+ });
299
290
  view.legend(false);
300
291
  view.interaction('poptip', {
301
292
  offsetY: -20,
@@ -79,16 +79,9 @@ function renderG2LineChart(container, options) {
79
79
  })
80
80
  ]
81
81
  });
82
- const tooltipBounding = {
83
- x: 0,
84
- y: 0,
85
- width: container.clientWidth || container.offsetWidth,
86
- height: container.clientHeight || container.offsetHeight
87
- };
88
82
  if (tooltipRender) view.interaction('tooltip', {
89
83
  shared: true,
90
84
  marker: false,
91
- bounding: tooltipBounding,
92
85
  render: (_event, payload)=>{
93
86
  const { title, items } = payload;
94
87
  if (indicators.length) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@publishfx/publish-chart",
3
- "version": "2.1.22",
3
+ "version": "2.1.23",
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": [