dtable-statistic 4.2.1 → 4.3.0

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

@@ -1,105 +1,105 @@
-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 } from 'react';
 import intl from 'react-intl-universal';
 import IndToggleSetting from '../../public-setting/ind-toggle-setting';
 import LabelFontSizeEditor from './label-font-size-editor';
 import ToggleSetting from '../../public-setting/toggle-setting';
 import MinMaxSetting from '../../public-setting/min-max-setting';
-var CompletenessStyle = /*#__PURE__*/function (_Component) {
-  _inherits(CompletenessStyle, _Component);
-  var _super = _createSuper(CompletenessStyle);
-  function CompletenessStyle() {
-    var _this;
-    _classCallCheck(this, CompletenessStyle);
-    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.onToggleDisplayData = function () {
-      var statItem = _this.props.statItem;
-      var _ref = statItem || {},
-        display_percentage = _ref.display_percentage;
-      var updated = {
+class CompletenessStyle extends Component {
+  constructor() {
+    super(...arguments);
+    this.onToggleDisplayData = () => {
+      let {
+        statItem
+      } = this.props;
+      let {
+        display_percentage
+      } = statItem || {};
+      const updated = {
         display_percentage: !display_percentage
       };
-      _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.onToggleYAxisAutoRange = function () {
-      var statItem = _this.props.statItem;
-      var _ref2 = statItem || {},
-        y_axis_auto_range = _ref2.y_axis_auto_range;
-      var updated = {
+    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));
       }
     };
-    return _this;
   }
-  _createClass(CompletenessStyle, [{
-    key: "render",
-    value: function render() {
-      var statItem = this.props.statItem;
-      var display_percentage = statItem.display_percentage,
-        label_font_size = statItem.label_font_size,
-        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;
-      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-        className: "statistic-chart-parameter-item"
-      }, /*#__PURE__*/React.createElement(IndToggleSetting, {
-        isChecked: display_percentage || false,
-        handleToggleChange: this.onToggleDisplayData,
-        label: intl.get('Display_percentage')
-      }), display_percentage && /*#__PURE__*/React.createElement(LabelFontSizeEditor, {
-        fontSize: label_font_size,
-        className: "mt-3",
-        onChangeFontSize: this.onChangeLabelFontSize
-      })), /*#__PURE__*/React.createElement("div", {
-        className: "statistic-chart-parameter-item"
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "mt-1"
-      }, /*#__PURE__*/React.createElement(ToggleSetting, {
-        isChecked: checked,
-        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
-      }))));
-    }
-  }]);
-  return CompletenessStyle;
-}(Component);
+  render() {
+    const {
+      statItem
+    } = this.props;
+    const {
+      display_percentage,
+      label_font_size,
+      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(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      className: "statistic-chart-parameter-item"
+    }, /*#__PURE__*/React.createElement(IndToggleSetting, {
+      isChecked: display_percentage || false,
+      handleToggleChange: this.onToggleDisplayData,
+      label: intl.get('Display_percentage')
+    }), display_percentage && /*#__PURE__*/React.createElement(LabelFontSizeEditor, {
+      fontSize: label_font_size,
+      className: "mt-3",
+      onChangeFontSize: this.onChangeLabelFontSize
+    })), /*#__PURE__*/React.createElement("div", {
+      className: "statistic-chart-parameter-item"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "mt-1"
+    }, /*#__PURE__*/React.createElement(ToggleSetting, {
+      isChecked: checked,
+      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
+    }))));
+  }
+}
 export default CompletenessStyle;

package/es/stat-editor/stat-settings/basic-chart-settings/style-setting/horizontal-bar-chart-style.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,46 +9,43 @@ 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, STAT_TYPE } from '../../../../constants';
-var HorizontalBarChartStyle = /*#__PURE__*/function (_Component) {
-  _inherits(HorizontalBarChartStyle, _Component);
-  var _super = _createSuper(HorizontalBarChartStyle);
-  function HorizontalBarChartStyle() {
-    var _this;
-    _classCallCheck(this, HorizontalBarChartStyle);
-    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.onToggleVerticalAxisLabel = function () {
-      var _this$props = _this.props,
-        statItem = _this$props.statItem,
-        eventBus = _this$props.eventBus;
-      var _ref = statItem || {},
-        show_vertical_axis_label = _ref.show_vertical_axis_label;
-      var updated = {
+class HorizontalBarChartStyle extends Component {
+  constructor() {
+    super(...arguments);
+    this.onToggleVerticalAxisLabel = () => {
+      let {
+        statItem,
+        eventBus
+      } = this.props;
+      let {
+        show_vertical_axis_label
+      } = statItem || {};
+      let updated = {
         show_vertical_axis_label: !show_vertical_axis_label,
         vertical_axis_label_position: !show_vertical_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.onToggleHorizontalAxisLabel = function () {
-      var _this$props2 = _this.props,
-        statItem = _this$props2.statItem,
-        eventBus = _this$props2.eventBus;
-      var _ref2 = statItem || {},
-        show_horizontal_axis_label = _ref2.show_horizontal_axis_label;
-      var updated = {
+    this.onToggleHorizontalAxisLabel = () => {
+      let {
+        statItem,
+        eventBus
+      } = this.props;
+      let {
+        show_horizontal_axis_label
+      } = statItem || {};
+      let updated = {
         show_horizontal_axis_label: !show_horizontal_axis_label,
         horizontal_axis_label_position: !show_horizontal_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 === 'vertical') {
         updated = {
           vertical_axis_label_position: option.value
@@ -62,100 +55,126 @@ var HorizontalBarChartStyle = /*#__PURE__*/function (_Component) {
           horizontal_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.onToggleShowLabel = function () {
-      var statItem = _this.props.statItem;
-      var _ref3 = statItem || {},
-        horizontal_axis_show_label = _ref3.horizontal_axis_show_label,
-        horizontal_axis_label_color = _ref3.horizontal_axis_label_color;
+    this.onToggleShowLabel = () => {
+      let {
+        statItem
+      } = this.props;
+      let {
+        horizontal_axis_show_label,
+        horizontal_axis_label_color
+      } = statItem || {};
       horizontal_axis_show_label = !horizontal_axis_show_label;
       if (horizontal_axis_show_label) {
         horizontal_axis_label_color = LABEL_COLORS[0];
       } else {
         horizontal_axis_label_color = null;
       }
-      _this.props.updateStatItem(Object.assign({}, statItem, {
-        horizontal_axis_show_label: horizontal_axis_show_label,
-        horizontal_axis_label_color: horizontal_axis_label_color
+      this.props.updateStatItem(Object.assign({}, statItem, {
+        horizontal_axis_show_label,
+        horizontal_axis_label_color
       }));
     };
-    _this.onToggleDisplayData = function () {
-      var statItem = _this.props.statItem;
-      var _ref4 = statItem || {},
-        display_data = _ref4.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.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.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.onToggleHAxisAutoRange = function () {
-      var statItem = _this.props.statItem;
-      var _ref6 = statItem || {},
-        h_axis_auto_range = _ref6.h_axis_auto_range;
-      var updated = {
+    this.onToggleHAxisAutoRange = () => {
+      const {
+        statItem
+      } = this.props;
+      const {
+        h_axis_auto_range
+      } = statItem || {};
+      const updated = {
         h_axis_auto_range: h_axis_auto_range == undefined ? false : !h_axis_auto_range
       };
-      _this.props.updateStatItem(Object.assign({}, statItem, updated));
+      this.props.updateStatItem(Object.assign({}, statItem, updated));
     };
-    _this.onHAxisMinChange = function (min) {
-      var newMin = parseInt(min);
+    this.onHAxisMinChange = min => {
+      const newMin = parseInt(min);
       if (!Number.isNaN(newMin)) {
-        var statItem = _this.props.statItem;
-        var updated = {
+        const {
+          statItem
+        } = this.props;
+        const updated = {
           h_axis_min: newMin
         };
-        _this.props.updateStatItem(Object.assign({}, statItem, updated));
+        this.props.updateStatItem(Object.assign({}, statItem, updated));
       }
     };
-    _this.onHAxisMaxChange = function (max) {
-      var newMax = parseInt(max);
+    this.onHAxisMaxChange = max => {
+      const newMax = parseInt(max);
       if (!Number.isNaN(newMax)) {
-        var statItem = _this.props.statItem;
-        var updated = {
+        const {
+          statItem
+        } = this.props;
+        const updated = {
           h_axis_max: newMax
         };
-        _this.props.updateStatItem(Object.assign({}, statItem, updated));
+        this.props.updateStatItem(Object.assign({}, statItem, updated));
       }
     };
-    _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));
     };
-    _this.displayColorSelector = function () {
-      var _this$props4 = _this.props,
-        statItem = _this$props4.statItem,
-        getTableById = _this$props4.getTableById;
-      var type = statItem.type,
-        table_id = statItem.table_id,
-        column_groupby_column_key = statItem.column_groupby_column_key;
+    this.displayColorSelector = () => {
+      const {
+        statItem,
+        getTableById
+      } = this.props;
+      const {
+        type,
+        table_id,
+        column_groupby_column_key
+      } = statItem;
       if (type == STAT_TYPE.HORIZONTAL_GROUP_BAR || type == STAT_TYPE.STACKED_HORIZONTAL_BAR) {
         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;
         }
@@ -163,98 +182,100 @@ var HorizontalBarChartStyle = /*#__PURE__*/function (_Component) {
       }
       return false;
     };
-    _this.renderAutoRange = function () {
-      var statItem = _this.props.statItem;
-      var h_axis_auto_range = statItem.h_axis_auto_range,
-        h_axis_min = statItem.h_axis_min,
-        h_axis_max = statItem.h_axis_max;
-      var checked = h_axis_auto_range == undefined ? true : h_axis_auto_range;
+    this.renderAutoRange = () => {
+      const {
+        statItem
+      } = this.props;
+      const {
+        h_axis_auto_range,
+        h_axis_min,
+        h_axis_max
+      } = statItem;
+      const checked = h_axis_auto_range == undefined ? true : h_axis_auto_range;
       return /*#__PURE__*/React.createElement("div", {
         className: "mt-1"
       }, /*#__PURE__*/React.createElement(ToggleSetting, {
         isChecked: checked,
-        handleToggleChange: _this.onToggleHAxisAutoRange,
+        handleToggleChange: this.onToggleHAxisAutoRange,
         label: intl.get('Auto_range')
       }), !checked && /*#__PURE__*/React.createElement(MinMaxSetting, {
         min: h_axis_min,
         max: h_axis_max,
-        onMinChange: _this.onHAxisMinChange,
-        onMaxChange: _this.onHAxisMaxChange
+        onMinChange: this.onHAxisMinChange,
+        onMaxChange: this.onHAxisMaxChange
       }));
     };
-    return _this;
   }
-  _createClass(HorizontalBarChartStyle, [{
-    key: "render",
-    value: function render() {
-      var _this$props5 = this.props,
-        statItem = _this$props5.statItem,
-        labelColorConfigs = _this$props5.labelColorConfigs;
-      var chartType = statItem.type,
-        show_vertical_axis_label = statItem.show_vertical_axis_label,
-        show_horizontal_axis_label = statItem.show_horizontal_axis_label,
-        display_data = statItem.display_data,
-        label_font_size = statItem.label_font_size,
-        title_name = 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('Vertical_axis')), /*#__PURE__*/React.createElement(ToggleSetting, {
-        isChecked: show_vertical_axis_label || false,
-        handleToggleChange: this.onToggleVerticalAxisLabel,
-        label: intl.get('Display_title')
-      }), show_vertical_axis_label && chartType == STAT_TYPE.STACKED_HORIZONTAL_BAR && /*#__PURE__*/React.createElement(CustomTitleSetting, {
-        titleName: title_name,
-        updateTitleName: this.updateTitleName
-      }), show_vertical_axis_label && /*#__PURE__*/React.createElement(AxisLabelPosition, {
-        statItem: statItem,
-        axisType: 'vertical',
-        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('Horizontal_axis')), /*#__PURE__*/React.createElement(ToggleSetting, {
-        isChecked: show_horizontal_axis_label || false,
-        handleToggleChange: this.onToggleHorizontalAxisLabel,
-        label: intl.get('Display_title')
-      }), show_horizontal_axis_label && /*#__PURE__*/React.createElement(AxisLabelPosition, {
-        statItem: statItem,
-        axisType: 'horizontal',
-        onSelectAxisLabelPosition: this.onSelectAxisLabelPosition
-      }), chartType !== STAT_TYPE.STACKED_HORIZONTAL_BAR && this.renderAutoRange()), this.displayColorSelector() && /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
-        className: "statistic-chart-parameter-divider"
-      }), /*#__PURE__*/React.createElement(ColorUseTypeSelector, {
-        chart: statItem,
-        updateChart: this.props.updateStatItem
-      })), /*#__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,
-        handleToggleChange: this.onToggleDisplayData,
-        label: chartType == STAT_TYPE.STACKED_HORIZONTAL_BAR ? intl.get('Display_stack_total_value') : intl.get('Display_data')
-      }), display_data && /*#__PURE__*/React.createElement(LabelFontSizeEditor, {
-        className: "mt-3",
-        fontSize: label_font_size,
-        onChangeFontSize: this.onChangeLabelFontSize
-      })), chartType === STAT_TYPE.HORIZONTAL_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
-      })), chartType === STAT_TYPE.STACKED_HORIZONTAL_BAR && /*#__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: !!statItem.display_each_block_data,
-        label: intl.get('Display_value_of_each_block'),
-        handleToggleChange: this.onToggleDisplayEachBlockData
-      }))));
-    }
-  }]);
-  return HorizontalBarChartStyle;
-}(Component);
+  render() {
+    const {
+      statItem,
+      labelColorConfigs
+    } = this.props;
+    const {
+      type: chartType,
+      show_vertical_axis_label,
+      show_horizontal_axis_label,
+      display_data,
+      label_font_size,
+      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('Vertical_axis')), /*#__PURE__*/React.createElement(ToggleSetting, {
+      isChecked: show_vertical_axis_label || false,
+      handleToggleChange: this.onToggleVerticalAxisLabel,
+      label: intl.get('Display_title')
+    }), show_vertical_axis_label && chartType == STAT_TYPE.STACKED_HORIZONTAL_BAR && /*#__PURE__*/React.createElement(CustomTitleSetting, {
+      titleName: title_name,
+      updateTitleName: this.updateTitleName
+    }), show_vertical_axis_label && /*#__PURE__*/React.createElement(AxisLabelPosition, {
+      statItem: statItem,
+      axisType: 'vertical',
+      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('Horizontal_axis')), /*#__PURE__*/React.createElement(ToggleSetting, {
+      isChecked: show_horizontal_axis_label || false,
+      handleToggleChange: this.onToggleHorizontalAxisLabel,
+      label: intl.get('Display_title')
+    }), show_horizontal_axis_label && /*#__PURE__*/React.createElement(AxisLabelPosition, {
+      statItem: statItem,
+      axisType: 'horizontal',
+      onSelectAxisLabelPosition: this.onSelectAxisLabelPosition
+    }), chartType !== STAT_TYPE.STACKED_HORIZONTAL_BAR && this.renderAutoRange()), this.displayColorSelector() && /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
+      className: "statistic-chart-parameter-divider"
+    }), /*#__PURE__*/React.createElement(ColorUseTypeSelector, {
+      chart: statItem,
+      updateChart: this.props.updateStatItem
+    })), /*#__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,
+      handleToggleChange: this.onToggleDisplayData,
+      label: chartType == STAT_TYPE.STACKED_HORIZONTAL_BAR ? intl.get('Display_stack_total_value') : intl.get('Display_data')
+    }), display_data && /*#__PURE__*/React.createElement(LabelFontSizeEditor, {
+      className: "mt-3",
+      fontSize: label_font_size,
+      onChangeFontSize: this.onChangeLabelFontSize
+    })), chartType === STAT_TYPE.HORIZONTAL_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
+    })), chartType === STAT_TYPE.STACKED_HORIZONTAL_BAR && /*#__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: !!statItem.display_each_block_data,
+      label: intl.get('Display_value_of_each_block'),
+      handleToggleChange: this.onToggleDisplayEachBlockData
+    }))));
+  }
+}
 export default HorizontalBarChartStyle;