dtable-statistic 4.0.2-test-2

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

@@ -0,0 +1,389 @@
+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';
+import { TableUtils, getNumberDisplayString } from 'dtable-store';
+import BaseChart from './base-chart';
+import { Chart } from '../custom-g2';
+import { Loading } from '../components';
+import { getCurrentTheme, getLabelFontSize } from '../utils/common-utils';
+import { EMPTY_NAME, NO_STATISTIC_RESULTS, STAT_ITEM_THEME_COLORS, STAT_TYPE } from '../constants';
+var propTypes = {
+  isPreview: PropTypes.bool,
+  isEnlarge: PropTypes.bool,
+  isEdit: PropTypes.bool,
+  theme: PropTypes.string,
+  colorThemeName: PropTypes.string,
+  statItem: PropTypes.object,
+  chartCalculator: PropTypes.object,
+  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.getLabelFontSize = function () {
+      var statItem = _this.props.statItem;
+      var label_font_size = statItem.label_font_size;
+      return getLabelFontSize(label_font_size);
+    };
+    _this.sortData = function (data, sortType) {
+      var compareCompleteness = sortType == 'ascending' ? function (a, b) {
+        return a - b;
+      } : function (a, b) {
+        return b - a;
+      };
+      var sortBy = function 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;
+        return compareCompleteness(aCompleteness, bCompleteness);
+      };
+      return data.sort(sortBy);
+    };
+    _this.drawChart = function (data) {
+      var _this$props = _this.props,
+        getTableById = _this$props.getTableById,
+        isPreview = _this$props.isPreview,
+        statItem = _this$props.statItem,
+        theme = _this$props.theme,
+        isEnlarge = _this$props.isEnlarge,
+        colorThemeName = _this$props.colorThemeName;
+      var group_column = statItem.group_column,
+        display_percentage = statItem.display_percentage,
+        sort_type = statItem.sort_type;
+      var isGroupChart = statItem.type === STAT_TYPE.GROUP_COMPLETENESS_CHART;
+      var currentTheme = getCurrentTheme(colorThemeName);
+
+      // 数据颜色映射value设置当前主题色
+      if (isGroupChart) {
+        var newColorMap = {};
+        Object.keys(data.colorMap).forEach(function (item, index) {
+          newColorMap[item] = currentTheme && currentTheme.colors[index];
+        });
+        data.colorMap = newColorMap;
+      }
+      if (sort_type && !isGroupChart) {
+        _this.sortData(data, sort_type);
+      }
+      if (isPreview) {
+        _this.chart = new Chart({
+          container: _this.container,
+          autoFit: true,
+          appendPadding: [0, display_percentage ? 30 : 0, 0, 0]
+        });
+      } else {
+        _this.chart = new Chart({
+          container: _this.container,
+          autoFit: true,
+          height: 400,
+          width: 700,
+          appendPadding: [0, display_percentage ? 30 : 0, 0, 0]
+        });
+      }
+      _this.chart.on('element:click', function (e) {
+        _this.props.toggleStatisticRecordsDialog(e.data.data, statItem);
+      });
+      _this.chart.data(data, {
+        'name': {
+          type: 'cat',
+          nice: false
+        }
+      });
+      _this.chart.coordinate('rect');
+      var completed_column = statItem.completed_column,
+        target_column = statItem.target_column,
+        table_id = statItem.table_id,
+        _statItem$y_axis_auto = statItem.y_axis_auto_range,
+        y_axis_auto_range = _statItem$y_axis_auto === void 0 ? true : _statItem$y_axis_auto,
+        _statItem$y_axis_min = statItem.y_axis_min,
+        y_axis_min = _statItem$y_axis_min === void 0 ? 0 : _statItem$y_axis_min,
+        _statItem$y_axis_max = statItem.y_axis_max,
+        y_axis_max = _statItem$y_axis_max === void 0 ? 0 : _statItem$y_axis_max;
+      var selectedTable = getTableById(table_id);
+      var completedColumn = TableUtils.getTableColumnByKey(selectedTable, completed_column);
+      var targetColumn = TableUtils.getTableColumnByKey(selectedTable, target_column);
+      var valueScaleOptions = {
+        nice: true,
+        formatter: function formatter(value) {
+          return getNumberDisplayString(value, targetColumn.data);
+        }
+      };
+      if (!y_axis_auto_range) {
+        valueScaleOptions = Object.assign({}, valueScaleOptions, {
+          min: y_axis_min,
+          max: y_axis_max
+        });
+      }
+      _this.chart.scale({
+        name: {
+          type: 'cat'
+        },
+        // Automatic adjustment of maximum and minimum values
+        value: valueScaleOptions
+      });
+      var adjustType = isGroupChart ? [{
+        type: 'dodge',
+        dodgeBy: 'group_label'
+      }, {
+        type: 'stack'
+      }] : 'stack';
+      var themeColors = STAT_ITEM_THEME_COLORS.light;
+      if (theme === 'dark' && !isEnlarge && isPreview) {
+        themeColors = STAT_ITEM_THEME_COLORS.dark;
+      }
+      _this.chart.interval().label(statItem.display_percentage ? 'current_value*target_value' : false, {
+        position: 'right',
+        offset: 3,
+        style: {
+          fontSize: _this.getLabelFontSize(),
+          fill: themeColors.textColor
+        },
+        content: function content(data) {
+          var currentValue = data.current_value,
+            targetValue = data.target_value || 1;
+          if (data.type === 'completed') {
+            if (currentValue >= targetValue) {
+              return Math.round(currentValue / targetValue * 100) + '%';
+            }
+            return null;
+          }
+          return Math.round(currentValue / targetValue * 100) + '%';
+        }
+      }).position('name*value').color('group_label*type', function (group_label, type) {
+        if (type === 'uncompleted') {
+          return '#bdbdbd';
+        }
+        if (!isGroupChart || !group_column) {
+          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;
+        if (type === 'uncompleted') {
+          tooltipName = intl.get('Uncompleted');
+          value = getNumberDisplayString(target_value - current_value, targetColumn.data);
+        } else {
+          value = getNumberDisplayString(current_value, completedColumn.data);
+        }
+        var tooltipTitle = name;
+        if (!tooltipTitle && typeof tooltipTitle !== 'number') {
+          tooltipTitle = intl.get(EMPTY_NAME);
+        }
+        return {
+          title: tooltipTitle,
+          name: tooltipName,
+          value: value
+        };
+      }).state({
+        active: {
+          style: {
+            stroke: null
+          }
+        }
+      });
+      _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': {
+            borderRadius: '2px',
+            backgroundColor: '#fff',
+            padding: '10px'
+          },
+          'tooltip-item': {
+            marginTop: '5px'
+          }
+        }
+      });
+
+      // set axis label and tooltip
+      _this.chart.axis('name', {
+        label: {
+          formatter: function formatter(name) {
+            var label = name;
+            if (!name && typeof name !== 'number') {
+              label = intl.get(EMPTY_NAME);
+            }
+            return label;
+          },
+          style: {
+            fill: themeColors.textColor
+          }
+        },
+        line: {
+          style: themeColors.gridColor
+        }
+      });
+      _this.chart.axis('value', {
+        label: {
+          style: {
+            fill: themeColors.textColor
+          }
+        },
+        grid: {
+          line: {
+            style: {
+              stroke: themeColors.gridColor
+            }
+          }
+        }
+      });
+      _this.chart.interaction('active-region');
+      _this.chart.coordinate().transpose();
+      if (isGroupChart) {
+        _this.chart.legend('group_label', {
+          itemName: {
+            style: {
+              fill: themeColors.textColor
+            },
+            formatter: function formatter(name) {
+              return !name && typeof name !== 'number' ? intl.get(EMPTY_NAME) : name;
+            }
+          },
+          pageNavigator: {
+            text: {
+              style: {
+                fill: themeColors.textColor
+              }
+            },
+            marker: {
+              style: {
+                fill: themeColors.legendPageNavigatorMarkerColor,
+                inactiveFill: themeColors.legendPageNavigatorMarkerColor,
+                inactiveOpacity: 0.45
+              }
+            }
+          }
+        });
+      }
+      _this.chart.render();
+    };
+    _this.destroyChart = function () {
+      _this.chart.destroy();
+      _this.chart = null;
+    };
+    _this.state = {
+      isCalculatingData: true,
+      showResultDescription: true
+    };
+    _this.calculateData = null;
+    return _this;
+  }
+  _createClass(CompletenessChart, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var _this2 = this;
+      var _this$props2 = this.props,
+        statItem = _this$props2.statItem,
+        chartCalculator = _this$props2.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;
+            }
+          });
+        });
+      }
+    }
+  }, {
+    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;
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(preProps, preState) {
+      var _this3 = this;
+      var _this$props3 = this.props,
+        statItem = _this$props3.statItem,
+        chartCalculator = _this$props3.chartCalculator;
+      var isCalculatingData = this.state.isCalculatingData;
+      if (isCalculatingData !== preState.isCalculatingData) return;
+      if (this.shouldCalculateStatItem(preProps, this.props)) {
+        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();
+          }
+        }
+      }
+    }
+  }, {
+    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 && /*#__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", {
+        ref: function ref(_ref) {
+          return _this4.container = _ref;
+        },
+        style: {
+          padding: 20
+        },
+        className: "statistic-chart-container"
+      }));
+    }
+  }]);
+  return CompletenessChart;
+}(BaseChart);
+CompletenessChart.propTypes = propTypes;
+export default CompletenessChart;