dtable-statistic 4.2.2 → 4.3.0

package/es/stat-editor/stat-settings/basic-chart-settings/completeness-chart-settings.js

@@ -1,7 +1,3 @@
-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 { CellType, TableUtils } from 'dtable-store';
@@ -11,61 +7,68 @@ import GroupbySettings from './groupby-settings';
 import BaseSettings from '../public-setting/base-settings';
 import DataSort from '../public-setting/data-sort-setting';
 import { TIME_COLUMN_LIST, STAT_TYPE } from '../../../constants';
-var COLUMN_TYPES = [CellType.TEXT, CellType.COLLABORATOR, CellType.SINGLE_SELECT];
-var CompletenessSetting = /*#__PURE__*/function (_Component) {
-  _inherits(CompletenessSetting, _Component);
-  var _super = _createSuper(CompletenessSetting);
-  function CompletenessSetting(props) {
-    var _this;
-    _classCallCheck(this, CompletenessSetting);
-    _this = _super.call(this, props);
-    _this.renderNameSettings = function () {
-      var _this$props = _this.props,
-        statItem = _this$props.statItem,
-        getSelectedColumnOption = _this$props.getSelectedColumnOption;
-      var name_column = statItem.name_column;
-      var selectedItem = getSelectedColumnOption(name_column, _this.columnOptions);
+const COLUMN_TYPES = [CellType.TEXT, CellType.COLLABORATOR, CellType.SINGLE_SELECT];
+class CompletenessSetting extends Component {
+  constructor(props) {
+    super(props);
+    this.renderNameSettings = () => {
+      const {
+        statItem,
+        getSelectedColumnOption
+      } = this.props;
+      const {
+        name_column
+      } = statItem;
+      const selectedItem = getSelectedColumnOption(name_column, this.columnOptions);
       return /*#__PURE__*/React.createElement("div", {
         className: "statistic-chart-parameter-item"
       }, /*#__PURE__*/React.createElement("label", null, intl.get('Name_field')), /*#__PURE__*/React.createElement(DTableSelect, {
         placeholder: intl.get('Select_a_column'),
         value: selectedItem,
-        onChange: _this.onSelectGroupColumn,
-        options: _this.columnOptions
+        onChange: this.onSelectGroupColumn,
+        options: this.columnOptions
       }));
     };
-    _this.onSelectGroupColumn = function (option) {
-      var statItem = _this.props.statItem;
-      _this.props.updateStatItem(Object.assign({}, statItem, {
+    this.onSelectGroupColumn = option => {
+      const {
+        statItem
+      } = this.props;
+      this.props.updateStatItem(Object.assign({}, statItem, {
         name_column: option.value.key
       }));
     };
-    _this.renderCompletionSettings = function () {
-      var _this$props2 = _this.props,
-        statItem = _this$props2.statItem,
-        getSelectedColumnOption = _this$props2.getSelectedColumnOption;
-      var completed_column = statItem.completed_column;
-      var selectedItem = getSelectedColumnOption(completed_column, _this.props.numericColumnsOptions);
+    this.renderCompletionSettings = () => {
+      const {
+        statItem,
+        getSelectedColumnOption
+      } = this.props;
+      const {
+        completed_column
+      } = statItem;
+      const selectedItem = getSelectedColumnOption(completed_column, this.props.numericColumnsOptions);
       return /*#__PURE__*/React.createElement("div", {
         className: "statistic-chart-parameter-item"
       }, /*#__PURE__*/React.createElement("label", null, intl.get('Completion_value_field')), /*#__PURE__*/React.createElement(DTableSelect, {
         placeholder: intl.get('Select_a_column'),
         value: selectedItem,
-        onChange: _this.onSelectCompletionColumn,
-        options: _this.props.numericColumnsOptions
+        onChange: this.onSelectCompletionColumn,
+        options: this.props.numericColumnsOptions
       }));
     };
-    _this.renderGroupSettings = function () {
-      var _this$props3 = _this.props,
-        selectedTable = _this$props3.selectedTable,
-        columnGroupbyColumnsOptions = _this$props3.columnGroupbyColumnsOptions,
-        dateGranularityOptions = _this$props3.dateGranularityOptions,
-        geolocationGranularityOptions = _this$props3.geolocationGranularityOptions,
-        statItem = _this$props3.statItem,
-        getSelectedColumnOption = _this$props3.getSelectedColumnOption;
-      var group_column = statItem.group_column,
-        date_granularity = statItem.date_granularity,
-        geolocation_granularity = statItem.geolocation_granularity;
+    this.renderGroupSettings = () => {
+      const {
+        selectedTable,
+        columnGroupbyColumnsOptions,
+        dateGranularityOptions,
+        geolocationGranularityOptions,
+        statItem,
+        getSelectedColumnOption
+      } = this.props;
+      const {
+        group_column,
+        date_granularity,
+        geolocation_granularity
+      } = statItem;
       return /*#__PURE__*/React.createElement(GroupbySettings, {
         selectedTable: selectedTable,
         columnsOptions: columnGroupbyColumnsOptions,
@@ -76,18 +79,19 @@ var CompletenessSetting = /*#__PURE__*/function (_Component) {
         groupbyDateGranularity: date_granularity,
         groupbyGeolocationGranularity: geolocation_granularity,
         getSelectedColumnOption: getSelectedColumnOption,
-        onSelectGroupbyColumn: _this.onSelectColumnGroupColumn,
-        onSelectGroupbyDateGranularity: _this.onSelectDateGranularity,
-        onSelectGroupbyGeolocationGranularity: _this.onSelectGeolocationGranularity
+        onSelectGroupbyColumn: this.onSelectColumnGroupColumn,
+        onSelectGroupbyDateGranularity: this.onSelectDateGranularity,
+        onSelectGroupbyGeolocationGranularity: this.onSelectGeolocationGranularity
       });
     };
-    _this.onSelectColumnGroupColumn = function (key) {
-      var _this$props4 = _this.props,
-        statItem = _this$props4.statItem,
-        selectedTable = _this$props4.selectedTable;
+    this.onSelectColumnGroupColumn = key => {
+      const {
+        statItem,
+        selectedTable
+      } = this.props;
       if (key === statItem.group_column) return;
-      var selectedColumn = TableUtils.getTableColumnByKey(selectedTable, key);
-      var newStatItem = {};
+      const selectedColumn = TableUtils.getTableColumnByKey(selectedTable, key);
+      const newStatItem = {};
       if (selectedColumn && TIME_COLUMN_LIST.includes(selectedColumn.type)) {
         newStatItem.date_granularity = 'month';
       }
@@ -95,102 +99,108 @@ var CompletenessSetting = /*#__PURE__*/function (_Component) {
         newStatItem.geolocation_granularity = 'district';
       }
       newStatItem.group_column = key;
-      _this.props.updateStatItem(Object.assign({}, statItem, newStatItem));
+      this.props.updateStatItem(Object.assign({}, statItem, newStatItem));
     };
-    _this.onSelectDateGranularity = function (key) {
-      var statItem = _this.props.statItem;
+    this.onSelectDateGranularity = key => {
+      const {
+        statItem
+      } = this.props;
       if (key === statItem.date_granularity) return;
-      _this.props.updateStatItem(Object.assign({}, statItem, {
+      this.props.updateStatItem(Object.assign({}, statItem, {
         date_granularity: key
       }));
     };
-    _this.onSelectGeolocationGranularity = function (key) {
-      var statItem = _this.props.statItem;
+    this.onSelectGeolocationGranularity = key => {
+      const {
+        statItem
+      } = this.props;
       if (key === statItem.geolocation_granularity) return;
-      _this.props.updateStatItem(Object.assign({}, statItem, {
+      this.props.updateStatItem(Object.assign({}, statItem, {
         geolocation_granularity: key
       }));
     };
-    _this.onSelectCompletionColumn = function (option) {
-      var statItem = _this.props.statItem;
-      _this.props.updateStatItem(Object.assign({}, statItem, {
+    this.onSelectCompletionColumn = option => {
+      const {
+        statItem
+      } = this.props;
+      this.props.updateStatItem(Object.assign({}, statItem, {
         completed_column: option.value.key
       }));
     };
-    _this.renderTotalValueSettings = function () {
-      var _this$props5 = _this.props,
-        statItem = _this$props5.statItem,
-        getSelectedColumnOption = _this$props5.getSelectedColumnOption;
-      var target_column = statItem.target_column;
-      var selectedItem = getSelectedColumnOption(target_column, _this.props.numericColumnsOptions);
+    this.renderTotalValueSettings = () => {
+      const {
+        statItem,
+        getSelectedColumnOption
+      } = this.props;
+      const {
+        target_column
+      } = statItem;
+      const selectedItem = getSelectedColumnOption(target_column, this.props.numericColumnsOptions);
       return /*#__PURE__*/React.createElement("div", {
         className: "statistic-chart-parameter-item"
       }, /*#__PURE__*/React.createElement("label", null, intl.get('Total_value_field')), /*#__PURE__*/React.createElement(DTableSelect, {
         placeholder: intl.get('Select_a_column'),
         value: selectedItem,
-        onChange: _this.onSelectTotalColumn,
-        options: _this.props.numericColumnsOptions
+        onChange: this.onSelectTotalColumn,
+        options: this.props.numericColumnsOptions
       }));
     };
-    _this.onSelectTotalColumn = function (option) {
-      var statItem = _this.props.statItem;
-      _this.props.updateStatItem(Object.assign({}, statItem, {
+    this.onSelectTotalColumn = option => {
+      const {
+        statItem
+      } = this.props;
+      this.props.updateStatItem(Object.assign({}, statItem, {
         target_column: option.value.key
       }));
     };
-    _this.columnOptions = props.generalColumnsOptions.filter(function (item) {
+    this.columnOptions = props.generalColumnsOptions.filter(item => {
       return COLUMN_TYPES.includes(item.value.type);
     });
-    return _this;
   }
-  _createClass(CompletenessSetting, [{
-    key: "componentWillReceiveProps",
-    value: function componentWillReceiveProps(nextProps, props) {
-      if (nextProps.selectedTable._id !== this.props.selectedTable._id) {
-        this.columnOptions = nextProps.generalColumnsOptions.filter(function (item) {
-          return COLUMN_TYPES.includes(item.value.type);
-        });
-      }
+  componentWillReceiveProps(nextProps, props) {
+    if (nextProps.selectedTable._id !== this.props.selectedTable._id) {
+      this.columnOptions = nextProps.generalColumnsOptions.filter(item => {
+        return COLUMN_TYPES.includes(item.value.type);
+      });
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props6 = this.props,
-        getTables = _this$props6.getTables,
-        getViews = _this$props6.getViews,
-        statItem = _this$props6.statItem,
-        settingType = _this$props6.settingType;
-      var _ref = statItem || {},
-        selectedTableId = _ref.table_id,
-        selectedViewId = _ref.view_id;
-      var isGroupChart = statItem.type === STAT_TYPE.GROUP_COMPLETENESS_CHART;
-      if (settingType === 'style') {
-        return /*#__PURE__*/React.createElement(CompletenessStyle, {
-          statItem: statItem,
-          updateStatItem: this.props.updateStatItem
-        });
-      }
-      return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(BaseSettings, {
-        statItem: statItem,
-        selectedTableId: selectedTableId,
-        selectedViewId: selectedViewId,
-        getTables: getTables,
-        getViews: getViews,
-        getTableById: this.props.getTableById,
-        getConvertedChart: this.props.getConvertedChart,
-        updateStatItem: this.props.updateStatItem
-      }), /*#__PURE__*/React.createElement("div", {
-        className: "statistic-chart-parameter-divider"
-      }), this.renderNameSettings(), /*#__PURE__*/React.createElement("div", {
-        className: "statistic-chart-parameter-divider"
-      }), this.renderCompletionSettings(), this.renderTotalValueSettings(), isGroupChart && this.renderGroupSettings(), !isGroupChart && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-        className: "statistic-chart-parameter-divider"
-      }), /*#__PURE__*/React.createElement(DataSort, {
+  }
+  render() {
+    let {
+      getTables,
+      getViews,
+      statItem,
+      settingType
+    } = this.props;
+    let {
+      table_id: selectedTableId,
+      view_id: selectedViewId
+    } = statItem || {};
+    const isGroupChart = statItem.type === STAT_TYPE.GROUP_COMPLETENESS_CHART;
+    if (settingType === 'style') {
+      return /*#__PURE__*/React.createElement(CompletenessStyle, {
         statItem: statItem,
         updateStatItem: this.props.updateStatItem
-      })));
+      });
     }
-  }]);
-  return CompletenessSetting;
-}(Component);
+    return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(BaseSettings, {
+      statItem: statItem,
+      selectedTableId: selectedTableId,
+      selectedViewId: selectedViewId,
+      getTables: getTables,
+      getViews: getViews,
+      getTableById: this.props.getTableById,
+      getConvertedChart: this.props.getConvertedChart,
+      updateStatItem: this.props.updateStatItem
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "statistic-chart-parameter-divider"
+    }), this.renderNameSettings(), /*#__PURE__*/React.createElement("div", {
+      className: "statistic-chart-parameter-divider"
+    }), this.renderCompletionSettings(), this.renderTotalValueSettings(), isGroupChart && this.renderGroupSettings(), !isGroupChart && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      className: "statistic-chart-parameter-divider"
+    }), /*#__PURE__*/React.createElement(DataSort, {
+      statItem: statItem,
+      updateStatItem: this.props.updateStatItem
+    })));
+  }
+}
 export default CompletenessSetting;

package/es/stat-editor/stat-settings/basic-chart-settings/custom-bar-settings.js

@@ -1,7 +1,3 @@
-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 BaseSettings from '../public-setting/base-settings';
@@ -9,119 +5,109 @@ import GroupbySettings from './groupby-settings';
 import StacksSettings from './stacks-settings';
 import BarChartStyle from './style-setting/bar-chart-style-setting';
 import { GROUPBY_TYPE, STAT_TYPE } from '../../../constants';
-var CustomBarSettings = /*#__PURE__*/function (_Component) {
-  _inherits(CustomBarSettings, _Component);
-  var _super = _createSuper(CustomBarSettings);
-  function CustomBarSettings() {
-    var _this;
-    _classCallCheck(this, CustomBarSettings);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _super.call.apply(_super, [this].concat(args));
-    _this.onSelectGroupbyColumn = function (type, groupbyColumnKey, groupbyDateGranularity, groupbyGeolocationGranularity) {
-      var updated = {
+class CustomBarSettings extends Component {
+  constructor() {
+    super(...arguments);
+    this.onSelectGroupbyColumn = (type, groupbyColumnKey, groupbyDateGranularity, groupbyGeolocationGranularity) => {
+      let updated = {
         x_axis_column_key: groupbyColumnKey,
         x_axis_date_granularity: groupbyDateGranularity,
         x_axis_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 = {
         x_axis_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 = {
         x_axis_geolocation_granularity: geolocationGranularity
       };
-      _this.props.updateStatItem(Object.assign({}, _this.props.statItem, updated));
+      this.props.updateStatItem(Object.assign({}, this.props.statItem, updated));
     };
-    _this.hasYAxisStack = function () {
-      var y_axises = _this.props.statItem.y_axises;
-      return Array.isArray(y_axises) && y_axises.some(function (yAxis) {
-        return yAxis.type === STAT_TYPE.BAR_STACK;
-      });
+    this.hasYAxisStack = () => {
+      const {
+        y_axises
+      } = this.props.statItem;
+      return Array.isArray(y_axises) && y_axises.some(yAxis => yAxis.type === STAT_TYPE.BAR_STACK);
     };
-    return _this;
   }
-  _createClass(CustomBarSettings, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-        getTableById = _this$props.getTableById,
-        getTables = _this$props.getTables,
-        getViews = _this$props.getViews,
-        statItem = _this$props.statItem,
-        labelColorConfigs = _this$props.labelColorConfigs,
-        eventBus = _this$props.eventBus,
-        selectedTable = _this$props.selectedTable,
-        generalColumnsOptions = _this$props.generalColumnsOptions,
-        numericColumnsOptions = _this$props.numericColumnsOptions,
-        dateGranularityOptions = _this$props.dateGranularityOptions,
-        geolocationGranularityOptions = _this$props.geolocationGranularityOptions,
-        renderIncludeEmpty = _this$props.renderIncludeEmpty,
-        settingType = _this$props.settingType;
-      var _ref = statItem || {},
-        table_id = _ref.table_id,
-        view_id = _ref.view_id,
-        x_axis_column_key = _ref.x_axis_column_key,
-        x_axis_date_granularity = _ref.x_axis_date_granularity,
-        x_axis_geolocation_granularity = _ref.x_axis_geolocation_granularity;
-      var hasYAxisStack = this.hasYAxisStack();
-      if (settingType === 'style') {
-        return /*#__PURE__*/React.createElement(BarChartStyle, {
-          showRangeSetting: false,
-          hideDisplayDataSetting: true,
-          enableYAxisCustomTitle: hasYAxisStack,
-          isDisplayEachBlockData: hasYAxisStack,
-          statItem: statItem,
-          labelColorConfigs: labelColorConfigs,
-          eventBus: eventBus,
-          getTableById: getTableById,
-          updateStatItem: this.props.updateStatItem
-        });
-      }
-      return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(BaseSettings, {
+  render() {
+    const {
+      getTableById,
+      getTables,
+      getViews,
+      statItem,
+      labelColorConfigs,
+      eventBus,
+      selectedTable,
+      generalColumnsOptions,
+      numericColumnsOptions,
+      dateGranularityOptions,
+      geolocationGranularityOptions,
+      renderIncludeEmpty,
+      settingType
+    } = this.props;
+    const {
+      table_id,
+      view_id,
+      x_axis_column_key,
+      x_axis_date_granularity,
+      x_axis_geolocation_granularity
+    } = statItem || {};
+    const hasYAxisStack = this.hasYAxisStack();
+    if (settingType === 'style') {
+      return /*#__PURE__*/React.createElement(BarChartStyle, {
+        showRangeSetting: false,
+        hideDisplayDataSetting: true,
+        enableYAxisCustomTitle: hasYAxisStack,
+        isDisplayEachBlockData: hasYAxisStack,
         statItem: statItem,
-        selectedTableId: table_id,
-        selectedViewId: view_id,
+        labelColorConfigs: labelColorConfigs,
+        eventBus: eventBus,
         getTableById: getTableById,
-        getTables: getTables,
-        getViews: getViews,
-        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('X-axis'),
-        groupbyColumnKey: x_axis_column_key,
-        groupbyDateGranularity: x_axis_date_granularity,
-        groupbyGeolocationGranularity: x_axis_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("div", {
-        className: "statistic-chart-parameter-divider"
-      }), /*#__PURE__*/React.createElement("div", {
-        className: "statistic-chart-parameter-item"
-      }, /*#__PURE__*/React.createElement("label", null, intl.get('Y-axis')), /*#__PURE__*/React.createElement("div", {
-        className: "statistic-custom-bar-setting-y-axises"
-      }, /*#__PURE__*/React.createElement(StacksSettings, {
-        statItem: statItem,
-        numericColumnsOptions: numericColumnsOptions,
         updateStatItem: this.props.updateStatItem
-      }))));
+      });
     }
-  }]);
-  return CustomBarSettings;
-}(Component);
+    return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(BaseSettings, {
+      statItem: statItem,
+      selectedTableId: table_id,
+      selectedViewId: view_id,
+      getTableById: getTableById,
+      getTables: getTables,
+      getViews: getViews,
+      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('X-axis'),
+      groupbyColumnKey: x_axis_column_key,
+      groupbyDateGranularity: x_axis_date_granularity,
+      groupbyGeolocationGranularity: x_axis_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("div", {
+      className: "statistic-chart-parameter-divider"
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "statistic-chart-parameter-item"
+    }, /*#__PURE__*/React.createElement("label", null, intl.get('Y-axis')), /*#__PURE__*/React.createElement("div", {
+      className: "statistic-custom-bar-setting-y-axises"
+    }, /*#__PURE__*/React.createElement(StacksSettings, {
+      statItem: statItem,
+      numericColumnsOptions: numericColumnsOptions,
+      updateStatItem: this.props.updateStatItem
+    }))));
+  }
+}
 export default CustomBarSettings;