dtable-statistic 4.4.24-alpha.9 → 5.0.0

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

@@ -0,0 +1,390 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _reactIntlUniversal = _interopRequireDefault(require("react-intl-universal"));
+var _dtableUtils = require("dtable-utils");
+var _baseChart = _interopRequireDefault(require("./base-chart"));
+var _customG = require("../custom-g2");
+var _commonUtils = require("../utils/common-utils");
+var _constants = require("../constants");
+const propTypes = {
+  isPreview: _propTypes.default.bool,
+  isEdit: _propTypes.default.bool,
+  colorThemeName: _propTypes.default.string,
+  statItem: _propTypes.default.object,
+  chartCalculator: _propTypes.default.object,
+  getTableById: _propTypes.default.func,
+  toggleStatisticRecordsDialog: _propTypes.default.func
+};
+class CompletenessChart extends _baseChart.default {
+  constructor(props) {
+    super(props);
+    this.destroyChart = () => {
+      this.chart.destroy();
+      this.chart = null;
+    };
+    this.sortData = (data, sortType) => {
+      const compareCompleteness = sortType === 'ascending' ? function (a, b) {
+        return a - b;
+      } : function (a, b) {
+        return b - a;
+      };
+      const sortBy = (a, b) => {
+        if (a.name === b.name) {
+          return a.type === 'completed' ? -1 : 1;
+        }
+        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 = data => {
+      const {
+        getTableById,
+        statItem,
+        colorThemeName
+      } = this.props;
+      const {
+        sort_type,
+        completed_column,
+        target_column,
+        table_id
+      } = statItem;
+      const isGroupChart = statItem.type === _constants.STAT_TYPE.GROUP_COMPLETENESS_CHART;
+      const currentTheme = (0, _commonUtils.getCurrentTheme)(colorThemeName);
+      this.initChartHandler();
+      const selectedTable = getTableById(table_id);
+      const completedColumn = (0, _dtableUtils.getTableColumnByKey)(selectedTable, completed_column);
+      const targetColumn = (0, _dtableUtils.getTableColumnByKey)(selectedTable, target_column);
+
+      // 数据颜色映射value设置当前主题色
+      if (isGroupChart) {
+        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.chart.on('element:click', e => {
+        this.props.toggleStatisticRecordsDialog(e.data.data, statItem);
+      });
+      this.chart.data(data, {
+        'name': {
+          type: 'cat',
+          nice: false
+        }
+      });
+      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();
+      if (isGroupChart) {
+        this.setLegendGroup(themeColors);
+      }
+      this.chart.render();
+    };
+    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]
+      };
+      if (!isPreview) {
+        config.height = 400;
+        config.width = 700;
+      }
+      this.chart = new _customG.Chart(config);
+    };
+    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: value => {
+          return this.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
+      });
+    };
+    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, {
+        position: 'right',
+        offset: 3,
+        style: {
+          fontSize: this.getLabelFontSize(),
+          fill: themeColors.textColor
+        },
+        content: function (data) {
+          const 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', (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', (name, current_value, target_value, type) => {
+        let tooltipName = _reactIntlUniversal.default.get('Completed');
+        let value;
+        if (type === 'uncompleted') {
+          tooltipName = _reactIntlUniversal.default.get('Uncompleted');
+          value = this.getNumberDisplayString(target_value - current_value, targetColumn.data);
+        } else {
+          value = this.getNumberDisplayString(current_value, completedColumn.data);
+        }
+        let tooltipTitle = name;
+        if (!tooltipTitle && typeof tooltipTitle !== 'number') {
+          tooltipTitle = _reactIntlUniversal.default.get(_constants.EMPTY_NAME);
+        }
+        return {
+          title: tooltipTitle,
+          name: tooltipName,
+          value
+        };
+      }).state({
+        active: {
+          style: {
+            stroke: null
+          }
+        }
+      });
+    };
+    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')
+        }
+      });
+    };
+    this.setAxis = themeColors => {
+      this.chart.axis('name', {
+        label: {
+          formatter: name => {
+            let label = name;
+            if (!name && typeof name !== 'number') {
+              label = _reactIntlUniversal.default.get(_constants.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.setLegendGroup = themeColors => {
+      this.chart.legend('group_label', {
+        itemName: {
+          style: {
+            fill: themeColors.textColor
+          },
+          formatter: name => {
+            return !name && typeof name !== 'number' ? _reactIntlUniversal.default.get(_constants.EMPTY_NAME) : name;
+          }
+        },
+        pageNavigator: {
+          text: {
+            style: {
+              fill: themeColors.textColor
+            }
+          },
+          marker: {
+            style: {
+              fill: themeColors.legendPageNavigatorMarkerColor,
+              inactiveFill: themeColors.legendPageNavigatorMarkerColor,
+              inactiveOpacity: 0.45
+            }
+          }
+        }
+      });
+    };
+    this.state = {
+      isCalculatingData: true,
+      showResultDescription: true
+    };
+    this.calculateData = null;
+  }
+  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;
+          }
+        });
+      });
+    }
+  }
+  shouldComponentUpdate(nextProps, nextState) {
+    const {
+      colorThemeName
+    } = this.props;
+    if (this.canUpdate(this.props, nextProps)) {
+      return true;
+    }
+    if (nextState.isCalculatingData !== this.state.isCalculatingData) {
+      return true;
+    }
+    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: 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();
+        }
+      }
+    }
+  }
+  componentWillUnmount() {
+    this.container = null;
+  }
+  render() {
+    const {
+      isCalculatingData,
+      showResultDescription
+    } = this.state;
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isCalculatingData && this.renderLoading(), showResultDescription && this.renderEmpty(), /*#__PURE__*/_react.default.createElement("div", {
+      ref: ref => this.container = ref,
+      style: {
+        padding: 20
+      },
+      className: "statistic-chart-container"
+    }));
+  }
+}
+CompletenessChart.propTypes = propTypes;
+var _default = exports.default = CompletenessChart;