dtable-statistic 4.2.1 → 4.3.0

package/es/stat-editor/stat-settings/advance-chart-settings/summary-settings.js

@@ -1,44 +1,35 @@
-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 { DTableSelect } from '../../../components';
 import NumericSummaryItem from '../public-setting/numeric-summary-item';
 import { STATISTICS_COUNT_SHOW, STAT_TYPE, SUMMARY_METHOD, SUMMARY_TYPE } from '../../../constants';
-var GROUP_TYPES = {
+const GROUP_TYPES = {
   COUNT: 'count',
   SINGLE_NUMERIC_COLUMN: 'single_numeric_column',
   MULTIPLE_NUMERIC_COLUMN: 'multiple_numeric_column'
 };
-var SummarySettings = /*#__PURE__*/function (_Component) {
-  _inherits(SummarySettings, _Component);
-  var _super = _createSuper(SummarySettings);
-  function SummarySettings(props) {
-    var _this;
-    _classCallCheck(this, SummarySettings);
-    _this = _super.call(this, props);
-    _this.getSummaryTypeOptions = function () {
-      var summaryTypes = [{
+class SummarySettings extends Component {
+  constructor(props) {
+    super(props);
+    this.getSummaryTypeOptions = () => {
+      const summaryTypes = [{
         value: GROUP_TYPES.COUNT,
         label: /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
           className: 'select-module select-module-name'
         }, intl.get(STATISTICS_COUNT_SHOW['count'])), /*#__PURE__*/React.createElement("div", {
           className: "summary-type-explanation"
-        }, _this.summaryExplanation['count']))
+        }, this.summaryExplanation['count']))
       }, {
         value: GROUP_TYPES.SINGLE_NUMERIC_COLUMN,
         label: /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
           className: 'select-module select-module-name'
         }, intl.get(STATISTICS_COUNT_SHOW['advanced'])), /*#__PURE__*/React.createElement("div", {
           className: "summary-type-explanation"
-        }, _this.summaryExplanation['advanced']))
+        }, this.summaryExplanation['advanced']))
       }];
 
       // multiple_numeric_column
-      if (_this.props.useMultipleSummaryColumns) {
+      if (this.props.useMultipleSummaryColumns) {
         summaryTypes.push({
           value: GROUP_TYPES.MULTIPLE_NUMERIC_COLUMN,
           label: /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
@@ -50,10 +41,12 @@ var SummarySettings = /*#__PURE__*/function (_Component) {
       }
       return summaryTypes;
     };
-    _this.getSummaryExplanation = function () {
-      var statItem = _this.props.statItem;
-      var chartType = statItem.type;
-      var variable = '';
+    this.getSummaryExplanation = () => {
+      const {
+        statItem
+      } = this.props;
+      const chartType = statItem.type;
+      let variable = '';
       if (chartType === 'map') {
         variable = '位置字段';
       }
@@ -84,8 +77,8 @@ var SummarySettings = /*#__PURE__*/function (_Component) {
         })
       };
     };
-    _this.getSummaryMethodsOptions = function () {
-      return SUMMARY_METHOD.map(function (method) {
+    this.getSummaryMethodsOptions = () => {
+      return SUMMARY_METHOD.map(method => {
         return {
           label: /*#__PURE__*/React.createElement("span", {
             className: "select-option-name"
@@ -94,83 +87,88 @@ var SummarySettings = /*#__PURE__*/function (_Component) {
         };
       });
     };
-    _this.getSelectedMethodOption = function (method, summaryMethodsOptions) {
-      return summaryMethodsOptions.find(function (m) {
-        return m.value === method;
-      }) || summaryMethodsOptions[0];
+    this.getSelectedMethodOption = (method, summaryMethodsOptions) => {
+      return summaryMethodsOptions.find(m => m.value === method) || summaryMethodsOptions[0];
     };
-    _this.renderSummaryTypes = function () {
-      var label = _this.props.label;
-      var selectedSummaryType = _this.getSelectedSummaryType();
+    this.renderSummaryTypes = () => {
+      let {
+        label
+      } = this.props;
+      const selectedSummaryType = this.getSelectedSummaryType();
       return /*#__PURE__*/React.createElement("div", {
         className: "statistic-chart-parameter-item"
       }, /*#__PURE__*/React.createElement("label", null, label), /*#__PURE__*/React.createElement(DTableSelect, {
         classNamePrefix: 'statistic-chart-summary-types',
         value: selectedSummaryType,
-        onChange: _this.onChangeSummaryType,
-        options: _this.summaryTypeOptions
+        onChange: this.onChangeSummaryType,
+        options: this.summaryTypeOptions
       }));
     };
-    _this.getSelectedSummaryType = function () {
-      var _this$props = _this.props,
-        _this$props$summaryTy = _this$props.summaryType,
-        summaryType = _this$props$summaryTy === void 0 ? 'count' : _this$props$summaryTy,
-        statItem = _this$props.statItem,
-        useMultipleSummaryColumns = _this$props.useMultipleSummaryColumns;
+    this.getSelectedSummaryType = () => {
+      const {
+        summaryType = 'count',
+        statItem,
+        useMultipleSummaryColumns
+      } = this.props;
       if (summaryType === SUMMARY_TYPE.COUNT) {
-        return _this.summaryTypeOptions[0];
+        return this.summaryTypeOptions[0];
       }
       if (statItem.type === STAT_TYPE.COMBINATION_CHART && statItem.y_axis_left_group_by_multiple_numeric_column && useMultipleSummaryColumns) {
-        return _this.summaryTypeOptions[2];
+        return this.summaryTypeOptions[2];
       }
-      return _this.summaryTypeOptions[1];
+      return this.summaryTypeOptions[1];
     };
-    _this.onChangeSummaryType = function (option) {
-      var type = option.value;
-      var summaryType = _this.props.summaryType;
+    this.onChangeSummaryType = option => {
+      const type = option.value;
+      let {
+        summaryType
+      } = this.props;
       if (type === summaryType) return;
-      _this.props.onChangeSummaryType(type);
+      this.props.onChangeSummaryType(type);
     };
-    _this.onSelectSummaryColumn = function (option) {
-      _this.props.onSelectSummaryColumn(option.value.key);
+    this.onSelectSummaryColumn = option => {
+      this.props.onSelectSummaryColumn(option.value.key);
     };
-    _this.renderNumericColumn = function () {
-      var summaryColumn = _this.props.summaryColumn;
-      var selectedColumnOption = _this.numericColumnsOptions.find(function (o) {
-        return o.value.key === summaryColumn;
-      }) || null;
+    this.renderNumericColumn = () => {
+      const {
+        summaryColumn
+      } = this.props;
+      const selectedColumnOption = this.numericColumnsOptions.find(o => o.value.key === summaryColumn) || null;
       return /*#__PURE__*/React.createElement("div", {
         className: "statistic-chart-parameter-item"
       }, /*#__PURE__*/React.createElement("label", null, intl.get('Numeric_column')), /*#__PURE__*/React.createElement(DTableSelect, {
         value: selectedColumnOption,
-        onChange: _this.onSelectSummaryColumn,
-        options: _this.numericColumnsOptions,
+        onChange: this.onSelectSummaryColumn,
+        options: this.numericColumnsOptions,
         placeholder: intl.get('Select_a_column'),
-        noOptionsMessage: function noOptionsMessage() {
+        noOptionsMessage: () => {
           return /*#__PURE__*/React.createElement("span", null, intl.get('No_options'));
         }
       }));
     };
-    _this.renderSummaryMethod = function () {
-      var selectedMethodOption = _this.getSelectedMethodOption(_this.props.summaryMethod, _this.summaryMethodsOptions);
+    this.renderSummaryMethod = () => {
+      let selectedMethodOption = this.getSelectedMethodOption(this.props.summaryMethod, this.summaryMethodsOptions);
       return /*#__PURE__*/React.createElement("div", {
         className: "statistic-chart-parameter-item"
       }, /*#__PURE__*/React.createElement("label", null, intl.get('Summary_method')), /*#__PURE__*/React.createElement(DTableSelect, {
         value: selectedMethodOption,
-        onChange: _this.onSelectSummaryMethod,
-        options: _this.summaryMethodsOptions
+        onChange: this.onSelectSummaryMethod,
+        options: this.summaryMethodsOptions
       }));
     };
-    _this.onSelectSummaryMethod = function (option) {
-      _this.props.onSelectSummaryMethod(option.value);
+    this.onSelectSummaryMethod = option => {
+      this.props.onSelectSummaryMethod(option.value);
     };
-    _this.renderNumericSummaryItem = function () {
-      var _this$props2 = _this.props,
-        statItem = _this$props2.statItem,
-        onSelectSummaryColumn = _this$props2.onSelectSummaryColumn,
-        onSelectSummaryMethod = _this$props2.onSelectSummaryMethod;
-      var type = statItem.type;
-      var column_key, summary_method;
+    this.renderNumericSummaryItem = () => {
+      const {
+        statItem,
+        onSelectSummaryColumn,
+        onSelectSummaryMethod
+      } = this.props;
+      const {
+        type
+      } = statItem;
+      let column_key, summary_method;
       if (type === STAT_TYPE.COMBINATION_CHART) {
         column_key = statItem.y_axis_left_summary_column;
         summary_method = statItem.y_axis_left_summary_method;
@@ -178,45 +176,45 @@ var SummarySettings = /*#__PURE__*/function (_Component) {
       return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(NumericSummaryItem, {
         statItem: statItem,
         key: "number-column-".concat(0),
-        numericColumnsOptions: _this.numericColumnsOptions,
-        summaryMethodOptions: _this.summaryMethodsOptions,
+        numericColumnsOptions: this.numericColumnsOptions,
+        summaryMethodOptions: this.summaryMethodsOptions,
         index: 0,
         numericColumnItem: {
-          column_key: column_key,
-          summary_method: summary_method
+          column_key,
+          summary_method
         },
-        onChangeColumnOption: function onChangeColumnOption(index, option) {
-          return onSelectSummaryColumn(option.value.key);
-        },
-        onChangeSummaryMethod: function onChangeSummaryMethod(index, option) {
-          return onSelectSummaryMethod(option.value);
-        }
-      }), _this.renderGroupbyNumericColumns(), Array.isArray(_this.numericColumnsOptions) && _this.numericColumnsOptions.length > 0 && /*#__PURE__*/React.createElement("div", {
+        onChangeColumnOption: (index, option) => onSelectSummaryColumn(option.value.key),
+        onChangeSummaryMethod: (index, option) => onSelectSummaryMethod(option.value)
+      }), this.renderGroupbyNumericColumns(), Array.isArray(this.numericColumnsOptions) && this.numericColumnsOptions.length > 0 && /*#__PURE__*/React.createElement("div", {
         className: "statistics-add-number-column",
-        onClick: _this.onAddNumericColumn
+        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_numeric_column'))));
     };
-    _this.onDeleteNumericColumnItem = function (index) {
-      var _ref = _this.props.statItem || {},
-        y_axis_left_group_by_numeric_columns = _ref.y_axis_left_group_by_numeric_columns;
+    this.onDeleteNumericColumnItem = index => {
+      let {
+        y_axis_left_group_by_numeric_columns
+      } = this.props.statItem || {};
       y_axis_left_group_by_numeric_columns = y_axis_left_group_by_numeric_columns || [];
-      y_axis_left_group_by_numeric_columns = _toConsumableArray(y_axis_left_group_by_numeric_columns);
+      y_axis_left_group_by_numeric_columns = [...y_axis_left_group_by_numeric_columns];
       y_axis_left_group_by_numeric_columns.splice(index - 1, 1);
-      _this.props.updateStatItem(Object.assign({}, _this.props.statItem, {
-        y_axis_left_group_by_numeric_columns: _toConsumableArray(y_axis_left_group_by_numeric_columns)
+      this.props.updateStatItem(Object.assign({}, this.props.statItem, {
+        y_axis_left_group_by_numeric_columns: [...y_axis_left_group_by_numeric_columns]
       }));
     };
-    _this.onAddNumericColumn = function () {
-      var statItem = _this.props.statItem;
-      var _ref2 = statItem || {},
-        y_axis_left_group_by_numeric_columns = _ref2.y_axis_left_group_by_numeric_columns;
-      var newNumericColumnKey = _this.numericColumnsOptions[0].value.key;
+    this.onAddNumericColumn = () => {
+      let {
+        statItem
+      } = this.props;
+      let {
+        y_axis_left_group_by_numeric_columns
+      } = statItem || {};
+      let newNumericColumnKey = this.numericColumnsOptions[0].value.key;
       if (Array.isArray(y_axis_left_group_by_numeric_columns)) {
-        y_axis_left_group_by_numeric_columns = _toConsumableArray(y_axis_left_group_by_numeric_columns);
+        y_axis_left_group_by_numeric_columns = [...y_axis_left_group_by_numeric_columns];
         y_axis_left_group_by_numeric_columns.push({
           column_key: newNumericColumnKey,
           summary_method: SUMMARY_METHOD[0]
@@ -227,61 +225,68 @@ var SummarySettings = /*#__PURE__*/function (_Component) {
           summary_method: SUMMARY_METHOD[0]
         }];
       }
-      _this.props.updateStatItem(Object.assign({}, _this.props.statItem, {
-        y_axis_left_group_by_numeric_columns: _toConsumableArray(y_axis_left_group_by_numeric_columns)
+      this.props.updateStatItem(Object.assign({}, this.props.statItem, {
+        y_axis_left_group_by_numeric_columns: [...y_axis_left_group_by_numeric_columns]
       }));
     };
-    _this.onChangeNumericSummaryColumn = function (index, columnOption) {
-      var _ref3 = _this.props.statItem || {},
-        y_axis_left_group_by_numeric_columns = _ref3.y_axis_left_group_by_numeric_columns;
+    this.onChangeNumericSummaryColumn = (index, columnOption) => {
+      let {
+        y_axis_left_group_by_numeric_columns
+      } = this.props.statItem || {};
       y_axis_left_group_by_numeric_columns = y_axis_left_group_by_numeric_columns || [];
-      y_axis_left_group_by_numeric_columns = _toConsumableArray(y_axis_left_group_by_numeric_columns);
-      var selectedItem = y_axis_left_group_by_numeric_columns[index - 1];
+      y_axis_left_group_by_numeric_columns = [...y_axis_left_group_by_numeric_columns];
+      let selectedItem = y_axis_left_group_by_numeric_columns[index - 1];
       selectedItem = Object.assign({}, selectedItem, {
         column_key: columnOption.value.key
       });
       y_axis_left_group_by_numeric_columns[index - 1] = selectedItem;
-      _this.props.updateStatItem(Object.assign({}, _this.props.statItem, {
-        y_axis_left_group_by_numeric_columns: y_axis_left_group_by_numeric_columns
+      this.props.updateStatItem(Object.assign({}, this.props.statItem, {
+        y_axis_left_group_by_numeric_columns
       }));
     };
-    _this.onChangeNumericSummaryMethod = function (index, option) {
-      var _ref4 = _this.props.statItem || {},
-        y_axis_left_group_by_numeric_columns = _ref4.y_axis_left_group_by_numeric_columns;
+    this.onChangeNumericSummaryMethod = (index, option) => {
+      let {
+        y_axis_left_group_by_numeric_columns
+      } = this.props.statItem || {};
       y_axis_left_group_by_numeric_columns = y_axis_left_group_by_numeric_columns || [];
-      y_axis_left_group_by_numeric_columns = _toConsumableArray(y_axis_left_group_by_numeric_columns);
-      var selectedItem = y_axis_left_group_by_numeric_columns[index - 1];
+      y_axis_left_group_by_numeric_columns = [...y_axis_left_group_by_numeric_columns];
+      let selectedItem = y_axis_left_group_by_numeric_columns[index - 1];
       selectedItem = Object.assign({}, selectedItem, {
         summary_method: option.value
       });
       y_axis_left_group_by_numeric_columns[index - 1] = selectedItem;
-      _this.props.updateStatItem(Object.assign({}, _this.props.statItem, {
-        y_axis_left_group_by_numeric_columns: y_axis_left_group_by_numeric_columns
+      this.props.updateStatItem(Object.assign({}, this.props.statItem, {
+        y_axis_left_group_by_numeric_columns
       }));
     };
-    _this.renderGroupbyNumericColumns = function () {
-      var statItem = _this.props.statItem;
-      var y_axis_left_group_by_numeric_columns = statItem.y_axis_left_group_by_numeric_columns;
+    this.renderGroupbyNumericColumns = () => {
+      const {
+        statItem
+      } = this.props;
+      let {
+        y_axis_left_group_by_numeric_columns
+      } = statItem;
       if (!y_axis_left_group_by_numeric_columns || !Array.isArray(y_axis_left_group_by_numeric_columns)) return null;
-      return y_axis_left_group_by_numeric_columns.map(function (item, index) {
+      return y_axis_left_group_by_numeric_columns.map((item, index) => {
         return /*#__PURE__*/React.createElement(NumericSummaryItem, {
           statItem: statItem,
           key: "number-column-".concat(index),
-          numericColumnsOptions: _this.numericColumnsOptions,
-          summaryMethodOptions: _this.summaryMethodsOptions,
+          numericColumnsOptions: this.numericColumnsOptions,
+          summaryMethodOptions: this.summaryMethodsOptions,
           index: index + 1,
           numericColumnItem: item,
-          onDeleteNumericColumnItem: _this.onDeleteNumericColumnItem,
-          onChangeColumnOption: _this.onChangeNumericSummaryColumn,
-          onChangeSummaryMethod: _this.onChangeNumericSummaryMethod
+          onDeleteNumericColumnItem: this.onDeleteNumericColumnItem,
+          onChangeColumnOption: this.onChangeNumericSummaryColumn,
+          onChangeSummaryMethod: this.onChangeNumericSummaryMethod
         });
       });
     };
-    _this.useMultipleSummaryColumns = function () {
-      var _this$props3 = _this.props,
-        statItem = _this$props3.statItem,
-        summaryType = _this$props3.summaryType,
-        useMultipleSummaryColumns = _this$props3.useMultipleSummaryColumns;
+    this.useMultipleSummaryColumns = () => {
+      const {
+        statItem,
+        summaryType,
+        useMultipleSummaryColumns
+      } = this.props;
       if (statItem.type === STAT_TYPE.COMBINATION_CHART) {
         if (useMultipleSummaryColumns && summaryType === SUMMARY_TYPE.ADVANCED && statItem.y_axis_left_group_by_multiple_numeric_column) {
           return true;
@@ -289,31 +294,30 @@ var SummarySettings = /*#__PURE__*/function (_Component) {
       }
       return false;
     };
-    var numericColumns = props.numericColumns,
-      getColumnsOptions = props.getColumnsOptions;
-    _this.numericColumnsOptions = getColumnsOptions(numericColumns);
-    _this.summaryMethodsOptions = _this.getSummaryMethodsOptions();
-    _this.summaryExplanation = _this.getSummaryExplanation();
-    _this.summaryTypeOptions = _this.getSummaryTypeOptions();
-    return _this;
+    const {
+      numericColumns,
+      getColumnsOptions
+    } = props;
+    this.numericColumnsOptions = getColumnsOptions(numericColumns);
+    this.summaryMethodsOptions = this.getSummaryMethodsOptions();
+    this.summaryExplanation = this.getSummaryExplanation();
+    this.summaryTypeOptions = this.getSummaryTypeOptions();
   }
-  _createClass(SummarySettings, [{
-    key: "componentWillReceiveProps",
-    value: function componentWillReceiveProps(nextProps) {
-      if (nextProps.selectedTableId !== this.props.selectedTableId) {
-        var numericColumns = nextProps.numericColumns,
-          getColumnsOptions = nextProps.getColumnsOptions;
-        this.numericColumnsOptions = getColumnsOptions(numericColumns);
-      }
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.selectedTableId !== this.props.selectedTableId) {
+      const {
+        numericColumns,
+        getColumnsOptions
+      } = nextProps;
+      this.numericColumnsOptions = getColumnsOptions(numericColumns);
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var summaryType = this.props.summaryType;
-      var _useMultipleSummaryColumns = this.useMultipleSummaryColumns();
-      return /*#__PURE__*/React.createElement(Fragment, null, this.renderSummaryTypes(), !_useMultipleSummaryColumns && summaryType === SUMMARY_TYPE.ADVANCED && /*#__PURE__*/React.createElement(Fragment, null, this.renderNumericColumn(), this.renderSummaryMethod()), _useMultipleSummaryColumns && this.renderNumericSummaryItem());
-    }
-  }]);
-  return SummarySettings;
-}(Component);
+  }
+  render() {
+    const {
+      summaryType
+    } = this.props;
+    const _useMultipleSummaryColumns = this.useMultipleSummaryColumns();
+    return /*#__PURE__*/React.createElement(Fragment, null, this.renderSummaryTypes(), !_useMultipleSummaryColumns && summaryType === SUMMARY_TYPE.ADVANCED && /*#__PURE__*/React.createElement(Fragment, null, this.renderNumericColumn(), this.renderSummaryMethod()), _useMultipleSummaryColumns && this.renderNumericSummaryItem());
+  }
+}
 export default SummarySettings;