dtable-statistic 4.2.1 → 4.3.0

package/es/stat-view/trend-chart.js

@@ -1,9 +1,3 @@
-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';
@@ -11,157 +5,120 @@ import { TableUtils } from 'dtable-store';
 import BaseChart from './base-chart';
 import { Chart } from '../custom-g2';
 import { DATE_GRANULARITY, EMPTY_NAME, STATISTICS_COUNT_TYPE, SUMMARY_METHOD_MAP } from '../constants';
-var propTypes = {
+const propTypes = {
   isPreview: PropTypes.bool,
   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();
+class BasicNumericCard extends BaseChart {
+  constructor(props) {
+    super(props);
+    this.componentDidMount = async () => {
+      const {
+        statItem,
+        chartCalculator
+      } = this.props;
+      if (this.container) {
+        const data = await chartCalculator.calculate(statItem);
+        this.setState({
+          isCalculatingData: false
+        });
+        this.drawChart(data);
+        this.calculateData = data;
+      }
+    };
+    this.componentDidUpdate = async (preProps, preState) => {
+      const {
+        statItem,
+        chartCalculator
+      } = this.props;
+      const {
+        isCalculatingData
+      } = this.state;
+      if (isCalculatingData !== preState.isCalculatingData) return;
+      if (this.shouldCalculateStatItem(preProps, this.props)) {
+        this.setState({
+          isCalculatingData: true
+        });
+        if (this.container) {
+          const data = await chartCalculator.calculate(statItem);
+          this.calculateData = data;
+          this.setState({
+            isCalculatingData: false
+          });
+          this.chart && this.chart.destroy();
+          this.drawChart(data);
+          if (this.props.isPreview) {
+            this.chart.forceFit();
           }
         }
-      }, _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;
+      } else {
+        this.chart && this.chart.destroy();
+        this.drawChart(this.calculateData);
+        if (this.props.isPreview) {
+          this.chart.forceFit();
+        }
+      }
+    };
+    this.drawChart = data => {
+      const {
+        isPreview,
+        statItem
+      } = this.props;
       if (isPreview) {
-        _this.chart = new Chart({
-          container: _this.container,
+        this.chart = new Chart({
+          container: this.container,
           autoFit: true
         });
       } else {
-        _this.chart = new Chart({
-          container: _this.container,
+        this.chart = new Chart({
+          container: this.container,
           autoFit: true,
           height: 400,
           width: 700
         });
       }
-      var summary_method = statItem.summary_method;
-      var latest = data && data.latest;
-      var content = summary_method === SUMMARY_METHOD_MAP.Distinct_values ? latest : _this.formatData(latest);
-      var fontSize = _this.getFontSize(content);
-      var labelFontSize = fontSize - 32;
-      var themeColors = _this.getThemeColors();
-      var labelContent = _this.createLabelContent(data, labelFontSize);
-      _this.chart.annotation().html({
+      const {
+        summary_method
+      } = statItem;
+      const latest = data && data.latest;
+      const content = summary_method === SUMMARY_METHOD_MAP.Distinct_values ? latest : this.formatData(latest);
+      const fontSize = this.getFontSize(content);
+      let labelFontSize = fontSize - 32;
+      const themeColors = this.getThemeColors();
+      const labelContent = this.createLabelContent(data, labelFontSize);
+      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: -8px 0 2px 0;\">").concat(content, "</p>\n          <p style=\"margin: 0;\">").concat(labelContent, "</p>\n        </div>\n      ")
       });
-      _this.chart.render();
+      this.chart.render();
     };
-    _this.formatData = function (data) {
-      var _this$props4 = _this.props,
-        getTableById = _this$props4.getTableById,
-        statItem = _this$props4.statItem;
+    this.formatData = data => {
+      const {
+        getTableById,
+        statItem
+      } = this.props;
       if (typeof data !== 'number') return intl.get(EMPTY_NAME);
-      var table_id = statItem.table_id,
-        summary_type = statItem.summary_type,
-        summary_column = statItem.summary_column;
+      const {
+        table_id,
+        summary_type,
+        summary_column
+      } = statItem;
       if (summary_type !== STATISTICS_COUNT_TYPE.COUNT) {
-        var table = getTableById(table_id);
-        var selectedColumn = TableUtils.getTableColumnByKey(table, summary_column);
-        return _this.getNumberDisplayString(data, selectedColumn.data || {});
+        const table = getTableById(table_id);
+        const selectedColumn = TableUtils.getTableColumnByKey(table, summary_column);
+        return this.getNumberDisplayString(data, selectedColumn.data || {});
       }
-      var string = data + '';
-      var isFloat = string.indexOf('.') > 0;
+      let string = data + '';
+      const 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);
+      let content = '';
+      let endPoint = -3;
+      let startPoint = 0;
+      let subString = string.slice(endPoint);
       while (subString.length === 3) {
         content = ',' + subString + content;
         startPoint = endPoint;
@@ -173,18 +130,20 @@ var BasicNumericCard = /*#__PURE__*/function (_BaseChart) {
         content = content.slice(1);
       }
       if (isFloat) {
-        var initString = data + '';
+        const initString = data + '';
         content = content + initString.slice(initString.indexOf('.'));
       }
       return content;
     };
-    _this.getFontSize = function (content, maxFontSize) {
-      var canvas = document.createElement('canvas');
-      var context = canvas.getContext('2d');
-      var width = _this.chart.width;
-      var font = context.font;
-      var initFontSize = maxFontSize || 48;
-      var fontStyle = font.slice(font.indexOf('px'));
+    this.getFontSize = (content, maxFontSize) => {
+      let canvas = document.createElement('canvas');
+      const context = canvas.getContext('2d');
+      const {
+        width
+      } = this.chart;
+      let font = context.font;
+      let initFontSize = maxFontSize || 48;
+      const fontStyle = font.slice(font.indexOf('px'));
       font = initFontSize + fontStyle;
       context.font = font;
       context.fontSize = initFontSize;
@@ -200,10 +159,14 @@ var BasicNumericCard = /*#__PURE__*/function (_BaseChart) {
       }
       return initFontSize;
     };
-    _this.createLabelContent = function (data, maxFontSize) {
-      var statItem = _this.props.statItem;
-      var date_granularity = statItem.date_granularity;
-      var conjunctions = '';
+    this.createLabelContent = (data, maxFontSize) => {
+      const {
+        statItem
+      } = this.props;
+      const {
+        date_granularity
+      } = statItem;
+      let conjunctions = '';
       if (date_granularity === DATE_GRANULARITY.YEAR) {
         conjunctions = intl.get('The_year_before_last');
       } else if (date_granularity === DATE_GRANULARITY.QUARTER) {
@@ -219,23 +182,24 @@ var BasicNumericCard = /*#__PURE__*/function (_BaseChart) {
       } else {
         conjunctions = intl.get('The_day_before_yesterday');
       }
-      var _ref3 = data || {},
-        result = _ref3.result,
-        type = _ref3.type,
-        previous = _ref3.previous;
-      var color = '#ff0000',
+      const {
+        result,
+        type,
+        previous
+      } = data || {};
+      let color = '#ff0000',
         icon = 'dtable-icon-down';
       if (type === 'up') {
         color = '#008000';
         icon = 'dtable-icon-up';
       }
-      var resultText = "".concat(Number.parseFloat(result * 100).toFixed(2), "%&#8226;").concat(conjunctions).concat(previous);
+      let resultText = "".concat(Number.parseFloat(result * 100).toFixed(2), "%&#8226;").concat(conjunctions).concat(previous);
       if (!previous) {
         resultText = intl.get('Can_not_compare_with_var', {
           var: conjunctions.toLowerCase()
         });
       }
-      var labelFontSize = _this.getFontSize(resultText, maxFontSize);
+      let labelFontSize = this.getFontSize(resultText, maxFontSize);
       labelFontSize = labelFontSize > 20 ? 20 : labelFontSize;
       if (!previous) {
         return "<span style='font-size: ".concat(labelFontSize, "px'>").concat(resultText, "</span>");
@@ -244,45 +208,35 @@ var BasicNumericCard = /*#__PURE__*/function (_BaseChart) {
         if (!result) return '';
         return "<span style='font-size: ".concat(labelFontSize, "px; width: 100%;'>\n        <i style='color: ").concat(color, "' class='dtable-font ").concat(icon, "'></i>\n        <span style='color: ").concat(color, "'>").concat(result ? Number.parseFloat(result * 100).toFixed(2) : '', "%</span>\n      </span>");
       }
-      var resultContent = "\n      <span style='display: block; word-break: keep-all; font-size: ".concat(labelFontSize, "px; width: 100%;'>\n        ").concat(!result ? '' : "<i style='color: ".concat(color, "' class='dtable-font ").concat(icon, "'></i>"), "\n        <span style='color: ").concat(color, "'>").concat(result ? Number.parseFloat(result * 100).toFixed(2) + '%' : '', "</span>\n        ").concat(result ? '&#8226;' : '', "\n        ").concat(conjunctions, "\n        ").concat(_this.formatData(previous), "\n      </span>\n    ");
+      const resultContent = "\n      <span style='display: block; word-break: keep-all; font-size: ".concat(labelFontSize, "px; width: 100%;'>\n        ").concat(!result ? '' : "<i style='color: ".concat(color, "' class='dtable-font ").concat(icon, "'></i>"), "\n        <span style='color: ").concat(color, "'>").concat(result ? Number.parseFloat(result * 100).toFixed(2) + '%' : '', "</span>\n        ").concat(result ? '&#8226;' : '', "\n        ").concat(conjunctions, "\n        ").concat(this.formatData(previous), "\n      </span>\n    ");
       return resultContent;
     };
-    _this.state = {
+    this.state = {
       isCalculatingData: true
     };
-    _this.calculateData = null;
-    return _this;
+    this.calculateData = null;
   }
-  _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;
+  shouldComponentUpdate(nextProps, nextState) {
+    if (this.canUpdate(this.props, nextProps)) {
+      return true;
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-      var isCalculatingData = this.state.isCalculatingData;
-      return /*#__PURE__*/React.createElement(React.Fragment, null, isCalculatingData && this.renderLoading(), /*#__PURE__*/React.createElement("div", {
-        ref: function ref(_ref4) {
-          return _this2.container = _ref4;
-        },
-        className: "statistic-chart-container statistic-number-card"
-      }));
+    if (nextState.isCalculatingData !== this.state.isCalculatingData) {
+      return true;
     }
-  }]);
-  return BasicNumericCard;
-}(BaseChart);
+    return false;
+  }
+  componentWillUnmount() {
+    this.container = null;
+  }
+  render() {
+    const {
+      isCalculatingData
+    } = this.state;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, isCalculatingData && this.renderLoading(), /*#__PURE__*/React.createElement("div", {
+      ref: ref => this.container = ref,
+      className: "statistic-chart-container statistic-number-card"
+    }));
+  }
+}
 BasicNumericCard.propTypes = propTypes;
 export default BasicNumericCard;