dtable-statistic 4.2.2 → 4.3.0

package/es/stat-view/pivot-table/index.js

@@ -1,7 +1,3 @@
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React from 'react';
 import PropTypes from 'prop-types';
 import intl from 'react-intl-universal';
@@ -12,27 +8,30 @@ import TwoDimensionTable from './two-dimension-table';
 import OneDimensionTableWithNumericColumns from './one-dimension-table-with-numeric-columns';
 import { TIME_COLUMN_LIST, DEFAULT_NUMBER_FORMAT_OBJECT, SUMMARY_TYPE, TOO_MANY_STATISTIC_ENTRIES } from '../../constants';
 import styles from './statistic-pivot-table.module.css';
-var PivotTable = /*#__PURE__*/function (_BaseChart) {
-  _inherits(PivotTable, _BaseChart);
-  var _super = _createSuper(PivotTable);
-  function PivotTable(props) {
-    var _this;
-    _classCallCheck(this, PivotTable);
-    _this = _super.call(this, props);
-    _this.isValidValue = function (value) {
+class PivotTable extends BaseChart {
+  constructor(props) {
+    super(props);
+    this.isValidValue = value => {
       if (value === 0) return true;
       return Boolean(value);
     };
-    _this.renderPivotTable = function () {
-      var _this$props = _this.props,
-        statItem = _this$props.statItem,
-        isPreview = _this$props.isPreview,
-        getTableById = _this$props.getTableById;
-      var statData = _this.state.statData;
+    this.renderPivotTable = () => {
+      const {
+        statItem,
+        isPreview,
+        getTableById
+      } = this.props;
+      const {
+        statData
+      } = this.state;
       if (!Object.keys(statData).length > 0) return '';
-      var pivot_columns = statData.pivot_columns;
-      var column_groupby_column_key = statItem.column_groupby_column_key;
-      var themeColors = _this.getThemeColors('#212529');
+      const {
+        pivot_columns
+      } = statData;
+      const {
+        column_groupby_column_key
+      } = statItem;
+      const themeColors = this.getThemeColors('#212529');
       if (Array.isArray(pivot_columns) && pivot_columns.length > 100) {
         return /*#__PURE__*/React.createElement("div", {
           className: 'statistic-chart-text'
@@ -40,149 +39,145 @@ var PivotTable = /*#__PURE__*/function (_BaseChart) {
       }
       if (column_groupby_column_key) {
         return /*#__PURE__*/React.createElement(TwoDimensionTable, {
-          pivotResult: _this.state.statData,
+          pivotResult: this.state.statData,
           statItem: statItem,
           isPreview: isPreview,
           textColor: themeColors.textColor,
           getTableById: getTableById,
-          isValidValue: _this.isValidValue,
-          getSummaryValueDisplayString: _this.getSummaryValueDisplayString,
-          toggleStatisticRecordsDialog: _this.props.toggleStatisticRecordsDialog
+          isValidValue: this.isValidValue,
+          getSummaryValueDisplayString: this.getSummaryValueDisplayString,
+          toggleStatisticRecordsDialog: this.props.toggleStatisticRecordsDialog
         });
       }
       if (pivot_columns.length < 2) {
         return /*#__PURE__*/React.createElement(OneDimensionTableNoNumericColumns, {
-          pivotResult: _this.state.statData,
+          pivotResult: this.state.statData,
           statItem: statItem,
           isPreview: isPreview,
           textColor: themeColors.textColor,
           getTableById: getTableById,
-          isValidValue: _this.isValidValue,
-          getSummaryValueDisplayString: _this.getSummaryValueDisplayString,
-          toggleStatisticRecordsDialog: _this.props.toggleStatisticRecordsDialog
+          isValidValue: this.isValidValue,
+          getSummaryValueDisplayString: this.getSummaryValueDisplayString,
+          toggleStatisticRecordsDialog: this.props.toggleStatisticRecordsDialog
         });
       }
       return /*#__PURE__*/React.createElement(OneDimensionTableWithNumericColumns, {
-        getSummaryValueDisplayString: _this.getSummaryValueDisplayString,
-        pivotResult: _this.state.statData,
+        getSummaryValueDisplayString: this.getSummaryValueDisplayString,
+        pivotResult: this.state.statData,
         statItem: statItem,
         isPreview: isPreview,
         textColor: themeColors.textColor,
         getTableById: getTableById,
-        isValidValue: _this.isValidValue,
-        toggleStatisticRecordsDialog: _this.props.toggleStatisticRecordsDialog
+        isValidValue: this.isValidValue,
+        toggleStatisticRecordsDialog: this.props.toggleStatisticRecordsDialog
       });
     };
-    _this.getSummaryValueDisplayString = function (summaryColumn, summaryValue) {
-      var summaryMethod = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : SUMMARY_TYPE.COUNT;
+    this.getSummaryValueDisplayString = function (summaryColumn, summaryValue) {
+      let summaryMethod = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : SUMMARY_TYPE.COUNT;
       if (!summaryColumn || !summaryColumn.type) return summaryValue;
       if (!summaryValue && summaryValue !== 0) return summaryValue;
       if (summaryMethod && summaryMethod.toUpperCase() === 'DISTINCT_VALUES') return summaryValue;
-      var data = summaryColumn.data;
+      const {
+        data
+      } = summaryColumn;
       if (TIME_COLUMN_LIST.includes(summaryColumn.type)) {
         if (typeof summaryValue !== 'string') return '';
         // The date returned by db carries T and Z, so that there is a time difference in data formatting
-        var _ref = data || {},
-          format = _ref.format;
+        const {
+          format
+        } = data || {};
         return getDateDisplayString(summaryValue.replace(/[T|Z]/g, ' '), format);
       }
       if (typeof summaryValue !== 'number') return summaryValue;
       return getNumberDisplayString(summaryValue, data || DEFAULT_NUMBER_FORMAT_OBJECT);
     };
-    _this.getStatData = function () {
-      var _this$props2 = _this.props,
-        getTableById = _this$props2.getTableById,
-        statItem = _this$props2.statItem;
-      var table_id = statItem.table_id,
-        groupby_column_key = statItem.groupby_column_key,
-        column_groupby_column_key = statItem.column_groupby_column_key,
-        summary_column_key = statItem.summary_column_key;
-      var table = getTableById(table_id);
-      var groupbyColumn = groupby_column_key && TableUtils.getTableColumnByKey(table, groupby_column_key);
-      var columnGroupbyColumn = column_groupby_column_key && TableUtils.getTableColumnByKey(table, column_groupby_column_key);
-      var summaryColumn = TableUtils.getTableColumnByKey(table, summary_column_key) || {};
+    this.getStatData = () => {
+      const {
+        getTableById,
+        statItem
+      } = this.props;
+      const {
+        table_id,
+        groupby_column_key,
+        column_groupby_column_key,
+        summary_column_key
+      } = statItem;
+      const table = getTableById(table_id);
+      const groupbyColumn = groupby_column_key && TableUtils.getTableColumnByKey(table, groupby_column_key);
+      const columnGroupbyColumn = column_groupby_column_key && TableUtils.getTableColumnByKey(table, column_groupby_column_key);
+      const summaryColumn = TableUtils.getTableColumnByKey(table, summary_column_key) || {};
       return {
-        pivotResult: _this.state.statData,
+        pivotResult: this.state.statData,
         statisticTableColumns: table.columns,
-        groupbyColumn: groupbyColumn,
-        columnGroupbyColumn: columnGroupbyColumn,
-        summaryColumn: summaryColumn
+        groupbyColumn,
+        columnGroupbyColumn,
+        summaryColumn
       };
     };
-    _this.state = {
+    this.state = {
       isCalculatingData: true,
       showResultDescription: true,
       statData: null
     };
-    _this.calculateData = null;
-    return _this;
+    this.calculateData = null;
   }
-  _createClass(PivotTable, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var _this2 = this;
-      var _this$props3 = this.props,
-        statItem = _this$props3.statItem,
-        chartCalculator = _this$props3.chartCalculator;
-      chartCalculator.calculate(statItem).then(function (data) {
-        var showResultDescription = Object.keys(data).length > 0 ? false : true;
-        _this2.setState({
-          isCalculatingData: false,
-          showResultDescription: showResultDescription,
-          statData: data
-        });
+  componentDidMount() {
+    const {
+      statItem,
+      chartCalculator
+    } = this.props;
+    chartCalculator.calculate(statItem).then(data => {
+      const showResultDescription = Object.keys(data).length > 0 ? false : true;
+      this.setState({
+        isCalculatingData: false,
+        showResultDescription,
+        statData: data
       });
+    });
+  }
+  shouldComponentUpdate(nextProps, nextState) {
+    if (this.canUpdate(this.props, nextProps) || nextState.isCalculatingData !== this.state.isCalculatingData || nextState.showResultDescription !== this.state.showResultDescription) {
+      return true;
     }
-  }, {
-    key: "shouldComponentUpdate",
-    value: function shouldComponentUpdate(nextProps, nextState) {
-      if (this.canUpdate(this.props, nextProps) || nextState.isCalculatingData !== this.state.isCalculatingData || nextState.showResultDescription !== this.state.showResultDescription) {
-        return true;
-      }
-      return false;
-    }
-  }, {
-    key: "UNSAFE_componentWillReceiveProps",
-    value: function UNSAFE_componentWillReceiveProps(nextProps) {
-      var _this3 = this;
-      var nextStatItem = nextProps.statItem,
-        chartCalculator = nextProps.chartCalculator;
-      if (this.shouldCalculateStatItem(this.props, nextProps)) {
-        this.setState({
-          isCalculatingData: true
-        }, function () {
-          chartCalculator.calculate(nextStatItem).then(function (data) {
-            var showResultDescription = Object.keys(data).length > 0 ? false : true;
-            _this3.setState({
-              statData: data,
-              isCalculatingData: false,
-              showResultDescription: showResultDescription
-            });
+    return false;
+  }
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    const {
+      statItem: nextStatItem,
+      chartCalculator
+    } = nextProps;
+    if (this.shouldCalculateStatItem(this.props, nextProps)) {
+      this.setState({
+        isCalculatingData: true
+      }, () => {
+        chartCalculator.calculate(nextStatItem).then(data => {
+          let showResultDescription = Object.keys(data).length > 0 ? false : true;
+          this.setState({
+            statData: data,
+            isCalculatingData: false,
+            showResultDescription
           });
         });
-      }
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this4 = this;
-      var isEdit = this.props.isEdit;
-      var _this$state = this.state,
-        isCalculatingData = _this$state.isCalculatingData,
-        showResultDescription = _this$state.showResultDescription;
-      return /*#__PURE__*/React.createElement(React.Fragment, null, isCalculatingData && this.renderLoading(), !isCalculatingData && /*#__PURE__*/React.createElement("div", {
-        ref: function ref(_ref2) {
-          return _this4.container = _ref2;
-        },
-        style: isEdit ? {
-          padding: '15px 30px'
-        } : null,
-        className: "statistic-chart-container ".concat(styles['pivot-table-container'])
-      }, this.renderPivotTable()), showResultDescription && this.renderEmpty());
+      });
     }
-  }]);
-  return PivotTable;
-}(BaseChart);
+  }
+  render() {
+    const {
+      isEdit
+    } = this.props;
+    const {
+      isCalculatingData,
+      showResultDescription
+    } = this.state;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, isCalculatingData && this.renderLoading(), !isCalculatingData && /*#__PURE__*/React.createElement("div", {
+      ref: ref => this.container = ref,
+      style: isEdit ? {
+        padding: '15px 30px'
+      } : null,
+      className: "statistic-chart-container ".concat(styles['pivot-table-container'])
+    }, this.renderPivotTable()), showResultDescription && this.renderEmpty());
+  }
+}
 PivotTable.propTypes = {
   isPreview: PropTypes.bool,
   isEdit: PropTypes.bool,

package/es/stat-view/pivot-table/one-dimension-table-no-numeric-columns.js

@@ -1,7 +1,3 @@
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React, { PureComponent } from 'react';
 import intl from 'react-intl-universal';
 import { TableUtils, Views } from 'dtable-store';
@@ -9,82 +5,94 @@ import PivotTableDisplayName from './pivot-table-display-name';
 import { isMobile } from '../../utils';
 import { TITLE_TOTAL } from '../../constants';
 import styles from './statistic-pivot-table.module.css';
-var OneDimensionTableNoNumericColumns = /*#__PURE__*/function (_PureComponent) {
-  _inherits(OneDimensionTableNoNumericColumns, _PureComponent);
-  var _super = _createSuper(OneDimensionTableNoNumericColumns);
-  function OneDimensionTableNoNumericColumns() {
+class OneDimensionTableNoNumericColumns extends PureComponent {
+  constructor() {
     var _this;
-    _classCallCheck(this, OneDimensionTableNoNumericColumns);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _super.call.apply(_super, [this].concat(args));
-    _this.toggleRecords = function (cell) {
-      var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-        _ref$isColumn = _ref.isColumn,
-        isColumn = _ref$isColumn === void 0 ? false : _ref$isColumn,
-        _ref$isRow = _ref.isRow,
-        isRow = _ref$isRow === void 0 ? false : _ref$isRow;
+    super(...arguments);
+    _this = this;
+    this.toggleRecords = function (cell) {
+      let {
+        isColumn = false,
+        isRow = false
+      } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
       if (isMobile) return;
       _this.props.toggleStatisticRecordsDialog(cell, _this.props.statItem, {
-        isColumn: isColumn,
-        isRow: isRow
+        isColumn,
+        isRow
       });
     };
-    _this.onClickTotals = function (recordsList) {
-      var _ref2 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-        isCurrentView = _ref2.isCurrentView;
+    this.onClickTotals = function (recordsList) {
+      let {
+        isCurrentView
+      } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
       if (isMobile) return;
-      var _this$props = _this.props,
-        getTableById = _this$props.getTableById,
-        statItem = _this$props.statItem;
-      var table_id = statItem.table_id,
-        view_id = statItem.view_id;
-      var table = getTableById(table_id);
-      var view = Views.getViewById(table.views, view_id);
-      var rows = !Views.isArchiveView(view) ? recordsList.flat() : [];
+      const {
+        getTableById,
+        statItem
+      } = _this.props;
+      const {
+        table_id,
+        view_id
+      } = statItem;
+      const table = getTableById(table_id);
+      const view = Views.getViewById(table.views, view_id);
+      const rows = !Views.isArchiveView(view) ? recordsList.flat() : [];
       _this.props.toggleStatisticRecordsDialog({
-        rows: rows
+        rows
       }, _this.props.statItem, {
-        isCurrentView: isCurrentView
+        isCurrentView
       });
     };
-    _this.renderHeader = function (_ref3) {
-      var groupByColumn = _ref3.groupByColumn;
-      var statItem = _this.props.statItem;
-      var _statItem$display_tot = statItem.display_total,
-        display_total = _statItem$display_tot === void 0 ? true : _statItem$display_tot;
-      var _ref4 = groupByColumn || {},
-        groupName = _ref4.name;
+    this.renderHeader = _ref => {
+      let {
+        groupByColumn
+      } = _ref;
+      const {
+        statItem
+      } = this.props;
+      const {
+        display_total = true
+      } = statItem;
+      const {
+        name: groupName
+      } = groupByColumn || {};
       return /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("th", {
         className: "pivot-table-header"
       }, /*#__PURE__*/React.createElement("div", null, groupName)), display_total && /*#__PURE__*/React.createElement("th", {
         className: 'pivot-table-header'
       }, /*#__PURE__*/React.createElement("div", null, intl.get(TITLE_TOTAL)))));
     };
-    _this.renderRows = function (_ref5) {
-      var table = _ref5.table,
-        groupByColumn = _ref5.groupByColumn;
-      var _this$props2 = _this.props,
-        pivotResult = _this$props2.pivotResult,
-        statItem = _this$props2.statItem,
-        getSummaryValueDisplayString = _this$props2.getSummaryValueDisplayString;
-      var pivot_rows = pivotResult.pivot_rows,
-        pivot_columns_total = pivotResult.pivot_columns_total;
-      var summary_column_key = statItem.summary_column_key,
-        summary_method = statItem.summary_method,
-        _statItem$display_tot2 = statItem.display_total,
-        display_total = _statItem$display_tot2 === void 0 ? true : _statItem$display_tot2;
-      var summaryColumn = TableUtils.getTableColumnByKey(table, summary_column_key) || {};
-      var columnTotal = getSummaryValueDisplayString(summaryColumn, pivot_columns_total['total'], summary_method);
-      var isValidTColumnTotal = _this.props.isValidValue(columnTotal);
-      var pivotColumnCells = [];
-      return /*#__PURE__*/React.createElement("tbody", null, pivot_rows.map(function (rowItem, rowIdx) {
-        var original_name = rowItem.original_name,
-          total = rowItem.total,
-          rows = rowItem.rows;
-        var totalDisplayValue = getSummaryValueDisplayString(summaryColumn, total.total, summary_method);
-        var isValidTotalDisplayValue = _this.props.isValidValue(totalDisplayValue);
+    this.renderRows = _ref2 => {
+      let {
+        table,
+        groupByColumn
+      } = _ref2;
+      const {
+        pivotResult,
+        statItem,
+        getSummaryValueDisplayString
+      } = this.props;
+      const {
+        pivot_rows,
+        pivot_columns_total
+      } = pivotResult;
+      const {
+        summary_column_key,
+        summary_method,
+        display_total = true
+      } = statItem;
+      const summaryColumn = TableUtils.getTableColumnByKey(table, summary_column_key) || {};
+      const columnTotal = getSummaryValueDisplayString(summaryColumn, pivot_columns_total['total'], summary_method);
+      const isValidTColumnTotal = this.props.isValidValue(columnTotal);
+      let pivotColumnCells = [];
+      return /*#__PURE__*/React.createElement("tbody", null, pivot_rows.map((rowItem, rowIdx) => {
+        const {
+          original_name,
+          total,
+          rows
+        } = rowItem;
+        const totalDisplayValue = getSummaryValueDisplayString(summaryColumn, total.total, summary_method);
+        const isValidTotalDisplayValue = this.props.isValidValue(totalDisplayValue);
         pivotColumnCells[rowIdx] = rows;
         return /*#__PURE__*/React.createElement("tr", {
           key: 'table-row-' + rowIdx
@@ -96,51 +104,45 @@ var OneDimensionTableNoNumericColumns = /*#__PURE__*/function (_PureComponent) {
         })), display_total && /*#__PURE__*/React.createElement("td", {
           className: "".concat(styles['pivot-cell'], " ").concat(isValidTotalDisplayValue ? '' : styles['pivot-empty-cell']),
           title: isValidTotalDisplayValue ? totalDisplayValue : '',
-          onClick: function onClick() {
-            return _this.toggleRecords(rowItem, {
-              isRow: true
-            });
-          }
+          onClick: () => this.toggleRecords(rowItem, {
+            isRow: true
+          })
         }, isValidTotalDisplayValue ? /*#__PURE__*/React.createElement("div", null, totalDisplayValue) : /*#__PURE__*/React.createElement("i", null)));
       }), display_total && /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
         className: 'pivot-column-total'
       }, /*#__PURE__*/React.createElement("div", null, intl.get(TITLE_TOTAL))), /*#__PURE__*/React.createElement("td", {
         className: "".concat(styles['pivot-cell'], " pivot-table-total ").concat(isValidTColumnTotal ? '' : styles['pivot-empty-cell']),
-        onClick: function onClick() {
-          return _this.onClickTotals(pivotColumnCells, {
-            isCurrentView: true
-          });
-        },
+        onClick: () => this.onClickTotals(pivotColumnCells, {
+          isCurrentView: true
+        }),
         title: isValidTColumnTotal ? columnTotal : ''
       }, isValidTColumnTotal ? /*#__PURE__*/React.createElement("div", null, columnTotal) : /*#__PURE__*/React.createElement("i", null))));
     };
-    return _this;
   }
-  _createClass(OneDimensionTableNoNumericColumns, [{
-    key: "render",
-    value: function render() {
-      var _this$props3 = this.props,
-        isPreview = _this$props3.isPreview,
-        textColor = _this$props3.textColor,
-        statItem = _this$props3.statItem,
-        getTableById = _this$props3.getTableById;
-      var table_id = statItem.table_id,
-        groupby_column_key = statItem.groupby_column_key;
-      var table = getTableById(table_id);
-      var groupByColumn = groupby_column_key && TableUtils.getTableColumnByKey(table, groupby_column_key);
-      return /*#__PURE__*/React.createElement("table", {
-        style: {
-          color: textColor
-        },
-        className: "".concat(isPreview ? styles['preview-pivot-table'] : styles['large-pivot-table'], " ").concat(styles['pivot-table'])
-      }, this.renderHeader({
-        groupByColumn: groupByColumn
-      }), this.renderRows({
-        table: table,
-        groupByColumn: groupByColumn
-      }));
-    }
-  }]);
-  return OneDimensionTableNoNumericColumns;
-}(PureComponent);
+  render() {
+    const {
+      isPreview,
+      textColor,
+      statItem,
+      getTableById
+    } = this.props;
+    const {
+      table_id,
+      groupby_column_key
+    } = statItem;
+    const table = getTableById(table_id);
+    const groupByColumn = groupby_column_key && TableUtils.getTableColumnByKey(table, groupby_column_key);
+    return /*#__PURE__*/React.createElement("table", {
+      style: {
+        color: textColor
+      },
+      className: "".concat(isPreview ? styles['preview-pivot-table'] : styles['large-pivot-table'], " ").concat(styles['pivot-table'])
+    }, this.renderHeader({
+      groupByColumn
+    }), this.renderRows({
+      table,
+      groupByColumn
+    }));
+  }
+}
 export default OneDimensionTableNoNumericColumns;