dtable-statistic 4.4.24-alpha.9 → 5.0.0

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

@@ -0,0 +1,289 @@
+"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

@@ -0,0 +1,58 @@
+"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;