@moonton/publish-chart

基于新架构设计的 React 图表组件库，支持离线分析模块使用的所有图表类型。

安装

npm install @moonton/publish-chart
# 或
pnpm add @moonton/publish-chart

特性

• 🎨 丰富的图表类型：柱状图、折线图、组合图等
• 🏗️ 新架构设计：依赖注入、服务化、配置驱动
• 🔧 类型安全：完整的 TypeScript 支持
• 📦 按需引入：独立的包，不影响其他组件
• 🎯 易于扩展：清晰的架构，易于添加新图表类型

快速开始

1. 设置 ChartProvider

完整配置（推荐）

import { 
  ChartProvider, 
  defaultChartConfig, 
  createFormatterService, 
  createDataTransformService 
} from '@moonton/publish-chart';

const chartServices = {
  formatter: createFormatterService(),
  dataTransform: createDataTransformService(),
  config: {
    ...defaultChartConfig,
    indicatorMap: {
      // 指标映射表
    },
  },
};

<ChartProvider value={chartServices}>
  <YourApp />
</ChartProvider>

仅定义业务组件（其他使用默认值）

如果你只需要自定义业务组件，其他服务使用库的默认配置，可以这样：

import { ChartProvider } from '@moonton/publish-chart';

// 只定义 businessComponents，其他使用默认值
const chartServices = {
  businessComponents: {
    NodeDetail: YourNodeDetailComponent,
    NodeGeom: YourNodeGeomComponent,
  },
};

<ChartProvider value={chartServices}>
  <YourApp />
</ChartProvider>

注意：ChartProvider 支持部分覆盖，未提供的字段（formatter、dataTransform、config）会自动使用默认值。

2. 使用图表组件

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/                   # 工具函数

文档

详细文档请参考：

• 使用指南
• API 文档
• 迁移指南

许可证

ISC