sea-chart 0.0.1

package/lib/components/settings/widgets/date-summary-item.js

@@ -0,0 +1,126 @@
+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 { FormGroup, Label } from 'reactstrap';
+import DTableSelect from "dtable-ui-component/lib/DTableSelect";
+import { getTableById } from 'dtable-utils';
+import { STATISTIC_TYPE, STATISTIC_DATE_SUMMARY_CALCULATION_METHOD, STATISTIC_SUMMARY_SHOW, STATISTIC_DATE_COLUMN_LIST } from '../../../constants';
+import intl from '../../../intl';
+var DateSummaryItem = /*#__PURE__*/function (_Component) {
+  _inherits(DateSummaryItem, _Component);
+  var _super = _createSuper(DateSummaryItem);
+  function DateSummaryItem(_props) {
+    var _this;
+    _classCallCheck(this, DateSummaryItem);
+    _this = _super.call(this, _props);
+    _this.initSummaryMethodOptions = function () {
+      _this.summaryMethodOptions = STATISTIC_DATE_SUMMARY_CALCULATION_METHOD.map(function (item) {
+        return {
+          value: item,
+          label: intl.get(STATISTIC_SUMMARY_SHOW[item])
+        };
+      });
+    };
+    _this.initDateColumnOptions = function (props) {
+      var tables = props.tables,
+        statistic = props.statistic;
+      var table_id = statistic.config.table_id;
+      var selectedTable = getTableById(tables, table_id);
+      if (!selectedTable) {
+        _this.dateColumnOptions = [];
+        return;
+      }
+      var columns = selectedTable.columns;
+      _this.dateColumnOptions = columns.filter(function (column) {
+        return STATISTIC_DATE_COLUMN_LIST.includes(column.type);
+      }).map(function (column) {
+        return {
+          value: column.key,
+          label: column.name
+        };
+      });
+    };
+    _this.onToggleExpand = function () {
+      _this.setState({
+        isExpand: !_this.state.isExpand
+      });
+    };
+    _this.state = {
+      isExpand: true
+    };
+    _this.initDateColumnOptions(_props);
+    _this.initSummaryMethodOptions();
+    return _this;
+  }
+  _createClass(DateSummaryItem, [{
+    key: "UNSAFE_componentWillReceiveProps",
+    value: function UNSAFE_componentWillReceiveProps(nextProps) {
+      var statistic = nextProps.statistic;
+      if (statistic.config.table_id !== this.props.statistic.config.table_id) {
+        this.initDateColumnOptions(nextProps);
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      var _this$props = this.props,
+        index = _this$props.index,
+        statistic = _this$props.statistic,
+        value = _this$props.value;
+      var type = statistic.config.type;
+      var column_key = value.column_key,
+        summary_method = value.summary_method;
+      var selectedColumnOption = this.dateColumnOptions.find(function (option) {
+        return option.value === column_key;
+      });
+      var selectedSummaryMethodOption = this.summaryMethodOptions.find(function (option) {
+        return option.value === summary_method;
+      });
+      var isExpand = this.state.isExpand;
+      return /*#__PURE__*/React.createElement(FormGroup, {
+        style: {
+          paddingBottom: isExpand ? '14px' : '7px'
+        },
+        className: "seastatistic-parameter-item container"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "numeric-summary-item"
+      }, /*#__PURE__*/React.createElement("span", {
+        className: "title-item title-left"
+      }, /*#__PURE__*/React.createElement("i", {
+        onClick: this.onToggleExpand,
+        className: "icon dtable-font ".concat(isExpand ? 'dtable-icon-drop-down' : 'dtable-icon-right-slide')
+      }), /*#__PURE__*/React.createElement("label", null, (type === STATISTIC_TYPE.TABLE ? intl.get('Summary_field') : intl.get('Numeric_field')) + (1 + index))), /*#__PURE__*/React.createElement("span", {
+        className: "title-item title-right"
+      }, index !== 0 && /*#__PURE__*/React.createElement("i", {
+        className: "dtable-font dtable-icon-fork-number close-icon",
+        onClick: function onClick() {
+          return _this2.props.onDelete(index);
+        }
+      }))), /*#__PURE__*/React.createElement("div", {
+        className: "".concat(isExpand ? 'expanded-numeric-summary-content' : 'collapsed-numeric-summary-content')
+      }, /*#__PURE__*/React.createElement(FormGroup, {
+        className: "seastatistic-parameter-item numeric-column"
+      }, /*#__PURE__*/React.createElement(DTableSelect, {
+        value: selectedColumnOption,
+        placeholder: intl.get('Select_a_column'),
+        onChange: function onChange(option) {
+          return _this2.props.onColumnOptionChange(option, index);
+        },
+        options: this.dateColumnOptions
+      })), /*#__PURE__*/React.createElement(FormGroup, {
+        className: "seastatistic-parameter-item summary-method"
+      }, /*#__PURE__*/React.createElement(Label, null, intl.get('Summary_method')), /*#__PURE__*/React.createElement(DTableSelect, {
+        value: selectedSummaryMethodOption,
+        onChange: function onChange(option) {
+          return _this2.props.onSummaryMethodChange(option, index);
+        },
+        options: this.summaryMethodOptions
+      }))));
+    }
+  }]);
+  return DateSummaryItem;
+}(Component);
+export default DateSummaryItem;

package/lib/components/settings/widgets/display-values-settings/index.css

@@ -0,0 +1,13 @@
+.seastatistic-settings .display-value-settings {
+  margin-bottom: 12px;
+}
+
+.seastatistic-settings .display-value-settings .custom-switch {
+  width: 100%;
+  justify-content: space-between;
+}
+
+.seastatistic-settings .display-value-settings .custom-switch .custom-switch-description {
+  flex: 1;
+  white-space: unset !important;
+}

package/lib/components/settings/widgets/display-values-settings/index.js

@@ -0,0 +1,37 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import React, { useCallback } from 'react';
+import DTableSwitch from "dtable-ui-component/lib/DTableSwitch";
+import { FormGroup } from 'reactstrap';
+import { FontSizeSettings } from '../font-settings';
+import { eventStopPropagation } from '../../../../utils';
+import intl from '../../../../intl';
+import './index.css';
+var DisplayValuesSettings = function DisplayValuesSettings(_ref) {
+  var isShowValueKey = _ref.isShowValueKey,
+    isShowValue = _ref.isShowValue,
+    fontSizeKey = _ref.fontSizeKey,
+    fontSize = _ref.fontSize,
+    onChange = _ref.onChange;
+  var onDisplayValueChange = useCallback(function (event) {
+    eventStopPropagation(event);
+    onChange && onChange(_defineProperty({}, isShowValueKey, !isShowValue));
+  }, [isShowValueKey, isShowValue, onChange]);
+  var onFontSizeChange = useCallback(function (value) {
+    onChange && onChange(_defineProperty({}, fontSizeKey, value));
+  }, [fontSizeKey, onChange]);
+  return /*#__PURE__*/React.createElement(FormGroup, {
+    className: "seastatistic-parameter-item"
+  }, /*#__PURE__*/React.createElement(DTableSwitch, {
+    switchClassName: "display-value-settings",
+    checked: isShowValue,
+    disabled: false,
+    placeholder: intl.get('Display_value'),
+    onChange: onDisplayValueChange
+  }), isShowValue && /*#__PURE__*/React.createElement(FontSizeSettings, {
+    title: intl.get('Label_font_size'),
+    fontSize: fontSize,
+    defaultFontSize: 12,
+    modifyFontSize: onFontSizeChange
+  }));
+};
+export default DisplayValuesSettings;

package/lib/components/settings/widgets/divider/index.css

@@ -0,0 +1,4 @@
+.seastatistic-settings .seastatistic-divider {
+  border-bottom: 1px solid #e4e4e4;
+  margin-bottom: 14px;
+}

package/lib/components/settings/widgets/divider/index.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import classnames from 'classnames';
+import './index.css';
+var Divider = function Divider(_ref) {
+  var className = _ref.className;
+  return /*#__PURE__*/React.createElement("div", {
+    className: classnames('seastatistic-divider', className)
+  });
+};
+export default Divider;

package/lib/components/settings/widgets/font-settings/font-size-settings.js

@@ -0,0 +1,31 @@
+import React, { useCallback, useMemo } from 'react';
+import classnames from 'classnames';
+import { FormGroup, Label } from 'reactstrap';
+import { isNumber } from 'dtable-utils';
+import PixelEditor from '../../../pixel-editor';
+import intl from '../../../../intl';
+var FontSizeSettings = function FontSizeSettings(_ref) {
+  var fontSize = _ref.fontSize,
+    defaultFontSize = _ref.defaultFontSize,
+    modifyFontSize = _ref.modifyFontSize,
+    className = _ref.className,
+    title = _ref.title;
+  var initialFontSize = useMemo(function () {
+    if (isNumber(fontSize)) return fontSize;
+    if (isNumber(defaultFontSize)) return defaultFontSize;
+    return null;
+  }, [fontSize, defaultFontSize]);
+  var onChange = useCallback(function (currFontSize) {
+    var parsedFontSize = parseInt(currFontSize);
+    if (!fontSize && !parsedFontSize || parsedFontSize === fontSize) return;
+    modifyFontSize(parsedFontSize);
+  }, [fontSize, modifyFontSize]);
+  return /*#__PURE__*/React.createElement(FormGroup, {
+    className: classnames('seastatistic-setting-item font-size-setting', className)
+  }, /*#__PURE__*/React.createElement(Label, null, title || intl.get('Font_size')), /*#__PURE__*/React.createElement(PixelEditor, {
+    pixel: initialFontSize,
+    defaultPixel: defaultFontSize,
+    modifyPixel: onChange
+  }));
+};
+export default FontSizeSettings;

package/lib/components/settings/widgets/font-settings/font-weight-settings.js

@@ -0,0 +1,46 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import classnames from 'classnames';
+import { FormGroup, Label } from 'reactstrap';
+import DTableCustomizeSelect from "dtable-ui-component/lib/DTableCustomizeSelect";
+import { generatorCommonOptions } from '../../../../utils';
+import intl from '../../../../intl';
+var FontWeightSettings = function FontWeightSettings(props) {
+  var _useState = useState(props.fontWeight),
+    _useState2 = _slicedToArray(_useState, 2),
+    fontWeight = _useState2[0],
+    setFontWeight = _useState2[1];
+  var mountRef = useRef(false);
+  useEffect(function () {
+    if (!mountRef.current) {
+      mountRef.current = true;
+    } else {
+      setFontWeight(props.fontWeight);
+    }
+  }, [props.fontWeight]);
+  var fontWeightOptions = useMemo(function () {
+    return generatorCommonOptions(props.supportFontWeights, fontWeight);
+  }, [props.supportFontWeights, fontWeight]);
+  var selectedFontWeightOption = useMemo(function () {
+    return {
+      label: /*#__PURE__*/React.createElement("span", {
+        className: "common-selected-font"
+      }, fontWeight)
+    };
+  }, [fontWeight]);
+  var modifyFontWeight = function modifyFontWeight(fontWeightOption) {
+    var nextFontWeight = fontWeightOption.value;
+    if (nextFontWeight === fontWeight) return;
+    setFontWeight(nextFontWeight);
+    props.modifyFontWeight(nextFontWeight);
+  };
+  return /*#__PURE__*/React.createElement(FormGroup, {
+    className: classnames('setting-item seastatistic-font-weight-setting')
+  }, /*#__PURE__*/React.createElement(Label, null, intl.get('Font_weight')), /*#__PURE__*/React.createElement(DTableCustomizeSelect, {
+    className: "seastatistic-font-weight",
+    value: selectedFontWeightOption,
+    options: fontWeightOptions,
+    onSelectOption: modifyFontWeight
+  }));
+};
+export default FontWeightSettings;

package/lib/components/settings/widgets/font-settings/index.js

@@ -0,0 +1,3 @@
+import FontSizeSettings from './font-size-settings';
+import FontWeightSettings from './font-weight-settings';
+export { FontSizeSettings, FontWeightSettings };

package/lib/components/settings/widgets/group-by.js

@@ -0,0 +1,168 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+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 classnames from 'classnames';
+import { Label, FormGroup } from 'reactstrap';
+import DTableSelect from "dtable-ui-component/lib/DTableSelect";
+import { CellType, COLUMNS_ICON_CONFIG, DATE_COLUMN_OPTIONS, getTableById, getTableColumnByKey } from 'dtable-utils';
+import { STATISTIC_SUPPORT_COLUMNS, DATE_GRANULATES, GEOLOCATION_GRANULATES, STATISTIC_SUMMARY_SHOW, GEOLOCATION_FORMAT_MAP } from '../../../constants';
+import intl from '../../../intl';
+var GroupBy = /*#__PURE__*/function (_Component) {
+  _inherits(GroupBy, _Component);
+  var _super = _createSuper(GroupBy);
+  function GroupBy(_props) {
+    var _this;
+    _classCallCheck(this, GroupBy);
+    _this = _super.call(this, _props);
+    _this.generatorGranulatesOptions = function (granulates) {
+      return granulates.map(function (item) {
+        return {
+          value: item,
+          label: /*#__PURE__*/React.createElement("span", {
+            className: "select-module select-module-name ml-0"
+          }, intl.get(STATISTIC_SUMMARY_SHOW[item]))
+        };
+      });
+    };
+    _this.initOptions = function (props) {
+      var tables = props.tables,
+        selectedTableId = props.selectedTableId;
+      _this.selectedTable = getTableById(tables, selectedTableId);
+      var columns = _this.selectedTable && Array.isArray(_this.selectedTable.columns) ? _this.selectedTable.columns : [];
+      _this.validColumns = _this.getAvailableColumns(columns);
+      _this.columnOptions = _this.getColumnOptions(_this.validColumns);
+    };
+    _this.initGeolocationOptions = function (props) {
+      var selectedColumnKey = props.selectedColumnKey;
+      if (!selectedColumnKey) {
+        _this.geolocationGranulatesOptions = [];
+        return;
+      }
+      var groupbyColumn = getTableColumnByKey(_this.selectedTable, selectedColumnKey);
+      if (!groupbyColumn) {
+        _this.geolocationGranulatesOptions = [];
+        return;
+      }
+      var _ref = groupbyColumn.data || {},
+        geo_format = _ref.geo_format;
+      if (geo_format === GEOLOCATION_FORMAT_MAP.PROVINCE) {
+        _this.geolocationGranulatesOptions = _this.generatorGranulatesOptions(GEOLOCATION_GRANULATES.filter(function (item) {
+          return item === GEOLOCATION_FORMAT_MAP.PROVINCE;
+        }));
+        return;
+      }
+      if (geo_format === GEOLOCATION_FORMAT_MAP.PROVINCE_CITY) {
+        _this.geolocationGranulatesOptions = _this.generatorGranulatesOptions(GEOLOCATION_GRANULATES.filter(function (item) {
+          return item === 'district';
+        }));
+        return;
+      }
+      if (geo_format === GEOLOCATION_FORMAT_MAP.COUNTRY_REGION || geo_format === GEOLOCATION_FORMAT_MAP.LNG_LAT) {
+        _this.geolocationGranulatesOptions = [];
+        return;
+      }
+      _this.geolocationGranulatesOptions = _this.generatorGranulatesOptions(GEOLOCATION_GRANULATES);
+    };
+    _this.getAvailableColumns = function (columns) {
+      if (!columns || !Array.isArray(columns)) return [];
+      return columns.filter(function (column) {
+        return STATISTIC_SUPPORT_COLUMNS.includes(column.type);
+      });
+    };
+    _this.getColumnOptions = function (columns) {
+      return columns.map(function (column) {
+        return {
+          value: column,
+          label: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+            className: "header-icon"
+          }, /*#__PURE__*/React.createElement("i", {
+            className: COLUMNS_ICON_CONFIG[column.type]
+          })), /*#__PURE__*/React.createElement("span", {
+            className: 'select-module select-module-name ml-0'
+          }, column.name))
+        };
+      });
+    };
+    _this.renderSelector = function () {
+      var selectedColumnKey = _this.props.selectedColumnKey;
+      var selectedOption = selectedColumnKey ? _this.columnOptions.find(function (option) {
+        return option.value.key === selectedColumnKey;
+      }) : null;
+      return /*#__PURE__*/React.createElement(DTableSelect, {
+        value: selectedOption,
+        classNamePrefix: "select-column",
+        options: _this.columnOptions,
+        onChange: _this.props.onGroupByChange,
+        noOptionsMessage: function noOptionsMessage() {
+          return /*#__PURE__*/React.createElement("span", null, intl.get('No_column'));
+        }
+      });
+    };
+    _this.renderGroupbyDateGranulates = function () {
+      var selectedDateGranularity = _this.props.selectedDateGranularity;
+      var selectedOption = _this.dateGranulatesOptions.find(function (option) {
+        return option.value === selectedDateGranularity;
+      });
+      return /*#__PURE__*/React.createElement("div", {
+        className: "seastatistic-parameter-item mt-4"
+      }, /*#__PURE__*/React.createElement(DTableSelect, {
+        value: selectedOption,
+        options: _this.dateGranulatesOptions,
+        onChange: _this.props.onGroupbyDateGranularityChange
+      }));
+    };
+    _this.renderGroupbyGeolocationGranulates = function () {
+      var selectedGeolocationGranularity = _this.props.selectedGeolocationGranularity;
+      var selectedOption = _this.geolocationGranulatesOptions.find(function (option) {
+        return option.value === selectedGeolocationGranularity;
+      });
+      return /*#__PURE__*/React.createElement("div", {
+        className: "seastatistic-parameter-item mt-4"
+      }, /*#__PURE__*/React.createElement(DTableSelect, {
+        value: selectedOption,
+        options: _this.geolocationGranulatesOptions,
+        onChange: _this.props.onGroupbyGeolocationGranularityChange
+      }));
+    };
+    _this.renderGroupBy = function () {
+      var selectedColumnKey = _this.props.selectedColumnKey;
+      if (!selectedColumnKey) return null;
+      var groupbyColumn = getTableColumnByKey(_this.selectedTable, selectedColumnKey);
+      if (!groupbyColumn) return null;
+      var groupbyColumnType = groupbyColumn.type;
+      return /*#__PURE__*/React.createElement(React.Fragment, null, DATE_COLUMN_OPTIONS.includes(groupbyColumnType) && _this.renderGroupbyDateGranulates(), groupbyColumnType === CellType.GEOLOCATION && _this.geolocationGranulatesOptions.length > 0 && _this.renderGroupbyGeolocationGranulates());
+    };
+    _this.dateGranulatesOptions = _this.generatorGranulatesOptions(DATE_GRANULATES);
+    _this.initOptions(_props);
+    _this.initGeolocationOptions(_props);
+    return _this;
+  }
+  _createClass(GroupBy, [{
+    key: "UNSAFE_componentWillReceiveProps",
+    value: function UNSAFE_componentWillReceiveProps(nextProps) {
+      var selectedTableId = nextProps.selectedTableId,
+        selectedColumnKey = nextProps.selectedColumnKey;
+      if (selectedTableId !== this.props.selectedTableId) {
+        this.initOptions(nextProps);
+      }
+      if (selectedColumnKey !== this.props.selectedColumnKey) {
+        this.initGeolocationOptions(nextProps);
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+        label = _this$props.label,
+        className = _this$props.className;
+      return /*#__PURE__*/React.createElement(FormGroup, {
+        className: classnames('seastatistic-setting-item table-setting', _defineProperty({}, className, className))
+      }, /*#__PURE__*/React.createElement(Label, null, label), this.renderSelector(), this.renderGroupBy());
+    }
+  }]);
+  return GroupBy;
+}(Component);
+export default GroupBy;

package/lib/components/settings/widgets/label-color.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { FormGroup, Label } from 'reactstrap';
+import { LABEL_COLORS } from '../../../constants';
+import intl from '../../../intl';
+function LabelColor(props) {
+  var labelColor = props.labelColor;
+  return /*#__PURE__*/React.createElement(FormGroup, {
+    className: "seastatistic-parameter-item"
+  }, /*#__PURE__*/React.createElement(Label, null, intl.get('Color')), /*#__PURE__*/React.createElement("div", {
+    className: "d-flex align-items-center justify-content-between"
+  }, LABEL_COLORS.map(function (item, index) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: "y-axis-label-color-".concat(index)
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "colorinput"
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "colorinput-color statistic-colorinput d-flex justify-content-center align-items-center",
+      onClick: function onClick(event) {
+        return props.onChange(event, item);
+      },
+      style: {
+        backgroundColor: item,
+        borderColor: item
+      }
+    }, item === (labelColor || LABEL_COLORS[0]) && /*#__PURE__*/React.createElement("i", {
+      className: "dtable-font dtable-icon-check-mark statistic-check-mark"
+    }))));
+  })));
+}
+export default LabelColor;

package/lib/components/settings/widgets/min-max-setting.js

@@ -0,0 +1,64 @@
+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 { FormGroup, Label, Input } from 'reactstrap';
+import intl from '../../../intl';
+var MinMaxSetting = /*#__PURE__*/function (_Component) {
+  _inherits(MinMaxSetting, _Component);
+  var _super = _createSuper(MinMaxSetting);
+  function MinMaxSetting(props) {
+    var _this;
+    _classCallCheck(this, MinMaxSetting);
+    _this = _super.call(this, props);
+    _this.onMinChange = function (e) {
+      var min = e.target.value;
+      _this.setState({
+        min: min
+      }, function () {
+        _this.props.onMinChange(min);
+      });
+    };
+    _this.onMaxChange = function (e) {
+      var max = e.target.value;
+      _this.setState({
+        max: max
+      }, function () {
+        _this.props.onMaxChange(max);
+      });
+    };
+    _this.state = {
+      min: props.min,
+      max: props.max
+    };
+    return _this;
+  }
+  _createClass(MinMaxSetting, [{
+    key: "render",
+    value: function render() {
+      var _this$state = this.state,
+        min = _this$state.min,
+        max = _this$state.max;
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FormGroup, {
+        className: "mb-2"
+      }, /*#__PURE__*/React.createElement(Label, {
+        for: "min"
+      }, intl.get('Min')), /*#__PURE__*/React.createElement(Input, {
+        id: "min",
+        type: "number",
+        value: min,
+        onChange: this.onMinChange
+      })), /*#__PURE__*/React.createElement(FormGroup, null, /*#__PURE__*/React.createElement(Label, {
+        for: "max"
+      }, intl.get('Max')), /*#__PURE__*/React.createElement(Input, {
+        id: "max",
+        type: "number",
+        value: max,
+        onChange: this.onMaxChange
+      })));
+    }
+  }]);
+  return MinMaxSetting;
+}(Component);
+export default MinMaxSetting;

package/lib/components/settings/widgets/mininum-slice-percent.js

@@ -0,0 +1,72 @@
+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 { FormGroup, Label } from 'reactstrap';
+import NumberInput from '../../../components/number-input';
+import intl from '../../../intl';
+var MiniNumSlicePercent = /*#__PURE__*/function (_Component) {
+  _inherits(MiniNumSlicePercent, _Component);
+  var _super = _createSuper(MiniNumSlicePercent);
+  function MiniNumSlicePercent(props) {
+    var _this;
+    _classCallCheck(this, MiniNumSlicePercent);
+    _this = _super.call(this, props);
+    _this.replaceNumberNotAllowInput = function (value) {
+      if (!value) {
+        return '';
+      }
+      value = value.replace(/。/g, '.');
+      value = value.replace(/-/g, '');
+      return value.replace(/[^.-\d,]/g, '');
+    };
+    _this.onKeyDown = function (event) {
+      if (event.keyCode === 13) {
+        event.preventDefault();
+        event.target.blur();
+      }
+    };
+    _this.onPercentChange = function (event) {
+      var value = _this.replaceNumberNotAllowInput(event.target.value);
+      if (value === _this.state.value) return;
+      _this.setState({
+        value: value
+      }, function () {
+        _this.onCommit();
+      });
+    };
+    _this.onBlur = function () {
+      _this.onCommit();
+    };
+    _this.onCommit = function () {
+      var value = _this.state.value;
+      if (value === _this.props.value) return;
+      var validValue = value || value === 0 ? Number(value) : 1.5;
+      _this.props.onChange(validValue);
+    };
+    _this.state = {
+      value: props.value
+    };
+    return _this;
+  }
+  _createClass(MiniNumSlicePercent, [{
+    key: "render",
+    value: function render() {
+      var value = this.props.value;
+      return /*#__PURE__*/React.createElement(FormGroup, {
+        className: "seastatistic-parameter-item"
+      }, /*#__PURE__*/React.createElement(Label, null, intl.get('Minimum_slice_percent')), /*#__PURE__*/React.createElement(NumberInput, {
+        value: value,
+        onChange: this.onPercentChange,
+        step: 0.1,
+        min: 0,
+        max: 100,
+        onBlur: this.onBlur,
+        onKeyDown: this.onKeyDown
+      }));
+    }
+  }]);
+  return MiniNumSlicePercent;
+}(Component);
+export default MiniNumSlicePercent;