@publishfx/publish-chart 2.1.11 → 2.1.13
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.
|
@@ -145,6 +145,12 @@ class DataAdapter {
|
|
|
145
145
|
}
|
|
146
146
|
});
|
|
147
147
|
console.log('tdv:', tdv.rows);
|
|
148
|
+
tdv.transform({
|
|
149
|
+
type: 'filter',
|
|
150
|
+
callback (row) {
|
|
151
|
+
return !row[config.y] || '-' !== row[config.y];
|
|
152
|
+
}
|
|
153
|
+
});
|
|
148
154
|
console.log('tdv:', tdv.rows);
|
|
149
155
|
if (config.isDescend) tdv.transform({
|
|
150
156
|
type: 'sort',
|
|
@@ -61,7 +61,7 @@ const lineColors = [
|
|
|
61
61
|
const G2CombineChart = ({ height = 300, data, x = "", y = "", z = "", indicatorMap, onChartClick, legend = "", config, nodeSetting = {
|
|
62
62
|
showType: 0,
|
|
63
63
|
type: []
|
|
64
|
-
}, indicators = [], auxiliaryLineData, highlightDate, timeRange, isGroup })=>{
|
|
64
|
+
}, indicators = [], auxiliaryLineData, highlightDate, timeRange, isGroup, isTooltipContent = false })=>{
|
|
65
65
|
const { formatter, dataTransform, config: contextConfig } = useChartContext();
|
|
66
66
|
const tooltipContainerRef = useG2TooltipContainer();
|
|
67
67
|
const isGroupRef = useRef(isGroup);
|
|
@@ -177,7 +177,7 @@ const G2CombineChart = ({ height = 300, data, x = "", y = "", z = "", indicatorM
|
|
|
177
177
|
if (!activeIds.length) return leftData;
|
|
178
178
|
const result = leftData.filter((d)=>d.groupType ? activeIds.includes(String(d.groupType.replace("_compare", "") + "_" + d.isCombine)) : true);
|
|
179
179
|
if (isGroupRef.current) result.forEach((item)=>{
|
|
180
|
-
item.total = result.filter((d)=>d.groupName === item.groupName).reduce((acc, d)=>acc + d.groupValue
|
|
180
|
+
item.total = result.filter((d)=>d.groupName === item.groupName).reduce((acc, d)=>acc + ('' === d.groupValue ? 0 : d.groupValue), 0);
|
|
181
181
|
});
|
|
182
182
|
return result;
|
|
183
183
|
}, [
|
|
@@ -272,7 +272,8 @@ const G2CombineChart = ({ height = 300, data, x = "", y = "", z = "", indicatorM
|
|
|
272
272
|
lineColors,
|
|
273
273
|
legendItems,
|
|
274
274
|
indicatorId: y,
|
|
275
|
-
isGroup: isGroupRef.current
|
|
275
|
+
isGroup: isGroupRef.current,
|
|
276
|
+
isTooltipContent
|
|
276
277
|
});
|
|
277
278
|
chartRef.current = chart;
|
|
278
279
|
if (onChartClick) chart.on("plot:click", (_e)=>{
|
|
@@ -85,6 +85,8 @@ export interface RenderG2CombineChartOptions {
|
|
|
85
85
|
}>;
|
|
86
86
|
/** 当前指标 id(用于 tooltip 展示) */
|
|
87
87
|
indicatorId?: string;
|
|
88
|
+
/** 是否将 tooltip 挂载到 body(用于可视化看板、编辑看板场景,避免被父容器裁剪) */
|
|
89
|
+
isTooltipContent?: boolean;
|
|
88
90
|
}
|
|
89
91
|
/**
|
|
90
92
|
* 在容器上渲染 G2 柱状 + 折线组合图,返回 Chart 实例便于 destroy/更新
|
|
@@ -5,7 +5,7 @@ const Y_AXIS_FIELD = 'groupValue';
|
|
|
5
5
|
const BAR_Y_FIELD = 'barValue';
|
|
6
6
|
const LINE_Y_FIELD = 'lineValue';
|
|
7
7
|
function renderG2CombineChart(container, options) {
|
|
8
|
-
const { data, nodeData, x, y, z: _z, maxY, themeColors, indicatorMap: _indicatorMap, formatAxis, formatLineAxis, isDataTag = true, isCombineDataTag = true, isLegend: _isLegend = false, isCompare = false, formatLabel, highlightDate = [], height = 300, isHighlight = true, isClickable = false, indicators = [], tooltipRender, auxiliaryLineData = [], onNodeListChange, lineColors, onChartRender, isGroup, legendItems = [], indicatorId } = options;
|
|
8
|
+
const { data, nodeData, x, y, z: _z, maxY, themeColors, indicatorMap: _indicatorMap, formatAxis, formatLineAxis, isDataTag = true, isCombineDataTag = true, isLegend: _isLegend = false, isCompare = false, formatLabel, highlightDate = [], height = 300, isHighlight = true, isClickable = false, indicators = [], tooltipRender, auxiliaryLineData = [], onNodeListChange, lineColors, onChartRender, isGroup, legendItems = [], indicatorId, isTooltipContent = false } = options;
|
|
9
9
|
const chart = createChart({
|
|
10
10
|
container,
|
|
11
11
|
height,
|
|
@@ -291,6 +291,9 @@ function renderG2CombineChart(container, options) {
|
|
|
291
291
|
shared: true,
|
|
292
292
|
crosshairsY: true,
|
|
293
293
|
marker: false,
|
|
294
|
+
...isTooltipContent ? {
|
|
295
|
+
mount: 'body'
|
|
296
|
+
} : {},
|
|
294
297
|
render: (event, payload)=>{
|
|
295
298
|
const { title, items } = payload;
|
|
296
299
|
let safeTitle = title.replace(/,.*$/, '');
|
|
@@ -331,7 +334,51 @@ function renderG2CombineChart(container, options) {
|
|
|
331
334
|
...safeItems,
|
|
332
335
|
...sortedCombineItems
|
|
333
336
|
]) ?? null;
|
|
334
|
-
if (content) {
|
|
337
|
+
if (content && isTooltipContent) {
|
|
338
|
+
const domEvent = event?.event ?? event;
|
|
339
|
+
const canvas = container.querySelector('canvas');
|
|
340
|
+
const canvasRect = canvas ? canvas.getBoundingClientRect() : container.getBoundingClientRect();
|
|
341
|
+
const canvasX = domEvent?.canvasX ?? domEvent?.x ?? 0;
|
|
342
|
+
const canvasY = domEvent?.canvasY ?? domEvent?.y ?? 0;
|
|
343
|
+
const clientX = canvasRect.left + canvasX;
|
|
344
|
+
const clientY = canvasRect.top + canvasY;
|
|
345
|
+
const offsetX = 12;
|
|
346
|
+
const offsetY = 12;
|
|
347
|
+
const applyPosition = ()=>{
|
|
348
|
+
let el = content;
|
|
349
|
+
while(el && el.parentElement){
|
|
350
|
+
const p = el.parentElement;
|
|
351
|
+
if (p.classList?.contains('g2-tooltip')) {
|
|
352
|
+
el = p;
|
|
353
|
+
break;
|
|
354
|
+
}
|
|
355
|
+
el = p;
|
|
356
|
+
}
|
|
357
|
+
const wrapper = el && el.classList?.contains('g2-tooltip') ? el : null;
|
|
358
|
+
if (!wrapper) return;
|
|
359
|
+
const wRect = wrapper.getBoundingClientRect();
|
|
360
|
+
const tooltipW = wRect.width || 260;
|
|
361
|
+
const tooltipH = wRect.height || 300;
|
|
362
|
+
const viewportWidth = window.innerWidth;
|
|
363
|
+
const viewportHeight = window.innerHeight;
|
|
364
|
+
let left = clientX + offsetX;
|
|
365
|
+
let top = clientY + offsetY;
|
|
366
|
+
if (left + tooltipW > viewportWidth - 10) left = clientX - tooltipW - offsetX;
|
|
367
|
+
if (top + tooltipH > viewportHeight - 10) top = clientY - tooltipH - offsetY;
|
|
368
|
+
if (left < 10) left = 10;
|
|
369
|
+
if (top < 10) top = 10;
|
|
370
|
+
wrapper.style.position = 'fixed';
|
|
371
|
+
wrapper.style.left = `${left}px`;
|
|
372
|
+
wrapper.style.top = `${top}px`;
|
|
373
|
+
wrapper.style.transform = 'none';
|
|
374
|
+
wrapper.style.pointerEvents = 'none';
|
|
375
|
+
wrapper.style.zIndex = '99999';
|
|
376
|
+
};
|
|
377
|
+
try {
|
|
378
|
+
applyPosition();
|
|
379
|
+
requestAnimationFrame(applyPosition);
|
|
380
|
+
} catch {}
|
|
381
|
+
} else if (content && !isTooltipContent) {
|
|
335
382
|
const domEvent = event?.event ?? event;
|
|
336
383
|
const clientX = domEvent?.clientX ?? domEvent?.x ?? 0;
|
|
337
384
|
const clientY = domEvent?.clientY ?? domEvent?.y ?? 0;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@publishfx/publish-chart",
|
|
3
|
-
"version": "2.1.
|
|
3
|
+
"version": "2.1.13",
|
|
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": [
|