dtable-statistic 4.0.7 → 4.0.8

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

@@ -8,13 +8,9 @@ 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
 };
@@ -136,26 +132,52 @@ var DashboardChart = /*#__PURE__*/function (_BaseChart) {
       };
     };
     _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;
+      _this.initChartHandler();
+      _this.registerShape();
+      var number = value > 1 ? 10 : value * 10;
+      var data = [{
+        value: number
+      }];
+      _this.chart.data(data);
+      _this.chart.scale('value', {
+        min: 0,
+        max: 10,
+        tickInterval: 1
+      });
+      _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({
+        appear: {
+          animation: 'fade-in'
+        }
+      });
+      _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
+      };
       if (isPreview) {
         var canvasSize = _this.getCanvasSize();
-        _this.chart = new Chart({
-          container: _this.container,
-          width: canvasSize.w,
-          height: canvasSize.h,
-          padding: [0, 0, 25, 0]
-        });
+        config.width = canvasSize.w;
+        config.height = canvasSize.h;
+        config.padding = [0, 0, 25, 0];
       } else {
-        _this.chart = new Chart({
-          container: _this.container,
-          width: WIDTH,
-          height: HEIGHT
-        });
+        config.width = WIDTH;
+        config.height = HEIGHT;
       }
+      _this.chart = new Chart(config);
+    };
+    _this.registerShape = function () {
       registerShape('point', 'pointer', {
         draw: function draw(cfg, container) {
           var group = container.addGroup();
@@ -187,24 +209,10 @@ var DashboardChart = /*#__PURE__*/function (_BaseChart) {
           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', {
+    };
+    _this.setAxis = function () {
+      _this.chart.axis('1', false);
+      _this.chart.axis('value', {
         line: null,
         label: {
           offset: -36,
@@ -223,13 +231,9 @@ var DashboardChart = /*#__PURE__*/function (_BaseChart) {
         },
         grid: null
       });
-      chart.legend(false);
-      chart.point().position('value*1').shape('pointer').color('#1890FF').animate({
-        appear: {
-          animation: 'fade-in'
-        }
-      });
-      chart.annotation().arc({
+    };
+    _this.setAnnotationArc = function (data) {
+      _this.chart.annotation().arc({
         top: false,
         start: [0, 1],
         end: [10, 1],
@@ -239,7 +243,7 @@ var DashboardChart = /*#__PURE__*/function (_BaseChart) {
           lineDash: null
         }
       });
-      chart.annotation().arc({
+      _this.chart.annotation().arc({
         start: [0, 1],
         end: [data[0].value, 1],
         style: {
@@ -248,7 +252,10 @@ var DashboardChart = /*#__PURE__*/function (_BaseChart) {
           lineDash: null
         }
       });
-      chart.annotation().text({
+    };
+    _this.setAnnotationText = function (value) {
+      var statItem = _this.props.statItem;
+      _this.chart.annotation().text({
         position: ['50%', '85%'],
         content: statItem.name,
         style: {
@@ -262,11 +269,8 @@ var DashboardChart = /*#__PURE__*/function (_BaseChart) {
       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({
+      var themeColors = _this.getThemeColors();
+      _this.chart.annotation().text({
         position: ['50%', '90%'],
         content: "".concat(shownValue, " %"),
         style: {
@@ -276,8 +280,6 @@ var DashboardChart = /*#__PURE__*/function (_BaseChart) {
         },
         offsetY: 15
       });
-      chart.render();
-      _this.container.title = "".concat(data[0].value * 10, " %");
     };
     _this.state = {
       isCalculatingData: true
@@ -301,9 +303,7 @@ var DashboardChart = /*#__PURE__*/function (_BaseChart) {
     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", {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, isCalculatingData && this.renderLoading(), /*#__PURE__*/React.createElement("div", {
         ref: function ref(_ref3) {
           return _this2.container = _ref3;
         },

package/es/stat-view/heat-map.js

@@ -8,12 +8,11 @@ import PropTypes from 'prop-types';
 import dayjs from 'dayjs';
 import weekOfYear from 'dayjs/plugin/weekOfYear';
 import intl from 'react-intl-universal';
-import { TableUtils, getNumberDisplayString } from 'dtable-store';
+import { TableUtils } from 'dtable-store';
 import BaseChart from './base-chart';
 import { Chart, registerShape, getRectWithCornerRadius } from '../custom-g2';
-import { Loading } from '../components';
 import { isShapeEqual } from '../utils/common-utils';
-import { COLOR_OPTIONS, DEFAULT_GRID_DISTANCE, DEFAULT_GRID_SIZE, DEFAULT_NUMBER_FORMAT_OBJECT, FILL_BORDER_COLOR_MAP, MONTH_MIRROR, NO_STATISTIC_RESULTS, STAT_ITEM_THEME_COLORS, SUMMARY_TYPE, TITLE_AMOUNT } from '../constants';
+import { COLOR_OPTIONS, DEFAULT_GRID_DISTANCE, DEFAULT_GRID_SIZE, DEFAULT_NUMBER_FORMAT_OBJECT, FILL_BORDER_COLOR_MAP, MONTH_MIRROR, SUMMARY_TYPE, TITLE_AMOUNT } from '../constants';
 import styles from '../assets/css/statistic-custom.module.css';
 dayjs.extend(weekOfYear);
 var HeatMap = /*#__PURE__*/function (_BaseChart) {
@@ -23,6 +22,10 @@ var HeatMap = /*#__PURE__*/function (_BaseChart) {
     var _this;
     _classCallCheck(this, HeatMap);
     _this = _super.call(this, props);
+    _this.destroyChart = function () {
+      _this.chart.destroy();
+      _this.chart = null;
+    };
     _this.transformData = function (statData) {
       var data = {};
       var yearFirstDate = dayjs(statData[0].name);
@@ -79,9 +82,6 @@ var HeatMap = /*#__PURE__*/function (_BaseChart) {
       _this.maxValue = 0;
       var _this$props = _this.props,
         getTableById = _this$props.getTableById,
-        isPreview = _this$props.isPreview,
-        isEnlarge = _this$props.isEnlarge,
-        theme = _this$props.theme,
         statItem = _this$props.statItem;
       var currentColorOption = COLOR_OPTIONS.filter(function (item) {
         return item.name == statItem.data_color;
@@ -126,26 +126,18 @@ var HeatMap = /*#__PURE__*/function (_BaseChart) {
         containerTpl: '<div class="g2-tooltip"><div class="g2-tooltip-list"></div></div>',
         itemTpl: "<div class=\"g2-tooltip-content\"><div style=\"width: max-content; text-align: left;\" class=\"tooltip-name\">{date}<div><div style=\"word-break: keep-all;\"  class=\"tooltip-item\">".concat(intl.get(TITLE_AMOUNT), " : {value}<div></div>"),
         domStyles: {
-          'g2-tooltip': {
-            borderRadius: '2px',
-            backgroundColor: '#fff',
-            padding: '10px'
-          },
-          'tooltip-item': {
-            marginTop: '5px'
-          }
+          'g2-tooltip': _this.getDefaultChartStyleByKey('g2-tooltip'),
+          'tooltip-item': _this.getDefaultChartStyleByKey('tooltip-item')
         }
       });
       _this.chart.axis(false);
       _this.chart.data(statData.data);
-      var themeColors = STAT_ITEM_THEME_COLORS.light;
-      if (theme === 'dark' && !isEnlarge && isPreview) {
-        themeColors = STAT_ITEM_THEME_COLORS.dark;
-      }
+      var themeColors = _this.getThemeColors();
       var columnData = DEFAULT_NUMBER_FORMAT_OBJECT;
       var table_id = statItem.table_id,
         summary_type = statItem.summary_type,
-        summary_column = statItem.summary_column;
+        summary_column = statItem.summary_column,
+        summary_method = statItem.summary_method;
       if (summary_type === SUMMARY_TYPE.ADVANCED) {
         var table = getTableById(table_id);
         var summaryColumn = TableUtils.getTableColumnByKey(table, summary_column) || {};
@@ -228,7 +220,7 @@ var HeatMap = /*#__PURE__*/function (_BaseChart) {
           }).shape('boundary-polygon').label(false).tooltip('date*value', function (date, value) {
             return {
               date: date,
-              value: getNumberDisplayString(value, columnData)
+              value: _this.getNumberDisplayString(value, columnData, summary_method)
             };
           });
           gridView.coordinate().reflect('y');
@@ -261,10 +253,6 @@ var HeatMap = /*#__PURE__*/function (_BaseChart) {
       context.font = font;
       return Math.ceil(context.measureText(text).width);
     };
-    _this.destroyChart = function () {
-      _this.chart.destroy();
-      _this.chart = null;
-    };
     dayjs.locale('en');
     _this.state = {
       isCalculatingData: true,
@@ -469,11 +457,7 @@ var HeatMap = /*#__PURE__*/function (_BaseChart) {
       var _this$state = this.state,
         isCalculatingData = _this$state.isCalculatingData,
         showResultDescription = _this$state.showResultDescription;
-      return /*#__PURE__*/React.createElement(React.Fragment, null, isCalculatingData && /*#__PURE__*/React.createElement("div", {
-        className: 'statistic-chart-loading-container'
-      }, /*#__PURE__*/React.createElement(Loading, null)), showResultDescription && /*#__PURE__*/React.createElement("div", {
-        className: 'statistic-chart-text'
-      }, intl.get(NO_STATISTIC_RESULTS)), /*#__PURE__*/React.createElement("div", {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, isCalculatingData && this.renderLoading(), showResultDescription && this.renderEmpty(), /*#__PURE__*/React.createElement("div", {
         style: {
           overflow: 'auto',
           height: '100%',
@@ -490,9 +474,6 @@ var HeatMap = /*#__PURE__*/function (_BaseChart) {
   return HeatMap;
 }(BaseChart);
 HeatMap.propTypes = {
-  isPreview: PropTypes.bool,
-  isEnlarge: PropTypes.bool,
-  theme: PropTypes.string,
   statItem: PropTypes.object,
   chartCalculator: PropTypes.object,
   getTableById: PropTypes.func,