sea-chart 0.0.1

package/lib/components/formatter/table/one-dimension-table-no-numeric-columns.js

@@ -0,0 +1,145 @@
+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, ObjectUtils } from '../../../utils';
+import intl from '../../../intl';
+var OneDimensionTableNoNumericColumns = /*#__PURE__*/function (_PureComponent) {
+  _inherits(OneDimensionTableNoNumericColumns, _PureComponent);
+  var _super = _createSuper(OneDimensionTableNoNumericColumns);
+  function OneDimensionTableNoNumericColumns() {
+    var _this;
+    _classCallCheck(this, OneDimensionTableNoNumericColumns);
+    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.renderHeader = function () {
+      var _this$props = _this.props,
+        groupbyColumn = _this$props.groupbyColumn,
+        selectedCell = _this$props.selectedCell;
+      var groupName = groupbyColumn.name;
+      var _ref = selectedCell || {},
+        selectRowIdx = _ref.rowIdx,
+        selectedCellIdx = _ref.cellIdx;
+      var isSelectedTotalCellBottom = selectRowIdx === 0 && selectedCellIdx === 0;
+      return /*#__PURE__*/React.createElement("thead", {
+        className: "seatable-table-header-sm"
+      }, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("th", {
+        className: "pivot-table-header"
+      }, groupName), /*#__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 _ref2 = _this.props.selectedCell || {},
+        selectedRowIdx = _ref2.rowIdx,
+        selectedCellIdx = _ref2.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$props2 = _this.props,
+        result = _this$props2.result,
+        groupbyColumn = _this$props2.groupbyColumn,
+        selectedCell = _this$props2.selectedCell,
+        summaryColumn = _this$props2.summaryColumn;
+      var pivot_rows = result.pivot_rows,
+        pivot_columns_total = result.pivot_columns_total;
+      var _ref3 = selectedCell || {},
+        selectRowIdx = _ref3.rowIdx,
+        selectedCellIdx = _ref3.cellIdx;
+      var pivotRowsLen = Array.isArray(pivot_rows) ? pivot_rows.length : 0;
+      var pivotColumnCells = [];
+      var isSelectRowTotalCellRight = selectRowIdx === pivotRowsLen && selectedCellIdx === 0;
+      var isSelectTotal = selectRowIdx === pivotRowsLen && selectedCellIdx === 0;
+      // eslint-disable-next-line
+      var total = ObjectUtils.hasOwnProperty(pivot_columns_total, 'total') ? pivot_columns_total['total'] : 0;
+      var summaryDisplayValue = StatisticsUtils.getSummaryValueDisplayString(summaryColumn, total);
+      var isValidSummaryDisplayValue = StatisticsUtils.isValidValue(summaryDisplayValue);
+      return /*#__PURE__*/React.createElement("tbody", null, pivotRowsLen > 0 && pivot_rows.map(function (rowItem, rowIdx) {
+        var name = rowItem.name,
+          total = rowItem.total,
+          rows = rowItem.rows;
+        var isSelectedRowNameRight = selectRowIdx === rowIdx && selectedCellIdx === 0;
+        // let pivotRowCells = [];
+        var isSelectedTotalCell = selectRowIdx === rowIdx && selectedCellIdx === 0;
+        var isSelectedTotalCellTop = selectRowIdx - 1 === rowIdx && selectedCellIdx === 0;
+        var isSelectedTotalCellLeft = selectRowIdx === rowIdx && selectedCellIdx === 0;
+        pivotColumnCells[rowIdx] = rows;
+        var totalDisplayValue = StatisticsUtils.getSummaryValueDisplayString(summaryColumn, total.total);
+        var isValidTotalDisplayValue = StatisticsUtils.isValidValue(totalDisplayValue);
+        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
+        })), /*#__PURE__*/React.createElement("td", {
+          className: classnames('pivot-cell', {
+            'pivot-empty-cell': !isValidTotalDisplayValue,
+            'selected-pivot-cell': isSelectedTotalCell,
+            'selected-pivot-cell-top': isSelectedTotalCellTop,
+            'selected-pivot-cell-left': isSelectedTotalCellLeft
+          })
+          // onClick={() => this.toggleRecords({rows: Array.isArray(rows) && rows.length > 0 ? rows : pivotRowCells, total: total}, {rowIdx, cellIdx: 0})}
+          ,
+          total: totalDisplayValue
+        }, isValidTotalDisplayValue ? totalDisplayValue : /*#__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'))), /*#__PURE__*/React.createElement("td", {
+        className: classnames('pivot-cell pivot-table-total', {
+          'pivot-empty-cell': !isValidSummaryDisplayValue,
+          'selected-pivot-cell': isSelectTotal
+        })
+        // onClick={() => this.onClickTotals(pivotColumnCells, {rowIdx: pivot_rows.length, cellIdx: 0})}
+        ,
+        title: isValidSummaryDisplayValue ? summaryDisplayValue : ''
+      }, isValidSummaryDisplayValue ? summaryDisplayValue : /*#__PURE__*/React.createElement("i", null), /*#__PURE__*/React.createElement("span", {
+        className: classnames({
+          'selected-pivot-cell-border': isSelectTotal
+        })
+      }))));
+    };
+    return _this;
+  }
+  _createClass(OneDimensionTableNoNumericColumns, [{
+    key: "render",
+    value: function render() {
+      var groupbyColumn = this.props.groupbyColumn;
+      if (!groupbyColumn) return '';
+      return /*#__PURE__*/React.createElement("table", {
+        className: "seastatistic-pivot-table"
+      }, this.renderHeader(), this.renderRows());
+    }
+  }]);
+  return OneDimensionTableNoNumericColumns;
+}(PureComponent);
+export default OneDimensionTableNoNumericColumns;

package/lib/components/formatter/table/one-dimension-table-with-numeric-columns.js

@@ -0,0 +1,193 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+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 OneDimensionTableWithNumericColumns = /*#__PURE__*/function (_PureComponent) {
+  _inherits(OneDimensionTableWithNumericColumns, _PureComponent);
+  var _super = _createSuper(OneDimensionTableWithNumericColumns);
+  function OneDimensionTableWithNumericColumns(_props) {
+    var _this;
+    _classCallCheck(this, OneDimensionTableWithNumericColumns);
+    _this = _super.call(this, _props);
+    _this.init = function (props) {
+      var summaryColumns = props.summaryColumns;
+      _this.summaryColumnsMethodMap = {};
+      if (Array.isArray(summaryColumns) && summaryColumns.length > 0) {
+        summaryColumns.forEach(function (item) {
+          var column_key = item.column_key,
+            summary_method = item.summary_method;
+          _this.summaryColumnsMethodMap[column_key] = summary_method;
+        });
+      }
+    };
+    _this.renderHeader = function () {
+      var _this$props = _this.props,
+        result = _this$props.result,
+        groupbyColumn = _this$props.groupbyColumn,
+        columnGroupbyColumn = _this$props.columnGroupbyColumn,
+        selectedCell = _this$props.selectedCell,
+        statisticTableColumns = _this$props.statisticTableColumns;
+      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;
+      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 column = statisticTableColumns.find(function (column) {
+          return column.key === 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("div", null, column.name));
+      })));
+    };
+    _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$props2 = _this.props,
+        result = _this$props2.result,
+        groupbyColumn = _this$props2.groupbyColumn,
+        selectedCell = _this$props2.selectedCell,
+        statisticTableColumns = _this$props2.statisticTableColumns;
+      var pivot_rows = result.pivot_rows,
+        pivot_columns = result.pivot_columns,
+        pivot_columns_total = result.pivot_columns_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;
+      return /*#__PURE__*/React.createElement("tbody", null, pivotRowsLen > 0 && pivot_rows.map(function (rowItem, rowIdx) {
+        var name = rowItem.name,
+          total = rowItem.total,
+          rows = rowItem.rows;
+        var isSelectedRowNameRight = selectRowIdx === rowIdx && selectedCellIdx === 0;
+        if (!Array.isArray(pivot_columns)) {
+          pivotColumnCells[rowIdx] = rowItem.rows || [];
+        }
+        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(pivot_columns) && pivot_columns.map(function (columnMap, cellIdx) {
+          var isSelectedCell = selectRowIdx === rowIdx && selectedCellIdx === cellIdx;
+          var isSelectedCellTop = selectRowIdx - 1 === rowIdx && selectedCellIdx === cellIdx;
+          var isSelectedCellLeft = selectRowIdx === rowIdx && selectedCellIdx - 1 === cellIdx;
+          var key = columnMap.key;
+          var column = statisticTableColumns.find(function (item) {
+            return item.key === key;
+          });
+          var displayValue = StatisticsUtils.getSummaryValueDisplayString(column, total[key], _this.summaryColumnsMethodMap[key]);
+          var isValidDisplayValue = StatisticsUtils.isValidValue(displayValue);
+          if (Array.isArray(rows) && rows.length > 0) {
+            if (pivotColumnCells[cellIdx]) {
+              var _pivotColumnCells$cel;
+              (_pivotColumnCells$cel = pivotColumnCells[cellIdx]).push.apply(_pivotColumnCells$cel, _toConsumableArray(rows));
+            } else {
+              pivotColumnCells[cellIdx] = _toConsumableArray(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({rows, total: total[key]}, {rowIdx, cellIdx})}
+            ,
+            title: isValidDisplayValue ? displayValue : ''
+          }, isValidDisplayValue ? displayValue : /*#__PURE__*/React.createElement("i", null), /*#__PURE__*/React.createElement("span", {
+            className: classnames({
+              'selected-pivot-cell-border': isSelectedCell
+            })
+          }));
+        }));
+      }), /*#__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 pivotColumnTotal = pivot_columns_total[c.key];
+        var column = statisticTableColumns.find(function (column) {
+          return column.key === c.key;
+        });
+        var totalDisplayValue = StatisticsUtils.getSummaryValueDisplayString(column, pivotColumnTotal, _this.summaryColumnsMethodMap[c.key]);
+        var isValidTotalDisplayValue = StatisticsUtils.isValidValue(totalDisplayValue);
+        var isSelectRowTotalCell = selectRowIdx === pivot_rows.length && selectedCellIdx === index;
+        var isSelectRowTotalCellLeft = selectRowIdx === pivot_rows.length && selectedCellIdx - 1 === index;
+        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
+          })
+        }));
+      })));
+    };
+    _this.init(_props);
+    return _this;
+  }
+  _createClass(OneDimensionTableWithNumericColumns, [{
+    key: "render",
+    value: function render() {
+      var groupbyColumn = this.props.groupbyColumn;
+      if (!groupbyColumn) return '';
+      return /*#__PURE__*/React.createElement("table", {
+        className: "seastatistic-pivot-table"
+      }, this.renderHeader(), this.renderRows());
+    }
+  }]);
+  return OneDimensionTableWithNumericColumns;
+}(PureComponent);
+export default OneDimensionTableWithNumericColumns;

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

@@ -0,0 +1,249 @@
+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;