dtable-statistic 4.2.2 → 4.3.0

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

@@ -1,7 +1,3 @@
-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';
@@ -10,7 +6,7 @@ import BaseChart from './base-chart';
 import { Chart } from '../custom-g2';
 import { getCurrentTheme } from '../utils/common-utils';
 import { EMPTY_NAME, STAT_TYPE } from '../constants';
-var propTypes = {
+const propTypes = {
   isPreview: PropTypes.bool,
   isEdit: PropTypes.bool,
   colorThemeName: PropTypes.string,
@@ -19,96 +15,98 @@ var propTypes = {
   getTableById: PropTypes.func,
   toggleStatisticRecordsDialog: PropTypes.func
 };
-var CompletenessChart = /*#__PURE__*/function (_BaseChart) {
-  _inherits(CompletenessChart, _BaseChart);
-  var _super = _createSuper(CompletenessChart);
-  function CompletenessChart(props) {
-    var _this;
-    _classCallCheck(this, CompletenessChart);
-    _this = _super.call(this, props);
-    _this.destroyChart = function () {
-      _this.chart.destroy();
-      _this.chart = null;
+class CompletenessChart extends BaseChart {
+  constructor(props) {
+    super(props);
+    this.destroyChart = () => {
+      this.chart.destroy();
+      this.chart = null;
     };
-    _this.sortData = function (data, sortType) {
-      var compareCompleteness = sortType == 'ascending' ? function (a, b) {
+    this.sortData = (data, sortType) => {
+      const compareCompleteness = sortType == 'ascending' ? function (a, b) {
         return a - b;
       } : function (a, b) {
         return b - a;
       };
-      var sortBy = function sortBy(a, b) {
+      const sortBy = (a, b) => {
         if (a.name === b.name) {
           return a.type == 'completed' ? -1 : 1;
         }
-        var aCompleteness = a.current_value / a.target_value;
-        var bCompleteness = b.current_value / b.target_value;
+        const aCompleteness = a.current_value / a.target_value;
+        const bCompleteness = b.current_value / b.target_value;
         return compareCompleteness(aCompleteness, bCompleteness);
       };
       return data.sort(sortBy);
     };
-    _this.drawChart = function (data) {
-      var _this$props = _this.props,
-        getTableById = _this$props.getTableById,
-        statItem = _this$props.statItem,
-        colorThemeName = _this$props.colorThemeName;
-      var sort_type = statItem.sort_type,
-        completed_column = statItem.completed_column,
-        target_column = statItem.target_column,
-        table_id = statItem.table_id;
-      var isGroupChart = statItem.type === STAT_TYPE.GROUP_COMPLETENESS_CHART;
-      var currentTheme = getCurrentTheme(colorThemeName);
-      _this.initChartHandler();
-      var selectedTable = getTableById(table_id);
-      var completedColumn = TableUtils.getTableColumnByKey(selectedTable, completed_column);
-      var targetColumn = TableUtils.getTableColumnByKey(selectedTable, target_column);
+    this.drawChart = data => {
+      const {
+        getTableById,
+        statItem,
+        colorThemeName
+      } = this.props;
+      const {
+        sort_type,
+        completed_column,
+        target_column,
+        table_id
+      } = statItem;
+      const isGroupChart = statItem.type === STAT_TYPE.GROUP_COMPLETENESS_CHART;
+      const currentTheme = getCurrentTheme(colorThemeName);
+      this.initChartHandler();
+      const selectedTable = getTableById(table_id);
+      const completedColumn = TableUtils.getTableColumnByKey(selectedTable, completed_column);
+      const targetColumn = TableUtils.getTableColumnByKey(selectedTable, target_column);
 
       // 数据颜色映射value设置当前主题色
       if (isGroupChart) {
-        var newColorMap = {};
-        Object.keys(data.colorMap).forEach(function (item, index) {
+        const newColorMap = {};
+        Object.keys(data.colorMap).forEach((item, index) => {
           newColorMap[item] = currentTheme && currentTheme.colors[index];
         });
         data.colorMap = newColorMap;
       }
       if (sort_type && !isGroupChart) {
-        _this.sortData(data, sort_type);
+        this.sortData(data, sort_type);
       }
-      _this.chart.on('element:click', function (e) {
-        _this.props.toggleStatisticRecordsDialog(e.data.data, statItem);
+      this.chart.on('element:click', e => {
+        this.props.toggleStatisticRecordsDialog(e.data.data, statItem);
       });
-      _this.chart.data(data, {
+      this.chart.data(data, {
         'name': {
           type: 'cat',
           nice: false
         }
       });
-      _this.chart.coordinate('rect');
-      _this.handleAutoRange(targetColumn);
-      var themeColors = _this.getThemeColors();
-      _this.drawBar({
-        data: data,
-        currentTheme: currentTheme,
-        themeColors: themeColors,
-        isGroupChart: isGroupChart,
-        completedColumn: completedColumn,
-        targetColumn: targetColumn
+      this.chart.coordinate('rect');
+      this.handleAutoRange(targetColumn);
+      const themeColors = this.getThemeColors();
+      this.drawBar({
+        data,
+        currentTheme,
+        themeColors,
+        isGroupChart,
+        completedColumn,
+        targetColumn
       });
-      _this.setTooltip();
-      _this.setAxis(themeColors);
-      _this.chart.interaction('active-region');
-      _this.chart.coordinate().transpose();
+      this.setTooltip();
+      this.setAxis(themeColors);
+      this.chart.interaction('active-region');
+      this.chart.coordinate().transpose();
       if (isGroupChart) {
-        _this.setLegendGroup(themeColors);
+        this.setLegendGroup(themeColors);
       }
-      _this.chart.render();
+      this.chart.render();
     };
-    _this.initChartHandler = function () {
-      var _this$props2 = _this.props,
-        isPreview = _this$props2.isPreview,
-        statItem = _this$props2.statItem;
-      var display_percentage = statItem.display_percentage;
-      var config = {
-        container: _this.container,
+    this.initChartHandler = () => {
+      const {
+        isPreview,
+        statItem
+      } = this.props;
+      const {
+        display_percentage
+      } = statItem;
+      let config = {
+        container: this.container,
         autoFit: true,
         appendPadding: [0, display_percentage ? 30 : 0, 0, 0]
       };
@@ -116,20 +114,18 @@ var CompletenessChart = /*#__PURE__*/function (_BaseChart) {
         config.height = 400;
         config.width = 700;
       }
-      _this.chart = new Chart(config);
+      this.chart = new Chart(config);
     };
-    _this.handleAutoRange = function (targetColumn) {
-      var _this$props$statItem = _this.props.statItem,
-        _this$props$statItem$ = _this$props$statItem.y_axis_auto_range,
-        y_axis_auto_range = _this$props$statItem$ === void 0 ? true : _this$props$statItem$,
-        _this$props$statItem$2 = _this$props$statItem.y_axis_min,
-        y_axis_min = _this$props$statItem$2 === void 0 ? 0 : _this$props$statItem$2,
-        _this$props$statItem$3 = _this$props$statItem.y_axis_max,
-        y_axis_max = _this$props$statItem$3 === void 0 ? 0 : _this$props$statItem$3;
-      var valueScaleOptions = {
+    this.handleAutoRange = targetColumn => {
+      const {
+        y_axis_auto_range = true,
+        y_axis_min = 0,
+        y_axis_max = 0
+      } = this.props.statItem;
+      let valueScaleOptions = {
         nice: true,
-        formatter: function formatter(value) {
-          return _this.getNumberDisplayString(value, targetColumn.data);
+        formatter: value => {
+          return this.getNumberDisplayString(value, targetColumn.data);
         }
       };
       if (!y_axis_auto_range) {
@@ -138,7 +134,7 @@ var CompletenessChart = /*#__PURE__*/function (_BaseChart) {
           max: y_axis_max
         });
       }
-      _this.chart.scale({
+      this.chart.scale({
         name: {
           type: 'cat'
         },
@@ -146,31 +142,34 @@ var CompletenessChart = /*#__PURE__*/function (_BaseChart) {
         value: valueScaleOptions
       });
     };
-    _this.drawBar = function (_ref) {
-      var data = _ref.data,
-        themeColors = _ref.themeColors,
-        currentTheme = _ref.currentTheme,
-        isGroupChart = _ref.isGroupChart,
-        completedColumn = _ref.completedColumn,
-        targetColumn = _ref.targetColumn;
-      var _this$props$statItem2 = _this.props.statItem,
-        group_column = _this$props$statItem2.group_column,
-        display_percentage = _this$props$statItem2.display_percentage;
-      var adjustType = isGroupChart ? [{
+    this.drawBar = _ref => {
+      let {
+        data,
+        themeColors,
+        currentTheme,
+        isGroupChart,
+        completedColumn,
+        targetColumn
+      } = _ref;
+      const {
+        group_column,
+        display_percentage
+      } = this.props.statItem;
+      const adjustType = isGroupChart ? [{
         type: 'dodge',
         dodgeBy: 'group_label'
       }, {
         type: 'stack'
       }] : 'stack';
-      _this.chart.interval().label(display_percentage ? 'current_value*target_value' : false, {
+      this.chart.interval().label(display_percentage ? 'current_value*target_value' : false, {
         position: 'right',
         offset: 3,
         style: {
-          fontSize: _this.getLabelFontSize(),
+          fontSize: this.getLabelFontSize(),
           fill: themeColors.textColor
         },
-        content: function content(data) {
-          var currentValue = data.current_value,
+        content: function (data) {
+          const currentValue = data.current_value,
             targetValue = data.target_value || 1;
           if (data.type === 'completed') {
             if (currentValue >= targetValue) {
@@ -180,7 +179,7 @@ var CompletenessChart = /*#__PURE__*/function (_BaseChart) {
           }
           return Math.round(currentValue / targetValue * 100) + '%';
         }
-      }).position('name*value').color('group_label*type', function (group_label, type) {
+      }).position('name*value').color('group_label*type', (group_label, type) => {
         if (type === 'uncompleted') {
           return '#bdbdbd';
         }
@@ -188,23 +187,23 @@ var CompletenessChart = /*#__PURE__*/function (_BaseChart) {
           return currentTheme && currentTheme.colors[0] || 'red';
         }
         return data.colorMap[group_label];
-      }).adjust(adjustType).tooltip('name*current_value*target_value*type', function (name, current_value, target_value, type) {
-        var tooltipName = intl.get('Completed');
-        var value;
+      }).adjust(adjustType).tooltip('name*current_value*target_value*type', (name, current_value, target_value, type) => {
+        let tooltipName = intl.get('Completed');
+        let value;
         if (type === 'uncompleted') {
           tooltipName = intl.get('Uncompleted');
-          value = _this.getNumberDisplayString(target_value - current_value, targetColumn.data);
+          value = this.getNumberDisplayString(target_value - current_value, targetColumn.data);
         } else {
-          value = _this.getNumberDisplayString(current_value, completedColumn.data);
+          value = this.getNumberDisplayString(current_value, completedColumn.data);
         }
-        var tooltipTitle = name;
+        let tooltipTitle = name;
         if (!tooltipTitle && typeof tooltipTitle !== 'number') {
           tooltipTitle = intl.get(EMPTY_NAME);
         }
         return {
           title: tooltipTitle,
           name: tooltipName,
-          value: value
+          value
         };
       }).state({
         active: {
@@ -214,23 +213,23 @@ var CompletenessChart = /*#__PURE__*/function (_BaseChart) {
         }
       });
     };
-    _this.setTooltip = function () {
-      _this.chart.tooltip({
+    this.setTooltip = () => {
+      this.chart.tooltip({
         showTitle: true,
         showMarkers: false,
         containerTpl: '<div class="g2-tooltip"><div class="g2-tooltip-list"></div></div>',
         itemTpl: '<div class="g2-tooltip-content"><div class="tooltip-name">{title}<div><div class="tooltip-item">{name}: {value}<div></div>',
         domStyles: {
-          'g2-tooltip': _this.getDefaultChartStyleByKey('g2-tooltip'),
-          'tooltip-item': _this.getDefaultChartStyleByKey('tooltip-item')
+          'g2-tooltip': this.getDefaultChartStyleByKey('g2-tooltip'),
+          'tooltip-item': this.getDefaultChartStyleByKey('tooltip-item')
         }
       });
     };
-    _this.setAxis = function (themeColors) {
-      _this.chart.axis('name', {
+    this.setAxis = themeColors => {
+      this.chart.axis('name', {
         label: {
-          formatter: function formatter(name) {
-            var label = name;
+          formatter: name => {
+            let label = name;
             if (!name && typeof name !== 'number') {
               label = intl.get(EMPTY_NAME);
             }
@@ -244,7 +243,7 @@ var CompletenessChart = /*#__PURE__*/function (_BaseChart) {
           style: themeColors.gridColor
         }
       });
-      _this.chart.axis('value', {
+      this.chart.axis('value', {
         label: {
           style: {
             fill: themeColors.textColor
@@ -259,13 +258,13 @@ var CompletenessChart = /*#__PURE__*/function (_BaseChart) {
         }
       });
     };
-    _this.setLegendGroup = function (themeColors) {
-      _this.chart.legend('group_label', {
+    this.setLegendGroup = themeColors => {
+      this.chart.legend('group_label', {
         itemName: {
           style: {
             fill: themeColors.textColor
           },
-          formatter: function formatter(name) {
+          formatter: name => {
             return !name && typeof name !== 'number' ? intl.get(EMPTY_NAME) : name;
           }
         },
@@ -285,111 +284,100 @@ var CompletenessChart = /*#__PURE__*/function (_BaseChart) {
         }
       });
     };
-    _this.state = {
+    this.state = {
       isCalculatingData: true,
       showResultDescription: true
     };
-    _this.calculateData = null;
-    return _this;
+    this.calculateData = null;
   }
-  _createClass(CompletenessChart, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var _this2 = this;
-      var _this$props3 = this.props,
-        statItem = _this$props3.statItem,
-        chartCalculator = _this$props3.chartCalculator;
-      if (this.container) {
-        chartCalculator.calculate(statItem).then(function (data) {
-          var showResultDescription = data.length > 0 ? false : true;
-          _this2.setState({
-            isCalculatingData: false,
-            showResultDescription: showResultDescription
-          }, function () {
-            if (!showResultDescription) {
-              _this2.drawChart(data);
-              _this2.calculateData = data;
-            }
-          });
+  componentDidMount() {
+    const {
+      statItem,
+      chartCalculator
+    } = this.props;
+    if (this.container) {
+      chartCalculator.calculate(statItem).then(data => {
+        const showResultDescription = data.length > 0 ? false : true;
+        this.setState({
+          isCalculatingData: false,
+          showResultDescription
+        }, () => {
+          if (!showResultDescription) {
+            this.drawChart(data);
+            this.calculateData = data;
+          }
         });
-      }
+      });
     }
-  }, {
-    key: "shouldComponentUpdate",
-    value: function shouldComponentUpdate(nextProps, nextState) {
-      var colorThemeName = this.props.colorThemeName;
-      if (this.canUpdate(this.props, nextProps)) {
-        return true;
-      }
-      if (nextState.isCalculatingData !== this.state.isCalculatingData) {
-        return true;
-      }
-      if (nextProps.colorThemeName !== colorThemeName) {
-        return true;
-      }
-      return false;
+  }
+  shouldComponentUpdate(nextProps, nextState) {
+    const {
+      colorThemeName
+    } = this.props;
+    if (this.canUpdate(this.props, nextProps)) {
+      return true;
+    }
+    if (nextState.isCalculatingData !== this.state.isCalculatingData) {
+      return true;
     }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(preProps, preState) {
-      var _this3 = this;
-      var _this$props4 = this.props,
-        statItem = _this$props4.statItem,
-        chartCalculator = _this$props4.chartCalculator;
-      var isCalculatingData = this.state.isCalculatingData;
-      if (isCalculatingData !== preState.isCalculatingData) return;
-      if (this.shouldCalculateStatItem(preProps, this.props)) {
+    if (nextProps.colorThemeName !== colorThemeName) {
+      return true;
+    }
+    return false;
+  }
+  componentDidUpdate(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
+      });
+      chartCalculator.calculate(statItem).then(data => {
+        const showResultDescription = data.length > 0 ? false : true;
+        this.chart && this.destroyChart();
+        this.calculateData = data;
         this.setState({
-          isCalculatingData: true
-        });
-        chartCalculator.calculate(statItem).then(function (data) {
-          var showResultDescription = data.length > 0 ? false : true;
-          _this3.chart && _this3.destroyChart();
-          _this3.calculateData = data;
-          _this3.setState({
-            isCalculatingData: false,
-            showResultDescription: showResultDescription
-          }, function () {
-            if (!showResultDescription) {
-              _this3.drawChart(data);
-              if (_this3.props.isPreview) _this3.chart.forceFit();
-            }
-          });
-        });
-      } else {
-        if (!this.state.showResultDescription) {
-          this.chart && this.destroyChart();
-          this.drawChart(this.calculateData);
-          if (this.props.isPreview) {
-            this.chart.forceFit();
+          isCalculatingData: false,
+          showResultDescription
+        }, () => {
+          if (!showResultDescription) {
+            this.drawChart(data);
+            if (this.props.isPreview) this.chart.forceFit();
           }
+        });
+      });
+    } else {
+      if (!this.state.showResultDescription) {
+        this.chart && this.destroyChart();
+        this.drawChart(this.calculateData);
+        if (this.props.isPreview) {
+          this.chart.forceFit();
         }
       }
     }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      this.container = null;
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this4 = this;
-      var _this$state = this.state,
-        isCalculatingData = _this$state.isCalculatingData,
-        showResultDescription = _this$state.showResultDescription;
-      return /*#__PURE__*/React.createElement(React.Fragment, null, isCalculatingData && this.renderLoading(), showResultDescription && this.renderEmpty(), /*#__PURE__*/React.createElement("div", {
-        ref: function ref(_ref2) {
-          return _this4.container = _ref2;
-        },
-        style: {
-          padding: 20
-        },
-        className: "statistic-chart-container"
-      }));
-    }
-  }]);
-  return CompletenessChart;
-}(BaseChart);
+  }
+  componentWillUnmount() {
+    this.container = null;
+  }
+  render() {
+    const {
+      isCalculatingData,
+      showResultDescription
+    } = this.state;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, isCalculatingData && this.renderLoading(), showResultDescription && this.renderEmpty(), /*#__PURE__*/React.createElement("div", {
+      ref: ref => this.container = ref,
+      style: {
+        padding: 20
+      },
+      className: "statistic-chart-container"
+    }));
+  }
+}
 CompletenessChart.propTypes = propTypes;
 export default CompletenessChart;