dtable-statistic 4.4.24 → 5.0.0-alpha.2

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

@@ -1,390 +0,0 @@
-"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;