@publishfx/publish-chart 2.1.12 → 2.1.13

package/dist/adapters/DataAdapter.js

@@ -145,6 +145,12 @@ class DataAdapter {
                 }
             });
             console.log('tdv:', tdv.rows);
+            tdv.transform({
+                type: 'filter',
+                callback (row) {
+                    return !row[config.y] || '-' !== row[config.y];
+                }
+            });
             console.log('tdv:', tdv.rows);
             if (config.isDescend) tdv.transform({
                 type: 'sort',

package/dist/components/g2/base/G2CombineChart.js

@@ -61,7 +61,7 @@ const lineColors = [
 const G2CombineChart = ({ height = 300, data, x = "", y = "", z = "", indicatorMap, onChartClick, legend = "", config, nodeSetting = {
     showType: 0,
     type: []
-}, indicators = [], auxiliaryLineData, highlightDate, timeRange, isGroup })=>{
+}, indicators = [], auxiliaryLineData, highlightDate, timeRange, isGroup, isTooltipContent = false })=>{
     const { formatter, dataTransform, config: contextConfig } = useChartContext();
     const tooltipContainerRef = useG2TooltipContainer();
     const isGroupRef = useRef(isGroup);
@@ -272,7 +272,8 @@ const G2CombineChart = ({ height = 300, data, x = "", y = "", z = "", indicatorM
             lineColors,
             legendItems,
             indicatorId: y,
-            isGroup: isGroupRef.current
+            isGroup: isGroupRef.current,
+            isTooltipContent
         });
         chartRef.current = chart;
         if (onChartClick) chart.on("plot:click", (_e)=>{

package/dist/components/g2/base/g2combine.d.ts

@@ -85,6 +85,8 @@ export interface RenderG2CombineChartOptions {
     }>;
     /** 当前指标 id（用于 tooltip 展示） */
     indicatorId?: string;
+    /** 是否将 tooltip 挂载到 body（用于可视化看板、编辑看板场景，避免被父容器裁剪） */
+    isTooltipContent?: boolean;
 }
 /**
  * 在容器上渲染 G2 柱状 + 折线组合图，返回 Chart 实例便于 destroy/更新

package/dist/components/g2/base/g2combine.js

@@ -5,7 +5,7 @@ const Y_AXIS_FIELD = 'groupValue';
 const BAR_Y_FIELD = 'barValue';
 const LINE_Y_FIELD = 'lineValue';
 function renderG2CombineChart(container, options) {
-    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;
+    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;
     const chart = createChart({
         container,
         height,
@@ -38,11 +38,10 @@ function renderG2CombineChart(container, options) {
     console.log('renderG2CombineChart interval data:', intervalData);
     const intervalMaxY = intervalData.reduce((max, item)=>{
         const key = isGroup ? "total" : BAR_Y_FIELD;
-        console.log('intervalMaxY item:', key, item[key], intervalData);
+        console.log('tdv item:', key, item[key], intervalData);
         if ('-' === item[key] || void 0 === item[key] || null === item[key] || '' === item[key]) return max;
         return Math.max(max, item[key]);
     }, 0);
-    console.log('intervalMaxY:', intervalMaxY);
     console.log('tdv:', intervalMaxY);
     const auxLeftValues = auxiliaryLineData?.length ? auxiliaryLineData.filter((item)=>'left' === item.axis).map((item)=>item.value) : [];
     const maxAuxLeft = auxLeftValues.length ? Math.max(...auxLeftValues) : 0;
@@ -292,6 +291,9 @@ function renderG2CombineChart(container, options) {
             shared: true,
             crosshairsY: true,
             marker: false,
+            ...isTooltipContent ? {
+                mount: 'body'
+            } : {},
             render: (event, payload)=>{
                 const { title, items } = payload;
                 let safeTitle = title.replace(/,.*$/, '');
@@ -332,7 +334,51 @@ function renderG2CombineChart(container, options) {
                     ...safeItems,
                     ...sortedCombineItems
                 ]) ?? null;
-                if (content) {
+                if (content && isTooltipContent) {
+                    const domEvent = event?.event ?? event;
+                    const canvas = container.querySelector('canvas');
+                    const canvasRect = canvas ? canvas.getBoundingClientRect() : container.getBoundingClientRect();
+                    const canvasX = domEvent?.canvasX ?? domEvent?.x ?? 0;
+                    const canvasY = domEvent?.canvasY ?? domEvent?.y ?? 0;
+                    const clientX = canvasRect.left + canvasX;
+                    const clientY = canvasRect.top + canvasY;
+                    const offsetX = 12;
+                    const offsetY = 12;
+                    const applyPosition = ()=>{
+                        let el = content;
+                        while(el && el.parentElement){
+                            const p = el.parentElement;
+                            if (p.classList?.contains('g2-tooltip')) {
+                                el = p;
+                                break;
+                            }
+                            el = p;
+                        }
+                        const wrapper = el && el.classList?.contains('g2-tooltip') ? el : null;
+                        if (!wrapper) return;
+                        const wRect = wrapper.getBoundingClientRect();
+                        const tooltipW = wRect.width || 260;
+                        const tooltipH = wRect.height || 300;
+                        const viewportWidth = window.innerWidth;
+                        const viewportHeight = window.innerHeight;
+                        let left = clientX + offsetX;
+                        let top = clientY + offsetY;
+                        if (left + tooltipW > viewportWidth - 10) left = clientX - tooltipW - offsetX;
+                        if (top + tooltipH > viewportHeight - 10) top = clientY - tooltipH - offsetY;
+                        if (left < 10) left = 10;
+                        if (top < 10) top = 10;
+                        wrapper.style.position = 'fixed';
+                        wrapper.style.left = `${left}px`;
+                        wrapper.style.top = `${top}px`;
+                        wrapper.style.transform = 'none';
+                        wrapper.style.pointerEvents = 'none';
+                        wrapper.style.zIndex = '99999';
+                    };
+                    try {
+                        applyPosition();
+                        requestAnimationFrame(applyPosition);
+                    } catch  {}
+                } else if (content && !isTooltipContent) {
                     const domEvent = event?.event ?? event;
                     const clientX = domEvent?.clientX ?? domEvent?.x ?? 0;
                     const clientY = domEvent?.clientY ?? domEvent?.y ?? 0;

package/dist/core/ChartTypes.d.ts

@@ -100,6 +100,7 @@ export interface BaseChartProps {
     highlightDate?: string[];
     /** 是否为分组柱状（组合图等场景） */
     isGroup?: boolean;
+    isTooltipContent?: boolean;
 }
 /**
  * 业务组件 Props（可选，通过 Context 注入）

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@publishfx/publish-chart",
-  "version": "2.1.12",
+  "version": "2.1.13",
   "description": "A React chart component library for the Publish platform, including BarChart, LineChart, BarLineChart and other visualization components",
   "type": "module",
   "keywords": [