dtable-statistic 4.2.2 → 4.3.0

package/es/tabs/tab.js

@@ -1,168 +1,153 @@
-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 { THEME_NAME_MAP } from '../constants';
 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({
+class DashBoardTab extends Component {
+  constructor(props) {
+    super(props);
+    this.onHideViewDropdown = () => {
+      if (this.state.isShowViewDropdown) {
+        this.setState({
           isShowViewDropdown: false
         });
       }
     };
-    _this.onDropdownToggle = function (evt) {
+    this.onDropdownToggle = 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,
+      const {
+        top,
+        left,
+        height
+      } = this.btnViewDropdown.parentNode.getBoundingClientRect();
+      this.setState({
+        isShowViewDropdown: !this.state.isShowViewDropdown,
         dropdownMenuPosition: {
           top: top + height - 3,
-          left: left
+          left
         }
       });
     };
-    _this.onDragStart = function (event) {
+    this.onDragStart = event => {
       event.stopPropagation();
-      var ref = _this.itemRef;
+      const ref = this.itemRef;
       event.dataTransfer.setDragImage(ref, 10, 10);
       event.dataTransfer.effectAllowed = 'move';
-      event.dataTransfer.setData('text/plain', _this.props.item._id);
+      event.dataTransfer.setData('text/plain', this.props.item._id);
     };
-    _this.onDragEnter = function (event) {
+    this.onDragEnter = event => {
       event.stopPropagation();
-      _this.enteredCounter++;
+      this.enteredCounter++;
     };
-    _this.onDragOver = function (event) {
+    this.onDragOver = event => {
       if (event.dataTransfer.dropEffect === 'copy') {
         return;
       }
       event.stopPropagation();
       event.preventDefault();
       event.dataTransfer.dropEffect = 'move';
-      _this.setState({
+      this.setState({
         dropRelativePosition: event.nativeEvent.offsetX <= event.target.clientWidth / 2 ? 'before' : 'after'
       });
     };
-    _this.onDragLeave = function (event) {
+    this.onDragLeave = event => {
       event.stopPropagation();
-      _this.enteredCounter--;
-      if (_this.enteredCounter === 0) {
-        _this.setState({
+      this.enteredCounter--;
+      if (this.enteredCounter === 0) {
+        this.setState({
           dropRelativePosition: ''
         });
       }
     };
-    _this.onDrop = function (event) {
+    this.onDrop = event => {
       event.stopPropagation();
       event.preventDefault();
-      _this.enteredCounter = 0;
-      var dropRelativePosition = _this.state.dropRelativePosition;
-      _this.setState({
+      this.enteredCounter = 0;
+      const {
+        dropRelativePosition
+      } = this.state;
+      this.setState({
         dropRelativePosition: ''
       });
-      var draggedDashboardId = event.dataTransfer.getData('text/plain');
-      var _id = _this.props.item._id;
+      const draggedDashboardId = event.dataTransfer.getData('text/plain');
+      const {
+        _id
+      } = this.props.item;
       if (draggedDashboardId == _id) {
         return;
       }
-      _this.props.onMoveDashboard && _this.props.onMoveDashboard(draggedDashboardId, _id, dropRelativePosition);
+      this.props.onMoveDashboard && this.props.onMoveDashboard(draggedDashboardId, _id, dropRelativePosition);
     };
-    _this.state = {
+    this.state = {
       isShowViewDropdown: false,
       dropdownMenuPosition: {
         top: 0,
         left: 0
       }
     };
-    _this.enteredCounter = 0;
-    return _this;
+    this.enteredCounter = 0;
   }
-  _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 === THEME_NAME_MAP.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);
+  componentDidMount() {
+    document.addEventListener('click', this.onHideViewDropdown);
+  }
+  componentWillUnmount() {
+    document.removeEventListener('click', this.onHideViewDropdown);
+  }
+  render() {
+    const {
+      selected,
+      theme,
+      item,
+      canDelete
+    } = this.props;
+    const {
+      isShowViewDropdown,
+      dropdownMenuPosition,
+      dropRelativePosition
+    } = this.state;
+    return /*#__PURE__*/React.createElement("div", {
+      ref: ref => this.itemRef = ref,
+      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: ref => this.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 === THEME_NAME_MAP.DARK ? 'statistic-tabs-dropdown-dark' : 'statistic-tabs-dropdown-light', " statistic-dropdown-menu dropdown-menu large show"),
+      style: {
+        ...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'))))))));
+  }
+}
 export default DashBoardTab;

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

@@ -1,10 +1,10 @@
 export function getChartDisplayLabels(containerWidth, minItemWidth, statistics) {
-  var labels = [];
-  var labelCount = Math.floor(containerWidth / minItemWidth);
+  let labels = [];
+  let labelCount = Math.floor(containerWidth / minItemWidth);
   labelCount = labelCount % 2 ? labelCount + 1 : labelCount;
-  var avg = Math.round(statistics.length / labelCount);
+  let avg = Math.round(statistics.length / labelCount);
   avg = avg > 2 ? avg : 2;
-  Array.isArray(statistics) && statistics.forEach(function (v, i) {
+  Array.isArray(statistics) && statistics.forEach((v, i) => {
     if (i % avg === 0) {
       labels.push(v.name);
     }
@@ -12,11 +12,9 @@ export function getChartDisplayLabels(containerWidth, minItemWidth, statistics)
   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;
-    })) {
+  let chartGroups = [];
+  Array.isArray(statistics) && statistics.forEach(item => {
+    if (!chartGroups.find(g => g.name === item.name)) {
       chartGroups.push(item);
     }
   });

package/es/utils/cell-format.js

@@ -1,27 +1,27 @@
-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;
+const getClientFormulaDisplayString = function (value, columnData) {
+  let {
+    tables = [],
+    collaborators = []
+  } = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
   if (!columnData || !value && value !== 0) return '';
-  var result_type = columnData.result_type,
-    array_type = columnData.array_type;
+  const {
+    result_type,
+    array_type
+  } = columnData;
   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];
+      const collaboratorList = Array.isArray(value) ? value : [value];
       return getCollaboratorsName(collaborators, collaboratorList);
     }
   }
   return getFormulaDisplayString(value, columnData, {
-    tables: tables,
-    collaborators: collaborators
+    tables,
+    collaborators
   });
 };
 
@@ -33,67 +33,64 @@ var getClientFormulaDisplayString = function getClientFormulaDisplayString(value
  *  }
  * ]
  */
-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;
+const getClientLinkDisplayString = function (links, columnData) {
+  let {
+    tables = [],
+    collaborators = []
+  } = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
   if (!columnData || !Array.isArray(links) || links.length === 0) {
     return null;
   }
-  var formulaData = _objectSpread({}, columnData);
+  let formulaData = {
+    ...columnData
+  };
   if (!columnData.hasOwnProperty('result_type')) {
     formulaData.result_type = FORMULA_RESULT_TYPE.ARRAY;
   }
-  var displayValue = links.map(function (link) {
-    return link.display_value;
-  });
+  const displayValue = links.map(link => link.display_value);
   return getClientFormulaDisplayString(displayValue, formulaData, {
-    tables: tables,
-    collaborators: collaborators
+    tables,
+    collaborators
   });
 };
-var getAutoTimeDisplayString = function getAutoTimeDisplayString(row, key) {
-  var value = row[key];
+const getAutoTimeDisplayString = (row, key) => {
+  let value = row[key];
   if (value === '' || !value || typeof value !== 'string') {
     return null;
   }
-  var date = dayjs(value);
+  const 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];
+const getFileDisplayString = (row, key) => {
+  let value = row[key];
   if (!value || !Array.isArray(value) || value.length === 0) {
     return null;
   }
-  var fileNameList = [];
-  value.forEach(function (v) {
+  let fileNameList = [];
+  value.forEach(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;
+const getClientCellValueDisplayString = function (row, type, key) {
+  let {
+    formulaRows = {},
+    data,
+    collaborators = [],
+    tables = []
+  } = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
   if (FORMULA_COLUMN_TYPES.includes(type)) {
-    var formulaRow = formulaRows[row._id] || {};
+    const formulaRow = formulaRows[row._id] || {};
     return getClientFormulaDisplayString(formulaRow[key], data, {
-      tables: tables,
-      collaborators: collaborators
+      tables,
+      collaborators
     });
   } else if (type === CellType.LINK) {
-    var _formulaRow = formulaRows[row._id] || {};
-    return getClientLinkDisplayString(_formulaRow[key], data, {
-      tables: tables,
-      collaborators: collaborators
+    const formulaRow = formulaRows[row._id] || {};
+    return getClientLinkDisplayString(formulaRow[key], data, {
+      tables,
+      collaborators
     });
   } else if (type === CellType.CTIME || type === CellType.MTIME) {
     return getAutoTimeDisplayString(row, key);
@@ -101,10 +98,10 @@ var getClientCellValueDisplayString = function getClientCellValueDisplayString(r
     return getFileDisplayString(row, key);
   }
   return getCellValueDisplayString(row, type, key, {
-    formulaRows: formulaRows,
-    data: data,
-    collaborators: collaborators,
-    tables: tables
+    formulaRows,
+    data,
+    collaborators,
+    tables
   });
 };
 export { getClientCellValueDisplayString, getClientFormulaDisplayString };

package/es/utils/cell-value.js

@@ -1,6 +1,6 @@
 import { CellType } from 'dtable-store';
 import { isEmptyObject, isSameObject } from './object';
-export var isCellValueChanged = function isCellValueChanged(oldVal, newVal, columnType) {
+export const isCellValueChanged = (oldVal, newVal, columnType) => {
   if (oldVal === newVal) {
     return false;
   }

package/es/utils/collaborator.js

@@ -1,22 +1,21 @@
-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}$/;
+export const isValidCollaboratorEmail = email => {
+  const 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");
+export const getKnownCreatorByEmail = (collaborators, email) => {
+  let {
+    mediaUrl
+  } = window.dtable || {};
+  let 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;
-  });
+  let creator = collaborators.find(collaborator => collaborator.email === email);
   if (creator) return creator;
-  var dtableCollaborators = window.app && window.app.collaboratorsCache ? window.app.collaboratorsCache : {};
+  let dtableCollaborators = window.app && window.app.collaboratorsCache ? window.app.collaboratorsCache : {};
   if (!isValidCollaboratorEmail(email)) {
     creator = {
       name: email,
@@ -29,12 +28,14 @@ export var getKnownCreatorByEmail = function getKnownCreatorByEmail(collaborator
   if (creator) return creator;
   return null;
 };
-export var generateDefaultUser = function generateDefaultUser(name) {
+export const generateDefaultUser = name => {
   if (!window || window.dtable) return {};
-  var mediaUrl = window.dtable.mediaUrl;
-  var defaultAvatarUrl = "".concat(mediaUrl, "avatars/default.png");
+  let {
+    mediaUrl
+  } = window.dtable;
+  let defaultAvatarUrl = "".concat(mediaUrl, "avatars/default.png");
   return {
-    name: name,
+    name,
     avatar_url: defaultAvatarUrl
   };
 };

package/es/utils/color-utils.js

@@ -1,16 +1,15 @@
-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) {
+export const 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;
+  const columns = [];
+  const keyExistColumnMap = {};
+  colorRules.forEach(colorRule => {
+    colorRule.filters.forEach(filter => {
+      const filterType = filter.filter_type;
       if (keyExistColumnMap[filterType]) {
         return;
       }
@@ -21,41 +20,49 @@ export var getValidColorRules = function getValidColorRules(colorRules) {
       keyExistColumnMap[filterType] = true;
     });
   });
-  return colorRules.map(function (colorRule) {
-    var filters = colorRule.filters;
-    var convertedFilters = filters.map(function (filter) {
-      return _objectSpread(_objectSpread({}, filter), {}, {
+  return colorRules.map(colorRule => {
+    const {
+      filters
+    } = colorRule;
+    const convertedFilters = filters.map(filter => {
+      return {
+        ...filter,
         column_key: filter.filter_type
-      });
+      };
     });
-    var validFilters = getValidFilters(convertedFilters, columns);
+    const validFilters = getValidFilters(convertedFilters, columns);
     if (validFilters.length === 0) {
       return null;
     }
-    return _objectSpread(_objectSpread({}, colorRule), {}, {
+    return {
+      ...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), {}, {
+export const getConvertedColorRules = colorRules => {
+  const validColorRules = getValidColorRules(colorRules);
+  return validColorRules.map(colorRule => {
+    const convertedFilters = colorRule.filters.map(filter => {
+      const {
+        filter_type
+      } = filter;
+      return {
+        ...filter,
         column_key: filter_type,
         column: {
           key: filter_type,
           type: FILTER_TYPE_2_CELL_TYPE[filter_type]
         }
-      });
+      };
     });
-    return _objectSpread(_objectSpread({}, colorRule), {}, {
+    return {
+      ...colorRule,
       filters: convertedFilters
-    });
+    };
   });
 };
-export var getLabelColorFromSpecificColor = function getLabelColorFromSpecificColor(chart) {
+export const getLabelColorFromSpecificColor = chart => {
   switch (chart.type) {
     case STAT_TYPE.BAR:
       {
@@ -71,19 +78,21 @@ export var getLabelColorFromSpecificColor = function getLabelColorFromSpecificCo
       }
   }
 };
-export var getLabelColorFromColorRules = function getLabelColorFromColorRules(colorRules, value) {
+export const getLabelColorFromColorRules = (colorRules, value) => {
   if (!colorRules) {
     return null;
   }
-  var row = {
+  const 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;
+  let matchedRuleColor = null;
+  for (let i = 0, colorRulesLen = colorRules.length; i < colorRulesLen; i++) {
+    const colorRule = colorRules[i];
+    const {
+      color,
+      filter_conjunction,
+      filters
+    } = colorRule;
     if (filterRow(row, filter_conjunction, filters)) {
       matchedRuleColor = color;
       break;
@@ -91,10 +100,12 @@ export var getLabelColorFromColorRules = function getLabelColorFromColorRules(co
   }
   return matchedRuleColor;
 };
-export var getLabelColor = function getLabelColor(_ref) {
-  var chart = _ref.chart,
-    colorRules = _ref.colorRules,
-    value = _ref.value;
+export const getLabelColor = _ref => {
+  let {
+    chart,
+    colorRules,
+    value
+  } = _ref;
   switch (chart.color_option) {
     case TYPE_COLOR_USING.USE_SPECIFIC_COLORS:
       {