sea-chart 0.0.1 → 0.0.3

package/README.md

@@ -1,4 +1,120 @@
-# seatable-statistic
+# 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
+  ```
+  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/',
+        }
+      ```
+  4. 启动
+  ```
+  npm start
+  ```
+
+# 增加新类型
+  1. 定义类型
+  > 为 CHART_TYPE 追加新类型
+
+  2. 定义配置模型及设置UI
+    2.1 为新类型增加模型，便于字段的统一管理 同时写入数据类型文档中
+    2.2 为新类型增加设置字段的UI，以更改配置
+
+  3. 定义查询数据的SQL
+  > 构造恰当的 SQL 语句来获取数据
+
+  4. 定义渲染机制
+  > 未新类型增加渲染机制
+
+  5. 追加渲染机制到 View 组件中
+  > View 组件将根据类型自动渲染该类型
+
+# 使用
+  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;
+  
+  ```
 

package/dist/api/index.js

@@ -0,0 +1,101 @@
+import axios from 'axios';
+class SeaChartAPI {
+  constructor(config) {
+    var _this = this;
+    this.getDTableAccessToken = () => {
+      // dtable-web
+      const {
+        server,
+        APIToken
+      } = this.config;
+      const url = server + '/api/v2.1/dtable/app-access-token/';
+      const headers = {
+        'Authorization': 'Token ' + APIToken
+      };
+      return axios.get(url, {
+        headers
+      });
+    };
+    this.getBaseData = () => {
+      const {
+        dtableServer,
+        dtableUuid,
+        accessToken
+      } = this;
+      const url = dtableServer + 'dtables/' + dtableUuid;
+      const headers = {
+        'Authorization': 'Token ' + accessToken
+      };
+      return axios.get(url, {
+        headers
+      });
+    };
+    this.getBaseMetaData = () => {
+      const {
+        dtableServer,
+        dtableUuid,
+        accessToken
+      } = this;
+      const url = dtableServer + 'api/v1/dtables/' + dtableUuid + '/metadata';
+      const headers = {
+        'Authorization': 'Token ' + accessToken
+      };
+      return axios.get(url, {
+        headers
+      });
+    };
+    this.sqlQuery = function (sql, parameters) {
+      let convert_keys = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+      // dtable-db
+      const {
+        dtableDB,
+        dtableUuid,
+        accessToken
+      } = _this;
+      const url = dtableDB + 'api/v1/query/' + dtableUuid;
+      const data = {
+        sql,
+        convert_keys,
+        ...(parameters && {
+          parameters: parameters
+        })
+      };
+      const headers = {
+        'Authorization': 'Token ' + accessToken
+      };
+      return axios.post(url, data, {
+        headers
+      });
+    };
+    this.config = config;
+    this.instance = null;
+    this.appName = '';
+    this.accessToken = '';
+    this.dtableUuid = '';
+    this.dtableServer = '';
+    this.dtableSocket = '';
+  }
+  static getInstance(config) {
+    if (this.instance) return this.instance;
+    this.instance = new SeaChartAPI(config);
+    return this.instance;
+  }
+  async init() {
+    const accessTokenRes = await this.getDTableAccessToken();
+    const {
+      app_name,
+      access_token,
+      dtable_uuid,
+      dtable_server,
+      dtable_socket,
+      dtable_db
+    } = accessTokenRes.data;
+    this.appName = app_name;
+    this.accessToken = access_token;
+    this.dtableUuid = dtable_uuid;
+    this.dtableServer = dtable_server.replace(/\/+$/, '') + '/';
+    this.dtableSocket = dtable_socket.replace(/\/+$/, '') + '/';
+    this.dtableDB = dtable_db.replace(/\/+$/, '') + '/';
+  }
+}
+export default SeaChartAPI;

package/{lib → dist}/components/collaborator/index.js

@@ -1,10 +1,12 @@
 import React from 'react';
-var Collaborator = function Collaborator(_ref) {
-  var _ref$collaborator = _ref.collaborator,
-    collaborator = _ref$collaborator === void 0 ? {} : _ref$collaborator;
-  var _ref2 = collaborator || {},
-    avatar_url = _ref2.avatar_url,
-    name = _ref2.name;
+const Collaborator = _ref => {
+  let {
+    collaborator = {}
+  } = _ref;
+  const {
+    avatar_url,
+    name
+  } = collaborator || {};
   return /*#__PURE__*/React.createElement("div", {
     className: "collaborators-formatter"
   }, /*#__PURE__*/React.createElement("div", {

package/{lib → dist}/components/icon/index.css

@@ -1,4 +1,4 @@
-.seastatistic-icon {
+.sea-chart-icon {
   font-size: 14px;
   fill: currentColor;
   color: #212529;

package/{lib → dist}/components/icon/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import './index.css';
-var importAll = function importAll(requireContext) {
+const importAll = requireContext => {
   requireContext.keys().forEach(requireContext);
 };
 try {
@@ -9,10 +9,12 @@ try {
   // eslint-disable-next-line no-console
   console.log(error);
 }
-var Icon = function Icon(props) {
-  var className = props.className,
-    symbol = props.symbol;
-  var iconClass = "seastatistic-icon seastatistic-icon-".concat(symbol, " ").concat(className || '');
+const Icon = props => {
+  const {
+    className,
+    symbol
+  } = props;
+  const iconClass = "sea-chart-icon sea-chart-icon-".concat(symbol, " ").concat(className || '');
   return /*#__PURE__*/React.createElement("svg", {
     className: iconClass
   }, /*#__PURE__*/React.createElement("use", {

package/dist/components/index.js

@@ -0,0 +1,8 @@
+import Collaborator from './collaborator';
+import Loading from './loading';
+import Icon from './icon';
+import NumberInput from './number-input';
+import SelectGroup from './select-group';
+import TypesDialog from './types-dialog';
+import PixelEditor from './pixel-editor';
+export { Collaborator, Loading, Icon, NumberInput, SelectGroup, TypesDialog, PixelEditor };

package/{lib → dist}/components/loading/index.js

@@ -1,8 +1,10 @@
 import React from 'react';
 import classnames from 'classnames';
 import './index.css';
-var Loading = function Loading(_ref) {
-  var className = _ref.className;
+const Loading = _ref => {
+  let {
+    className
+  } = _ref;
   return /*#__PURE__*/React.createElement("span", {
     className: classnames('loading-icon loading-tip', className)
   });

package/dist/components/number-input/index.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Input } from 'reactstrap';
+function NumberInput(props) {
+  const {
+    value,
+    onChange,
+    min,
+    step,
+    max,
+    readOnly,
+    className,
+    ...otherProps
+  } = props;
+  return /*#__PURE__*/React.createElement(Input, Object.assign({
+    type: "number",
+    className: className,
+    value: value || '0',
+    min: min,
+    step: step,
+    max: max,
+    readOnly: readOnly,
+    onChange: onChange
+  }, otherProps));
+}
+NumberInput.defaultProps = {
+  min: 0,
+  step: 1,
+  max: Infinity,
+  readOnly: false
+};
+export default NumberInput;

package/{lib → dist}/components/pixel-editor/index.css

@@ -1,9 +1,9 @@
-.seastatistic-pixel-editor-wrapper {
+.sea-chart-pixel-editor-wrapper {
   display: flex;
   width: 100%;
 }
 
-.seastatistic-pixel-editor-wrapper .form-control {
+.sea-chart-pixel-editor-wrapper .form-control {
   position: relative;
   flex: 1;
   border-top-right-radius: 0;
@@ -11,7 +11,7 @@
   z-index: 0;
 }
 
-.seastatistic-pixel-editor-wrapper .pixel-unit {
+.sea-chart-pixel-editor-wrapper .pixel-unit {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -24,6 +24,6 @@
   background-color: #fff;
 }
 
-.seastatistic-pixel-editor-wrapper .pixel-unit span {
+.sea-chart-pixel-editor-wrapper .pixel-unit span {
   margin-top: -2px;
 }

package/{lib → dist}/components/pixel-editor/index.js

@@ -1,38 +1,34 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import React, { useEffect, useRef, useState } from 'react';
 import { isNumber } from 'dtable-utils';
 import NumberInput from '../number-input';
 import './index.css';
-var PixelEditor = function PixelEditor(props) {
-  var pixel = props.pixel;
-  var _useState = useState(isNumber(pixel) ? pixel : null),
-    _useState2 = _slicedToArray(_useState, 2),
-    currPixel = _useState2[0],
-    setCurrPixel = _useState2[1];
-  var mountRef = useRef(false);
-  useEffect(function () {
+const PixelEditor = props => {
+  const {
+    pixel
+  } = props;
+  const [currPixel, setCurrPixel] = useState(isNumber(pixel) ? pixel : null);
+  const mountRef = useRef(false);
+  useEffect(() => {
     if (!mountRef.current) {
       mountRef.current = true;
     } else {
       setCurrPixel(isNumber(props.pixel) ? props.pixel : null);
     }
   }, [props.pixel]);
-  var onSavePixel = function onSavePixel() {
+  const onSavePixel = () => {
     props.modifyPixel(currPixel);
   };
-  var onKeyDown = function onKeyDown(event) {
+  const onKeyDown = event => {
     if (event.key === 'Enter') {
       event.preventDefault();
       event.target.blur();
     }
   };
   return /*#__PURE__*/React.createElement("div", {
-    className: "seastatistic-pixel-editor-wrapper"
+    className: "sea-chart-pixel-editor-wrapper"
   }, /*#__PURE__*/React.createElement(NumberInput, {
     value: currPixel,
-    onChange: function onChange(event) {
-      return setCurrPixel(event.target.value);
-    },
+    onChange: event => setCurrPixel(event.target.value),
     onBlur: onSavePixel,
     onKeyDown: onKeyDown
   }), /*#__PURE__*/React.createElement("div", {

package/{lib → dist}/components/select-group/index.css

@@ -1,4 +1,4 @@
-.seastatistic-settings .select-group-container {
+.sea-chart-settings .select-group-container {
   display: block;
   width: 100%;
   height: 2.375rem;
@@ -10,14 +10,14 @@
   transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
 }
 
-.seastatistic-settings .select-group {
+.sea-chart-settings .select-group {
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
-.seastatistic-settings .select-group-container .select-group-item {
+.sea-chart-settings .select-group-container .select-group-item {
   height: 100%;
   flex: 1;
   text-align: center;
@@ -29,39 +29,39 @@
   cursor: pointer;
 }
 
-.seastatistic-settings .select-group-container .select-group-item.readOnly {
+.sea-chart-settings .select-group-container .select-group-item.readOnly {
   cursor: default;
   opacity: .6;
 }
 
-.seastatistic-settings .select-group-container .select-group-item.active {
+.sea-chart-settings .select-group-container .select-group-item.active {
   background-color: #FFF2E4;
   color: #ff8000;
   box-shadow: 0 0 0 1px #ff8000;
 }
 
-.seastatistic-settings .select-group-container .select-group-item:first-child.active {
+.sea-chart-settings .select-group-container .select-group-item:first-child.active {
   border-top-left-radius: 3px;
   border-bottom-left-radius: 3px;
 }
 
-.seastatistic-settings .select-group-container .select-group-item:last-child.active {
+.sea-chart-settings .select-group-container .select-group-item:last-child.active {
   border-top-right-radius: 3px;
   border-bottom-right-radius: 3px;
 }
 
-.seastatistic-settings .no-active-option .select-group-item:hover {
+.sea-chart-settings .no-active-option .select-group-item:hover {
   cursor: pointer;
   background-color: #FFF2E4;
   box-shadow: 0 0 0 1px #ff8000;
 }
 
-.seastatistic-settings .no-active-option .select-group-item:first-child:hover {
+.sea-chart-settings .no-active-option .select-group-item:first-child:hover {
   border-top-left-radius: 3px;
   border-bottom-left-radius: 3px;
 }
 
-.seastatistic-settings .no-active-option .select-group-item:last-child:hover {
+.sea-chart-settings .no-active-option .select-group-item:last-child:hover {
   border-top-right-radius: 3px;
   border-bottom-right-radius: 3px;
 }

package/dist/components/select-group/index.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import intl from '../../intl';
+import './index.css';
+class SelectGroup extends React.Component {
+  constructor(props) {
+    super(props);
+    this.onSelectChanged = event => {
+      const {
+        option
+      } = event.target.dataset;
+      if (option === this.state.activeOption) return;
+      this.setState({
+        activeOption: option
+      });
+      this.props.onSelectChanged(option);
+    };
+    this.state = {
+      activeOption: props.activeOption
+    };
+  }
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    if (nextProps.activeOption !== this.state.activeOption) {
+      this.setState({
+        activeOption: nextProps.activeOption
+      });
+    }
+  }
+  render() {
+    const {
+      options,
+      optionsDisplay
+    } = this.props;
+    const {
+      activeOption
+    } = this.state;
+    return /*#__PURE__*/React.createElement("div", {
+      className: "select-group-container"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "select-group"
+    }, options.map(option => {
+      const isActive = activeOption === option ? true : false;
+      const displayOption = optionsDisplay && optionsDisplay[option] ? intl.get(optionsDisplay[option]) : option;
+      return /*#__PURE__*/React.createElement("div", {
+        key: option,
+        className: "select-group-item ".concat(isActive ? 'active' : ''),
+        "data-option": option,
+        onClick: this.onSelectChanged
+      }, displayOption);
+    })));
+  }
+}
+export default SelectGroup;

package/dist/components/types-dialog/index.css

@@ -0,0 +1,97 @@
+.sea-chart-types-dialog {
+  max-width: 1102px;
+  width: 1102px;
+  height: calc(100% - 56px);
+}
+
+.sea-chart-types-dialog .modal-content {
+  height: 100%;
+}
+
+.sea-chart-types-dialog .sea-chart-types-body {
+  padding: 0;
+  overflow: hidden;
+}
+
+.sea-chart-types-dialog .sea-chart-chart-categories-nav {
+  border-bottom: 1px solid #e9ecef;
+  background-color: #f9f9f9;
+  height: 50px;
+  box-sizing: border-box;
+  margin: 0;
+}
+
+.sea-chart-types-dialog .sea-chart-chart-categories-nav .sea-chart-chart-cat-nav-item {
+  height: 40px;
+  width: 48px;
+}
+
+.sea-chart-types-dialog .sea-chart-chart-categories-nav .sea-chart-chart-cat-nav-item-container {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.sea-chart-types-dialog .sea-chart-chart-categories-nav .sea-chart-chart-cat-nav-item-container.sea-chart-icon-highlight .chart-icon {
+  color: #ff8000;
+}
+
+.sea-chart-types-dialog .sea-chart-chart-categories-nav .chart-icon {
+  cursor: pointer;
+  color: #666;
+}
+
+.sea-chart-types-dialog .sea-chart-type-container {
+  padding: 0 16px 16px;
+}
+
+.sea-chart-types-dialog .sea-chart-type-container:before {
+  content: "";
+  display: block;
+  width: 100%;
+  height: 20px;
+}
+
+.sea-chart-types-dialog .sea-chart-type-title {
+  font-weight: 600;
+  font-size: 18px;
+  color: #202428;
+}
+
+.sea-chart-types-dialog .sea-chart-type-item {
+  height: 172px;
+  width: 250px;
+  
+  border: 1px solid #dcdade;
+  border-radius: 4px;
+  box-shadow: 0 0 2px 0 rgb(0 0 0 / 10%);
+  margin: 20px 17px 0 0;
+}
+
+.sea-chart-types-dialog .sea-chart-type-item:hover {
+  cursor: pointer;
+  border-color: #FFBF7F;
+}
+
+.sea-chart-types-dialog .sea-chart-type-item.selected {
+  border-color: #FF8000;
+}
+
+.sea-chart-types-dialog .sea-chart-type-description {
+  font-weight: 500;
+  font-size: 14px;
+  margin-top: 14px;
+  padding: 0 15px;
+  margin-bottom: 10px;
+}
+
+.sea-chart-types-dialog .sea-chart-type-image-container {
+  padding: 0 12px;
+}
+
+.sea-chart-types-dialog .sea-chart-type-image-container .sea-chart-type-demo-image {
+  width: 100%;
+  height: 125px;
+}