@publishfx/publish-chart 2.1.5 → 2.1.6

package/CHANGELOG.md

@@ -1,3 +1,7 @@
+**2.1.6** fix(chart): 解决ts错误
+- 2026-03-03T06:38:38+08:00 [fix(chart): 解决ts错误](http://lf.git.oa.mt/publish_platform/web/publish/commit/a1a61c8cbfede6e0993a1101dd4f375ad3383302)
+- 2026-03-03T06:30:33+08:00 [fix(chart): 修复所有遗留问题](http://lf.git.oa.mt/publish_platform/web/publish/commit/73456fbb6fe853fc9069e2c6712851375dd372da)
+
 **2.1.5** fix(chart): 修正ts错误
 - 2026-03-03T04:41:18+08:00 [fix(chart): 修正ts错误](http://lf.git.oa.mt/publish_platform/web/publish/commit/ed6bc3403d6c06d8c0cce6f0193a447d74b68a3a)
 - 2026-03-03T04:38:12+08:00 [fix(chart): 组合图代码整理](http://lf.git.oa.mt/publish_platform/web/publish/commit/6a94afb106447e54143f4a29e7d8fa24c718b321)

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

@@ -217,14 +217,17 @@ export declare function applyScaleYLinear(view: any, options?: ScaleYLinearOptio
 export interface ApplyAxisXOptions {
     title?: boolean;
     isHorizontal?: boolean;
-    labelAutoHide?: 'greedy' | 'equidistant' | boolean;
-    /** 为 true 时刻度过多会自动旋转为垂直；为 false 时保持水平，依赖 labelAutoHide 避免重叠。默认 false */
-    labelAutoRotate?: boolean;
     grid?: boolean;
     gridStroke?: string;
     gridLineWidth?: number;
     gridLineDash?: number[];
     gridFilter?: (val: any) => boolean;
+    /** X 轴数据点数量，用于计算 label/tick 采样间隔 */
+    dataCount?: number;
+    /** 图表容器宽度（px），用于计算可容纳的最大标签数 */
+    containerWidth?: number;
+    /** 单个标签最大显示字符数，超出截断。默认 6 */
+    maxLabelChars?: number;
 }
 /** 配置 X 轴，挂载在 mark 上（如 line / interval） */
 export declare function applyAxisX(mark: any, options?: ApplyAxisXOptions): void;

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

@@ -37,10 +37,30 @@ function applyScaleYLinear(view, options = {}) {
         }
     });
 }
+function calcAxisInterval(dataCount, containerWidth, maxLabelChars, fontSize) {
+    if (dataCount <= 1) return 1;
+    const charWidth = 0.55 * fontSize;
+    const ellipsisWidth = Math.min(maxLabelChars * charWidth, 90);
+    const slotWidth = ellipsisWidth + 8;
+    const plotWidth = 0.85 * containerWidth;
+    const maxLabels = Math.max(Math.floor(plotWidth / slotWidth), 2);
+    return Math.max(Math.ceil(dataCount / maxLabels), 1);
+}
+function createAxisFilter(type, interval, _dataCount) {
+    return (_datum, index)=>{
+        if (0 === index) return true;
+        return 'tick' === type ? index % interval === 0 : true;
+    };
+}
 function applyAxisX(mark, options = {}) {
-    const { title = false, grid = true, gridStroke = '#333', gridLineWidth = 50, gridLineDash = [
+    const { title = false, isHorizontal = false, grid = true, gridStroke = '#333', gridLineWidth = 50, gridLineDash = [
         1000
-    ], gridFilter } = options;
+    ], gridFilter, dataCount = 0, containerWidth = 0, maxLabelChars = 30 } = options;
+    const fontSize = 12;
+    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,
@@ -51,17 +71,18 @@ function applyAxisX(mark, options = {}) {
             gridFilter
         },
         labelAutoRotate: false,
-        labelFontSize: 12,
+        labelFontSize: fontSize,
         labelFontColor: '#000',
+        size: isHorizontal ? Math.floor(containerWidth / 5) : 30,
         labelAutoEllipsis: {
             type: 'ellipsis',
-            maxLength: 50
+            maxLength: isHorizontal ? Math.floor(containerWidth / 5) : Math.min(maxLabelChars * fontSize * 0.55, 90)
         },
         labelAlign: 'horizontal',
-        labelAutoHide: {
-            type: 'hide',
-            keepHeader: true,
-            keepTail: true
+        labelDx: (_datum, _index, _data)=>0,
+        ...axisFilter && {
+            tickFilter: axisFilter('tick'),
+            labelFilter: axisFilter('label')
         }
     });
 }

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

@@ -20,7 +20,7 @@ function renderG2BarChart(container, options) {
     });
     console.log('isLegend:', legend, isLegend);
     const view = getMainView(chart);
-    view.attr('marginLeft', 0).attr('marginBottom', isLegend ? 0 : 16);
+    view.attr('marginLeft', 0).attr('marginRight', 0).attr('marginBottom', isLegend ? 0 : 16);
     if (isHorizontal) view.coordinate({
         transform: [
             {
@@ -71,14 +71,27 @@ function renderG2BarChart(container, options) {
         },
         cursor: isClickable ? 'pointer' : 'default'
     });
+    const xValueCount = new Set(data.map((d)=>d[x])).size;
     applyAxisX(view, {
         grid: false,
-        isHorizontal
+        isHorizontal,
+        dataCount: xValueCount,
+        containerWidth: container.clientWidth
     });
     applyAxisY(view, {
         labelFormatter: formatAxis
     });
     view.legend(false);
+    view.interaction('poptip', {
+        offsetY: -20,
+        offsetX: 0,
+        tipBackgroundColor: '#fcfcfc',
+        tipColor: '#333',
+        tipBorderRadius: '6px',
+        tipPadding: '10px 12px',
+        tipFontSize: '12px',
+        tipBoxShadow: '0 3px 6px -4px rgba(0, 0, 0, 1)'
+    });
     interval.tooltip({
         items: [
             (datum)=>({
@@ -105,11 +118,18 @@ function renderG2BarChart(container, options) {
                 }) : null
         ].filter(Boolean)
     });
+    const tooltipBounding = {
+        x: 0,
+        y: 0,
+        width: container.clientWidth || container.offsetWidth,
+        height: height
+    };
     if (tooltipRender) view.interaction('tooltip', {
         shared: true,
         crosshairsY: true,
         wait: 100,
         marker: false,
+        bounding: tooltipBounding,
         render: (_event, payload)=>{
             const { title, items } = payload;
             const lastIsChange = items.filter((item)=>item.isChange);
@@ -121,7 +141,9 @@ function renderG2BarChart(container, options) {
             return tooltipRender(title, safeItems ?? []) ?? null;
         }
     });
-    else view.interaction('tooltip', true);
+    else view.interaction('tooltip', {
+        bounding: tooltipBounding
+    });
     applyAuxiliaryLineY(view, auxiliaryLineData);
     const nodeList = [];
     console.log('nodeList data:', data);

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

@@ -53,7 +53,10 @@ export interface RenderG2CombineChartOptions {
         value: any;
         isChange?: boolean;
         compareTime?: string;
-    }>) => HTMLElement | null;
+    }>, position?: {
+        left: number;
+        top: number;
+    }) => HTMLElement | null;
     /** 辅助线 */
     auxiliaryLineData?: AuxiliaryLineItem[];
     /** 将计算出的节点信息传递给外层（用于渲染 NodePopover 等） */

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

@@ -20,9 +20,12 @@ function renderG2CombineChart(container, options) {
     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.data(data);
+    const xValueCount = new Set(data.map((d)=>d[x])).size;
     applyAxisX(view, {
         title: false,
-        grid: false
+        grid: false,
+        dataCount: xValueCount,
+        containerWidth: container.clientWidth
     });
     const barColor = themeColors[0] ?? "#5B8FF9";
     console.log('tooltip: themeColors:', themeColors[0], barColor, isGroup);
@@ -275,7 +278,7 @@ function renderG2CombineChart(container, options) {
         shared: true,
         crosshairsY: true,
         marker: false,
-        render: (_event, payload)=>{
+        render: (event, payload)=>{
             const { title, items } = payload;
             const baseItems = items.filter((item)=>!item.isCombine);
             const combineItems = items.filter((item)=>item.isCombine);
@@ -296,13 +299,66 @@ function renderG2CombineChart(container, options) {
                 };
                 return typeRank(a) - typeRank(b);
             });
-            return tooltipRender(title, [
+            const content = tooltipRender(title, [
                 ...baseItems,
                 ...sortedCombineItems
             ]) ?? null;
+            if (content) {
+                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 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,
+        offsetX: 0,
+        tipBackgroundColor: '#fcfcfc',
+        tipColor: '#333',
+        tipBorderRadius: '6px',
+        tipPadding: '10px 12px',
+        tipFontSize: '12px',
+        tipBoxShadow: '0 3px 6px -4px rgba(0, 0, 0, 1)'
+    });
     applyAuxiliaryLineY(view, auxiliaryLineData);
     const nodeList = [];
     console.log('nodeList data:', data);

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

@@ -56,9 +56,12 @@ function renderG2GroupBarChart(container, options) {
         },
         stroke: 'transparent'
     });
+    const xValueCount = new Set(data.map((d)=>d[x])).size;
     applyAxisX(view, {
         title: false,
-        grid: false
+        grid: false,
+        dataCount: xValueCount,
+        containerWidth: container.clientWidth
     });
     applyAxisY(view, {
         title: false,
@@ -70,6 +73,7 @@ function renderG2GroupBarChart(container, options) {
         labelFormatter: formatAxis
     });
     view.legend(false);
+    view.interaction('poptip', true);
     interval.tooltip({
         items: [
             (datum)=>{
@@ -86,20 +90,38 @@ function renderG2GroupBarChart(container, options) {
             }
         ].filter(Boolean)
     });
-    if (tooltipRender) interval.interaction('tooltip', {
-        shared: true,
-        render: (_event, payload)=>{
-            const { title, items } = payload;
-            const lastIsChange = items.filter((item)=>item.isChange);
-            let safeItems = items;
-            if (lastIsChange.length > 0) safeItems = [
-                ...items.filter((item)=>!item.isChange),
-                lastIsChange[lastIsChange.length - 1]
-            ];
-            return tooltipRender(title, safeItems ?? []) ?? null;
-        }
-    });
-    else view.interaction('tooltip', true);
+    if (tooltipRender) {
+        const tooltipBounding = {
+            x: 0,
+            y: 0,
+            width: container.clientWidth || container.offsetWidth,
+            height: height
+        };
+        interval.interaction('tooltip', {
+            shared: true,
+            bounding: tooltipBounding,
+            render: (_event, payload)=>{
+                const { title, items } = payload;
+                const lastIsChange = items.filter((item)=>item.isChange);
+                let safeItems = items;
+                if (lastIsChange.length > 0) safeItems = [
+                    ...items.filter((item)=>!item.isChange),
+                    lastIsChange[lastIsChange.length - 1]
+                ];
+                return tooltipRender(title, safeItems ?? []) ?? null;
+            }
+        });
+    } else {
+        const tooltipBounding = {
+            x: 0,
+            y: 0,
+            width: container.clientWidth || container.offsetWidth,
+            height: height
+        };
+        view.interaction('tooltip', {
+            bounding: tooltipBounding
+        });
+    }
     applyAuxiliaryLineY(view, auxiliaryLineData);
     const nodeList = [];
     console.log('nodeList data:', data);

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

@@ -43,8 +43,11 @@ function renderG2LineChart(container, options) {
         lineWidth: 2,
         stroke: (datum)=>getColorByGroupType(datum[0]?.groupType ?? '', colorOpts)
     });
+    const xValueCount = new Set(data.map((d)=>d[x])).size;
     applyAxisX(view, {
-        grid: false
+        grid: false,
+        dataCount: xValueCount,
+        containerWidth: container.clientWidth
     });
     applyAxisY(view, {
         labelFormatter: formatAxis
@@ -81,9 +84,16 @@ function renderG2LineChart(container, options) {
                 })
         ]
     });
+    const tooltipBounding = {
+        x: 0,
+        y: 0,
+        width: container.clientWidth || container.offsetWidth,
+        height: height
+    };
     if (tooltipRender) view.interaction('tooltip', {
         shared: true,
         marker: false,
+        bounding: tooltipBounding,
         render: (_event, payload)=>{
             const { title, items } = payload;
             console.log('tooltipRender:', title, items, indicators);
@@ -112,6 +122,16 @@ function renderG2LineChart(container, options) {
         }
     });
     view.legend(false);
+    view.interaction('poptip', {
+        offsetY: -20,
+        offsetX: 0,
+        tipBackgroundColor: '#fcfcfc',
+        tipColor: '#333',
+        tipBorderRadius: '6px',
+        tipPadding: '10px 12px',
+        tipFontSize: '12px',
+        tipBoxShadow: '0 3px 6px -4px rgba(0, 0, 0, 1)'
+    });
     applyAuxiliaryLineY(view, auxiliaryLineData);
     const nodeList = [];
     console.log('nodeList data:', data);

package/package.json

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