dtable-statistic 4.2.1 → 4.3.0

package/es/stat-editor/stat-settings/basic-chart-settings/pivot-table-settings.js

@@ -1,9 +1,3 @@
-import _toArray from "@babel/runtime/helpers/esm/toArray";
-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, { Component, Fragment } from 'react';
 import intl from 'react-intl-universal';
 import { isNumericColumn, TableUtils } from 'dtable-store';
@@ -14,12 +8,12 @@ import NumericSummaryItem from '../public-setting/numeric-summary-item';
 import SummaryMethodSettings from './summary-method-setting';
 import IndToggleSetting from '../public-setting/ind-toggle-setting';
 import { GROUPBY_TYPE, STATISTICS_COUNT_SHOW, SUMMARY_METHOD, SUMMARY_METHOD_MAP, SUMMARY_TYPE, TIME_COLUMN_LIST } from '../../../constants';
-var GROUP_TYPES = {
+const GROUP_TYPES = {
   COUNT: 'count',
   SINGLE_NUMERIC_COLUMN: 'single_numeric_column',
   MULTIPLE_NUMERIC_COLUMN: 'multiple_numeric_column'
 };
-var GROUP_EXPLANATIONS = {
+const GROUP_EXPLANATIONS = {
   COUNT: {
     name: STATISTICS_COUNT_SHOW['count'],
     content: 'Count_the_number_of_records_in_each_group'
@@ -33,15 +27,11 @@ var GROUP_EXPLANATIONS = {
     content: 'Compute_the_sum_maximum_or_minimum_value_of_records_in_each_group_by_multiple_fields'
   }
 };
-var PivotSettings = /*#__PURE__*/function (_Component) {
-  _inherits(PivotSettings, _Component);
-  var _super = _createSuper(PivotSettings);
-  function PivotSettings(props) {
-    var _this;
-    _classCallCheck(this, PivotSettings);
-    _this = _super.call(this, props);
-    _this.getSummaryMethodsOptions = function () {
-      return SUMMARY_METHOD.map(function (m) {
+class PivotSettings extends Component {
+  constructor(props) {
+    super(props);
+    this.getSummaryMethodsOptions = () => {
+      return SUMMARY_METHOD.map(m => {
         return {
           value: m,
           label: /*#__PURE__*/React.createElement("span", {
@@ -50,8 +40,8 @@ var PivotSettings = /*#__PURE__*/function (_Component) {
         };
       });
     };
-    _this.getGroupTypeOptions = function () {
-      return Object.keys(GROUP_TYPES).map(function (key) {
+    this.getGroupTypeOptions = () => {
+      return Object.keys(GROUP_TYPES).map(key => {
         return {
           value: GROUP_TYPES[key],
           label: /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
@@ -62,8 +52,8 @@ var PivotSettings = /*#__PURE__*/function (_Component) {
         };
       });
     };
-    _this.onSelectGroupbyColumn = function (type, groupbyColumnKey, groupbyDateGranularity, groupbyGeolocationGranularity) {
-      var updated;
+    this.onSelectGroupbyColumn = (type, groupbyColumnKey, groupbyDateGranularity, groupbyGeolocationGranularity) => {
+      let updated;
       if (type === GROUPBY_TYPE.ROW) {
         updated = {
           groupby_column_key: groupbyColumnKey,
@@ -77,12 +67,12 @@ var PivotSettings = /*#__PURE__*/function (_Component) {
           column_groupby_geolocation_granularity: groupbyGeolocationGranularity
         };
       }
-      var newStatItem = Object.assign({}, _this.props.statItem, updated);
-      _this.groupTypeOptions = _this.getGroupTypeOptions(newStatItem);
-      _this.props.updateStatItem(newStatItem);
+      const newStatItem = Object.assign({}, this.props.statItem, updated);
+      this.groupTypeOptions = this.getGroupTypeOptions(newStatItem);
+      this.props.updateStatItem(newStatItem);
     };
-    _this.onSelectGroupbyDateGranularity = function (type, dateGranularity) {
-      var updated;
+    this.onSelectGroupbyDateGranularity = (type, dateGranularity) => {
+      let updated;
       if (type === GROUPBY_TYPE.ROW) {
         updated = {
           groupby_date_granularity: dateGranularity
@@ -92,10 +82,10 @@ var PivotSettings = /*#__PURE__*/function (_Component) {
           column_groupby_date_granularity: dateGranularity
         };
       }
-      _this.props.updateStatItem(Object.assign({}, _this.props.statItem, updated));
+      this.props.updateStatItem(Object.assign({}, this.props.statItem, updated));
     };
-    _this.onSelectGroupbyGeolocationGranularity = function (type, geolocationGranularity) {
-      var updated;
+    this.onSelectGroupbyGeolocationGranularity = (type, geolocationGranularity) => {
+      let updated;
       if (type === GROUPBY_TYPE.ROW) {
         updated = {
           groupby_geolocation_granularity: geolocationGranularity
@@ -105,41 +95,45 @@ var PivotSettings = /*#__PURE__*/function (_Component) {
           column_groupby_geolocation_granularity: geolocationGranularity
         };
       }
-      _this.props.updateStatItem(Object.assign({}, _this.props.statItem, updated));
+      this.props.updateStatItem(Object.assign({}, this.props.statItem, updated));
     };
-    _this.updatedSummaryType = function (summaryType, summaryColumnKey, summaryMethod) {
-      var statItem = _this.props.statItem;
-      var updated = {
+    this.updatedSummaryType = (summaryType, summaryColumnKey, summaryMethod) => {
+      let {
+        statItem
+      } = this.props;
+      let updated = {
         summary_type: summaryType,
         summary_column_key: summaryColumnKey,
         summary_method: summaryMethod
       };
-      _this.props.updateStatItem(Object.assign({}, statItem, updated));
+      this.props.updateStatItem(Object.assign({}, statItem, updated));
     };
-    _this.updateSummaryColumn = function (summaryColumnKey) {
-      _this.props.updateStatItem(Object.assign({}, _this.props.statItem, {
+    this.updateSummaryColumn = summaryColumnKey => {
+      this.props.updateStatItem(Object.assign({}, this.props.statItem, {
         summary_column_key: summaryColumnKey
       }));
     };
-    _this.updateSummaryMethod = function (summaryMethod) {
-      _this.props.updateStatItem(Object.assign({}, _this.props.statItem, {
+    this.updateSummaryMethod = summaryMethod => {
+      this.props.updateStatItem(Object.assign({}, this.props.statItem, {
         summary_method: summaryMethod
       }));
     };
-    _this.onChangeGroupType = function (option) {
-      var value = option.value;
-      var _this$props = _this.props,
-        statItem = _this$props.statItem,
-        pivotTableSummaryColumnOptions = _this$props.pivotTableSummaryColumnOptions;
-      var _ref = _this.props.statItem || {},
-        column_groupby_column_key = _ref.column_groupby_column_key,
-        column_groupby_date_granularity = _ref.column_groupby_date_granularity,
-        column_groupby_geolocation_granularity = _ref.column_groupby_geolocation_granularity,
-        column_groupby_multiple_numeric_column = _ref.column_groupby_multiple_numeric_column,
-        summary_columns_option = _ref.summary_columns_option,
-        summary_type = _ref.summary_type,
-        summary_method = _ref.summary_method,
-        summary_column_key = _ref.summary_column_key;
+    this.onChangeGroupType = option => {
+      const value = option.value;
+      const {
+        statItem,
+        pivotTableSummaryColumnOptions
+      } = this.props;
+      let {
+        column_groupby_column_key,
+        column_groupby_date_granularity,
+        column_groupby_geolocation_granularity,
+        column_groupby_multiple_numeric_column,
+        summary_columns_option,
+        summary_type,
+        summary_method,
+        summary_column_key
+      } = this.props.statItem || {};
       if (value === GROUP_TYPES.SINGLE_NUMERIC_COLUMN) {
         summary_type = SUMMARY_TYPE.ADVANCED;
         column_groupby_multiple_numeric_column = false;
@@ -157,191 +151,205 @@ var PivotSettings = /*#__PURE__*/function (_Component) {
         column_groupby_multiple_numeric_column = true;
         if (column_groupby_column_key) {
           summary_columns_option = [{
-            key: _this.getNumericalColumnOptions()[0].value.key,
+            key: this.getNumericalColumnOptions()[0].value.key,
             method: SUMMARY_METHOD[0],
-            type: _this.getNumericalColumnOptions()[0].value.type
+            type: this.getNumericalColumnOptions()[0].value.type
           }];
         } else {
-          var pivotTableSummaryColumnOption = pivotTableSummaryColumnOptions[0];
+          const pivotTableSummaryColumnOption = pivotTableSummaryColumnOptions[0];
           summary_columns_option = [];
           summary_column_key = pivotTableSummaryColumnOption && pivotTableSummaryColumnOption.value.key;
           summary_method = SUMMARY_METHOD[1];
         }
       }
-      var updated = {
-        column_groupby_column_key: column_groupby_column_key,
-        column_groupby_date_granularity: column_groupby_date_granularity,
-        column_groupby_geolocation_granularity: column_groupby_geolocation_granularity,
-        column_groupby_multiple_numeric_column: column_groupby_multiple_numeric_column,
-        summary_columns_option: summary_columns_option,
-        summary_type: summary_type,
-        summary_method: summary_method,
-        summary_column_key: summary_column_key
+      let updated = {
+        column_groupby_column_key,
+        column_groupby_date_granularity,
+        column_groupby_geolocation_granularity,
+        column_groupby_multiple_numeric_column,
+        summary_columns_option,
+        summary_type,
+        summary_method,
+        summary_column_key
       };
-      _this.setState({
+      this.setState({
         columnGroupbyType: value
-      }, function () {
-        _this.props.updateStatItem(Object.assign({}, statItem, updated));
+      }, () => {
+        this.props.updateStatItem(Object.assign({}, statItem, updated));
       });
     };
-    _this.getSelectedGroupType = function () {
-      var statItem = _this.props.statItem;
-      var column_groupby_multiple_numeric_column = statItem.column_groupby_multiple_numeric_column,
-        summary_type = statItem.summary_type,
-        column_groupby_column_key = statItem.column_groupby_column_key;
+    this.getSelectedGroupType = () => {
+      const {
+        statItem
+      } = this.props;
+      const {
+        column_groupby_multiple_numeric_column,
+        summary_type,
+        column_groupby_column_key
+      } = statItem;
       if (summary_type === SUMMARY_TYPE.ADVANCED && column_groupby_column_key && !column_groupby_multiple_numeric_column) {
-        return _this.groupTypeOptions[1];
+        return this.groupTypeOptions[1];
       }
       if (column_groupby_multiple_numeric_column) {
-        return _this.groupTypeOptions.find(function (item) {
-          return item.value === GROUP_TYPES.MULTIPLE_NUMERIC_COLUMN;
-        });
+        return this.groupTypeOptions.find(item => item.value === GROUP_TYPES.MULTIPLE_NUMERIC_COLUMN);
       }
       if (summary_type === SUMMARY_TYPE.COUNT) {
-        return _this.groupTypeOptions[0];
+        return this.groupTypeOptions[0];
       }
       if (summary_type === SUMMARY_TYPE.ADVANCED) {
-        return _this.groupTypeOptions[1];
+        return this.groupTypeOptions[1];
       }
     };
-    _this.getNumericalColumnOptions = function () {
-      var _ref2 = _this.props || {},
-        getTableById = _ref2.getTableById,
-        pivotTableSummaryColumnOptions = _ref2.pivotTableSummaryColumnOptions,
-        statItem = _ref2.statItem;
-      var _ref3 = statItem || {},
-        table_id = _ref3.table_id;
-      var table = getTableById(table_id);
+    this.getNumericalColumnOptions = () => {
+      const {
+        getTableById,
+        pivotTableSummaryColumnOptions,
+        statItem
+      } = this.props || {};
+      const {
+        table_id
+      } = statItem || {};
+      const table = getTableById(table_id);
       if (!table) return [];
-      var newPivotTableSummaryColumnOptions = [];
-      pivotTableSummaryColumnOptions.forEach(function (item) {
-        var column = TableUtils.getTableColumnByKey(table, item.value.key) || {};
+      const newPivotTableSummaryColumnOptions = [];
+      pivotTableSummaryColumnOptions.forEach(item => {
+        const column = TableUtils.getTableColumnByKey(table, item.value.key) || {};
         if (isNumericColumn(column)) {
           newPivotTableSummaryColumnOptions.push(item);
         }
       });
       return newPivotTableSummaryColumnOptions;
     };
-    _this.canAddSummaryColumn = function () {
-      var _this$props2 = _this.props,
-        pivotTableSummaryColumnOptions = _this$props2.pivotTableSummaryColumnOptions,
-        column_groupby_column_key = _this$props2.statItem.column_groupby_column_key;
+    this.canAddSummaryColumn = () => {
+      const {
+        pivotTableSummaryColumnOptions,
+        statItem: {
+          column_groupby_column_key
+        }
+      } = this.props;
       if (column_groupby_column_key) {
-        var numericalColumnOptions = _this.getNumericalColumnOptions();
+        const numericalColumnOptions = this.getNumericalColumnOptions();
         return Array.isArray(numericalColumnOptions) && numericalColumnOptions.length > 0;
       } else {
         return Array.isArray(pivotTableSummaryColumnOptions) && pivotTableSummaryColumnOptions.length > 0;
       }
     };
-    _this.onChangeGroupbyNumericColumn = function (index, columnOption) {
+    this.onChangeGroupbyNumericColumn = (index, columnOption) => {
       if (index === 0) {
-        var updated = {
+        const updated = {
           summary_column_key: columnOption.value.key
         };
         if (TIME_COLUMN_LIST.includes(columnOption.value.type)) {
-          var statItem = _this.props.statItem;
-          var _ref4 = statItem || {},
-            summary_method = _ref4.summary_method;
+          const {
+            statItem
+          } = this.props;
+          const {
+            summary_method
+          } = statItem || {};
           if (summary_method == SUMMARY_METHOD_MAP.Sum || summary_method === SUMMARY_METHOD_MAP.Mean) {
             updated.summary_method = SUMMARY_METHOD_MAP.Min;
           }
         }
-        _this.props.updateStatItem(Object.assign({}, _this.props.statItem, updated));
+        this.props.updateStatItem(Object.assign({}, this.props.statItem, updated));
       } else {
-        var _ref5 = _this.props.statItem || {},
-          summary_columns_option = _ref5.summary_columns_option;
+        let {
+          summary_columns_option
+        } = this.props.statItem || {};
         summary_columns_option = summary_columns_option || [];
-        summary_columns_option = _toConsumableArray(summary_columns_option);
-        var selectedItem = summary_columns_option[index - 1];
-        var _updated = {
+        summary_columns_option = [...summary_columns_option];
+        let selectedItem = summary_columns_option[index - 1];
+        const updated = {
           key: columnOption.value.key
         };
         if (TIME_COLUMN_LIST.includes(columnOption.value.type)) {
           if (selectedItem.method === SUMMARY_METHOD_MAP.Sum || selectedItem.method === SUMMARY_METHOD_MAP.Mean) {
-            _updated.method = SUMMARY_METHOD_MAP.Min;
+            updated.method = SUMMARY_METHOD_MAP.Min;
           }
         }
-        selectedItem = Object.assign({}, selectedItem, _updated);
+        selectedItem = Object.assign({}, selectedItem, updated);
         summary_columns_option[index - 1] = selectedItem;
-        _this.props.updateStatItem(Object.assign({}, _this.props.statItem, {
-          summary_columns_option: summary_columns_option
+        this.props.updateStatItem(Object.assign({}, this.props.statItem, {
+          summary_columns_option
         }));
       }
     };
-    _this.onChangeGroupbyMultiNumericColumn = function (index, columnOption) {
-      var _ref6 = _this.props.statItem || {},
-        column_groupby_multiple_numeric_column = _ref6.column_groupby_multiple_numeric_column,
-        column_groupby_column_key = _ref6.column_groupby_column_key,
-        summary_columns_option = _ref6.summary_columns_option;
+    this.onChangeGroupbyMultiNumericColumn = (index, columnOption) => {
+      let {
+        column_groupby_multiple_numeric_column,
+        column_groupby_column_key,
+        summary_columns_option
+      } = this.props.statItem || {};
       if (column_groupby_multiple_numeric_column && column_groupby_column_key) {
-        var summaryColumnOption = summary_columns_option[index];
-        var update = {
+        const summaryColumnOption = summary_columns_option[index];
+        const update = {
           key: columnOption.value.key,
           method: summaryColumnOption && summaryColumnOption.method || SUMMARY_METHOD_MAP.Sum
         };
         summary_columns_option = summary_columns_option || [];
-        summary_columns_option = _toConsumableArray(summary_columns_option);
+        summary_columns_option = [...summary_columns_option];
         summary_columns_option[index] = update;
-        _this.props.updateStatItem(Object.assign({}, _this.props.statItem, {
-          summary_columns_option: summary_columns_option
+        this.props.updateStatItem(Object.assign({}, this.props.statItem, {
+          summary_columns_option
         }));
         return;
       }
     };
-    _this.onDeleteNumericColumnItem = function (index) {
-      var _ref7 = _this.props.statItem || {},
-        _ref7$summary_columns = _ref7.summary_columns_option,
-        summary_columns_option = _ref7$summary_columns === void 0 ? [] : _ref7$summary_columns,
-        column_groupby_column_key = _ref7.column_groupby_column_key;
-      var deleteIndex = column_groupby_column_key ? index : index - 1;
-      summary_columns_option = summary_columns_option.filter(function (_, index) {
-        return index !== deleteIndex;
-      });
-      _this.props.updateStatItem(Object.assign({}, _this.props.statItem, {
-        summary_columns_option: _toConsumableArray(summary_columns_option)
+    this.onDeleteNumericColumnItem = index => {
+      let {
+        summary_columns_option = [],
+        column_groupby_column_key
+      } = this.props.statItem || {};
+      const deleteIndex = column_groupby_column_key ? index : index - 1;
+      summary_columns_option = summary_columns_option.filter((_, index) => index !== deleteIndex);
+      this.props.updateStatItem(Object.assign({}, this.props.statItem, {
+        summary_columns_option: [...summary_columns_option]
       }));
     };
-    _this.onChangeSummaryMethod = function (index, option) {
+    this.onChangeSummaryMethod = (index, option) => {
       if (index === 0) {
-        _this.props.updateStatItem(Object.assign({}, _this.props.statItem, {
+        this.props.updateStatItem(Object.assign({}, this.props.statItem, {
           summary_method: option.value
         }));
       } else {
-        var _ref8 = _this.props.statItem || {},
-          summary_columns_option = _ref8.summary_columns_option;
+        let {
+          summary_columns_option
+        } = this.props.statItem || {};
         summary_columns_option = summary_columns_option || [];
-        summary_columns_option = _toConsumableArray(summary_columns_option);
-        var selectedItem = summary_columns_option[index - 1];
+        summary_columns_option = [...summary_columns_option];
+        let selectedItem = summary_columns_option[index - 1];
         selectedItem = Object.assign({}, selectedItem, {
           method: option.value
         });
         summary_columns_option[index - 1] = selectedItem;
-        _this.props.updateStatItem(Object.assign({}, _this.props.statItem, {
-          summary_columns_option: summary_columns_option
+        this.props.updateStatItem(Object.assign({}, this.props.statItem, {
+          summary_columns_option
         }));
       }
     };
-    _this.onChangeMultiSummaryMethod = function (index, option) {
-      var _ref9 = _this.props.statItem || {},
-        summary_columns_option = _ref9.summary_columns_option;
-      summary_columns_option = Array.isArray(summary_columns_option) ? _toConsumableArray(summary_columns_option) : [];
+    this.onChangeMultiSummaryMethod = (index, option) => {
+      let {
+        summary_columns_option
+      } = this.props.statItem || {};
+      summary_columns_option = Array.isArray(summary_columns_option) ? [...summary_columns_option] : [];
       summary_columns_option[index] = Object.assign({}, summary_columns_option[index], {
         method: option.value
       });
-      _this.props.updateStatItem(Object.assign({}, _this.props.statItem, {
-        summary_columns_option: summary_columns_option
+      this.props.updateStatItem(Object.assign({}, this.props.statItem, {
+        summary_columns_option
       }));
     };
-    _this.onAddNumericColumn = function () {
-      var _this$props3 = _this.props,
-        statItem = _this$props3.statItem,
-        pivotTableSummaryColumnOptions = _this$props3.pivotTableSummaryColumnOptions;
-      var _ref10 = statItem || {},
-        summary_columns_option = _ref10.summary_columns_option,
-        column_groupby_column_key = _ref10.column_groupby_column_key;
-      var newNumericColumnKey = column_groupby_column_key ? _this.getNumericalColumnOptions()[0].value.key : pivotTableSummaryColumnOptions[0].value.key;
+    this.onAddNumericColumn = () => {
+      let {
+        statItem,
+        pivotTableSummaryColumnOptions
+      } = this.props;
+      let {
+        summary_columns_option,
+        column_groupby_column_key
+      } = statItem || {};
+      let newNumericColumnKey = column_groupby_column_key ? this.getNumericalColumnOptions()[0].value.key : pivotTableSummaryColumnOptions[0].value.key;
       if (Array.isArray(summary_columns_option)) {
-        summary_columns_option = _toConsumableArray(summary_columns_option);
+        summary_columns_option = [...summary_columns_option];
         summary_columns_option.push({
           key: newNumericColumnKey,
           method: SUMMARY_METHOD[0]
@@ -352,195 +360,197 @@ var PivotSettings = /*#__PURE__*/function (_Component) {
           method: SUMMARY_METHOD[0]
         }];
       }
-      _this.props.updateStatItem(Object.assign({}, _this.props.statItem, {
-        summary_columns_option: _toConsumableArray(summary_columns_option)
+      this.props.updateStatItem(Object.assign({}, this.props.statItem, {
+        summary_columns_option: [...summary_columns_option]
       }));
     };
-    _this.onToggleDisplayData = function () {
-      var statItem = _this.props.statItem;
-      var _ref11 = statItem || {},
-        display_total = _ref11.display_total;
-      var updated = {
+    this.onToggleDisplayData = () => {
+      const {
+        statItem
+      } = this.props;
+      const {
+        display_total
+      } = statItem || {};
+      const updated = {
         display_total: !display_total
       };
-      _this.props.updateStatItem(Object.assign({}, statItem, updated));
+      this.props.updateStatItem(Object.assign({}, statItem, updated));
     };
-    _this.renderGroupbyNumericColumns = function () {
-      var statItem = _this.props.statItem;
-      var summary_columns_option = statItem.summary_columns_option,
-        column_groupby_column_key = statItem.column_groupby_column_key;
+    this.renderGroupbyNumericColumns = () => {
+      const {
+        statItem
+      } = this.props;
+      const {
+        summary_columns_option,
+        column_groupby_column_key
+      } = statItem;
       if (!Array.isArray(summary_columns_option)) return null;
       if (column_groupby_column_key) {
-        var _summary_columns_opti = _toArray(summary_columns_option),
-          restSummaryColumnsOption = _summary_columns_opti.slice(1);
-        return restSummaryColumnsOption.map(function (item, index) {
+        const [, ...restSummaryColumnsOption] = summary_columns_option;
+        return restSummaryColumnsOption.map((item, index) => {
           return /*#__PURE__*/React.createElement(NumericSummaryItem, {
             key: "number-column-".concat(index),
             statItem: statItem,
             index: index + 1,
             numericColumnItem: item,
-            numericColumnsOptions: _this.getNumericalColumnOptions(),
-            summaryMethodOptions: _this.summaryMethodsOptions,
-            onChangeColumnOption: _this.onChangeGroupbyMultiNumericColumn,
-            onChangeSummaryMethod: _this.onChangeMultiSummaryMethod,
-            onDeleteNumericColumnItem: _this.onDeleteNumericColumnItem
+            numericColumnsOptions: this.getNumericalColumnOptions(),
+            summaryMethodOptions: this.summaryMethodsOptions,
+            onChangeColumnOption: this.onChangeGroupbyMultiNumericColumn,
+            onChangeSummaryMethod: this.onChangeMultiSummaryMethod,
+            onDeleteNumericColumnItem: this.onDeleteNumericColumnItem
           });
         });
       }
-      return summary_columns_option.map(function (item, index) {
+      return summary_columns_option.map((item, index) => {
         return /*#__PURE__*/React.createElement(NumericSummaryItem, {
           key: "number-column-".concat(index),
           statItem: statItem,
-          numericColumnsOptions: _this.props.pivotTableSummaryColumnOptions,
-          summaryMethodOptions: _this.summaryMethodsOptions,
+          numericColumnsOptions: this.props.pivotTableSummaryColumnOptions,
+          summaryMethodOptions: this.summaryMethodsOptions,
           index: index + 1,
           numericColumnItem: item,
-          onChangeColumnOption: _this.onChangeGroupbyNumericColumn,
-          onChangeSummaryMethod: _this.onChangeSummaryMethod,
-          onDeleteNumericColumnItem: _this.onDeleteNumericColumnItem
+          onChangeColumnOption: this.onChangeGroupbyNumericColumn,
+          onChangeSummaryMethod: this.onChangeSummaryMethod,
+          onDeleteNumericColumnItem: this.onDeleteNumericColumnItem
         });
       });
     };
-    _this.groupTypeOptions = _this.getGroupTypeOptions(props.statItem);
-    _this.summaryMethodsOptions = _this.getSummaryMethodsOptions();
-    return _this;
+    this.groupTypeOptions = this.getGroupTypeOptions(props.statItem);
+    this.summaryMethodsOptions = this.getSummaryMethodsOptions();
   }
-  _createClass(PivotSettings, [{
-    key: "render",
-    value: function render() {
-      var _this$props4 = this.props,
-        settingType = _this$props4.settingType,
-        statItem = _this$props4.statItem,
-        selectedTable = _this$props4.selectedTable,
-        generalColumnsOptions = _this$props4.generalColumnsOptions,
-        pivotTableSummaryColumnOptions = _this$props4.pivotTableSummaryColumnOptions,
-        dateGranularityOptions = _this$props4.dateGranularityOptions,
-        geolocationGranularityOptions = _this$props4.geolocationGranularityOptions,
-        renderIncludeEmpty = _this$props4.renderIncludeEmpty;
-      var _ref12 = statItem || {},
-        selectedTableId = _ref12.table_id,
-        selectedViewId = _ref12.view_id,
-        groupby_column_key = _ref12.groupby_column_key,
-        groupby_date_granularity = _ref12.groupby_date_granularity,
-        groupby_geolocation_granularity = _ref12.groupby_geolocation_granularity,
-        summary_type = _ref12.summary_type,
-        summary_column_key = _ref12.summary_column_key,
-        summary_method = _ref12.summary_method,
-        column_groupby_column_key = _ref12.column_groupby_column_key,
-        column_groupby_date_granularity = _ref12.column_groupby_date_granularity,
-        column_groupby_geolocation_granularity = _ref12.column_groupby_geolocation_granularity,
-        column_groupby_multiple_numeric_column = _ref12.column_groupby_multiple_numeric_column,
-        _ref12$display_total = _ref12.display_total,
-        display_total = _ref12$display_total === void 0 ? true : _ref12$display_total,
-        summary_columns_option = _ref12.summary_columns_option;
-      var selectedGroupItem = this.getSelectedGroupType();
-      if (settingType === 'style') {
-        return null;
-      }
-      return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(BaseSettings, {
-        statItem: statItem,
-        selectedTableId: selectedTableId,
-        selectedViewId: selectedViewId,
-        getTables: this.props.getTables,
-        getViews: this.props.getViews,
-        getTableById: this.props.getTableById,
-        getConvertedChart: this.props.getConvertedChart,
-        updateStatItem: this.props.updateStatItem
-      }), /*#__PURE__*/React.createElement("div", {
-        className: "statistic-chart-parameter-divider"
-      }), /*#__PURE__*/React.createElement(GroupbySettings, {
-        selectedTable: selectedTable,
-        columnsOptions: generalColumnsOptions,
-        dateGranularityOptions: dateGranularityOptions,
-        geolocationGranularityOptions: geolocationGranularityOptions,
-        label: intl.get('Row_grouping_field'),
-        placeholder: intl.get('Select_a_column'),
-        groupbyColumnKey: groupby_column_key,
-        groupbyDateGranularity: groupby_date_granularity,
-        groupbyGeolocationGranularity: groupby_geolocation_granularity,
-        getSelectedColumnOption: this.props.getSelectedColumnOption,
-        onSelectGroupbyColumn: this.onSelectGroupbyColumn.bind(this, GROUPBY_TYPE.ROW),
-        onSelectGroupbyDateGranularity: this.onSelectGroupbyDateGranularity.bind(this, GROUPBY_TYPE.ROW),
-        onSelectGroupbyGeolocationGranularity: this.onSelectGroupbyGeolocationGranularity.bind(this, GROUPBY_TYPE.ROW),
-        renderIncludeEmpty: renderIncludeEmpty
-      }), /*#__PURE__*/React.createElement(GroupbySettings, {
-        selectedTable: selectedTable,
-        columnsOptions: generalColumnsOptions,
-        dateGranularityOptions: dateGranularityOptions,
-        geolocationGranularityOptions: geolocationGranularityOptions,
-        label: intl.get('Column_grouping_field'),
-        placeholder: intl.get('Select_a_column'),
-        groupbyColumnKey: column_groupby_column_key,
-        groupbyDateGranularity: column_groupby_date_granularity,
-        groupbyGeolocationGranularity: column_groupby_geolocation_granularity,
-        getSelectedColumnOption: this.props.getSelectedColumnOption,
-        onSelectGroupbyColumn: this.onSelectGroupbyColumn.bind(this, GROUPBY_TYPE.COLUMN),
-        onSelectGroupbyDateGranularity: this.onSelectGroupbyDateGranularity.bind(this, GROUPBY_TYPE.COLUMN),
-        onSelectGroupbyGeolocationGranularity: this.onSelectGroupbyGeolocationGranularity.bind(this, GROUPBY_TYPE.COLUMN)
-      }), /*#__PURE__*/React.createElement("div", {
-        className: "statistic-chart-parameter-divider"
-      }), /*#__PURE__*/React.createElement("div", {
-        className: "statistic-chart-parameter-item"
-      }, /*#__PURE__*/React.createElement("label", null, intl.get('Summary_type')), /*#__PURE__*/React.createElement(DTableSelect, {
-        classNamePrefix: "statistic-chart-summary-types",
-        value: selectedGroupItem,
-        options: this.groupTypeOptions,
-        onChange: this.onChangeGroupType
-      })), summary_type === SUMMARY_TYPE.ADVANCED && (column_groupby_multiple_numeric_column ? /*#__PURE__*/React.createElement(React.Fragment, null, column_groupby_column_key && /*#__PURE__*/React.createElement(NumericSummaryItem, {
-        statItem: statItem,
-        key: "number-column-".concat(0),
-        index: 0,
-        numericColumnItem: {
-          column_key: summary_columns_option[0] && summary_columns_option[0].key,
-          summary_method: summary_columns_option[0] && summary_columns_option[0].method
-        },
-        numericColumnsOptions: this.getNumericalColumnOptions(),
-        summaryMethodOptions: this.summaryMethodsOptions,
-        onChangeColumnOption: this.onChangeGroupbyMultiNumericColumn,
-        onChangeSummaryMethod: this.onChangeMultiSummaryMethod
-      }), !column_groupby_column_key && /*#__PURE__*/React.createElement(NumericSummaryItem, {
-        statItem: statItem,
-        key: "number-column-".concat(0),
-        index: 0,
-        numericColumnItem: {
-          column_key: summary_column_key,
-          summary_method: summary_method
-        },
-        numericColumnsOptions: pivotTableSummaryColumnOptions,
-        summaryMethodOptions: this.summaryMethodsOptions,
-        onChangeColumnOption: this.onChangeGroupbyNumericColumn,
-        onChangeSummaryMethod: this.onChangeSummaryMethod
-      })) : /*#__PURE__*/React.createElement(SummaryMethodSettings, {
-        statItem: statItem,
-        numericColumnsOptions: pivotTableSummaryColumnOptions,
-        summaryType: summary_type,
-        summaryColumnKey: summary_column_key,
-        summaryMethod: summary_method,
-        getSelectedColumnOption: this.props.getSelectedColumnOption,
-        onChangeSummaryType: this.updatedSummaryType,
-        onSelectSummaryMethod: this.updateSummaryMethod,
-        onSelectNumericColumn: this.updateSummaryColumn,
-        updateStatItem: this.props.updateStatItem
-      })), column_groupby_multiple_numeric_column && /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
-        className: "statistics-add-number"
-      }, this.renderGroupbyNumericColumns()), this.canAddSummaryColumn() && /*#__PURE__*/React.createElement("div", {
-        className: "statistics-add-number-column",
-        onClick: this.onAddNumericColumn
-      }, /*#__PURE__*/React.createElement("span", {
-        className: "number-column-item dtable-font dtable-icon-add-table"
-      }), /*#__PURE__*/React.createElement("span", {
-        className: "number-column-item add-number-column-description"
-      }, intl.get('Add_new_summary_column')))), /*#__PURE__*/React.createElement("div", {
-        className: "statistic-chart-parameter-divider"
-      }), /*#__PURE__*/React.createElement("div", {
-        className: "statistic-chart-parameter-item"
-      }, /*#__PURE__*/React.createElement(IndToggleSetting, {
-        isChecked: display_total,
-        handleToggleChange: this.onToggleDisplayData,
-        label: intl.get('Display_total')
-      })));
+  render() {
+    let {
+      settingType,
+      statItem,
+      selectedTable,
+      generalColumnsOptions,
+      pivotTableSummaryColumnOptions,
+      dateGranularityOptions,
+      geolocationGranularityOptions,
+      renderIncludeEmpty
+    } = this.props;
+    let {
+      table_id: selectedTableId,
+      view_id: selectedViewId,
+      groupby_column_key,
+      groupby_date_granularity,
+      groupby_geolocation_granularity,
+      summary_type,
+      summary_column_key,
+      summary_method,
+      column_groupby_column_key,
+      column_groupby_date_granularity,
+      column_groupby_geolocation_granularity,
+      column_groupby_multiple_numeric_column,
+      display_total = true,
+      summary_columns_option
+    } = statItem || {};
+    const selectedGroupItem = this.getSelectedGroupType();
+    if (settingType === 'style') {
+      return null;
     }
-  }]);
-  return PivotSettings;
-}(Component);
+    return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(BaseSettings, {
+      statItem: statItem,
+      selectedTableId: selectedTableId,
+      selectedViewId: selectedViewId,
+      getTables: this.props.getTables,
+      getViews: this.props.getViews,
+      getTableById: this.props.getTableById,
+      getConvertedChart: this.props.getConvertedChart,
+      updateStatItem: this.props.updateStatItem
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "statistic-chart-parameter-divider"
+    }), /*#__PURE__*/React.createElement(GroupbySettings, {
+      selectedTable: selectedTable,
+      columnsOptions: generalColumnsOptions,
+      dateGranularityOptions: dateGranularityOptions,
+      geolocationGranularityOptions: geolocationGranularityOptions,
+      label: intl.get('Row_grouping_field'),
+      placeholder: intl.get('Select_a_column'),
+      groupbyColumnKey: groupby_column_key,
+      groupbyDateGranularity: groupby_date_granularity,
+      groupbyGeolocationGranularity: groupby_geolocation_granularity,
+      getSelectedColumnOption: this.props.getSelectedColumnOption,
+      onSelectGroupbyColumn: this.onSelectGroupbyColumn.bind(this, GROUPBY_TYPE.ROW),
+      onSelectGroupbyDateGranularity: this.onSelectGroupbyDateGranularity.bind(this, GROUPBY_TYPE.ROW),
+      onSelectGroupbyGeolocationGranularity: this.onSelectGroupbyGeolocationGranularity.bind(this, GROUPBY_TYPE.ROW),
+      renderIncludeEmpty: renderIncludeEmpty
+    }), /*#__PURE__*/React.createElement(GroupbySettings, {
+      selectedTable: selectedTable,
+      columnsOptions: generalColumnsOptions,
+      dateGranularityOptions: dateGranularityOptions,
+      geolocationGranularityOptions: geolocationGranularityOptions,
+      label: intl.get('Column_grouping_field'),
+      placeholder: intl.get('Select_a_column'),
+      groupbyColumnKey: column_groupby_column_key,
+      groupbyDateGranularity: column_groupby_date_granularity,
+      groupbyGeolocationGranularity: column_groupby_geolocation_granularity,
+      getSelectedColumnOption: this.props.getSelectedColumnOption,
+      onSelectGroupbyColumn: this.onSelectGroupbyColumn.bind(this, GROUPBY_TYPE.COLUMN),
+      onSelectGroupbyDateGranularity: this.onSelectGroupbyDateGranularity.bind(this, GROUPBY_TYPE.COLUMN),
+      onSelectGroupbyGeolocationGranularity: this.onSelectGroupbyGeolocationGranularity.bind(this, GROUPBY_TYPE.COLUMN)
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "statistic-chart-parameter-divider"
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "statistic-chart-parameter-item"
+    }, /*#__PURE__*/React.createElement("label", null, intl.get('Summary_type')), /*#__PURE__*/React.createElement(DTableSelect, {
+      classNamePrefix: "statistic-chart-summary-types",
+      value: selectedGroupItem,
+      options: this.groupTypeOptions,
+      onChange: this.onChangeGroupType
+    })), summary_type === SUMMARY_TYPE.ADVANCED && (column_groupby_multiple_numeric_column ? /*#__PURE__*/React.createElement(React.Fragment, null, column_groupby_column_key && /*#__PURE__*/React.createElement(NumericSummaryItem, {
+      statItem: statItem,
+      key: "number-column-".concat(0),
+      index: 0,
+      numericColumnItem: {
+        column_key: summary_columns_option[0] && summary_columns_option[0].key,
+        summary_method: summary_columns_option[0] && summary_columns_option[0].method
+      },
+      numericColumnsOptions: this.getNumericalColumnOptions(),
+      summaryMethodOptions: this.summaryMethodsOptions,
+      onChangeColumnOption: this.onChangeGroupbyMultiNumericColumn,
+      onChangeSummaryMethod: this.onChangeMultiSummaryMethod
+    }), !column_groupby_column_key && /*#__PURE__*/React.createElement(NumericSummaryItem, {
+      statItem: statItem,
+      key: "number-column-".concat(0),
+      index: 0,
+      numericColumnItem: {
+        column_key: summary_column_key,
+        summary_method: summary_method
+      },
+      numericColumnsOptions: pivotTableSummaryColumnOptions,
+      summaryMethodOptions: this.summaryMethodsOptions,
+      onChangeColumnOption: this.onChangeGroupbyNumericColumn,
+      onChangeSummaryMethod: this.onChangeSummaryMethod
+    })) : /*#__PURE__*/React.createElement(SummaryMethodSettings, {
+      statItem: statItem,
+      numericColumnsOptions: pivotTableSummaryColumnOptions,
+      summaryType: summary_type,
+      summaryColumnKey: summary_column_key,
+      summaryMethod: summary_method,
+      getSelectedColumnOption: this.props.getSelectedColumnOption,
+      onChangeSummaryType: this.updatedSummaryType,
+      onSelectSummaryMethod: this.updateSummaryMethod,
+      onSelectNumericColumn: this.updateSummaryColumn,
+      updateStatItem: this.props.updateStatItem
+    })), column_groupby_multiple_numeric_column && /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
+      className: "statistics-add-number"
+    }, this.renderGroupbyNumericColumns()), this.canAddSummaryColumn() && /*#__PURE__*/React.createElement("div", {
+      className: "statistics-add-number-column",
+      onClick: this.onAddNumericColumn
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "number-column-item dtable-font dtable-icon-add-table"
+    }), /*#__PURE__*/React.createElement("span", {
+      className: "number-column-item add-number-column-description"
+    }, intl.get('Add_new_summary_column')))), /*#__PURE__*/React.createElement("div", {
+      className: "statistic-chart-parameter-divider"
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "statistic-chart-parameter-item"
+    }, /*#__PURE__*/React.createElement(IndToggleSetting, {
+      isChecked: display_total,
+      handleToggleChange: this.onToggleDisplayData,
+      label: intl.get('Display_total')
+    })));
+  }
+}
 export default PivotSettings;