@publishfx/publish-chart 2.1.10 → 2.1.12

package/CHANGELOG.md

@@ -1,3 +1,14 @@
+**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)
+- 2026-03-04T20:22:30+08:00 [feat(chart): 柱状图切换指标空白问题](http://lf.git.oa.mt/publish_platform/web/publish/commit/2e37e53f1322968e7a1e384bf148d7fd213fb7c2)
+- 2026-03-04T19:14:10+08:00 [feat(chart): 坐标轴label透明度](http://lf.git.oa.mt/publish_platform/web/publish/commit/47436b58d55a8c770a8374b70cf974db86e4aecc)
+- 2026-03-04T18:25:28+08:00 [feat(chart): 多指标折线图组合图y轴格式化](http://lf.git.oa.mt/publish_platform/web/publish/commit/e1577f958143c2d2e338adb73e4a6ac3193cb08f)
+- 2026-03-04T17:55:18+08:00 [fix(chart): 修复之前异常数据处理导致的组合图分组tooltip数据错误的问题](http://lf.git.oa.mt/publish_platform/web/publish/commit/62982adf8ce4ce3b04cc8fc6703e2fce05b43984)
+- 2026-03-04T17:53:43+08:00 [fix(chart):  组合图折线图触发下钻](http://lf.git.oa.mt/publish_platform/web/publish/commit/51cabfb3e90b990db03b04ab6e6c039d9c7d3239)
+- 2026-03-04T17:34:02+08:00 [fix(chart): 修复剩余数据全为0时的Y轴异常问题](http://lf.git.oa.mt/publish_platform/web/publish/commit/0d64328b1c38b71ad0289579592870fa20bc37b1)
+- 2026-03-04T17:13:55+08:00 [fix(chart): 辅助线分左右，分别影响主、副轴的刻度尺](http://lf.git.oa.mt/publish_platform/web/publish/commit/0c91a39b4fe8ff1b13999766e8f6f90dce85f37e)
+
 **2.1.10** fix(chart): 修复剩余数据全为0时的Y轴异常问题
 - 2026-03-04T17:34:02+08:00 [fix(chart): 修复剩余数据全为0时的Y轴异常问题](http://lf.git.oa.mt/publish_platform/web/publish/commit/0d64328b1c38b71ad0289579592870fa20bc37b1)
 - 2026-03-04T17:13:55+08:00 [fix(chart): 辅助线分左右，分别影响主、副轴的刻度尺](http://lf.git.oa.mt/publish_platform/web/publish/commit/0c91a39b4fe8ff1b13999766e8f6f90dce85f37e)

package/dist/adapters/DataAdapter.d.ts

@@ -6,6 +6,7 @@ export interface TransformConfig {
     isDescend?: boolean;
     isHorizontal?: boolean;
     isGroup?: boolean;
+    isOld?: boolean;
 }
 /**
  * 数据适配器类

package/dist/adapters/DataAdapter.js

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

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

@@ -88,12 +88,11 @@ const G2BarChart = ({ height = 300, data, x = "", y = "", indicatorMap, onChartC
                 symbol: "square"
             }));
         setLegendItems(items);
-        if (!activeIds.length) setActiveIds(items.map((i)=>i.id));
+        setActiveIds(items.map((i)=>i.id));
     }, [
         transformedData,
         safeIndicatorMap,
-        themeColors,
-        activeIds.length
+        themeColors
     ]);
     const filteredData = useMemo(()=>{
         if (!activeIds.length) return transformedData;

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

@@ -66,6 +66,7 @@ const G2CombineChart = ({ height = 300, data, x = "", y = "", z = "", indicatorM
     const tooltipContainerRef = useG2TooltipContainer();
     const isGroupRef = useRef(isGroup);
     const [isOldData, setIsOldData] = useState(false);
+    const currentTooltipTitleRef = useRef(null);
     isGroupRef.current = isGroup;
     console.log("G2CombineChart props:", data, x, y, z, indicators, legend, config, nodeSetting);
     const themeColors = contextConfig?.theme?.colors || [];
@@ -85,6 +86,7 @@ const G2CombineChart = ({ height = 300, data, x = "", y = "", z = "", indicatorM
             let result = transformDataToGroupBarLineFormat(data, x, y, indicators);
             data = result;
             setIsOldData(true);
+            console.log('tdv data:', data);
         }
         console.log("G2CombineChart renderG2CombineChart transformedData2:", data);
         const { transformedData, leftData, rightData } = DataAdapter.transform(data, "barLine", {
@@ -93,7 +95,8 @@ const G2CombineChart = ({ height = 300, data, x = "", y = "", z = "", indicatorM
             y: safeY,
             z,
             isDescend,
-            isGroup: isGroupRef.current
+            isGroup: isGroupRef.current,
+            isOld: !legend
         });
         return {
             transformedData: transformedData.map((item)=>dataTransform.processNodeInfo(item, contextConfig.nodeMap)),
@@ -125,9 +128,13 @@ const G2CombineChart = ({ height = 300, data, x = "", y = "", z = "", indicatorM
         safeIndicatorMap,
         y
     ]);
-    const formatLineAxis = useCallback((val)=>getAxisFormat(val, safeIndicatorMap, safeZ), [
+    const formatLineAxis = useCallback((val)=>{
+        const indicatorId = indicators?.length > 1 ? '' : safeZ;
+        return getAxisFormat(val, safeIndicatorMap, indicatorId);
+    }, [
         safeIndicatorMap,
-        safeZ
+        safeZ,
+        indicators
     ]);
     useEffect(()=>{
         if (!transformedData.length) {
@@ -170,7 +177,7 @@ const G2CombineChart = ({ height = 300, data, x = "", y = "", z = "", indicatorM
         if (!activeIds.length) return leftData;
         const result = leftData.filter((d)=>d.groupType ? activeIds.includes(String(d.groupType.replace("_compare", "") + "_" + d.isCombine)) : true);
         if (isGroupRef.current) result.forEach((item)=>{
-            item.total = result.filter((d)=>d.groupName === item.groupName).reduce((acc, d)=>acc + d.groupValue, 0);
+            item.total = result.filter((d)=>d.groupName === item.groupName).reduce((acc, d)=>acc + ('' === d.groupValue ? 0 : d.groupValue), 0);
         });
         return result;
     }, [
@@ -230,6 +237,7 @@ const G2CombineChart = ({ height = 300, data, x = "", y = "", z = "", indicatorM
             } : void 0,
             indicators,
             tooltipRender: (title, items)=>{
+                currentTooltipTitleRef.current = title;
                 const container = tooltipContainerRef.current;
                 if (!container) return null;
                 let safeItems = items.map((i)=>({
@@ -267,15 +275,18 @@ const G2CombineChart = ({ height = 300, data, x = "", y = "", z = "", indicatorM
             isGroup: isGroupRef.current
         });
         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.destroy();
                 chartRef.current = null;
             }

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

@@ -76,9 +76,13 @@ const G2LineChart = ({ height = 300, data, x = "", y = "", z = "", indicatorMap,
         safeY,
         auxiliaryLineData
     ]);
-    const formatAxis = useCallback((val)=>getAxisFormat(val, safeIndicatorMap, safeLegend), [
+    const formatAxis = useCallback((val)=>{
+        const indicatorId = indicators?.length > 1 ? '' : safeLegend;
+        return getAxisFormat(val, safeIndicatorMap, indicatorId);
+    }, [
         safeIndicatorMap,
-        safeLegend
+        safeLegend,
+        indicators
     ]);
     useEffect(()=>{
         if (!transformedData.length) {

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

@@ -82,6 +82,7 @@ function applyAxisX(mark, options = {}) {
         },
         labelAlign: 'horizontal',
         labelDx: (_datum, _index, _data)=>0,
+        labelOpacity: 0.6,
         ...axisFilter && {
             tickFilter: axisFilter('tick'),
             labelFilter: axisFilter('label')
@@ -96,6 +97,7 @@ function applyAxisY(mark, options = {}) {
     mark.axis('y', {
         title,
         labelAutoRotate,
+        labelOpacity: 0.6,
         grid,
         gridStroke,
         gridLineWidth,

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

@@ -38,8 +38,12 @@ function renderG2CombineChart(container, options) {
     console.log('renderG2CombineChart interval data:', intervalData);
     const intervalMaxY = intervalData.reduce((max, item)=>{
         const key = isGroup ? "total" : BAR_Y_FIELD;
+        console.log('intervalMaxY item:', key, item[key], intervalData);
+        if ('-' === item[key] || void 0 === item[key] || null === item[key] || '' === item[key]) return max;
         return Math.max(max, item[key]);
     }, 0);
+    console.log('intervalMaxY:', intervalMaxY);
+    console.log('tdv:', intervalMaxY);
     const auxLeftValues = auxiliaryLineData?.length ? auxiliaryLineData.filter((item)=>'left' === item.axis).map((item)=>item.value) : [];
     const maxAuxLeft = auxLeftValues.length ? Math.max(...auxLeftValues) : 0;
     const auxRightValues = auxiliaryLineData?.length ? auxiliaryLineData.filter((item)=>'right' === item.axis).map((item)=>item.value) : [];
@@ -104,7 +108,8 @@ function renderG2CombineChart(container, options) {
             0,
             0
         ],
-        labelFormatter: formatAxis
+        labelFormatter: formatAxis,
+        labelOpacity: 0.6
     });
     console.log('tooltip:', barColor, isCompare);
     interval.tooltip({
@@ -120,7 +125,8 @@ function renderG2CombineChart(container, options) {
                     channel: Y_AXIS_FIELD,
                     color: themeColors[index % themeColors.length] ?? themeColors[0] ?? "#5B8FF9",
                     percent: `${(100 * Number(datum.percent)).toFixed(2)}%`,
-                    isCombine: false
+                    isCombine: false,
+                    x: datum[x]
                 };
             }
         ].filter(Boolean) : [
@@ -140,7 +146,8 @@ function renderG2CombineChart(container, options) {
                     indicatorId: datum['groupType'].replace('_compare', ''),
                     channel: Y_AXIS_FIELD,
                     color: barColor || 'transparent',
-                    isCombine: false
+                    isCombine: false,
+                    x: datum[x]
                 } : false : false,
             isCompare ? (datum)=>datum.groupType.includes('_compare') ? {
                     name: datum['groupType'].replace('_compare', '_change'),
@@ -148,7 +155,8 @@ function renderG2CombineChart(container, options) {
                     value: datum?.change,
                     isChange: true,
                     color: 'transparent',
-                    isCombine: false
+                    isCombine: false,
+                    x: datum[x]
                 } : false : false
         ].filter(Boolean)
     });
@@ -156,14 +164,20 @@ function renderG2CombineChart(container, options) {
             ...item,
             [LINE_Y_FIELD]: item[Y_AXIS_FIELD]
         }));
-    console.log('renderG2CombineChart: line data:', lineData);
+    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)=>Math.max(max, item[LINE_Y_FIELD]), 0);
-    const compareLineMaxY = compareLineData.reduce((max, item)=>Math.max(max, item[LINE_Y_FIELD]), 0);
+    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);
@@ -212,7 +226,8 @@ function renderG2CombineChart(container, options) {
             0
         ],
         tickOpacity: 0,
-        labelFormatter: formatLineAxis
+        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({
@@ -267,96 +282,102 @@ function renderG2CombineChart(container, options) {
                 } : false
         ].filter(Boolean)
     });
-    if (tooltipRender) view.interaction('tooltip', {
-        shared: true,
-        crosshairsY: true,
-        marker: false,
-        render: (event, payload)=>{
-            const { title, items } = payload;
-            console.log('tooltipRender:', title, items);
-            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;
-            });
-            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) {
-                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')) {
+    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,
+            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) {
+                    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;
-                            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  {}
+                        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;
             }
-            return content;
-        }
-    });
+        });
+    }
     view.legend(false);
     view.interaction('poptip', {
         offsetY: -20,

package/package.json

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