dtable-statistic 4.2.1 → 4.3.0

package/es/stat-editor/stat-settings/basic-chart-settings/index.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 classnames from 'classnames';
 import intl from 'react-intl-universal';
@@ -19,32 +14,31 @@ import CompletenessSetting from './completeness-chart-settings';
 import PivotTableSettings from './pivot-table-settings';
 import CustomBarSettings from './custom-bar-settings';
 import { BASIC_CHART_COLUMN_LIST, DATE_GRANULARITY, GEOLOCATION_GRANULARITY, STATISTICS_COUNT_SHOW, STAT_TYPE, TIME_COLUMN_LIST } from '../../../constants';
-var DATE_GRANULARITY_LIST = [DATE_GRANULARITY.DAY, DATE_GRANULARITY.WEEK, DATE_GRANULARITY.MONTH, DATE_GRANULARITY.QUARTER, DATE_GRANULARITY.YEAR];
-var GEOLOCATION_GRANULARITY_LIST = [GEOLOCATION_GRANULARITY.PROVINCE, GEOLOCATION_GRANULARITY.CITY, GEOLOCATION_GRANULARITY.DISTRICT];
-var BasicChartSettings = /*#__PURE__*/function (_Component) {
-  _inherits(BasicChartSettings, _Component);
-  var _super = _createSuper(BasicChartSettings);
-  function BasicChartSettings(props) {
-    var _this;
-    _classCallCheck(this, BasicChartSettings);
-    _this = _super.call(this, props);
-    _this.setData = function (selectedTable) {
-      _this.availableColumns = _this.getAvailableColumns(selectedTable.columns);
-      _this.columnsOptions = _this.getColumnsOptions(_this.availableColumns);
-      _this.generalColumnsOptions = _this.getGeneralColumnsOptions(_this.columnsOptions);
-      _this.columnGroupbyColumnsOptions = _this.getColumnGroupbyColumnsOptions(_this.columnsOptions);
-      var numericColumns = _this.getNumericColumns(_this.availableColumns);
-      _this.numericColumnsOptions = _this.getColumnsOptions(numericColumns);
-      _this.pivotTableSummaryColumnOptions = _this.getPivotTableSummaryColumnOptions(_this.availableColumns);
+const DATE_GRANULARITY_LIST = [DATE_GRANULARITY.DAY, DATE_GRANULARITY.WEEK, DATE_GRANULARITY.MONTH, DATE_GRANULARITY.QUARTER, DATE_GRANULARITY.YEAR];
+const GEOLOCATION_GRANULARITY_LIST = [GEOLOCATION_GRANULARITY.PROVINCE, GEOLOCATION_GRANULARITY.CITY, GEOLOCATION_GRANULARITY.DISTRICT];
+class BasicChartSettings extends Component {
+  constructor(props) {
+    super(props);
+    this.setData = selectedTable => {
+      this.availableColumns = this.getAvailableColumns(selectedTable.columns);
+      this.columnsOptions = this.getColumnsOptions(this.availableColumns);
+      this.generalColumnsOptions = this.getGeneralColumnsOptions(this.columnsOptions);
+      this.columnGroupbyColumnsOptions = this.getColumnGroupbyColumnsOptions(this.columnsOptions);
+      const numericColumns = this.getNumericColumns(this.availableColumns);
+      this.numericColumnsOptions = this.getColumnsOptions(numericColumns);
+      this.pivotTableSummaryColumnOptions = this.getPivotTableSummaryColumnOptions(this.availableColumns);
     };
-    _this.renderIncludeEmpty = function () {
-      var statItem = _this.props.statItem;
-      var _ref = statItem || {},
-        type = _ref.type,
-        groupby_include_empty_cells = _ref.groupby_include_empty_cells,
-        x_axis_include_empty = _ref.x_axis_include_empty,
-        vertical_axis_include_empty = _ref.vertical_axis_include_empty;
-      var includeEmptyCells;
+    this.renderIncludeEmpty = () => {
+      const {
+        statItem
+      } = this.props;
+      const {
+        type,
+        groupby_include_empty_cells,
+        x_axis_include_empty,
+        vertical_axis_include_empty
+      } = statItem || {};
+      let includeEmptyCells;
       if (type === STAT_TYPE.PIE || type === STAT_TYPE.RING || type === STAT_TYPE.TREEMAP || type === STAT_TYPE.PIVOT_TABLE) {
         includeEmptyCells = groupby_include_empty_cells;
       } else if (type === STAT_TYPE.HORIZONTAL_BAR || type === STAT_TYPE.HORIZONTAL_GROUP_BAR || type === STAT_TYPE.STACKED_HORIZONTAL_BAR) {
@@ -56,31 +50,29 @@ var BasicChartSettings = /*#__PURE__*/function (_Component) {
         className: "mt-1"
       }, /*#__PURE__*/React.createElement(ToggleSetting, {
         isChecked: includeEmptyCells || false,
-        handleToggleChange: _this.onToggleIncludeEmpty,
+        handleToggleChange: this.onToggleIncludeEmpty,
         label: intl.get('Including_empty_cell')
       }));
     };
-    _this.getAvailableColumns = function (columns) {
+    this.getAvailableColumns = columns => {
       if (!columns || !Array.isArray(columns)) return [];
-      return columns.filter(function (column) {
-        return BASIC_CHART_COLUMN_LIST.includes(column.type);
-      });
+      return columns.filter(column => BASIC_CHART_COLUMN_LIST.includes(column.type));
     };
-    _this.getPivotTableSummaryColumnOptions = function (columns) {
-      var summaryColumns = columns.filter(function (column) {
+    this.getPivotTableSummaryColumnOptions = columns => {
+      const summaryColumns = columns.filter(column => {
         return column && (isNumericColumn(column) || TIME_COLUMN_LIST.includes(column.type));
       });
-      return _this.getColumnsOptions(summaryColumns);
+      return this.getColumnsOptions(summaryColumns);
     };
-    _this.getColumnsOptions = function (columns) {
+    this.getColumnsOptions = columns => {
       if (!Array.isArray(columns)) return [];
-      return columns.map(function (column) {
-        var option = COLUMN_OPTIONS.find(function (o) {
-          return o.type === column.type;
-        }) || {};
-        var name = column.name,
-          key = column.key,
-          type = column.type;
+      return columns.map(column => {
+        let option = COLUMN_OPTIONS.find(o => o.type === column.type) || {};
+        const {
+          name,
+          key,
+          type
+        } = column;
         return {
           label: /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("span", {
             className: "header-icon"
@@ -90,16 +82,18 @@ var BasicChartSettings = /*#__PURE__*/function (_Component) {
             className: "select-option-name"
           }, name)),
           value: {
-            name: name,
-            key: key,
-            type: type
+            name,
+            key,
+            type
           }
         };
       });
     };
-    _this.getGeneralColumnsOptions = function (columnsOptions) {
-      var statItem = _this.props.statItem;
-      var list = _toConsumableArray(columnsOptions);
+    this.getGeneralColumnsOptions = columnsOptions => {
+      const {
+        statItem
+      } = this.props;
+      const list = [...columnsOptions];
       if (statItem.type === STAT_TYPE.PIVOT_TABLE) {
         list.unshift({
           label: /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("span", {
@@ -117,29 +111,23 @@ var BasicChartSettings = /*#__PURE__*/function (_Component) {
       }
       return list;
     };
-    _this.getColumnGroupbyColumnsOptions = function (columnsOptions) {
-      var statItem = _this.props.statItem || {};
-      var availableOptions = columnsOptions.filter(function (o) {
-        return o.value.key !== statItem.x_axis_column_key;
-      });
+    this.getColumnGroupbyColumnsOptions = columnsOptions => {
+      let statItem = this.props.statItem || {};
+      let availableOptions = columnsOptions.filter(o => o.value.key !== statItem.x_axis_column_key);
       return availableOptions;
     };
-    _this.getNumericColumns = function (columns) {
+    this.getNumericColumns = columns => {
       if (!columns) return [];
-      return columns.filter(function (column) {
-        return column && isNumericColumn(column);
-      });
+      return columns.filter(column => column && isNumericColumn(column));
     };
-    _this.getSelectedColumnOption = function (key, columnsOptions) {
+    this.getSelectedColumnOption = (key, columnsOptions) => {
       if (!key || !Array.isArray(columnsOptions) || columnsOptions.length === 0) {
         return null;
       }
-      return columnsOptions.find(function (o) {
-        return o.value.key === key;
-      }) || columnsOptions[0];
+      return columnsOptions.find(o => o.value.key === key) || columnsOptions[0];
     };
-    _this.getGranularityOptions = function (options) {
-      return options.map(function (g) {
+    this.getGranularityOptions = options => {
+      return options.map(g => {
         return {
           value: g,
           label: /*#__PURE__*/React.createElement("span", {
@@ -148,18 +136,20 @@ var BasicChartSettings = /*#__PURE__*/function (_Component) {
         };
       });
     };
-    _this.getSettingsByType = function () {
-      var _this$props = _this.props,
-        statItem = _this$props.statItem,
-        labelColorConfigs = _this$props.labelColorConfigs,
-        eventBus = _this$props.eventBus,
-        getTableById = _this$props.getTableById,
-        getTables = _this$props.getTables,
-        getViews = _this$props.getViews;
-      var _this$state = _this.state,
-        selectedTable = _this$state.selectedTable,
-        settingType = _this$state.settingType;
-      var type = statItem.type;
+    this.getSettingsByType = () => {
+      const {
+        statItem,
+        labelColorConfigs,
+        eventBus,
+        getTableById,
+        getTables,
+        getViews
+      } = this.props;
+      const {
+        selectedTable,
+        settingType
+      } = this.state;
+      const type = statItem.type;
       switch (statItem.type) {
         case STAT_TYPE.BAR:
         case STAT_TYPE.LINE:
@@ -174,15 +164,15 @@ var BasicChartSettings = /*#__PURE__*/function (_Component) {
               getViews: getViews,
               getTableById: getTableById,
               selectedTable: selectedTable,
-              generalColumnsOptions: _this.generalColumnsOptions,
-              columnGroupbyColumnsOptions: _this.columnGroupbyColumnsOptions,
-              numericColumnsOptions: _this.numericColumnsOptions,
-              dateGranularityOptions: _this.dateGranularityOptions,
-              geolocationGranularityOptions: _this.geolocationGranularityOptions,
-              getSelectedColumnOption: _this.getSelectedColumnOption,
-              getConvertedChart: _this.props.getConvertedChart,
-              updateStatItem: _this.props.updateStatItem,
-              renderIncludeEmpty: _this.renderIncludeEmpty
+              generalColumnsOptions: this.generalColumnsOptions,
+              columnGroupbyColumnsOptions: this.columnGroupbyColumnsOptions,
+              numericColumnsOptions: this.numericColumnsOptions,
+              dateGranularityOptions: this.dateGranularityOptions,
+              geolocationGranularityOptions: this.geolocationGranularityOptions,
+              getSelectedColumnOption: this.getSelectedColumnOption,
+              getConvertedChart: this.props.getConvertedChart,
+              updateStatItem: this.props.updateStatItem,
+              renderIncludeEmpty: this.renderIncludeEmpty
             });
           }
         case STAT_TYPE.COMPARE_BAR:
@@ -196,12 +186,12 @@ var BasicChartSettings = /*#__PURE__*/function (_Component) {
               getViews: getViews,
               getTableById: getTableById,
               selectedTable: selectedTable,
-              generalColumnsOptions: _this.generalColumnsOptions,
-              numericColumnsOptions: _this.numericColumnsOptions,
-              dateGranularityOptions: _this.dateGranularityOptions,
-              getSelectedColumnOption: _this.getSelectedColumnOption,
-              getConvertedChart: _this.props.getConvertedChart,
-              updateStatItem: _this.props.updateStatItem
+              generalColumnsOptions: this.generalColumnsOptions,
+              numericColumnsOptions: this.numericColumnsOptions,
+              dateGranularityOptions: this.dateGranularityOptions,
+              getSelectedColumnOption: this.getSelectedColumnOption,
+              getConvertedChart: this.props.getConvertedChart,
+              updateStatItem: this.props.updateStatItem
             });
           }
         case STAT_TYPE.BAR_GROUP:
@@ -219,15 +209,15 @@ var BasicChartSettings = /*#__PURE__*/function (_Component) {
               getViews: getViews,
               getTableById: getTableById,
               selectedTable: selectedTable,
-              generalColumnsOptions: _this.generalColumnsOptions,
-              columnGroupbyColumnsOptions: _this.columnGroupbyColumnsOptions,
-              numericColumnsOptions: _this.numericColumnsOptions,
-              dateGranularityOptions: _this.dateGranularityOptions,
-              geolocationGranularityOptions: _this.geolocationGranularityOptions,
-              getSelectedColumnOption: _this.getSelectedColumnOption,
-              getConvertedChart: _this.props.getConvertedChart,
-              updateStatItem: _this.props.updateStatItem,
-              renderIncludeEmpty: _this.renderIncludeEmpty
+              generalColumnsOptions: this.generalColumnsOptions,
+              columnGroupbyColumnsOptions: this.columnGroupbyColumnsOptions,
+              numericColumnsOptions: this.numericColumnsOptions,
+              dateGranularityOptions: this.dateGranularityOptions,
+              geolocationGranularityOptions: this.geolocationGranularityOptions,
+              getSelectedColumnOption: this.getSelectedColumnOption,
+              getConvertedChart: this.props.getConvertedChart,
+              updateStatItem: this.props.updateStatItem,
+              renderIncludeEmpty: this.renderIncludeEmpty
             });
           }
         case STAT_TYPE.CUSTOM_BAR:
@@ -242,14 +232,14 @@ var BasicChartSettings = /*#__PURE__*/function (_Component) {
               getViews: getViews,
               getTableById: getTableById,
               selectedTable: selectedTable,
-              generalColumnsOptions: _this.generalColumnsOptions,
-              numericColumnsOptions: _this.numericColumnsOptions,
-              dateGranularityOptions: _this.dateGranularityOptions,
-              geolocationGranularityOptions: _this.geolocationGranularityOptions,
-              getSelectedColumnOption: _this.getSelectedColumnOption,
-              getConvertedChart: _this.props.getConvertedChart,
-              updateStatItem: _this.props.updateStatItem,
-              renderIncludeEmpty: _this.renderIncludeEmpty
+              generalColumnsOptions: this.generalColumnsOptions,
+              numericColumnsOptions: this.numericColumnsOptions,
+              dateGranularityOptions: this.dateGranularityOptions,
+              geolocationGranularityOptions: this.geolocationGranularityOptions,
+              getSelectedColumnOption: this.getSelectedColumnOption,
+              getConvertedChart: this.props.getConvertedChart,
+              updateStatItem: this.props.updateStatItem,
+              renderIncludeEmpty: this.renderIncludeEmpty
             });
           }
         case STAT_TYPE.PIE:
@@ -265,14 +255,14 @@ var BasicChartSettings = /*#__PURE__*/function (_Component) {
               getViews: getViews,
               getTableById: getTableById,
               selectedTable: selectedTable,
-              getConvertedChart: _this.props.getConvertedChart,
-              columnsOptions: _this.generalColumnsOptions,
-              numericColumnsOptions: _this.numericColumnsOptions,
-              dateGranularityOptions: _this.dateGranularityOptions,
-              geolocationGranularityOptions: _this.geolocationGranularityOptions,
-              getSelectedColumnOption: _this.getSelectedColumnOption,
-              updateStatisticsSettings: _this.props.updateStatItem,
-              renderIncludeEmpty: _this.renderIncludeEmpty
+              getConvertedChart: this.props.getConvertedChart,
+              columnsOptions: this.generalColumnsOptions,
+              numericColumnsOptions: this.numericColumnsOptions,
+              dateGranularityOptions: this.dateGranularityOptions,
+              geolocationGranularityOptions: this.geolocationGranularityOptions,
+              getSelectedColumnOption: this.getSelectedColumnOption,
+              updateStatisticsSettings: this.props.updateStatItem,
+              renderIncludeEmpty: this.renderIncludeEmpty
             });
           }
         case STAT_TYPE.SCATTER:
@@ -285,12 +275,12 @@ var BasicChartSettings = /*#__PURE__*/function (_Component) {
               getTables: getTables,
               getViews: getViews,
               getTableById: getTableById,
-              getConvertedChart: _this.props.getConvertedChart,
-              numericColumnsOptions: _this.numericColumnsOptions,
-              generalColumnsOptions: _this.generalColumnsOptions,
-              columnGroupbyColumnsOptions: _this.columnGroupbyColumnsOptions,
-              getSelectedColumnOption: _this.getSelectedColumnOption,
-              updateStatItem: _this.props.updateStatItem
+              getConvertedChart: this.props.getConvertedChart,
+              numericColumnsOptions: this.numericColumnsOptions,
+              generalColumnsOptions: this.generalColumnsOptions,
+              columnGroupbyColumnsOptions: this.columnGroupbyColumnsOptions,
+              getSelectedColumnOption: this.getSelectedColumnOption,
+              updateStatItem: this.props.updateStatItem
             });
           }
         case STAT_TYPE.HORIZONTAL_BAR:
@@ -304,15 +294,15 @@ var BasicChartSettings = /*#__PURE__*/function (_Component) {
               getViews: getViews,
               getTableById: getTableById,
               selectedTable: selectedTable,
-              getConvertedChart: _this.props.getConvertedChart,
-              generalColumnsOptions: _this.generalColumnsOptions,
-              columnGroupbyColumnsOptions: _this.columnGroupbyColumnsOptions,
-              numericColumnsOptions: _this.numericColumnsOptions,
-              dateGranularityOptions: _this.dateGranularityOptions,
-              geolocationGranularityOptions: _this.geolocationGranularityOptions,
-              getSelectedColumnOption: _this.getSelectedColumnOption,
-              updateStatItem: _this.props.updateStatItem,
-              renderIncludeEmpty: _this.renderIncludeEmpty
+              getConvertedChart: this.props.getConvertedChart,
+              generalColumnsOptions: this.generalColumnsOptions,
+              columnGroupbyColumnsOptions: this.columnGroupbyColumnsOptions,
+              numericColumnsOptions: this.numericColumnsOptions,
+              dateGranularityOptions: this.dateGranularityOptions,
+              geolocationGranularityOptions: this.geolocationGranularityOptions,
+              getSelectedColumnOption: this.getSelectedColumnOption,
+              updateStatItem: this.props.updateStatItem,
+              renderIncludeEmpty: this.renderIncludeEmpty
             });
           }
         case STAT_TYPE.HORIZONTAL_GROUP_BAR:
@@ -327,15 +317,15 @@ var BasicChartSettings = /*#__PURE__*/function (_Component) {
               getViews: getViews,
               getTableById: getTableById,
               selectedTable: selectedTable,
-              generalColumnsOptions: _this.generalColumnsOptions,
-              columnGroupbyColumnsOptions: _this.columnGroupbyColumnsOptions,
-              numericColumnsOptions: _this.numericColumnsOptions,
-              dateGranularityOptions: _this.dateGranularityOptions,
-              geolocationGranularityOptions: _this.geolocationGranularityOptions,
-              getSelectedColumnOption: _this.getSelectedColumnOption,
-              updateStatItem: _this.props.updateStatItem,
-              getConvertedChart: _this.props.getConvertedChart,
-              renderIncludeEmpty: _this.renderIncludeEmpty
+              generalColumnsOptions: this.generalColumnsOptions,
+              columnGroupbyColumnsOptions: this.columnGroupbyColumnsOptions,
+              numericColumnsOptions: this.numericColumnsOptions,
+              dateGranularityOptions: this.dateGranularityOptions,
+              geolocationGranularityOptions: this.geolocationGranularityOptions,
+              getSelectedColumnOption: this.getSelectedColumnOption,
+              updateStatItem: this.props.updateStatItem,
+              getConvertedChart: this.props.getConvertedChart,
+              renderIncludeEmpty: this.renderIncludeEmpty
             });
           }
         case STAT_TYPE.COMPLETENESS_CHART:
@@ -349,15 +339,15 @@ var BasicChartSettings = /*#__PURE__*/function (_Component) {
               getTables: getTables,
               getViews: getViews,
               getTableById: getTableById,
-              getConvertedChart: _this.props.getConvertedChart,
+              getConvertedChart: this.props.getConvertedChart,
               selectedTable: selectedTable,
-              generalColumnsOptions: _this.generalColumnsOptions,
-              numericColumnsOptions: _this.numericColumnsOptions,
-              updateStatItem: _this.props.updateStatItem,
-              getSelectedColumnOption: _this.getSelectedColumnOption,
-              columnGroupbyColumnsOptions: _this.columnGroupbyColumnsOptions,
-              geolocationGranularityOptions: _this.geolocationGranularityOptions,
-              dateGranularityOptions: _this.dateGranularityOptions
+              generalColumnsOptions: this.generalColumnsOptions,
+              numericColumnsOptions: this.numericColumnsOptions,
+              updateStatItem: this.props.updateStatItem,
+              getSelectedColumnOption: this.getSelectedColumnOption,
+              columnGroupbyColumnsOptions: this.columnGroupbyColumnsOptions,
+              geolocationGranularityOptions: this.geolocationGranularityOptions,
+              dateGranularityOptions: this.dateGranularityOptions
             });
           }
         case STAT_TYPE.PIVOT_TABLE:
@@ -370,16 +360,16 @@ var BasicChartSettings = /*#__PURE__*/function (_Component) {
               getTables: getTables,
               getViews: getViews,
               getTableById: getTableById,
-              getConvertedChart: _this.props.getConvertedChart,
+              getConvertedChart: this.props.getConvertedChart,
               selectedTable: selectedTable,
-              generalColumnsOptions: _this.generalColumnsOptions,
-              pivotTableSummaryColumnOptions: _this.pivotTableSummaryColumnOptions,
-              updateStatItem: _this.props.updateStatItem,
-              getSelectedColumnOption: _this.getSelectedColumnOption,
-              columnGroupbyColumnsOptions: _this.columnGroupbyColumnsOptions,
-              geolocationGranularityOptions: _this.geolocationGranularityOptions,
-              dateGranularityOptions: _this.dateGranularityOptions,
-              renderIncludeEmpty: _this.renderIncludeEmpty
+              generalColumnsOptions: this.generalColumnsOptions,
+              pivotTableSummaryColumnOptions: this.pivotTableSummaryColumnOptions,
+              updateStatItem: this.props.updateStatItem,
+              getSelectedColumnOption: this.getSelectedColumnOption,
+              columnGroupbyColumnsOptions: this.columnGroupbyColumnsOptions,
+              geolocationGranularityOptions: this.geolocationGranularityOptions,
+              dateGranularityOptions: this.dateGranularityOptions,
+              renderIncludeEmpty: this.renderIncludeEmpty
             });
           }
         default:
@@ -388,14 +378,17 @@ var BasicChartSettings = /*#__PURE__*/function (_Component) {
           }
       }
     };
-    _this.onToggleIncludeEmpty = function () {
-      var statItem = _this.props.statItem;
-      var _ref2 = statItem || {},
-        type = _ref2.type,
-        groupby_include_empty_cells = _ref2.groupby_include_empty_cells,
-        x_axis_include_empty = _ref2.x_axis_include_empty,
-        vertical_axis_include_empty = _ref2.vertical_axis_include_empty;
-      var updated;
+    this.onToggleIncludeEmpty = () => {
+      let {
+        statItem
+      } = this.props;
+      let {
+        type,
+        groupby_include_empty_cells,
+        x_axis_include_empty,
+        vertical_axis_include_empty
+      } = statItem || {};
+      let updated;
       if (type === STAT_TYPE.PIE || type === STAT_TYPE.RING || type === STAT_TYPE.TREEMAP || type === STAT_TYPE.PIVOT_TABLE) {
         updated = {
           groupby_include_empty_cells: !groupby_include_empty_cells
@@ -409,68 +402,64 @@ var BasicChartSettings = /*#__PURE__*/function (_Component) {
           x_axis_include_empty: !x_axis_include_empty
         };
       }
-      _this.props.updateStatItem(Object.assign({}, statItem, updated));
+      this.props.updateStatItem(Object.assign({}, statItem, updated));
     };
-    _this.selectEditType = function (type) {
-      _this.setState({
+    this.selectEditType = type => {
+      this.setState({
         settingType: type
       });
     };
-    var _getTableById = props.getTableById,
-      _statItem = props.statItem;
-    var _selectedTable = _getTableById(_statItem.table_id);
-    _this.state = {
+    const {
+      getTableById: _getTableById,
+      statItem: _statItem
+    } = props;
+    let _selectedTable = _getTableById(_statItem.table_id);
+    this.state = {
       selectedTable: _selectedTable,
       settingType: 'data'
     };
-    _this.setData(_selectedTable);
-    _this.dateGranularityOptions = _this.getGranularityOptions(DATE_GRANULARITY_LIST);
-    _this.geolocationGranularityOptions = _this.getGranularityOptions(GEOLOCATION_GRANULARITY_LIST);
-    return _this;
+    this.setData(_selectedTable);
+    this.dateGranularityOptions = this.getGranularityOptions(DATE_GRANULARITY_LIST);
+    this.geolocationGranularityOptions = this.getGranularityOptions(GEOLOCATION_GRANULARITY_LIST);
   }
-  _createClass(BasicChartSettings, [{
-    key: "UNSAFE_componentWillReceiveProps",
-    value: function UNSAFE_componentWillReceiveProps(nextProps) {
-      var getTableById = this.props.getTableById;
-      if (nextProps.statItem.table_id !== this.props.statItem.table_id) {
-        var statItem = nextProps.statItem;
-        var selectedTable = getTableById(statItem.table_id);
-        this.setState({
-          selectedTable: selectedTable
-        });
-        this.setData(selectedTable);
-      }
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-      var settingType = this.state.settingType;
-      return /*#__PURE__*/React.createElement("div", {
-        className: "statistic-chart-settings"
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "statistic-chart-settings-type"
-      }, /*#__PURE__*/React.createElement("div", {
-        onClick: function onClick() {
-          return _this2.selectEditType('data');
-        },
-        className: classnames('statistic-type-item', {
-          'selected-statistic-type-item': settingType === 'data'
-        })
-      }, intl.get('Data_settings')), /*#__PURE__*/React.createElement("div", {
-        onClick: function onClick() {
-          return _this2.selectEditType('style');
-        },
-        className: classnames('statistic-type-item', {
-          'selected-statistic-type-item': settingType === 'style'
-        })
-      }, intl.get('Style_settings'))), /*#__PURE__*/React.createElement("div", {
-        className: "statistic-chart-settings-container"
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "statistic-chart-settings-parameter-list pt-4"
-      }, this.getSettingsByType())));
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    const {
+      getTableById
+    } = this.props;
+    if (nextProps.statItem.table_id !== this.props.statItem.table_id) {
+      const {
+        statItem
+      } = nextProps;
+      const selectedTable = getTableById(statItem.table_id);
+      this.setState({
+        selectedTable
+      });
+      this.setData(selectedTable);
     }
-  }]);
-  return BasicChartSettings;
-}(Component);
+  }
+  render() {
+    const {
+      settingType
+    } = this.state;
+    return /*#__PURE__*/React.createElement("div", {
+      className: "statistic-chart-settings"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "statistic-chart-settings-type"
+    }, /*#__PURE__*/React.createElement("div", {
+      onClick: () => this.selectEditType('data'),
+      className: classnames('statistic-type-item', {
+        'selected-statistic-type-item': settingType === 'data'
+      })
+    }, intl.get('Data_settings')), /*#__PURE__*/React.createElement("div", {
+      onClick: () => this.selectEditType('style'),
+      className: classnames('statistic-type-item', {
+        'selected-statistic-type-item': settingType === 'style'
+      })
+    }, intl.get('Style_settings'))), /*#__PURE__*/React.createElement("div", {
+      className: "statistic-chart-settings-container"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "statistic-chart-settings-parameter-list pt-4"
+    }, this.getSettingsByType())));
+  }
+}
 export default BasicChartSettings;