dtable-statistic 4.4.24 → 5.0.0-alpha.0

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

@@ -1,253 +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 _dataSet = _interopRequireDefault(require("@antv/data-set"));
-var _reactIntlUniversal = _interopRequireDefault(require("react-intl-universal"));
-var _util = require("@antv/util");
-var _text = require("@antv/g2/esm/util/text");
-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");
-var _statisticChartModule = _interopRequireDefault(require("../assets/css/statistic-chart.module.css"));
-const propTypes = {
-  isPreview: _propTypes.default.bool,
-  isEnlarge: _propTypes.default.bool,
-  theme: _propTypes.default.string,
-  colorThemeName: _propTypes.default.string,
-  statItem: _propTypes.default.object,
-  chartCalculator: _propTypes.default.object,
-  getTableById: _propTypes.default.func,
-  toggleStatisticRecordsDialog: _propTypes.default.func
-};
-class TreemapChart extends _baseChart.default {
-  constructor(props) {
-    super(props);
-    this.drawChart = data => {
-      const {
-        getTableById,
-        isPreview,
-        statItem,
-        colorThemeName
-      } = this.props;
-      const {
-        table_id,
-        summary_type,
-        summary_column_key
-      } = statItem;
-      const table = getTableById(table_id);
-      const selectedNumericColumn = (0, _dtableUtils.getTableColumnByKey)(table, summary_column_key);
-      if (isPreview) {
-        this.chart = new _customG.Chart({
-          container: this.container,
-          autoFit: true
-        });
-      } else {
-        this.chart = new _customG.Chart({
-          container: this.container,
-          height: 400,
-          width: 700
-        });
-      }
-      this.chart.on('element:click', e => {
-        this.props.toggleStatisticRecordsDialog(e.data.data, statItem);
-      });
-      const currentTheme = (0, _commonUtils.getCurrentTheme)(colorThemeName);
-      const newData = (0, _commonUtils.formatPieChartData)(data, statItem, table, currentTheme);
-      const colorSet = newData.colorSet;
-      const {
-        DataView
-      } = _dataSet.default;
-      const dv = new DataView();
-      const fullData = {
-        name: 'root',
-        children: newData.map(item => {
-          let name = item.name;
-          item.name = name || name === 0 ? name : _reactIntlUniversal.default.get(_constants.EMPTY_NAME);
-          if (name === 'Others') {
-            item.name = _reactIntlUniversal.default.get('Others');
-          }
-          return item;
-        })
-      };
-      dv.source(fullData, {
-        type: 'hierarchy'
-      }).transform({
-        field: 'value',
-        type: 'hierarchy.treemap',
-        tile: 'treemapResquarify',
-        as: ['x', 'y']
-      });
-      const nodes = [];
-      // eslint-disable-next-line
-      for (const node of dv.getAllNodes()) {
-        if (node.data.name === 'root') {
-          continue;
-        }
-        const eachNode = {
-          name: node.data.name,
-          x: node.x,
-          y: node.y,
-          value: node.data.value,
-          formatted_value: node.data.formatted_value,
-          percent: node.data.percent,
-          original_name: node.data.original_name,
-          rows: node.data.rows || null
-        };
-        nodes.push(eachNode);
-      }
-      const chart = this.chart;
-      chart.data(nodes);
-      chart.scale({
-        x: {
-          nice: true
-        },
-        y: {
-          nice: true
-        }
-      });
-      chart.axis(false);
-      chart.legend(false);
-      chart.tooltip({
-        showTitle: false,
-        showMarkers: false,
-        containerTpl: '<div class="g2-tooltip"><div class="g2-tooltip-list"></div></div>',
-        itemTpl: '<div class="g2-tooltip-content"><div class="tooltip-name">{name}<div><div class="tooltip-item">{info}<div></div>',
-        domStyles: {
-          'g2-tooltip': this.getDefaultChartStyleByKey('g2-tooltip'),
-          'tooltip-item': this.getDefaultChartStyleByKey('tooltip-item')
-        }
-      });
-      chart.polygon().position('x*y').color('name', colorSet).tooltip('name*formatted_value*percent', (name, value, percent) => {
-        return {
-          name,
-          info: summary_type === _constants.STATISTICS_COUNT_TYPE.COUNT ? "".concat(value) : "".concat(selectedNumericColumn.name, ": ").concat(value, " (").concat(percent, ")")
-        };
-      }).style({
-        lineWidth: 1,
-        stroke: '#fff'
-      }).label('name', {
-        offset: 0,
-        style: {
-          textBaseline: 'middle'
-        },
-        content: obj => {
-          if (obj.name !== 'root') {
-            return obj.name;
-          }
-        },
-        layout: {
-          type: 'custom-limit-in-shape'
-        }
-      });
-      chart.interaction('element-active');
-      chart.render();
-    };
-    this.state = {
-      isCalculatingData: true
-    };
-    this.calculateData = null;
-
-    // customize label layout: show ellipsis for long labels
-    function limitInShape(items, labels, shapes, region) {
-      (0, _util.each)(labels, (label, index) => {
-        const labelBBox = label.getCanvasBBox();
-        const shapeBBox = shapes[index].getBBox();
-        if (labelBBox.minX < shapeBBox.minX || labelBBox.minY < shapeBBox.minY || labelBBox.maxX > shapeBBox.maxX || labelBBox.maxY > shapeBBox.maxY) {
-          const translateX = labelBBox.width - shapeBBox.width + 20;
-          const textShapes = label.findAll(shape => shape.get('type') === 'text');
-          textShapes.forEach(textShape => {
-            const style = (0, _util.pick)(textShape.attr(), ['fontSize', 'fontFamily', 'fontWeight', 'fontStyle', 'fontVariant']);
-            const textBox = textShape.getCanvasBBox();
-            const text = (0, _text.getEllipsisText)(textShape.attr('text'), textBox.width - Math.abs(translateX), style);
-            textShape.attr('text', text);
-          });
-        }
-      });
-    }
-    (0, _customG.registerGeometryLabelLayout)('custom-limit-in-shape', limitInShape);
-  }
-  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) {
-    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;
-  }
-  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 ".concat(_statisticChartModule.default['statistic-treemap-chart-container'])
-    }));
-  }
-}
-TreemapChart.propTypes = propTypes;
-var _default = exports.default = TreemapChart;

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

@@ -1,249 +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 TrendChart 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 {
-        summary_method
-      } = statItem;
-      const latest = data && data.latest;
-      const content = summary_method === _constants.SUMMARY_METHOD_MAP.Distinct_values ? latest : this.formatData(latest);
-      const fontSize = this.getFontSize(content);
-      let labelFontSize = fontSize - 32;
-      const themeColors = this.getThemeColors();
-      const labelContent = this.createLabelContent(data, labelFontSize);
-      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: -8px 0 2px 0;\">").concat(content, "</p>\n          <p style=\"margin: 0;\">").concat(labelContent, "</p>\n        </div>\n      ")
-      });
-      this.chart.render();
-    };
-    this.formatData = data => {
-      const {
-        getTableById,
-        statItem
-      } = this.props;
-      if (typeof data !== 'number') return _reactIntlUniversal.default.get(_constants.EMPTY_NAME);
-      const {
-        table_id,
-        summary_type,
-        summary_column
-      } = statItem;
-      if (summary_type !== _constants.STATISTICS_COUNT_TYPE.COUNT) {
-        const table = getTableById(table_id);
-        const selectedColumn = (0, _dtableUtils.getTableColumnByKey)(table, summary_column);
-        return this.getNumberDisplayString(data, selectedColumn.data || {});
-      }
-      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, maxFontSize) => {
-      let canvas = document.createElement('canvas');
-      const context = canvas.getContext('2d');
-      const {
-        width
-      } = this.chart;
-      let font = context.font;
-      let initFontSize = maxFontSize || 48;
-      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 (maxFontSize) return initFontSize;
-      if (initFontSize < 16) {
-        initFontSize = 16;
-      }
-      return initFontSize;
-    };
-    this.createLabelContent = (data, maxFontSize) => {
-      const {
-        statItem
-      } = this.props;
-      const {
-        date_granularity
-      } = statItem;
-      let conjunctions = '';
-      if (date_granularity === _constants.DATE_GRANULARITY.YEAR) {
-        conjunctions = _reactIntlUniversal.default.get('The_year_before_last');
-      } else if (date_granularity === _constants.DATE_GRANULARITY.QUARTER) {
-        conjunctions = _reactIntlUniversal.default.get('The_quarter_before_last');
-      } else if (date_granularity === _constants.DATE_GRANULARITY.MONTH) {
-        conjunctions = _reactIntlUniversal.default.get('The_month_before_last');
-      } else if (date_granularity === _constants.DATE_GRANULARITY.WEEK) {
-        conjunctions = _reactIntlUniversal.default.get('The_week_before_last');
-      } else if (date_granularity === 'days_7') {
-        conjunctions = _reactIntlUniversal.default.get('Previous_7_days');
-      } else if (date_granularity === 'days_30') {
-        conjunctions = _reactIntlUniversal.default.get('Previous_30_days');
-      } else {
-        conjunctions = _reactIntlUniversal.default.get('The_day_before_yesterday');
-      }
-      const {
-        result,
-        type,
-        previous
-      } = data || {};
-      let color = '#ff0000',
-        icon = 'dtable-icon-down';
-      if (type === 'up') {
-        color = '#008000';
-        icon = 'dtable-icon-up';
-      }
-      let resultText = "".concat(Number.parseFloat(result * 100).toFixed(2), "%&#8226;").concat(conjunctions).concat(previous);
-      if (!previous) {
-        resultText = _reactIntlUniversal.default.get('Can_not_compare_with_var', {
-          var: conjunctions.toLowerCase()
-        });
-      }
-      let labelFontSize = this.getFontSize(resultText, maxFontSize);
-      labelFontSize = labelFontSize > 20 ? 20 : labelFontSize;
-      if (!previous) {
-        return "<span style='font-size: ".concat(labelFontSize, "px'>").concat(resultText, "</span>");
-      }
-      if (labelFontSize <= 12) {
-        if (!result) return '';
-        return "<span style='font-size: ".concat(labelFontSize, "px; width: 100%;'>\n        <i style='color: ").concat(color, "' class='dtable-font ").concat(icon, "'></i>\n        <span style='color: ").concat(color, "'>").concat(result ? Number.parseFloat(result * 100).toFixed(2) : '', "%</span>\n      </span>");
-      }
-      const resultContent = "\n      <span style='display: block; word-break: keep-all; font-size: ".concat(labelFontSize, "px; width: 100%;'>\n        ").concat(!result ? '' : "<i style='color: ".concat(color, "' class='dtable-font ").concat(icon, "'></i>"), "\n        <span style='color: ").concat(color, "'>").concat(result ? Number.parseFloat(result * 100).toFixed(2) + '%' : '', "</span>\n        ").concat(result ? '&#8226;' : '', "\n        ").concat(conjunctions, "\n        ").concat(this.formatData(previous), "\n      </span>\n    ");
-      return resultContent;
-    };
-    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"
-    }));
-  }
-}
-TrendChart.propTypes = propTypes;
-var _default = exports.default = TrendChart;