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 组件将根据类型自动渲染该类型