dtable-statistic 4.4.24 → 5.0.0-alpha.0

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

@@ -1,289 +0,0 @@
-"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 HorizontalBarChartStyle extends _react.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
-      };
-      const newStatItem = Object.assign({}, statItem, updated);
-      eventBus.dispatch(_constants.LABEL_CONFIG_CHANGED, newStatItem);
-      this.props.updateStatItem(newStatItem);
-    };
-    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
-      };
-      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 === 'vertical') {
-        updated = {
-          vertical_axis_label_position: option.value
-        };
-      } else {
-        updated = {
-          horizontal_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.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 = _constants.LABEL_COLORS[0];
-      } else {
-        horizontal_axis_label_color = null;
-      }
-      this.props.updateStatItem(Object.assign({}, statItem, {
-        horizontal_axis_show_label,
-        horizontal_axis_label_color
-      }));
-    };
-    this.onToggleDisplayData = () => {
-      let {
-        statItem
-      } = this.props;
-      let {
-        display_data
-      } = statItem || {};
-      const updated = {
-        display_data: !display_data
-      };
-      this.props.updateStatItem(Object.assign({}, statItem, 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.onChangeLabelFontSize = label_font_size => {
-      const {
-        statItem
-      } = this.props;
-      this.props.updateStatItem(Object.assign({}, statItem, {
-        label_font_size
-      }));
-    };
-    this.onToggleHAxisAutoRange = () => {
-      const {
-        statItem
-      } = this.props;
-      const {
-        h_axis_auto_range
-      } = statItem || {};
-      const updated = {
-        h_axis_auto_range: h_axis_auto_range === undefined || h_axis_auto_range === null ? false : !h_axis_auto_range
-      };
-      this.props.updateStatItem(Object.assign({}, statItem, updated));
-    };
-    this.onHAxisMinChange = min => {
-      const newMin = parseInt(min);
-      if (!Number.isNaN(newMin)) {
-        const {
-          statItem
-        } = this.props;
-        const updated = {
-          h_axis_min: newMin
-        };
-        this.props.updateStatItem(Object.assign({}, statItem, updated));
-      }
-    };
-    this.onHAxisMaxChange = max => {
-      const newMax = parseInt(max);
-      if (!Number.isNaN(newMax)) {
-        const {
-          statItem
-        } = this.props;
-        const updated = {
-          h_axis_max: newMax
-        };
-        this.props.updateStatItem(Object.assign({}, statItem, updated));
-      }
-    };
-    this.updateTitleName = setting => {
-      const {
-        statItem
-      } = this.props;
-      this.props.updateStatItem(Object.assign({}, statItem, setting));
-    };
-    this.displayColorSelector = () => {
-      const {
-        statItem,
-        getTableById
-      } = this.props;
-      const {
-        type,
-        table_id,
-        column_groupby_column_key
-      } = statItem;
-      if (type === _constants.STAT_TYPE.HORIZONTAL_GROUP_BAR || type === _constants.STAT_TYPE.STACKED_HORIZONTAL_BAR) {
-        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;
-      }
-      return false;
-    };
-    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 || h_axis_auto_range === null ? true : h_axis_auto_range;
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: "mt-1"
-      }, /*#__PURE__*/_react.default.createElement(_toggleSetting.default, {
-        isChecked: checked,
-        handleToggleChange: this.onToggleHAxisAutoRange,
-        label: _reactIntlUniversal.default.get('Auto_range')
-      }), !checked && /*#__PURE__*/_react.default.createElement(_minMaxSetting.default, {
-        min: h_axis_min,
-        max: h_axis_max,
-        onMinChange: this.onHAxisMinChange,
-        onMaxChange: this.onHAxisMaxChange
-      }));
-    };
-  }
-  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.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
-      className: "statistic-chart-parameter-item"
-    }, /*#__PURE__*/_react.default.createElement("label", null, _reactIntlUniversal.default.get('Vertical_axis')), /*#__PURE__*/_react.default.createElement(_toggleSetting.default, {
-      isChecked: show_vertical_axis_label || false,
-      handleToggleChange: this.onToggleVerticalAxisLabel,
-      label: _reactIntlUniversal.default.get('Display_title')
-    }), show_vertical_axis_label && chartType === _constants.STAT_TYPE.STACKED_HORIZONTAL_BAR && /*#__PURE__*/_react.default.createElement(_customTitleSetting.default, {
-      titleName: title_name,
-      updateTitleName: this.updateTitleName
-    }), show_vertical_axis_label && /*#__PURE__*/_react.default.createElement(_axisLabelPositionSetting.default, {
-      statItem: statItem,
-      axisType: 'vertical',
-      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('Horizontal_axis')), /*#__PURE__*/_react.default.createElement(_toggleSetting.default, {
-      isChecked: show_horizontal_axis_label || false,
-      handleToggleChange: this.onToggleHorizontalAxisLabel,
-      label: _reactIntlUniversal.default.get('Display_title')
-    }), show_horizontal_axis_label && /*#__PURE__*/_react.default.createElement(_axisLabelPositionSetting.default, {
-      statItem: statItem,
-      axisType: 'horizontal',
-      onSelectAxisLabelPosition: this.onSelectAxisLabelPosition
-    }), chartType !== _constants.STAT_TYPE.STACKED_HORIZONTAL_BAR && this.renderAutoRange()), this.displayColorSelector() && /*#__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,
-      updateChart: this.props.updateStatItem
-    })), /*#__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,
-      handleToggleChange: this.onToggleDisplayData,
-      label: chartType === _constants.STAT_TYPE.STACKED_HORIZONTAL_BAR ? _reactIntlUniversal.default.get('Display_stack_total_value') : _reactIntlUniversal.default.get('Display_data')
-    }), display_data && /*#__PURE__*/_react.default.createElement(_labelFontSizeEditor.default, {
-      className: "mt-3",
-      fontSize: label_font_size,
-      onChangeFontSize: this.onChangeLabelFontSize
-    })), chartType === _constants.STAT_TYPE.HORIZONTAL_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
-    })), chartType === _constants.STAT_TYPE.STACKED_HORIZONTAL_BAR && /*#__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: !!statItem.display_each_block_data,
-      label: _reactIntlUniversal.default.get('Display_value_of_each_block'),
-      handleToggleChange: this.onToggleDisplayEachBlockData
-    }))));
-  }
-}
-var _default = exports.default = HorizontalBarChartStyle;

package/es/stat-editor/stat-settings/basic-chart-settings/style-setting/label-font-size-editor.js

@@ -1,58 +0,0 @@
-"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 _reactstrap = require("reactstrap");
-class LabelFontSizeEditor extends _react.Component {
-  constructor() {
-    super(...arguments);
-    this.onChange = evt => {
-      const value = evt.target.value.trim().replace(/[^0-9]/g, '');
-      const fontSize = value ? Number(value) : null;
-      if (fontSize === this.props.fontSize) {
-        return;
-      }
-      if (fontSize) {
-        this.props.onChangeFontSize(fontSize);
-      }
-    };
-    this.onKeyDown = e => {
-      if (e.key === 'Enter') {
-        e.preventDefault();
-        e.target.blur();
-      }
-    };
-  }
-  render() {
-    const {
-      fontSize,
-      className,
-      id,
-      labelText
-    } = this.props;
-    const inputID = id || 'label-font-size';
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: "label-font-size-editor ".concat(className ? className : '')
-    }, /*#__PURE__*/_react.default.createElement(_reactstrap.Form, null, /*#__PURE__*/_react.default.createElement(_reactstrap.FormGroup, null, /*#__PURE__*/_react.default.createElement(_reactstrap.Label, {
-      for: inputID
-    }, labelText || _reactIntlUniversal.default.get('Label_font_size')), /*#__PURE__*/_react.default.createElement("div", {
-      className: "font-size-editor-wrapper"
-    }, /*#__PURE__*/_react.default.createElement("input", {
-      type: "text",
-      className: "form-control",
-      id: inputID,
-      defaultValue: fontSize,
-      onBlur: this.onChange,
-      onKeyDown: this.onKeyDown
-    }), /*#__PURE__*/_react.default.createElement("div", {
-      className: "font-size-unit"
-    }, /*#__PURE__*/_react.default.createElement("span", null, "px"))))));
-  }
-}
-var _default = exports.default = LabelFontSizeEditor;