sea-chart 0.0.5 → 0.0.7

package/README.md

@@ -1,109 +1,40 @@
 # 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. 配置以及测试用例
-    > 可以将自定义页面中关于统计元素的配置拿过来
-
-      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/',
-        }
-      ```
+  
+  3. 添加配置项
+  * 切换目录：`cd example`
+  * 复制一份：'setting.local.dist.js', 并重命名为 'setting.local.js'
+  * 修改 pluginConfig, 该配置想同插件开发的配置项一样，请参照插件开发文档即可
+  * 修改 appConfig, 该配置项同 universal app 的配置项一样，请参照 universal app 的配置项进行配置即可 
+
   4. 启动
   ```
   npm start
   ```
 
-# 增加新类型
-  1. 定义类型
-  > 为 CHART_TYPE 追加新类型
-
-  2. 定义配置模型及设置UI
-    2.1 为新类型增加模型，便于字段的统一管理 同时写入数据类型文档中
-    2.2 为新类型增加设置字段的UI，以更改配置
-
-  3. 定义查询数据的SQL
-  > 构造恰当的 SQL 语句来获取数据
-
-  4. 定义渲染机制
-  > 未新类型增加渲染机制
+  5. 在浏览器地址栏中输入：127.0.0.1:9000，即可访问该组件库的 demo 内容
 
-  5. 追加渲染机制到 View 组件中
-  > View 组件将根据类型自动渲染该类型
+  **注意**：自定义API 的demo,目前不支持修改参数同步更新视图
 
-# 使用
+## 使用
   1. 安装 sea-chart
   ```
     npm install sea-chart
   ```
 
-  2. 渲染
+  2. 使用
   ```
     import React from 'react';
     import View from 'sea-chart';
@@ -118,3 +49,27 @@
   
   ```
 
+  3. 具体应用请参照相关 demo
+
+## 开发
+### 基于现有类型开发
+  1. 请参照相关 demo, 进行相关的开发
+
+### 增加新类型
+  1. 定义类型
+  * 为 CHART_TYPE 追加新类型
+
+  2. 定义配置模型及设置UI
+  * 为新类型增加模型，便于字段的统一管理 同时写入数据类型文档中
+  * 为新类型增加设置字段的 UI，以更改配置
+
+  3. 定义查询数据的SQL
+  * 构造恰当的 SQL 语句来获取数据（供 自定义api 使用）
+  * 构造恰当的算法，用于计算图标需要渲染的数据（当用户直接使用 base 数据时使用）
+
+  4. 定义渲染机制
+  * 未新类型增加渲染机制
+
+  5. 追加渲染机制到 View 组件中
+  * View 组件将根据类型自动渲染该类型
+

package/dist/context.js

@@ -12,11 +12,10 @@ class Context {
       } = _ref;
       // used custom api to get chart result data
       if (this.api.queryChartResult) {
-        const chartId = chart.id;
-        return this.api.queryChartResult(chartId).then(res => {
-          onSuccess && onSuccess(res);
-        }).catch(error => {
-          onFail && onFail(error);
+        return this.api.queryChartResult({
+          chart,
+          onSuccess,
+          onFail
         });
       }
       const table = getTableById(tables, chart.config.table_id);
@@ -35,8 +34,8 @@ class Context {
         onFail && onFail(error);
       });
     };
-    this.queryUser = (emails, callback) => {
-      this.userApi.queryUsers(emails, callback);
+    this.queryUsers = (emails, callback) => {
+      this.api.queryUsers(emails, callback);
     };
     this.api = null;
     this.settings = {};
@@ -47,7 +46,6 @@ class Context {
     const {
       config,
       api,
-      usersAPI,
       collaborators,
       collaboratorManager
     } = props;
@@ -57,8 +55,8 @@ class Context {
     if (!api) {
       throw new Error('Props api is required');
     }
-    if (!usersAPI) {
-      throw new Error('Props usersAPI is required');
+    if (!api.queryUsers) {
+      throw new Error('Props queryUsers api is required');
     }
     this.api = api;
     this.settings = config || {};

package/dist/editor/index.js

@@ -1,27 +1,11 @@
 import React from 'react';
-import context from '../context';
-import View from '../view';
+import View, { defaultProps, propTypes } from '../view';
 import Settings from '../settings';
 import './index.css';
-class Editor extends React.PureComponent {
-  constructor(props) {
-    super(props);
-    context.init(props);
-  }
-  render() {
-    return /*#__PURE__*/React.createElement("div", {
-      className: "sea-chart-editor"
-    }, /*#__PURE__*/React.createElement(View, this.props), /*#__PURE__*/React.createElement(Settings, this.props));
-  }
+function Editor(props) {
+  return /*#__PURE__*/React.createElement("div", {
+    className: "sea-chart-editor"
+  }, /*#__PURE__*/React.createElement(View, props), /*#__PURE__*/React.createElement(Settings, props));
 }
-Editor.defaultProps = {
-  isStatisticalData: true,
-  canvasStyle: {},
-  tables: [],
-  chart: {
-    id: '',
-    config: {},
-    style_config: {}
-  }
-};
+Editor.defaultProps = defaultProps;
 export default Editor;

package/dist/utils/chart-utils.js

@@ -1376,7 +1376,7 @@ ChartUtils.convertConfig = config => {
 ChartUtils.imEmptyChartResult = chartResult => {
   return !chartResult || !chartResult.result && chartResult.result !== 0 || Array.isArray(chartResult.result) && chartResult.result.length === 0;
 };
-ChartUtils.calculateChart = (chart, tables, callback, isChartData) => {
+ChartUtils.calculateChart = (chart, tables, callback) => {
   if (!_class.isValidExistChart(tables, chart)) {
     const tip_message = 'Please_complete_the_chart_configuration_first';
     return callback && callback('', tip_message, null);
@@ -1422,26 +1422,24 @@ ChartUtils.calculateChart = (chart, tables, callback, isChartData) => {
         error_message
       } = res.data;
       if (success) {
-        if (isChartData) {
-          const tipMessage = 'There_are_no_statistic_results_yet';
-          if (!Array.isArray(sqlRows) || sqlRows.length === 0) {
-            callback && callback('', tipMessage, null);
-            return;
-          }
-          const chartResult = _class.sqlResult2JavaScript(newChart, sqlRows, chartSQLMap, columnMap, tables);
-          if (_class.imEmptyChartResult(chartResult)) {
-            callback && callback('', tipMessage, null);
-            return;
-          }
-          callback && callback('', '', {
-            ...chartResult,
-            groupbyColumn,
-            columnGroupbyColumn,
-            summaryColumn,
-            chartTableColumns
-          });
+        const tipMessage = 'There_are_no_statistic_results_yet';
+        if (!Array.isArray(sqlRows) || sqlRows.length === 0) {
+          callback && callback('', tipMessage, null);
           return;
         }
+        const chartResult = _class.sqlResult2JavaScript(newChart, sqlRows, chartSQLMap, columnMap, tables);
+        if (_class.imEmptyChartResult(chartResult)) {
+          callback && callback('', tipMessage, null);
+          return;
+        }
+        callback && callback('', '', {
+          ...chartResult,
+          groupbyColumn,
+          columnGroupbyColumn,
+          summaryColumn,
+          chartTableColumns
+        });
+        return;
       }
       callback && callback(error_message, '', null);
     },

package/dist/view/index.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import shallowEqual from 'shallowequal';
 import context from '../context';
@@ -52,8 +53,7 @@ class View extends React.PureComponent {
       let isNeedRequestData = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
       const {
         tables,
-        chart,
-        isStatisticalData
+        chart
       } = _this.props;
       const {
         data
@@ -62,7 +62,7 @@ class View extends React.PureComponent {
         ChartUtils.calculateStaticChart(tables, chart, data, _this.callback);
         return;
       }
-      ChartUtils.calculateChart(chart, tables, _this.callback, isStatisticalData);
+      ChartUtils.calculateChart(chart, tables, _this.callback);
     };
     this.state = {
       isCalculated: false,
@@ -155,8 +155,7 @@ class View extends React.PureComponent {
     })));
   }
 }
-View.defaultProps = {
-  isStatisticalData: true,
+const defaultProps = {
   canvasStyle: {},
   tables: [],
   chart: {
@@ -165,4 +164,13 @@ View.defaultProps = {
     style_config: {}
   }
 };
-export default View;
+const propTypes = {
+  canvasStyle: PropTypes.object,
+  config: PropTypes.object.isRequired,
+  chart: PropTypes.object.isRequired,
+  tables: PropTypes.array.isRequired,
+  className: PropTypes.string
+};
+View.defaultProps = defaultProps;
+export default View;
+export { defaultProps, propTypes };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sea-chart",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "main": "./dist/index.js",
   "dependencies": {
     "@antv/data-set": "0.11.8",
@@ -20,7 +20,7 @@
     "@antv/scale": "0.3.14",
     "babel-plugin-on-demand-loading": "^0.0.9",
     "dtable-ui-component": "~4.4.0",
-    "dtable-utils": "~4.3.*",
+    "dtable-utils": "~4.4.*",
     "prop-types": "15.8.1",
     "react": "^17.0.0",
     "react-dom": "^17.0.0"
@@ -92,6 +92,7 @@
     "css-minimizer-webpack-plugin": "5.0.1",
     "dotenv": "6.2.0",
     "dotenv-expand": "5.1.0",
+    "dtable-utils": "4.4.0",
     "ejs": "3.1.8",
     "eslint": "^6.8.0",
     "eslint-config-react-app": "^5.0.2",