dtable-statistic 4.4.24-alpha.9 → 5.0.0

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

@@ -0,0 +1,87 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _reactIntlUniversal = _interopRequireDefault(require("react-intl-universal"));
+var _numericSummaryItem = _interopRequireDefault(require("../public-setting/numeric-summary-item"));
+class StackItemSettings extends _react.Component {
+  constructor(props) {
+    super(props);
+    this.onToggleExpand = () => {
+      this.setState({
+        expanded: !this.state.expanded
+      });
+    };
+    this.renderGroupbyNumericColumns = () => {
+      const {
+        statItem,
+        stack,
+        numericColumnsOptions,
+        summaryMethodsOptions
+      } = this.props;
+      const {
+        column_groupby_numeric_columns
+      } = stack;
+      return Array.isArray(column_groupby_numeric_columns) && column_groupby_numeric_columns.map((item, index) => {
+        return /*#__PURE__*/_react.default.createElement(_numericSummaryItem.default, {
+          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
+    };
+  }
+  render() {
+    const {
+      label,
+      numericColumnsOptions
+    } = this.props;
+    const {
+      expanded
+    } = this.state;
+    return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _classnames.default)('statistic-chart-parameter-item', {
+        collapsible: !expanded
+      })
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "statistic-y-axis-title"
+    }, /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement("i", {
+      onClick: this.onToggleExpand,
+      className: (0, _classnames.default)('dtable-font', 'statistic-y-axis-title-expand-icon', {
+        'dtable-icon-drop-down': expanded,
+        'dtable-icon-right-slide': !expanded
+      })
+    }), /*#__PURE__*/_react.default.createElement("label", null, label)), /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement("i", {
+      onClick: this.props.deleteStack,
+      className: "dtable-font dtable-icon-fork-number"
+    }))), expanded && /*#__PURE__*/_react.default.createElement("div", {
+      className: "stack-settings-content-wrapper"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "statistics-add-number"
+    }, this.renderGroupbyNumericColumns()), Array.isArray(numericColumnsOptions) && numericColumnsOptions.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
+      className: "statistics-add-number-column",
+      onClick: this.props.addNumericSummary
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      className: "number-column-item dtable-font dtable-icon-add-table"
+    }), /*#__PURE__*/_react.default.createElement("span", {
+      className: "number-column-item add-number-column-description"
+    }, _reactIntlUniversal.default.get('Add_new_numeric_column'))))));
+  }
+}
+var _default = exports.default = StackItemSettings;

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

@@ -0,0 +1,187 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactIntlUniversal = _interopRequireDefault(require("react-intl-universal"));
+var _stackItemSettings = _interopRequireDefault(require("./stack-item-settings"));
+var _constants = require("../../../constants");
+class StacksSettings extends _react.Component {
+  constructor(props) {
+    super(props);
+    this.addStack = () => {
+      const {
+        statItem
+      } = this.props;
+      const {
+        y_axises
+      } = statItem;
+      const defaultStack = {
+        type: _constants.STAT_TYPE.BAR_STACK,
+        column_groupby_numeric_columns: null
+      };
+      const updatedStacks = y_axises ? [...y_axises, defaultStack] : [defaultStack];
+      this.props.updateStatItem(Object.assign({}, this.props.statItem, {
+        y_axises: updatedStacks
+      }));
+    };
+    this.deleteStack = index => {
+      const {
+        statItem
+      } = this.props;
+      const {
+        y_axises
+      } = statItem;
+      if (!Array.isArray(y_axises) || !y_axises[index]) return;
+      let updatedStacks = [...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 = index => {
+      const {
+        statItem,
+        numericColumnsOptions
+      } = this.props;
+      const {
+        y_axises
+      } = statItem;
+      let updatedStacks = Array.isArray(y_axises) && [...y_axises];
+      let updatedStack = updatedStacks && updatedStacks[index];
+      if (!updatedStack) return;
+      const {
+        column_groupby_numeric_columns
+      } = updatedStack;
+      let updatedNumericColumns = column_groupby_numeric_columns ? [...column_groupby_numeric_columns] : [];
+      const newNumericColumnKey = numericColumnsOptions[0].value.key;
+      updatedNumericColumns.push({
+        column_key: newNumericColumnKey,
+        summary_method: _constants.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 = (stackIndex, _ref) => {
+      let {
+        numericColumnIndex,
+        columnOption
+      } = _ref;
+      const {
+        statItem
+      } = this.props;
+      const {
+        y_axises
+      } = statItem;
+      let updatedStacks = Array.isArray(y_axises) && [...y_axises];
+      let updatedStack = updatedStacks && updatedStacks[stackIndex];
+      let updatedNumericColumns = updatedStack && updatedStack.column_groupby_numeric_columns;
+      let 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 = (stackIndex, _ref2) => {
+      let {
+        numericColumnIndex
+      } = _ref2;
+      const {
+        statItem
+      } = this.props;
+      const {
+        y_axises
+      } = statItem;
+      let updatedStacks = Array.isArray(y_axises) && [...y_axises];
+      let updatedStack = updatedStacks && updatedStacks[stackIndex];
+      let 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 = (stackIndex, _ref3) => {
+      let {
+        numericColumnIndex,
+        summaryMethodOption
+      } = _ref3;
+      const {
+        statItem
+      } = this.props;
+      const {
+        y_axises
+      } = statItem;
+      let updatedStacks = Array.isArray(y_axises) && [...y_axises];
+      let updatedStack = updatedStacks && updatedStacks[stackIndex];
+      let updatedNumericColumns = updatedStack && updatedStack.column_groupby_numeric_columns;
+      let 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 = () => {
+      return _constants.SUMMARY_METHOD.map(m => {
+        return {
+          value: m,
+          label: /*#__PURE__*/_react.default.createElement("span", {
+            className: 'select-module select-module-name'
+          }, _reactIntlUniversal.default.get(_constants.STATISTICS_COUNT_SHOW[m]))
+        };
+      });
+    };
+    this.summaryMethodsOptions = this.getSummaryMethodsOptions();
+  }
+  render() {
+    const {
+      statItem
+    } = this.props;
+    const {
+      y_axises
+    } = statItem;
+    return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, Array.isArray(y_axises) && y_axises.map((yAxis, index) => {
+      return /*#__PURE__*/_react.default.createElement(_stackItemSettings.default, {
+        key: "stack-settings-".concat(index),
+        statItem: statItem,
+        stack: yAxis,
+        label: "".concat(_reactIntlUniversal.default.get('Stack')).concat(index + 1),
+        numericColumnsOptions: this.props.numericColumnsOptions,
+        summaryMethodsOptions: this.summaryMethodsOptions,
+        deleteStack: () => this.deleteStack(index),
+        addNumericSummary: () => this.addStackNumericSummary(index),
+        modifyGroupbyNumericColumn: (numericColumnIndex, columnOption) => this.modifyStackGroupbyNumericColumn(index, {
+          numericColumnIndex,
+          columnOption
+        }),
+        modifySummaryMethod: (numericColumnIndex, summaryMethodOption) => this.modifyStackSummaryMethod(index, {
+          numericColumnIndex,
+          summaryMethodOption
+        }),
+        deleteNumericColumn: numericColumnIndex => this.deleteStackNumericColumn(index, {
+          numericColumnIndex
+        })
+      });
+    }), /*#__PURE__*/_react.default.createElement("div", {
+      className: "statistics-add-stack",
+      onClick: this.addStack
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      className: "dtable-font dtable-icon-add-table"
+    }), /*#__PURE__*/_react.default.createElement("span", {
+      className: "add-stack-description"
+    }, _reactIntlUniversal.default.get('Add_new_stack'))));
+  }
+}
+var _default = exports.default = StacksSettings;

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

@@ -0,0 +1,300 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactIntlUniversal = _interopRequireDefault(require("react-intl-universal"));
+var _dtableUtils = require("dtable-utils");
+var _toggleSetting = _interopRequireDefault(require("../../public-setting/toggle-setting"));
+var _indToggleSetting = _interopRequireDefault(require("../../public-setting/ind-toggle-setting"));
+var _axisLabelPositionSetting = _interopRequireDefault(require("../../public-setting/axis-label-position-setting"));
+var _minMaxSetting = _interopRequireDefault(require("../../public-setting/min-max-setting"));
+var _colorUseTypeSelector = _interopRequireDefault(require("../../color-setting/color-use-type-selector"));
+var _labelFontSizeEditor = _interopRequireDefault(require("./label-font-size-editor"));
+var _customTitleSetting = _interopRequireDefault(require("../../public-setting/custom-title-setting"));
+var _constants = require("../../../../constants");
+class BarChartStyle extends _react.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 || y_axis_auto_range === null ? false : !y_axis_auto_range
+      };
+      this.props.updateStatItem(Object.assign({}, statItem, updated));
+    };
+    this.onYAxisMinChange = min => {
+      const newMin = parseInt(min);
+      if (!Number.isNaN(newMin)) {
+        const {
+          statItem
+        } = this.props;
+        const updated = {
+          y_axis_min: newMin
+        };
+        this.props.updateStatItem(Object.assign({}, statItem, updated));
+      }
+    };
+    this.onYAxisMaxChange = max => {
+      const newMax = parseInt(max);
+      if (!Number.isNaN(newMax)) {
+        const {
+          statItem
+        } = this.props;
+        const updated = {
+          y_axis_max: newMax
+        };
+        this.props.updateStatItem(Object.assign({}, statItem, updated));
+      }
+    };
+    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 || y_axis_auto_range === null ? true : y_axis_auto_range;
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: "mt-1"
+      }, /*#__PURE__*/_react.default.createElement(_toggleSetting.default, {
+        isChecked: checked,
+        handleToggleChange: this.onToggleYAxisAutoRange,
+        label: _reactIntlUniversal.default.get('Auto_range')
+      }), !checked && /*#__PURE__*/_react.default.createElement(_minMaxSetting.default, {
+        min: y_axis_min,
+        max: y_axis_max,
+        onMinChange: this.onYAxisMinChange,
+        onMaxChange: this.onYAxisMaxChange
+      }));
+    };
+    this.onToggleDisplayData = () => {
+      let {
+        statItem
+      } = this.props;
+      let {
+        display_data
+      } = statItem || {};
+      const updated = {
+        display_data: !display_data
+      };
+      this.props.updateStatItem(Object.assign({}, statItem, 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
+      };
+      const newStatItem = Object.assign({}, statItem, updated);
+      eventBus.dispatch(_constants.LABEL_CONFIG_CHANGED, newStatItem);
+      this.props.updateStatItem(newStatItem);
+    };
+    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
+      };
+      const newStatItem = Object.assign({}, statItem, updated);
+      eventBus.dispatch(_constants.LABEL_CONFIG_CHANGED, newStatItem);
+      this.props.updateStatItem(newStatItem);
+    };
+    this.onSelectAxisLabelPosition = (type, option) => {
+      let updated;
+      if (type === 'x') {
+        updated = {
+          x_axis_label_position: option.value
+        };
+      } else {
+        updated = {
+          y_axis_label_position: option.value
+        };
+      }
+      const {
+        statItem,
+        eventBus
+      } = this.props;
+      const newStatItem = Object.assign({}, statItem, updated);
+      eventBus.dispatch(_constants.LABEL_CONFIG_CHANGED, newStatItem);
+      this.props.updateStatItem(newStatItem);
+    };
+    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.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 = _constants.LABEL_COLORS[0];
+      } else {
+        y_axis_label_color = null;
+      }
+      this.props.updateStatItem(Object.assign({}, statItem, {
+        y_axis_show_label,
+        y_axis_label_color
+      }));
+    };
+    this.onChangeLabelFontSize = label_font_size => {
+      const {
+        statItem
+      } = this.props;
+      this.props.updateStatItem(Object.assign({}, statItem, {
+        label_font_size
+      }));
+    };
+    this.enableUseSingleSelectColumnColorSetting = () => {
+      const {
+        getTableById,
+        statItem
+      } = this.props;
+      const {
+        table_id,
+        column_groupby_column_key
+      } = statItem;
+      if (!column_groupby_column_key) {
+        return false;
+      }
+      const table = getTableById(table_id);
+      const groupByColumn = (0, _dtableUtils.getTableColumnByKey)(table, column_groupby_column_key);
+      const {
+        type: columnType
+      } = groupByColumn;
+      if (columnType === _dtableUtils.CellType.SINGLE_SELECT) {
+        return true;
+      }
+      return false;
+    };
+    this.getColorOptions = () => {
+      const options = _constants.PIE_COLOR_OPTIONS.map((item, index) => {
+        return {
+          value: item,
+          label: /*#__PURE__*/_react.default.createElement("span", {
+            className: 'select-module select-module-name'
+          }, _reactIntlUniversal.default.get(_constants.PIE_COlOR_OPTIONS_MAP[item]))
+        };
+      });
+      return options;
+    };
+    this.updateTitleName = setting => {
+      const {
+        statItem
+      } = this.props;
+      this.props.updateStatItem(Object.assign({}, statItem, setting));
+    };
+  }
+  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.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+      className: "statistic-chart-parameter-item"
+    }, /*#__PURE__*/_react.default.createElement("label", null, _reactIntlUniversal.default.get('X-axis')), /*#__PURE__*/_react.default.createElement(_toggleSetting.default, {
+      isChecked: show_x_axis_label || false,
+      handleToggleChange: this.onToggleXAxisLabel,
+      label: _reactIntlUniversal.default.get('Display_title')
+    }), show_x_axis_label && /*#__PURE__*/_react.default.createElement(_axisLabelPositionSetting.default, {
+      statItem: statItem,
+      axisType: 'x',
+      onSelectAxisLabelPosition: this.onSelectAxisLabelPosition
+    })), /*#__PURE__*/_react.default.createElement("div", {
+      className: "statistic-chart-parameter-divider"
+    }), /*#__PURE__*/_react.default.createElement("div", {
+      className: "statistic-chart-parameter-item"
+    }, /*#__PURE__*/_react.default.createElement("label", null, _reactIntlUniversal.default.get('Y-axis')), /*#__PURE__*/_react.default.createElement(_toggleSetting.default, {
+      isChecked: show_y_axis_label || false,
+      handleToggleChange: this.onToggleYAxisLabel,
+      label: _reactIntlUniversal.default.get('Display_title')
+    }), show_y_axis_label && (this.props.enableYAxisCustomTitle || chartType === _constants.STAT_TYPE.BAR_STACK) && /*#__PURE__*/_react.default.createElement(_customTitleSetting.default, {
+      titleName: title_name || '',
+      updateTitleName: this.updateTitleName
+    }), show_y_axis_label && /*#__PURE__*/_react.default.createElement(_axisLabelPositionSetting.default, {
+      statItem: statItem,
+      axisType: 'y',
+      onSelectAxisLabelPosition: this.onSelectAxisLabelPosition
+    }), showRangeSetting && this.renderAutoRange()), this.enableUseSingleSelectColumnColorSetting() && /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+      className: "statistic-chart-parameter-divider"
+    }), /*#__PURE__*/_react.default.createElement(_colorUseTypeSelector.default, {
+      chart: statItem,
+      labelColorConfigs: labelColorConfigs,
+      updateChart: this.props.updateStatItem
+    })), !hideDisplayDataSetting && /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+      className: "statistic-chart-parameter-divider"
+    }), /*#__PURE__*/_react.default.createElement("div", {
+      className: "statistic-chart-parameter-item"
+    }, /*#__PURE__*/_react.default.createElement(_indToggleSetting.default, {
+      isChecked: display_data || false,
+      label: statItem.type === _constants.STAT_TYPE.BAR_STACK ? _reactIntlUniversal.default.get('Display_stack_total_value') : _reactIntlUniversal.default.get('Display_data'),
+      handleToggleChange: this.onToggleDisplayData
+    }), display_data && /*#__PURE__*/_react.default.createElement(_labelFontSizeEditor.default, {
+      fontSize: label_font_size,
+      className: "mt-3",
+      onChangeFontSize: this.onChangeLabelFontSize
+    }))), chartType === _constants.STAT_TYPE.BAR && /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+      className: "statistic-chart-parameter-divider"
+    }), /*#__PURE__*/_react.default.createElement(_colorUseTypeSelector.default, {
+      chart: statItem,
+      labelColorConfigs: labelColorConfigs,
+      updateChart: this.props.updateStatItem
+    })), (this.props.isDisplayEachBlockData || chartType === _constants.STAT_TYPE.BAR_STACK) && /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+      className: "statistic-chart-parameter-divider"
+    }), /*#__PURE__*/_react.default.createElement("div", {
+      className: "statistic-chart-parameter-item"
+    }, /*#__PURE__*/_react.default.createElement(_indToggleSetting.default, {
+      isChecked: display_each_block_data || false,
+      label: _reactIntlUniversal.default.get('Display_value_of_each_block'),
+      handleToggleChange: this.onToggleDisplayEachBlockData
+    }))));
+  }
+}
+var _default = exports.default = BarChartStyle;

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

@@ -0,0 +1,113 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactIntlUniversal = _interopRequireDefault(require("react-intl-universal"));
+var _indToggleSetting = _interopRequireDefault(require("../../public-setting/ind-toggle-setting"));
+var _labelFontSizeEditor = _interopRequireDefault(require("./label-font-size-editor"));
+var _toggleSetting = _interopRequireDefault(require("../../public-setting/toggle-setting"));
+var _minMaxSetting = _interopRequireDefault(require("../../public-setting/min-max-setting"));
+class CompletenessStyle extends _react.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.onChangeLabelFontSize = label_font_size => {
+      const {
+        statItem
+      } = this.props;
+      this.props.updateStatItem(Object.assign({}, statItem, {
+        label_font_size
+      }));
+    };
+    this.onToggleYAxisAutoRange = () => {
+      const {
+        statItem
+      } = this.props;
+      const {
+        y_axis_auto_range
+      } = statItem || {};
+      const updated = {
+        y_axis_auto_range: y_axis_auto_range === undefined || y_axis_auto_range === null ? false : !y_axis_auto_range
+      };
+      this.props.updateStatItem(Object.assign({}, statItem, updated));
+    };
+    this.onYAxisMinChange = min => {
+      const newMin = parseInt(min);
+      if (!Number.isNaN(newMin)) {
+        const {
+          statItem
+        } = this.props;
+        const updated = {
+          y_axis_min: newMin
+        };
+        this.props.updateStatItem(Object.assign({}, statItem, updated));
+      }
+    };
+    this.onYAxisMaxChange = max => {
+      const newMax = parseInt(max);
+      if (!Number.isNaN(newMax)) {
+        const {
+          statItem
+        } = this.props;
+        const updated = {
+          y_axis_max: newMax
+        };
+        this.props.updateStatItem(Object.assign({}, statItem, updated));
+      }
+    };
+  }
+  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 || y_axis_auto_range === null ? true : y_axis_auto_range;
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+      className: "statistic-chart-parameter-item"
+    }, /*#__PURE__*/_react.default.createElement(_indToggleSetting.default, {
+      isChecked: display_percentage || false,
+      handleToggleChange: this.onToggleDisplayData,
+      label: _reactIntlUniversal.default.get('Display_percentage')
+    }), display_percentage && /*#__PURE__*/_react.default.createElement(_labelFontSizeEditor.default, {
+      fontSize: label_font_size,
+      className: "mt-3",
+      onChangeFontSize: this.onChangeLabelFontSize
+    })), /*#__PURE__*/_react.default.createElement("div", {
+      className: "statistic-chart-parameter-item"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "mt-1"
+    }, /*#__PURE__*/_react.default.createElement(_toggleSetting.default, {
+      isChecked: checked,
+      handleToggleChange: this.onToggleYAxisAutoRange,
+      label: _reactIntlUniversal.default.get('Auto_range')
+    }), !checked && /*#__PURE__*/_react.default.createElement(_minMaxSetting.default, {
+      min: y_axis_min,
+      max: y_axis_max,
+      onMinChange: this.onYAxisMinChange,
+      onMaxChange: this.onYAxisMaxChange
+    }))));
+  }
+}
+var _default = exports.default = CompletenessStyle;