@publishfx/publish-chart 2.1.5 → 2.1.7

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+**2.1.7** fix(chart): 修复折线图有空数据的异常场景
+- 2026-03-03T17:50:03+08:00 [fix(chart): 修复折线图有空数据的异常场景](http://lf.git.oa.mt/publish_platform/web/publish/commit/3465ede843d4fb156932871cdf042315dbb17096)
+- 2026-03-03T17:38:27+08:00 [fix(chart): 组合图柱数据缺失问题优化](http://lf.git.oa.mt/publish_platform/web/publish/commit/fa55e35a7569b9e7000d2c4dc5d09eee3b60bfff)
+- 2026-03-03T17:35:16+08:00 [fix: tserror](http://lf.git.oa.mt/publish_platform/web/publish/commit/995efdbe45391ecdb06ef6838c65d9bc87c33efa)
+- 2026-03-03T17:28:25+08:00 [feat: 去掉element:click](http://lf.git.oa.mt/publish_platform/web/publish/commit/5bb84001d505392306f4dfd8300e7d21f47fe95b)
+- 2026-03-03T17:26:42+08:00 [fix: 折线图点击无法下钻](http://lf.git.oa.mt/publish_platform/web/publish/commit/5395a60b96d9db398d5a4c5c8610481cbba8362a)
+- 2026-03-03T16:36:31+08:00 [fix: label缩略时要设置minLength](http://lf.git.oa.mt/publish_platform/web/publish/commit/b11ff5ff52376442f3a9b057b942f0d47c4f9ee5)
+- 2026-03-03T14:19:39+08:00 [feat(chart): 组合图排序代码整理](http://lf.git.oa.mt/publish_platform/web/publish/commit/baab4ed6bbd0a3bac46fccb1d3875af241368770)
+
+**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/adapters/DataAdapter.js

@@ -106,7 +106,7 @@ class DataAdapter {
         if (config.y) dv.transform({
             type: 'map',
             callback: (row)=>{
-                row[config.y] = '' !== row[config.y] ? +row[config.y] : '-';
+                row[config.y] = '' !== row[config.y] && '-' !== row[config.y] && null !== row[config.y] ? +row[config.y] : '-';
                 return row;
             }
         });
@@ -158,10 +158,15 @@ class DataAdapter {
             });
             const xKey = config.x ?? 'x';
             const sortData = tdv.rows.map((item)=>item[xKey]);
-            if (config.isDescend) combinedv.rows.sort((a, b)=>sortData.indexOf(a[xKey]) - sortData.indexOf(b[xKey]));
-            else combinedv.rows.sort((a, b)=>sortData.indexOf(a[xKey]) - sortData.indexOf(b[xKey]));
+            combinedv.rows.sort((a, b)=>{
+                const aIndex = sortData.indexOf(a[xKey]);
+                const bIndex = sortData.indexOf(b[xKey]);
+                if (-1 === aIndex) return 1;
+                if (-1 === bIndex) return -1;
+                return aIndex - bIndex;
+            });
         }
-        console.log('renderG2CombineChart transformedData:leftData:', tdv.rows, 'rightData:', combinedv.rows);
+        console.log('leftData:', tdv.rows, 'rightData:', combinedv.rows);
         return {
             transformedData: dv.rows,
             leftData: tdv.rows,

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

@@ -31,6 +31,7 @@ const G2LineChart = ({ height = 300, data, x = "", y = "", z = "", indicatorMap,
     const [legendItems, setLegendItems] = useState([]);
     const containerRef = useRef(null);
     const chartRef = useRef(null);
+    const currentTooltipTitleRef = useRef(null);
     const [viewWidth, setViewWidth] = useState(0);
     const [viewOffset, setViewOffset] = useState(0);
     const transformedData = useMemo(()=>{
@@ -72,6 +73,7 @@ const G2LineChart = ({ height = 300, data, x = "", y = "", z = "", indicatorMap,
         safeY,
         auxiliaryLineData
     ]);
+    console.log('minY, maxY:', minY, maxY);
     const formatAxis = useCallback((val)=>getAxisFormat(val, safeIndicatorMap, safeLegend), [
         safeIndicatorMap,
         safeLegend
@@ -143,6 +145,7 @@ const G2LineChart = ({ height = 300, data, x = "", y = "", z = "", indicatorMap,
             } : void 0,
             height: height - canvasMarginBottom,
             tooltipRender: (title, items)=>{
+                currentTooltipTitleRef.current = title;
                 const container = tooltipContainerRef.current;
                 if (!container) return null;
                 let safeItems = items.map((i)=>({
@@ -174,15 +177,18 @@ const G2LineChart = ({ height = 300, data, x = "", y = "", z = "", indicatorMap,
             }
         });
         chartRef.current = chart;
-        if (onChartClick) chart.on("element:click", (e)=>{
-            const datum = e.data?.data;
-            if (datum) onChartClick({
-                title: datum[x]
-            });
+        if (onChartClick) chart.on("plot:click", (_e)=>{
+            const tooltipTitle = currentTooltipTitleRef.current;
+            if (null != tooltipTitle) {
+                console.log('使用 tooltip title 触发下钻:', tooltipTitle);
+                onChartClick({
+                    title: tooltipTitle
+                });
+            }
         });
         return ()=>{
             if (chartRef.current) {
-                chartRef.current.off("element:click");
+                chartRef.current.off("plot:click");
                 chartRef.current.off("element:mouseenter");
                 chartRef.current.off("element:mouseleave");
                 chartRef.current.destroy();

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,19 @@ 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
+            minLength: 80,
+            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);
@@ -183,6 +186,7 @@ function renderG2CombineChart(container, options) {
                 ];
                 const groupType = String(datum?.groupType ?? '');
                 const index = groupTypeArr.findIndex((item)=>item === groupType);
+                console.log('line: groupTypeArr:', groupTypeArr, groupType, index, lineColors, getIndicatorCompareName(_indicatorMap, datum['groupType']), datum['groupType']);
                 return {
                     value: datum[LINE_Y_FIELD],
                     name: getIndicatorCompareName(_indicatorMap, datum['groupType']),
@@ -275,7 +279,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 +300,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.7",
   "description": "A React chart component library for the Publish platform, including BarChart, LineChart, BarLineChart and other visualization components",
   "type": "module",
   "keywords": [