dtable-statistic 4.2.2 → 4.3.0

package/es/stat-editor/stat-settings/basic-chart-settings/horizontal-axis-group-settings.js

@@ -1,8 +1,3 @@
-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';
@@ -10,20 +5,16 @@ import GroupbySettings from './groupby-settings';
 import SummaryMethodSettings from './summary-method-setting';
 import NumericSummaryItem from '../public-setting/numeric-summary-item';
 import { GROUPBY_TYPE, STATISTICS_COUNT_SHOW, 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 GroupingSettings = /*#__PURE__*/function (_Component) {
-  _inherits(GroupingSettings, _Component);
-  var _super = _createSuper(GroupingSettings);
-  function GroupingSettings(props) {
-    var _this;
-    _classCallCheck(this, GroupingSettings);
-    _this = _super.call(this, props);
-    _this.getSummaryMethodsOptions = function () {
-      return SUMMARY_METHOD.map(function (m) {
+class GroupingSettings extends Component {
+  constructor(props) {
+    super(props);
+    this.getSummaryMethodsOptions = () => {
+      return SUMMARY_METHOD.map(m => {
         return {
           value: m,
           label: /*#__PURE__*/React.createElement("span", {
@@ -32,9 +23,11 @@ var GroupingSettings = /*#__PURE__*/function (_Component) {
         };
       });
     };
-    _this.getDefaultColumnGroupbyType = function (_ref) {
-      var horizontal_axis_summary_type = _ref.horizontal_axis_summary_type,
-        column_groupby_multiple_numeric_column = _ref.column_groupby_multiple_numeric_column;
+    this.getDefaultColumnGroupbyType = _ref => {
+      let {
+        horizontal_axis_summary_type,
+        column_groupby_multiple_numeric_column
+      } = _ref;
       if (column_groupby_multiple_numeric_column) {
         return GROUP_TYPES.MULTIPLE_NUMERIC_COLUMN;
       } else if (horizontal_axis_summary_type === SUMMARY_TYPE.ADVANCED) {
@@ -42,7 +35,7 @@ var GroupingSettings = /*#__PURE__*/function (_Component) {
       }
       return GROUP_TYPES.COUNT;
     };
-    _this.getGroupTypeOptions = function () {
+    this.getGroupTypeOptions = () => {
       return [{
         value: GROUP_TYPES.COUNT,
         label: /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
@@ -66,20 +59,23 @@ var GroupingSettings = /*#__PURE__*/function (_Component) {
         }, intl.get('Compute_the_sum_maximum_or_minimum_value_of_records_in_each_group_by_multiple_fields')))
       }];
     };
-    _this.onChangeGroupType = function (option) {
-      var value = option.value;
-      if (value === _this.state.columnGroupbyType) return;
-      var statItem = _this.props.statItem;
-      var _ref2 = _this.props.statItem || {},
-        column_groupby_column_key = _ref2.column_groupby_column_key,
-        column_groupby_date_granularity = _ref2.column_groupby_date_granularity,
-        column_groupby_geolocation_granularity = _ref2.column_groupby_geolocation_granularity,
-        column_groupby_multiple_numeric_column = _ref2.column_groupby_multiple_numeric_column,
-        column_groupby_numeric_columns = _ref2.column_groupby_numeric_columns,
-        vertical_axis_column_key = _ref2.vertical_axis_column_key,
-        horizontal_axis_summary_type = _ref2.horizontal_axis_summary_type,
-        horizontal_axis_column_key = _ref2.horizontal_axis_column_key,
-        horizontal_axis_summary_method = _ref2.horizontal_axis_summary_method;
+    this.onChangeGroupType = option => {
+      const value = option.value;
+      if (value === this.state.columnGroupbyType) return;
+      const {
+        statItem
+      } = this.props;
+      let {
+        column_groupby_column_key,
+        column_groupby_date_granularity,
+        column_groupby_geolocation_granularity,
+        column_groupby_multiple_numeric_column,
+        column_groupby_numeric_columns,
+        vertical_axis_column_key,
+        horizontal_axis_summary_type,
+        horizontal_axis_column_key,
+        horizontal_axis_summary_method
+      } = this.props.statItem || {};
       if (value === GROUP_TYPES.SINGLE_NUMERIC_COLUMN) {
         column_groupby_multiple_numeric_column = false;
         column_groupby_numeric_columns = [];
@@ -92,9 +88,11 @@ var GroupingSettings = /*#__PURE__*/function (_Component) {
       } else if (value === GROUP_TYPES.COUNT) {
         column_groupby_multiple_numeric_column = false;
         column_groupby_numeric_columns = [];
-        var groupColumn = _this.props.columnGroupbyColumnsOptions.find(function (column) {
-          var key = column.key,
-            type = column.type;
+        const groupColumn = this.props.columnGroupbyColumnsOptions.find(column => {
+          const {
+            key,
+            type
+          } = column;
           return key !== vertical_axis_column_key && (type !== 'date' || type !== 'geolocation');
         }) || {};
         column_groupby_column_key = groupColumn.key;
@@ -107,100 +105,108 @@ var GroupingSettings = /*#__PURE__*/function (_Component) {
         column_groupby_multiple_numeric_column = true;
         column_groupby_numeric_columns = [];
         horizontal_axis_summary_type = SUMMARY_TYPE.ADVANCED;
-        horizontal_axis_column_key = _this.props.numericColumnsOptions.length > 0 ? _this.props.numericColumnsOptions[0].value.key : null;
+        horizontal_axis_column_key = this.props.numericColumnsOptions.length > 0 ? this.props.numericColumnsOptions[0].value.key : null;
         column_groupby_date_granularity = null;
         column_groupby_geolocation_granularity = null;
         horizontal_axis_summary_method = SUMMARY_METHOD[0];
       }
-      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,
-        column_groupby_numeric_columns: column_groupby_numeric_columns,
-        horizontal_axis_summary_type: horizontal_axis_summary_type,
-        horizontal_axis_column_key: horizontal_axis_column_key,
-        horizontal_axis_summary_method: horizontal_axis_summary_method
+      let updated = {
+        column_groupby_column_key,
+        column_groupby_date_granularity,
+        column_groupby_geolocation_granularity,
+        column_groupby_multiple_numeric_column,
+        column_groupby_numeric_columns,
+        horizontal_axis_summary_type,
+        horizontal_axis_column_key,
+        horizontal_axis_summary_method
       };
-      _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 horizontal_axis_summary_type = statItem.horizontal_axis_summary_type,
-        column_groupby_multiple_numeric_column = statItem.column_groupby_multiple_numeric_column;
+    this.getSelectedGroupType = () => {
+      const {
+        statItem
+      } = this.props;
+      const {
+        horizontal_axis_summary_type,
+        column_groupby_multiple_numeric_column
+      } = statItem;
       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 (horizontal_axis_summary_type === SUMMARY_TYPE.COUNT) {
-        return _this.groupTypeOptions[0];
+        return this.groupTypeOptions[0];
       }
       if (horizontal_axis_summary_type === SUMMARY_TYPE.ADVANCED) {
-        return _this.groupTypeOptions[1];
+        return this.groupTypeOptions[1];
       }
     };
-    _this.onSelectGroupbyColumn = function (type, groupbyColumnKey, groupbyDateGranularity, groupbyGeolocationGranularity) {
-      var updated = {
+    this.onSelectGroupbyColumn = (type, groupbyColumnKey, groupbyDateGranularity, groupbyGeolocationGranularity) => {
+      let updated = {
         column_groupby_column_key: groupbyColumnKey,
         column_groupby_date_granularity: groupbyDateGranularity,
         column_groupby_geolocation_granularity: groupbyGeolocationGranularity
       };
-      _this.props.updateStatItem(Object.assign({}, _this.props.statItem, updated));
+      this.props.updateStatItem(Object.assign({}, this.props.statItem, updated));
     };
-    _this.onSelectGroupbyDateGranularity = function (type, dateGranularity) {
-      var updated = {
+    this.onSelectGroupbyDateGranularity = (type, dateGranularity) => {
+      let updated = {
         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 = {
         column_groupby_geolocation_granularity: geolocationGranularity
       };
-      _this.props.updateStatItem(Object.assign({}, _this.props.statItem, updated));
+      this.props.updateStatItem(Object.assign({}, this.props.statItem, updated));
     };
-    _this.updateSummaryMethod = function (summaryMethod) {
-      _this.props.updateStatItem(Object.assign({}, _this.props.statItem, {
+    this.updateSummaryMethod = summaryMethod => {
+      this.props.updateStatItem(Object.assign({}, this.props.statItem, {
         horizontal_axis_summary_method: summaryMethod
       }));
     };
-    _this.updateSummaryColumn = function (summaryColumnKey) {
-      _this.props.updateStatItem(Object.assign({}, _this.props.statItem, {
+    this.updateSummaryColumn = summaryColumnKey => {
+      this.props.updateStatItem(Object.assign({}, this.props.statItem, {
         horizontal_axis_column_key: summaryColumnKey
       }));
     };
-    _this.renderGroupbyNumericColumns = function () {
-      var statItem = _this.props.statItem;
-      var column_groupby_numeric_columns = statItem.column_groupby_numeric_columns;
+    this.renderGroupbyNumericColumns = () => {
+      const {
+        statItem
+      } = this.props;
+      let {
+        column_groupby_numeric_columns
+      } = statItem;
       if (!column_groupby_numeric_columns || !Array.isArray(column_groupby_numeric_columns)) return null;
-      return column_groupby_numeric_columns.map(function (item, index) {
+      return column_groupby_numeric_columns.map((item, index) => {
         return /*#__PURE__*/React.createElement(NumericSummaryItem, {
           statItem: statItem,
           key: "number-column-".concat(index),
-          numericColumnsOptions: _this.props.numericColumnsOptions,
-          summaryMethodOptions: _this.summaryMethodsOptions,
+          numericColumnsOptions: this.props.numericColumnsOptions,
+          summaryMethodOptions: this.summaryMethodsOptions,
           index: index + 1,
           numericColumnItem: item,
-          onDeleteNumericColumnItem: _this.onDeleteNumericColumnItem,
-          onChangeColumnOption: _this.onChangeGroupbyNumericColumn,
-          onChangeSummaryMethod: _this.onChangeSummaryMethod
+          onDeleteNumericColumnItem: this.onDeleteNumericColumnItem,
+          onChangeColumnOption: this.onChangeGroupbyNumericColumn,
+          onChangeSummaryMethod: this.onChangeSummaryMethod
         });
       });
     };
-    _this.onAddNumericColumn = function () {
-      var _this$props = _this.props,
-        statItem = _this$props.statItem,
-        numericColumnsOptions = _this$props.numericColumnsOptions;
-      var _ref3 = statItem || {},
-        column_groupby_numeric_columns = _ref3.column_groupby_numeric_columns;
-      var newNumericColumnKey = numericColumnsOptions[0].value.key;
+    this.onAddNumericColumn = () => {
+      let {
+        statItem,
+        numericColumnsOptions
+      } = this.props;
+      let {
+        column_groupby_numeric_columns
+      } = statItem || {};
+      let newNumericColumnKey = numericColumnsOptions[0].value.key;
       if (Array.isArray(column_groupby_numeric_columns)) {
-        column_groupby_numeric_columns = _toConsumableArray(column_groupby_numeric_columns);
+        column_groupby_numeric_columns = [...column_groupby_numeric_columns];
         column_groupby_numeric_columns.push({
           column_key: newNumericColumnKey,
           summary_method: SUMMARY_METHOD[0]
@@ -211,142 +217,142 @@ var GroupingSettings = /*#__PURE__*/function (_Component) {
           summary_method: SUMMARY_METHOD[0]
         }];
       }
-      _this.props.updateStatItem(Object.assign({}, _this.props.statItem, {
-        column_groupby_numeric_columns: _toConsumableArray(column_groupby_numeric_columns)
+      this.props.updateStatItem(Object.assign({}, this.props.statItem, {
+        column_groupby_numeric_columns: [...column_groupby_numeric_columns]
       }));
     };
-    _this.onChangeGroupbyNumericColumn = function (index, columnOption) {
+    this.onChangeGroupbyNumericColumn = (index, columnOption) => {
       if (index === 0) {
-        _this.props.updateStatItem(Object.assign({}, _this.props.statItem, {
+        this.props.updateStatItem(Object.assign({}, this.props.statItem, {
           horizontal_axis_column_key: columnOption.value.key
         }));
       } else {
-        var _ref4 = _this.props.statItem || {},
-          column_groupby_numeric_columns = _ref4.column_groupby_numeric_columns;
+        let {
+          column_groupby_numeric_columns
+        } = this.props.statItem || {};
         column_groupby_numeric_columns = column_groupby_numeric_columns || [];
-        column_groupby_numeric_columns = _toConsumableArray(column_groupby_numeric_columns);
-        var selectedItem = column_groupby_numeric_columns[index - 1];
+        column_groupby_numeric_columns = [...column_groupby_numeric_columns];
+        let selectedItem = column_groupby_numeric_columns[index - 1];
         selectedItem = Object.assign({}, selectedItem, {
           column_key: columnOption.value.key
         });
         column_groupby_numeric_columns[index - 1] = selectedItem;
-        _this.props.updateStatItem(Object.assign({}, _this.props.statItem, {
-          column_groupby_numeric_columns: column_groupby_numeric_columns
+        this.props.updateStatItem(Object.assign({}, this.props.statItem, {
+          column_groupby_numeric_columns
         }));
       }
     };
-    _this.onDeleteNumericColumnItem = function (index) {
-      var _ref5 = _this.props.statItem || {},
-        column_groupby_numeric_columns = _ref5.column_groupby_numeric_columns;
+    this.onDeleteNumericColumnItem = index => {
+      let {
+        column_groupby_numeric_columns
+      } = this.props.statItem || {};
       column_groupby_numeric_columns = column_groupby_numeric_columns || [];
-      column_groupby_numeric_columns = _toConsumableArray(column_groupby_numeric_columns);
+      column_groupby_numeric_columns = [...column_groupby_numeric_columns];
       column_groupby_numeric_columns.splice(index - 1, 1);
-      _this.props.updateStatItem(Object.assign({}, _this.props.statItem, {
-        column_groupby_numeric_columns: _toConsumableArray(column_groupby_numeric_columns)
+      this.props.updateStatItem(Object.assign({}, this.props.statItem, {
+        column_groupby_numeric_columns: [...column_groupby_numeric_columns]
       }));
     };
-    _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, {
           horizontal_axis_summary_method: option.value
         }));
       } else {
-        var _ref6 = _this.props.statItem || {},
-          column_groupby_numeric_columns = _ref6.column_groupby_numeric_columns;
+        let {
+          column_groupby_numeric_columns
+        } = this.props.statItem || {};
         column_groupby_numeric_columns = column_groupby_numeric_columns || [];
-        column_groupby_numeric_columns = _toConsumableArray(column_groupby_numeric_columns);
-        var selectedItem = column_groupby_numeric_columns[index - 1];
+        column_groupby_numeric_columns = [...column_groupby_numeric_columns];
+        let selectedItem = column_groupby_numeric_columns[index - 1];
         selectedItem = Object.assign({}, selectedItem, {
           summary_method: option.value
         });
         column_groupby_numeric_columns[index - 1] = selectedItem;
-        _this.props.updateStatItem(Object.assign({}, _this.props.statItem, {
-          column_groupby_numeric_columns: column_groupby_numeric_columns
+        this.props.updateStatItem(Object.assign({}, this.props.statItem, {
+          column_groupby_numeric_columns
         }));
       }
     };
-    _this.groupTypeOptions = _this.getGroupTypeOptions();
-    _this.summaryMethodsOptions = _this.getSummaryMethodsOptions();
-    _this.state = {
-      columnGroupbyType: _this.getDefaultColumnGroupbyType(props.statItem)
+    this.groupTypeOptions = this.getGroupTypeOptions();
+    this.summaryMethodsOptions = this.getSummaryMethodsOptions();
+    this.state = {
+      columnGroupbyType: this.getDefaultColumnGroupbyType(props.statItem)
     };
-    return _this;
   }
-  _createClass(GroupingSettings, [{
-    key: "render",
-    value: function render() {
-      var _this$props2 = this.props,
-        label = _this$props2.label,
-        statItem = _this$props2.statItem,
-        selectedTable = _this$props2.selectedTable,
-        columnGroupbyColumnsOptions = _this$props2.columnGroupbyColumnsOptions,
-        numericColumnsOptions = _this$props2.numericColumnsOptions,
-        dateGranularityOptions = _this$props2.dateGranularityOptions,
-        geolocationGranularityOptions = _this$props2.geolocationGranularityOptions;
-      var selectedGroupItem = this.getSelectedGroupType();
-      var _ref7 = statItem || {},
-        horizontal_axis_summary_type = _ref7.horizontal_axis_summary_type,
-        horizontal_axis_column_key = _ref7.horizontal_axis_column_key,
-        horizontal_axis_summary_method = _ref7.horizontal_axis_summary_method,
-        column_groupby_column_key = _ref7.column_groupby_column_key,
-        column_groupby_date_granularity = _ref7.column_groupby_date_granularity,
-        column_groupby_geolocation_granularity = _ref7.column_groupby_geolocation_granularity,
-        column_groupby_multiple_numeric_column = _ref7.column_groupby_multiple_numeric_column;
-      return /*#__PURE__*/React.createElement(Fragment, null, /*#__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: selectedGroupItem,
-        onChange: this.onChangeGroupType,
-        options: this.groupTypeOptions
-      })), horizontal_axis_summary_type === SUMMARY_TYPE.ADVANCED && (column_groupby_multiple_numeric_column ? /*#__PURE__*/React.createElement(NumericSummaryItem, {
-        statItem: statItem,
-        index: 0,
-        key: "number-column-".concat(0),
-        numericColumnsOptions: numericColumnsOptions,
-        summaryMethodOptions: this.summaryMethodsOptions,
-        numericColumnItem: {
-          column_key: horizontal_axis_column_key,
-          summary_method: horizontal_axis_summary_method
-        },
-        onChangeColumnOption: this.onChangeGroupbyNumericColumn,
-        onChangeSummaryMethod: this.onChangeSummaryMethod
-      }) : /*#__PURE__*/React.createElement(SummaryMethodSettings, {
-        statItem: statItem,
-        numericColumnsOptions: numericColumnsOptions,
-        summaryType: horizontal_axis_summary_type,
-        summaryColumnKey: horizontal_axis_column_key,
-        summaryMethod: horizontal_axis_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()), Array.isArray(numericColumnsOptions) && numericColumnsOptions.length > 0 && /*#__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_numeric_column')))), (!column_groupby_multiple_numeric_column && horizontal_axis_summary_type === SUMMARY_TYPE.ADVANCED || horizontal_axis_summary_type === SUMMARY_TYPE.COUNT) && /*#__PURE__*/React.createElement(GroupbySettings, {
-        selectedTable: selectedTable,
-        columnsOptions: columnGroupbyColumnsOptions,
-        dateGranularityOptions: dateGranularityOptions,
-        geolocationGranularityOptions: geolocationGranularityOptions,
-        label: intl.get('Group_by'),
-        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)
-      }));
-    }
-  }]);
-  return GroupingSettings;
-}(Component);
+  render() {
+    let {
+      label,
+      statItem,
+      selectedTable,
+      columnGroupbyColumnsOptions,
+      numericColumnsOptions,
+      dateGranularityOptions,
+      geolocationGranularityOptions
+    } = this.props;
+    const selectedGroupItem = this.getSelectedGroupType();
+    let {
+      horizontal_axis_summary_type,
+      horizontal_axis_column_key,
+      horizontal_axis_summary_method,
+      column_groupby_column_key,
+      column_groupby_date_granularity,
+      column_groupby_geolocation_granularity,
+      column_groupby_multiple_numeric_column
+    } = statItem || {};
+    return /*#__PURE__*/React.createElement(Fragment, null, /*#__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: selectedGroupItem,
+      onChange: this.onChangeGroupType,
+      options: this.groupTypeOptions
+    })), horizontal_axis_summary_type === SUMMARY_TYPE.ADVANCED && (column_groupby_multiple_numeric_column ? /*#__PURE__*/React.createElement(NumericSummaryItem, {
+      statItem: statItem,
+      index: 0,
+      key: "number-column-".concat(0),
+      numericColumnsOptions: numericColumnsOptions,
+      summaryMethodOptions: this.summaryMethodsOptions,
+      numericColumnItem: {
+        column_key: horizontal_axis_column_key,
+        summary_method: horizontal_axis_summary_method
+      },
+      onChangeColumnOption: this.onChangeGroupbyNumericColumn,
+      onChangeSummaryMethod: this.onChangeSummaryMethod
+    }) : /*#__PURE__*/React.createElement(SummaryMethodSettings, {
+      statItem: statItem,
+      numericColumnsOptions: numericColumnsOptions,
+      summaryType: horizontal_axis_summary_type,
+      summaryColumnKey: horizontal_axis_column_key,
+      summaryMethod: horizontal_axis_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()), Array.isArray(numericColumnsOptions) && numericColumnsOptions.length > 0 && /*#__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_numeric_column')))), (!column_groupby_multiple_numeric_column && horizontal_axis_summary_type === SUMMARY_TYPE.ADVANCED || horizontal_axis_summary_type === SUMMARY_TYPE.COUNT) && /*#__PURE__*/React.createElement(GroupbySettings, {
+      selectedTable: selectedTable,
+      columnsOptions: columnGroupbyColumnsOptions,
+      dateGranularityOptions: dateGranularityOptions,
+      geolocationGranularityOptions: geolocationGranularityOptions,
+      label: intl.get('Group_by'),
+      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)
+    }));
+  }
+}
 export default GroupingSettings;