sea-chart 0.0.1

package/lib/components/formatter/table/two-dimension-table.js

@@ -0,0 +1,241 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+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, { PureComponent } from 'react';
+import classnames from 'classnames';
+import PivotTableDisplayName from './pivot-table-display-name';
+import { StatisticsUtils } from '../../../utils';
+import intl from '../../../intl';
+var TwoDimensionTable = /*#__PURE__*/function (_PureComponent) {
+  _inherits(TwoDimensionTable, _PureComponent);
+  var _super = _createSuper(TwoDimensionTable);
+  function TwoDimensionTable() {
+    var _this;
+    _classCallCheck(this, TwoDimensionTable);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    _this.getCells = function (row) {
+      var _this$props = _this.props,
+        result = _this$props.result,
+        summaryColumn = _this$props.summaryColumn;
+      var pivot_columns = result.pivot_columns;
+      var cells = row.cells;
+      if (!Array.isArray(pivot_columns)) {
+        return [];
+      }
+      return pivot_columns.map(function (item) {
+        return _objectSpread(_objectSpread({}, cells[item.key]), {}, {
+          column: summaryColumn
+        });
+      });
+    };
+    _this.renderHeader = function () {
+      var _this$props2 = _this.props,
+        result = _this$props2.result,
+        groupbyColumn = _this$props2.groupbyColumn,
+        columnGroupbyColumn = _this$props2.columnGroupbyColumn,
+        selectedCell = _this$props2.selectedCell;
+      var groupName = groupbyColumn.name;
+      var _ref = columnGroupbyColumn || {},
+        rowGroupName = _ref.name;
+      var pivot_columns = result.pivot_columns;
+      var _ref2 = selectedCell || {},
+        selectRowIdx = _ref2.rowIdx,
+        selectedCellIdx = _ref2.cellIdx;
+      var isSelectedTotalCellBottom = selectRowIdx === 0 && selectedCellIdx === (Array.isArray(pivot_columns) ? pivot_columns.length : 0);
+      return /*#__PURE__*/React.createElement("thead", {
+        className: "seatable-table-header-sm"
+      }, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("th", {
+        className: "pivot-table-header"
+      }, !rowGroupName && groupName), Array.isArray(pivot_columns) && pivot_columns.map(function (item, index) {
+        var key = item.key;
+        var isSelectedHeaderBottom = selectRowIdx === 0 && selectedCellIdx === index;
+        return /*#__PURE__*/React.createElement("th", {
+          className: classnames('pivot-table-header', {
+            'selected-pivot-cell-top': isSelectedHeaderBottom
+          }),
+          key: "pivot-column-".concat(index)
+        }, /*#__PURE__*/React.createElement(PivotTableDisplayName, {
+          value: key,
+          column: columnGroupbyColumn || {}
+        }));
+      }), /*#__PURE__*/React.createElement("th", {
+        className: classnames('pivot-table-header', {
+          'selected-pivot-cell-top': isSelectedTotalCellBottom
+        })
+      }, /*#__PURE__*/React.createElement("div", null, intl.get('Total')))));
+    };
+    _this.toggleRecords = function (cell, selectedCell) {
+      if (window.isMobile) return;
+      var _ref3 = _this.props.selectedCell || {},
+        selectedRowIdx = _ref3.rowIdx,
+        selectedCellIdx = _ref3.cellIdx;
+      var rowIdx = selectedCell.rowIdx,
+        cellIdx = selectedCell.cellIdx;
+      if (rowIdx === selectedRowIdx && selectedCellIdx === cellIdx) return;
+      _this.props.toggleRecords(cell, selectedCell);
+    };
+    _this.onClickTotals = function (recordsList, selectedCell) {
+      if (window.isMobile) return;
+      var rows = recordsList.flat();
+      var total = rows.length;
+      _this.toggleRecords({
+        rows: rows,
+        total: total
+      }, selectedCell);
+    };
+    _this.renderRows = function () {
+      var _this$props3 = _this.props,
+        result = _this$props3.result,
+        groupbyColumn = _this$props3.groupbyColumn,
+        selectedCell = _this$props3.selectedCell,
+        summaryColumn = _this$props3.summaryColumn,
+        summaryMethod = _this$props3.summaryMethod;
+      var pivot_rows = result.pivot_rows,
+        pivot_columns = result.pivot_columns,
+        pivot_columns_total = result.pivot_columns_total,
+        pivot_table_total = result.pivot_table_total;
+      var _ref4 = selectedCell || {},
+        selectRowIdx = _ref4.rowIdx,
+        selectedCellIdx = _ref4.cellIdx;
+      var pivotRowsLen = Array.isArray(pivot_rows) ? pivot_rows.length : 0;
+      var pivotColumnCells = [];
+      var isSelectRowTotalCellRight = selectRowIdx === pivotRowsLen && selectedCellIdx === 0;
+      var isSelectTotal = selectRowIdx === pivotRowsLen && selectedCellIdx === (Array.isArray(pivot_columns) ? pivot_columns.length : 0);
+      var tableTotalDisplayValue = StatisticsUtils.getSummaryValueDisplayString(summaryColumn, pivot_table_total, summaryMethod);
+      var isValidTableTotalDisplayValue = StatisticsUtils.isValidValue(tableTotalDisplayValue);
+      return /*#__PURE__*/React.createElement("tbody", null, pivotRowsLen > 0 && pivot_rows.map(function (rowItem, rowIdx) {
+        var name = rowItem.name,
+          total = rowItem.total;
+        var cells = _this.getCells(rowItem);
+        var isSelectedRowNameRight = selectRowIdx === rowIdx && selectedCellIdx === 0;
+        var pivotRowCells = [];
+        var isSelectedTotalCell = selectRowIdx === rowIdx && selectedCellIdx === cells.length;
+        var isSelectedTotalCellTop = selectRowIdx - 1 === rowIdx && selectedCellIdx === cells.length;
+        var isSelectedTotalCellLeft = selectRowIdx === rowIdx && selectedCellIdx - 1 === cells.length - 1;
+        if (!Array.isArray(pivot_columns)) {
+          pivotColumnCells[rowIdx] = rowItem.rows || [];
+        }
+        var summaryDisplayValue = StatisticsUtils.getSummaryValueDisplayString(summaryColumn, total, summaryMethod);
+        var isValidSummaryDisplayValue = StatisticsUtils.isValidValue(summaryDisplayValue);
+        return /*#__PURE__*/React.createElement("tr", {
+          key: 'table-row' + rowIdx
+        }, /*#__PURE__*/React.createElement("td", {
+          className: classnames('pivot-row-name', {
+            'selected-pivot-cell-left': isSelectedRowNameRight
+          })
+        }, /*#__PURE__*/React.createElement(PivotTableDisplayName, {
+          value: name,
+          column: groupbyColumn
+        })), Array.isArray(cells) && cells.map(function (c, cellIdx) {
+          var isSelectedCell = selectRowIdx === rowIdx && selectedCellIdx === cellIdx;
+          var isSelectedCellTop = selectRowIdx - 1 === rowIdx && selectedCellIdx === cellIdx;
+          var isSelectedCellLeft = selectRowIdx === rowIdx && selectedCellIdx - 1 === cellIdx;
+          var column = c.column,
+            total = c.total;
+          var displayValue = StatisticsUtils.getSummaryValueDisplayString(column, total, summaryMethod);
+          var isValidDisplayValue = StatisticsUtils.isValidValue(displayValue);
+          if (c && Array.isArray(c.rows) && c.rows.length > 0) {
+            pivotRowCells.push.apply(pivotRowCells, _toConsumableArray(c.rows));
+            if (pivotColumnCells[cellIdx]) {
+              var _pivotColumnCells$cel;
+              (_pivotColumnCells$cel = pivotColumnCells[cellIdx]).push.apply(_pivotColumnCells$cel, _toConsumableArray(c.rows));
+            } else {
+              pivotColumnCells[cellIdx] = _toConsumableArray(c.rows);
+            }
+          }
+          return /*#__PURE__*/React.createElement("td", {
+            className: classnames('pivot-cell', {
+              'pivot-empty-cell': !isValidDisplayValue,
+              'selected-pivot-cell': isSelectedCell,
+              'selected-pivot-cell-top': isSelectedCellTop,
+              'selected-pivot-cell-left': isSelectedCellLeft
+            }),
+            key: "table-cell-".concat(cellIdx)
+            // onClick={() => this.toggleRecords(c, {rowIdx, cellIdx})}
+            ,
+            title: displayValue
+          }, isValidDisplayValue ? displayValue : /*#__PURE__*/React.createElement("i", null), /*#__PURE__*/React.createElement("span", {
+            className: classnames({
+              'selected-pivot-cell-border': isSelectedCell
+            })
+          }));
+        }), /*#__PURE__*/React.createElement("td", {
+          className: classnames('pivot-cell', {
+            'pivot-empty-cell': !isValidSummaryDisplayValue,
+            'selected-pivot-cell': isSelectedTotalCell,
+            'selected-pivot-cell-top': isSelectedTotalCellTop,
+            'selected-pivot-cell-left': isSelectedTotalCellLeft
+          })
+          // onClick={() => this.toggleRecords({ rows: Array.isArray(cells) && cells.length > 0 ? pivotRowCells : rowItem.rows, total: total }, { rowIdx, cellIdx: cells.length })}
+          ,
+          title: summaryDisplayValue
+        }, isValidSummaryDisplayValue ? summaryDisplayValue : /*#__PURE__*/React.createElement("i", null), /*#__PURE__*/React.createElement("span", {
+          className: classnames({
+            'selected-pivot-cell-border': isSelectedTotalCell
+          })
+        })));
+      }), /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
+        className: classnames('pivot-column-total', {
+          'selected-pivot-cell-left': isSelectRowTotalCellRight
+        })
+      }, /*#__PURE__*/React.createElement("div", null, intl.get('Total'))), Array.isArray(pivot_columns) && pivot_columns.map(function (c, index) {
+        // const pivotColumnCell = pivotColumnCells[index];
+        var isSelectRowTotalCell = selectRowIdx === pivot_rows.length && selectedCellIdx === index;
+        var isSelectRowTotalCellLeft = selectRowIdx === pivot_rows.length && selectedCellIdx - 1 === index;
+        var pivotColumnTotal = pivot_columns_total[c.key];
+        var totalDisplayValue = StatisticsUtils.getSummaryValueDisplayString(summaryColumn, pivotColumnTotal, summaryMethod);
+        var isValidTotalDisplayValue = StatisticsUtils.isValidValue(totalDisplayValue);
+        return /*#__PURE__*/React.createElement("td", {
+          className: classnames('pivot-cell', {
+            'pivot-empty-cell': !isValidTotalDisplayValue,
+            'selected-pivot-cell': isSelectRowTotalCell,
+            'selected-pivot-cell-left': isSelectRowTotalCellLeft
+          }),
+          key: "total-cell-".concat(index)
+          // onClick={() => this.toggleRecords({ rows: pivotColumnCell, total: pivot_columns_total[c.key] }, { rowIdx: pivot_rows.length, cellIdx: index })}
+          ,
+          title: totalDisplayValue
+        }, isValidTotalDisplayValue ? totalDisplayValue : /*#__PURE__*/React.createElement("i", null), /*#__PURE__*/React.createElement("span", {
+          className: classnames({
+            'selected-pivot-cell-border': isSelectRowTotalCell
+          })
+        }));
+      }), /*#__PURE__*/React.createElement("td", {
+        className: classnames('pivot-cell pivot-table-total', {
+          'pivot-empty-cell': !isValidTableTotalDisplayValue,
+          'selected-pivot-cell': isSelectTotal
+        })
+        // onClick={() => this.onClickTotals(pivotColumnCells, {rowIdx: pivot_rows.length, cellIdx: Array.isArray(pivot_columns) ? pivot_columns.length : 0})}
+      }, isValidTableTotalDisplayValue ? tableTotalDisplayValue : /*#__PURE__*/React.createElement("i", null), /*#__PURE__*/React.createElement("span", {
+        className: classnames({
+          'selected-pivot-cell-border': isSelectTotal
+        })
+      }))));
+    };
+    return _this;
+  }
+  _createClass(TwoDimensionTable, [{
+    key: "render",
+    value: function render() {
+      var _this$props4 = this.props,
+        groupbyColumn = _this$props4.groupbyColumn,
+        columnGroupbyColumn = _this$props4.columnGroupbyColumn;
+      if (!groupbyColumn) return '';
+      return /*#__PURE__*/React.createElement("table", {
+        className: "seastatistic-pivot-table"
+      }, /*#__PURE__*/React.createElement("caption", {
+        className: "column-title"
+      }, columnGroupbyColumn.name), /*#__PURE__*/React.createElement("caption", {
+        className: "row-title"
+      }, groupbyColumn.name), this.renderHeader(), this.renderRows());
+    }
+  }]);
+  return TwoDimensionTable;
+}(PureComponent);
+export default TwoDimensionTable;

package/lib/components/formatter/treemap.js

@@ -0,0 +1,213 @@
+import _createForOfIteratorHelper from "@babel/runtime/helpers/esm/createForOfIteratorHelper";
+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 from 'react';
+import PropTypes from 'prop-types';
+import DataSet from '@antv/data-set';
+import { each, pick } from '@antv/util';
+import { getEllipsisText } from '@antv/g2/esm/util/text';
+import { STATISTIC_SUMMARY_TYPE, EMPTY_NAME } from '../../constants';
+import { StatisticsUtils } from '../../utils';
+import { registerGeometryLabelLayout } from '../../utils/custom-g2';
+import ChartComponent from './chart-component';
+import intl from '../../intl';
+var Treemap = /*#__PURE__*/function (_ChartComponent) {
+  _inherits(Treemap, _ChartComponent);
+  var _super = _createSuper(Treemap);
+  function Treemap(props) {
+    var _this;
+    _classCallCheck(this, Treemap);
+    _this = _super.call(this, props);
+    // customize label layout: show ellipsis for long labels
+    _this.limitInShape = function (items, labels, shapes, region) {
+      each(labels, function (label, index) {
+        var labelBBox = label.getCanvasBBox();
+        var shapeBBox = shapes[index].getBBox();
+        if (labelBBox.minX < shapeBBox.minX || labelBBox.minY < shapeBBox.minY || labelBBox.maxX > shapeBBox.maxX || labelBBox.maxY > shapeBBox.maxY) {
+          var translateX = labelBBox.width - shapeBBox.width + 20;
+          var textShapes = label.findAll(function (shape) {
+            return shape.get('type') === 'text';
+          });
+          textShapes.forEach(function (textShape) {
+            var style = pick(textShape.attr(), ['fontSize', 'fontFamily', 'fontWeight', 'fontStyle', 'fontVariant']);
+            var textBox = textShape.getCanvasBBox();
+            var text = getEllipsisText(textShape.attr('text'), textBox.width - Math.abs(translateX), style);
+            textShape.attr('text', text);
+          });
+        }
+      });
+    };
+    _this.createChart = function () {
+      var canvasStyle = _this.props.canvasStyle;
+      _this.initChart(_this.container, canvasStyle, 0);
+    };
+    _this.destroyChart = function () {
+      _this.chart.destroy();
+      _this.chart = null;
+    };
+    _this.clearChart = function () {
+      _this.chart.annotation().clear(true);
+      _this.chart.clear(true);
+    };
+    _this.drawChart = function () {
+      var _this$props = _this.props,
+        data = _this$props.result,
+        statistic = _this$props.statistic,
+        tables = _this$props.tables,
+        summaryColumn = _this$props.summaryColumn;
+      var _statistic$config = statistic.config,
+        summary_type = _statistic$config.summary_type,
+        summary_method = _statistic$config.summary_method;
+      var _StatisticsUtils$form = StatisticsUtils.formatPieChartData(data, statistic, tables),
+        newData = _StatisticsUtils$form.data,
+        colorSet = _StatisticsUtils$form.colorSet;
+      if (!Array.isArray(newData)) return;
+      var DataView = DataSet.DataView;
+      var dv = new DataView();
+      var fullData = {
+        name: 'root',
+        children: newData.map(function (item) {
+          var name = item.name;
+          item.name = name || name === 0 ? name : intl.get(EMPTY_NAME);
+          if (name === '_Others') {
+            item.name = intl.get('Others');
+          }
+          return item;
+        })
+      };
+      dv.source(fullData, {
+        type: 'hierarchy'
+      }).transform({
+        field: 'value',
+        type: 'hierarchy.treemap',
+        tile: 'treemapResquarify',
+        as: ['x', 'y']
+      });
+      var nodes = [];
+      var _iterator = _createForOfIteratorHelper(dv.getAllNodes()),
+        _step;
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var node = _step.value;
+          if (node.data.name === 'root') {
+            continue;
+          }
+          var eachNode = {
+            name: node.data.name,
+            x: node.x,
+            y: node.y,
+            value: node.data.value,
+            percent: node.data.percent,
+            original_name: node.data.original_name,
+            rows: node.data.rows || null
+          };
+          nodes.push(eachNode);
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+      _this.chart.data(nodes);
+      _this.chart.scale({
+        x: {
+          nice: true
+        },
+        y: {
+          nice: true
+        }
+      });
+      _this.chart.axis(false);
+      _this.chart.legend(false);
+      _this.chart.tooltip({
+        showTitle: false,
+        showMarkers: false,
+        containerTpl: '<div class="g2-tooltip"><div class="g2-tooltip-list"></div></div>',
+        itemTpl: '<div class="g2-tooltip-content"><div class="tooltip-name">{name}<div><div class="tooltip-item">{info}<div></div>',
+        domStyles: {
+          'g2-tooltip': {
+            borderRadius: '2px',
+            backgroundColor: '#fff',
+            padding: '10px'
+          },
+          'tooltip-item': {
+            marginTop: '5px'
+          }
+        }
+      });
+      _this.chart.polygon().position('x*y').color('name', colorSet).tooltip('name*value*percent', function (name, value, percent) {
+        var displayValue = StatisticsUtils.getSummaryValueDisplayString(summaryColumn, value, summary_method);
+        return {
+          name: name,
+          info: summary_type === STATISTIC_SUMMARY_TYPE.COUNT ? "".concat(value) : "".concat(summaryColumn.name, ": ").concat(displayValue, " (").concat(percent, ")")
+        };
+      }).style({
+        lineWidth: 1,
+        stroke: '#fff'
+      }).label('name', {
+        offset: 0,
+        style: {
+          textBaseline: 'middle'
+        },
+        content: function content(obj) {
+          if (obj.name !== 'root') {
+            return obj.name;
+          }
+        },
+        layout: {
+          type: 'custom-limit-in-shape'
+        }
+      });
+      _this.chart.interaction('statistic-active');
+      _this.chart.render();
+    };
+    _this.chart = null;
+    registerGeometryLabelLayout('custom-limit-in-shape', _this.limitInShape);
+    return _this;
+  }
+  _createClass(Treemap, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.createChart();
+      this.drawChart();
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      if (StatisticsUtils.shouldChartComponentUpdate(prevProps, this.props)) {
+        this.chart && this.destroyChart();
+        this.createChart();
+        this.drawChart();
+      }
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.chart && this.destroyChart();
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      return /*#__PURE__*/React.createElement("div", {
+        className: "seastatistic-container w-100",
+        ref: function ref(_ref) {
+          return _this2.container = _ref;
+        }
+      });
+    }
+  }]);
+  return Treemap;
+}(ChartComponent);
+Treemap.propTypes = {
+  canvasStyle: PropTypes.object,
+  statistic: PropTypes.object,
+  groupbyColumn: PropTypes.object,
+  summaryColumn: PropTypes.object,
+  result: PropTypes.array,
+  tables: PropTypes.array,
+  theme: PropTypes.object
+};
+export default Treemap;

package/lib/components/icon/index.css

@@ -0,0 +1,5 @@
+.seastatistic-icon {
+  font-size: 14px;
+  fill: currentColor;
+  color: #212529;
+}

package/lib/components/icon/index.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import './index.css';
+var importAll = function importAll(requireContext) {
+  requireContext.keys().forEach(requireContext);
+};
+try {
+  importAll(require.context('../../assets/icons', true, /\.svg$/));
+} catch (error) {
+  // eslint-disable-next-line no-console
+  console.log(error);
+}
+var Icon = function Icon(props) {
+  var className = props.className,
+    symbol = props.symbol;
+  var iconClass = "seastatistic-icon seastatistic-icon-".concat(symbol, " ").concat(className || '');
+  return /*#__PURE__*/React.createElement("svg", {
+    className: iconClass
+  }, /*#__PURE__*/React.createElement("use", {
+    xlinkHref: "#".concat(symbol)
+  }));
+};
+export default Icon;

package/lib/components/index.js

@@ -0,0 +1,5 @@
+import Collaborator from './collaborator';
+import Formatter from './formatter';
+import Loading from './loading';
+import Settings from './settings';
+export { Collaborator, Formatter, Loading, Settings };

package/lib/components/loading/index.css

@@ -0,0 +1,54 @@
+/** loading **/
+@-moz-keyframes loading {
+  0% {
+    -moz-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -moz-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+
+@-webkit-keyframes loading {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes loading {
+  0% {
+    -moz-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -moz-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+
+.loading-icon {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  border: 2px solid #eee;
+  border-left-color: #aaa;
+  border-radius: 50%;
+  -moz-animation: loading 0.9s infinite linear;
+  -webkit-animation: loading 0.9s infinite linear;
+  animation: loading 0.9s infinite linear;
+}
+
+.loading-tip {
+  display: block;
+  margin: 0 auto;
+}

package/lib/components/loading/index.js

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

package/lib/components/number-input/index.js

@@ -0,0 +1,31 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["value", "onChange", "min", "step", "max", "readOnly", "className"];
+import React from 'react';
+import { Input } from 'reactstrap';
+function NumberInput(props) {
+  var value = props.value,
+    onChange = props.onChange,
+    min = props.min,
+    step = props.step,
+    max = props.max,
+    readOnly = props.readOnly,
+    className = props.className,
+    otherProps = _objectWithoutProperties(props, _excluded);
+  return /*#__PURE__*/React.createElement(Input, Object.assign({
+    type: "number",
+    className: className,
+    value: value || '0',
+    min: min,
+    step: step,
+    max: max,
+    readOnly: readOnly,
+    onChange: onChange
+  }, otherProps));
+}
+NumberInput.defaultProps = {
+  min: 0,
+  step: 1,
+  max: Infinity,
+  readOnly: false
+};
+export default NumberInput;

package/lib/components/pixel-editor/index.css

@@ -0,0 +1,29 @@
+.seastatistic-pixel-editor-wrapper {
+  display: flex;
+  width: 100%;
+}
+
+.seastatistic-pixel-editor-wrapper .form-control {
+  position: relative;
+  flex: 1;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  z-index: 0;
+}
+
+.seastatistic-pixel-editor-wrapper .pixel-unit {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 2.375rem;
+  width: 2.375rem;
+  border: 1px solid rgba(0, 40, 100, 0.12);
+  border-left: none;
+  border-top-right-radius: 3px;
+  border-bottom-right-radius: 3px;
+  background-color: #fff;
+}
+
+.seastatistic-pixel-editor-wrapper .pixel-unit span {
+  margin-top: -2px;
+}

package/lib/components/pixel-editor/index.js

@@ -0,0 +1,42 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useEffect, useRef, useState } from 'react';
+import { isNumber } from 'dtable-utils';
+import NumberInput from '../number-input';
+import './index.css';
+var PixelEditor = function PixelEditor(props) {
+  var pixel = props.pixel;
+  var _useState = useState(isNumber(pixel) ? pixel : null),
+    _useState2 = _slicedToArray(_useState, 2),
+    currPixel = _useState2[0],
+    setCurrPixel = _useState2[1];
+  var mountRef = useRef(false);
+  useEffect(function () {
+    if (!mountRef.current) {
+      mountRef.current = true;
+    } else {
+      setCurrPixel(isNumber(props.pixel) ? props.pixel : null);
+    }
+  }, [props.pixel]);
+  var onSavePixel = function onSavePixel() {
+    props.modifyPixel(currPixel);
+  };
+  var onKeyDown = function onKeyDown(event) {
+    if (event.key === 'Enter') {
+      event.preventDefault();
+      event.target.blur();
+    }
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: "seastatistic-pixel-editor-wrapper"
+  }, /*#__PURE__*/React.createElement(NumberInput, {
+    value: currPixel,
+    onChange: function onChange(event) {
+      return setCurrPixel(event.target.value);
+    },
+    onBlur: onSavePixel,
+    onKeyDown: onKeyDown
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "pixel-unit"
+  }, /*#__PURE__*/React.createElement("span", null, "px")));
+};
+export default PixelEditor;