sea-chart

sea-chart

The seatable chart displays the data in the seatable in the form of a chart.

本地调试

1. 下载源码并进入文件夹

git clone https://gitlab.seafile.top/seatable-extends/sea-chart/
cd sea-chart

1. 安装依赖

npm install

1. 配置以及测试用例 > 可以将自定义页面中关于统计元素的配置拿过来

   3.1 配置图标

   /example/body/charts.js

     const CHARTS = [
       {
         'id': '73c8',
         'type': 'statistic',
         'style_config': {
           'border': {
             'is_show_border': false,
             'is_show_shadow': false,
             'width': 0,
             'radius': 0,
             'color': '#EFEFEF'
           },
           'title': {
             'text': 'table',
             'font_size': 24,
             'font_weight': 700,
             'horizontal_align': 'left'
           }
         },
         'config': {
           'type': 'table',
           'table_id': '0000',
           'filters': [],
           'filter_conjunction': 'And',
           'groupby_column_key': '_ctime',
           'groupby_date_granularity': 'month',
           'groupby_geolocation_granularity': null,
           'groupby_include_empty_cells': false,
           'summary_column_key': null,
           'summary_method': 'Sum',
           'summary_type': 'count',
           'column_groupby_multiple_numeric_column': null,
           'summary_columns': [],
           'column_groupby_column_key': null,
           'column_groupby_date_granularity': null,
           'column_groupby_geolocation_granularity': null
         }
       }
     ];
   
     export default CHARTS;
   
   

   3.2

     {
       APIToken: '0268604f535ad4fa88a2c499455a82711b6e23a4',
       server: 'https://dev.seatable.cn',
       fileName: '全类型数据',
       workspaceID: '24',
       dtableUuid: 'f7288f72-03ff-4a69-85e3-3e8a86dbfa20',
       lang: 'zh-cn',
       mediaUrl: '/media/',
       permission: 'rw',
       accessToken: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHAiOjE3MDQ0NDk1NzksImR0YWJsZV91dWlkIjoiZjcyODhmNzItMDNmZi00YTY5LTg1ZTMtM2U4YTg2ZGJmYTIwIiwidXNlcm5hbWUiOiJndW94dWFuLnlhbmdAc2VhZmlsZS5jb20iLCJpZF9pbl9vcmciOiJXLTAwMDE3IiwidXNlcl9kZXBhcnRtZW50X2lkc19tYXAiOnsiY3VycmVudF91c2VyX2RlcGFydG1lbnRfaWRzIjpbMTRdLCJjdXJyZW50X3VzZXJfZGVwYXJ0bWVudF9hbmRfc3ViX2lkcyI6WzE0XX0sInBlcm1pc3Npb24iOiJydyJ9.6AEwL9jIbX6vfV2SVEpxZsvtwSgLAXN-E_jlu780HSc',
       dtableDb: 'https://dtable-db-proxy-dev.seatable.cn/',
     }
   

2. 启动

npm start

增加新类型

1. 定义类型

为 CHART_TYPE 追加新类型

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

2. 定义查询数据的SQL

构造恰当的 SQL 语句来获取数据

1. 定义渲染机制

未新类型增加渲染机制

1. 追加渲染机制到 View 组件中

View 组件将根据类型自动渲染该类型

使用

1. 安装 sea-chart

  npm install sea-chart

1. 渲染

  import React from 'react';
  import View from 'sea-chart';

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

  export default ComponentName;