dtable-statistic 4.4.24-alpha.9 → 5.0.0

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

@@ -0,0 +1,196 @@
+"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 _oneDimensionTableNoNumericColumns = _interopRequireDefault(require("./one-dimension-table-no-numeric-columns"));
+var _twoDimensionTable = _interopRequireDefault(require("./two-dimension-table"));
+var _oneDimensionTableWithNumericColumns = _interopRequireDefault(require("./one-dimension-table-with-numeric-columns"));
+var _constants = require("../../constants");
+var _statisticPivotTableModule = _interopRequireDefault(require("./statistic-pivot-table.module.css"));
+class PivotTable extends _baseChart.default {
+  constructor(props) {
+    super(props);
+    this.isValidValue = value => {
+      if (value === 0) return true;
+      return Boolean(value);
+    };
+    this.renderPivotTable = () => {
+      const {
+        statItem,
+        isPreview,
+        getTableById
+      } = this.props;
+      const {
+        statData
+      } = this.state;
+      if (!Object.keys(statData).length > 0) return '';
+      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.default.createElement("div", {
+          className: 'statistic-chart-text'
+        }, _reactIntlUniversal.default.get(_constants.TOO_MANY_STATISTIC_ENTRIES));
+      }
+      if (column_groupby_column_key) {
+        return /*#__PURE__*/_react.default.createElement(_twoDimensionTable.default, {
+          pivotResult: this.state.statData,
+          statItem: statItem,
+          isPreview: isPreview,
+          textColor: themeColors.textColor,
+          getTableById: getTableById,
+          isValidValue: this.isValidValue,
+          getSummaryValueDisplayString: this.getSummaryValueDisplayString,
+          toggleStatisticRecordsDialog: this.props.toggleStatisticRecordsDialog
+        });
+      }
+      if (pivot_columns.length < 2) {
+        return /*#__PURE__*/_react.default.createElement(_oneDimensionTableNoNumericColumns.default, {
+          pivotResult: this.state.statData,
+          statItem: statItem,
+          isPreview: isPreview,
+          textColor: themeColors.textColor,
+          getTableById: getTableById,
+          isValidValue: this.isValidValue,
+          getSummaryValueDisplayString: this.getSummaryValueDisplayString,
+          toggleStatisticRecordsDialog: this.props.toggleStatisticRecordsDialog
+        });
+      }
+      return /*#__PURE__*/_react.default.createElement(_oneDimensionTableWithNumericColumns.default, {
+        getSummaryValueDisplayString: this.getSummaryValueDisplayString,
+        pivotResult: this.state.statData,
+        statItem: statItem,
+        isPreview: isPreview,
+        textColor: themeColors.textColor,
+        getTableById: getTableById,
+        isValidValue: this.isValidValue,
+        toggleStatisticRecordsDialog: this.props.toggleStatisticRecordsDialog
+      });
+    };
+    this.getSummaryValueDisplayString = function (summaryColumn, summaryValue) {
+      let summaryMethod = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : _constants.SUMMARY_TYPE.COUNT;
+      if (!summaryColumn || !summaryColumn.type) return summaryValue;
+      if (!summaryValue && summaryValue !== 0) return summaryValue;
+      if (summaryMethod && summaryMethod.toUpperCase() === 'DISTINCT_VALUES') return summaryValue;
+      const {
+        data
+      } = summaryColumn;
+      if (_constants.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
+        const {
+          format
+        } = data || {};
+        return (0, _dtableUtils.getDateDisplayString)(summaryValue.replace(/[T|Z]/g, ' '), format);
+      }
+      if (typeof summaryValue !== 'number') return summaryValue;
+      return (0, _dtableUtils.getNumberDisplayString)(summaryValue, data || _constants.DEFAULT_NUMBER_FORMAT_OBJECT);
+    };
+    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 && (0, _dtableUtils.getTableColumnByKey)(table, groupby_column_key);
+      const columnGroupbyColumn = column_groupby_column_key && (0, _dtableUtils.getTableColumnByKey)(table, column_groupby_column_key);
+      const summaryColumn = (0, _dtableUtils.getTableColumnByKey)(table, summary_column_key) || {};
+      return {
+        pivotResult: this.state.statData,
+        statisticTableColumns: table.columns,
+        groupbyColumn,
+        columnGroupbyColumn,
+        summaryColumn
+      };
+    };
+    this.state = {
+      isCalculatingData: true,
+      showResultDescription: true,
+      statData: null
+    };
+    this.calculateData = null;
+  }
+  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;
+    }
+    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
+          });
+        });
+      });
+    }
+  }
+  render() {
+    const {
+      isEdit
+    } = this.props;
+    const {
+      isCalculatingData,
+      showResultDescription
+    } = this.state;
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isCalculatingData && this.renderLoading(), !isCalculatingData && /*#__PURE__*/_react.default.createElement("div", {
+      ref: ref => this.container = ref,
+      style: isEdit ? {
+        padding: '15px 30px'
+      } : null,
+      className: "statistic-chart-container ".concat(_statisticPivotTableModule.default['pivot-table-container'])
+    }, this.renderPivotTable()), showResultDescription && this.renderEmpty());
+  }
+}
+PivotTable.propTypes = {
+  isPreview: _propTypes.default.bool,
+  isEdit: _propTypes.default.bool,
+  statItem: _propTypes.default.object,
+  chartCalculator: _propTypes.default.object,
+  getTableById: _propTypes.default.func,
+  toggleStatisticRecordsDialog: _propTypes.default.func
+};
+var _default = exports.default = PivotTable;

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

@@ -0,0 +1,156 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactIntlUniversal = _interopRequireDefault(require("react-intl-universal"));
+var _dtableUtils = require("dtable-utils");
+var _pivotTableDisplayName = _interopRequireDefault(require("./pivot-table-display-name"));
+var _utils = require("../../utils");
+var _constants = require("../../constants");
+var _statisticPivotTableModule = _interopRequireDefault(require("./statistic-pivot-table.module.css"));
+class OneDimensionTableNoNumericColumns extends _react.PureComponent {
+  constructor() {
+    var _this;
+    super(...arguments);
+    _this = this;
+    this.toggleRecords = function (cell) {
+      let {
+        isColumn = false,
+        isRow = false
+      } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+      if (_utils.isMobile) return;
+      _this.props.toggleStatisticRecordsDialog(cell, _this.props.statItem, {
+        isColumn,
+        isRow
+      });
+    };
+    this.onClickTotals = function (recordsList) {
+      let {
+        isCurrentView
+      } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+      if (_utils.isMobile) return;
+      const {
+        getTableById,
+        statItem
+      } = _this.props;
+      const {
+        table_id,
+        view_id
+      } = statItem;
+      const table = getTableById(table_id);
+      const view = (0, _dtableUtils.getViewById)(table.views, view_id);
+      const rows = !(0, _dtableUtils.isArchiveView)(view) ? recordsList.flat() : [];
+      _this.props.toggleStatisticRecordsDialog({
+        rows
+      }, _this.props.statItem, {
+        isCurrentView
+      });
+    };
+    this.renderHeader = _ref => {
+      let {
+        groupByColumn
+      } = _ref;
+      const {
+        statItem
+      } = this.props;
+      const {
+        display_total = true
+      } = statItem;
+      const {
+        name: groupName
+      } = groupByColumn || {};
+      return /*#__PURE__*/_react.default.createElement("thead", null, /*#__PURE__*/_react.default.createElement("tr", null, /*#__PURE__*/_react.default.createElement("th", {
+        className: "pivot-table-header"
+      }, /*#__PURE__*/_react.default.createElement("div", null, groupName)), display_total && /*#__PURE__*/_react.default.createElement("th", {
+        className: 'pivot-table-header'
+      }, /*#__PURE__*/_react.default.createElement("div", null, _reactIntlUniversal.default.get(_constants.TITLE_TOTAL)))));
+    };
+    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 = (0, _dtableUtils.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.default.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.default.createElement("tr", {
+          key: 'table-row-' + rowIdx
+        }, /*#__PURE__*/_react.default.createElement("td", {
+          className: 'pivot-row-name'
+        }, /*#__PURE__*/_react.default.createElement(_pivotTableDisplayName.default, {
+          value: original_name,
+          column: groupByColumn
+        })), display_total && /*#__PURE__*/_react.default.createElement("td", {
+          className: "".concat(_statisticPivotTableModule.default['pivot-cell'], " ").concat(isValidTotalDisplayValue ? '' : _statisticPivotTableModule.default['pivot-empty-cell']),
+          title: isValidTotalDisplayValue ? totalDisplayValue : '',
+          onClick: () => this.toggleRecords(rowItem, {
+            isRow: true
+          })
+        }, isValidTotalDisplayValue ? /*#__PURE__*/_react.default.createElement("div", null, totalDisplayValue) : /*#__PURE__*/_react.default.createElement("i", null)));
+      }), display_total && /*#__PURE__*/_react.default.createElement("tr", null, /*#__PURE__*/_react.default.createElement("td", {
+        className: 'pivot-column-total'
+      }, /*#__PURE__*/_react.default.createElement("div", null, _reactIntlUniversal.default.get(_constants.TITLE_TOTAL))), /*#__PURE__*/_react.default.createElement("td", {
+        className: "".concat(_statisticPivotTableModule.default['pivot-cell'], " pivot-table-total ").concat(isValidTColumnTotal ? '' : _statisticPivotTableModule.default['pivot-empty-cell']),
+        onClick: () => this.onClickTotals(pivotColumnCells, {
+          isCurrentView: true
+        }),
+        title: isValidTColumnTotal ? columnTotal : ''
+      }, isValidTColumnTotal ? /*#__PURE__*/_react.default.createElement("div", null, columnTotal) : /*#__PURE__*/_react.default.createElement("i", null))));
+    };
+  }
+  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 && (0, _dtableUtils.getTableColumnByKey)(table, groupby_column_key);
+    return /*#__PURE__*/_react.default.createElement("table", {
+      style: {
+        color: textColor
+      },
+      className: "".concat(isPreview ? _statisticPivotTableModule.default['preview-pivot-table'] : _statisticPivotTableModule.default['large-pivot-table'], " ").concat(_statisticPivotTableModule.default['pivot-table'])
+    }, this.renderHeader({
+      groupByColumn
+    }), this.renderRows({
+      table,
+      groupByColumn
+    }));
+  }
+}
+var _default = exports.default = OneDimensionTableNoNumericColumns;

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

@@ -0,0 +1,176 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactIntlUniversal = _interopRequireDefault(require("react-intl-universal"));
+var _dtableUtils = require("dtable-utils");
+var _pivotTableDisplayName = _interopRequireDefault(require("./pivot-table-display-name"));
+var _utils = require("../../utils");
+var _constants = require("../../constants");
+var _statisticPivotTableModule = _interopRequireDefault(require("./statistic-pivot-table.module.css"));
+class OneDimensionTableWithNumericColumns extends _react.PureComponent {
+  constructor() {
+    var _this;
+    super(...arguments);
+    _this = this;
+    this.toggleRecords = function (cell) {
+      let {
+        isColumn = false,
+        isCurrentView = false
+      } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+      if (_utils.isMobile) return;
+      _this.props.toggleStatisticRecordsDialog(cell, _this.props.statItem, {
+        isColumn,
+        isCurrentView
+      });
+    };
+    this.renderHeader = _ref => {
+      let {
+        table,
+        groupbyColumn
+      } = _ref;
+      const {
+        pivotResult,
+        statItem
+      } = this.props;
+      const {
+        column_groupby_column_key
+      } = statItem;
+      const statisticTableColumns = table.columns;
+      const columnGroupbyColumn = (0, _dtableUtils.getTableColumnByKey)(table, column_groupby_column_key);
+      const {
+        name: groupName
+      } = groupbyColumn;
+      const {
+        name: rowGroupName
+      } = columnGroupbyColumn || {};
+      const {
+        pivot_columns
+      } = pivotResult;
+      return /*#__PURE__*/_react.default.createElement("thead", null, /*#__PURE__*/_react.default.createElement("tr", null, /*#__PURE__*/_react.default.createElement("th", {
+        className: "pivot-table-header"
+      }, !rowGroupName && groupName), Array.isArray(pivot_columns) && pivot_columns.map((item, index) => {
+        const {
+          key
+        } = item;
+        const column = statisticTableColumns.find(column => column.key === key);
+        return /*#__PURE__*/_react.default.createElement("th", {
+          className: 'pivot-table-header',
+          key: "pivot-column-".concat(index)
+        }, /*#__PURE__*/_react.default.createElement("div", null, column.name));
+      })));
+    };
+    this.renderRows = _ref2 => {
+      let {
+        table,
+        groupbyColumn
+      } = _ref2;
+      const {
+        pivotResult,
+        statItem,
+        getSummaryValueDisplayString
+      } = this.props;
+      const statisticTableColumns = table.columns;
+      const {
+        display_total = true
+      } = statItem;
+      const {
+        pivot_rows,
+        pivot_columns,
+        pivot_columns_total
+      } = pivotResult;
+      let pivotColumnCells = [];
+      return /*#__PURE__*/_react.default.createElement("tbody", null, pivot_rows.map((rowItem, rowIdx) => {
+        const {
+          original_name,
+          total,
+          rows
+        } = rowItem;
+        if (!Array.isArray(pivot_columns)) {
+          pivotColumnCells[rowIdx] = rowItem.rows || [];
+        }
+        return /*#__PURE__*/_react.default.createElement("tr", {
+          key: 'table-row' + rowIdx
+        }, /*#__PURE__*/_react.default.createElement("td", {
+          className: 'pivot-row-name'
+        }, /*#__PURE__*/_react.default.createElement(_pivotTableDisplayName.default, {
+          value: original_name,
+          column: groupbyColumn
+        })), Array.isArray(pivot_columns) && pivot_columns.map((columnMap, cellIdx) => {
+          const {
+            key,
+            method
+          } = columnMap;
+          if (Array.isArray(rows) && rows.length > 0) {
+            if (pivotColumnCells[cellIdx]) {
+              pivotColumnCells[cellIdx].push(...rows);
+            } else {
+              pivotColumnCells[cellIdx] = [...rows];
+            }
+          }
+          const column = statisticTableColumns.find(item => item.key === key);
+          const displayValue = getSummaryValueDisplayString(column, total[key + method], method);
+          const isValidDisplayValue = this.props.isValidValue(displayValue);
+          return /*#__PURE__*/_react.default.createElement("td", {
+            className: "".concat(_statisticPivotTableModule.default['pivot-cell'], " ").concat(isValidDisplayValue ? '' : _statisticPivotTableModule.default['pivot-empty-cell']),
+            key: "table-cell-".concat(cellIdx),
+            onClick: () => this.toggleRecords(rowItem),
+            title: isValidDisplayValue ? displayValue : ''
+          }, isValidDisplayValue ? /*#__PURE__*/_react.default.createElement("div", null, displayValue) : /*#__PURE__*/_react.default.createElement("i", null));
+        }));
+      }), display_total && /*#__PURE__*/_react.default.createElement("tr", null, /*#__PURE__*/_react.default.createElement("td", {
+        className: 'pivot-column-total'
+      }, /*#__PURE__*/_react.default.createElement("div", null, _reactIntlUniversal.default.get(_constants.TITLE_TOTAL))), Array.isArray(pivot_columns) && pivot_columns.map((c, index) => {
+        const pivotColumnCell = pivotColumnCells[index];
+        const pivotColumnTotal = pivot_columns_total[c.key + c.method];
+        const column = statisticTableColumns.find(column => column.key === c.key);
+        const displayValue = getSummaryValueDisplayString(column, pivotColumnTotal, c.method);
+        const isValidDisplayValue = this.props.isValidValue(displayValue);
+        return /*#__PURE__*/_react.default.createElement("td", {
+          className: "".concat(_statisticPivotTableModule.default['pivot-cell'], " ").concat(isValidDisplayValue ? '' : _statisticPivotTableModule.default['pivot-empty-cell']),
+          key: "total-cell-".concat(index),
+          title: isValidDisplayValue ? displayValue : '',
+          onClick: () => this.toggleRecords({
+            name: c.key,
+            rows: pivotColumnCell
+          }, {
+            isCurrentView: true
+          })
+        }, isValidDisplayValue ? /*#__PURE__*/_react.default.createElement("div", null, displayValue) : /*#__PURE__*/_react.default.createElement("i", null));
+      })));
+    };
+  }
+  render() {
+    const {
+      statItem,
+      isPreview,
+      textColor,
+      getTableById
+    } = this.props;
+    const {
+      table_id,
+      groupby_column_key
+    } = statItem;
+    const table = getTableById(table_id);
+    const groupbyColumn = (0, _dtableUtils.getTableColumnByKey)(table, groupby_column_key);
+    if (!groupbyColumn) return '';
+    return /*#__PURE__*/_react.default.createElement("table", {
+      style: {
+        color: textColor
+      },
+      className: "".concat(isPreview ? _statisticPivotTableModule.default['preview-pivot-table'] : _statisticPivotTableModule.default['large-pivot-table'], " ").concat(_statisticPivotTableModule.default['pivot-table'])
+    }, this.renderHeader({
+      table,
+      groupbyColumn
+    }), this.renderRows({
+      table,
+      groupbyColumn
+    }));
+  }
+}
+var _default = exports.default = OneDimensionTableWithNumericColumns;