@publishfx/publish-chart 2.1.13 → 2.1.14

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+**2.1.14** fix(chart): 修复组合图折线指标传空判断
+- 2026-03-05T02:35:21+08:00 [fix(chart): 修复组合图折线指标传空判断](http://lf.git.oa.mt/publish_platform/web/publish/commit/abad3dc8688a3a06d57e2ef1c3884593f5bba88e)
+- 2026-03-05T02:30:07+08:00 [fix(chart): 副轴和非副轴分别定义偏移](http://lf.git.oa.mt/publish_platform/web/publish/commit/6390674b94bcffb02e2145ecc51927a20d89d4a0)
+- 2026-03-05T02:28:42+08:00 [fix(chart): 为了规避辅助线文本避让的问题仍然使用render渲染辅助线](http://lf.git.oa.mt/publish_platform/web/publish/commit/a005f7455772ee64b3e1b951de6eec7fc1529bc5)
+- 2026-03-05T02:19:27+08:00 [fix(chart): 分组时不进行补充处理](http://lf.git.oa.mt/publish_platform/web/publish/commit/0dcc076cf441b16cb6a7a02aee5f6736c1574bc0)
+- 2026-03-05T02:15:09+08:00 [fix(chart): 处理缺失数据导致的tooltip文本缺失问题](http://lf.git.oa.mt/publish_platform/web/publish/commit/ab1c7394ed7b80b5ed17237f59d6c222ad6f253b)
+- 2026-03-05T01:16:46+08:00 [fix(chart): 着重函数axis调整减少顶部空白](http://lf.git.oa.mt/publish_platform/web/publish/commit/6100c4c96a98aa690a61783a64ae4cc3e1c3309f)
+- 2026-03-05T01:03:57+08:00 [feat(chart): 处理图表tooltip和节点tooltip的冲突问题](http://lf.git.oa.mt/publish_platform/web/publish/commit/b502392f558e0d8fdec18c551f52c6f3dc6f9eb2)
+- 2026-03-04T22:36:24+08:00 [fix(chart): 组合图数据处理](http://lf.git.oa.mt/publish_platform/web/publish/commit/6622bc898bdd8feed1655b1573545299164af09c)
+- 2026-03-04T22:18:28+08:00 [fix(chart): 组合图tooltip滚动显示问题](http://lf.git.oa.mt/publish_platform/web/publish/commit/6180fdf4417da43bef0800b450f4d739ca1ab6ee)
+- 2026-03-04T21:28:25+08:00 [fix(chart): 可视化看板、编辑看板tooltip位置问题](http://lf.git.oa.mt/publish_platform/web/publish/commit/c58e1851d1286fcf4290ede2435603e378a747ba)
+- 2026-03-04T21:17:52+08:00 [fix(chart): 组合图total计算更新](http://lf.git.oa.mt/publish_platform/web/publish/commit/937597110cc96672a2f7fda5899cd6df660bd251)
+
 **2.1.11** fix(chart): 组合图去掉主轴过滤逻辑，以支持tooltip展示
 - 2026-03-04T20:56:34+08:00 [fix(chart): 组合图去掉主轴过滤逻辑，以支持tooltip展示](http://lf.git.oa.mt/publish_platform/web/publish/commit/215222fb1ae535a52aea475d3a8447cdc61dfa19)
 - 2026-03-04T20:30:34+08:00 [fix(chart): 组合图数据处理逻辑优化](http://lf.git.oa.mt/publish_platform/web/publish/commit/bab29eb2897d1b7b60877c234d8cc14b4d79b9a9)

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

@@ -129,7 +129,7 @@ const G2CombineChart = ({ height = 300, data, x = "", y = "", z = "", indicatorM
         y
     ]);
     const formatLineAxis = useCallback((val)=>{
-        const indicatorId = indicators?.length > 1 ? '' : safeZ;
+        const indicatorId = indicators?.length > 2 ? '' : safeZ;
         return getAxisFormat(val, safeIndicatorMap, indicatorId);
     }, [
         safeIndicatorMap,

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

@@ -54,7 +54,7 @@ const G2LineChart = ({ height = 300, data, x = "", y = "", z = "", indicatorMap,
         contextConfig.nodeMap
     ]);
     const nodeData = transformedData.filter((item)=>item.nodeInfos?.info?.length > 0 || item.nodeInfos?.infosCompare?.length > 0);
-    console.log('nodeData:', nodeData);
+    console.log("nodeData:", nodeData);
     const { minY, maxY } = useMemo(()=>{
         const dataValues = transformedData.filter((item)=>"-" !== item[safeY] && void 0 !== item[safeY] && null !== item[safeY]).map((item)=>Number(item[safeY]));
         const compareValues = transformedData.filter((item)=>"-" !== item["subGroupValue"] && null != item["subGroupValue"]).map((item)=>Number(item["subGroupValue"]));
@@ -77,7 +77,7 @@ const G2LineChart = ({ height = 300, data, x = "", y = "", z = "", indicatorMap,
         auxiliaryLineData
     ]);
     const formatAxis = useCallback((val)=>{
-        const indicatorId = indicators?.length > 1 ? '' : safeLegend;
+        const indicatorId = indicators?.length > 1 ? "" : safeLegend;
         return getAxisFormat(val, safeIndicatorMap, indicatorId);
     }, [
         safeIndicatorMap,
@@ -175,6 +175,7 @@ const G2LineChart = ({ height = 300, data, x = "", y = "", z = "", indicatorMap,
             legendSize: 12,
             useStrictTicks: true,
             onNodeListChange: (nodes)=>{
+                console.log("setXYList:", nodes);
                 setXYList(nodes);
             },
             onChartRender: (chartProps)=>{
@@ -186,15 +187,20 @@ const G2LineChart = ({ height = 300, data, x = "", y = "", z = "", indicatorMap,
             }
         });
         chartRef.current = chart;
-        if (onChartClick) chart.on("plot:click", (_e)=>{
-            const tooltipTitle = currentTooltipTitleRef.current;
-            if (null != tooltipTitle) {
-                console.log('使用 tooltip title 触发下钻:', tooltipTitle);
-                onChartClick({
-                    title: tooltipTitle
-                });
-            }
-        });
+        if (onChartClick) {
+            chart.on("plot:click", (_e)=>{
+                const tooltipTitle = currentTooltipTitleRef.current;
+                if (null != tooltipTitle) {
+                    console.log("使用 tooltip title 触发下钻:", tooltipTitle);
+                    onChartClick({
+                        title: tooltipTitle
+                    });
+                }
+            });
+            chart.on("plot:pointerenter:", (event)=>{
+                console.log("plot:pointerenter:", event);
+            });
+        }
         return ()=>{
             if (chartRef.current) {
                 chartRef.current.off("plot:click");
@@ -255,7 +261,7 @@ const G2LineChart = ({ height = 300, data, x = "", y = "", z = "", indicatorMap,
                 children: xyList?.map((item, index)=>/*#__PURE__*/ jsx(NodePopover, {
                         style: {
                             position: "absolute",
-                            top: item.pointP?.y + 10,
+                            top: item.pointP?.y + 12,
                             left: item.pointP?.x,
                             width: 12,
                             height: 12,

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

@@ -307,3 +307,5 @@ export declare function applyNodeData(view: any, nodeData: any[], x: string, y:
 }[];
 export declare function adjustDomainMax(domainMin: number, domainMax: number): number;
 export declare const sortByIndicators: (arr: string[], indicators: string[]) => string[];
+export declare function intervalSort(a: any, b: any): number;
+export declare function fillMissingIndicator(baseItems: any[], safeTitle: string, isCompare: boolean, isGroup?: boolean): any[];

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

@@ -151,19 +151,14 @@ function applyAuxiliaryLineY(view, lines, options = {}) {
     console.log('applyAuxiliaryLineY:', lines);
     const { stroke = '#F4664A', strokeOpacity = 1, labelMaxLength = 5 } = options;
     lines.forEach((auxLine)=>{
-        console.log('lines:', auxLine);
         view.lineY().encode('y', auxLine.value).style('stroke', stroke).style('strokeOpacity', strokeOpacity).style('lineWidth', 1).style('shadowColor', 'transparent').scale('y', {
             key: auxLine?.axis === 'right' ? 'line' : 'main'
         }).axis('x', false).label({
             dx: 0,
             dy: 0,
-            text: splitTextToMultiline(auxLine.name, labelMaxLength, '\n'),
+            text: splitTextToMultiline(auxLine.name, labelMaxLength, '<br />'),
             position: auxLine?.axis === 'right' ? 'bottom-right' : 'bottom-left',
-            style: {
-                fill: stroke,
-                shadowColor: 'transparent',
-                fillOpacity: 1
-            }
+            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>`
         });
     });
 }
@@ -186,13 +181,7 @@ function applyHighlightDate(view, x, data, highlightDate, isHighlight) {
         domainMin: 0,
         domainMax: 100,
         independent: true
-    }).tooltip(false).axis('y', {
-        position: 'top',
-        title: false,
-        grid: false,
-        label: false,
-        tick: false
-    });
+    }).tooltip(false).axis('y', false);
     highlightInterval.style({
         columnWidthRatio: 0.6,
         fill: '#cccccc',
@@ -203,13 +192,7 @@ function applyHighlightDate(view, x, data, highlightDate, isHighlight) {
         domainMin: 0,
         domainMax: 100,
         independent: true
-    }).tooltip(true).axis('y', {
-        position: 'top',
-        title: false,
-        grid: false,
-        label: false,
-        tick: false
-    }).style({
+    }).tooltip(true).axis('y', false).style({
         stroke: 'transparent',
         strokeOpacity: 1
     });
@@ -242,7 +225,7 @@ function applyNodeData(view, nodeData, x, y) {
                     const c1 = document.createElement('circle', {
                         style: {
                             cx: px,
-                            cy: py,
+                            cy: py + 3,
                             r: 2,
                             fill: 'white'
                         }
@@ -250,7 +233,7 @@ function applyNodeData(view, nodeData, x, y) {
                     const c2 = document.createElement('circle', {
                         style: {
                             cx: px,
-                            cy: py,
+                            cy: py + 3,
                             r: 5,
                             fill: item.color
                         }
@@ -275,4 +258,60 @@ const sortByIndicators = (arr, indicators)=>arr.sort((a, b)=>{
         if (-1 !== indexA && -1 !== indexB) return indexA - indexB;
         return 0;
     });
-export { adjustDomainMax, applyAuxiliaryLineY, applyAxisX, applyAxisY, applyHighlightDate, applyLegendColor, applyNodeData, applyScaleYLinear, createChart, getColorByGroupType, getMainView, sortByIndicators };
+function intervalSort(a, b) {
+    const itemRank = (item)=>{
+        if (item.isChange) return 2;
+        if (item.name.includes('_compare')) return 1;
+        return 0;
+    };
+    return itemRank(a) - itemRank(b);
+}
+function fillMissingIndicator(baseItems, safeTitle, isCompare, isGroup = false) {
+    const indicatorIds = baseItems.filter((item)=>item.indicatorId).map((item)=>item.indicatorId);
+    const indicatorIdSet = new Map(indicatorIds.map((id)=>[
+            id,
+            0
+        ]));
+    console.log('baseItems:', baseItems);
+    if (isCompare && !isGroup) {
+        baseItems.forEach((item)=>{
+            if (item.indicatorId) indicatorIdSet.set(item.indicatorId, (indicatorIdSet.get(item.indicatorId) ?? 0) + 1);
+        });
+        indicatorIdSet.forEach((count, indicatorId)=>{
+            if (3 !== count) {
+                const color = baseItems.filter((item)=>'transparent' !== item.color).map((item)=>item.color)[0];
+                if (!baseItems.find((item)=>item.indicatorId === indicatorId && item.name === indicatorId)) baseItems.push({
+                    indicatorId: indicatorId,
+                    name: indicatorId,
+                    value: '-',
+                    x: safeTitle,
+                    color: color
+                });
+                if (!baseItems.find((item)=>item.indicatorId === indicatorId && item.name === indicatorId + '_compare')) baseItems.push({
+                    indicatorId: indicatorId,
+                    name: indicatorId + '_compare',
+                    tipType: 'compareline',
+                    value: '-',
+                    x: safeTitle
+                });
+                if (!baseItems.find((item)=>item.indicatorId === indicatorId && item.name === indicatorId + '_change')) baseItems.push({
+                    indicatorId: indicatorId,
+                    name: indicatorId + '_change',
+                    isChange: true,
+                    value: '-',
+                    x: safeTitle
+                });
+            }
+        });
+    }
+    const safeItems = baseItems.map((item)=>{
+        if (item.x !== safeTitle) return {
+            ...item,
+            value: '-'
+        };
+        return item;
+    }).sort(intervalSort);
+    console.log('safeItems:', safeItems);
+    return safeItems;
+}
+export { adjustDomainMax, applyAuxiliaryLineY, applyAxisX, applyAxisY, applyHighlightDate, applyLegendColor, applyNodeData, applyScaleYLinear, createChart, fillMissingIndicator, getColorByGroupType, getMainView, intervalSort, sortByIndicators };

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

@@ -1,5 +1,5 @@
 import { lines } from "@antv/g-pattern";
-import { applyAuxiliaryLineY, applyAxisX, applyHighlightDate, applyNodeData, applyScaleYLinear, createChart, getMainView } from "./g2Helpers.js";
+import { applyAuxiliaryLineY, applyAxisX, applyHighlightDate, applyNodeData, applyScaleYLinear, createChart, fillMissingIndicator, getMainView } from "./g2Helpers.js";
 import { getIndicatorCompareName } from "../../../utils/indicatorHelpers.js";
 const Y_AXIS_FIELD = 'groupValue';
 const BAR_Y_FIELD = 'barValue';
@@ -57,7 +57,6 @@ function renderG2CombineChart(container, options) {
     }).style({
         columnWidthRatio: 0.6,
         insetLeft: (_d, index, _data, _column)=>{
-            console.log('insetLeft:', index, isCompare);
             if (isGroup) return 0;
             if (isCompare) return index % 2 === 0 ? 0 : 0;
             return 0;
@@ -255,7 +254,6 @@ function renderG2CombineChart(container, options) {
     });
     compareLine.axis('y', false);
     const hasCompareData = data.some((item)=>item.groupType.includes('_compare'));
-    console.log('hasCompareData:', hasCompareData, data);
     if (hasCompareData) compareLine.tooltip({
         items: [
             (datum)=>datum.groupType.includes('_compare') ? {
@@ -264,7 +262,7 @@ function renderG2CombineChart(container, options) {
                     name: datum['groupType'],
                     indicatorId: datum['groupType'].replace('_compare', ''),
                     channel: Y_AXIS_FIELD,
-                    color: lineColors[indicators.slice(1).indexOf(String(datum['groupType'])) ?? 0] || 'transparent',
+                    color: lineColors[indicators.slice(1).indexOf(String(datum['groupType']).replace('_compare', '')) ?? 0] || 'trans1parent',
                     isCombine: true,
                     tipType: 'compareline',
                     x: datum[x]
@@ -281,149 +279,131 @@ function renderG2CombineChart(container, options) {
                 } : false
         ].filter(Boolean)
     });
-    if (tooltipRender) {
-        const intervalSort = (item)=>{
-            if (item.isChange) return 2;
-            if (item.name.includes('_compare')) return 1;
-            return 0;
-        };
-        view.interaction('tooltip', {
-            shared: true,
-            crosshairsY: true,
-            marker: false,
-            ...isTooltipContent ? {
-                mount: 'body'
-            } : {},
-            render: (event, payload)=>{
-                const { title, items } = payload;
-                let safeTitle = title.replace(/,.*$/, '');
-                const baseItems = items.filter((item)=>!item.isCombine);
-                const safeItems = baseItems.map((item)=>{
-                    if (item.x !== safeTitle) return {
-                        ...item,
-                        value: '-'
-                    };
-                    return item;
-                }).sort(intervalSort);
-                const combineItems = items.filter((item)=>item.isCombine);
-                const safeCombineItems = combineItems.map((item)=>{
-                    if (item.x !== safeTitle) return {
-                        ...item,
-                        value: '-'
-                    };
-                    return item;
-                });
-                const indicatorOrder = new Map(indicators.map((id, i)=>[
-                        id,
-                        i
-                    ]));
-                const sortedCombineItems = [
-                    ...safeCombineItems
-                ].sort((a, b)=>{
-                    const orderA = indicatorOrder.get(a.indicatorId) ?? 1 / 0;
-                    const orderB = indicatorOrder.get(b.indicatorId) ?? 1 / 0;
-                    if (orderA !== orderB) return orderA - orderB;
-                    const typeRank = (item)=>{
-                        if (item.isChange) return 2;
-                        if ('compareline' === item.tipType) return 1;
-                        return 0;
-                    };
-                    return typeRank(a) - typeRank(b);
-                });
-                const content = tooltipRender(safeTitle, [
-                    ...safeItems,
-                    ...sortedCombineItems
-                ]) ?? null;
-                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;
-                            }
+    if (tooltipRender) view.interaction('tooltip', {
+        shared: true,
+        crosshairsY: true,
+        marker: false,
+        ...isTooltipContent ? {
+            mount: 'body'
+        } : {},
+        render: (event, payload)=>{
+            const { title, items } = payload;
+            console.log('tooltipRender:', title, items, isCompare);
+            let safeTitle = title.replace(/,.*$/, '');
+            const baseItems = items.filter((item)=>item.hasOwnProperty('isCombine') && !item.isCombine);
+            const safeItems = fillMissingIndicator(baseItems, safeTitle, isCompare, isGroup);
+            const combineItems = items.filter((item)=>item.hasOwnProperty('isCombine') && item.isCombine);
+            const safeCombineItems = fillMissingIndicator(combineItems, safeTitle, isCompare, isGroup);
+            const indicatorOrder = new Map(indicators.map((id, i)=>[
+                    id,
+                    i
+                ]));
+            const sortedCombineItems = [
+                ...safeCombineItems
+            ].sort((a, b)=>{
+                const orderA = indicatorOrder.get(a.indicatorId) ?? 1 / 0;
+                const orderB = indicatorOrder.get(b.indicatorId) ?? 1 / 0;
+                if (orderA !== orderB) return orderA - orderB;
+                const typeRank = (item)=>{
+                    if (item.isChange) return 2;
+                    if ('compareline' === item.tipType) return 1;
+                    return 0;
+                };
+                return typeRank(a) - typeRank(b);
+            });
+            const content = tooltipRender(safeTitle, [
+                ...safeItems,
+                ...sortedCombineItems
+            ]) ?? null;
+            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;
                         }
-                        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;
-                    const rect = container.getBoundingClientRect();
-                    const offsetX = 12;
-                    const offsetY = 12;
-                    const applyClamp = ()=>{
-                        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;
+                const rect = container.getBoundingClientRect();
+                const offsetX = 12;
+                const offsetY = 12;
+                const applyClamp = ()=>{
+                    let el = content;
+                    while(el && el.parentElement){
+                        const p = el.parentElement;
+                        if (p.classList?.contains('g2-tooltip')) {
                             el = p;
+                            break;
                         }
-                        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 minLeft = rect.left;
-                        const maxLeft = rect.right - tooltipW;
-                        const minTop = rect.top;
-                        const maxTop = rect.bottom - tooltipH;
-                        const desiredLeft = clientX + offsetX;
-                        const desiredTop = clientY + offsetY;
-                        const left = Math.min(Math.max(desiredLeft, minLeft), Math.max(maxLeft, minLeft));
-                        const top = Math.min(Math.max(desiredTop, minTop), Math.max(maxTop, minTop));
-                        wrapper.style.position = 'fixed';
-                        wrapper.style.left = `${left}px`;
-                        wrapper.style.top = `${top}px`;
-                        wrapper.style.transform = 'translate(0px, 0px)';
-                        wrapper.style.pointerEvents = 'none';
-                        wrapper.style.zIndex = '9999';
-                    };
-                    try {
-                        applyClamp();
-                        requestAnimationFrame(applyClamp);
-                    } catch  {}
-                }
-                return content;
+                        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 minLeft = rect.left;
+                    const maxLeft = rect.right - tooltipW;
+                    const minTop = rect.top;
+                    const maxTop = rect.bottom - tooltipH;
+                    const desiredLeft = clientX + offsetX;
+                    const desiredTop = clientY + offsetY;
+                    const left = Math.min(Math.max(desiredLeft, minLeft), Math.max(maxLeft, minLeft));
+                    const top = Math.min(Math.max(desiredTop, minTop), Math.max(maxTop, minTop));
+                    wrapper.style.position = 'fixed';
+                    wrapper.style.left = `${left}px`;
+                    wrapper.style.top = `${top}px`;
+                    wrapper.style.transform = 'translate(0px, 0px)';
+                    wrapper.style.pointerEvents = 'none';
+                    wrapper.style.zIndex = '9999';
+                };
+                try {
+                    applyClamp();
+                    requestAnimationFrame(applyClamp);
+                } catch  {}
             }
-        });
-    }
+            return content;
+        }
+    });
     view.legend(false);
     view.interaction('poptip', {
         offsetY: -20,

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

@@ -33,7 +33,7 @@ function renderG2LineChart(container, options) {
         lineWidth: 2,
         stroke: (datum)=>getColorByGroupType(datum[0]?.groupType ?? '', colorOpts)
     });
-    const compareLine = view.line().data(data.filter((item)=>item.groupType.includes('_compare'))).encode('x', x).encode('y', Y_AXIS_FIELD).encode('color', 'groupType').style({
+    const compareLine = view.line().data(data.filter((item)=>item.groupType.includes('_compare'))).encode('x', x).encode('y', Y_AXIS_FIELD).encode('color', 'groupType').encode('series', 'groupType').style({
         lineDash: [
             4,
             4

package/dist/components/shared/NodePopover.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from "react";
 type NodeInfoItem = {
     area: string;
     description: string;

package/dist/components/shared/NodePopover.js

@@ -15,19 +15,25 @@ const NodePopover = ({ style, pointData, pointP })=>{
     return /*#__PURE__*/ jsx(Fragment, {
         children: /*#__PURE__*/ jsx(Popover, {
             blurToHide: true,
-            unmountOnExit: true,
+            unmountOnExit: false,
             position: "right",
             style: {
-                maxWidth: 'auto'
+                maxWidth: "auto"
             },
             content: /*#__PURE__*/ jsx(Fragment, {
                 children: /*#__PURE__*/ jsx(NodePopoverContent, {
                     nodeInfos: nodeInfos
                 })
             }),
+            onVisibleChange: (visible)=>{
+                if (visible) {
+                    const tooltip = document.querySelector(".g2-tooltip");
+                    if (tooltip) tooltip.style.visibility = "hidden";
+                }
+            },
             children: /*#__PURE__*/ jsx("div", {
                 style: {
-                    position: 'absolute',
+                    position: "absolute",
                     top: pointP.y - 10,
                     left: pointP.x - 10,
                     zIndex: 999,

package/package.json

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