dtable-statistic 4.0.2-test-2

package/es/stat-view/basic-number-card.js

@@ -0,0 +1,255 @@
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+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 intl from 'react-intl-universal';
+import { TableUtils, getNumberDisplayString } from 'dtable-store';
+import BaseChart from './base-chart';
+import { Chart } from '../custom-g2';
+import { Loading } from '../components';
+import { EMPTY_NAME, STAT_ITEM_THEME_COLORS } from '../constants';
+var propTypes = {
+  isPreview: PropTypes.bool,
+  isEnlarge: PropTypes.bool,
+  theme: PropTypes.string,
+  statItem: PropTypes.object,
+  chartCalculator: PropTypes.object,
+  getTableById: PropTypes.func
+};
+var BasicNumericCard = /*#__PURE__*/function (_BaseChart) {
+  _inherits(BasicNumericCard, _BaseChart);
+  var _super = _createSuper(BasicNumericCard);
+  function BasicNumericCard(props) {
+    var _this;
+    _classCallCheck(this, BasicNumericCard);
+    _this = _super.call(this, props);
+    _this.componentDidMount = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      var _this$props, statItem, chartCalculator, data;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _this$props = _this.props, statItem = _this$props.statItem, chartCalculator = _this$props.chartCalculator;
+              if (!_this.container) {
+                _context.next = 8;
+                break;
+              }
+              _context.next = 4;
+              return chartCalculator.calculate(statItem);
+            case 4:
+              data = _context.sent;
+              _this.setState({
+                isCalculatingData: false
+              });
+              _this.drawChart(data);
+              _this.calculateData = data;
+            case 8:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+    _this.componentDidUpdate = /*#__PURE__*/function () {
+      var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(preProps, preState) {
+        var _this$props2, statItem, chartCalculator, isCalculatingData, data;
+        return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+          while (1) {
+            switch (_context2.prev = _context2.next) {
+              case 0:
+                _this$props2 = _this.props, statItem = _this$props2.statItem, chartCalculator = _this$props2.chartCalculator;
+                isCalculatingData = _this.state.isCalculatingData;
+                if (!(isCalculatingData !== preState.isCalculatingData)) {
+                  _context2.next = 4;
+                  break;
+                }
+                return _context2.abrupt("return");
+              case 4:
+                if (!_this.shouldCalculateStatItem(preProps, _this.props)) {
+                  _context2.next = 17;
+                  break;
+                }
+                _this.setState({
+                  isCalculatingData: true
+                });
+                if (!_this.container) {
+                  _context2.next = 15;
+                  break;
+                }
+                _context2.next = 9;
+                return chartCalculator.calculate(statItem);
+              case 9:
+                data = _context2.sent;
+                _this.calculateData = data;
+                _this.setState({
+                  isCalculatingData: false
+                });
+                _this.chart && _this.chart.destroy();
+                _this.drawChart(data);
+                if (_this.props.isPreview) {
+                  _this.chart.forceFit();
+                }
+              case 15:
+                _context2.next = 20;
+                break;
+              case 17:
+                _this.chart && _this.chart.destroy();
+                _this.drawChart(_this.calculateData);
+                if (_this.props.isPreview) {
+                  _this.chart.forceFit();
+                }
+              case 20:
+              case "end":
+                return _context2.stop();
+            }
+          }
+        }, _callee2);
+      }));
+      return function (_x, _x2) {
+        return _ref2.apply(this, arguments);
+      };
+    }();
+    _this.drawChart = function (data) {
+      var _this$props3 = _this.props,
+        isPreview = _this$props3.isPreview,
+        statItem = _this$props3.statItem,
+        isEnlarge = _this$props3.isEnlarge,
+        theme = _this$props3.theme;
+      if (isPreview) {
+        _this.chart = new Chart({
+          container: _this.container,
+          autoFit: true
+        });
+      } else {
+        _this.chart = new Chart({
+          container: _this.container,
+          autoFit: true,
+          height: 400,
+          width: 700
+        });
+      }
+      var summary_method = statItem.summary_method;
+      var content = summary_method === 'Distinct_values' ? data : _this.formatData(data);
+      var fontSize = _this.getFontSize(content);
+      var labelFontSize = fontSize - 35;
+      if (labelFontSize > 20) {
+        labelFontSize = 20;
+      }
+      if (labelFontSize < 12) {
+        labelFontSize = 12;
+      }
+      var themeColors = STAT_ITEM_THEME_COLORS.light;
+      if (theme === 'dark' && !isEnlarge && isPreview) {
+        themeColors = STAT_ITEM_THEME_COLORS.dark;
+      }
+      _this.chart.annotation().html({
+        position: ['50%', '50%'],
+        html: "\n        <div style=\"color: ".concat(themeColors.cardColor, "; text-align: center;\">\n          <p class=\"text-content\" style=\"font-size: ").concat(fontSize, "px; margin: -15px 0 2px 0;\">").concat(content, "</p>\n          <p style=\"font-size: ").concat(labelFontSize, "px;margin: 0;\">").concat(statItem.name || '', "</p>\n        </div>\n      ")
+      });
+      _this.chart.render();
+    };
+    _this.formatData = function (data) {
+      if (!data) return intl.get(EMPTY_NAME);
+      var _this$props4 = _this.props,
+        getTableById = _this$props4.getTableById,
+        statItem = _this$props4.statItem;
+      var summary_method = statItem.summary_method,
+        table_id = statItem.table_id,
+        numeric_column = statItem.numeric_column;
+      if (summary_method !== 'Row_count') {
+        var table = getTableById(table_id);
+        var selectedColumn = TableUtils.getTableColumnByKey(table, numeric_column);
+        var formattedContent = getNumberDisplayString(data, selectedColumn.data || {});
+        return formattedContent;
+      }
+      var string = data + '';
+      var isFloat = string.indexOf('.') > 0;
+      if (isFloat) {
+        string = string.slice(0, string.indexOf('.'));
+      }
+      var content = '';
+      var endPoint = -3;
+      var startPoint = 0;
+      var subString = string.slice(endPoint);
+      while (subString.length === 3) {
+        content = ',' + subString + content;
+        startPoint = endPoint;
+        endPoint -= 3;
+        subString = string.slice(endPoint, startPoint);
+      }
+      content = subString + content;
+      if (content[0] === ',') {
+        content = content.slice(1);
+      }
+      if (isFloat) {
+        var initString = data + '';
+        content = content + initString.slice(initString.indexOf('.'));
+      }
+      return content;
+    };
+    _this.getFontSize = function (content) {
+      var canvas = document.createElement('canvas');
+      var context = canvas.getContext('2d');
+      var width = _this.chart.width;
+      var font = context.font;
+      var initFontSize = 70;
+      var fontStyle = font.slice(font.indexOf('px'));
+      font = initFontSize + fontStyle;
+      context.font = font;
+      context.fontSize = initFontSize;
+      while (context.measureText(content).width >= width - 40) {
+        initFontSize -= 1;
+        context.font = initFontSize + fontStyle;
+        context.fontSize = initFontSize;
+      }
+      canvas = null;
+      if (initFontSize < 16) {
+        initFontSize = 16;
+      }
+      return initFontSize;
+    };
+    _this.state = {
+      isCalculatingData: true
+    };
+    _this.calculateData = null;
+    return _this;
+  }
+  _createClass(BasicNumericCard, [{
+    key: "shouldComponentUpdate",
+    value: function shouldComponentUpdate(nextProps, nextState) {
+      if (this.canUpdate(this.props, nextProps)) {
+        return true;
+      }
+      if (nextState.isCalculatingData !== this.state.isCalculatingData) {
+        return true;
+      }
+      return false;
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.container = null;
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      var isCalculatingData = this.state.isCalculatingData;
+      return /*#__PURE__*/React.createElement(React.Fragment, null, isCalculatingData && /*#__PURE__*/React.createElement("div", {
+        className: 'statistic-chart-loading-container'
+      }, /*#__PURE__*/React.createElement(Loading, null)), /*#__PURE__*/React.createElement("div", {
+        ref: function ref(_ref3) {
+          return _this2.container = _ref3;
+        },
+        className: "statistic-chart-container statistic-number-card"
+      }));
+    }
+  }]);
+  return BasicNumericCard;
+}(BaseChart);
+BasicNumericCard.propTypes = propTypes;
+export default BasicNumericCard;