dtable-statistic 4.4.24-alpha.9 → 5.0.0

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

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

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