@publishfx/publish-chart 1.5.0 → 2.0.0

package/CHANGELOG.md

@@ -0,0 +1,8 @@
+**2.0.0** feat(chart): 修改ts错误问题
+- 2026-02-02T14:37:21+08:00 [feat(chart): 修改ts错误问题](http://lf.git.oa.mt/publish_platform/web/publish/commit/023b12647850619e340164e02a1f86e884eccf35)
+- 2026-02-02T11:12:14+08:00 [feat(chart): 新增G2图表组件](http://lf.git.oa.mt/publish_platform/web/publish/commit/cfec9e945ceb9d8c0645dcea3d9adfe43c8d0bdc)
+
+# @publishfx/publish-chart CHANGELOG
+
+**1.5.0** feat(chart): 多指标对比折线图统一指标颜色统一
+- 2026-01-22T21:47:35+08:00 [feat(chart): 多指标对比折线图统一指标颜色统一](http://lf.git.oa.mt/publish_platform/web/publish/commit/eaf01cf03ecb479adf3b0bc82e941f2912513f43)

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

@@ -0,0 +1,8 @@
+/**
+ * G2@5 基础柱状图组件
+ * 复用现有架构，仅在渲染层面使用 G2@5 API
+ */
+import React from 'react';
+import type { BaseChartProps } from '../../../core/ChartTypes';
+declare const G2BarChart: React.FC<BaseChartProps>;
+export default G2BarChart;

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

@@ -0,0 +1,107 @@
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef } from "react";
+import { Chart } from "@antv/g2";
+import { useChartContext } from "../../../core/ChartContext.js";
+import { DataAdapter } from "../../../adapters/DataAdapter.js";
+const G2BarChart = ({ height = 300, data, x = '', y = '', indicatorMap, onChartClick, legend = '', config })=>{
+    const { formatter, dataTransform, config: contextConfig } = useChartContext();
+    const safeIndicatorMap = indicatorMap || contextConfig.indicatorMap || {};
+    const safeLegend = legend || y;
+    const chartConfig = config || {};
+    const { isDataTag = false, isDescend = false, isHorizontal = false } = chartConfig;
+    const transformedData = useMemo(()=>{
+        const result = DataAdapter.transform(data, 'bar', {
+            type: 'bar',
+            x,
+            y,
+            isDescend,
+            isHorizontal
+        });
+        return result.map((item)=>dataTransform.processNodeInfo(item, contextConfig.nodeMap));
+    }, [
+        data,
+        x,
+        y,
+        isDescend,
+        isHorizontal,
+        dataTransform,
+        contextConfig.nodeMap
+    ]);
+    const maxY = useMemo(()=>{
+        const values = transformedData.filter((item)=>'-' !== item[y] && void 0 !== item[y] && null !== item[y]).map((item)=>Number(item[y]) || 0);
+        return values.length > 0 ? Math.max(...values) : 0;
+    }, [
+        transformedData,
+        y
+    ]);
+    const containerRef = useRef(null);
+    const chartRef = useRef(null);
+    useEffect(()=>{
+        if (!containerRef.current || !transformedData.length) return;
+        if (chartRef.current) chartRef.current.destroy();
+        const chart = new Chart({
+            container: containerRef.current,
+            autoFit: true,
+            height: height
+        });
+        chart.data(transformedData);
+        if (isHorizontal) chart.coordinate({
+            transform: [
+                {
+                    type: 'transpose'
+                }
+            ]
+        });
+        chart.scale({
+            [y]: {
+                nice: true,
+                min: 0,
+                max: maxY
+            },
+            [x]: {
+                type: 'cat'
+            }
+        });
+        if (safeLegend && false !== chartConfig.isLegend) chart.legend(safeLegend, {
+            position: 'top'
+        });
+        chart.interaction('poptip', true);
+        const interval = chart.interval().encode('x', x).encode('y', y);
+        if (safeLegend) interval.encode('color', safeLegend);
+        if (isDataTag) interval.label({
+            text: (d)=>formatter.formatIndicator(d[y], safeIndicatorMap[y]),
+            position: isHorizontal ? 'right' : 'top',
+            offset: 5
+        });
+        chart.render();
+        chartRef.current = chart;
+        return ()=>{
+            if (chartRef.current) {
+                chartRef.current.destroy();
+                chartRef.current = null;
+            }
+        };
+    }, [
+        transformedData,
+        height,
+        x,
+        y,
+        safeLegend,
+        isHorizontal,
+        isDataTag,
+        maxY,
+        chartConfig.isLegend,
+        safeIndicatorMap,
+        formatter,
+        onChartClick
+    ]);
+    return /*#__PURE__*/ jsx("div", {
+        ref: containerRef,
+        style: {
+            width: '100%',
+            height: `${height}px`
+        }
+    });
+};
+const base_G2BarChart = G2BarChart;
+export { base_G2BarChart as default };

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

@@ -0,0 +1,38 @@
+/**
+ * G2@5 仪表盘（Gauge）图表组件
+ * 支持自定义 scale 和阈值区间，可基于目标值设置刻度
+ */
+import React from 'react';
+export interface G2GaugeChartProps {
+    /** 当前值 */
+    value: number;
+    /** 最小值 */
+    min?: number;
+    /** 最大值 */
+    max: number;
+    /** 目标值（用于设置阈值区间和刻度） */
+    target?: number;
+    /** 自定义阈值区间配置（优先级高于 target） */
+    thresholds?: number[] | Array<{
+        /** 阈值点 */
+        value: number;
+        /** 区间颜色 */
+        color: string;
+    }>;
+    /** 自定义刻度点（优先级高于 target） */
+    ticks?: number[];
+    /** 图表高度 */
+    height?: number;
+    /** 是否显示百分比 */
+    showPercent?: boolean;
+    /** 自定义格式化函数 */
+    formatter?: (value: number, percent: number) => string;
+    /** 刻度标签格式化函数（用于格式化刻度上的数值，如 100000 -> "100.00k"） */
+    tickFormatter?: (value: number) => string;
+    /** 指针颜色 */
+    pointerColor?: string;
+    /** 阈值颜色数组 */
+    thresholdColors?: string[];
+}
+declare const G2GaugeChart: React.FC<G2GaugeChartProps>;
+export default G2GaugeChart;

package/dist/components/g2/base/G2GaugeChart.example.d.ts

@@ -0,0 +1,10 @@
+/**
+ * G2 Gauge 图表使用示例
+ * 展示如何自定义 scale 和阈值区间
+ */
+import React from 'react';
+export declare const Example1_TargetBased: React.FC;
+export declare const Example2_CustomThresholds: React.FC;
+export declare const Example3_CustomThresholdsWithColors: React.FC;
+export declare const Example4_TargetWithCustomScale: React.FC;
+export declare const Example5_Simple: React.FC;

package/dist/components/g2/base/G2GaugeChart.example.js

@@ -0,0 +1,88 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import G2GaugeChart from "./G2GaugeChart.js";
+const Example1_TargetBased = ()=>/*#__PURE__*/ jsx(G2GaugeChart, {
+        value: 147530,
+        min: 0,
+        max: 200000,
+        target: 160000,
+        showPercent: true
+    });
+const Example2_CustomThresholds = ()=>/*#__PURE__*/ jsx(G2GaugeChart, {
+        value: 147530,
+        min: 0,
+        max: 200000,
+        thresholds: [
+            60000,
+            120000,
+            180000
+        ],
+        thresholdColors: [
+            '#FF4D4F',
+            '#FFA940',
+            '#FFC53D',
+            '#52C41A'
+        ],
+        ticks: [
+            0,
+            50000,
+            100000,
+            150000,
+            200000
+        ],
+        showPercent: true
+    });
+const Example3_CustomThresholdsWithColors = ()=>/*#__PURE__*/ jsx(G2GaugeChart, {
+        value: 147530,
+        min: 0,
+        max: 200000,
+        thresholds: [
+            {
+                value: 50000,
+                color: '#FF4D4F'
+            },
+            {
+                value: 100000,
+                color: '#FFA940'
+            },
+            {
+                value: 150000,
+                color: '#FFC53D'
+            },
+            {
+                value: 200000,
+                color: '#52C41A'
+            }
+        ],
+        ticks: [
+            0,
+            50000,
+            100000,
+            150000,
+            200000
+        ],
+        showPercent: true
+    });
+const Example4_TargetWithCustomScale = ()=>{
+    const max = 200000;
+    const target = 160000;
+    return /*#__PURE__*/ jsx(G2GaugeChart, {
+        value: 147530,
+        min: 0,
+        max: max,
+        target: target,
+        thresholdColors: [
+            '#FF4D4F',
+            '#FFA940',
+            '#FFC53D',
+            '#52C41A'
+        ],
+        formatter: (value, percent)=>`${value}\n完成度: ${percent.toFixed(1)}%`
+    });
+};
+const Example5_Simple = ()=>/*#__PURE__*/ jsx(G2GaugeChart, {
+        value: 147530,
+        max: 200000,
+        showPercent: true
+    });
+export { Example1_TargetBased, Example2_CustomThresholds, Example3_CustomThresholdsWithColors, Example4_TargetWithCustomScale, Example5_Simple };

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

@@ -0,0 +1,137 @@
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef } from "react";
+import { Chart } from "@antv/g2";
+const G2GaugeChart = ({ value, min = 0, max, target, thresholds, ticks, height = 300, showPercent = true, formatter, tickFormatter, thresholdColors = [
+    '#F4664A',
+    '#FAAD14',
+    '#52C41A'
+] })=>{
+    const containerRef = useRef(null);
+    const chartRef = useRef(null);
+    const scaleTicks = useMemo(()=>{
+        if (ticks && ticks.length > 0) return ticks;
+        if (target) return [
+            min,
+            Math.round(0.5 * target),
+            target,
+            Math.round(0.9 * max),
+            max
+        ];
+        const step = (max - min) / 4;
+        return [
+            min,
+            Math.round(min + step),
+            Math.round(min + 2 * step),
+            Math.round(min + 3 * step),
+            max
+        ];
+    }, [
+        min,
+        max,
+        target,
+        ticks
+    ]);
+    const thresholdValues = useMemo(()=>{
+        if (thresholds) {
+            if (Array.isArray(thresholds) && thresholds.length > 0 && 'number' == typeof thresholds[0]) return thresholds;
+            if (Array.isArray(thresholds) && thresholds.length > 0 && 'object' == typeof thresholds[0]) return thresholds.map((t)=>t.value);
+        }
+        if (target) return [
+            Math.round(0.6 * target),
+            Math.round(0.9 * target),
+            target
+        ];
+        const step = (max - min) / 3;
+        return [
+            Math.round(min + step),
+            Math.round(min + 2 * step),
+            max
+        ];
+    }, [
+        min,
+        max,
+        target,
+        thresholds
+    ]);
+    const thresholdColorArray = useMemo(()=>{
+        if (thresholds && Array.isArray(thresholds) && thresholds.length > 0 && 'object' == typeof thresholds[0]) return thresholds.map((t)=>t.color);
+        return thresholdColors;
+    }, [
+        thresholds,
+        thresholdColors
+    ]);
+    useEffect(()=>{
+        if (!containerRef.current) return;
+        if (chartRef.current) chartRef.current.destroy();
+        const chart = new Chart({
+            container: containerRef.current,
+            autoFit: true,
+            height: height
+        });
+        chart.options({
+            type: 'gauge',
+            data: {
+                value: {
+                    target: value,
+                    total: max,
+                    name: 'value',
+                    thresholds: thresholdValues
+                }
+            },
+            scale: {
+                color: {
+                    range: thresholdColorArray
+                },
+                value: {
+                    formatter: tickFormatter || ((d)=>{
+                        const matchedTick = scaleTicks.find((tick)=>Math.abs(d - tick) < 0.01);
+                        return void 0 !== matchedTick ? String(matchedTick) : '';
+                    }),
+                    domain: [
+                        min,
+                        max
+                    ],
+                    tickCount: scaleTicks.length,
+                    ticks: scaleTicks
+                }
+            },
+            style: {
+                textContent: (target, total)=>{
+                    const percent = (target / total * 100).toFixed(3);
+                    if (formatter) return formatter(target, parseFloat(percent));
+                    return showPercent ? `${target}\n占比: ${percent}%` : String(target);
+                }
+            },
+            legend: false
+        });
+        chart.render();
+        chartRef.current = chart;
+        return ()=>{
+            if (chartRef.current) {
+                chartRef.current.destroy();
+                chartRef.current = null;
+            }
+        };
+    }, [
+        value,
+        min,
+        max,
+        target,
+        thresholdValues,
+        thresholdColorArray,
+        scaleTicks,
+        height,
+        showPercent,
+        formatter,
+        tickFormatter
+    ]);
+    return /*#__PURE__*/ jsx("div", {
+        ref: containerRef,
+        style: {
+            width: '100%',
+            height: `${height}px`
+        }
+    });
+};
+const base_G2GaugeChart = G2GaugeChart;
+export { base_G2GaugeChart as default };

package/dist/index.d.ts

@@ -20,6 +20,9 @@ export { default as GroupLine } from './components/composite/GroupLine';
 export { default as GroupLineCompare } from './components/composite/GroupLineCompare';
 export { default as MultipleLine } from './components/composite/MultipleLine';
 export { default as MultipleCompareLine } from './components/composite/MultipleCompareLine';
+export { default as G2BarChart } from './components/g2/base/G2BarChart';
+export { default as G2GaugeChart } from './components/g2/base/G2GaugeChart';
+export type { G2GaugeChartProps } from './components/g2/base/G2GaugeChart';
 export { createLazyComponent, createLazyComponents } from './utils/lazyHelpers';
 export { TypeAdapter } from './adapters/TypeAdapter';
 export { DataAdapter } from './adapters/DataAdapter';

package/dist/index.js

@@ -14,6 +14,8 @@ import GroupLine from "./components/composite/GroupLine.js";
 import GroupLineCompare from "./components/composite/GroupLineCompare.js";
 import MultipleLine from "./components/composite/MultipleLine.js";
 import MultipleCompareLine from "./components/composite/MultipleCompareLine.js";
+import G2BarChart from "./components/g2/base/G2BarChart.js";
+import G2GaugeChart from "./components/g2/base/G2GaugeChart.js";
 import { createLazyComponent, createLazyComponents } from "./utils/lazyHelpers.js";
 import { TypeAdapter } from "./adapters/TypeAdapter.js";
 import { DataAdapter } from "./adapters/DataAdapter.js";
@@ -23,4 +25,4 @@ import { BigNumberUtil, formatBigNumber, formatIndicatorV2, formatNumberV2, form
 import { calTextWidth, calculateBarWidth, createStripePatternCanvas, getAxisFormat, getAxisHorPaddingByText, markerStyle, truncateText } from "./utils/chartHelpers.js";
 import { getIntervalRatio, groupArray, transformIndicatorList } from "./utils/dataTransform.js";
 import { getIndicator, getIndicatorCompareName, getIndicatorName } from "./utils/indicatorHelpers.js";
-export { AuxiliaryLine, BarChart, BarLineAdapter, BarLineChart, BarLineCompareWeekend, BigNumberUtil, ChartProvider, DataAdapter, DefaultDataTransformService, DefaultFormatterService, GroupBar, GroupBarLine, GroupCompare, GroupLine, GroupLineCompare, LineChart, MultipleCompareLine, MultipleLine, TypeAdapter, XAxisBackground, calTextWidth, calculateBarWidth, createDataTransformService, createFormatterService, createLazyComponent, createLazyComponents, createStripePatternCanvas, defaultChartConfig, formatBigNumber, formatIndicatorV2, formatNumberV2, formatPercentage, getAxisFormat, getAxisFormatFromContext, getAxisHorPaddingByText, getIndicator, getIndicatorCompareName, getIndicatorName, getIntervalRatio, getThemeColors, groupArray, markerStyle, mergeChartConfig, transformIndicatorList, truncateText, useChartContext };
+export { AuxiliaryLine, BarChart, BarLineAdapter, BarLineChart, BarLineCompareWeekend, BigNumberUtil, ChartProvider, DataAdapter, DefaultDataTransformService, DefaultFormatterService, G2BarChart, G2GaugeChart, GroupBar, GroupBarLine, GroupCompare, GroupLine, GroupLineCompare, LineChart, MultipleCompareLine, MultipleLine, TypeAdapter, XAxisBackground, calTextWidth, calculateBarWidth, createDataTransformService, createFormatterService, createLazyComponent, createLazyComponents, createStripePatternCanvas, defaultChartConfig, formatBigNumber, formatIndicatorV2, formatNumberV2, formatPercentage, getAxisFormat, getAxisFormatFromContext, getAxisHorPaddingByText, getIndicator, getIndicatorCompareName, getIndicatorName, getIntervalRatio, getThemeColors, groupArray, markerStyle, mergeChartConfig, transformIndicatorList, truncateText, useChartContext };

package/dist/utils/lazyHelpers.d.ts

@@ -6,7 +6,7 @@
  * 创建 lazy 组件（从命名导出）
  *
  * @example
- * const BarChart = createLazyComponent(() => import('@moonton/publish-chart'), 'BarChart');
+ * const BarChart = createLazyComponent(() => import('@publishfx/publish-chart'), 'BarChart');
  */
 export declare function createLazyComponent<T = any>(importFn: () => Promise<{
     [key: string]: T;
@@ -18,7 +18,7 @@ export declare function createLazyComponent<T = any>(importFn: () => Promise<{
  *
  * @example
  * const { BarChart, LineChart } = createLazyComponents(
- *   () => import('@moonton/publish-chart'),
+ *   () => import('@publishfx/publish-chart'),
  *   ['BarChart', 'LineChart']
  * );
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@publishfx/publish-chart",
-  "version": "1.5.0",
+  "version": "2.0.0",
   "description": "A React chart component library for the Publish platform, including BarChart, LineChart, BarLineChart and other visualization components",
   "type": "module",
   "keywords": [
@@ -26,6 +26,7 @@
   ],
   "devDependencies": {
     "@antv/data-set": "^0.11.8",
+    "@antv/g2": "^5.3.0",
     "@types/jest": "^29.5.12",
     "@types/lodash": "^4.17.20",
     "@types/react": "^18.3.18",
@@ -44,10 +45,11 @@
     "styled-components": "^5.3.11",
     "ts-jest": "^29.1.2",
     "typescript": "^5.9.3",
-    "@publishfx/publish-components": "^2.0.3"
+    "@publishfx/publish-components": "^2.1.0"
   },
   "peerDependencies": {
     "@antv/data-set": "^0.11.8",
+    "@antv/g2": "^5.3.0",
     "@arco-design/web-react": "^2.66.0",
     "@types/react": "^18.3.18",
     "@types/react-dom": "^18.3.5",