@publishfx/publish-chart 1.3.0

package/README.md

@@ -0,0 +1,143 @@
+# @moonton/publish-chart
+
+基于新架构设计的 React 图表组件库，支持离线分析模块使用的所有图表类型。
+
+## 安装
+
+```bash
+npm install @moonton/publish-chart
+# 或
+pnpm add @moonton/publish-chart
+```
+
+## 特性
+
+- 🎨 **丰富的图表类型**：柱状图、折线图、组合图等
+- 🏗️ **新架构设计**：依赖注入、服务化、配置驱动
+- 🔧 **类型安全**：完整的 TypeScript 支持
+- 📦 **按需引入**：独立的包，不影响其他组件
+- 🎯 **易于扩展**：清晰的架构，易于添加新图表类型
+
+## 快速开始
+
+### 1. 设置 ChartProvider
+
+#### 完整配置（推荐）
+
+```tsx
+import { 
+  ChartProvider, 
+  defaultChartConfig, 
+  createFormatterService, 
+  createDataTransformService 
+} from '@moonton/publish-chart';
+
+const chartServices = {
+  formatter: createFormatterService(),
+  dataTransform: createDataTransformService(),
+  config: {
+    ...defaultChartConfig,
+    indicatorMap: {
+      // 指标映射表
+    },
+  },
+};
+
+<ChartProvider value={chartServices}>
+  <YourApp />
+</ChartProvider>
+```
+
+#### 仅定义业务组件（其他使用默认值）
+
+如果你只需要自定义业务组件，其他服务使用库的默认配置，可以这样：
+
+```tsx
+import { ChartProvider } from '@moonton/publish-chart';
+
+// 只定义 businessComponents，其他使用默认值
+const chartServices = {
+  businessComponents: {
+    NodeDetail: YourNodeDetailComponent,
+    NodeGeom: YourNodeGeomComponent,
+  },
+};
+
+<ChartProvider value={chartServices}>
+  <YourApp />
+</ChartProvider>
+```
+
+> **注意**：`ChartProvider` 支持部分覆盖，未提供的字段（`formatter`、`dataTransform`、`config`）会自动使用默认值。
+
+### 2. 使用图表组件
+
+```tsx
+import { BarChart, LineChart, BarLineChart } from '@moonton/publish-chart';
+
+<BarChart
+  data={data}
+  x="groupName"
+  y="indicatorValue"
+  height={300}
+/>
+```
+
+## 组件列表
+
+### 基础组件
+- `BarChart` - 基础柱状图
+- `LineChart` - 基础折线图
+
+### 组合组件
+- `BarLineChart` - 柱状折线组合图
+- `GroupBarLine` - 分组柱状折线组合图
+- `BarLineAdapter` - 数据适配器组件
+
+### 共享组件
+- `AuxiliaryLine` - 辅助线组件
+- `XAxisBackground` - X轴背景高亮组件
+
+## 架构设计
+
+### 核心特性
+
+1. **依赖注入架构**：通过 Context 注入服务，解耦组件和业务逻辑
+2. **类型适配器**：独立的类型定义，通过适配器转换业务类型
+3. **服务化架构**：将业务逻辑提取为服务，便于测试和复用
+4. **配置驱动**：统一的配置管理，支持自定义
+
+### 目录结构
+
+```
+src/
+├── core/                    # 核心功能
+│   ├── ChartContext.tsx     # 图表上下文
+│   ├── ChartConfig.ts       # 配置管理
+│   └── ChartTypes.ts        # 类型定义
+├── adapters/                # 适配器层
+│   ├── DataAdapter.ts       # 数据适配器
+│   └── TypeAdapter.ts       # 类型适配器
+├── services/                # 服务层
+│   ├── FormatterService.ts  # 格式化服务
+│   └── DataTransformService.ts  # 数据转换服务
+├── components/              # 组件层
+│   ├── base/                # 基础组件
+│   ├── composite/           # 组合组件
+│   └── shared/              # 共享组件
+└── utils/                   # 工具函数
+```
+
+## 文档
+
+详细文档请参考：
+- [使用指南](./docs/usage.md)
+- [API 文档](./docs/api.md)
+- [迁移指南](./docs/migration.md)
+
+## 许可证
+
+ISC
+
+
+

package/dist/adapters/DataAdapter.d.ts

@@ -0,0 +1,33 @@
+export interface TransformConfig {
+    type: 'bar' | 'line' | 'barLine' | 'groupCompare';
+    x?: string;
+    y?: string;
+    z?: string;
+    isDescend?: boolean;
+    isHorizontal?: boolean;
+}
+/**
+ * 数据适配器类
+ */
+export declare class DataAdapter {
+    /**
+     * 统一的数据转换接口
+     */
+    static transform(data: any[], transformType: TransformConfig['type'], config: TransformConfig): any[];
+    /**
+     * 柱状图数据转换
+     */
+    private static transformForBar;
+    /**
+     * 折线图数据转换
+     */
+    private static transformForLine;
+    /**
+     * 柱状折线组合图数据转换
+     */
+    private static transformForBarLine;
+    /**
+     * 分组对比图数据转换
+     */
+    private static transformForGroupCompare;
+}

package/dist/adapters/DataAdapter.js

@@ -0,0 +1,75 @@
+import lib from "@antv/data-set/lib";
+class DataAdapter {
+    static transform(data, transformType, config) {
+        if (!data || 0 === data.length) return [];
+        switch(transformType){
+            case 'bar':
+                return this.transformForBar(data, config);
+            case 'line':
+                return this.transformForLine(data, config);
+            case 'barLine':
+                return this.transformForBarLine(data, config);
+            case 'groupCompare':
+                return this.transformForGroupCompare(data, config);
+            default:
+                return data;
+        }
+    }
+    static transformForBar(data, config) {
+        const ds = new lib();
+        const dv = ds.createView().source(data);
+        if (config.y) {
+            dv.transform({
+                type: 'map',
+                callback: (row)=>{
+                    row[config.y] = '' !== row[config.y] ? +row[config.y] : '-';
+                    return row;
+                }
+            });
+            if (config.isDescend) dv.transform({
+                type: 'sort',
+                callback: (a, b)=>{
+                    if ('-' === a[config.y]) return config.isHorizontal ? -1 : 1;
+                    if ('-' === b[config.y]) return config.isHorizontal ? 1 : -1;
+                    return config.isHorizontal ? a[config.y] - b[config.y] : b[config.y] - a[config.y];
+                }
+            });
+        }
+        return dv.rows;
+    }
+    static transformForLine(data, config) {
+        const ds = new lib();
+        const dv = ds.createView().source(data);
+        if (config.y) dv.transform({
+            type: 'map',
+            callback: (row)=>{
+                row[config.y] = '' !== row[config.y] ? +row[config.y] : '-';
+                return row;
+            }
+        });
+        return dv.rows;
+    }
+    static transformForBarLine(data, config) {
+        const ds = new lib();
+        const dv = ds.createView().source(data);
+        if (config.y) dv.transform({
+            type: 'map',
+            callback: (row)=>{
+                row[config.y] = '' !== row[config.y] ? +row[config.y] : '-';
+                return row;
+            }
+        });
+        if (config.z) dv.transform({
+            type: 'map',
+            callback: (row)=>{
+                row[config.z] = '' !== row[config.z] ? +row[config.z] : '-';
+                return row;
+            }
+        });
+        return dv.rows;
+    }
+    static transformForGroupCompare(data, _config) {
+        return data;
+    }
+}
+export { DataAdapter };

package/dist/adapters/TypeAdapter.d.ts

@@ -0,0 +1,40 @@
+/**
+ * 类型适配器
+ * 将业务类型转换为组件库类型
+ */
+import type { IndicatorInfo, ChartTimeRange } from '../core/ChartTypes';
+/**
+ * 业务类型定义（示例，实际使用时从业务项目导入）
+ */
+export interface BusinessUniqueIndicatorInfo {
+    indicatorID?: number;
+    indicatorName?: string;
+    indicatorFrom?: string;
+    indicatorFormat?: {
+        indicatorUnit?: number;
+        indicatorDecimal?: number;
+    };
+    [key: string]: any;
+}
+export interface BusinessTimeRange {
+    startTime?: string;
+    endTime?: string;
+    compareStartTime?: string;
+    compareEndTime?: string;
+    timeType?: number;
+    compareType?: number;
+    [key: string]: any;
+}
+/**
+ * 类型适配器类
+ */
+export declare class TypeAdapter {
+    /**
+     * 适配指标映射表
+     */
+    static adaptIndicatorMap(businessIndicatorMap: Record<string, BusinessUniqueIndicatorInfo>): Record<string, IndicatorInfo>;
+    /**
+     * 适配时间范围
+     */
+    static adaptTimeRange(businessTimeRange: BusinessTimeRange): ChartTimeRange;
+}

package/dist/adapters/TypeAdapter.js

@@ -0,0 +1,26 @@
+class TypeAdapter {
+    static adaptIndicatorMap(businessIndicatorMap) {
+        if (!businessIndicatorMap) return {};
+        return Object.entries(businessIndicatorMap).reduce((acc, [key, value])=>{
+            acc[key] = {
+                indicatorID: value.indicatorID,
+                indicatorName: value.indicatorName,
+                indicatorFrom: value.indicatorFrom,
+                indicatorFormat: value.indicatorFormat
+            };
+            return acc;
+        }, {});
+    }
+    static adaptTimeRange(businessTimeRange) {
+        if (!businessTimeRange) return {};
+        return {
+            startTime: businessTimeRange.startTime,
+            endTime: businessTimeRange.endTime,
+            compareStartTime: businessTimeRange.compareStartTime,
+            compareEndTime: businessTimeRange.compareEndTime,
+            timeType: businessTimeRange.timeType,
+            compareType: businessTimeRange.compareType
+        };
+    }
+}
+export { TypeAdapter };

package/dist/components/base/BarChart.d.ts

@@ -0,0 +1,7 @@
+/**
+ * 基础柱状图组件
+ */
+import React from "react";
+import type { BaseChartProps } from "../../core/ChartTypes";
+declare const _default: React.NamedExoticComponent<BaseChartProps>;
+export default _default;

package/dist/components/base/BarChart.js

@@ -0,0 +1,362 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { memo, useCallback, useEffect, useMemo, useState } from "react";
+import { Axis, Chart, Coordinate, Interval, Tooltip, View } from "bizcharts";
+import { useChartContext } from "../../core/ChartContext.js";
+import { mergeChartConfig } from "../../core/ChartConfig.js";
+import { calculateBarWidth, getAxisFormat, getAxisHorPaddingByText, getChartKey, truncateText } from "../../utils/chartHelpers.js";
+import AuxiliaryLine from "../shared/AuxiliaryLine.js";
+import XAxisBackground from "../shared/XAxisBackground.js";
+import { NodeGeom } from "../shared/NodeGeom.js";
+import { NodeDetail } from "../shared/NodeDetail.js";
+import { DataAdapter } from "../../adapters/DataAdapter.js";
+const BarChart = ({ height = 300, data, x = "", y = "", indicatorMap, onChartClick, legend = "", config, nodeSetting = {
+    showType: 0,
+    type: []
+}, auxiliaryLineData, highlightDate = [] })=>{
+    const { formatter, dataTransform, config: contextConfig } = useChartContext();
+    const mergedConfig = useMemo(()=>mergeChartConfig(contextConfig, {}), [
+        contextConfig
+    ]);
+    const safeIndicatorMap = indicatorMap || contextConfig.indicatorMap || {};
+    const safeLegend = legend || y;
+    const chartConfig = config || {};
+    const { isDataTag = false, isDescend = false, isHorizontal = false, isHighlight = true } = 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 [chartInsWidth, setChartInsWidth] = useState(0);
+    const [axisHorPadding, setAxisHorPadding] = useState(0);
+    const [chartWidth, setChartWidth] = useState(0);
+    const [chartOffset, setChartOffset] = useState(0);
+    const [padding, setPadding] = useState([
+        10,
+        0
+    ]);
+    const [pointP, setPointP] = useState({
+        x: 0,
+        y: 0
+    });
+    const [pointData, setPointData] = useState({
+        info: [],
+        infosCompare: []
+    });
+    const [mainBarSize, setMainBarSize] = useState(void 0);
+    const maxY = useMemo(()=>{
+        const values = transformedData.filter((item)=>"-" !== item[y] && void 0 !== item[y] && null !== item[y]).map((item)=>Number(item[y]));
+        const maxData = Math.max(...values.length > 0 ? values : [
+            0
+        ]);
+        const maxAuxiliary = auxiliaryLineData?.length ? Math.max(...auxiliaryLineData.map((item)=>item.value)) : 0;
+        return Math.max(maxData, maxAuxiliary);
+    }, [
+        transformedData,
+        y,
+        auxiliaryLineData
+    ]);
+    useEffect(()=>{
+        if (nodeSetting?.showType === 2 && chartWidth / transformedData.length > 30) if (transformedData.some((item)=>item?.nodeLen > 2)) setPadding([
+            10,
+            10,
+            40,
+            0
+        ]);
+        else transformedData.some((item)=>item?.nodeLen === 2) ? setPadding([
+            10,
+            10,
+            24,
+            0
+        ]) : setPadding([
+            20,
+            10,
+            10,
+            0
+        ]);
+        else setPadding([
+            20,
+            10,
+            10,
+            0
+        ]);
+    }, [
+        chartWidth,
+        transformedData
+    ]);
+    useEffect(()=>{
+        maxY > Math.max(...transformedData.filter((item)=>"-" !== item[y]).map((item)=>item[y])) ? setPadding((pre)=>[
+                isHorizontal ? 20 : 25,
+                isHorizontal ? isDataTag ? 50 : mergedConfig.layout.horBarPaddingRight ?? 50 : pre[1] ?? 0,
+                pre[2] ?? 0,
+                pre[3] ?? 0
+            ]) : setPadding((pre)=>[
+                pre[0] ?? 0,
+                isHorizontal && isDataTag ? 50 : mergedConfig.layout.barPaddingRight ?? 10,
+                pre[2] ?? 0,
+                pre[3] ?? 0
+            ]);
+    }, [
+        maxY,
+        transformedData,
+        y,
+        isHorizontal,
+        isDataTag,
+        mergedConfig
+    ]);
+    const filterFn = useMemo(()=>(item)=>highlightDate?.includes(item.groupName) ?? false, [
+        highlightDate
+    ]);
+    const formatAxis = useCallback((val)=>{
+        setAxisHorPadding(getAxisHorPaddingByText(val, safeIndicatorMap, safeLegend) - 22);
+        return getAxisFormat(val, safeIndicatorMap, safeLegend);
+    }, [
+        safeIndicatorMap,
+        safeLegend
+    ]);
+    return /*#__PURE__*/ jsx("div", {
+        style: {
+            position: "relative"
+        },
+        children: /*#__PURE__*/ jsxs(Chart, {
+            className: "publish-chart",
+            scale: {
+                [y]: {
+                    type: "linear",
+                    max: maxY,
+                    nice: true
+                }
+            },
+            height: height,
+            data: transformedData,
+            ...mergedConfig.baseChartConfig,
+            onGetG2Instance: (c)=>{
+                if (c) setChartInsWidth(c.width);
+            },
+            onClick: (e, chart)=>{
+                const value = chart.getTooltipItems({
+                    x: e.x,
+                    y: e.y
+                });
+                onChartClick && onChartClick(value[0]);
+            },
+            appendPadding: padding,
+            onPointMouseover: (e)=>{
+                console.log("onPointMouseover", nodeSetting.showType, typeof nodeSetting.showType);
+                if (1 === nodeSetting.showType) try {
+                    if (e?.data) {
+                        setPointP({
+                            x: e.data.x ?? 0,
+                            y: e.data.y ?? 0
+                        });
+                        const nodeInfos = e.data?.data?.nodeInfos;
+                        setPointData(nodeInfos || {
+                            info: [],
+                            infosCompare: []
+                        });
+                    }
+                } catch (error) {
+                    console.warn("Failed to handle point mouseover:", error);
+                    setPointP({
+                        x: 0,
+                        y: 0
+                    });
+                    setPointData({
+                        info: [],
+                        infosCompare: []
+                    });
+                }
+            },
+            onAfterrender: (_e, chart)=>{
+                if (2 === nodeSetting.showType) {
+                    setChartWidth(chart.coordinateBBox.width);
+                    setChartOffset(chart.coordinateBBox.x);
+                }
+                const estimatedBarWidth = calculateBarWidth(chart, transformedData, x, 0.5);
+                if (void 0 !== estimatedBarWidth) setMainBarSize(estimatedBarWidth);
+            },
+            children: [
+                /*#__PURE__*/ jsx(XAxisBackground, {
+                    x: x,
+                    data: transformedData,
+                    isHighlight: isHighlight,
+                    filterFn: filterFn,
+                    dataLength: transformedData.length,
+                    mainBarSize: mainBarSize,
+                    isHorizontal: isHorizontal
+                }),
+                /*#__PURE__*/ jsx(Coordinate, {
+                    transpose: isHorizontal
+                }),
+                /*#__PURE__*/ jsx(Interval, {
+                    position: `${x}*${y}`,
+                    style: {
+                        cursor: "pointer"
+                    },
+                    label: [
+                        y,
+                        (v)=>{
+                            const content = isDataTag ? formatter.formatIndicator(v, safeIndicatorMap[safeLegend]) : void 0;
+                            return {
+                                content: content || "",
+                                offset: isHorizontal ? 5 : 10
+                            };
+                        }
+                    ]
+                }),
+                /*#__PURE__*/ jsx(Tooltip, {
+                    shared: true,
+                    showCrosshairs: true,
+                    children: (title, items)=>/*#__PURE__*/ jsxs("div", {
+                            style: {
+                                padding: "10px 0"
+                            },
+                            children: [
+                                title,
+                                items && /*#__PURE__*/ jsxs(Fragment, {
+                                    children: [
+                                        /*#__PURE__*/ jsx("div", {
+                                            style: {
+                                                marginTop: "10px"
+                                            },
+                                            children: items.map((it, index)=>/*#__PURE__*/ jsxs("div", {
+                                                    style: {
+                                                        display: "flex",
+                                                        justifyContent: "space-between"
+                                                    },
+                                                    children: [
+                                                        /*#__PURE__*/ jsxs("span", {
+                                                            children: [
+                                                                /*#__PURE__*/ jsx("span", {
+                                                                    style: {
+                                                                        width: "8px",
+                                                                        height: "8px",
+                                                                        backgroundColor: it.color,
+                                                                        display: "inline-block",
+                                                                        borderRadius: "50%",
+                                                                        marginRight: "8px"
+                                                                    }
+                                                                }),
+                                                                safeIndicatorMap[safeLegend]?.indicatorName || "",
+                                                                ":"
+                                                            ]
+                                                        }),
+                                                        /*#__PURE__*/ jsx("span", {
+                                                            style: {
+                                                                fontWeight: "bold",
+                                                                paddingLeft: "10px"
+                                                            },
+                                                            children: formatter.formatIndicator(it.value, safeIndicatorMap[safeLegend])
+                                                        })
+                                                    ]
+                                                }, index))
+                                        }),
+                                        auxiliaryLineData && auxiliaryLineData.map((item, index)=>/*#__PURE__*/ jsxs("div", {
+                                                style: {
+                                                    marginLeft: "16px",
+                                                    marginTop: "10px",
+                                                    display: "flex",
+                                                    justifyContent: "space-between"
+                                                },
+                                                children: [
+                                                    /*#__PURE__*/ jsxs("div", {
+                                                        style: {
+                                                            marginRight: "8px"
+                                                        },
+                                                        children: [
+                                                            item.name,
+                                                            ":"
+                                                        ]
+                                                    }),
+                                                    /*#__PURE__*/ jsx("div", {
+                                                        children: formatter.formatIndicator(item.value, safeIndicatorMap[safeLegend])
+                                                    })
+                                                ]
+                                            }, index))
+                                    ]
+                                })
+                            ]
+                        })
+                }),
+                auxiliaryLineData && auxiliaryLineData.length > 0 && /*#__PURE__*/ jsxs(View, {
+                    data: transformedData,
+                    scale: {
+                        [y]: {
+                            type: "linear",
+                            max: maxY,
+                            nice: true
+                        }
+                    },
+                    padding: [
+                        0,
+                        0,
+                        0,
+                        isHorizontal ? 0 : -axisHorPadding
+                    ],
+                    children: [
+                        /*#__PURE__*/ jsx(Axis, {
+                            name: y,
+                            visible: false
+                        }),
+                        /*#__PURE__*/ jsx(Axis, {
+                            name: x,
+                            visible: false
+                        }),
+                        /*#__PURE__*/ jsx(Interval, {
+                            position: `${x}*${y}`,
+                            visible: false
+                        }),
+                        auxiliaryLineData.map((item, index)=>/*#__PURE__*/ jsx(AuxiliaryLine, {
+                                name: item.name,
+                                value: item.value,
+                                isHorizontal: isHorizontal
+                            }, index))
+                    ]
+                }, `${axisHorPadding}${isHorizontal}`),
+                /*#__PURE__*/ jsx(Axis, {
+                    name: y,
+                    label: {
+                        formatter: formatAxis
+                    }
+                }),
+                /*#__PURE__*/ jsx(Axis, {
+                    name: x,
+                    label: {
+                        autoEllipsis: true,
+                        formatter: (text)=>isHorizontal ? truncateText(text, chartInsWidth / 5) : text
+                    }
+                }),
+                transformedData.some((item)=>item?.nodeInfos?.info?.length > 0 || item?.nodeInfos?.infosCompare?.length > 0) && /*#__PURE__*/ jsxs(Fragment, {
+                    children: [
+                        1 === nodeSetting.showType && NodeGeom && /*#__PURE__*/ jsx(NodeGeom, {
+                            pointData: pointData,
+                            pointP: pointP
+                        }),
+                        2 === nodeSetting.showType && NodeDetail && (0 === chartOffset || chartOffset) && /*#__PURE__*/ jsx(NodeDetail, {
+                            chartWidth: chartWidth,
+                            chartOffset: chartOffset,
+                            dvRows: transformedData
+                        })
+                    ]
+                })
+            ]
+        }, getChartKey({
+            chartConfig,
+            nodeSetting
+        }))
+    });
+};
+const base_BarChart = /*#__PURE__*/ memo(BarChart);
+export { base_BarChart as default };

package/dist/components/base/BarChart.lazy.d.ts

@@ -0,0 +1,5 @@
+/**
+ * BarChart Lazy Loading 入口
+ * 提供默认导出，支持 lazy() 直接使用
+ */
+export { default } from './BarChart';