dtable-statistic 4.2.2 → 4.3.1

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

@@ -1,6 +1,3 @@
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React, { Component } from 'react';
 import intl from 'react-intl-universal';
 import { getNumberDisplayString } from 'dtable-store';
@@ -8,7 +5,7 @@ import { Loading } from '../components';
 import { getLabelFontSize, isStatItemEqual, shouldCalculateStatItem } from '../utils/common-utils';
 import { getChartDisplayLabels } from '../utils/basic-chart-utils';
 import { EMPTY_NAME, NO_STATISTIC_RESULTS, STAT_ITEM_THEME_COLORS, SUMMARY_METHOD_MAP, THEME_NAME_MAP } from '../constants';
-var CHART_STYLE_CONFIG = {
+const CHART_STYLE_CONFIG = {
   'g2-tooltip': {
     borderRadius: '2px',
     backgroundColor: '#fff',
@@ -18,70 +15,77 @@ var CHART_STYLE_CONFIG = {
     marginTop: '5px'
   }
 };
-var BaseChart = /*#__PURE__*/function (_Component) {
-  _inherits(BaseChart, _Component);
-  var _super = _createSuper(BaseChart);
-  function BaseChart() {
+class BaseChart extends Component {
+  constructor() {
     var _this;
-    _classCallCheck(this, BaseChart);
-    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.needRefresh = function (preProps, nextProps) {
-      var dtableChangedTime = nextProps.dtableChangedTime;
+    super(...arguments);
+    _this = this;
+    this.needRefresh = (preProps, nextProps) => {
+      const {
+        dtableChangedTime
+      } = nextProps;
       return dtableChangedTime !== preProps.dtableChangedTime;
     };
-    _this.canUpdate = function (preProps, nextProps) {
-      var statItem = preProps.statItem,
-        theme = preProps.theme;
-      var nextStatItem = nextProps.statItem,
-        nextTheme = nextProps.theme;
-      return !isStatItemEqual(statItem, nextStatItem) || _this.needRefresh(preProps, nextProps) || nextTheme !== theme;
+    this.canUpdate = (preProps, nextProps) => {
+      const {
+        statItem,
+        theme
+      } = preProps;
+      const {
+        statItem: nextStatItem,
+        theme: nextTheme
+      } = nextProps;
+      return !isStatItemEqual(statItem, nextStatItem) || this.needRefresh(preProps, nextProps) || nextTheme !== theme;
     };
-    _this.shouldCalculateStatItem = function (preProps, nextProps) {
-      var statItem = preProps.statItem;
-      var nextStatItem = nextProps.statItem;
-      return shouldCalculateStatItem(statItem, nextStatItem) || _this.needRefresh(preProps, nextProps);
+    this.shouldCalculateStatItem = (preProps, nextProps) => {
+      const {
+        statItem
+      } = preProps;
+      const {
+        statItem: nextStatItem
+      } = nextProps;
+      return shouldCalculateStatItem(statItem, nextStatItem) || this.needRefresh(preProps, nextProps);
     };
-    _this.getTicks = function (data, width) {
-      var labelCount = data.length;
+    this.getTicks = (data, width) => {
+      const labelCount = data.length;
       if (Math.floor(width / labelCount) > 20) {
         return [];
       }
       return getChartDisplayLabels(width, 20, data);
     };
-    _this.getLabelCount = function (ticks, data) {
-      var ticksLen = ticks.length;
+    this.getLabelCount = (ticks, data) => {
+      const ticksLen = ticks.length;
       return ticksLen > 0 ? ticksLen : data.length;
     };
-    _this.getThemeColors = function () {
-      var themeColors = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+    this.getThemeColors = function () {
+      let themeColors = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
       // dark->custom->light
-      var _this$props = _this.props,
-        isPreview = _this$props.isPreview,
-        isEnlarge = _this$props.isEnlarge,
-        theme = _this$props.theme;
+      const {
+        isPreview,
+        isEnlarge,
+        theme
+      } = _this.props;
       if (theme === THEME_NAME_MAP.DARK && !isEnlarge && isPreview) {
         themeColors = STAT_ITEM_THEME_COLORS.dark;
       }
       return themeColors || STAT_ITEM_THEME_COLORS[THEME_NAME_MAP.LIGHT];
     };
-    _this.getAxisLabelColor = function (textColor) {
-      var _this$props2 = _this.props,
-        isPreview = _this$props2.isPreview,
-        isEnlarge = _this$props2.isEnlarge,
-        theme = _this$props2.theme;
+    this.getAxisLabelColor = textColor => {
+      const {
+        isPreview,
+        isEnlarge,
+        theme
+      } = this.props;
       if (theme === THEME_NAME_MAP.DARK && !isEnlarge && isPreview) {
         return '#ffffff';
       }
       return textColor || '#999999';
     };
-    _this.getDefaultChartStyleByKey = function (key) {
+    this.getDefaultChartStyleByKey = key => {
       return CHART_STYLE_CONFIG[key] || {};
     };
-    _this.labelFormatter = function (name) {
-      var label = name;
+    this.labelFormatter = name => {
+      let label = name;
       if (name.length > 10) {
         label = "".concat(name.slice(0, 10), "...");
       }
@@ -90,29 +94,31 @@ var BaseChart = /*#__PURE__*/function (_Component) {
       }
       return label;
     };
-    _this.getLabelFontSize = function () {
-      var statItem = _this.props.statItem;
-      var label_font_size = statItem.label_font_size;
+    this.getLabelFontSize = () => {
+      const {
+        statItem
+      } = this.props;
+      const {
+        label_font_size
+      } = statItem;
       return getLabelFontSize(label_font_size);
     };
-    _this.getNumberDisplayString = function (value, columnData, summaryMethod) {
+    this.getNumberDisplayString = (value, columnData, summaryMethod) => {
       if (summaryMethod === SUMMARY_METHOD_MAP.Distinct_values) {
         return value;
       }
       return getNumberDisplayString(value, columnData);
     };
-    _this.renderLoading = function () {
+    this.renderLoading = () => {
       return /*#__PURE__*/React.createElement("div", {
         className: 'statistic-chart-loading-container'
       }, /*#__PURE__*/React.createElement(Loading, null));
     };
-    _this.renderEmpty = function () {
+    this.renderEmpty = () => {
       return /*#__PURE__*/React.createElement("div", {
         className: 'statistic-chart-text'
       }, intl.get(NO_STATISTIC_RESULTS));
     };
-    return _this;
   }
-  return BaseChart;
-}(Component);
+}
 export default BaseChart;

package/es/stat-view/basic-number-card.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,164 +5,125 @@ import { TableUtils } from 'dtable-store';
 import BaseChart from './base-chart';
 import { Chart } from '../custom-g2';
 import { EMPTY_NAME, 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 content = _this.formatData(data);
-      var fontSize = _this.getFontSize(content);
-      var labelFontSize = fontSize - 35;
+      const content = this.formatData(data);
+      const fontSize = this.getFontSize(content);
+      let labelFontSize = fontSize - 35;
       if (labelFontSize > 20) {
         labelFontSize = 20;
       }
       if (labelFontSize < 12) {
         labelFontSize = 12;
       }
-      var themeColors = _this.getThemeColors();
-      _this.chart.annotation().html({
+      const themeColors = this.getThemeColors();
+      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.chart.render();
     };
-    _this.formatData = function (data) {
-      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;
+    this.formatData = data => {
+      const {
+        getTableById,
+        statItem
+      } = this.props;
+      const {
+        summary_method,
+        table_id,
+        numeric_column
+      } = statItem;
       if (summary_method === SUMMARY_METHOD_MAP.Distinct_values) {
         return data;
       }
       if (!data) return intl.get(EMPTY_NAME);
       if (summary_method !== 'Row_count') {
-        var table = getTableById(table_id);
-        var selectedColumn = TableUtils.getTableColumnByKey(table, numeric_column);
-        var formattedContent = _this.getNumberDisplayString(data, selectedColumn.data || {});
+        const table = getTableById(table_id);
+        const selectedColumn = TableUtils.getTableColumnByKey(table, numeric_column);
+        const formattedContent = this.getNumberDisplayString(data, selectedColumn.data || {});
         return formattedContent;
       }
-      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;
@@ -180,18 +135,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) {
-      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'));
+    this.getFontSize = content => {
+      let canvas = document.createElement('canvas');
+      const context = canvas.getContext('2d');
+      const {
+        width
+      } = this.chart;
+      let font = context.font;
+      let initFontSize = 70;
+      const fontStyle = font.slice(font.indexOf('px'));
       font = initFontSize + fontStyle;
       context.font = font;
       context.fontSize = initFontSize;
@@ -206,42 +163,32 @@ var BasicNumericCard = /*#__PURE__*/function (_BaseChart) {
       }
       return initFontSize;
     };
-    _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(_ref3) {
-          return _this2.container = _ref3;
-        },
-        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;