dtable-statistic 4.2.2 → 4.3.0

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

@@ -1,173 +1,121 @@
-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 BaseChart from './base-chart';
 import { Chart, registerShape } from '../custom-g2';
 import { isMobile } from '../utils';
-var propTypes = {
+const propTypes = {
   isPreview: PropTypes.bool,
   statItem: PropTypes.object,
   chartCalculator: PropTypes.object
 };
-var WIDTH = 700;
-var HEIGHT = 400;
-var DashboardChart = /*#__PURE__*/function (_BaseChart) {
-  _inherits(DashboardChart, _BaseChart);
-  var _super = _createSuper(DashboardChart);
-  function DashboardChart(props) {
-    var _this;
-    _classCallCheck(this, DashboardChart);
-    _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();
+const WIDTH = 700;
+const HEIGHT = 400;
+class DashboardChart 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);
+          if (!this.container) return;
+          this.calculateData = data;
+          this.setState({
+            isCalculatingData: false
+          });
+          this.chart && this.chart.destroy();
+          this.drawChart(data);
+          if (this.props.isPreview) {
+            const canvasSize = this.getCanvasSize();
+            this.chart.changeSize(canvasSize.w, canvasSize.h);
           }
         }
-      }, _callee);
-    }));
-    _this.componentDidUpdate = /*#__PURE__*/function () {
-      var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(preProps, preState) {
-        var _this$props2, statItem, chartCalculator, isCalculatingData, data, canvasSize, _canvasSize;
-        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 = 19;
-                  break;
-                }
-                _this.setState({
-                  isCalculatingData: true
-                });
-                if (!_this.container) {
-                  _context2.next = 17;
-                  break;
-                }
-                _context2.next = 9;
-                return chartCalculator.calculate(statItem);
-              case 9:
-                data = _context2.sent;
-                if (_this.container) {
-                  _context2.next = 12;
-                  break;
-                }
-                return _context2.abrupt("return");
-              case 12:
-                _this.calculateData = data;
-                _this.setState({
-                  isCalculatingData: false
-                });
-                _this.chart && _this.chart.destroy();
-                _this.drawChart(data);
-                if (_this.props.isPreview) {
-                  canvasSize = _this.getCanvasSize();
-                  _this.chart.changeSize(canvasSize.w, canvasSize.h);
-                }
-              case 17:
-                _context2.next = 22;
-                break;
-              case 19:
-                _this.chart && _this.chart.destroy();
-                _this.drawChart(_this.calculateData);
-                if (_this.props.isPreview) {
-                  _canvasSize = _this.getCanvasSize();
-                  _this.chart.changeSize(_canvasSize.w, _canvasSize.h);
-                }
-              case 22:
-              case "end":
-                return _context2.stop();
-            }
-          }
-        }, _callee2);
-      }));
-      return function (_x, _x2) {
-        return _ref2.apply(this, arguments);
-      };
-    }();
-    _this.getCanvasSize = function () {
-      var maxWidth = _this.container.clientWidth;
-      var maxHeight = _this.container.clientHeight;
-      var h = maxHeight;
-      var w = h * (WIDTH / HEIGHT);
+      } else {
+        this.chart && this.chart.destroy();
+        this.drawChart(this.calculateData);
+        if (this.props.isPreview) {
+          const canvasSize = this.getCanvasSize();
+          this.chart.changeSize(canvasSize.w, canvasSize.h);
+        }
+      }
+    };
+    this.getCanvasSize = () => {
+      const maxWidth = this.container.clientWidth;
+      const maxHeight = this.container.clientHeight;
+      let h = maxHeight;
+      let w = h * (WIDTH / HEIGHT);
       if (w > maxWidth) {
         w = maxWidth;
         h = w * (HEIGHT / WIDTH);
       }
       return {
-        w: w,
-        h: h
+        w,
+        h
       };
     };
-    _this.drawChart = function (value) {
-      _this.initChartHandler();
-      _this.registerShape();
-      var number = value > 1 ? 10 : value * 10;
-      var data = [{
+    this.drawChart = value => {
+      this.initChartHandler();
+      this.registerShape();
+      const number = value > 1 ? 10 : value * 10;
+      const data = [{
         value: number
       }];
-      _this.chart.data(data);
-      _this.chart.scale('value', {
+      this.chart.data(data);
+      this.chart.scale('value', {
         min: 0,
         max: 10,
         tickInterval: 1
       });
-      _this.chart.coordinate('polar', {
+      this.chart.coordinate('polar', {
         startAngle: -9 / 8 * Math.PI,
         endAngle: 1 / 8 * Math.PI,
         radius: 0.75
       });
-      _this.setAxis();
-      _this.chart.legend(false);
-      _this.chart.point().position('value*1').shape('pointer').color('#1890FF').animate({
+      this.setAxis();
+      this.chart.legend(false);
+      this.chart.point().position('value*1').shape('pointer').color('#1890FF').animate({
         appear: {
           animation: 'fade-in'
         }
       });
-      _this.setAnnotationArc(data);
-      _this.setAnnotationText(value);
-      _this.chart.render();
-      _this.container.title = "".concat(data[0].value * 10, " %");
+      this.setAnnotationArc(data);
+      this.setAnnotationText(value);
+      this.chart.render();
+      this.container.title = "".concat(data[0].value * 10, " %");
     };
-    _this.initChartHandler = function () {
-      var isPreview = _this.props.isPreview;
-      var config = {
-        container: _this.container
+    this.initChartHandler = () => {
+      const {
+        isPreview
+      } = this.props;
+      let config = {
+        container: this.container
       };
       if (isPreview) {
-        var canvasSize = _this.getCanvasSize();
+        const canvasSize = this.getCanvasSize();
         config.width = canvasSize.w;
         config.height = canvasSize.h;
         config.padding = [0, 0, 25, 0];
@@ -175,13 +123,13 @@ var DashboardChart = /*#__PURE__*/function (_BaseChart) {
         config.width = WIDTH;
         config.height = HEIGHT;
       }
-      _this.chart = new Chart(config);
+      this.chart = new Chart(config);
     };
-    _this.registerShape = function () {
+    this.registerShape = () => {
       registerShape('point', 'pointer', {
-        draw: function draw(cfg, container) {
-          var group = container.addGroup();
-          var center = this.parsePoint({
+        draw(cfg, container) {
+          const group = container.addGroup();
+          const center = this.parsePoint({
             x: 0,
             y: 0
           });
@@ -210,9 +158,9 @@ var DashboardChart = /*#__PURE__*/function (_BaseChart) {
         }
       });
     };
-    _this.setAxis = function () {
-      _this.chart.axis('1', false);
-      _this.chart.axis('value', {
+    this.setAxis = () => {
+      this.chart.axis('1', false);
+      this.chart.axis('value', {
         line: null,
         label: {
           offset: -36,
@@ -232,8 +180,8 @@ var DashboardChart = /*#__PURE__*/function (_BaseChart) {
         grid: null
       });
     };
-    _this.setAnnotationArc = function (data) {
-      _this.chart.annotation().arc({
+    this.setAnnotationArc = data => {
+      this.chart.annotation().arc({
         top: false,
         start: [0, 1],
         end: [10, 1],
@@ -243,7 +191,7 @@ var DashboardChart = /*#__PURE__*/function (_BaseChart) {
           lineDash: null
         }
       });
-      _this.chart.annotation().arc({
+      this.chart.annotation().arc({
         start: [0, 1],
         end: [data[0].value, 1],
         style: {
@@ -253,9 +201,11 @@ var DashboardChart = /*#__PURE__*/function (_BaseChart) {
         }
       });
     };
-    _this.setAnnotationText = function (value) {
-      var statItem = _this.props.statItem;
-      _this.chart.annotation().text({
+    this.setAnnotationText = value => {
+      const {
+        statItem
+      } = this.props;
+      this.chart.annotation().text({
         position: ['50%', '85%'],
         content: statItem.name,
         style: {
@@ -264,13 +214,13 @@ var DashboardChart = /*#__PURE__*/function (_BaseChart) {
           textAlign: 'center'
         }
       });
-      var shownValue = value * 100;
-      var shownDotPos = "".concat(shownValue).indexOf('.');
+      let shownValue = value * 100;
+      const shownDotPos = "".concat(shownValue).indexOf('.');
       if (shownDotPos > -1 && shownDotPos < "".concat(shownValue).length - 2) {
         shownValue = shownValue.toFixed(1);
       }
-      var themeColors = _this.getThemeColors();
-      _this.chart.annotation().text({
+      const themeColors = this.getThemeColors();
+      this.chart.annotation().text({
         position: ['50%', '90%'],
         content: "".concat(shownValue, " %"),
         style: {
@@ -281,37 +231,29 @@ var DashboardChart = /*#__PURE__*/function (_BaseChart) {
         offsetY: 15
       });
     };
-    _this.state = {
+    this.state = {
       isCalculatingData: true
     };
-    _this.calculateData = null;
-    return _this;
+    this.calculateData = null;
   }
-  _createClass(DashboardChart, [{
-    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;
+  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 d-flex justify-content-around align-items-center"
-      }));
+    if (nextState.isCalculatingData !== this.state.isCalculatingData) {
+      return true;
     }
-  }]);
-  return DashboardChart;
-}(BaseChart);
+    return false;
+  }
+  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 d-flex justify-content-around align-items-center"
+    }));
+  }
+}
 DashboardChart.propTypes = propTypes;
 export default DashboardChart;