dtable-statistic 4.2.2 → 4.3.1

package/es/stat-editor/stat-settings/basic-chart-settings/style-setting/bar-chart-style-setting.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';
@@ -13,103 +9,114 @@ import ColorUseTypeSelector from '../../color-setting/color-use-type-selector';
 import LabelFontSizeEditor from './label-font-size-editor';
 import CustomTitleSetting from '../../public-setting/custom-title-setting';
 import { LABEL_COLORS, LABEL_CONFIG_CHANGED, PIE_COLOR_OPTIONS, PIE_COlOR_OPTIONS_MAP, STAT_TYPE } from '../../../../constants';
-var BarChartStyle = /*#__PURE__*/function (_Component) {
-  _inherits(BarChartStyle, _Component);
-  var _super = _createSuper(BarChartStyle);
-  function BarChartStyle() {
-    var _this;
-    _classCallCheck(this, BarChartStyle);
-    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.onToggleYAxisAutoRange = function () {
-      var statItem = _this.props.statItem;
-      var _ref = statItem || {},
-        y_axis_auto_range = _ref.y_axis_auto_range;
-      var updated = {
+class BarChartStyle extends Component {
+  constructor() {
+    super(...arguments);
+    this.onToggleYAxisAutoRange = () => {
+      const {
+        statItem
+      } = this.props;
+      const {
+        y_axis_auto_range
+      } = statItem || {};
+      const updated = {
         y_axis_auto_range: y_axis_auto_range == undefined ? false : !y_axis_auto_range
       };
-      _this.props.updateStatItem(Object.assign({}, statItem, updated));
+      this.props.updateStatItem(Object.assign({}, statItem, updated));
     };
-    _this.onYAxisMinChange = function (min) {
-      var newMin = parseInt(min);
+    this.onYAxisMinChange = min => {
+      const newMin = parseInt(min);
       if (!Number.isNaN(newMin)) {
-        var statItem = _this.props.statItem;
-        var updated = {
+        const {
+          statItem
+        } = this.props;
+        const updated = {
           y_axis_min: newMin
         };
-        _this.props.updateStatItem(Object.assign({}, statItem, updated));
+        this.props.updateStatItem(Object.assign({}, statItem, updated));
       }
     };
-    _this.onYAxisMaxChange = function (max) {
-      var newMax = parseInt(max);
+    this.onYAxisMaxChange = max => {
+      const newMax = parseInt(max);
       if (!Number.isNaN(newMax)) {
-        var statItem = _this.props.statItem;
-        var updated = {
+        const {
+          statItem
+        } = this.props;
+        const updated = {
           y_axis_max: newMax
         };
-        _this.props.updateStatItem(Object.assign({}, statItem, updated));
+        this.props.updateStatItem(Object.assign({}, statItem, updated));
       }
     };
-    _this.renderAutoRange = function () {
-      var statItem = _this.props.statItem;
-      var y_axis_auto_range = statItem.y_axis_auto_range,
-        y_axis_min = statItem.y_axis_min,
-        y_axis_max = statItem.y_axis_max;
-      var checked = y_axis_auto_range == undefined ? true : y_axis_auto_range;
+    this.renderAutoRange = () => {
+      const {
+        statItem
+      } = this.props;
+      const {
+        y_axis_auto_range,
+        y_axis_min,
+        y_axis_max
+      } = statItem;
+      const checked = y_axis_auto_range == undefined ? true : y_axis_auto_range;
       return /*#__PURE__*/React.createElement("div", {
         className: "mt-1"
       }, /*#__PURE__*/React.createElement(ToggleSetting, {
         isChecked: checked,
-        handleToggleChange: _this.onToggleYAxisAutoRange,
+        handleToggleChange: this.onToggleYAxisAutoRange,
         label: intl.get('Auto_range')
       }), !checked && /*#__PURE__*/React.createElement(MinMaxSetting, {
         min: y_axis_min,
         max: y_axis_max,
-        onMinChange: _this.onYAxisMinChange,
-        onMaxChange: _this.onYAxisMaxChange
+        onMinChange: this.onYAxisMinChange,
+        onMaxChange: this.onYAxisMaxChange
       }));
     };
-    _this.onToggleDisplayData = function () {
-      var statItem = _this.props.statItem;
-      var _ref2 = statItem || {},
-        display_data = _ref2.display_data;
-      var updated = {
+    this.onToggleDisplayData = () => {
+      let {
+        statItem
+      } = this.props;
+      let {
+        display_data
+      } = statItem || {};
+      const updated = {
         display_data: !display_data
       };
-      _this.props.updateStatItem(Object.assign({}, statItem, updated));
+      this.props.updateStatItem(Object.assign({}, statItem, updated));
     };
-    _this.onToggleXAxisLabel = function () {
-      var _this$props = _this.props,
-        statItem = _this$props.statItem,
-        eventBus = _this$props.eventBus;
-      var _ref3 = statItem || {},
-        show_x_axis_label = _ref3.show_x_axis_label;
-      var updated = {
+    this.onToggleXAxisLabel = () => {
+      let {
+        statItem,
+        eventBus
+      } = this.props;
+      let {
+        show_x_axis_label
+      } = statItem || {};
+      let updated = {
         show_x_axis_label: !show_x_axis_label,
         x_axis_label_position: !show_x_axis_label ? 'center' : null
       };
-      var newStatItem = Object.assign({}, statItem, updated);
+      const newStatItem = Object.assign({}, statItem, updated);
       eventBus.dispatch(LABEL_CONFIG_CHANGED, newStatItem);
-      _this.props.updateStatItem(newStatItem);
+      this.props.updateStatItem(newStatItem);
     };
-    _this.onToggleYAxisLabel = function () {
-      var _this$props2 = _this.props,
-        statItem = _this$props2.statItem,
-        eventBus = _this$props2.eventBus;
-      var _ref4 = statItem || {},
-        show_y_axis_label = _ref4.show_y_axis_label;
-      var updated = {
+    this.onToggleYAxisLabel = () => {
+      let {
+        statItem,
+        eventBus
+      } = this.props;
+      let {
+        show_y_axis_label
+      } = statItem || {};
+      let updated = {
         show_y_axis_label: !show_y_axis_label,
         y_axis_label_position: !show_y_axis_label ? 'center' : null
       };
-      var newStatItem = Object.assign({}, statItem, updated);
+      const newStatItem = Object.assign({}, statItem, updated);
       eventBus.dispatch(LABEL_CONFIG_CHANGED, newStatItem);
-      _this.props.updateStatItem(newStatItem);
+      this.props.updateStatItem(newStatItem);
     };
-    _this.onSelectAxisLabelPosition = function (type, option) {
-      var updated;
+    this.onSelectAxisLabelPosition = (type, option) => {
+      let updated;
       if (type === 'x') {
         updated = {
           x_axis_label_position: option.value
@@ -119,63 +126,77 @@ var BarChartStyle = /*#__PURE__*/function (_Component) {
           y_axis_label_position: option.value
         };
       }
-      var _this$props3 = _this.props,
-        statItem = _this$props3.statItem,
-        eventBus = _this$props3.eventBus;
-      var newStatItem = Object.assign({}, statItem, updated);
+      const {
+        statItem,
+        eventBus
+      } = this.props;
+      const newStatItem = Object.assign({}, statItem, updated);
       eventBus.dispatch(LABEL_CONFIG_CHANGED, newStatItem);
-      _this.props.updateStatItem(newStatItem);
+      this.props.updateStatItem(newStatItem);
     };
-    _this.onToggleDisplayEachBlockData = function () {
-      var statItem = _this.props.statItem;
-      var _ref5 = statItem || {},
-        display_each_block_data = _ref5.display_each_block_data;
-      var updated = {
+    this.onToggleDisplayEachBlockData = () => {
+      const {
+        statItem
+      } = this.props;
+      const {
+        display_each_block_data
+      } = statItem || {};
+      const updated = {
         display_each_block_data: !display_each_block_data
       };
-      _this.props.updateStatItem(Object.assign({}, statItem, updated));
+      this.props.updateStatItem(Object.assign({}, statItem, updated));
     };
-    _this.onToggleShowLabel = function () {
-      var statItem = _this.props.statItem;
-      var _ref6 = statItem || {},
-        y_axis_show_label = _ref6.y_axis_show_label,
-        y_axis_label_color = _ref6.y_axis_label_color;
+    this.onToggleShowLabel = () => {
+      let {
+        statItem
+      } = this.props;
+      let {
+        y_axis_show_label,
+        y_axis_label_color
+      } = statItem || {};
       y_axis_show_label = !y_axis_show_label;
       if (y_axis_show_label) {
         y_axis_label_color = LABEL_COLORS[0];
       } else {
         y_axis_label_color = null;
       }
-      _this.props.updateStatItem(Object.assign({}, statItem, {
-        y_axis_show_label: y_axis_show_label,
-        y_axis_label_color: y_axis_label_color
+      this.props.updateStatItem(Object.assign({}, statItem, {
+        y_axis_show_label,
+        y_axis_label_color
       }));
     };
-    _this.onChangeLabelFontSize = function (label_font_size) {
-      var statItem = _this.props.statItem;
-      _this.props.updateStatItem(Object.assign({}, statItem, {
-        label_font_size: label_font_size
+    this.onChangeLabelFontSize = label_font_size => {
+      const {
+        statItem
+      } = this.props;
+      this.props.updateStatItem(Object.assign({}, statItem, {
+        label_font_size
       }));
     };
-    _this.enableUseSingleSelectColumnColorSetting = function () {
-      var _this$props4 = _this.props,
-        getTableById = _this$props4.getTableById,
-        statItem = _this$props4.statItem;
-      var table_id = statItem.table_id,
-        column_groupby_column_key = statItem.column_groupby_column_key;
+    this.enableUseSingleSelectColumnColorSetting = () => {
+      const {
+        getTableById,
+        statItem
+      } = this.props;
+      const {
+        table_id,
+        column_groupby_column_key
+      } = statItem;
       if (!column_groupby_column_key) {
         return false;
       }
-      var table = getTableById(table_id);
-      var groupByColumn = TableUtils.getTableColumnByKey(table, column_groupby_column_key);
-      var columnType = groupByColumn.type;
+      const table = getTableById(table_id);
+      const groupByColumn = TableUtils.getTableColumnByKey(table, column_groupby_column_key);
+      const {
+        type: columnType
+      } = groupByColumn;
       if (columnType == CellType.SINGLE_SELECT) {
         return true;
       }
       return false;
     };
-    _this.getColorOptions = function () {
-      var options = PIE_COLOR_OPTIONS.map(function (item, index) {
+    this.getColorOptions = () => {
+      const options = PIE_COLOR_OPTIONS.map((item, index) => {
         return {
           value: item,
           label: /*#__PURE__*/React.createElement("span", {
@@ -185,89 +206,87 @@ var BarChartStyle = /*#__PURE__*/function (_Component) {
       });
       return options;
     };
-    _this.updateTitleName = function (setting) {
-      var statItem = _this.props.statItem;
-      _this.props.updateStatItem(Object.assign({}, statItem, setting));
+    this.updateTitleName = setting => {
+      const {
+        statItem
+      } = this.props;
+      this.props.updateStatItem(Object.assign({}, statItem, setting));
     };
-    return _this;
   }
-  _createClass(BarChartStyle, [{
-    key: "render",
-    value: function render() {
-      var _this$props5 = this.props,
-        statItem = _this$props5.statItem,
-        labelColorConfigs = _this$props5.labelColorConfigs,
-        hideDisplayDataSetting = _this$props5.hideDisplayDataSetting,
-        _this$props5$showRang = _this$props5.showRangeSetting,
-        showRangeSetting = _this$props5$showRang === void 0 ? true : _this$props5$showRang;
-      var chartType = statItem.type,
-        show_x_axis_label = statItem.show_x_axis_label,
-        show_y_axis_label = statItem.show_y_axis_label,
-        display_data = statItem.display_data,
-        label_font_size = statItem.label_font_size,
-        display_each_block_data = statItem.display_each_block_data,
-        _statItem$title_name = statItem.title_name,
-        title_name = _statItem$title_name === void 0 ? '' : _statItem$title_name;
-      return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
-        className: "statistic-chart-parameter-item"
-      }, /*#__PURE__*/React.createElement("label", null, intl.get('X-axis')), /*#__PURE__*/React.createElement(ToggleSetting, {
-        isChecked: show_x_axis_label || false,
-        handleToggleChange: this.onToggleXAxisLabel,
-        label: intl.get('Display_title')
-      }), show_x_axis_label && /*#__PURE__*/React.createElement(AxisLabelPosition, {
-        statItem: statItem,
-        axisType: 'x',
-        onSelectAxisLabelPosition: this.onSelectAxisLabelPosition
-      })), /*#__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(ToggleSetting, {
-        isChecked: show_y_axis_label || false,
-        handleToggleChange: this.onToggleYAxisLabel,
-        label: intl.get('Display_title')
-      }), show_y_axis_label && (this.props.enableYAxisCustomTitle || chartType == STAT_TYPE.BAR_STACK) && /*#__PURE__*/React.createElement(CustomTitleSetting, {
-        titleName: title_name || '',
-        updateTitleName: this.updateTitleName
-      }), show_y_axis_label && /*#__PURE__*/React.createElement(AxisLabelPosition, {
-        statItem: statItem,
-        axisType: 'y',
-        onSelectAxisLabelPosition: this.onSelectAxisLabelPosition
-      }), showRangeSetting && this.renderAutoRange()), this.enableUseSingleSelectColumnColorSetting() && /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
-        className: "statistic-chart-parameter-divider"
-      }), /*#__PURE__*/React.createElement(ColorUseTypeSelector, {
-        chart: statItem,
-        labelColorConfigs: labelColorConfigs,
-        updateChart: this.props.updateStatItem
-      })), !hideDisplayDataSetting && /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
-        className: "statistic-chart-parameter-divider"
-      }), /*#__PURE__*/React.createElement("div", {
-        className: "statistic-chart-parameter-item"
-      }, /*#__PURE__*/React.createElement(IndToggleSetting, {
-        isChecked: display_data || false,
-        label: statItem.type == STAT_TYPE.BAR_STACK ? intl.get('Display_stack_total_value') : intl.get('Display_data'),
-        handleToggleChange: this.onToggleDisplayData
-      }), display_data && /*#__PURE__*/React.createElement(LabelFontSizeEditor, {
-        fontSize: label_font_size,
-        className: "mt-3",
-        onChangeFontSize: this.onChangeLabelFontSize
-      }))), chartType === STAT_TYPE.BAR && /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
-        className: "statistic-chart-parameter-divider"
-      }), /*#__PURE__*/React.createElement(ColorUseTypeSelector, {
-        chart: statItem,
-        labelColorConfigs: labelColorConfigs,
-        updateChart: this.props.updateStatItem
-      })), (this.props.isDisplayEachBlockData || chartType == STAT_TYPE.BAR_STACK) && /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
-        className: "statistic-chart-parameter-divider"
-      }), /*#__PURE__*/React.createElement("div", {
-        className: "statistic-chart-parameter-item"
-      }, /*#__PURE__*/React.createElement(IndToggleSetting, {
-        isChecked: display_each_block_data || false,
-        label: intl.get('Display_value_of_each_block'),
-        handleToggleChange: this.onToggleDisplayEachBlockData
-      }))));
-    }
-  }]);
-  return BarChartStyle;
-}(Component);
+  render() {
+    const {
+      statItem,
+      labelColorConfigs,
+      hideDisplayDataSetting,
+      showRangeSetting = true
+    } = this.props;
+    const {
+      type: chartType,
+      show_x_axis_label,
+      show_y_axis_label,
+      display_data,
+      label_font_size,
+      display_each_block_data,
+      title_name = ''
+    } = statItem;
+    return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
+      className: "statistic-chart-parameter-item"
+    }, /*#__PURE__*/React.createElement("label", null, intl.get('X-axis')), /*#__PURE__*/React.createElement(ToggleSetting, {
+      isChecked: show_x_axis_label || false,
+      handleToggleChange: this.onToggleXAxisLabel,
+      label: intl.get('Display_title')
+    }), show_x_axis_label && /*#__PURE__*/React.createElement(AxisLabelPosition, {
+      statItem: statItem,
+      axisType: 'x',
+      onSelectAxisLabelPosition: this.onSelectAxisLabelPosition
+    })), /*#__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(ToggleSetting, {
+      isChecked: show_y_axis_label || false,
+      handleToggleChange: this.onToggleYAxisLabel,
+      label: intl.get('Display_title')
+    }), show_y_axis_label && (this.props.enableYAxisCustomTitle || chartType == STAT_TYPE.BAR_STACK) && /*#__PURE__*/React.createElement(CustomTitleSetting, {
+      titleName: title_name || '',
+      updateTitleName: this.updateTitleName
+    }), show_y_axis_label && /*#__PURE__*/React.createElement(AxisLabelPosition, {
+      statItem: statItem,
+      axisType: 'y',
+      onSelectAxisLabelPosition: this.onSelectAxisLabelPosition
+    }), showRangeSetting && this.renderAutoRange()), this.enableUseSingleSelectColumnColorSetting() && /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
+      className: "statistic-chart-parameter-divider"
+    }), /*#__PURE__*/React.createElement(ColorUseTypeSelector, {
+      chart: statItem,
+      labelColorConfigs: labelColorConfigs,
+      updateChart: this.props.updateStatItem
+    })), !hideDisplayDataSetting && /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
+      className: "statistic-chart-parameter-divider"
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "statistic-chart-parameter-item"
+    }, /*#__PURE__*/React.createElement(IndToggleSetting, {
+      isChecked: display_data || false,
+      label: statItem.type == STAT_TYPE.BAR_STACK ? intl.get('Display_stack_total_value') : intl.get('Display_data'),
+      handleToggleChange: this.onToggleDisplayData
+    }), display_data && /*#__PURE__*/React.createElement(LabelFontSizeEditor, {
+      fontSize: label_font_size,
+      className: "mt-3",
+      onChangeFontSize: this.onChangeLabelFontSize
+    }))), chartType === STAT_TYPE.BAR && /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
+      className: "statistic-chart-parameter-divider"
+    }), /*#__PURE__*/React.createElement(ColorUseTypeSelector, {
+      chart: statItem,
+      labelColorConfigs: labelColorConfigs,
+      updateChart: this.props.updateStatItem
+    })), (this.props.isDisplayEachBlockData || chartType == STAT_TYPE.BAR_STACK) && /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
+      className: "statistic-chart-parameter-divider"
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "statistic-chart-parameter-item"
+    }, /*#__PURE__*/React.createElement(IndToggleSetting, {
+      isChecked: display_each_block_data || false,
+      label: intl.get('Display_value_of_each_block'),
+      handleToggleChange: this.onToggleDisplayEachBlockData
+    }))));
+  }
+}
 export default BarChartStyle;