@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.
- package/dist/adapters/DataAdapter.js +15 -8
- package/dist/components/g2/base/G2CombineChart.js +3 -7
- package/dist/components/g2/base/G2LineChart.js +0 -1
- package/dist/components/g2/base/g2Helpers.js +3 -1
- package/dist/components/g2/base/g2bar.js +0 -10
- package/dist/components/g2/base/g2combine.js +35 -44
- package/dist/components/g2/base/g2line.js +0 -7
- package/package.json +1 -1
|
@@ -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
|
});
|
|
@@ -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:
|
|
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[
|
|
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
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
const
|
|
275
|
-
const
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
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.
|
|
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": [
|