# sea-chart
> The seatable chart displays the data in the seatable in the form of a chart.

## 查看demo
  1. 下载源码并进入文件夹
  ```
  git clone https://gitlab.seafile.top/seatable-extends/sea-chart/
  cd sea-chart
  ```

  2. 安装依赖
  ```
  npm install
  ```
  
  3. 添加配置项
  * 切换目录：`cd example`
  * 复制一份：'setting.local.dist.js', 并重命名为 'setting.local.js'
  * 修改 pluginConfig, 该配置想同插件开发的配置项一样，请参照插件开发文档即可
  * 修改 appConfig, 该配置项同 universal app 的配置项一样，请参照 universal app 的配置项进行配置即可 

  4. 启动
  ```
  npm start
  ```

  5. 在浏览器地址栏中输入：127.0.0.1:9000，即可访问该组件库的 demo 内容

  **注意**：自定义API 的demo,目前不支持修改参数同步更新视图

  **注意**：默认 webpack-dev-server 会打开 127.0.0.1:9001 并出错，需要手动改成 127.0.0.1:9000 才能正常访问

## 使用
  1. 安装 sea-chart
  ```
    npm install sea-chart
  ```

  2. 使用
  ```
    import React from 'react';
    import View from 'sea-chart';

    const ComponentName = ({ chart }) => {
      return (
        <View chart={chart} ... />
      )
    };

    export default ComponentName;
  
  ```

  3. 具体应用请参照相关 demo

## 开发
### 基于现有类型开发
  1. 请参照相关 demo, 进行相关的开发

### 增加新类型
  1. 定义类型
  * 为 CHART_TYPE 追加新类型

  2. 定义配置模型及设置UI
  * 为新类型增加模型，便于字段的统一管理 同时写入数据类型文档中
  * 为新类型增加设置字段的 UI，以更改配置

  3. 定义查询数据的SQL
  * 构造恰当的 SQL 语句来获取数据（供 自定义api 使用）
  * 构造恰当的算法，用于计算图标需要渲染的数据（当用户直接使用 base 数据时使用）

  4. 定义渲染机制
  * 未新类型增加渲染机制

  5. 追加渲染机制到 View 组件中
  * View 组件将根据类型自动渲染该类型