> The seatable chart displays the data in the seatable in the form of a chart.
npm install sea-chart
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 (
)
};
export default ComponentName;
``3. 具体应用请参照相关 demo
2. 定义配置模型及设置UI
* 为新类型增加模型,便于字段的统一管理 同时写入数据类型文档中
* 为新类型增加设置字段的 UI,以更改配置
3. 定义查询数据的SQL
* 构造恰当的 SQL 语句来获取数据(供 自定义api 使用)
* 构造恰当的算法,用于计算图标需要渲染的数据(当用户直接使用 base 数据时使用)
4. 定义渲染机制
* 未新类型增加渲染机制
5. 追加渲染机制到 View 组件中
* View 组件将根据类型自动渲染该类型