dtable-statistic 4.0.2-test-2

package/es/tabs/statistic-tabs.module.css

@@ -0,0 +1,154 @@
+.tabs-container {
+  display: flex;
+  flex: 1 1;
+  height: 100%;
+  font-size: 14px;
+  font-weight: 500;
+  overflow: hidden;
+}
+
+.dashboard-tab {
+  height: 100%;
+  padding: 0 16px;
+  flex: 1 0 auto;
+  user-select: none;
+  cursor: grab;
+  position: relative;
+}
+
+.dashboard-tab-can-drop-before::before,
+.dashboard-tab-can-drop-after::after {
+  content: '';
+  border: 1px solid #555;
+  border-radius: 1px;
+  position: absolute;
+  top: 4px;
+  bottom: 4px;
+}
+
+.dashboard-tab-can-drop-before::before {
+  left: 0;
+}
+
+.dashboard-tab-can-drop-after::after {
+  right: -2px;
+}
+
+.dashboard-tab  .dashboard-tab-content {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  color: var(--statistic-header-font-color);
+  border-bottom: 2px solid transparent;
+}
+
+.dashboard-tab .tab-item-active {
+  border-color: #3b88fd;
+  color: var(--statistic-header-focused-font-color);
+  cursor: default;
+}
+
+.dashboard-tab .tab-item-active-mobile {
+  border-color: #3b88fd;
+  color: var(--statistic-header-focused-font-color);
+}
+
+.icon {
+  display: inline-block;
+  height: 18px;
+  font-size: 12px;
+  color: var(--view-icon-color);
+  transform: scale(.8);
+  transition: all .1s;
+}
+
+.btn-view-dropdown {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  margin-left: 5px;
+  margin-right: -5px;
+  line-height: 20px;
+  cursor: pointer;
+}
+
+.views-scroll-control {
+  display: flex;
+  align-items: center;
+  padding: 0 .25rem;
+}
+
+.views-scroll-control .scroll-control-btn {
+  cursor: default;
+}
+
+.views-scroll-control .scroll-control-btn:first-child {
+  margin-right: .1rem;
+}
+
+.views-scroll-control .scroll-active {
+  cursor: pointer;
+}
+
+.views-scroll-control .btn-scroll-icon {
+  color: var(--btn-scroll-icon-color);
+  font-size: 12px;
+  line-height: 24px;
+}
+
+.views-scroll-control .scroll-active .btn-scroll-icon {
+  color: var(--btn-scroll-icon-active-color);
+}
+
+.views-scroll-control .scroll-active:hover .btn-scroll-icon {
+  color: var(--btn-scroll-icon-active-hover-color);
+  opacity: 1;
+}
+
+.btn-add-view { 
+  display: flex;
+  align-items: center;
+  width: 24px;
+  height: 100%;
+  margin-right: .5rem;
+}
+
+.add-map-view-icon {
+  height: 24px;
+  width: 24px;
+  text-align: center;
+  cursor: pointer;
+  color: var(--common-font-color);
+  opacity: .5;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 24px;
+}
+
+.add-map-view-icon:hover {
+  opacity: 1;
+  color: var(--btn-add-view-hover-color);
+}
+
+.dashboard-tab .dashboard-tab-content:hover {
+  border-color: #3b88fd;
+  color: var(--statistic-header-focused-font-color);
+  cursor: pointer;
+}
+
+.views-tabs-scroll {
+  overflow-x: scroll;
+  overflow-y: hidden;
+  scrollbar-width: none;
+}
+
+.views-tabs-scroll::-webkit-scrollbar {
+  display: none;
+  width: 0;
+  height: 0;
+}

package/es/tabs/tab.js

@@ -0,0 +1,167 @@
+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, { Component } from 'react';
+import intl from 'react-intl-universal';
+import { ModalPortal } from '../components';
+import { isMobile } from '../utils';
+import styles from './statistic-tabs.module.css';
+var DashBoardTab = /*#__PURE__*/function (_Component) {
+  _inherits(DashBoardTab, _Component);
+  var _super = _createSuper(DashBoardTab);
+  function DashBoardTab(props) {
+    var _this;
+    _classCallCheck(this, DashBoardTab);
+    _this = _super.call(this, props);
+    _this.onHideViewDropdown = function () {
+      if (_this.state.isShowViewDropdown) {
+        _this.setState({
+          isShowViewDropdown: false
+        });
+      }
+    };
+    _this.onDropdownToggle = function (evt) {
+      evt.nativeEvent.stopImmediatePropagation();
+      var _this$btnViewDropdown = _this.btnViewDropdown.parentNode.getBoundingClientRect(),
+        top = _this$btnViewDropdown.top,
+        left = _this$btnViewDropdown.left,
+        height = _this$btnViewDropdown.height;
+      _this.setState({
+        isShowViewDropdown: !_this.state.isShowViewDropdown,
+        dropdownMenuPosition: {
+          top: top + height - 3,
+          left: left
+        }
+      });
+    };
+    _this.onDragStart = function (event) {
+      event.stopPropagation();
+      var ref = _this.itemRef;
+      event.dataTransfer.setDragImage(ref, 10, 10);
+      event.dataTransfer.effectAllowed = 'move';
+      event.dataTransfer.setData('text/plain', _this.props.item._id);
+    };
+    _this.onDragEnter = function (event) {
+      event.stopPropagation();
+      _this.enteredCounter++;
+    };
+    _this.onDragOver = function (event) {
+      if (event.dataTransfer.dropEffect === 'copy') {
+        return;
+      }
+      event.stopPropagation();
+      event.preventDefault();
+      event.dataTransfer.dropEffect = 'move';
+      _this.setState({
+        dropRelativePosition: event.nativeEvent.offsetX <= event.target.clientWidth / 2 ? 'before' : 'after'
+      });
+    };
+    _this.onDragLeave = function (event) {
+      event.stopPropagation();
+      _this.enteredCounter--;
+      if (_this.enteredCounter === 0) {
+        _this.setState({
+          dropRelativePosition: ''
+        });
+      }
+    };
+    _this.onDrop = function (event) {
+      event.stopPropagation();
+      event.preventDefault();
+      _this.enteredCounter = 0;
+      var dropRelativePosition = _this.state.dropRelativePosition;
+      _this.setState({
+        dropRelativePosition: ''
+      });
+      var draggedDashboardId = event.dataTransfer.getData('text/plain');
+      var _id = _this.props.item._id;
+      if (draggedDashboardId == _id) {
+        return;
+      }
+      _this.props.onMoveDashboard && _this.props.onMoveDashboard(draggedDashboardId, _id, dropRelativePosition);
+    };
+    _this.state = {
+      isShowViewDropdown: false,
+      dropdownMenuPosition: {
+        top: 0,
+        left: 0
+      }
+    };
+    _this.enteredCounter = 0;
+    return _this;
+  }
+  _createClass(DashBoardTab, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      document.addEventListener('click', this.onHideViewDropdown);
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      document.removeEventListener('click', this.onHideViewDropdown);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      var _this$props = this.props,
+        selected = _this$props.selected,
+        theme = _this$props.theme,
+        item = _this$props.item,
+        canDelete = _this$props.canDelete;
+      var _this$state = this.state,
+        isShowViewDropdown = _this$state.isShowViewDropdown,
+        dropdownMenuPosition = _this$state.dropdownMenuPosition,
+        dropRelativePosition = _this$state.dropRelativePosition;
+      return /*#__PURE__*/React.createElement("div", {
+        ref: function ref(_ref2) {
+          return _this2.itemRef = _ref2;
+        },
+        draggable: "true",
+        onDragStart: this.onDragStart,
+        onDragEnter: this.onDragEnter,
+        onDragOver: this.onDragOver,
+        onDragLeave: this.onDragLeave,
+        onDrop: this.onDrop,
+        className: "\n          ".concat(styles['dashboard-tab'], "\n          ").concat(dropRelativePosition == 'before' ? styles['dashboard-tab-can-drop-before'] : '', "\n          ").concat(dropRelativePosition == 'after' ? styles['dashboard-tab-can-drop-after'] : '', "\n        ")
+      }, /*#__PURE__*/React.createElement("div", {
+        ref: this.props.setViewItem,
+        onClick: this.props.onSelectDashboard,
+        className: "".concat(styles['dashboard-tab-content'], " ").concat(selected ? isMobile ? styles['tab-item-active-mobile'] : styles['tab-item-active'] : '')
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "view-name"
+      }, item.name), selected && !isMobile && /*#__PURE__*/React.createElement("div", {
+        onClick: this.onDropdownToggle,
+        ref: function ref(_ref) {
+          return _this2.btnViewDropdown = _ref;
+        },
+        className: "".concat(styles['btn-view-dropdown'])
+      }, /*#__PURE__*/React.createElement("i", {
+        className: "".concat(styles['icon'], " dtable-font dtable-icon-drop-down")
+      }), isShowViewDropdown && /*#__PURE__*/React.createElement(ModalPortal, null, /*#__PURE__*/React.createElement("div", {
+        className: "".concat(theme === 'dark' ? 'statistic-tabs-dropdown-dark' : 'statistic-tabs-dropdown-light', " statistic-dropdown-menu dropdown-menu large show"),
+        style: _objectSpread(_objectSpread({}, dropdownMenuPosition), {}, {
+          zIndex: 1500
+        })
+      }, /*#__PURE__*/React.createElement("button", {
+        className: "dropdown-item",
+        onClick: this.props.onToggleRenameView
+      }, /*#__PURE__*/React.createElement("i", {
+        className: "item-icon dtable-font dtable-icon-rename"
+      }), /*#__PURE__*/React.createElement("span", {
+        className: "item-text"
+      }, intl.get('Rename'))), canDelete && /*#__PURE__*/React.createElement("button", {
+        className: "dropdown-item",
+        onClick: this.props.onDeleteDashboard
+      }, /*#__PURE__*/React.createElement("i", {
+        className: "item-icon dtable-font dtable-icon-delete"
+      }), /*#__PURE__*/React.createElement("span", {
+        className: "item-text"
+      }, intl.get('Delete'))))))));
+    }
+  }]);
+  return DashBoardTab;
+}(Component);
+export default DashBoardTab;

package/es/utils/basic-chart-utils.js

@@ -0,0 +1,24 @@
+export function getChartDisplayLabels(containerWidth, minItemWidth, statistics) {
+  var labels = [];
+  var labelCount = Math.floor(containerWidth / minItemWidth);
+  labelCount = labelCount % 2 ? labelCount + 1 : labelCount;
+  var avg = Math.round(statistics.length / labelCount);
+  avg = avg > 2 ? avg : 2;
+  Array.isArray(statistics) && statistics.forEach(function (v, i) {
+    if (i % avg === 0) {
+      labels.push(v.name);
+    }
+  });
+  return labels;
+}
+export function getChartGroups(statistics) {
+  var chartGroups = [];
+  Array.isArray(statistics) && statistics.forEach(function (item) {
+    if (!chartGroups.find(function (g) {
+      return g.name === item.name;
+    })) {
+      chartGroups.push(item);
+    }
+  });
+  return chartGroups;
+}

package/es/utils/cell-format.js

@@ -0,0 +1,110 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import dayjs from 'dayjs';
+import { getCollaboratorsName, getCellValueDisplayString, getFormulaDisplayString, CellType, FORMULA_COLUMN_TYPES, FORMULA_RESULT_TYPE, COLLABORATOR_COLUMN_TYPES } from 'dtable-store';
+var getClientFormulaDisplayString = function getClientFormulaDisplayString(value, columnData) {
+  var _ref = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {},
+    _ref$tables = _ref.tables,
+    tables = _ref$tables === void 0 ? [] : _ref$tables,
+    _ref$collaborators = _ref.collaborators,
+    collaborators = _ref$collaborators === void 0 ? [] : _ref$collaborators;
+  if (!columnData || !value && value !== 0) return '';
+  var result_type = columnData.result_type,
+    array_type = columnData.array_type;
+  if (result_type === FORMULA_RESULT_TYPE.ARRAY) {
+    if (COLLABORATOR_COLUMN_TYPES.includes(array_type)) {
+      if (!value) {
+        return null;
+      }
+      var collaboratorList = Array.isArray(value) ? value : [value];
+      return getCollaboratorsName(collaborators, collaboratorList);
+    }
+  }
+  return getFormulaDisplayString(value, columnData, {
+    tables: tables,
+    collaborators: collaborators
+  });
+};
+
+/**
+ * @param {array} links [
+ *  {
+ *    row_id,        // id of linked row
+ *    display_value, // cell value from linked row
+ *  }
+ * ]
+ */
+var getClientLinkDisplayString = function getClientLinkDisplayString(links, columnData) {
+  var _ref2 = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {},
+    _ref2$tables = _ref2.tables,
+    tables = _ref2$tables === void 0 ? [] : _ref2$tables,
+    _ref2$collaborators = _ref2.collaborators,
+    collaborators = _ref2$collaborators === void 0 ? [] : _ref2$collaborators;
+  if (!columnData || !Array.isArray(links) || links.length === 0) {
+    return null;
+  }
+  var formulaData = _objectSpread({}, columnData);
+  if (!columnData.hasOwnProperty('result_type')) {
+    formulaData.result_type = FORMULA_RESULT_TYPE.ARRAY;
+  }
+  var displayValue = links.map(function (link) {
+    return link.display_value;
+  });
+  return getClientFormulaDisplayString(displayValue, formulaData, {
+    tables: tables,
+    collaborators: collaborators
+  });
+};
+var getAutoTimeDisplayString = function getAutoTimeDisplayString(row, key) {
+  var value = row[key];
+  if (value === '' || !value || typeof value !== 'string') {
+    return null;
+  }
+  var date = dayjs(value);
+  if (!date.isValid()) return value;
+  return date.format('YYYY-MM-DD HH:mm:ss');
+};
+var getFileDisplayString = function getFileDisplayString(row, key) {
+  var value = row[key];
+  if (!value || !Array.isArray(value) || value.length === 0) {
+    return null;
+  }
+  var fileNameList = [];
+  value.forEach(function (v) {
+    fileNameList.push(v.url.split('/').slice(-3).join('/').trim());
+  });
+  return decodeURIComponent(fileNameList.join(','));
+};
+var getClientCellValueDisplayString = function getClientCellValueDisplayString(row, type, key) {
+  var _ref3 = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {},
+    _ref3$formulaRows = _ref3.formulaRows,
+    formulaRows = _ref3$formulaRows === void 0 ? {} : _ref3$formulaRows,
+    data = _ref3.data,
+    _ref3$collaborators = _ref3.collaborators,
+    collaborators = _ref3$collaborators === void 0 ? [] : _ref3$collaborators,
+    _ref3$tables = _ref3.tables,
+    tables = _ref3$tables === void 0 ? [] : _ref3$tables;
+  if (FORMULA_COLUMN_TYPES.includes(type)) {
+    var formulaRow = formulaRows[row._id] || {};
+    return getClientFormulaDisplayString(formulaRow[key], data, {
+      tables: tables,
+      collaborators: collaborators
+    });
+  } else if (type === CellType.LINK) {
+    var _formulaRow = formulaRows[row._id] || {};
+    return getClientLinkDisplayString(_formulaRow[key], data, {
+      tables: tables,
+      collaborators: collaborators
+    });
+  } else if (type === CellType.CTIME || type === CellType.MTIME) {
+    return getAutoTimeDisplayString(row, key);
+  } else if (type === CellType.FILE) {
+    return getFileDisplayString(row, key);
+  }
+  return getCellValueDisplayString(row, type, key, {
+    formulaRows: formulaRows,
+    data: data,
+    collaborators: collaborators,
+    tables: tables
+  });
+};
+export { getClientCellValueDisplayString, getClientFormulaDisplayString };

package/es/utils/cell-value.js

@@ -0,0 +1,27 @@
+import { CellType } from 'dtable-store';
+import { isEmptyObject, isSameObject } from './object';
+export var isCellValueChanged = function isCellValueChanged(oldVal, newVal, columnType) {
+  if (oldVal === newVal) {
+    return false;
+  }
+  if (oldVal === undefined || oldVal === null) {
+    if ((columnType === CellType.GEOLOCATION || columnType === CellType.DIGITAL_SIGN) && isEmptyObject(newVal)) {
+      return false;
+    }
+    if ((columnType === CellType.DATE || columnType === CellType.NUMBER || columnType === CellType.DURATION) && newVal === null) {
+      return false;
+    }
+    if (Array.isArray(newVal)) {
+      return newVal.length !== 0;
+    }
+    return newVal !== false && newVal !== '';
+  }
+  if (Array.isArray(oldVal) && Array.isArray(newVal)) {
+    // [{}].toString(): [object Object]
+    return JSON.stringify(oldVal) !== JSON.stringify(newVal);
+  }
+  if (typeof oldVal === 'object' && typeof newVal === 'object' && newVal !== null) {
+    return !isSameObject(oldVal, newVal);
+  }
+  return oldVal !== newVal;
+};

package/es/utils/collaborator.js

@@ -0,0 +1,31 @@
+export var isValidCollaboratorEmail = function isValidCollaboratorEmail(email) {
+  var reg = /^[A-Za-z0-9]+([-_.][A-Za-z0-9]+)*@([A-Za-z0-9]+[-.])+[A-Za-z0-9]{2,6}$/;
+  return reg.test(email);
+};
+export var getKnownCreatorByEmail = function getKnownCreatorByEmail(collaborators, email) {
+  var _ref = window.dtable || {},
+    mediaUrl = _ref.mediaUrl;
+  var defaultAvatarUrl = "".concat(mediaUrl, "avatars/default.png");
+  if (email === 'anonymous' || email === 'Automation Rule') {
+    return {
+      name: email,
+      avatar_url: defaultAvatarUrl
+    };
+  }
+  var creator = collaborators.find(function (collaborator) {
+    return collaborator.email === email;
+  });
+  if (creator) return creator;
+  var dtableCollaborators = window.app && window.app.collaboratorsCache ? window.app.collaboratorsCache : {};
+  if (!isValidCollaboratorEmail(email)) {
+    creator = {
+      name: email,
+      avatar_url: defaultAvatarUrl
+    };
+    dtableCollaborators[email] = creator;
+    return creator;
+  }
+  creator = dtableCollaborators[email];
+  if (creator) return creator;
+  return null;
+};

package/es/utils/color-utils.js

@@ -0,0 +1,112 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import { filterRow, getValidFilters } from 'dtable-store';
+import { STAT_TYPE, TYPE_COLOR_USING } from '../constants';
+import { COLOR_RULE_FILTER_TYPE_MAP, FILTER_TYPE_2_CELL_TYPE } from '../constants/color-rules';
+export var getValidColorRules = function getValidColorRules(colorRules) {
+  if (!Array.isArray(colorRules) || colorRules.length === 0) {
+    return [];
+  }
+  var columns = [];
+  var keyExistColumnMap = {};
+  colorRules.forEach(function (colorRule) {
+    colorRule.filters.forEach(function (filter) {
+      var filterType = filter.filter_type;
+      if (keyExistColumnMap[filterType]) {
+        return;
+      }
+      columns.push({
+        key: COLOR_RULE_FILTER_TYPE_MAP.NUMERIC_VALUE,
+        type: FILTER_TYPE_2_CELL_TYPE[filterType]
+      });
+      keyExistColumnMap[filterType] = true;
+    });
+  });
+  return colorRules.map(function (colorRule) {
+    var filters = colorRule.filters;
+    var convertedFilters = filters.map(function (filter) {
+      return _objectSpread(_objectSpread({}, filter), {}, {
+        column_key: filter.filter_type
+      });
+    });
+    var validFilters = getValidFilters(convertedFilters, columns);
+    if (validFilters.length === 0) {
+      return null;
+    }
+    return _objectSpread(_objectSpread({}, colorRule), {}, {
+      filters: validFilters
+    });
+  }).filter(Boolean);
+};
+export var getConvertedColorRules = function getConvertedColorRules(colorRules) {
+  var validColorRules = getValidColorRules(colorRules);
+  return validColorRules.map(function (colorRule) {
+    var convertedFilters = colorRule.filters.map(function (filter) {
+      var filter_type = filter.filter_type;
+      return _objectSpread(_objectSpread({}, filter), {}, {
+        column_key: filter_type,
+        column: {
+          key: filter_type,
+          type: FILTER_TYPE_2_CELL_TYPE[filter_type]
+        }
+      });
+    });
+    return _objectSpread(_objectSpread({}, colorRule), {}, {
+      filters: convertedFilters
+    });
+  });
+};
+export var getLabelColorFromSpecificColor = function getLabelColorFromSpecificColor(chart) {
+  switch (chart.type) {
+    case STAT_TYPE.BAR:
+      {
+        return chart.y_axis_label_color;
+      }
+    case STAT_TYPE.HORIZONTAL_BAR:
+      {
+        return chart.horizontal_axis_label_color;
+      }
+    default:
+      {
+        return null;
+      }
+  }
+};
+export var getLabelColorFromColorRules = function getLabelColorFromColorRules(colorRules, value) {
+  if (!colorRules) {
+    return null;
+  }
+  var row = {
+    'numeric_value': value
+  };
+  var matchedRuleColor = null;
+  for (var i = 0, colorRulesLen = colorRules.length; i < colorRulesLen; i++) {
+    var colorRule = colorRules[i];
+    var color = colorRule.color,
+      filter_conjunction = colorRule.filter_conjunction,
+      filters = colorRule.filters;
+    if (filterRow(row, filter_conjunction, filters)) {
+      matchedRuleColor = color;
+      break;
+    }
+  }
+  return matchedRuleColor;
+};
+export var getLabelColor = function getLabelColor(_ref) {
+  var chart = _ref.chart,
+    colorRules = _ref.colorRules,
+    value = _ref.value;
+  switch (chart.color_option) {
+    case TYPE_COLOR_USING.USE_SPECIFIC_COLORS:
+      {
+        return getLabelColorFromSpecificColor(chart);
+      }
+    case TYPE_COLOR_USING.USE_RULES:
+      {
+        return getLabelColorFromColorRules(colorRules, value);
+      }
+    default:
+      {
+        return null;
+      }
+  }
+};

package/es/utils/column-utils.js

@@ -0,0 +1,18 @@
+import { CellType } from 'dtable-store';
+export function getColorFromSingleSelectColumn(column, target) {
+  var columnType = column.type,
+    columnData = column.data;
+  if (columnType !== CellType.SINGLE_SELECT) {
+    return null;
+  }
+  var options = columnData ? columnData.options : [];
+  var selectedOption = options.find(function (option) {
+    var id = target;
+    if (Array.isArray(target)) {
+      id = target[0];
+    }
+    return option.id === id;
+  });
+  var color = selectedOption && selectedOption.color;
+  return color || null;
+}

package/es/utils/column.js

@@ -0,0 +1,13 @@
+import { DEFAULT_DATE_FORMAT } from 'dtable-store';
+export function getSelectColumnOptions(column) {
+  if (!column || !column.data || !Array.isArray(column.data.options)) {
+    return [];
+  }
+  return column.data.options;
+}
+export function getDateColumnFormat(column) {
+  var format = column && column.data && column.data.format ? column.data.format : DEFAULT_DATE_FORMAT;
+  // Old Europe format is D/M/YYYY new format is DD/MM/YYYY
+  format = format.replace(/D\/M\/YYYY/, 'DD/MM/YYYY');
+  return format;
+}