dtable-statistic 4.0.2-test-2

package/es/stat-editor/stat-settings/basic-chart-settings/stack-item-settings.js

@@ -0,0 +1,86 @@
+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';
+import NumericSummaryItem from '../public-setting/numeric-summary-item';
+var StackItemSettings = /*#__PURE__*/function (_Component) {
+  _inherits(StackItemSettings, _Component);
+  var _super = _createSuper(StackItemSettings);
+  function StackItemSettings(props) {
+    var _this;
+    _classCallCheck(this, StackItemSettings);
+    _this = _super.call(this, props);
+    _this.onToggleExpand = function () {
+      _this.setState({
+        expanded: !_this.state.expanded
+      });
+    };
+    _this.renderGroupbyNumericColumns = function () {
+      var _this$props = _this.props,
+        statItem = _this$props.statItem,
+        stack = _this$props.stack,
+        numericColumnsOptions = _this$props.numericColumnsOptions,
+        summaryMethodsOptions = _this$props.summaryMethodsOptions;
+      var column_groupby_numeric_columns = stack.column_groupby_numeric_columns;
+      return Array.isArray(column_groupby_numeric_columns) && column_groupby_numeric_columns.map(function (item, index) {
+        return /*#__PURE__*/React.createElement(NumericSummaryItem, {
+          statItem: statItem,
+          key: "stack-number-column-".concat(index),
+          index: index,
+          canDeleteFirstColumn: true,
+          numericColumnItem: item,
+          numericColumnsOptions: numericColumnsOptions,
+          summaryMethodOptions: summaryMethodsOptions,
+          onChangeColumnOption: _this.props.modifyGroupbyNumericColumn,
+          onChangeSummaryMethod: _this.props.modifySummaryMethod,
+          onDeleteNumericColumnItem: _this.props.deleteNumericColumn
+        });
+      });
+    };
+    _this.state = {
+      expanded: true
+    };
+    return _this;
+  }
+  _createClass(StackItemSettings, [{
+    key: "render",
+    value: function render() {
+      var _this$props2 = this.props,
+        label = _this$props2.label,
+        numericColumnsOptions = _this$props2.numericColumnsOptions;
+      var expanded = this.state.expanded;
+      return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
+        className: classnames('statistic-chart-parameter-item', {
+          collapsible: !expanded
+        })
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "statistic-y-axis-title"
+      }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("i", {
+        onClick: this.onToggleExpand,
+        className: classnames('dtable-font', 'statistic-y-axis-title-expand-icon', {
+          'dtable-icon-drop-down': expanded,
+          'dtable-icon-right-slide': !expanded
+        })
+      }), /*#__PURE__*/React.createElement("label", null, label)), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("i", {
+        onClick: this.props.deleteStack,
+        className: "dtable-font dtable-icon-fork-number"
+      }))), expanded && /*#__PURE__*/React.createElement("div", {
+        className: "stack-settings-content-wrapper"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "statistics-add-number"
+      }, this.renderGroupbyNumericColumns()), Array.isArray(numericColumnsOptions) && numericColumnsOptions.length > 0 && /*#__PURE__*/React.createElement("div", {
+        className: "statistics-add-number-column",
+        onClick: this.props.addNumericSummary
+      }, /*#__PURE__*/React.createElement("span", {
+        className: "number-column-item dtable-font dtable-icon-add-table"
+      }), /*#__PURE__*/React.createElement("span", {
+        className: "number-column-item add-number-column-description"
+      }, intl.get('Add_new_numeric_column'))))));
+    }
+  }]);
+  return StackItemSettings;
+}(Component);
+export default StackItemSettings;

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

@@ -0,0 +1,169 @@
+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 intl from 'react-intl-universal';
+import StackItemSettings from './stack-item-settings';
+import { STATISTICS_COUNT_SHOW, STAT_TYPE, SUMMARY_METHOD } from '../../../constants';
+var StacksSettings = /*#__PURE__*/function (_Component) {
+  _inherits(StacksSettings, _Component);
+  var _super = _createSuper(StacksSettings);
+  function StacksSettings(props) {
+    var _this;
+    _classCallCheck(this, StacksSettings);
+    _this = _super.call(this, props);
+    _this.addStack = function () {
+      var statItem = _this.props.statItem;
+      var y_axises = statItem.y_axises;
+      var defaultStack = {
+        type: STAT_TYPE.BAR_STACK,
+        column_groupby_numeric_columns: null
+      };
+      var updatedStacks = y_axises ? [].concat(_toConsumableArray(y_axises), [defaultStack]) : [defaultStack];
+      _this.props.updateStatItem(Object.assign({}, _this.props.statItem, {
+        y_axises: updatedStacks
+      }));
+    };
+    _this.deleteStack = function (index) {
+      var statItem = _this.props.statItem;
+      var y_axises = statItem.y_axises;
+      if (!Array.isArray(y_axises) || !y_axises[index]) return;
+      var updatedStacks = _toConsumableArray(y_axises);
+      updatedStacks.splice(index, 1);
+      if (updatedStacks.length === 0) {
+        updatedStacks = null;
+      }
+      _this.props.updateStatItem(Object.assign({}, _this.props.statItem, {
+        y_axises: updatedStacks
+      }));
+    };
+    _this.addStackNumericSummary = function (index) {
+      var _this$props = _this.props,
+        statItem = _this$props.statItem,
+        numericColumnsOptions = _this$props.numericColumnsOptions;
+      var y_axises = statItem.y_axises;
+      var updatedStacks = Array.isArray(y_axises) && _toConsumableArray(y_axises);
+      var updatedStack = updatedStacks && updatedStacks[index];
+      if (!updatedStack) return;
+      var column_groupby_numeric_columns = updatedStack.column_groupby_numeric_columns;
+      var updatedNumericColumns = column_groupby_numeric_columns ? _toConsumableArray(column_groupby_numeric_columns) : [];
+      var newNumericColumnKey = numericColumnsOptions[0].value.key;
+      updatedNumericColumns.push({
+        column_key: newNumericColumnKey,
+        summary_method: SUMMARY_METHOD[0]
+      });
+      updatedStack.column_groupby_numeric_columns = updatedNumericColumns;
+      updatedStacks[index] = updatedStack;
+      _this.props.updateStatItem(Object.assign({}, _this.props.statItem, {
+        y_axises: updatedStacks
+      }));
+    };
+    _this.modifyStackGroupbyNumericColumn = function (stackIndex, _ref) {
+      var numericColumnIndex = _ref.numericColumnIndex,
+        columnOption = _ref.columnOption;
+      var statItem = _this.props.statItem;
+      var y_axises = statItem.y_axises;
+      var updatedStacks = Array.isArray(y_axises) && _toConsumableArray(y_axises);
+      var updatedStack = updatedStacks && updatedStacks[stackIndex];
+      var updatedNumericColumns = updatedStack && updatedStack.column_groupby_numeric_columns;
+      var updatedNumericColumn = updatedNumericColumns && updatedNumericColumns[numericColumnIndex];
+      if (!updatedNumericColumn) return;
+      updatedNumericColumn.column_key = columnOption.value.key;
+      _this.props.updateStatItem(Object.assign({}, _this.props.statItem, {
+        y_axises: updatedStacks
+      }));
+    };
+    _this.deleteStackNumericColumn = function (stackIndex, _ref2) {
+      var numericColumnIndex = _ref2.numericColumnIndex;
+      var statItem = _this.props.statItem;
+      var y_axises = statItem.y_axises;
+      var updatedStacks = Array.isArray(y_axises) && _toConsumableArray(y_axises);
+      var updatedStack = updatedStacks && updatedStacks[stackIndex];
+      var updatedNumericColumns = updatedStack && updatedStack.column_groupby_numeric_columns;
+      if (!updatedNumericColumns || !updatedNumericColumns[numericColumnIndex]) return;
+      updatedNumericColumns.splice(numericColumnIndex, 1);
+      _this.props.updateStatItem(Object.assign({}, _this.props.statItem, {
+        y_axises: updatedStacks
+      }));
+    };
+    _this.modifyStackSummaryMethod = function (stackIndex, _ref3) {
+      var numericColumnIndex = _ref3.numericColumnIndex,
+        summaryMethodOption = _ref3.summaryMethodOption;
+      var statItem = _this.props.statItem;
+      var y_axises = statItem.y_axises;
+      var updatedStacks = Array.isArray(y_axises) && _toConsumableArray(y_axises);
+      var updatedStack = updatedStacks && updatedStacks[stackIndex];
+      var updatedNumericColumns = updatedStack && updatedStack.column_groupby_numeric_columns;
+      var updatedNumericColumn = updatedNumericColumns && updatedNumericColumns[numericColumnIndex];
+      if (!updatedNumericColumn) return;
+      updatedNumericColumn.summary_method = summaryMethodOption.value;
+      _this.props.updateStatItem(Object.assign({}, _this.props.statItem, {
+        y_axises: updatedStacks
+      }));
+    };
+    _this.getSummaryMethodsOptions = function () {
+      return SUMMARY_METHOD.map(function (m) {
+        return {
+          value: m,
+          label: /*#__PURE__*/React.createElement("span", {
+            className: 'select-module select-module-name'
+          }, intl.get(STATISTICS_COUNT_SHOW[m]))
+        };
+      });
+    };
+    _this.summaryMethodsOptions = _this.getSummaryMethodsOptions();
+    return _this;
+  }
+  _createClass(StacksSettings, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      var statItem = this.props.statItem;
+      var y_axises = statItem.y_axises;
+      return /*#__PURE__*/React.createElement(Fragment, null, Array.isArray(y_axises) && y_axises.map(function (yAxis, index) {
+        return /*#__PURE__*/React.createElement(StackItemSettings, {
+          key: "stack-settings-".concat(index),
+          statItem: statItem,
+          stack: yAxis,
+          label: "".concat(intl.get('Stack')).concat(index + 1),
+          numericColumnsOptions: _this2.props.numericColumnsOptions,
+          summaryMethodsOptions: _this2.summaryMethodsOptions,
+          deleteStack: function deleteStack() {
+            return _this2.deleteStack(index);
+          },
+          addNumericSummary: function addNumericSummary() {
+            return _this2.addStackNumericSummary(index);
+          },
+          modifyGroupbyNumericColumn: function modifyGroupbyNumericColumn(numericColumnIndex, columnOption) {
+            return _this2.modifyStackGroupbyNumericColumn(index, {
+              numericColumnIndex: numericColumnIndex,
+              columnOption: columnOption
+            });
+          },
+          modifySummaryMethod: function modifySummaryMethod(numericColumnIndex, summaryMethodOption) {
+            return _this2.modifyStackSummaryMethod(index, {
+              numericColumnIndex: numericColumnIndex,
+              summaryMethodOption: summaryMethodOption
+            });
+          },
+          deleteNumericColumn: function deleteNumericColumn(numericColumnIndex) {
+            return _this2.deleteStackNumericColumn(index, {
+              numericColumnIndex: numericColumnIndex
+            });
+          }
+        });
+      }), /*#__PURE__*/React.createElement("div", {
+        className: "statistics-add-stack",
+        onClick: this.addStack
+      }, /*#__PURE__*/React.createElement("span", {
+        className: "dtable-font dtable-icon-add-table"
+      }), /*#__PURE__*/React.createElement("span", {
+        className: "add-stack-description"
+      }, intl.get('Add_new_stack'))));
+    }
+  }]);
+  return StacksSettings;
+}(Component);
+export default StacksSettings;

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

@@ -0,0 +1,273 @@
+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';
+import ToggleSetting from '../../public-setting/toggle-setting';
+import IndToggleSetting from '../../public-setting/ind-toggle-setting';
+import AxisLabelPosition from '../../public-setting/axis-label-position-setting';
+import MinMaxSetting from '../../public-setting/min-max-setting';
+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 = {
+        y_axis_auto_range: y_axis_auto_range == undefined ? false : !y_axis_auto_range
+      };
+      _this.props.updateStatItem(Object.assign({}, statItem, updated));
+    };
+    _this.onYAxisMinChange = function (min) {
+      var newMin = parseInt(min);
+      if (!Number.isNaN(newMin)) {
+        var statItem = _this.props.statItem;
+        var updated = {
+          y_axis_min: newMin
+        };
+        _this.props.updateStatItem(Object.assign({}, statItem, updated));
+      }
+    };
+    _this.onYAxisMaxChange = function (max) {
+      var newMax = parseInt(max);
+      if (!Number.isNaN(newMax)) {
+        var statItem = _this.props.statItem;
+        var updated = {
+          y_axis_max: newMax
+        };
+        _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;
+      return /*#__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
+      }));
+    };
+    _this.onToggleDisplayData = function () {
+      var statItem = _this.props.statItem;
+      var _ref2 = statItem || {},
+        display_data = _ref2.display_data;
+      var updated = {
+        display_data: !display_data
+      };
+      _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 = {
+        show_x_axis_label: !show_x_axis_label,
+        x_axis_label_position: !show_x_axis_label ? 'center' : null
+      };
+      var newStatItem = Object.assign({}, statItem, updated);
+      eventBus.dispatch(LABEL_CONFIG_CHANGED, 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 = {
+        show_y_axis_label: !show_y_axis_label,
+        y_axis_label_position: !show_y_axis_label ? 'center' : null
+      };
+      var newStatItem = Object.assign({}, statItem, updated);
+      eventBus.dispatch(LABEL_CONFIG_CHANGED, newStatItem);
+      _this.props.updateStatItem(newStatItem);
+    };
+    _this.onSelectAxisLabelPosition = function (type, option) {
+      var updated;
+      if (type === 'x') {
+        updated = {
+          x_axis_label_position: option.value
+        };
+      } else {
+        updated = {
+          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);
+      eventBus.dispatch(LABEL_CONFIG_CHANGED, 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 = {
+        display_each_block_data: !display_each_block_data
+      };
+      _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;
+      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.onChangeLabelFontSize = function (label_font_size) {
+      var statItem = _this.props.statItem;
+      _this.props.updateStatItem(Object.assign({}, statItem, {
+        label_font_size: 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;
+      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;
+      if (columnType == CellType.SINGLE_SELECT) {
+        return true;
+      }
+      return false;
+    };
+    _this.getColorOptions = function () {
+      var options = PIE_COLOR_OPTIONS.map(function (item, index) {
+        return {
+          value: item,
+          label: /*#__PURE__*/React.createElement("span", {
+            className: 'select-module select-module-name'
+          }, intl.get(PIE_COlOR_OPTIONS_MAP[item]))
+        };
+      });
+      return options;
+    };
+    _this.updateTitleName = function (setting) {
+      var statItem = _this.props.statItem;
+      _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);
+export default BarChartStyle;

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

@@ -0,0 +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 = {
+        display_percentage: !display_percentage
+      };
+      _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.onToggleYAxisAutoRange = function () {
+      var statItem = _this.props.statItem;
+      var _ref2 = statItem || {},
+        y_axis_auto_range = _ref2.y_axis_auto_range;
+      var updated = {
+        y_axis_auto_range: y_axis_auto_range == undefined ? false : !y_axis_auto_range
+      };
+      _this.props.updateStatItem(Object.assign({}, statItem, updated));
+    };
+    _this.onYAxisMinChange = function (min) {
+      var newMin = parseInt(min);
+      if (!Number.isNaN(newMin)) {
+        var statItem = _this.props.statItem;
+        var updated = {
+          y_axis_min: newMin
+        };
+        _this.props.updateStatItem(Object.assign({}, statItem, updated));
+      }
+    };
+    _this.onYAxisMaxChange = function (max) {
+      var newMax = parseInt(max);
+      if (!Number.isNaN(newMax)) {
+        var statItem = _this.props.statItem;
+        var updated = {
+          y_axis_max: newMax
+        };
+        _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);
+export default CompletenessStyle;