@publishfx/publish-chart 2.1.43 → 2.1.44

package/CHANGELOG.md

@@ -1,3 +1,8 @@
+**2.1.44** feat(chart): 更新图表组件及发布脚本
+- 2026-07-08T11:17:13+08:00 [feat(chart): 更新图表组件及发布脚本](http://lf.git.oa.mt/publish_platform/web/publish/commit/c3efe54dd3e640b72ea027815efd84b5d817f472)
+- 2026-07-07T14:20:55+08:00 [feat: 组合图副轴间距调整 f-6880297364](http://lf.git.oa.mt/publish_platform/web/publish/commit/b662f2234806c5b6e40c5ae8d2ed4a7cacc03bee)
+- 2026-07-07T12:42:22+08:00 [feat: 辅助线延伸优化 f-6880297364](http://lf.git.oa.mt/publish_platform/web/publish/commit/41290b358961c2a1e7ff100addd11b23dc2d5990)
+
 **2.1.41** feat(chart): 分组对比折线图自定义图例与tooltip交互优化 f-6719092744
 - 2026-06-16T16:45:08+08:00 [feat(chart): 分组对比折线图自定义图例与tooltip交互优化 f-6719092744](http://lf.git.oa.mt/publish_platform/web/publish/commit/446f1dcea5fa50c1db96a395747bf26a5213a2f5)
 

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

@@ -285,6 +285,12 @@ export interface ApplyAuxiliaryLineYOptions {
     stroke?: string;
     strokeOpacity?: number;
     labelMaxLength?: number;
+    /**
+     * 辅助线向 Y 轴刻度区域左侧延伸的像素距离。
+     * G2 lineY 默认只覆盖主绘图区，设置后会把起点往左平移指定像素，让线穿过左侧坐标轴区域。
+     * 传 'auto' 时，会根据坐标系左侧偏移（paddingLeft + marginLeft）自动填满 Y 轴刻度区域。
+     */
+    extendLeft?: number | 'auto';
 }
 /** 在 view 上添加多条 lineY 辅助线 */
 export declare function applyAuxiliaryLineY(view: any, lines: AuxiliaryLineItem[], options?: ApplyAuxiliaryLineYOptions): void;

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

@@ -146,28 +146,140 @@ function applyLegendColor(view, options = {}) {
 }
 function applyAuxiliaryLineY(view, lines, options = {}) {
     if (!lines?.length) return;
-    const { labelMaxLength = 5, stroke = 'rgb(234, 54, 106)', maxLeft, maxRight } = options;
-    lines.forEach((auxLine)=>{
-        view.lineY().data([
+    const { labelMaxLength = 5, stroke = 'rgb(234, 54, 106)', maxLeft, maxRight, extendLeft = 0 } = options;
+    const isAutoExtend = 'auto' === extendLeft;
+    lines.forEach((auxLine, index)=>{
+        const lineMark = view.lineY().data([
             {
                 y: auxLine.value
             }
         ]).encode('y', auxLine.value).style('stroke', stroke).style('strokeOpacity', 1).style('opacity', 1).style('lineWidth', 2).style('shadowColor', 'transparent').animate(false).scale('y', {
             key: auxLine?.axis === 'right' ? 'line' : 'main'
         }).axis('x', false).label({
-            opacity: 1,
-            dx: -20,
-            dy: 0,
-            text: splitTextToMultiline(auxLine.name, labelMaxLength, '<br />'),
-            position: auxLine?.axis === 'right' ? 'bottom-right' : 'bottom-left',
-            render: (text)=>{
-                let top = auxLine?.name?.length > 5 ? -38 : -24;
-                if ((auxLine?.axis === 'left' || auxLine?.axis === '') && maxLeft && auxLine.value > 0.92 * maxLeft || auxLine?.axis === 'right' && maxRight && auxLine.value > 0.92 * maxRight) top = 0;
-                top += 'px';
-                return `<div style="background-color: rgba(255, 0, 102, 0.15); padding: 5px; border-radius: 5px;font-size: 12px;position: relative;left: ${auxLine?.axis === 'right' ? '-75px' : '0px'}; top: ${top} ; display:inline-block;line-height: 14px; color: #FF0066;
-          font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;">${text}</div>`;
-            }
+            text: ' ',
+            fill: 'transparent',
+            opacity: 0
         });
+        if (isAutoExtend || 'number' == typeof extendLeft && extendLeft > 0) {
+            lineMark.style('strokeOpacity', 0).style('opacity', 0);
+            view.shape().data([
+                {
+                    x: `_aux_${index}`,
+                    y: auxLine.value
+                }
+            ]).encode('x', 'x').encode('y', 'y').scale('x', {
+                type: 'band',
+                independent: true
+            }).scale('y', {
+                key: auxLine?.axis === 'right' ? 'line' : 'main'
+            }).axis('x', false).tooltip(false).style('clip', false).style('render', ({ y: py }, context)=>{
+                const { document } = context;
+                const coordinate = context?.coordinate;
+                const coorOptions = coordinate?.getOptions?.() || {};
+                const plotWidth = coorOptions.width ?? 0;
+                const plotHeight = coorOptions.height ?? 0;
+                const transformations = coorOptions.transformations ?? [];
+                const isTransposed = transformations.some((t)=>Array.isArray(t) ? t.includes('transpose') : 'transpose' === t);
+                const isRightAxis = auxLine?.axis === 'right';
+                const domainMax = isRightAxis ? maxRight ?? 1 : maxLeft ?? 1;
+                const normalized = domainMax > 0 ? auxLine.value / domainMax : 0;
+                let linePos;
+                if (isTransposed) {
+                    const mapped = coordinate?.map?.([
+                        0,
+                        1 - normalized
+                    ]);
+                    linePos = mapped?.[0] ?? py;
+                } else linePos = py;
+                const g = document.createElement('g', {});
+                const axisLeftWidth = (coorOptions.paddingLeft ?? 0) + (coorOptions.marginLeft ?? 0);
+                const axisRightWidth = (coorOptions.paddingRight ?? 0) + (coorOptions.marginRight ?? 0);
+                const axisTopHeight = (coorOptions.paddingTop ?? 0) + (coorOptions.marginTop ?? 0);
+                const leftExtend = isAutoExtend ? axisLeftWidth : extendLeft;
+                const rightExtend = isAutoExtend ? axisRightWidth : extendLeft;
+                const topExtend = isAutoExtend ? axisTopHeight : extendLeft;
+                let pathD;
+                pathD = isTransposed ? `M ${linePos} ${-topExtend} L ${linePos} ${plotHeight}` : isRightAxis ? `M 0 ${linePos} L ${plotWidth + rightExtend} ${linePos}` : `M ${-leftExtend} ${linePos} L ${plotWidth} ${linePos}`;
+                const path = document.createElement('path', {
+                    style: {
+                        d: pathD,
+                        stroke,
+                        lineWidth: 2,
+                        strokeOpacity: 1,
+                        opacity: 1
+                    }
+                });
+                g.appendChild(path);
+                const labelText = splitTextToMultiline(auxLine.name, labelMaxLength, '\n');
+                const labelLines = labelText.split('\n');
+                const lineHeight = 14;
+                const fontSize = 12;
+                const padding = 5;
+                const maxLineWidth = Math.max(...labelLines.map((line)=>{
+                    let width = 0;
+                    for (const char of line)width += char.charCodeAt(0) > 127 ? fontSize : 0.6 * fontSize;
+                    return width;
+                }));
+                const labelWidth = maxLineWidth + 2 * padding;
+                const labelHeight = labelLines.length * lineHeight + 2 * padding;
+                const isNearTop = (auxLine?.axis === 'left' || auxLine?.axis === '') && maxLeft && auxLine.value > 0.98 * maxLeft || isRightAxis && maxRight && auxLine.value > 0.98 * maxRight;
+                let top = auxLine?.name?.length > 5 ? -38 : -24;
+                if (isNearTop) top = 8;
+                const isNearRightEdge = isTransposed && maxLeft && auxLine.value > 0.98 * maxLeft;
+                let labelX;
+                let labelY;
+                let textX;
+                let textAnchor;
+                if (isTransposed) {
+                    if (isNearRightEdge) {
+                        labelX = linePos - labelWidth - 8;
+                        textAnchor = 'start';
+                    } else {
+                        labelX = linePos + 8;
+                        textAnchor = 'start';
+                    }
+                    labelY = plotHeight - labelHeight;
+                    textX = labelX + padding;
+                } else if (isRightAxis) {
+                    const leftShift = 0;
+                    const rightEdge = plotWidth + rightExtend - leftShift;
+                    labelY = linePos + top - padding;
+                    labelX = rightEdge - labelWidth;
+                    textX = labelX + padding;
+                    textAnchor = 'start';
+                } else {
+                    labelY = linePos + top - padding;
+                    labelX = -leftExtend;
+                    textX = labelX + padding;
+                    textAnchor = 'start';
+                }
+                const labelBg = document.createElement('rect', {
+                    style: {
+                        x: labelX,
+                        y: labelY,
+                        width: labelWidth,
+                        height: labelHeight,
+                        fill: 'rgba(255, 0, 102, 0.15)',
+                        radius: 5
+                    }
+                });
+                g.appendChild(labelBg);
+                const labelEl = document.createElement('text', {
+                    style: {
+                        x: textX,
+                        y: labelY + padding,
+                        text: labelText,
+                        fill: '#FF0066',
+                        fontSize,
+                        fontFamily: "'PingFang SC', 'Microsoft YaHei', sans-serif",
+                        textBaseline: 'top',
+                        textAnchor
+                    }
+                });
+                g.appendChild(labelEl);
+                return g;
+            });
+        }
     });
 }
 function getColorByGroupType(groupType, options) {
@@ -330,15 +442,15 @@ function fillMissingIndicator(baseItems, safeTitle, isCompare, isGroup = false)
             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,
+                    indicatorId,
                     name: indicatorId,
                     value: '-',
                     x: safeTitle,
-                    color: color,
+                    color,
                     dataType: 'manual'
                 });
                 if (!baseItems.find((item)=>item.indicatorId === indicatorId && item.name === indicatorId + '_compare')) baseItems.push({
-                    indicatorId: indicatorId,
+                    indicatorId,
                     name: indicatorId + '_compare',
                     tipType: 'compareline',
                     value: '-',
@@ -346,7 +458,7 @@ function fillMissingIndicator(baseItems, safeTitle, isCompare, isGroup = false)
                     dataType: 'manual'
                 });
                 if (!baseItems.find((item)=>item.indicatorId === indicatorId && item.name === indicatorId + '_change')) baseItems.push({
-                    indicatorId: indicatorId,
+                    indicatorId,
                     name: indicatorId + '_change',
                     isChange: true,
                     value: '-',

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

@@ -134,7 +134,8 @@ function renderG2BarChart(container, options) {
     });
     applyAuxiliaryLineY(view, auxiliaryLineData, {
         labelMaxLength: 5,
-        maxLeft: maxY
+        maxLeft: maxY,
+        extendLeft: 'auto'
     });
     const nodeResult = applyNodeData(view, nodeData, x, y);
     if (isDataTag && formatLabel) interval.label({

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

@@ -2,9 +2,9 @@
  * G2 柱状 + 折线组合图函数式 API
  * 复用 G2BarChart / G2LineChart 的模式：React 负责数据与配置，G2 负责纯渲染
  */
-import { Chart } from "@antv/g2";
-import type { ChartTimeRange, IndicatorInfo } from "../../../core/ChartTypes";
-import { type AuxiliaryLineItem } from "./g2Helpers";
+import { Chart } from '@antv/g2';
+import type { ChartTimeRange, IndicatorInfo } from '../../../core/ChartTypes';
+import { type AuxiliaryLineItem } from './g2Helpers';
 export interface RenderG2CombineChartOptions {
     /** 已转换后的数据：约定包含 groupName、groupType、groupValue 等字段 */
     data: any[];

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

@@ -18,7 +18,7 @@ function renderG2CombineChart(container, options) {
     });
     const minLabelWidth = data.some((d)=>d.groupName.length < 3) ? 30 : 90;
     const view = getMainView(chart);
-    view.attr('marginLeft', 0).attr('marginRight', 30).attr('marginTop', 16).attr('marginBottom', 0).animate(false);
+    view.attr('marginLeft', 0).attr('marginRight', 0).attr('marginTop', 16).attr('marginBottom', 0).animate(false);
     view.data(data);
     const xValueCount = new Set(data.map((d)=>d[x])).size;
     applyAxisX(view, {
@@ -28,7 +28,7 @@ function renderG2CombineChart(container, options) {
         containerWidth: container.clientWidth,
         minLabelWidth
     });
-    const barColor = themeColors[0] ?? "#5B8FF9";
+    const barColor = themeColors[0] ?? '#5B8FF9';
     applyHighlightDate(view, x, data, highlightDate, isHighlight);
     const intervalData = data.filter((item)=>!item.isCombine).map((item)=>({
             ...item,
@@ -39,7 +39,7 @@ function renderG2CombineChart(container, options) {
     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(maxLeft, maxAuxLeft);
-    const interval = view.interval().data(intervalData).encode("x", x).encode("y", BAR_Y_FIELD).encode("color", "groupType").animate(false).transform(isGroup ? {
+    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
     } : {
@@ -60,7 +60,7 @@ function renderG2CombineChart(container, options) {
         fill: (datum)=>{
             const groupType = String(datum.groupType ?? '');
             const index = legendItems.findIndex((item)=>item.id === `${groupType}_${datum.isCombine}`);
-            if (isGroup) return themeColors[index % themeColors.length] ?? themeColors[0] ?? "#5B8FF9";
+            if (isGroup) return themeColors[index % themeColors.length] ?? themeColors[0] ?? '#5B8FF9';
             if (groupType.includes('_compare')) return {
                 image: lines({
                     backgroundColor: '#fff',
@@ -110,7 +110,7 @@ function renderG2CombineChart(container, options) {
                     name: datum['groupType'],
                     indicatorId,
                     channel: Y_AXIS_FIELD,
-                    color: themeColors[index % themeColors.length] ?? themeColors[0] ?? "#5B8FF9",
+                    color: themeColors[index % themeColors.length] ?? themeColors[0] ?? '#5B8FF9',
                     percent: `${(100 * Number(datum.percent)).toFixed(2)}%`,
                     isCombine: false,
                     x: datum[x]
@@ -156,7 +156,7 @@ function renderG2CombineChart(container, options) {
             [LINE_Y_FIELD]: item[Y_AXIS_FIELD]
         }));
     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({
+    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];
@@ -261,7 +261,7 @@ function renderG2CombineChart(container, options) {
         marker: false,
         render: (_event, payload)=>{
             const { title, items } = payload;
-            let safeTitle = title.replace(/,.*$/, '');
+            const 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);
@@ -302,7 +302,9 @@ function renderG2CombineChart(container, options) {
     });
     applyAuxiliaryLineY(view, auxiliaryLineData, {
         maxLeft,
-        maxRight
+        maxRight,
+        extendLeft: 'auto',
+        labelMaxLength: 5
     });
     const nodeResult = applyNodeData(view, nodeData, x, 'groupValue');
     if (formatLabel) {

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

@@ -120,7 +120,8 @@ function renderG2LineChart(container, options) {
         tipBoxShadow: '0 3px 6px -4px rgba(0, 0, 0, 1)'
     });
     applyAuxiliaryLineY(view, auxiliaryLineData, {
-        maxLeft: maxY
+        maxLeft: maxY,
+        extendLeft: 'auto'
     });
     const nodeResult = applyNodeData(view, nodeData, x, y);
     if (isDataTag && formatLabel) {

package/package.json

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