dtable-statistic 4.0.2-test-2

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

@@ -0,0 +1,299 @@
+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 { DATE_GRANULARITY, EMPTY_NAME, STATISTICS_COUNT_TYPE, 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,
+        isEnlarge = _this$props3.isEnlarge,
+        theme = _this$props3.theme,
+        statItem = _this$props3.statItem;
+      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 latest = data && data.latest;
+      var content = summary_method === 'Distinct_values' ? latest : _this.formatData(latest);
+      var fontSize = _this.getFontSize(content);
+      var labelFontSize = fontSize - 32;
+      var themeColors = STAT_ITEM_THEME_COLORS.light;
+      if (theme === 'dark' && !isEnlarge && isPreview) {
+        themeColors = STAT_ITEM_THEME_COLORS.dark;
+      }
+      var 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.formatData = function (data) {
+      var _this$props4 = _this.props,
+        getTableById = _this$props4.getTableById,
+        statItem = _this$props4.statItem;
+      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;
+      if (summary_type !== STATISTICS_COUNT_TYPE.COUNT) {
+        var table = getTableById(table_id);
+        var selectedColumn = TableUtils.getTableColumnByKey(table, summary_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, 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'));
+      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 (maxFontSize) return initFontSize;
+      if (initFontSize < 16) {
+        initFontSize = 16;
+      }
+      return initFontSize;
+    };
+    _this.createLabelContent = function (data, maxFontSize) {
+      var statItem = _this.props.statItem;
+      var date_granularity = statItem.date_granularity;
+      var conjunctions = '';
+      if (date_granularity === DATE_GRANULARITY.YEAR) {
+        conjunctions = intl.get('The_year_before_last');
+      } else if (date_granularity === DATE_GRANULARITY.QUARTER) {
+        conjunctions = intl.get('The_quarter_before_last');
+      } else if (date_granularity === DATE_GRANULARITY.MONTH) {
+        conjunctions = intl.get('The_month_before_last');
+      } else if (date_granularity === DATE_GRANULARITY.WEEK) {
+        conjunctions = intl.get('The_week_before_last');
+      } else if (date_granularity === 'days_7') {
+        conjunctions = intl.get('Previous_7_days');
+      } else if (date_granularity === 'days_30') {
+        conjunctions = intl.get('Previous_30_days');
+      } else {
+        conjunctions = intl.get('The_day_before_yesterday');
+      }
+      var _ref3 = data || {},
+        result = _ref3.result,
+        type = _ref3.type,
+        previous = _ref3.previous;
+      var 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);
+      if (!previous) {
+        resultText = intl.get('Can_not_compare_with_var', {
+          var: conjunctions.toLowerCase()
+        });
+      }
+      var labelFontSize = _this.getFontSize(resultText, maxFontSize);
+      labelFontSize = labelFontSize > 20 ? 20 : labelFontSize;
+      if (!previous) {
+        return "<span style='font-size: ".concat(labelFontSize, "px'>").concat(resultText, "</span>");
+      }
+      if (labelFontSize <= 12) {
+        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    ");
+      return resultContent;
+    };
+    _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(_ref4) {
+          return _this2.container = _ref4;
+        },
+        className: "statistic-chart-container statistic-number-card"
+      }));
+    }
+  }]);
+  return BasicNumericCard;
+}(BaseChart);
+BasicNumericCard.propTypes = propTypes;
+export default BasicNumericCard;