dtable-statistic 4.4.24-alpha.9 → 5.0.0

package/es/stat-view/pivot-table/pivot-table-display-name.js

@@ -0,0 +1,215 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactIntlUniversal = _interopRequireDefault(require("react-intl-universal"));
+var _dtableUtils = require("dtable-utils");
+var _utils = require("../../utils");
+var _commonUtils = require("../../utils/common-utils");
+var _constants = require("../../constants");
+class PivotTableDisplayName extends _react.default.Component {
+  constructor(props) {
+    super(props);
+    this.updateUser = email => {
+      if (!window || !window.app) {
+        return;
+      }
+      let {
+        collaborators
+      } = window.app.state;
+      let user = (0, _utils.getKnownCreatorByEmail)(collaborators, email);
+      if (user) {
+        this.setState({
+          user
+        });
+        return;
+      }
+      let dtableCollaborators = window.app.collaboratorsCache;
+      if (!window.app.queryUsers) return;
+      window.app.queryUsers([email], emailUserMap => {
+        user = emailUserMap && emailUserMap[email];
+        if (user) {
+          dtableCollaborators[email] = user;
+          this.setState({
+            user
+          });
+          return;
+        }
+
+        // error handle
+        user = (0, _utils.generateDefaultUser)(email);
+        dtableCollaborators[email] = user;
+        this.setState({
+          user
+        });
+      });
+    };
+    this.getDisplayName = (value, column) => {
+      let {
+        type,
+        data
+      } = column;
+      let {
+        collaborators
+      } = window.app.state;
+      let displayName;
+      switch (type) {
+        case _dtableUtils.CellType.SINGLE_SELECT:
+        case _dtableUtils.CellType.MULTIPLE_SELECT:
+          {
+            let options = (0, _utils.getSelectColumnOptions)(column);
+            let option = (0, _dtableUtils.getOption)(options, value) || {};
+            let {
+              name: optionName,
+              color,
+              textColor
+            } = option;
+            displayName = /*#__PURE__*/_react.default.createElement("div", {
+              style: {
+                color: textColor,
+                backgroundColor: color
+              },
+              className: "multiple-select-option d-inline-block align-middle mw-100",
+              title: optionName,
+              "aria-label": optionName
+            }, optionName);
+            break;
+          }
+        case _dtableUtils.CellType.CREATOR:
+        case _dtableUtils.CellType.COLLABORATOR:
+        case _dtableUtils.CellType.LAST_MODIFIER:
+          {
+            displayName = /*#__PURE__*/_react.default.createElement(Collaborator, {
+              collaborator: this.state.user
+            });
+            break;
+          }
+        case _dtableUtils.CellType.NUMBER:
+          {
+            const displayValue = (0, _dtableUtils.isNumber)(value) ? (0, _dtableUtils.getNumberDisplayString)(value, data) : value;
+            displayName = /*#__PURE__*/_react.default.createElement("div", {
+              title: displayValue,
+              "aria-label": displayValue
+            }, displayValue);
+            break;
+          }
+        case _dtableUtils.CellType.LINK:
+          {
+            const displayValue = (0, _utils.getClientFormulaDisplayString)(Array.isArray(value) ? value : [value], data, {
+              collaborators
+            }) || null;
+            if (!displayValue) {
+              break;
+            }
+            displayName = /*#__PURE__*/_react.default.createElement("div", {
+              title: displayValue,
+              "aria-label": displayValue
+            }, displayValue);
+            break;
+          }
+        case _dtableUtils.CellType.FORMULA:
+        case _dtableUtils.CellType.LINK_FORMULA:
+          {
+            let displayValue = value;
+            let {
+              result_type,
+              array_type
+            } = data || {};
+            if (result_type === _dtableUtils.FORMULA_RESULT_TYPE.NUMBER) {
+              let valueNumber = parseFloat(value);
+              displayValue = (0, _dtableUtils.isNumber)(valueNumber) ? (0, _dtableUtils.getNumberDisplayString)(valueNumber, data) : value;
+            } else if (result_type === _dtableUtils.FORMULA_RESULT_TYPE.ARRAY) {
+              if (_dtableUtils.COLLABORATOR_COLUMN_TYPES.includes(array_type)) {
+                const currentCollaborators = Array.isArray(value) ? value : [value];
+                displayValue = currentCollaborators.map(email => {
+                  let user = array_type === _dtableUtils.CellType.COLLABORATOR ? (0, _dtableUtils.getCollaborator)(collaborators, email) : (0, _utils.getKnownCreatorByEmail)(collaborators, email);
+                  return (user || {}).name;
+                });
+                displayValue = displayValue + '';
+              }
+            }
+            displayName = /*#__PURE__*/_react.default.createElement("div", {
+              title: displayValue,
+              "aria-label": displayValue
+            }, displayValue);
+            break;
+          }
+        default:
+          {
+            const displayValue = typeof value !== 'string' ? String(value) : value;
+            displayName = /*#__PURE__*/_react.default.createElement("div", {
+              title: displayValue,
+              "aria-label": displayValue
+            }, displayValue);
+            break;
+          }
+      }
+      return displayName;
+    };
+    this.state = {
+      user: {}
+    };
+  }
+  componentDidMount() {
+    const {
+      column,
+      value
+    } = this.props;
+    const {
+      type
+    } = column;
+    if (!_dtableUtils.COLLABORATOR_COLUMN_TYPES.includes(type)) return;
+    this.updateUser(value);
+  }
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    const {
+      column,
+      value
+    } = nextProps;
+    const {
+      type
+    } = column;
+    if (!_dtableUtils.COLLABORATOR_COLUMN_TYPES.includes(type)) return;
+    if (value !== this.props.value || (0, _commonUtils.shallowEqual)(nextProps.column, this.props.column)) {
+      this.updateUser(value);
+    }
+  }
+  render() {
+    const {
+      value,
+      column
+    } = this.props;
+    const displayName = value && this.getDisplayName(value, column);
+    if (!displayName) {
+      return /*#__PURE__*/_react.default.createElement("div", null, "(".concat(_reactIntlUniversal.default.get(_constants.EMPTY_NAME), ")"));
+    }
+    return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, displayName);
+  }
+}
+var _default = exports.default = PivotTableDisplayName;
+function Collaborator(props) {
+  let {
+    avatar_url,
+    name
+  } = props.collaborator || {};
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "collaborators-formatter"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "collaborator"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "collaborator-avatar-container"
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    src: avatar_url,
+    alt: name,
+    className: "collaborator-avatar"
+  })), /*#__PURE__*/_react.default.createElement("span", {
+    className: "collaborator-name",
+    title: name,
+    "aria-label": name
+  }, name)));
+}

package/es/stat-view/pivot-table/statistic-pivot-table.module.css

@@ -0,0 +1,132 @@
+.pivot-table-container {
+  height: 100%;
+  width: 100%;
+  padding: 15px 20px;
+  box-sizing: border-box;
+  overflow: auto;
+}
+
+.pivot-table {
+  width: 100%;
+  margin: 0 auto;
+  position: relative;
+  table-layout: fixed;
+}
+
+.pivot-table tr {
+  border-bottom: 1px solid #ccc;
+  text-align: center;
+}
+
+.pivot-table thead {
+  border-top: 1px solid #ccc;
+  font-size: 13px;
+}
+
+.large-pivot-table td {
+  padding: 10px;
+  border-right: 1px solid #ccc;
+  border-left: 1px solid #ccc;
+  overflow: hidden;
+  min-width: 100px;
+  width: 150px;
+  max-width: 150px;
+  font-weight: normal;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.large-pivot-table th {
+  padding: 10px;
+  border-right: 1px solid #ccc;
+  border-left: 1px solid #ccc;
+  overflow: hidden;
+  min-width: 100px;
+  width: 150px;
+  max-width: 150px;
+  font-weight: normal;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.preview-pivot-table td,
+.preview-pivot-table th {
+  padding: 5px;
+  border-right: 1px solid #ccc;
+  border-left: 1px solid #ccc;
+  overflow: hidden;
+  font-weight: normal;
+}
+
+.pivot-table td>div, .pivot-table th>div {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  font-size: 13px;
+  max-width: 100%;
+}
+
+.pivot-table .column-title {
+  caption-side: top;
+  text-align: center;
+  color: inherit;
+  padding: 0;
+}
+
+.pivot-table .row-title {
+  position: absolute;
+  padding: 0;
+  transform: rotate(-90deg);
+  width: 100px;
+  left: -60px;
+  top: 50%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  text-align: center;
+  color: inherit;
+}
+
+.pivot-table .pivot-empty-cell i {
+  display: inline-block;
+  height: 6px;
+  width: 16px;
+  border-radius: 6px;
+  background: #f1f1f1;
+}
+
+.pivot-summary-multiple-columns-th {
+  width: 100%;
+  min-width: 100%;
+  border: 0px;
+  padding: 0px !important;
+}
+
+.pivot-summary-multiple-columns-td {
+  padding: 0px !important
+}
+
+.pivot-summary-multiple-columns-div {
+  display: flex;
+}
+
+.pivot-summary-multiple-columns-div div {
+  padding: 10px;
+  flex: 1;
+}
+
+.pivot-summary-multiple-columns-div :not(:last-child) {
+  border-right: 1px solid #ccc;
+}
+
+.multiple-pivot-empty-cell {
+  display: inline-block;
+  height: 6px;
+  width: 16px;
+  border-radius: 6px;
+  background: #f1f1f1;
+}
+
+.pivot-cell:hover {
+  cursor: pointer;
+}