dtable-statistic 4.4.24-alpha.9 → 5.0.0

package/es/stat-editor/stat-settings/advance-chart-settings/map-settings.js

@@ -0,0 +1,119 @@
+"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 _baseSettings = _interopRequireDefault(require("../public-setting/base-settings"));
+var _columnSettings = _interopRequireDefault(require("../public-setting/column-settings"));
+var _summarySettings = _interopRequireDefault(require("./summary-settings"));
+var _mapSetting = _interopRequireDefault(require("./style-setting/map-setting"));
+var _columnUtils = require("../../../utils/column-utils");
+var _constants = require("../../../constants");
+var _mapLevel = _interopRequireDefault(require("../map/map-level"));
+var _mapProvinceCity = _interopRequireDefault(require("../map/map-province-city"));
+class MapSettings extends _react.Component {
+  constructor(props) {
+    super(props);
+    this.getColumns = columns => {
+      if (!Array.isArray(columns) || columns.length === 0) return [];
+      return columns.filter(column => (0, _columnUtils.isMapColumn)(column));
+    };
+    this.getSelectedGeoColumnOption = () => {
+      return this.geoColumnsOptions.find(option => option.value.key === this.props.statItem.geo_column);
+    };
+    this.onSelectGeoColumn = option => {
+      const {
+        geo_column
+      } = this.props.statItem;
+      const new_geo_column = option.value.key;
+      if (new_geo_column === geo_column) return;
+      this.props.updateStatItem(Object.assign({}, this.props.statItem, {
+        geo_column: new_geo_column,
+        geolocation_granularity: _constants.GEOLOCATION_GRANULARITY.PROVINCE
+      }));
+    };
+    const {
+      columns: _columns,
+      getColumnsOptions
+    } = props;
+    const geoColumns = this.getColumns(_columns);
+    this.geoColumnsOptions = getColumnsOptions(geoColumns);
+  }
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    if (nextProps.selectedTableId !== this.props.selectedTableId) {
+      const {
+        columns,
+        getColumnsOptions
+      } = nextProps;
+      const geoColumns = this.getColumns(columns);
+      this.geoColumnsOptions = getColumnsOptions(geoColumns);
+    }
+  }
+  render() {
+    const {
+      getTables,
+      getViews,
+      settingType,
+      selectedTableId,
+      statItem,
+      getColumnsOptions,
+      numericColumns
+    } = this.props;
+    const {
+      view_id: selectedViewId
+    } = statItem;
+    const selectedGeoColumnOption = this.getSelectedGeoColumnOption();
+    if (settingType === 'style') {
+      return /*#__PURE__*/_react.default.createElement(_mapSetting.default, {
+        statItem: statItem,
+        onChangeColor: this.props.onChangeColor,
+        updateStatItem: this.props.updateStatItem
+      });
+    }
+    return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_baseSettings.default, {
+      statItem: statItem,
+      selectedTableId: selectedTableId,
+      selectedViewId: selectedViewId,
+      getTables: getTables,
+      getViews: getViews,
+      getTableById: this.props.getTableById,
+      getConvertedChart: this.props.getConvertedChart,
+      updateStatItem: this.props.updateStatItem
+    }), /*#__PURE__*/_react.default.createElement("div", {
+      className: "statistic-chart-parameter-divider"
+    }), /*#__PURE__*/_react.default.createElement(_mapLevel.default, {
+      statItem: statItem,
+      updateStatItem: this.props.updateStatItem
+    }), /*#__PURE__*/_react.default.createElement(_mapProvinceCity.default, {
+      statItem: statItem,
+      updateStatItem: 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("label", null, "\u4F4D\u7F6E\u5B57\u6BB5"), /*#__PURE__*/_react.default.createElement(_columnSettings.default, {
+      columnsOptions: this.geoColumnsOptions,
+      selectedColumnOption: selectedGeoColumnOption,
+      onChangeSelectedColumn: this.onSelectGeoColumn
+    })), /*#__PURE__*/_react.default.createElement("div", {
+      className: "statistic-chart-parameter-divider"
+    }), /*#__PURE__*/_react.default.createElement(_summarySettings.default, {
+      label: '归总方法',
+      statItem: statItem,
+      selectedTableId: selectedTableId,
+      numericColumns: numericColumns,
+      summaryType: statItem.summary_type,
+      summaryMethod: statItem.summary_method,
+      summaryColumn: statItem.summary_column,
+      getColumnsOptions: getColumnsOptions,
+      onChangeSummaryType: this.props.onChangeSummaryType,
+      onSelectSummaryColumn: this.props.onSelectSummaryColumn,
+      onSelectSummaryMethod: this.props.onSelectSummaryMethod
+    }));
+  }
+}
+var _default = exports.default = MapSettings;

package/es/stat-editor/stat-settings/advance-chart-settings/mirror-settings.js

@@ -0,0 +1,132 @@
+"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 _baseSettings = _interopRequireDefault(require("../public-setting/base-settings"));
+var _columnSettings = _interopRequireDefault(require("../public-setting/column-settings"));
+var _summarySettings = _interopRequireDefault(require("./summary-settings"));
+var _toggleSetting = _interopRequireDefault(require("../public-setting/toggle-setting"));
+var _columnUtils = require("../../../utils/column-utils");
+class MirrorSettings extends _react.Component {
+  constructor(props) {
+    super(props);
+    this.getSelectedStatColumnOption = () => {
+      return this.statColumnsOptions.find(option => option.value.key === this.props.statItem.column);
+    };
+    this.getSelectedGroupColumnOption = () => {
+      return this.groupColumnsOptions.find(option => option.value.key === this.props.statItem.group_column);
+    };
+    this.onSelectStatColumn = option => {
+      const {
+        column
+      } = this.props.statItem;
+      const new_column = option.value.key;
+      if (new_column === column) return;
+      this.props.updateStatItem(Object.assign({}, this.props.statItem, {
+        column: new_column
+      }));
+    };
+    this.onSelectGroupColumn = option => {
+      const {
+        group_column
+      } = this.props.statItem;
+      const new_column = option.value.key;
+      if (new_column === group_column) return;
+      this.props.updateStatItem(Object.assign({}, this.props.statItem, {
+        group_column: new_column
+      }));
+    };
+    this.handleToggleChange = event => {
+      this.props.updateStatItem(Object.assign({}, this.props.statItem, {
+        is_transpose: event.target.checked
+      }));
+    };
+    const {
+      columns,
+      getColumnsOptions
+    } = props;
+    const statColumns = columns.filter(column => (0, _columnUtils.isMirrorColumn)(column));
+    const groupColumns = columns.filter(column => column.type === 'single-select');
+    this.statColumnsOptions = getColumnsOptions(statColumns);
+    this.groupColumnsOptions = getColumnsOptions(groupColumns);
+  }
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    if (nextProps.selectedTableId !== this.props.selectedTableId) {
+      const {
+        columns,
+        getColumnsOptions
+      } = nextProps;
+      const statColumns = columns.filter(column => (0, _columnUtils.isMirrorColumn)(column));
+      this.statColumnsOptions = getColumnsOptions(statColumns);
+      const groupColumns = columns.filter(column => column.type === 'single-select');
+      this.groupColumnsOptions = getColumnsOptions(groupColumns);
+    }
+  }
+  render() {
+    const {
+      getTables,
+      getViews,
+      settingType,
+      selectedTableId,
+      statItem,
+      getColumnsOptions,
+      numericColumns
+    } = this.props;
+    const selectedColumnOption = this.getSelectedStatColumnOption();
+    const selectedGroupColumnOption = this.getSelectedGroupColumnOption();
+    if (settingType === 'style') {
+      return null;
+    }
+    return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_baseSettings.default, {
+      statItem: statItem,
+      selectedTableId: statItem.table_id,
+      selectedViewId: statItem.view_id,
+      getTables: getTables,
+      getViews: getViews,
+      getTableById: this.props.getTableById,
+      getConvertedChart: this.props.getConvertedChart,
+      updateStatItem: 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("label", null, _reactIntlUniversal.default.get('Statistic_field')), /*#__PURE__*/_react.default.createElement(_columnSettings.default, {
+      columnsOptions: this.statColumnsOptions,
+      selectedColumnOption: selectedColumnOption,
+      onChangeSelectedColumn: this.onSelectStatColumn
+    })), /*#__PURE__*/_react.default.createElement("div", {
+      className: "statistic-chart-parameter-item"
+    }, /*#__PURE__*/_react.default.createElement(_toggleSetting.default, {
+      label: _reactIntlUniversal.default.get('Transpose'),
+      isChecked: statItem.is_transpose,
+      handleToggleChange: this.handleToggleChange
+    })), /*#__PURE__*/_react.default.createElement("div", {
+      className: "statistic-chart-parameter-item"
+    }, /*#__PURE__*/_react.default.createElement("label", null, _reactIntlUniversal.default.get('Column_grouping_field')), /*#__PURE__*/_react.default.createElement(_columnSettings.default, {
+      columnsOptions: this.groupColumnsOptions,
+      selectedColumnOption: selectedGroupColumnOption,
+      onChangeSelectedColumn: this.onSelectGroupColumn
+    })), /*#__PURE__*/_react.default.createElement("div", {
+      className: "statistic-chart-parameter-divider"
+    }), /*#__PURE__*/_react.default.createElement(_summarySettings.default, {
+      label: _reactIntlUniversal.default.get('Summary_method'),
+      statItem: statItem,
+      selectedTableId: selectedTableId,
+      numericColumns: numericColumns,
+      summaryType: statItem.summary_type,
+      summaryMethod: statItem.summary_method,
+      summaryColumn: statItem.summary_column,
+      getColumnsOptions: getColumnsOptions,
+      onChangeSummaryType: this.props.onChangeSummaryType,
+      onSelectSummaryColumn: this.props.onSelectSummaryColumn,
+      onSelectSummaryMethod: this.props.onSelectSummaryMethod
+    }));
+  }
+}
+var _default = exports.default = MirrorSettings;

package/es/stat-editor/stat-settings/advance-chart-settings/style-setting/combination-style-setting.js

@@ -0,0 +1,240 @@
+"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 _toggleSetting = _interopRequireDefault(require("../../public-setting/toggle-setting"));
+var _axisLabelPositionSetting = _interopRequireDefault(require("../../public-setting/axis-label-position-setting"));
+var _indToggleSetting = _interopRequireDefault(require("../../public-setting/ind-toggle-setting"));
+var _minMaxSetting = _interopRequireDefault(require("../../public-setting/min-max-setting"));
+var _labelFontSizeEditor = _interopRequireDefault(require("../../basic-chart-settings/style-setting/label-font-size-editor"));
+var _constants = require("../../../../constants");
+class CombinationChartStyle extends _react.Component {
+  constructor() {
+    super(...arguments);
+    this.renderShowAxisLabel = (type, position) => {
+      const {
+        statItem
+      } = this.props;
+      let {
+        show_x_axis_label
+      } = statItem || {};
+      if (type === 'x') {
+        return /*#__PURE__*/_react.default.createElement(_toggleSetting.default, {
+          isChecked: show_x_axis_label || false,
+          handleToggleChange: this.onToggleXAxisLabel,
+          label: _reactIntlUniversal.default.get('Display_title')
+        });
+      } else {
+        const isChecked = this.props.statItem["show_y_axis_".concat(position, "_label")] || false;
+        return /*#__PURE__*/_react.default.createElement(_toggleSetting.default, {
+          isChecked: isChecked,
+          handleToggleChange: () => this.onToggleYAxisLabel(position),
+          label: _reactIntlUniversal.default.get('Display_title')
+        });
+      }
+    };
+    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 = position => {
+      let {
+        statItem,
+        eventBus
+      } = this.props;
+      let updated = {
+        ["show_y_axis_".concat(position, "_label")]: !statItem["show_y_axis_".concat(position, "_label")],
+        ["y_axis_".concat(position, "_label_position")]: !statItem["show_y_axis_".concat(position, "_label")] ? 'center' : null
+      };
+      const newStatItem = Object.assign({}, statItem, updated);
+      eventBus.dispatch(_constants.LABEL_CONFIG_CHANGED, newStatItem);
+      this.props.updateStatItem(newStatItem);
+    };
+    this.onSelectAxisLabelPosition = (type, option, position) => {
+      let updated;
+      if (type === 'x') {
+        updated = {
+          x_axis_label_position: option.value
+        };
+      } else {
+        updated = {
+          ["y_axis_".concat(position, "_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.onToggleYAxisAutoRange = key => {
+      const {
+        statItem
+      } = this.props;
+      const updated = {
+        [key]: statItem[key] === undefined || statItem[key] === null ? false : !statItem[key]
+      };
+      this.props.updateStatItem(Object.assign({}, statItem, updated));
+    };
+    this.onYAxisMinChange = (key, min) => {
+      const newMin = parseInt(min);
+      if (!Number.isNaN(newMin)) {
+        const {
+          statItem
+        } = this.props;
+        const updated = {
+          [key]: newMin
+        };
+        this.props.updateStatItem(Object.assign({}, statItem, updated));
+      }
+    };
+    this.onYAxisMaxChange = (key, max) => {
+      const newMax = parseInt(max);
+      if (!Number.isNaN(newMax)) {
+        const {
+          statItem
+        } = this.props;
+        const updated = {
+          [key]: newMax
+        };
+        this.props.updateStatItem(Object.assign({}, statItem, updated));
+      }
+    };
+    this.onToggleDisplayData = () => {
+      const {
+        statItem
+      } = this.props;
+      const {
+        display_data
+      } = statItem || {};
+      const updated = {
+        display_data: !display_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.renderLeftAutoRange = () => {
+      const {
+        statItem
+      } = this.props;
+      const {
+        y_axis_auto_range_left,
+        y_axis_min_left,
+        y_axis_max_left
+      } = statItem;
+      const checked = y_axis_auto_range_left === undefined || y_axis_auto_range_left === null ? true : y_axis_auto_range_left;
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: "mt-1"
+      }, /*#__PURE__*/_react.default.createElement(_toggleSetting.default, {
+        isChecked: checked,
+        handleToggleChange: () => {
+          this.onToggleYAxisAutoRange('y_axis_auto_range_left');
+        },
+        label: _reactIntlUniversal.default.get('Auto_range')
+      }), !checked && /*#__PURE__*/_react.default.createElement(_minMaxSetting.default, {
+        min: y_axis_min_left,
+        max: y_axis_max_left,
+        onMinChange: this.onYAxisMinChange.bind(this, 'y_axis_min_left'),
+        onMaxChange: this.onYAxisMaxChange.bind(this, 'y_axis_max_left')
+      }));
+    };
+    this.renderRightAutoRange = () => {
+      const {
+        statItem
+      } = this.props;
+      const {
+        y_axis_auto_range_right,
+        y_axis_min_right,
+        y_axis_max_right
+      } = statItem;
+      const checked = y_axis_auto_range_right === undefined || y_axis_auto_range_right === null ? true : y_axis_auto_range_right;
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: "mt-1"
+      }, /*#__PURE__*/_react.default.createElement(_toggleSetting.default, {
+        isChecked: checked,
+        handleToggleChange: () => {
+          this.onToggleYAxisAutoRange('y_axis_auto_range_right');
+        },
+        label: _reactIntlUniversal.default.get('Auto_range')
+      }), !checked && /*#__PURE__*/_react.default.createElement(_minMaxSetting.default, {
+        min: y_axis_min_right,
+        max: y_axis_max_right,
+        onMinChange: this.onYAxisMinChange.bind(this, 'y_axis_min_right'),
+        onMaxChange: this.onYAxisMaxChange.bind(this, 'y_axis_max_right')
+      }));
+    };
+  }
+  render() {
+    const {
+      statItem
+    } = this.props;
+    const {
+      show_x_axis_label,
+      show_y_axis_left_label,
+      show_y_axis_right_label,
+      display_data = false,
+      label_font_size = 12
+    } = 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')), this.renderShowAxisLabel('x'), 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(primary)')), this.renderShowAxisLabel('y', 'left'), show_y_axis_left_label && /*#__PURE__*/_react.default.createElement(_axisLabelPositionSetting.default, {
+      statItem: statItem,
+      axisType: 'y_left',
+      onSelectAxisLabelPosition: (type, option) => this.onSelectAxisLabelPosition(type, option, 'left')
+    }), this.renderLeftAutoRange()), /*#__PURE__*/_react.default.createElement("div", {
+      className: "statistic-chart-parameter-item"
+    }, /*#__PURE__*/_react.default.createElement("label", null, _reactIntlUniversal.default.get('Y-axis(secondary)')), this.renderShowAxisLabel('y', 'right'), show_y_axis_right_label && /*#__PURE__*/_react.default.createElement(_axisLabelPositionSetting.default, {
+      statItem: statItem,
+      axisType: 'y_right',
+      onSelectAxisLabelPosition: (type, option) => this.onSelectAxisLabelPosition(type, option, 'right')
+    }), this.renderRightAutoRange()), /*#__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,
+      handleToggleChange: this.onToggleDisplayData,
+      label: _reactIntlUniversal.default.get('Display_data')
+    }), display_data && /*#__PURE__*/_react.default.createElement(_labelFontSizeEditor.default, {
+      className: "mt-3",
+      fontSize: label_font_size,
+      onChangeFontSize: this.onChangeLabelFontSize
+    })));
+  }
+}
+var _default = exports.default = CombinationChartStyle;

package/es/stat-editor/stat-settings/advance-chart-settings/style-setting/heat-map-settings.js

@@ -0,0 +1,89 @@
+"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");
+var _colorGroupSelector = _interopRequireDefault(require("../../color-setting/color-group-selector"));
+var _constants = require("../../../../constants");
+class HeatMapStyleSettings extends _react.Component {
+  constructor() {
+    super(...arguments);
+    this.renderColorSetting = () => {
+      const {
+        onChangeColor,
+        statItem
+      } = this.props;
+      return /*#__PURE__*/_react.default.createElement(_colorGroupSelector.default, {
+        currentColor: statItem.data_color,
+        onChangeColor: onChangeColor
+      });
+    };
+    this.onSubmit = evt => {
+      const {
+        statItem
+      } = this.props;
+      const key = evt.target.name;
+      const value = evt.target.value.trim().replace(/[^0-9]/g, '');
+      const newValue = value ? Number(value) : null;
+      if (newValue === statItem[key]) {
+        return;
+      }
+      if (newValue) {
+        this.props.updateStatItem(Object.assign({}, statItem, {
+          [key]: newValue
+        }));
+      }
+    };
+    this.onKeyDown = e => {
+      if (e.key === 'Enter') {
+        e.preventDefault();
+        e.target.blur();
+      }
+    };
+  }
+  render() {
+    const {
+      statItem
+    } = this.props;
+    const {
+      grid_size,
+      grid_distance
+    } = statItem;
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, this.renderColorSetting(), /*#__PURE__*/_react.default.createElement("div", {
+      className: "statistic-chart-parameter-divider"
+    }), /*#__PURE__*/_react.default.createElement("div", {
+      className: "statistic-chart-parameter-item"
+    }, /*#__PURE__*/_react.default.createElement(_reactstrap.Label, {
+      for: "grid-size"
+    }, _reactIntlUniversal.default.get('Grid_size')), /*#__PURE__*/_react.default.createElement(_reactstrap.InputGroup, null, /*#__PURE__*/_react.default.createElement(_reactstrap.Input, {
+      type: "text",
+      id: "grid-size",
+      name: "grid_size",
+      defaultValue: grid_size || _constants.DEFAULT_GRID_SIZE,
+      onBlur: this.onSubmit,
+      onKeyDown: this.onKeyDown
+    }), /*#__PURE__*/_react.default.createElement(_reactstrap.InputGroupAddon, {
+      addonType: "append"
+    }, "px"))), /*#__PURE__*/_react.default.createElement("div", {
+      className: "statistic-chart-parameter-item"
+    }, /*#__PURE__*/_react.default.createElement(_reactstrap.Label, {
+      for: "grid-distance"
+    }, _reactIntlUniversal.default.get('Grid_distance')), /*#__PURE__*/_react.default.createElement(_reactstrap.InputGroup, null, /*#__PURE__*/_react.default.createElement(_reactstrap.Input, {
+      type: "text",
+      id: "grid-distance",
+      name: "grid_distance",
+      defaultValue: grid_distance || _constants.DEFAULT_GRID_DISTANCE,
+      onBlur: this.onSubmit,
+      onKeyDown: this.onKeyDown
+    }), /*#__PURE__*/_react.default.createElement(_reactstrap.InputGroupAddon, {
+      addonType: "append"
+    }, "px"))));
+  }
+}
+var _default = exports.default = HeatMapStyleSettings;