sea-chart 0.0.4 → 0.0.6

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/api/index.js

@@ -80,24 +80,7 @@ class SeaChartAPI {
     this.instance = new SeaChartAPI(config);
     return this.instance;
   }
-  async init(config) {
-    if (config && typeof config === 'object') {
-      const {
-        appName,
-        accessToken,
-        dtableUuid,
-        dtableServer,
-        dtableSocket,
-        dtableDb
-      } = config;
-      this.appName = appName;
-      this.accessToken = accessToken;
-      this.dtableUuid = dtableUuid;
-      this.dtableServer = dtableServer.replace(/\/+$/, '') + '/';
-      this.dtableSocket = dtableSocket.replace(/\/+$/, '') + '/';
-      this.dtableDB = dtableDb.replace(/\/+$/, '') + '/';
-      return;
-    }
+  async init() {
     const accessTokenRes = await this.getDTableAccessToken();
     const {
       app_name,

package/dist/context.js

@@ -3,13 +3,21 @@ import CollaboratorManager from './utils/collaborator-manager';
 import { ChartDataSQL } from './utils';
 class Context {
   constructor() {
-    this.queryResultFromDB = _ref => {
+    this.queryChartResult = _ref => {
       let {
         chart,
         tables,
         onSuccess,
         onFail
       } = _ref;
+      // used custom api to get chart result data
+      if (this.api.queryChartResult) {
+        return this.api.queryChartResult({
+          chart,
+          onSuccess,
+          onFail
+        });
+      }
       const table = getTableById(tables, chart.config.table_id);
       const chartDataSQL = new ChartDataSQL({
         table,
@@ -26,12 +34,11 @@ 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 = {};
-    this.hasInit = false;
     this.collaborators = [];
     this.collaboratorManager = null;
   }
@@ -39,19 +46,17 @@ class Context {
     const {
       config,
       api,
-      usersAPI,
       collaborators,
       collaboratorManager
     } = props;
-    if (this.hasInit) return;
     if (!config) {
       throw new Error('Props config is required');
     }
     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.css

@@ -0,0 +1,23 @@
+.sea-chart-editor {
+  flex: 1;
+  display: flex;
+  min-height: 0;
+  min-width: 0;
+}
+
+.sea-chart-editor .sea-chart-formatter {
+  flex: 1;
+  display: flex;
+  min-height: 0;
+  min-width: 0;
+}
+
+.sea-chart-editor .sea-chart-settings {
+  width: 300px;
+  height: 100%;
+  background-color: #fff;
+  margin-left: 16px;
+  border-top: 1px solid #e4e4e4;
+  border-left: 1px solid #e4e4e4;
+  border-right: 1px solid #e4e4e4;
+}

package/dist/editor/index.js

@@ -1,41 +1,11 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
-import classnames from 'classnames';
-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() {
-    const {
-      settingsTarget
-    } = this.props;
-    let settingsTargetNode = '';
-    if (settingsTarget) {
-      settingsTargetNode = document.getElementById(settingsTarget);
-      if (settingsTargetNode) {
-        ReactDOM.render( /*#__PURE__*/React.createElement(Settings, this.props), settingsTargetNode);
-      }
-    }
-    return /*#__PURE__*/React.createElement("div", {
-      className: classnames('sea-chart-editor', {
-        'd-flex': !settingsTargetNode
-      })
-    }, /*#__PURE__*/React.createElement(View, this.props), !settingsTargetNode && /*#__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/index.js

@@ -1,9 +1,10 @@
 import SeaChartAPI from './api';
-import { CHART_TYPES } from './constants/type';
+import { CHART_TYPE, CHART_TYPES } from './constants/type';
+import { ChartModel } from './model';
 import View from './view';
 import Editor from './editor';
 import Settings, { StyleSettings } from './settings';
 import { ChartDataSQL } from './utils';
 import Context from './context';
 export default View;
-export { SeaChartAPI, CHART_TYPES, View, Editor, Settings, StyleSettings, Context, ChartDataSQL };
+export { SeaChartAPI, CHART_TYPE, CHART_TYPES, View, Editor, Settings, StyleSettings, Context, ChartModel, ChartDataSQL };

package/dist/settings/table-settings/data-settings.js

@@ -544,6 +544,6 @@ const DataSettings = _ref => {
     value: getSelectedGroupType(),
     onChange: onGroupTypeChange,
     options: groupTypeOptions
-  })), renderAdvancedStatistic);
+  })), renderAdvancedStatistic());
 };
 export default DataSettings;

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);
@@ -1412,7 +1412,7 @@ ChartUtils.calculateChart = (chart, tables, callback, isChartData) => {
     const error_message = 'There_are_some_problems_with_the_filters';
     return callback && callback(error_message, '', null);
   }
-  context.queryResultFromDB({
+  context.queryChartResult({
     chart,
     tables,
     onSuccess: res => {
@@ -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);
     },
@@ -1568,11 +1566,13 @@ ChartUtils.isChartEqual = (preChartElement, curChartElement) => {
   return shallowEqual(preChartElement.config, curChartElement.config);
 };
 ChartUtils.isChartStyleChange = (preChartElement, curChartElement) => {
+  var _preChartElement$heig, _curChartElement$heig;
   const elementType = preChartElement.config.type;
   if (elementType !== curChartElement.config.type) return false;
-  if (preChartElement.height.value !== curChartElement.height.value) return true;
-  if (preChartElement.left_in_unit !== curChartElement.left_in_unit) return true;
-  if (preChartElement.width_in_unit !== curChartElement.width_in_unit) return true;
+  // used for app
+  if ((preChartElement === null || preChartElement === void 0 ? void 0 : (_preChartElement$heig = preChartElement.height) === null || _preChartElement$heig === void 0 ? void 0 : _preChartElement$heig.value) !== (curChartElement === null || curChartElement === void 0 ? void 0 : (_curChartElement$heig = curChartElement.height) === null || _curChartElement$heig === void 0 ? void 0 : _curChartElement$heig.value)) return true;
+  if ((preChartElement === null || preChartElement === void 0 ? void 0 : preChartElement.left_in_unit) !== (curChartElement === null || curChartElement === void 0 ? void 0 : curChartElement.left_in_unit)) return true;
+  if ((preChartElement === null || preChartElement === void 0 ? void 0 : preChartElement.width_in_unit) !== (curChartElement === null || curChartElement === void 0 ? void 0 : curChartElement.width_in_unit)) return true;
   if (!ObjectUtils.isSameObject(preChartElement.style_config, curChartElement.style_config)) return true;
   return !CHART_STYLE_SETTING_KEYS.every(key => preChartElement.config[key] === curChartElement.config[key]);
 };

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,
@@ -70,7 +70,6 @@ class View extends React.PureComponent {
       errorMessage: '',
       tipMessage: ''
     };
-    console.log(props);
     context.init(props);
   }
   componentDidMount() {
@@ -156,8 +155,7 @@ class View extends React.PureComponent {
     })));
   }
 }
-View.defaultProps = {
-  isStatisticalData: true,
+const defaultProps = {
   canvasStyle: {},
   tables: [],
   chart: {
@@ -166,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.4",
+  "version": "0.0.6",
   "main": "./dist/index.js",
   "dependencies": {
     "@antv/data-set": "0.11.8",
@@ -126,6 +126,7 @@
     "raf": "3.4.0",
     "react": "17.0.0",
     "react-app-polyfill": "^1.0.4",
+    "react-cookies": "0.1.1",
     "react-dev-utils": "^12.0.1",
     "react-dom": "17.0.0",
     "react-hot-loader": "4.13.1",