sea-chart 1.1.21 → 1.1.22-alpha.2

package/dist/view/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import shallowEqual from 'shallowequal';
+import { isEqual } from 'lodash-es';
 import context from '../context';
 import intl from '../intl';
 import eventBus from '../utils/event-bus';
@@ -20,6 +20,21 @@ class View extends React.PureComponent {
     this.refreshChart = () => {
       this.calculateStatistic();
     };
+    this.handleModifyRecord = _ref => {
+      var _chart$config, _chart$config2;
+      let {
+        table_id
+      } = _ref;
+      const {
+        chart
+      } = this.props;
+      if (((_chart$config = chart.config) === null || _chart$config === void 0 ? void 0 : _chart$config.table_id) && table_id === ((_chart$config2 = chart.config) === null || _chart$config2 === void 0 ? void 0 : _chart$config2.table_id)) {
+        this.calculateStatistic();
+      }
+    };
+    this.handleDeleteRecord = data => {
+      this.handleModifyRecord(data);
+    };
     this.callback = (errorMessage, tipMessage, data) => {
       if (errorMessage) {
         this.setState({
@@ -57,7 +72,6 @@ class View extends React.PureComponent {
     };
     this.calculateStatistic = function () {
       let isNeedRequestData = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
-      let data_sources = arguments.length > 1 ? arguments[1] : undefined;
       const {
         tables,
         chart,
@@ -90,14 +104,14 @@ class View extends React.PureComponent {
           collaborators
         }, {
           ...data,
-          data_sources
+          data_sources: null
+        }, _this.callback);
+      } else {
+        ChartUtils.calculateChart(chart, {
+          tables,
+          collaborators
         }, _this.callback);
-        return;
       }
-      ChartUtils.calculateChart(chart, {
-        tables,
-        collaborators
-      }, _this.callback);
     };
     this.state = {
       isCalculated: false,
@@ -111,7 +125,15 @@ class View extends React.PureComponent {
     intl.setLang(lang);
   }
   componentDidMount() {
+    var _window$app;
+    const {
+      isCalculateByView
+    } = this.props;
     this.unsubscribeReFreshChart = eventBus.subscribe(CommonEventTypes.REFRESH_CHARTS, this.refreshChart);
+    if (((_window$app = window.app) === null || _window$app === void 0 ? void 0 : _window$app.eventBus) && isCalculateByView) {
+      window.app.eventBus.subscribe(CommonEventTypes.EXPAND_ROW_UPDATED, this.handleModifyRecord);
+      window.app.eventBus.subscribe(CommonEventTypes.EXPAND_ROW_DELETED, this.handleDeleteRecord);
+    }
     const {
       hasUnSaved
     } = this.props;
@@ -131,19 +153,25 @@ class View extends React.PureComponent {
       chart,
       hasUnSaved: nextUnSaved
     } = nextProps;
+    const {
+      config: oldConfig
+    } = oldChart;
+    const {
+      config
+    } = chart;
     const {
       data
     } = this.state;
     context.api = this.props.api;
 
     // universal-apps will not trigger calculation of the chart before the chart config saved
-    // after saved, hasUnSaved was set to false, then trigger calculation
+    // after saving, hasUnSaved was set to false, then start calculation
     const needCalc = hasUnSaved === true && nextUnSaved === false;
     if (needCalc && !data) {
       this.calculateStatistic();
       return;
     }
-    if (shallowEqual(chart, oldChart)) return;
+    if (isEqual(config, oldConfig)) return;
     this.setState({
       isCalculated: false
     }, () => {
@@ -169,7 +197,7 @@ class View extends React.PureComponent {
     });
   }
   render() {
-    var _chart$config, _chart$config2;
+    var _title$text, _chart$config3;
     const {
       chart,
       className,
@@ -191,7 +219,19 @@ class View extends React.PureComponent {
       errorMessage,
       tipMessage
     } = this.state;
-    const chartType = chart === null || chart === void 0 ? void 0 : (_chart$config = chart.config) === null || _chart$config === void 0 ? void 0 : _chart$config.type;
+    let {
+      style_config,
+      config
+    } = chart;
+    if (!style_config) style_config = {};
+    if (!config) config = {};
+    const {
+      type: chartType
+    } = config;
+    const {
+      title
+    } = style_config;
+    const hasTitle = title && ((_title$text = title.text) === null || _title$text === void 0 ? void 0 : _title$text.length);
     const validClassName = classnames('sea-chart-formatter', className);
     const tipBackgroundColorClassName = 'sea-chart-formatter-tip';
     if (!isCalculated) {
@@ -217,13 +257,15 @@ class View extends React.PureComponent {
     return /*#__PURE__*/React.createElement("div", {
       className: validClassName
     }, /*#__PURE__*/React.createElement("div", {
-      className: classnames('sea-chart-formatter-container', "sea-chart-".concat(chart === null || chart === void 0 ? void 0 : (_chart$config2 = chart.config) === null || _chart$config2 === void 0 ? void 0 : _chart$config2.type, "-formatter-container"), {
+      className: classnames('sea-chart-formatter-container', "sea-chart-".concat(chart === null || chart === void 0 ? void 0 : (_chart$config3 = chart.config) === null || _chart$config3 === void 0 ? void 0 : _chart$config3.type, "-formatter-container"), {
         'big_screen_plugin': isBigScreenPlugin
       })
     }, !hideTitle && /*#__PURE__*/React.createElement(Title, {
       chart: chart
     }), /*#__PURE__*/React.createElement("div", {
-      className: "sea-chart-cavans-container"
+      className: classnames('sea-chart-cavans-container', {
+        'has-title': hasTitle
+      })
     }, /*#__PURE__*/React.createElement(Wrapper, {
       chart: chart,
       data: data,

package/dist/view/wrapper/bar-group.js

@@ -96,7 +96,7 @@ class BarGroup extends ChartComponent {
       } else {
         const maxCountGroup = maxBy(newData, 'currentGroupCount');
         // y-axis label width：6 + 10
-        singleBarWidth = Math.round(chartWidth / (2 * newData.length * maxCountGroup.currentGroupCount));
+        singleBarWidth = maxCountGroup && Math.round(chartWidth / (2 * newData.length * maxCountGroup.currentGroupCount));
       }
       singleBarRadius = Math.min(singleBarWidth / 5, 10);
       this.drawLabels(newData);

package/dist/view/wrapper/index.js

@@ -26,6 +26,7 @@ import HeatMap from './heat-map';
 import Mirror from './mirror';
 import Trend from './trend';
 import Funnel from './funnel';
+import TableElement from './table-element';
 const Wrapper = _ref => {
   let {
     dtableStoreValue,
@@ -84,6 +85,12 @@ const Wrapper = _ref => {
       isBigScreenPlugin
     };
     switch (type) {
+      case CHART_TYPE.TABLE_ELEMENT:
+        {
+          return /*#__PURE__*/React.createElement(TableElement, Object.assign({}, baseProps, {
+            canvasStyle: canvasStyle
+          }));
+        }
       case CHART_TYPE.TABLE:
         {
           if (!result) return null;

package/dist/view/wrapper/table-element/components/dataset-utils.js

@@ -0,0 +1,123 @@
+import { CellType } from 'dtable-utils';
+import { getPreviewContent } from '@seafile/seafile-editor';
+export const DATASET_NOT_SUPPORT_COLUMN_TYPES = [CellType.BUTTON];
+export const getCellRecordWidth = function (column) {
+  let isSample = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  let {
+    type,
+    data
+  } = column;
+  switch (type) {
+    case CellType.DATE:
+      {
+        let isShowHourAndMinute = data && data.format && data.format.indexOf('HH:mm') > -1;
+        return isShowHourAndMinute ? 160 : 110;
+      }
+    case CellType.LONG_TEXT:
+    case CellType.AUTO_NUMBER:
+    case CellType.URL:
+    case CellType.EMAIL:
+      {
+        return 200;
+      }
+    case CellType.CHECKBOX:
+      {
+        return 80;
+      }
+    case CellType.NUMBER:
+      {
+        return 120;
+      }
+    case CellType.CTIME:
+    case CellType.MTIME:
+      {
+        return 170;
+      }
+    case CellType.RATE:
+      {
+        const {
+          rate_max_number
+        } = data || {};
+        const rateMaxNumber = rate_max_number || 5;
+        return 16 * rateMaxNumber + 20;
+      }
+    case CellType.IMAGE:
+    case CellType.FILE:
+      {
+        return isSample ? 60 : 160;
+      }
+    default:
+      {
+        return 160;
+      }
+  }
+};
+export const getFormulaArrayValue = function (value) {
+  let isFlat = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+  if (!Array.isArray(value)) return [];
+  if (!isFlat) return getTwoDimensionArrayValue(value);
+  return value.map(item => {
+    if (Object.prototype.toString.call(item) !== '[object Object]') {
+      return item;
+    }
+    if (!Object.prototype.hasOwnProperty.call(item, 'display_value')) return item;
+    const {
+      display_value
+    } = item;
+    if (!Array.isArray(display_value) || display_value.length === 0) return display_value;
+    return display_value.map(i => {
+      if (Object.prototype.toString.call(i) === '[object Object]') {
+        if (!Object.prototype.hasOwnProperty.call(i, 'display_value')) return i;
+        const {
+          display_value
+        } = i;
+        return display_value;
+      }
+      return i;
+    });
+  }).flat().filter(item => isValidCellValue(item));
+};
+export const convertValueToDtableLongTextValue = value => {
+  const valueType = Object.prototype.toString.call(value);
+  if (value && valueType === '[object String]') {
+    return getPreviewContent(value);
+  }
+  if (valueType === '[object Object]') {
+    return value;
+  }
+  return '';
+};
+export const isValidCellValue = value => {
+  if (value === undefined) return false;
+  if (value === null) return false;
+  if (value === '') return false;
+  if (JSON.stringify(value) === '{}') return false;
+  if (JSON.stringify(value) === '[]') return false;
+  return true;
+};
+export const getTwoDimensionArrayValue = value => {
+  if (!Array.isArray(value)) return [];
+  return value.map(item => {
+    if (Object.prototype.toString.call(item) !== '[object Object]') {
+      return item;
+    }
+    if (!Object.prototype.hasOwnProperty.call(item, 'display_value')) return item;
+    const {
+      display_value
+    } = item;
+    if (!Array.isArray(display_value) || display_value.length === 0) return display_value;
+    return display_value.map(i => {
+      if (Object.prototype.toString.call(i) === '[object Object]') {
+        if (!Object.prototype.hasOwnProperty.call(i, 'display_value')) return i;
+        const {
+          display_value
+        } = i;
+        return display_value;
+      }
+      return i;
+    });
+  });
+};
+export function isArrayFormalColumn(columnType) {
+  return [CellType.IMAGE, CellType.FILE, CellType.MULTIPLE_SELECT, CellType.COLLABORATOR].includes(columnType);
+}

package/dist/view/wrapper/table-element/components/formatter.js

@@ -0,0 +1,309 @@
+import _ButtonFormatter from "dtable-ui-component/lib/ButtonFormatter";
+import _RateFormatter from "dtable-ui-component/lib/RateFormatter";
+import _DurationFormatter from "dtable-ui-component/lib/DurationFormatter";
+import _EmailFormatter from "dtable-ui-component/lib/EmailFormatter";
+import _UrlFormatter from "dtable-ui-component/lib/UrlFormatter";
+import _AutoNumberFormatter from "dtable-ui-component/lib/AutoNumberFormatter";
+import _LastModifierFormatter from "dtable-ui-component/lib/LastModifierFormatter";
+import _CreatorFormatter from "dtable-ui-component/lib/CreatorFormatter";
+import _MTimeFormatter from "dtable-ui-component/lib/MTimeFormatter";
+import _CTimeFormatter from "dtable-ui-component/lib/CTimeFormatter";
+import _CheckboxFormatter from "dtable-ui-component/lib/CheckboxFormatter";
+import _DepartmentSingleSelectFormatter from "dtable-ui-component/lib/DepartmentSingleSelectFormatter";
+import _SingleSelectFormatter from "dtable-ui-component/lib/SingleSelectFormatter";
+import _MultipleSelectFormatter from "dtable-ui-component/lib/MultipleSelectFormatter";
+import _DateFormatter from "dtable-ui-component/lib/DateFormatter";
+import _NumberFormatter from "dtable-ui-component/lib/NumberFormatter";
+import _GeolocationFormatter from "dtable-ui-component/lib/GeolocationFormatter";
+import _FileFormatter from "dtable-ui-component/lib/FileFormatter";
+import _ImageFormatter from "dtable-ui-component/lib/ImageFormatter";
+import _LongTextFormatter from "dtable-ui-component/lib/LongTextFormatter";
+import _CollaboratorFormatter from "dtable-ui-component/lib/CollaboratorFormatter";
+import _TextFormatter from "dtable-ui-component/lib/TextFormatter";
+import React, { Fragment } from 'react';
+import { CellType } from 'dtable-utils';
+import DtableFormulaFormatter from './formula-formatter';
+import LinkFormatter from './link-formatter';
+class Formatter extends React.Component {
+  constructor() {
+    super(...arguments);
+    this.renderEmptyFormatter = () => {
+      const {
+        empty
+      } = this.props;
+      const {
+        component
+      } = empty || {};
+      if (component) return component;
+      return /*#__PURE__*/React.createElement("span", {
+        className: "row-cell-value-empty"
+      });
+    };
+    this.downloadImage = url => {
+      let seafileFileIndex = url.indexOf('seafile-connector');
+      if (seafileFileIndex > -1) return;
+      window.location.href = url + '?dl=1';
+    };
+    this.renderFormatter = () => {
+      let {
+        column,
+        cellValue,
+        collaborators,
+        isSample,
+        isRowExpand,
+        departments
+      } = this.props;
+      const {
+        type: columnType
+      } = column || {};
+      const containerClassName = "table-element-".concat(columnType, "-formatter");
+      switch (columnType) {
+        case CellType.TEXT:
+          {
+            if (!cellValue) return this.renderEmptyFormatter();
+            return /*#__PURE__*/React.createElement(_TextFormatter, {
+              value: cellValue,
+              containerClassName: containerClassName
+            });
+          }
+        case CellType.COLLABORATOR:
+          {
+            if (!Array.isArray(cellValue) || cellValue.length === 0) return this.renderEmptyFormatter();
+            cellValue = cellValue.filter(item => item);
+            if (cellValue.length === 0) return this.renderEmptyFormatter();
+            this.props.queryUsers(cellValue);
+            return /*#__PURE__*/React.createElement(_CollaboratorFormatter, {
+              value: cellValue,
+              collaborators: collaborators,
+              containerClassName: containerClassName
+            });
+          }
+        case CellType.LONG_TEXT:
+          {
+            if (!cellValue) return this.renderEmptyFormatter();
+            return /*#__PURE__*/React.createElement(_LongTextFormatter, {
+              isSample: !isRowExpand,
+              value: cellValue,
+              containerClassName: containerClassName
+            });
+          }
+        case CellType.IMAGE:
+          {
+            if (!cellValue || Array.isArray(cellValue) && cellValue.length === 0) return this.renderEmptyFormatter();
+            return /*#__PURE__*/React.createElement(_ImageFormatter, {
+              value: cellValue,
+              containerClassName: containerClassName,
+              isSample: isSample,
+              isSupportPreview: true,
+              readOnly: true,
+              downloadImage: this.downloadImage
+            });
+          }
+        case CellType.FILE:
+          {
+            if (!cellValue || Array.isArray(cellValue) && cellValue.length === 0) return this.renderEmptyFormatter();
+            return /*#__PURE__*/React.createElement(_FileFormatter, {
+              value: cellValue,
+              containerClassName: containerClassName,
+              isSample: isSample
+            });
+          }
+        case CellType.GEOLOCATION:
+          {
+            if (!cellValue) return this.renderEmptyFormatter();
+            return /*#__PURE__*/React.createElement(_GeolocationFormatter, {
+              value: cellValue,
+              data: column.data || {},
+              containerClassName: containerClassName
+            });
+          }
+        case CellType.NUMBER:
+          {
+            if (!cellValue && cellValue !== 0) return this.renderEmptyFormatter();
+            return /*#__PURE__*/React.createElement(_NumberFormatter, {
+              value: cellValue,
+              data: column.data || {},
+              containerClassName: containerClassName
+            });
+          }
+        case CellType.DATE:
+          {
+            if (!cellValue || typeof cellValue !== 'string') return this.renderEmptyFormatter();
+            const {
+              data
+            } = column;
+            const {
+              format
+            } = data || {};
+            return /*#__PURE__*/React.createElement(_DateFormatter, {
+              value: cellValue,
+              format: format,
+              containerClassName: containerClassName
+            });
+          }
+        case CellType.MULTIPLE_SELECT:
+          {
+            if (!cellValue || cellValue.length === 0) return this.renderEmptyFormatter();
+            const {
+              data
+            } = column;
+            const {
+              options
+            } = data || {};
+            return /*#__PURE__*/React.createElement(_MultipleSelectFormatter, {
+              value: cellValue,
+              options: options || [],
+              containerClassName: containerClassName
+            });
+          }
+        case CellType.SINGLE_SELECT:
+          {
+            if (!cellValue) return this.renderEmptyFormatter();
+            const {
+              data
+            } = column;
+            const {
+              options
+            } = data || {};
+            return /*#__PURE__*/React.createElement(_SingleSelectFormatter, {
+              value: cellValue,
+              options: options || [],
+              containerClassName: containerClassName
+            });
+          }
+        case CellType.DEPARTMENT_SINGLE_SELECT:
+          {
+            if (!cellValue) return this.renderEmptyFormatter();
+            return /*#__PURE__*/React.createElement(_DepartmentSingleSelectFormatter, {
+              value: cellValue,
+              departments: departments || []
+            });
+          }
+        case CellType.CHECKBOX:
+          {
+            return /*#__PURE__*/React.createElement(_CheckboxFormatter, {
+              value: cellValue,
+              containerClassName: containerClassName
+            });
+          }
+        case CellType.CTIME:
+          {
+            if (!cellValue) return this.renderEmptyFormatter();
+            return /*#__PURE__*/React.createElement(_CTimeFormatter, {
+              value: cellValue,
+              containerClassName: containerClassName
+            });
+          }
+        case CellType.MTIME:
+          {
+            if (!cellValue) return this.renderEmptyFormatter();
+            return /*#__PURE__*/React.createElement(_MTimeFormatter, {
+              value: cellValue,
+              containerClassName: containerClassName
+            });
+          }
+        case CellType.CREATOR:
+          {
+            this.props.queryUsers([cellValue]);
+            return /*#__PURE__*/React.createElement(_CreatorFormatter, {
+              collaborators: collaborators,
+              value: cellValue
+            });
+          }
+        case CellType.LAST_MODIFIER:
+          {
+            this.props.queryUsers([cellValue]);
+            return /*#__PURE__*/React.createElement(_LastModifierFormatter, {
+              collaborators: collaborators,
+              value: cellValue
+            });
+          }
+        case CellType.AUTO_NUMBER:
+          {
+            if (!cellValue) return this.renderEmptyFormatter();
+            return /*#__PURE__*/React.createElement(_AutoNumberFormatter, {
+              value: cellValue,
+              containerClassName: containerClassName
+            });
+          }
+        case CellType.URL:
+          {
+            if (!cellValue) return this.renderEmptyFormatter();
+            return /*#__PURE__*/React.createElement(_UrlFormatter, {
+              value: cellValue,
+              containerClassName: containerClassName
+            });
+          }
+        case CellType.EMAIL:
+          {
+            if (!cellValue) return this.renderEmptyFormatter();
+            return /*#__PURE__*/React.createElement(_EmailFormatter, {
+              value: cellValue,
+              containerClassName: containerClassName
+            });
+          }
+        case CellType.DURATION:
+          {
+            if (!cellValue) return this.renderEmptyFormatter();
+            return /*#__PURE__*/React.createElement(_DurationFormatter, {
+              value: cellValue,
+              format: column.data.duration_format,
+              containerClassName: containerClassName
+            });
+          }
+        case CellType.RATE:
+          {
+            return /*#__PURE__*/React.createElement(_RateFormatter, {
+              value: cellValue,
+              data: column.data || {},
+              containerClassName: containerClassName
+            });
+          }
+        case CellType.BUTTON:
+          {
+            return /*#__PURE__*/React.createElement(_ButtonFormatter, {
+              data: column.data || {},
+              containerClassName: containerClassName
+            });
+          }
+        case CellType.FORMULA:
+        case CellType.LINK_FORMULA:
+          {
+            return /*#__PURE__*/React.createElement(DtableFormulaFormatter, {
+              value: cellValue,
+              column: column,
+              collaborators: collaborators,
+              containerClassName: containerClassName,
+              queryUsers: this.props.queryUsers,
+              renderEmptyFormatter: this.renderEmptyFormatter
+            });
+          }
+        case CellType.LINK:
+          {
+            if (!Array.isArray(cellValue) || cellValue.length === 0) return this.renderEmptyFormatter();
+            return /*#__PURE__*/React.createElement(LinkFormatter, {
+              value: cellValue,
+              column: column,
+              collaborators: collaborators,
+              containerClassName: containerClassName,
+              renderEmptyFormatter: this.renderEmptyFormatter,
+              getOptionColors: this.props.getOptionColors,
+              getUserCommonInfo: this.props.getUserCommonInfo,
+              queryUsers: this.props.queryUsers
+            });
+          }
+        default:
+          return this.renderEmptyFormatter();
+      }
+    };
+  }
+  render() {
+    return /*#__PURE__*/React.createElement(Fragment, null, this.renderFormatter());
+  }
+}
+Formatter.defaultProps = {
+  isSample: false,
+  isRowExpand: false,
+  queryUsers: () => {}
+};
+export default Formatter;

package/dist/view/wrapper/table-element/components/formula-formatter.js

@@ -0,0 +1,36 @@
+import _FormulaFormatter from "dtable-ui-component/lib/FormulaFormatter";
+import React from 'react';
+import { CellType, COLLABORATOR_COLUMN_TYPES, FORMULA_RESULT_TYPE } from 'dtable-utils';
+import { convertValueToDtableLongTextValue } from './dataset-utils';
+function DtableFormulaFormatter(props) {
+  const {
+    value,
+    column,
+    collaborators,
+    containerClassName
+  } = props;
+  if (!value && value !== 0 && value !== false) {
+    return props.renderEmptyFormatter();
+  }
+  const {
+    result_type,
+    array_type
+  } = column.data || {};
+  let cellValue = value;
+  if (Array.isArray(cellValue)) {
+    if (array_type === CellType.LONG_TEXT) {
+      cellValue = cellValue.map(item => convertValueToDtableLongTextValue(item));
+    }
+  }
+  if (result_type === FORMULA_RESULT_TYPE.ARRAY && COLLABORATOR_COLUMN_TYPES.includes(array_type)) {
+    // need query user if not loaded
+    props.queryUsers(Array.isArray(cellValue) ? cellValue : [cellValue]);
+  }
+  return /*#__PURE__*/React.createElement(_FormulaFormatter, {
+    value: cellValue,
+    column: column,
+    collaborators: collaborators,
+    containerClassName: containerClassName
+  });
+}
+export default DtableFormulaFormatter;