@publishfx/publish-chart 2.1.13 → 2.1.15

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

@@ -61,7 +61,6 @@ function applyAxisX(mark, options = {}) {
     const needSampling = dataCount > 0 && containerWidth > 0;
     const interval = needSampling ? calcAxisInterval(dataCount, containerWidth, maxLabelChars, fontSize) : 1;
     const axisFilter = needSampling && interval > 1 ? (type)=>createAxisFilter(type, interval, dataCount) : null;
-    console.log('axisFilter:', interval);
     mark.axis('x', {
         title,
         grid,
@@ -82,6 +81,12 @@ function applyAxisX(mark, options = {}) {
         },
         labelAlign: 'horizontal',
         labelDx: (_datum, _index, _data)=>0,
+        labelRender: (datum)=>{
+            let left = '0%';
+            if (datum.value > 0.9) left = '-13%';
+            else if (datum.value < 0.1) left = '10%';
+            return `<div style="transform: translateX(${left});">${datum.label}</div>`;
+        },
         labelOpacity: 0.6,
         ...axisFilter && {
             tickFilter: axisFilter('tick'),
@@ -148,22 +153,16 @@ function applyLegendColor(view, options = {}) {
 }
 function applyAuxiliaryLineY(view, lines, options = {}) {
     if (!lines?.length) return;
-    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', {
+        view.lineY().encode('y', auxLine.value).style('stroke', stroke).style('strokeOpacity', strokeOpacity).style('lineWidth', 1).style('shadowColor', 'transparent').animate(false).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>`
         });
     });
 }
@@ -181,35 +180,23 @@ function applyHighlightDate(view, x, data, highlightDate, isHighlight) {
             [x]: item,
             ['highlight']: highlightDate.includes(item) ? 100 : 0
         }));
-    const highlightInterval = view.interval().data(highlightData).encode('x', x).encode('y', 'highlight').scale('y', {
+    const highlightInterval = view.interval().data(highlightData).encode('x', x).encode('y', 'highlight').animate(false).scale('y', {
         type: 'linear',
         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',
         fillOpacity: isHighlight ? 0.3 : 0
     });
-    view.line().data(highlightData).encode('x', x).encode('y', 'highlight').scale('y', {
+    view.line().data(highlightData).encode('x', x).encode('y', 'highlight').animate(false).scale('y', {
         type: 'linear',
         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 +229,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 +237,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 +262,58 @@ 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
+        ]));
+    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);
+    return safeItems;
+}
+export { adjustDomainMax, applyAuxiliaryLineY, applyAxisX, applyAxisY, applyHighlightDate, applyLegendColor, applyNodeData, applyScaleYLinear, createChart, fillMissingIndicator, getColorByGroupType, getMainView, intervalSort, sortByIndicators };

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

@@ -20,7 +20,6 @@ function renderG2BarChart(container, options) {
         paddingBottom: 0,
         insetBottom: 0
     });
-    console.log('isLegend:', legend, isLegend);
     const view = getMainView(chart);
     view.attr('marginLeft', 0).attr('marginRight', 0).attr('marginBottom', isLegend ? 0 : 16);
     if (isHorizontal) view.coordinate({
@@ -37,11 +36,10 @@ function renderG2BarChart(container, options) {
         key: 'main'
     });
     if (!CLOSE_HIGHLIGHT_DEBUG) applyHighlightDate(view, x, data, highlightDate, isHighlight);
-    console.log('g2bar data:', data, y);
     const interval = view.interval().encode('x', x).encode('y', y).encode('color', 'groupType').transform({
         type: 'dodgeX',
         padding: isHorizontal ? 0.2 : 0
-    });
+    }).animate(false);
     interval.style({
         columnWidthRatio: 0.6,
         insetLeft: (_d, index, _data, _column)=>{
@@ -145,7 +143,6 @@ function renderG2BarChart(container, options) {
         bounding: tooltipBounding
     });
     applyAuxiliaryLineY(view, auxiliaryLineData);
-    console.log('nodeList data:', data);
     if (!CLOSE_NODE_DEBUG) {
         const nodeList = applyNodeData(view, nodeData, x, y);
         onNodeListChange?.(nodeList);
@@ -170,7 +167,6 @@ function renderG2BarChart(container, options) {
     let hasEmittedNodeList = false;
     chart.on('afterrender', (_e)=>{
         if (hasEmittedNodeList) return;
-        console.log('chart.coordinateBBox:', chart.getContext(), view.getCoordinate());
         const views = chart.getContext()?.views;
         const viewCoordinate = views?.[0]?.layout;
         if (onChartRender && viewCoordinate) onChartRender({

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

@@ -18,6 +18,10 @@ export interface RenderG2CombineChartOptions {
     z: string;
     /** 柱状图 Y 轴最大值 */
     maxY: number;
+    /** 柱状图 Y 轴最大值 */
+    maxLeft: number;
+    /** 折线图 Y 轴最大值 */
+    maxRight: number;
     /** 高亮日期，用于 x 轴 gridFilter */
     highlightDate?: string[];
     /** 主题色数组 */

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

@@ -1,11 +1,11 @@
 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';
 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, isTooltipContent = false } = options;
+    const { data, nodeData, x, z: _z, maxLeft, maxRight, 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,
@@ -14,11 +14,11 @@ function renderG2CombineChart(container, options) {
     chart.options({
         marginBottom: 0,
         paddingBottom: 0,
-        insetBottom: 0
+        insetBottom: 0,
+        animate: null
     });
     const view = getMainView(chart);
-    view.attr('insetLeft', 0).attr('insetRight', 0).attr('marginLeft', 0).attr('marginRight', 0).attr('marginBottom', 0);
-    console.log('renderG2CombineChart data:', data, 'maxY:', maxY, x, y, 'indicators:', indicators);
+    view.attr('insetLeft', 0).attr('insetRight', 0).attr('marginLeft', 0).attr('marginRight', 0).attr('marginBottom', 0).attr('animate', false).animate(false);
     view.data(data);
     const xValueCount = new Set(data.map((d)=>d[x])).size;
     applyAxisX(view, {
@@ -28,27 +28,17 @@ function renderG2CombineChart(container, options) {
         containerWidth: container.clientWidth
     });
     const barColor = themeColors[0] ?? "#5B8FF9";
-    console.log('tooltip: themeColors:', themeColors[0], barColor, isGroup);
-    console.log('renderG2CombineChart highlightDate:', highlightDate, isHighlight);
     applyHighlightDate(view, x, data, highlightDate, isHighlight);
     const intervalData = data.filter((item)=>!item.isCombine).map((item)=>({
             ...item,
             [BAR_Y_FIELD]: item[Y_AXIS_FIELD]
         }));
-    console.log('renderG2CombineChart interval data:', intervalData);
-    const intervalMaxY = intervalData.reduce((max, item)=>{
-        const key = isGroup ? "total" : BAR_Y_FIELD;
-        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('tdv:', intervalMaxY);
     const auxLeftValues = auxiliaryLineData?.length ? auxiliaryLineData.filter((item)=>'left' === item.axis).map((item)=>item.value) : [];
     const maxAuxLeft = auxLeftValues.length ? Math.max(...auxLeftValues) : 0;
     const auxRightValues = auxiliaryLineData?.length ? auxiliaryLineData.filter((item)=>'right' === item.axis).map((item)=>item.value) : [];
     const maxAuxRight = auxRightValues.length ? Math.max(...auxRightValues) : 0;
-    const finalIntervalMax = Math.max(intervalMaxY, maxAuxLeft);
-    const interval = view.interval().data(intervalData).encode("x", x).encode("y", BAR_Y_FIELD).encode("color", "groupType").transform(isGroup ? {
+    const finalIntervalMax = Math.max(maxLeft, maxAuxLeft);
+    const interval = view.interval().data(intervalData).encode("x", x).encode("y", BAR_Y_FIELD).encode("color", "groupType").animate(false).transform(isGroup ? {
         type: 'stackY',
         reverse: true
     } : {
@@ -57,7 +47,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;
@@ -110,13 +99,11 @@ function renderG2CombineChart(container, options) {
         labelFormatter: formatAxis,
         labelOpacity: 0.6
     });
-    console.log('tooltip:', barColor, isCompare);
     interval.tooltip({
         items: isGroup ? [
             (datum)=>{
                 const groupType = String(datum.groupType ?? '');
                 const index = legendItems.findIndex((item)=>item.id === `${groupType}_${datum.isCombine}`);
-                console.log(datum);
                 return {
                     value: datum[Y_AXIS_FIELD],
                     name: datum['groupType'],
@@ -163,24 +150,12 @@ function renderG2CombineChart(container, options) {
             ...item,
             [LINE_Y_FIELD]: item[Y_AXIS_FIELD]
         }));
-    console.log('renderG2CombineChart: line data:', data);
     const compareLineData = data.filter((item)=>item.isCombine && item.groupType.includes('_compare')).filter((item)=>'' !== item[Y_AXIS_FIELD]).map((item)=>({
             ...item,
             [LINE_Y_FIELD]: item[Y_AXIS_FIELD]
         }));
-    console.log('compareLineData:', compareLineData);
-    const lineMaxY = lineData.reduce((max, item)=>{
-        if ('-' === item[LINE_Y_FIELD] || void 0 === item[LINE_Y_FIELD] || null === item[LINE_Y_FIELD] || '' === item[LINE_Y_FIELD]) return max;
-        return Math.max(max, item[LINE_Y_FIELD]);
-    }, 0);
-    const compareLineMaxY = compareLineData.reduce((max, item)=>{
-        if ('-' === item[LINE_Y_FIELD] || void 0 === item[LINE_Y_FIELD] || null === item[LINE_Y_FIELD] || '' === item[LINE_Y_FIELD]) return max;
-        return Math.max(max, item[LINE_Y_FIELD]);
-    }, 0);
-    const lineFinalMaxY = Math.max(lineMaxY, compareLineMaxY) || 1;
-    const finalLineMax = Math.max(lineFinalMaxY, maxAuxRight);
-    console.log('lineData:', lineData);
-    const line = view.line().data(lineData).encode("x", x).encode("y", LINE_Y_FIELD).encode('color', 'groupType').style({
+    const finalLineMax = Math.max(maxRight, maxAuxRight);
+    const line = view.line().data(lineData).encode("x", x).encode("y", LINE_Y_FIELD).encode('color', 'groupType').animate(false).style({
         lineWidth: 2,
         stroke: (datum)=>{
             const currentDatum = datum[0];
@@ -218,7 +193,7 @@ function renderG2CombineChart(container, options) {
         position: 'right',
         title: false,
         grid: true,
-        gridStrokeOpacity: 0 === intervalMaxY ? 0.2 : 0,
+        gridStrokeOpacity: 0 === maxAuxLeft ? 0.2 : 0,
         gridLineWidth: 1,
         gridLineDash: [
             0,
@@ -228,8 +203,7 @@ function renderG2CombineChart(container, options) {
         labelFormatter: formatLineAxis,
         labelOpacity: 0.6
     });
-    console.log('renderG2CombineChart: compare line data:', compareLineData);
-    const compareLine = view.line().data(compareLineData).encode('x', x).encode('y', LINE_Y_FIELD).encode('color', 'groupType').style({
+    const compareLine = view.line().data(compareLineData).encode('x', x).encode('y', LINE_Y_FIELD).encode('color', 'groupType').animate(false).style({
         lineDash: [
             4,
             4
@@ -255,7 +229,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 +237,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 +254,130 @@ 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;
+            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,