dtable-statistic 4.4.24-alpha.9 → 5.0.0

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

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