dtable-statistic 4.2.2 → 4.3.0

package/es/stat-editor/stat-settings/advance-chart-settings/mirror-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,134 +5,120 @@ import ColumnSettings from '../public-setting/column-settings';
 import SummarySettings from './summary-settings';
 import ToggleSetting from '../public-setting/toggle-setting';
 import { isMirrorColumn } from '../../../utils/column-utils';
-var MirrorSettings = /*#__PURE__*/function (_Component) {
-  _inherits(MirrorSettings, _Component);
-  var _super = _createSuper(MirrorSettings);
-  function MirrorSettings(props) {
-    var _this;
-    _classCallCheck(this, MirrorSettings);
-    _this = _super.call(this, props);
-    _this.getSelectedStatColumnOption = function () {
-      return _this.statColumnsOptions.find(function (option) {
-        return option.value.key === _this.props.statItem.column;
-      });
+class MirrorSettings extends Component {
+  constructor(props) {
+    super(props);
+    this.getSelectedStatColumnOption = () => {
+      return this.statColumnsOptions.find(option => option.value.key === this.props.statItem.column);
     };
-    _this.getSelectedGroupColumnOption = function () {
-      return _this.groupColumnsOptions.find(function (option) {
-        return option.value.key === _this.props.statItem.group_column;
-      });
+    this.getSelectedGroupColumnOption = () => {
+      return this.groupColumnsOptions.find(option => option.value.key === this.props.statItem.group_column);
     };
-    _this.onSelectStatColumn = function (option) {
-      var column = _this.props.statItem.column;
-      var new_column = option.value.key;
+    this.onSelectStatColumn = option => {
+      const {
+        column
+      } = this.props.statItem;
+      const new_column = option.value.key;
       if (new_column === column) return;
-      _this.props.updateStatItem(Object.assign({}, _this.props.statItem, {
+      this.props.updateStatItem(Object.assign({}, this.props.statItem, {
         column: new_column
       }));
     };
-    _this.onSelectGroupColumn = function (option) {
-      var group_column = _this.props.statItem.group_column;
-      var new_column = option.value.key;
+    this.onSelectGroupColumn = option => {
+      const {
+        group_column
+      } = this.props.statItem;
+      const new_column = option.value.key;
       if (new_column === group_column) return;
-      _this.props.updateStatItem(Object.assign({}, _this.props.statItem, {
+      this.props.updateStatItem(Object.assign({}, this.props.statItem, {
         group_column: new_column
       }));
     };
-    _this.handleToggleChange = function (event) {
-      _this.props.updateStatItem(Object.assign({}, _this.props.statItem, {
+    this.handleToggleChange = event => {
+      this.props.updateStatItem(Object.assign({}, this.props.statItem, {
         is_transpose: event.target.checked
       }));
     };
-    var columns = props.columns,
-      getColumnsOptions = props.getColumnsOptions;
-    var statColumns = columns.filter(function (column) {
-      return isMirrorColumn(column);
-    });
-    var groupColumns = columns.filter(function (column) {
-      return column.type === 'single-select';
-    });
-    _this.statColumnsOptions = getColumnsOptions(statColumns);
-    _this.groupColumnsOptions = getColumnsOptions(groupColumns);
-    return _this;
+    const {
+      columns,
+      getColumnsOptions
+    } = props;
+    const statColumns = columns.filter(column => isMirrorColumn(column));
+    const groupColumns = columns.filter(column => column.type === 'single-select');
+    this.statColumnsOptions = getColumnsOptions(statColumns);
+    this.groupColumnsOptions = getColumnsOptions(groupColumns);
   }
-  _createClass(MirrorSettings, [{
-    key: "UNSAFE_componentWillReceiveProps",
-    value: function UNSAFE_componentWillReceiveProps(nextProps) {
-      if (nextProps.selectedTableId !== this.props.selectedTableId) {
-        var columns = nextProps.columns,
-          getColumnsOptions = nextProps.getColumnsOptions;
-        var statColumns = columns.filter(function (column) {
-          return isMirrorColumn(column);
-        });
-        this.statColumnsOptions = getColumnsOptions(statColumns);
-        var groupColumns = columns.filter(function (column) {
-          return column.type === 'single-select';
-        });
-        this.groupColumnsOptions = getColumnsOptions(groupColumns);
-      }
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    if (nextProps.selectedTableId !== this.props.selectedTableId) {
+      const {
+        columns,
+        getColumnsOptions
+      } = nextProps;
+      const statColumns = columns.filter(column => isMirrorColumn(column));
+      this.statColumnsOptions = getColumnsOptions(statColumns);
+      const groupColumns = columns.filter(column => column.type === 'single-select');
+      this.groupColumnsOptions = getColumnsOptions(groupColumns);
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-        getTables = _this$props.getTables,
-        getViews = _this$props.getViews,
-        settingType = _this$props.settingType,
-        selectedTableId = _this$props.selectedTableId,
-        statItem = _this$props.statItem,
-        getColumnsOptions = _this$props.getColumnsOptions,
-        numericColumns = _this$props.numericColumns;
-      var selectedColumnOption = this.getSelectedStatColumnOption();
-      var selectedGroupColumnOption = this.getSelectedGroupColumnOption();
-      if (settingType === 'style') {
-        return null;
-      }
-      return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(BaseSettings, {
-        statItem: statItem,
-        selectedTableId: statItem.table_id,
-        selectedViewId: statItem.view_id,
-        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"
-      }), /*#__PURE__*/React.createElement("div", {
-        className: "statistic-chart-parameter-item"
-      }, /*#__PURE__*/React.createElement("label", null, intl.get('Statistic_field')), /*#__PURE__*/React.createElement(ColumnSettings, {
-        columnsOptions: this.statColumnsOptions,
-        selectedColumnOption: selectedColumnOption,
-        onChangeSelectedColumn: this.onSelectStatColumn
-      })), /*#__PURE__*/React.createElement("div", {
-        className: "statistic-chart-parameter-item"
-      }, /*#__PURE__*/React.createElement(ToggleSetting, {
-        label: intl.get('Reversing'),
-        isChecked: statItem.is_transpose,
-        handleToggleChange: this.handleToggleChange
-      })), /*#__PURE__*/React.createElement("div", {
-        className: "statistic-chart-parameter-item"
-      }, /*#__PURE__*/React.createElement("label", null, intl.get('Column_grouping_field')), /*#__PURE__*/React.createElement(ColumnSettings, {
-        columnsOptions: this.groupColumnsOptions,
-        selectedColumnOption: selectedGroupColumnOption,
-        onChangeSelectedColumn: this.onSelectGroupColumn
-      })), /*#__PURE__*/React.createElement("div", {
-        className: "statistic-chart-parameter-divider"
-      }), /*#__PURE__*/React.createElement(SummarySettings, {
-        label: intl.get('Summary_method'),
-        statItem: statItem,
-        selectedTableId: selectedTableId,
-        numericColumns: numericColumns,
-        summaryType: statItem.summary_type,
-        summaryMethod: statItem.summary_method,
-        summaryColumn: statItem.summary_column,
-        getColumnsOptions: getColumnsOptions,
-        onChangeSummaryType: this.props.onChangeSummaryType,
-        onSelectSummaryColumn: this.props.onSelectSummaryColumn,
-        onSelectSummaryMethod: this.props.onSelectSummaryMethod
-      }));
+  }
+  render() {
+    const {
+      getTables,
+      getViews,
+      settingType,
+      selectedTableId,
+      statItem,
+      getColumnsOptions,
+      numericColumns
+    } = this.props;
+    const selectedColumnOption = this.getSelectedStatColumnOption();
+    const selectedGroupColumnOption = this.getSelectedGroupColumnOption();
+    if (settingType === 'style') {
+      return null;
     }
-  }]);
-  return MirrorSettings;
-}(Component);
+    return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(BaseSettings, {
+      statItem: statItem,
+      selectedTableId: statItem.table_id,
+      selectedViewId: statItem.view_id,
+      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"
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "statistic-chart-parameter-item"
+    }, /*#__PURE__*/React.createElement("label", null, intl.get('Statistic_field')), /*#__PURE__*/React.createElement(ColumnSettings, {
+      columnsOptions: this.statColumnsOptions,
+      selectedColumnOption: selectedColumnOption,
+      onChangeSelectedColumn: this.onSelectStatColumn
+    })), /*#__PURE__*/React.createElement("div", {
+      className: "statistic-chart-parameter-item"
+    }, /*#__PURE__*/React.createElement(ToggleSetting, {
+      label: intl.get('Reversing'),
+      isChecked: statItem.is_transpose,
+      handleToggleChange: this.handleToggleChange
+    })), /*#__PURE__*/React.createElement("div", {
+      className: "statistic-chart-parameter-item"
+    }, /*#__PURE__*/React.createElement("label", null, intl.get('Column_grouping_field')), /*#__PURE__*/React.createElement(ColumnSettings, {
+      columnsOptions: this.groupColumnsOptions,
+      selectedColumnOption: selectedGroupColumnOption,
+      onChangeSelectedColumn: this.onSelectGroupColumn
+    })), /*#__PURE__*/React.createElement("div", {
+      className: "statistic-chart-parameter-divider"
+    }), /*#__PURE__*/React.createElement(SummarySettings, {
+      label: intl.get('Summary_method'),
+      statItem: statItem,
+      selectedTableId: selectedTableId,
+      numericColumns: numericColumns,
+      summaryType: statItem.summary_type,
+      summaryMethod: statItem.summary_method,
+      summaryColumn: statItem.summary_column,
+      getColumnsOptions: getColumnsOptions,
+      onChangeSummaryType: this.props.onChangeSummaryType,
+      onSelectSummaryColumn: this.props.onSelectSummaryColumn,
+      onSelectSummaryMethod: this.props.onSelectSummaryMethod
+    }));
+  }
+}
 export default MirrorSettings;

package/es/stat-editor/stat-settings/advance-chart-settings/style-setting/combination-style-setting.js

@@ -1,9 +1,3 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
-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 ToggleSetting from '../../public-setting/toggle-setting';
@@ -12,208 +6,227 @@ import IndToggleSetting from '../../public-setting/ind-toggle-setting';
 import MinMaxSetting from '../../public-setting/min-max-setting';
 import LabelFontSizeEditor from '../../basic-chart-settings/style-setting/label-font-size-editor';
 import { LABEL_CONFIG_CHANGED } from '../../../../constants';
-var CombinationChartStyle = /*#__PURE__*/function (_Component) {
-  _inherits(CombinationChartStyle, _Component);
-  var _super = _createSuper(CombinationChartStyle);
-  function CombinationChartStyle() {
-    var _this;
-    _classCallCheck(this, CombinationChartStyle);
-    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.renderShowAxisLabel = function (type, position) {
-      var statItem = _this.props.statItem;
-      var _ref = statItem || {},
-        show_x_axis_label = _ref.show_x_axis_label;
+class CombinationChartStyle extends Component {
+  constructor() {
+    super(...arguments);
+    this.renderShowAxisLabel = (type, position) => {
+      const {
+        statItem
+      } = this.props;
+      let {
+        show_x_axis_label
+      } = statItem || {};
       if (type === 'x') {
         return /*#__PURE__*/React.createElement(ToggleSetting, {
           isChecked: show_x_axis_label || false,
-          handleToggleChange: _this.onToggleXAxisLabel,
+          handleToggleChange: this.onToggleXAxisLabel,
           label: intl.get('Display_title')
         });
       } else {
-        var isChecked = _this.props.statItem["show_y_axis_".concat(position, "_label")] || false;
+        const isChecked = this.props.statItem["show_y_axis_".concat(position, "_label")] || false;
         return /*#__PURE__*/React.createElement(ToggleSetting, {
           isChecked: isChecked,
-          handleToggleChange: function handleToggleChange() {
-            return _this.onToggleYAxisLabel(position);
-          },
+          handleToggleChange: () => this.onToggleYAxisLabel(position),
           label: intl.get('Display_title')
         });
       }
     };
-    _this.onToggleXAxisLabel = function () {
-      var _this$props = _this.props,
-        statItem = _this$props.statItem,
-        eventBus = _this$props.eventBus;
-      var _ref2 = statItem || {},
-        show_x_axis_label = _ref2.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 (position) {
-      var _updated;
-      var _this$props2 = _this.props,
-        statItem = _this$props2.statItem,
-        eventBus = _this$props2.eventBus;
-      var updated = (_updated = {}, _defineProperty(_updated, "show_y_axis_".concat(position, "_label"), !statItem["show_y_axis_".concat(position, "_label")]), _defineProperty(_updated, "y_axis_".concat(position, "_label_position"), !statItem["show_y_axis_".concat(position, "_label")] ? 'center' : null), _updated);
-      var newStatItem = Object.assign({}, statItem, updated);
+    this.onToggleYAxisLabel = position => {
+      let {
+        statItem,
+        eventBus
+      } = this.props;
+      let updated = {
+        ["show_y_axis_".concat(position, "_label")]: !statItem["show_y_axis_".concat(position, "_label")],
+        ["y_axis_".concat(position, "_label_position")]: !statItem["show_y_axis_".concat(position, "_label")] ? 'center' : null
+      };
+      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, position) {
-      var updated;
+    this.onSelectAxisLabelPosition = (type, option, position) => {
+      let updated;
       if (type === 'x') {
         updated = {
           x_axis_label_position: option.value
         };
       } else {
-        updated = _defineProperty({}, "y_axis_".concat(position, "_label_position"), option.value);
+        updated = {
+          ["y_axis_".concat(position, "_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.onToggleYAxisAutoRange = function (key) {
-      var statItem = _this.props.statItem;
-      var updated = _defineProperty({}, key, statItem[key] == undefined ? false : !statItem[key]);
-      _this.props.updateStatItem(Object.assign({}, statItem, updated));
+    this.onToggleYAxisAutoRange = key => {
+      const {
+        statItem
+      } = this.props;
+      const updated = {
+        [key]: statItem[key] == undefined ? false : !statItem[key]
+      };
+      this.props.updateStatItem(Object.assign({}, statItem, updated));
     };
-    _this.onYAxisMinChange = function (key, min) {
-      var newMin = parseInt(min);
+    this.onYAxisMinChange = (key, min) => {
+      const newMin = parseInt(min);
       if (!Number.isNaN(newMin)) {
-        var statItem = _this.props.statItem;
-        var updated = _defineProperty({}, key, newMin);
-        _this.props.updateStatItem(Object.assign({}, statItem, updated));
+        const {
+          statItem
+        } = this.props;
+        const updated = {
+          [key]: newMin
+        };
+        this.props.updateStatItem(Object.assign({}, statItem, updated));
       }
     };
-    _this.onYAxisMaxChange = function (key, max) {
-      var newMax = parseInt(max);
+    this.onYAxisMaxChange = (key, max) => {
+      const newMax = parseInt(max);
       if (!Number.isNaN(newMax)) {
-        var statItem = _this.props.statItem;
-        var updated = _defineProperty({}, key, newMax);
-        _this.props.updateStatItem(Object.assign({}, statItem, updated));
+        const {
+          statItem
+        } = this.props;
+        const updated = {
+          [key]: newMax
+        };
+        this.props.updateStatItem(Object.assign({}, statItem, updated));
       }
     };
-    _this.onToggleDisplayData = function () {
-      var statItem = _this.props.statItem;
-      var _ref3 = statItem || {},
-        display_data = _ref3.display_data;
-      var updated = {
+    this.onToggleDisplayData = () => {
+      const {
+        statItem
+      } = this.props;
+      const {
+        display_data
+      } = statItem || {};
+      const updated = {
         display_data: !display_data
       };
-      _this.props.updateStatItem(Object.assign({}, statItem, updated));
+      this.props.updateStatItem(Object.assign({}, statItem, updated));
     };
-    _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.renderLeftAutoRange = function () {
-      var statItem = _this.props.statItem;
-      var y_axis_auto_range_left = statItem.y_axis_auto_range_left,
-        y_axis_min_left = statItem.y_axis_min_left,
-        y_axis_max_left = statItem.y_axis_max_left;
-      var checked = y_axis_auto_range_left == undefined ? true : y_axis_auto_range_left;
+    this.renderLeftAutoRange = () => {
+      const {
+        statItem
+      } = this.props;
+      const {
+        y_axis_auto_range_left,
+        y_axis_min_left,
+        y_axis_max_left
+      } = statItem;
+      const checked = y_axis_auto_range_left == undefined ? true : y_axis_auto_range_left;
       return /*#__PURE__*/React.createElement("div", {
         className: "mt-1"
       }, /*#__PURE__*/React.createElement(ToggleSetting, {
         isChecked: checked,
-        handleToggleChange: function handleToggleChange() {
-          _this.onToggleYAxisAutoRange('y_axis_auto_range_left');
+        handleToggleChange: () => {
+          this.onToggleYAxisAutoRange('y_axis_auto_range_left');
         },
         label: intl.get('Auto_range')
       }), !checked && /*#__PURE__*/React.createElement(MinMaxSetting, {
         min: y_axis_min_left,
         max: y_axis_max_left,
-        onMinChange: _this.onYAxisMinChange.bind(_assertThisInitialized(_this), 'y_axis_min_left'),
-        onMaxChange: _this.onYAxisMaxChange.bind(_assertThisInitialized(_this), 'y_axis_max_left')
+        onMinChange: this.onYAxisMinChange.bind(this, 'y_axis_min_left'),
+        onMaxChange: this.onYAxisMaxChange.bind(this, 'y_axis_max_left')
       }));
     };
-    _this.renderRightAutoRange = function () {
-      var statItem = _this.props.statItem;
-      var y_axis_auto_range_right = statItem.y_axis_auto_range_right,
-        y_axis_min_right = statItem.y_axis_min_right,
-        y_axis_max_right = statItem.y_axis_max_right;
-      var checked = y_axis_auto_range_right == undefined ? true : y_axis_auto_range_right;
+    this.renderRightAutoRange = () => {
+      const {
+        statItem
+      } = this.props;
+      const {
+        y_axis_auto_range_right,
+        y_axis_min_right,
+        y_axis_max_right
+      } = statItem;
+      const checked = y_axis_auto_range_right == undefined ? true : y_axis_auto_range_right;
       return /*#__PURE__*/React.createElement("div", {
         className: "mt-1"
       }, /*#__PURE__*/React.createElement(ToggleSetting, {
         isChecked: checked,
-        handleToggleChange: function handleToggleChange() {
-          _this.onToggleYAxisAutoRange('y_axis_auto_range_right');
+        handleToggleChange: () => {
+          this.onToggleYAxisAutoRange('y_axis_auto_range_right');
         },
         label: intl.get('Auto_range')
       }), !checked && /*#__PURE__*/React.createElement(MinMaxSetting, {
         min: y_axis_min_right,
         max: y_axis_max_right,
-        onMinChange: _this.onYAxisMinChange.bind(_assertThisInitialized(_this), 'y_axis_min_right'),
-        onMaxChange: _this.onYAxisMaxChange.bind(_assertThisInitialized(_this), 'y_axis_max_right')
+        onMinChange: this.onYAxisMinChange.bind(this, 'y_axis_min_right'),
+        onMaxChange: this.onYAxisMaxChange.bind(this, 'y_axis_max_right')
       }));
     };
-    return _this;
   }
-  _createClass(CombinationChartStyle, [{
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-      var statItem = this.props.statItem;
-      var show_x_axis_label = statItem.show_x_axis_label,
-        show_y_axis_left_label = statItem.show_y_axis_left_label,
-        show_y_axis_right_label = statItem.show_y_axis_right_label,
-        _statItem$display_dat = statItem.display_data,
-        display_data = _statItem$display_dat === void 0 ? false : _statItem$display_dat,
-        _statItem$label_font_ = statItem.label_font_size,
-        label_font_size = _statItem$label_font_ === void 0 ? 12 : _statItem$label_font_;
-      return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
-        className: "statistic-chart-parameter-item"
-      }, /*#__PURE__*/React.createElement("label", null, intl.get('X-axis')), this.renderShowAxisLabel('x'), 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(left side)')), this.renderShowAxisLabel('y', 'left'), show_y_axis_left_label && /*#__PURE__*/React.createElement(AxisLabelPosition, {
-        statItem: statItem,
-        axisType: 'y_left',
-        onSelectAxisLabelPosition: function onSelectAxisLabelPosition(type, option) {
-          return _this2.onSelectAxisLabelPosition(type, option, 'left');
-        }
-      }), this.renderLeftAutoRange()), /*#__PURE__*/React.createElement("div", {
-        className: "statistic-chart-parameter-item"
-      }, /*#__PURE__*/React.createElement("label", null, intl.get('Y-axis(right side)')), this.renderShowAxisLabel('y', 'right'), show_y_axis_right_label && /*#__PURE__*/React.createElement(AxisLabelPosition, {
-        statItem: statItem,
-        axisType: 'y_right',
-        onSelectAxisLabelPosition: function onSelectAxisLabelPosition(type, option) {
-          return _this2.onSelectAxisLabelPosition(type, option, 'right');
-        }
-      }), this.renderRightAutoRange()), /*#__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,
-        handleToggleChange: this.onToggleDisplayData,
-        label: intl.get('Display_data')
-      }), display_data && /*#__PURE__*/React.createElement(LabelFontSizeEditor, {
-        className: "mt-3",
-        fontSize: label_font_size,
-        onChangeFontSize: this.onChangeLabelFontSize
-      })));
-    }
-  }]);
-  return CombinationChartStyle;
-}(Component);
+  render() {
+    const {
+      statItem
+    } = this.props;
+    const {
+      show_x_axis_label,
+      show_y_axis_left_label,
+      show_y_axis_right_label,
+      display_data = false,
+      label_font_size = 12
+    } = 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')), this.renderShowAxisLabel('x'), 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(left side)')), this.renderShowAxisLabel('y', 'left'), show_y_axis_left_label && /*#__PURE__*/React.createElement(AxisLabelPosition, {
+      statItem: statItem,
+      axisType: 'y_left',
+      onSelectAxisLabelPosition: (type, option) => this.onSelectAxisLabelPosition(type, option, 'left')
+    }), this.renderLeftAutoRange()), /*#__PURE__*/React.createElement("div", {
+      className: "statistic-chart-parameter-item"
+    }, /*#__PURE__*/React.createElement("label", null, intl.get('Y-axis(right side)')), this.renderShowAxisLabel('y', 'right'), show_y_axis_right_label && /*#__PURE__*/React.createElement(AxisLabelPosition, {
+      statItem: statItem,
+      axisType: 'y_right',
+      onSelectAxisLabelPosition: (type, option) => this.onSelectAxisLabelPosition(type, option, 'right')
+    }), this.renderRightAutoRange()), /*#__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,
+      handleToggleChange: this.onToggleDisplayData,
+      label: intl.get('Display_data')
+    }), display_data && /*#__PURE__*/React.createElement(LabelFontSizeEditor, {
+      className: "mt-3",
+      fontSize: label_font_size,
+      onChangeFontSize: this.onChangeLabelFontSize
+    })));
+  }
+}
 export default CombinationChartStyle;