dtable-statistic 4.4.24 → 5.0.0-alpha.0

package/es/stat-view/basic-number-card.js

@@ -1,201 +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 _constants = require("../constants");
-const propTypes = {
-  isPreview: _propTypes.default.bool,
-  statItem: _propTypes.default.object,
-  chartCalculator: _propTypes.default.object,
-  getTableById: _propTypes.default.func
-};
-class BasicNumericCard extends _baseChart.default {
-  constructor(props) {
-    super(props);
-    this.drawChart = data => {
-      const {
-        isPreview,
-        statItem
-      } = this.props;
-      if (isPreview) {
-        this.chart = new _customG.Chart({
-          container: this.container,
-          autoFit: true
-        });
-      } else {
-        this.chart = new _customG.Chart({
-          container: this.container,
-          autoFit: true,
-          height: 400,
-          width: 700
-        });
-      }
-      const content = this.formatData(data);
-      const fontSize = this.getFontSize(content);
-      let labelFontSize = fontSize - 35;
-      if (labelFontSize > 20) {
-        labelFontSize = 20;
-      }
-      if (labelFontSize < 12) {
-        labelFontSize = 12;
-      }
-      const themeColors = this.getThemeColors();
-      this.chart.annotation().html({
-        position: ['50%', '50%'],
-        html: "\n        <div style=\"color: ".concat(themeColors.cardColor, "; text-align: center;\">\n          <p class=\"text-content\" style=\"font-size: ").concat(fontSize, "px; margin: -15px 0 2px 0;\">").concat(content, "</p>\n          <p style=\"font-size: ").concat(labelFontSize, "px;margin: 0;\">").concat(statItem.name || '', "</p>\n        </div>\n      ")
-      });
-      this.chart.render();
-    };
-    this.formatData = data => {
-      const {
-        getTableById,
-        statItem
-      } = this.props;
-      const {
-        summary_method,
-        table_id,
-        numeric_column
-      } = statItem;
-      if (summary_method === _constants.SUMMARY_METHOD_MAP.Distinct_values) {
-        return data;
-      }
-      if (!data) return _reactIntlUniversal.default.get(_constants.EMPTY_NAME);
-      if (summary_method !== 'Row_count') {
-        const table = getTableById(table_id);
-        const selectedColumn = (0, _dtableUtils.getTableColumnByKey)(table, numeric_column);
-        const formattedContent = this.getNumberDisplayString(data, selectedColumn.data || {});
-        return formattedContent;
-      }
-      let string = data + '';
-      const isFloat = string.indexOf('.') > 0;
-      if (isFloat) {
-        string = string.slice(0, string.indexOf('.'));
-      }
-      let content = '';
-      let endPoint = -3;
-      let startPoint = 0;
-      let subString = string.slice(endPoint);
-      while (subString.length === 3) {
-        content = ',' + subString + content;
-        startPoint = endPoint;
-        endPoint -= 3;
-        subString = string.slice(endPoint, startPoint);
-      }
-      content = subString + content;
-      if (content[0] === ',') {
-        content = content.slice(1);
-      }
-      if (isFloat) {
-        const initString = data + '';
-        content = content + initString.slice(initString.indexOf('.'));
-      }
-      return content;
-    };
-    this.getFontSize = content => {
-      let canvas = document.createElement('canvas');
-      const context = canvas.getContext('2d');
-      const {
-        width
-      } = this.chart;
-      let font = context.font;
-      let initFontSize = 70;
-      const fontStyle = font.slice(font.indexOf('px'));
-      font = initFontSize + fontStyle;
-      context.font = font;
-      context.fontSize = initFontSize;
-      while (context.measureText(content).width >= width - 40) {
-        initFontSize -= 1;
-        context.font = initFontSize + fontStyle;
-        context.fontSize = initFontSize;
-      }
-      canvas = null;
-      if (initFontSize < 16) {
-        initFontSize = 16;
-      }
-      return initFontSize;
-    };
-    this.state = {
-      isCalculatingData: true
-    };
-    this.calculateData = null;
-  }
-  async componentDidMount() {
-    const {
-      statItem,
-      chartCalculator
-    } = this.props;
-    if (this.container) {
-      const data = await chartCalculator.calculate(statItem);
-      this.setState({
-        isCalculatingData: false
-      });
-      this.drawChart(data);
-      this.calculateData = data;
-    }
-  }
-  shouldComponentUpdate(nextProps, nextState) {
-    if (this.canUpdate(this.props, nextProps)) {
-      return true;
-    }
-    if (nextState.isCalculatingData !== this.state.isCalculatingData) {
-      return true;
-    }
-    return false;
-  }
-  async 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
-      });
-      if (this.container) {
-        const data = await chartCalculator.calculate(statItem);
-        this.calculateData = data;
-        this.setState({
-          isCalculatingData: false
-        });
-        this.chart && this.chart.destroy();
-        this.drawChart(data);
-        if (this.props.isPreview) {
-          this.chart.forceFit();
-        }
-      }
-    } else {
-      this.chart && this.chart.destroy();
-      this.drawChart(this.calculateData);
-      if (this.props.isPreview) {
-        this.chart.forceFit();
-      }
-    }
-  }
-  componentWillUnmount() {
-    this.container = null;
-  }
-  render() {
-    const {
-      isCalculatingData
-    } = this.state;
-    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isCalculatingData && this.renderLoading(), /*#__PURE__*/_react.default.createElement("div", {
-      ref: ref => this.container = ref,
-      className: "statistic-chart-container statistic-number-card"
-    }));
-  }
-}
-BasicNumericCard.propTypes = propTypes;
-var _default = exports.default = BasicNumericCard;