sea-chart 0.0.1 → 0.0.2

package/lib/components/formatter/table/pivot-table-display-name.js

@@ -1,249 +0,0 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _createSuper from "@babel/runtime/helpers/esm/createSuper";
-import React, { Fragment } from 'react';
-import shallowEqual from 'shallowequal';
-import dayjs from 'dayjs';
-import { CellType, COLLABORATOR_COLUMN_TYPES, FORMULA_RESULT_TYPE, getOption, getCollaborator, getNumberDisplayString, isNumber } from 'dtable-utils';
-import { getClientFormulaDisplayString, getKnownCollaboratorByEmail, getColumnOptions, getDateColumnFormat, generateDefaultUser } from '../../../utils';
-import Collaborator from '../../collaborator';
-import intl from '../../../intl';
-var PivotTableDisplayName = /*#__PURE__*/function (_React$Component) {
-  _inherits(PivotTableDisplayName, _React$Component);
-  var _super = _createSuper(PivotTableDisplayName);
-  function PivotTableDisplayName(props) {
-    var _this;
-    _classCallCheck(this, PivotTableDisplayName);
-    _this = _super.call(this, props);
-    _this.updateCreator = function (email) {
-      var creator = getKnownCollaboratorByEmail(email);
-      if (creator) {
-        _this.setState({
-          creator: creator
-        });
-        return;
-      }
-      if (creator && creator.loaded) {
-        _this.setState({
-          creator: creator
-        });
-        return;
-      }
-      if (!creator) {
-        var valueTemplate = {
-          loaded: false,
-          email: email,
-          name: email
-        };
-        window.seaStatistic.context.updateCollaboratorsCache(email, valueTemplate);
-        window.seaStatistic.queryUsers([email], function (emailUserMap) {
-          creator = emailUserMap && emailUserMap[email] || generateDefaultUser(email);
-          var loadedCreator = _objectSpread(_objectSpread({}, creator), {}, {
-            loaded: true
-          });
-          window.seaStatistic.context.updateCollaboratorsCache(email, loadedCreator);
-          _this.setState({
-            creator: creator
-          });
-        });
-      }
-    };
-    _this.renderSelectOption = function (option) {
-      if (!option) return null;
-      var optionName = option.name,
-        color = option.color,
-        textColor = option.textColor;
-      return /*#__PURE__*/React.createElement("div", {
-        style: {
-          color: textColor,
-          backgroundColor: color
-        },
-        className: "multiple-select-option d-inline-block align-middle mw-100",
-        title: optionName,
-        "aria-label": optionName
-      }, optionName);
-    };
-    _this.renderCollaborator = function (collaborator) {
-      if (!collaborator) return null;
-      var avatar_url = collaborator.avatar_url,
-        name = collaborator.name;
-      return /*#__PURE__*/React.createElement("div", {
-        className: "collaborators-formatter"
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "collaborator"
-      }, /*#__PURE__*/React.createElement("span", {
-        className: "collaborator-avatar-container"
-      }, /*#__PURE__*/React.createElement("img", {
-        src: avatar_url,
-        alt: '',
-        className: "collaborator-avatar"
-      })), /*#__PURE__*/React.createElement("span", {
-        className: "collaborator-name",
-        title: name,
-        "aria-label": name
-      }, name)));
-    };
-    _this.getDisplayName = function (value, column) {
-      var type = column.type,
-        data = column.data;
-      var collaborators = window.seaStatistic.context.getCollaboratorsFromCache();
-      var displayName;
-      switch (type) {
-        case CellType.SINGLE_SELECT:
-          {
-            var options = getColumnOptions(column);
-            var option = getOption(options, value) || {};
-            displayName = /*#__PURE__*/React.createElement(React.Fragment, null, _this.renderSelectOption(option));
-            break;
-          }
-        case CellType.MULTIPLE_SELECT:
-          {
-            var _options = getColumnOptions(column);
-            var validValue = Array.isArray(value) && value.length !== 0 ? value : [];
-            displayName = /*#__PURE__*/React.createElement("div", {
-              className: "pivot-table-display-name-row"
-            }, validValue.map(function (item) {
-              var option = getOption(_options, item);
-              if (!item) return null;
-              return /*#__PURE__*/React.createElement(Fragment, {
-                key: item
-              }, _this.renderSelectOption(option));
-            }));
-            break;
-          }
-        case CellType.COLLABORATOR:
-          {
-            var _validValue = Array.isArray(value) && value.length !== 0 ? value : [];
-            displayName = /*#__PURE__*/React.createElement("div", {
-              className: "pivot-table-display-name-row"
-            }, _validValue.map(function (item) {
-              var collaborator = getCollaborator(collaborators, item);
-              if (!item) return null;
-              return /*#__PURE__*/React.createElement(Fragment, {
-                key: item
-              }, _this.renderCollaborator(collaborator));
-            }));
-            break;
-          }
-        case CellType.CREATOR:
-        case CellType.LAST_MODIFIER:
-          {
-            var creator = _this.state.creator;
-            displayName = /*#__PURE__*/React.createElement(Collaborator, {
-              collaborator: creator
-            });
-            break;
-          }
-        case CellType.NUMBER:
-          {
-            var valueNumber = parseFloat(value);
-            var displayValue = isNumber(valueNumber) ? getNumberDisplayString(valueNumber, data) : value;
-            displayName = /*#__PURE__*/React.createElement("div", {
-              title: displayValue,
-              "aria-label": displayValue
-            }, displayValue);
-            break;
-          }
-        case CellType.DATE:
-          {
-            var _displayValue = value + '';
-            if (_displayValue && _displayValue.split('-').length === 3) {
-              var format = getDateColumnFormat(column);
-              var spaceIndex = format.indexOf(' ');
-              if (spaceIndex > -1) {
-                format = format.slice(0, spaceIndex);
-              }
-              _displayValue = dayjs(_displayValue).format(format);
-            }
-            displayName = /*#__PURE__*/React.createElement("div", {
-              title: _displayValue,
-              "aria-label": _displayValue
-            }, _displayValue);
-            break;
-          }
-        case CellType.LINK:
-          {
-            var _displayValue2 = getClientFormulaDisplayString([value], data, {
-              collaborators: collaborators
-            }) || null;
-            displayName = /*#__PURE__*/React.createElement("div", {
-              title: _displayValue2,
-              "aria-label": _displayValue2
-            }, _displayValue2);
-            break;
-          }
-        case CellType.FORMULA:
-        case CellType.LINK_FORMULA:
-          {
-            var _displayValue3 = value;
-            var _ref = data || {},
-              result_type = _ref.result_type,
-              array_type = _ref.array_type;
-            if (result_type === FORMULA_RESULT_TYPE.NUMBER) {
-              var _valueNumber = parseFloat(value);
-              _displayValue3 = isNumber(_valueNumber) ? getNumberDisplayString(_valueNumber, data) : value;
-            } else if (result_type === FORMULA_RESULT_TYPE.ARRAY) {
-              if (COLLABORATOR_COLUMN_TYPES.includes(array_type) && Array.isArray(value)) {
-                _displayValue3 = value.map(function (email) {
-                  var user = array_type === CellType.COLLABORATOR ? getCollaborator(collaborators, email) : getKnownCollaboratorByEmail(email);
-                  return (user || {}).name;
-                });
-              }
-            }
-            displayName = /*#__PURE__*/React.createElement("div", {
-              title: _displayValue3,
-              "aria-label": _displayValue3
-            }, _displayValue3);
-            break;
-          }
-        default:
-          {
-            displayName = /*#__PURE__*/React.createElement("div", {
-              title: String(value),
-              "aria-label": String(value)
-            }, value);
-            break;
-          }
-      }
-      return displayName;
-    };
-    _this.state = {
-      creator: {}
-    };
-    return _this;
-  }
-  _createClass(PivotTableDisplayName, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var _this$props = this.props,
-        column = _this$props.column,
-        value = _this$props.value;
-      if (column.type !== CellType.CREATOR && column.type !== CellType.LAST_MODIFIER) return;
-      this.updateCreator(value);
-    }
-  }, {
-    key: "UNSAFE_componentWillReceiveProps",
-    value: function UNSAFE_componentWillReceiveProps(nextProps) {
-      var column = nextProps.column,
-        value = nextProps.value;
-      var type = column.type;
-      if (type !== CellType.CREATOR && type !== CellType.LAST_MODIFIER) return;
-      if (value !== this.props.value || shallowEqual(nextProps.column, this.props.column)) {
-        this.updateCreator(value);
-      }
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props2 = this.props,
-        value = _this$props2.value,
-        column = _this$props2.column;
-      var displayName = value ? this.getDisplayName(value, column) : /*#__PURE__*/React.createElement("div", null, "(".concat(intl.get('Empty'), ")"));
-      return /*#__PURE__*/React.createElement(Fragment, null, displayName);
-    }
-  }]);
-  return PivotTableDisplayName;
-}(React.Component);
-export default PivotTableDisplayName;

package/lib/components/formatter/table/two-dimension-table.js

@@ -1,241 +0,0 @@
-import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _createSuper from "@babel/runtime/helpers/esm/createSuper";
-import React, { PureComponent } from 'react';
-import classnames from 'classnames';
-import PivotTableDisplayName from './pivot-table-display-name';
-import { StatisticsUtils } from '../../../utils';
-import intl from '../../../intl';
-var TwoDimensionTable = /*#__PURE__*/function (_PureComponent) {
-  _inherits(TwoDimensionTable, _PureComponent);
-  var _super = _createSuper(TwoDimensionTable);
-  function TwoDimensionTable() {
-    var _this;
-    _classCallCheck(this, TwoDimensionTable);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _super.call.apply(_super, [this].concat(args));
-    _this.getCells = function (row) {
-      var _this$props = _this.props,
-        result = _this$props.result,
-        summaryColumn = _this$props.summaryColumn;
-      var pivot_columns = result.pivot_columns;
-      var cells = row.cells;
-      if (!Array.isArray(pivot_columns)) {
-        return [];
-      }
-      return pivot_columns.map(function (item) {
-        return _objectSpread(_objectSpread({}, cells[item.key]), {}, {
-          column: summaryColumn
-        });
-      });
-    };
-    _this.renderHeader = function () {
-      var _this$props2 = _this.props,
-        result = _this$props2.result,
-        groupbyColumn = _this$props2.groupbyColumn,
-        columnGroupbyColumn = _this$props2.columnGroupbyColumn,
-        selectedCell = _this$props2.selectedCell;
-      var groupName = groupbyColumn.name;
-      var _ref = columnGroupbyColumn || {},
-        rowGroupName = _ref.name;
-      var pivot_columns = result.pivot_columns;
-      var _ref2 = selectedCell || {},
-        selectRowIdx = _ref2.rowIdx,
-        selectedCellIdx = _ref2.cellIdx;
-      var isSelectedTotalCellBottom = selectRowIdx === 0 && selectedCellIdx === (Array.isArray(pivot_columns) ? pivot_columns.length : 0);
-      return /*#__PURE__*/React.createElement("thead", {
-        className: "seatable-table-header-sm"
-      }, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("th", {
-        className: "pivot-table-header"
-      }, !rowGroupName && groupName), Array.isArray(pivot_columns) && pivot_columns.map(function (item, index) {
-        var key = item.key;
-        var isSelectedHeaderBottom = selectRowIdx === 0 && selectedCellIdx === index;
-        return /*#__PURE__*/React.createElement("th", {
-          className: classnames('pivot-table-header', {
-            'selected-pivot-cell-top': isSelectedHeaderBottom
-          }),
-          key: "pivot-column-".concat(index)
-        }, /*#__PURE__*/React.createElement(PivotTableDisplayName, {
-          value: key,
-          column: columnGroupbyColumn || {}
-        }));
-      }), /*#__PURE__*/React.createElement("th", {
-        className: classnames('pivot-table-header', {
-          'selected-pivot-cell-top': isSelectedTotalCellBottom
-        })
-      }, /*#__PURE__*/React.createElement("div", null, intl.get('Total')))));
-    };
-    _this.toggleRecords = function (cell, selectedCell) {
-      if (window.isMobile) return;
-      var _ref3 = _this.props.selectedCell || {},
-        selectedRowIdx = _ref3.rowIdx,
-        selectedCellIdx = _ref3.cellIdx;
-      var rowIdx = selectedCell.rowIdx,
-        cellIdx = selectedCell.cellIdx;
-      if (rowIdx === selectedRowIdx && selectedCellIdx === cellIdx) return;
-      _this.props.toggleRecords(cell, selectedCell);
-    };
-    _this.onClickTotals = function (recordsList, selectedCell) {
-      if (window.isMobile) return;
-      var rows = recordsList.flat();
-      var total = rows.length;
-      _this.toggleRecords({
-        rows: rows,
-        total: total
-      }, selectedCell);
-    };
-    _this.renderRows = function () {
-      var _this$props3 = _this.props,
-        result = _this$props3.result,
-        groupbyColumn = _this$props3.groupbyColumn,
-        selectedCell = _this$props3.selectedCell,
-        summaryColumn = _this$props3.summaryColumn,
-        summaryMethod = _this$props3.summaryMethod;
-      var pivot_rows = result.pivot_rows,
-        pivot_columns = result.pivot_columns,
-        pivot_columns_total = result.pivot_columns_total,
-        pivot_table_total = result.pivot_table_total;
-      var _ref4 = selectedCell || {},
-        selectRowIdx = _ref4.rowIdx,
-        selectedCellIdx = _ref4.cellIdx;
-      var pivotRowsLen = Array.isArray(pivot_rows) ? pivot_rows.length : 0;
-      var pivotColumnCells = [];
-      var isSelectRowTotalCellRight = selectRowIdx === pivotRowsLen && selectedCellIdx === 0;
-      var isSelectTotal = selectRowIdx === pivotRowsLen && selectedCellIdx === (Array.isArray(pivot_columns) ? pivot_columns.length : 0);
-      var tableTotalDisplayValue = StatisticsUtils.getSummaryValueDisplayString(summaryColumn, pivot_table_total, summaryMethod);
-      var isValidTableTotalDisplayValue = StatisticsUtils.isValidValue(tableTotalDisplayValue);
-      return /*#__PURE__*/React.createElement("tbody", null, pivotRowsLen > 0 && pivot_rows.map(function (rowItem, rowIdx) {
-        var name = rowItem.name,
-          total = rowItem.total;
-        var cells = _this.getCells(rowItem);
-        var isSelectedRowNameRight = selectRowIdx === rowIdx && selectedCellIdx === 0;
-        var pivotRowCells = [];
-        var isSelectedTotalCell = selectRowIdx === rowIdx && selectedCellIdx === cells.length;
-        var isSelectedTotalCellTop = selectRowIdx - 1 === rowIdx && selectedCellIdx === cells.length;
-        var isSelectedTotalCellLeft = selectRowIdx === rowIdx && selectedCellIdx - 1 === cells.length - 1;
-        if (!Array.isArray(pivot_columns)) {
-          pivotColumnCells[rowIdx] = rowItem.rows || [];
-        }
-        var summaryDisplayValue = StatisticsUtils.getSummaryValueDisplayString(summaryColumn, total, summaryMethod);
-        var isValidSummaryDisplayValue = StatisticsUtils.isValidValue(summaryDisplayValue);
-        return /*#__PURE__*/React.createElement("tr", {
-          key: 'table-row' + rowIdx
-        }, /*#__PURE__*/React.createElement("td", {
-          className: classnames('pivot-row-name', {
-            'selected-pivot-cell-left': isSelectedRowNameRight
-          })
-        }, /*#__PURE__*/React.createElement(PivotTableDisplayName, {
-          value: name,
-          column: groupbyColumn
-        })), Array.isArray(cells) && cells.map(function (c, cellIdx) {
-          var isSelectedCell = selectRowIdx === rowIdx && selectedCellIdx === cellIdx;
-          var isSelectedCellTop = selectRowIdx - 1 === rowIdx && selectedCellIdx === cellIdx;
-          var isSelectedCellLeft = selectRowIdx === rowIdx && selectedCellIdx - 1 === cellIdx;
-          var column = c.column,
-            total = c.total;
-          var displayValue = StatisticsUtils.getSummaryValueDisplayString(column, total, summaryMethod);
-          var isValidDisplayValue = StatisticsUtils.isValidValue(displayValue);
-          if (c && Array.isArray(c.rows) && c.rows.length > 0) {
-            pivotRowCells.push.apply(pivotRowCells, _toConsumableArray(c.rows));
-            if (pivotColumnCells[cellIdx]) {
-              var _pivotColumnCells$cel;
-              (_pivotColumnCells$cel = pivotColumnCells[cellIdx]).push.apply(_pivotColumnCells$cel, _toConsumableArray(c.rows));
-            } else {
-              pivotColumnCells[cellIdx] = _toConsumableArray(c.rows);
-            }
-          }
-          return /*#__PURE__*/React.createElement("td", {
-            className: classnames('pivot-cell', {
-              'pivot-empty-cell': !isValidDisplayValue,
-              'selected-pivot-cell': isSelectedCell,
-              'selected-pivot-cell-top': isSelectedCellTop,
-              'selected-pivot-cell-left': isSelectedCellLeft
-            }),
-            key: "table-cell-".concat(cellIdx)
-            // onClick={() => this.toggleRecords(c, {rowIdx, cellIdx})}
-            ,
-            title: displayValue
-          }, isValidDisplayValue ? displayValue : /*#__PURE__*/React.createElement("i", null), /*#__PURE__*/React.createElement("span", {
-            className: classnames({
-              'selected-pivot-cell-border': isSelectedCell
-            })
-          }));
-        }), /*#__PURE__*/React.createElement("td", {
-          className: classnames('pivot-cell', {
-            'pivot-empty-cell': !isValidSummaryDisplayValue,
-            'selected-pivot-cell': isSelectedTotalCell,
-            'selected-pivot-cell-top': isSelectedTotalCellTop,
-            'selected-pivot-cell-left': isSelectedTotalCellLeft
-          })
-          // onClick={() => this.toggleRecords({ rows: Array.isArray(cells) && cells.length > 0 ? pivotRowCells : rowItem.rows, total: total }, { rowIdx, cellIdx: cells.length })}
-          ,
-          title: summaryDisplayValue
-        }, isValidSummaryDisplayValue ? summaryDisplayValue : /*#__PURE__*/React.createElement("i", null), /*#__PURE__*/React.createElement("span", {
-          className: classnames({
-            'selected-pivot-cell-border': isSelectedTotalCell
-          })
-        })));
-      }), /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
-        className: classnames('pivot-column-total', {
-          'selected-pivot-cell-left': isSelectRowTotalCellRight
-        })
-      }, /*#__PURE__*/React.createElement("div", null, intl.get('Total'))), Array.isArray(pivot_columns) && pivot_columns.map(function (c, index) {
-        // const pivotColumnCell = pivotColumnCells[index];
-        var isSelectRowTotalCell = selectRowIdx === pivot_rows.length && selectedCellIdx === index;
-        var isSelectRowTotalCellLeft = selectRowIdx === pivot_rows.length && selectedCellIdx - 1 === index;
-        var pivotColumnTotal = pivot_columns_total[c.key];
-        var totalDisplayValue = StatisticsUtils.getSummaryValueDisplayString(summaryColumn, pivotColumnTotal, summaryMethod);
-        var isValidTotalDisplayValue = StatisticsUtils.isValidValue(totalDisplayValue);
-        return /*#__PURE__*/React.createElement("td", {
-          className: classnames('pivot-cell', {
-            'pivot-empty-cell': !isValidTotalDisplayValue,
-            'selected-pivot-cell': isSelectRowTotalCell,
-            'selected-pivot-cell-left': isSelectRowTotalCellLeft
-          }),
-          key: "total-cell-".concat(index)
-          // onClick={() => this.toggleRecords({ rows: pivotColumnCell, total: pivot_columns_total[c.key] }, { rowIdx: pivot_rows.length, cellIdx: index })}
-          ,
-          title: totalDisplayValue
-        }, isValidTotalDisplayValue ? totalDisplayValue : /*#__PURE__*/React.createElement("i", null), /*#__PURE__*/React.createElement("span", {
-          className: classnames({
-            'selected-pivot-cell-border': isSelectRowTotalCell
-          })
-        }));
-      }), /*#__PURE__*/React.createElement("td", {
-        className: classnames('pivot-cell pivot-table-total', {
-          'pivot-empty-cell': !isValidTableTotalDisplayValue,
-          'selected-pivot-cell': isSelectTotal
-        })
-        // onClick={() => this.onClickTotals(pivotColumnCells, {rowIdx: pivot_rows.length, cellIdx: Array.isArray(pivot_columns) ? pivot_columns.length : 0})}
-      }, isValidTableTotalDisplayValue ? tableTotalDisplayValue : /*#__PURE__*/React.createElement("i", null), /*#__PURE__*/React.createElement("span", {
-        className: classnames({
-          'selected-pivot-cell-border': isSelectTotal
-        })
-      }))));
-    };
-    return _this;
-  }
-  _createClass(TwoDimensionTable, [{
-    key: "render",
-    value: function render() {
-      var _this$props4 = this.props,
-        groupbyColumn = _this$props4.groupbyColumn,
-        columnGroupbyColumn = _this$props4.columnGroupbyColumn;
-      if (!groupbyColumn) return '';
-      return /*#__PURE__*/React.createElement("table", {
-        className: "seastatistic-pivot-table"
-      }, /*#__PURE__*/React.createElement("caption", {
-        className: "column-title"
-      }, columnGroupbyColumn.name), /*#__PURE__*/React.createElement("caption", {
-        className: "row-title"
-      }, groupbyColumn.name), this.renderHeader(), this.renderRows());
-    }
-  }]);
-  return TwoDimensionTable;
-}(PureComponent);
-export default TwoDimensionTable;