dtable-statistic 4.0.2-test-2

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

@@ -0,0 +1,317 @@
+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 { Loading } from '../components';
+import { isMobile } from '../utils';
+import { STAT_ITEM_THEME_COLORS } from '../constants';
+var propTypes = {
+  isPreview: PropTypes.bool,
+  isEnlarge: PropTypes.bool,
+  theme: PropTypes.string,
+  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();
+          }
+        }
+      }, _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);
+      if (w > maxWidth) {
+        w = maxWidth;
+        h = w * (HEIGHT / WIDTH);
+      }
+      return {
+        w: w,
+        h: h
+      };
+    };
+    _this.drawChart = function (value) {
+      var _this$props3 = _this.props,
+        isPreview = _this$props3.isPreview,
+        statItem = _this$props3.statItem,
+        theme = _this$props3.theme,
+        isEnlarge = _this$props3.isEnlarge;
+      if (isPreview) {
+        var canvasSize = _this.getCanvasSize();
+        _this.chart = new Chart({
+          container: _this.container,
+          width: canvasSize.w,
+          height: canvasSize.h,
+          padding: [0, 0, 25, 0]
+        });
+      } else {
+        _this.chart = new Chart({
+          container: _this.container,
+          width: WIDTH,
+          height: HEIGHT
+        });
+      }
+      registerShape('point', 'pointer', {
+        draw: function draw(cfg, container) {
+          var group = container.addGroup();
+          var center = this.parsePoint({
+            x: 0,
+            y: 0
+          });
+          group.addShape('line', {
+            attrs: {
+              x1: center.x,
+              y1: center.y,
+              x2: cfg.x,
+              y2: cfg.y,
+              stroke: cfg.color,
+              lineWidth: 5,
+              lineCap: 'round'
+            }
+          });
+          group.addShape('circle', {
+            attrs: {
+              x: center.x,
+              y: center.y,
+              r: 9.75,
+              stroke: cfg.color,
+              lineWidth: 4.5,
+              fill: '#fff'
+            }
+          });
+          return group;
+        }
+      });
+      var number = value > 1 ? 10 : value * 10;
+      var data = [{
+        value: number
+      }];
+      var chart = _this.chart;
+      chart.data(data);
+      chart.scale('value', {
+        min: 0,
+        max: 10,
+        tickInterval: 1
+      });
+      chart.coordinate('polar', {
+        startAngle: -9 / 8 * Math.PI,
+        endAngle: 1 / 8 * Math.PI,
+        radius: 0.75
+      });
+      chart.axis('1', false);
+      chart.axis('value', {
+        line: null,
+        label: {
+          offset: -36,
+          style: {
+            fontSize: 18,
+            textAlign: 'center',
+            textBaseline: 'middle'
+          }
+        },
+        subTickLine: {
+          count: 4,
+          length: -15
+        },
+        tickLine: {
+          length: -24
+        },
+        grid: null
+      });
+      chart.legend(false);
+      chart.point().position('value*1').shape('pointer').color('#1890FF').animate({
+        appear: {
+          animation: 'fade-in'
+        }
+      });
+      chart.annotation().arc({
+        top: false,
+        start: [0, 1],
+        end: [10, 1],
+        style: {
+          stroke: '#CBCBCB',
+          lineWidth: 18,
+          lineDash: null
+        }
+      });
+      chart.annotation().arc({
+        start: [0, 1],
+        end: [data[0].value, 1],
+        style: {
+          stroke: '#1890FF',
+          lineWidth: 18,
+          lineDash: null
+        }
+      });
+      chart.annotation().text({
+        position: ['50%', '85%'],
+        content: statItem.name,
+        style: {
+          fontSize: isMobile ? 16 : 20,
+          fill: '#545454',
+          textAlign: 'center'
+        }
+      });
+      var shownValue = value * 100;
+      var shownDotPos = "".concat(shownValue).indexOf('.');
+      if (shownDotPos > -1 && shownDotPos < "".concat(shownValue).length - 2) {
+        shownValue = shownValue.toFixed(1);
+      }
+      var themeColors = STAT_ITEM_THEME_COLORS.light;
+      if (theme === 'dark' && !isEnlarge && isPreview) {
+        themeColors = STAT_ITEM_THEME_COLORS.dark;
+      }
+      chart.annotation().text({
+        position: ['50%', '90%'],
+        content: "".concat(shownValue, " %"),
+        style: {
+          fontSize: isMobile ? 20 : 36,
+          fill: themeColors.textColor,
+          textAlign: 'center'
+        },
+        offsetY: 15
+      });
+      chart.render();
+      _this.container.title = "".concat(data[0].value * 10, " %");
+    };
+    _this.state = {
+      isCalculatingData: true
+    };
+    _this.calculateData = null;
+    return _this;
+  }
+  _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;
+    }
+  }, {
+    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 d-flex justify-content-around align-items-center"
+      }));
+    }
+  }]);
+  return DashboardChart;
+}(BaseChart);
+DashboardChart.propTypes = propTypes;
+export default DashboardChart;