dtable-statistic 4.4.24-alpha.9 → 5.0.0

package/es/stat-view/pivot-table/two-dimension-table.js

@@ -0,0 +1,384 @@
+"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 _pivotTable = require("../../utils/pivot-table");
+var _constants = require("../../constants");
+var _statisticPivotTableModule = _interopRequireDefault(require("./statistic-pivot-table.module.css"));
+class TwoDimensionTable 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 = (recordsList, _ref) => {
+      let {
+        isCurrentView
+      } = _ref;
+      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);
+      let rows = [];
+      if (!(0, _dtableUtils.isArchiveView)(view)) {
+        rows = recordsList.flat();
+      }
+      this.props.toggleStatisticRecordsDialog({
+        rows
+      }, statItem, {
+        isCurrentView
+      });
+    };
+    this.getNumberValue = val => {
+      if ((0, _dtableUtils.isNumber)(val)) {
+        return val;
+      }
+      return 0;
+    };
+    this.getCells = (row, summaryColumn) => {
+      const {
+        pivotResult,
+        getSummaryValueDisplayString
+      } = this.props;
+      const {
+        pivot_columns,
+        pivot_summary_multiple_columns,
+        formulaRows,
+        isSqlQuery = false
+      } = pivotResult;
+      const {
+        cells
+      } = row;
+      if (!Array.isArray(pivot_columns)) {
+        return [];
+      }
+      return pivot_columns.map(item => {
+        const cell = cells[item.key];
+        const rowData = cell && cell.rows;
+        let summary_multiple_columns = [];
+        let formatted_summary_multiple_columns = [];
+        pivot_summary_multiple_columns.forEach(column => {
+          const {
+            key,
+            type,
+            sqlKey,
+            method
+          } = column;
+          if (Array.isArray(rowData)) {
+            const sum = (0, _pivotTable.getPivotTableSummaryTotal)(type, key, sqlKey, _constants.STATISTICS_COUNT_TYPE.ADVANCED, method, rowData, formulaRows, isSqlQuery);
+            summary_multiple_columns.push(sum);
+            formatted_summary_multiple_columns.push(getSummaryValueDisplayString(column, sum, method));
+            return;
+          }
+          summary_multiple_columns.push(0);
+          formatted_summary_multiple_columns.push(getSummaryValueDisplayString(column, 0, method));
+        });
+        return {
+          ...cells[item.key],
+          group_original_name: item.original_name,
+          group_name: item.key,
+          column: summaryColumn,
+          summary_multiple_columns,
+          formatted_summary_multiple_columns
+        };
+      });
+    };
+    this.renderHeader = _ref2 => {
+      let {
+        groupbyColumn,
+        columnGroupbyColumn
+      } = _ref2;
+      const {
+        pivotResult,
+        statItem
+      } = this.props;
+      const {
+        column_groupby_column_key,
+        column_groupby_multiple_numeric_column,
+        display_total = true
+      } = statItem;
+      const {
+        name: groupName
+      } = groupbyColumn;
+      const {
+        name: rowGroupName
+      } = columnGroupbyColumn || {};
+      const {
+        pivot_columns,
+        pivot_summary_multiple_columns
+      } = pivotResult;
+      const isMultipleColumnHeader = column_groupby_multiple_numeric_column && column_groupby_column_key && pivot_summary_multiple_columns.length !== 0;
+      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 {
+          original_key
+        } = item;
+        return /*#__PURE__*/_react.default.createElement("th", {
+          className: 'pivot-table-header',
+          key: "pivot-column-".concat(index)
+        }, /*#__PURE__*/_react.default.createElement(_pivotTableDisplayName.default, {
+          value: original_key,
+          column: columnGroupbyColumn
+        }));
+      }), display_total && /*#__PURE__*/_react.default.createElement("th", {
+        className: 'pivot-table-header'
+      }, /*#__PURE__*/_react.default.createElement("div", null, _reactIntlUniversal.default.get(_constants.TITLE_TOTAL)))), isMultipleColumnHeader && /*#__PURE__*/_react.default.createElement("tr", null, /*#__PURE__*/_react.default.createElement("th", {
+        className: "pivot-table-header"
+      }), Array.isArray(pivot_columns) && pivot_columns.map((item, index) => {
+        return /*#__PURE__*/_react.default.createElement("th", {
+          className: "pivot-table-header ".concat(_statisticPivotTableModule.default['pivot-summary-multiple-columns-th']),
+          key: "pivot-column-".concat(index)
+        }, /*#__PURE__*/_react.default.createElement("div", {
+          className: _statisticPivotTableModule.default['pivot-summary-multiple-columns-div']
+        }, pivot_summary_multiple_columns.map((item, index) => {
+          return /*#__PURE__*/_react.default.createElement("div", {
+            key: index
+          }, item.column_name);
+        })));
+      }), display_total && /*#__PURE__*/_react.default.createElement("th", {
+        className: "pivot-table-header ".concat(_statisticPivotTableModule.default['pivot-empty-cell'])
+      })));
+    };
+    this.renderRowTotal = (isValidSummaryDisplayValue, summaryDisplayValue, cells, pivotRowCells, rowItem, firstSummaryColumnFromMultiple) => {
+      let rowTotal = summaryDisplayValue;
+      if (firstSummaryColumnFromMultiple) {
+        rowTotal = this.props.getSummaryValueDisplayString(firstSummaryColumnFromMultiple, summaryDisplayValue, firstSummaryColumnFromMultiple.method);
+      }
+      return /*#__PURE__*/_react.default.createElement("td", {
+        className: "".concat(_statisticPivotTableModule.default['pivot-cell'], " ").concat(isValidSummaryDisplayValue ? '' : _statisticPivotTableModule.default['pivot-empty-cell']),
+        title: isValidSummaryDisplayValue ? rowTotal : '',
+        onClick: () => this.toggleRecords({
+          rows: Array.isArray(cells) && cells.length > 0 ? pivotRowCells : rowItem.rows,
+          name: rowItem.name,
+          rowItem,
+          original_name: rowItem.original_name
+        }, {
+          isRow: true
+        })
+      }, isValidSummaryDisplayValue ? /*#__PURE__*/_react.default.createElement("div", null, rowTotal) : /*#__PURE__*/_react.default.createElement("i", null));
+    };
+    this.renderAllTotal = (allTotalDisplay, pivotColumnCells, firstSummaryColumnFromMultiple) => {
+      const isValidAllTotalDisplay = this.props.isValidValue(allTotalDisplay);
+      let allTotal = allTotalDisplay;
+      if (firstSummaryColumnFromMultiple) {
+        allTotal = this.props.getSummaryValueDisplayString(firstSummaryColumnFromMultiple, allTotalDisplay, firstSummaryColumnFromMultiple.method);
+      }
+      return /*#__PURE__*/_react.default.createElement("td", {
+        className: "".concat(_statisticPivotTableModule.default['pivot-cell'], " pivot-table-total ").concat(isValidAllTotalDisplay ? '' : _statisticPivotTableModule.default['pivot-empty-cell']),
+        onClick: () => this.onClickTotals(pivotColumnCells, {
+          isCurrentView: true
+        }),
+        title: isValidAllTotalDisplay ? allTotal : ''
+      }, isValidAllTotalDisplay ? /*#__PURE__*/_react.default.createElement("div", null, allTotal) : /*#__PURE__*/_react.default.createElement("i", null));
+    };
+    this.renderRows = _ref3 => {
+      let {
+        table,
+        groupbyColumn
+      } = _ref3;
+      const {
+        pivotResult,
+        statItem,
+        getSummaryValueDisplayString
+      } = this.props;
+      const {
+        summary_column_key,
+        summary_method,
+        column_groupby_multiple_numeric_column,
+        display_total = true
+      } = statItem;
+      const {
+        pivot_rows,
+        pivot_columns,
+        pivot_columns_total,
+        pivot_table_total,
+        pivot_summary_multiple_columns,
+        formulaRows,
+        isSqlQuery = false
+      } = pivotResult;
+      const summaryColumn = (0, _dtableUtils.getTableColumnByKey)(table, summary_column_key) || {};
+      let allTotalDisplay = column_groupby_multiple_numeric_column ? 0 : getSummaryValueDisplayString(summaryColumn, pivot_table_total, summary_method);
+      let firstSummaryColumnFromMultiple = column_groupby_multiple_numeric_column && pivot_summary_multiple_columns[0] || null;
+      let pivotColumnCells = [];
+      return /*#__PURE__*/_react.default.createElement("tbody", null, pivot_rows.map((rowItem, rowIdx) => {
+        const {
+          name,
+          original_name,
+          total
+        } = rowItem;
+        const cells = this.getCells(rowItem, summaryColumn);
+        let pivotRowCells = [];
+        if (!Array.isArray(pivot_columns)) {
+          pivotColumnCells[rowIdx] = rowItem.rows || [];
+        }
+        let summaryDisplayValue = getSummaryValueDisplayString(summaryColumn, total, summary_method);
+        if (column_groupby_multiple_numeric_column) {
+          summaryDisplayValue = 0;
+        }
+        const isValidSummaryDisplayValue = this.props.isValidValue(summaryDisplayValue);
+        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(cells) && cells.map((c, cellIdx) => {
+          if (c && Array.isArray(c.rows) && c.rows.length > 0) {
+            pivotRowCells.push(...c.rows);
+            if (pivotColumnCells[cellIdx]) {
+              pivotColumnCells[cellIdx].push(...c.rows);
+            } else {
+              pivotColumnCells[cellIdx] = [...c.rows];
+            }
+          }
+          if (column_groupby_multiple_numeric_column) {
+            const {
+              summary_multiple_columns,
+              formatted_summary_multiple_columns
+            } = c;
+            summary_multiple_columns.forEach(item => {
+              summaryDisplayValue += this.getNumberValue(item);
+            });
+            return /*#__PURE__*/_react.default.createElement("td", {
+              className: "".concat(_statisticPivotTableModule.default['pivot-cell'], " ").concat(_statisticPivotTableModule.default['pivot-summary-multiple-columns-td']),
+              key: "table-cell-".concat(cellIdx),
+              onClick: () => this.toggleRecords({
+                rows: c.rows,
+                name,
+                rowItem,
+                group_name: c.group_name,
+                group_original_name: c.group_original_name,
+                original_name: rowItem.original_name
+              })
+            }, /*#__PURE__*/_react.default.createElement("div", {
+              className: _statisticPivotTableModule.default['pivot-summary-multiple-columns-div']
+            }, formatted_summary_multiple_columns.map((label, index) => {
+              return /*#__PURE__*/_react.default.createElement("div", {
+                key: index,
+                title: label
+              }, label);
+            })), /*#__PURE__*/_react.default.createElement("span", null));
+          }
+          const displayValue = getSummaryValueDisplayString(c.column, c.total, summary_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),
+            title: isValidDisplayValue ? displayValue : '',
+            onClick: () => this.toggleRecords({
+              rows: c.rows,
+              name,
+              rowItem,
+              group_name: c.group_name,
+              group_original_name: c.group_original_name,
+              original_name: rowItem.original_name
+            })
+          }, isValidDisplayValue ? /*#__PURE__*/_react.default.createElement("div", null, displayValue) : /*#__PURE__*/_react.default.createElement("i", null), /*#__PURE__*/_react.default.createElement("span", null));
+        }), display_total && this.renderRowTotal(isValidSummaryDisplayValue, summaryDisplayValue, cells, pivotRowCells, rowItem, firstSummaryColumnFromMultiple));
+      }), 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];
+        let totalDisplayValue = 0;
+        let isValidTotalDisplayValue = true;
+        if (column_groupby_multiple_numeric_column) {
+          let total = 0;
+          pivot_summary_multiple_columns.forEach(summaryCol => {
+            const {
+              type,
+              key,
+              sqlKey,
+              method
+            } = summaryCol;
+            total += (0, _pivotTable.getPivotTableSummaryTotal)(type, key, sqlKey, _constants.STATISTICS_COUNT_TYPE.ADVANCED, method, pivotColumnCell, formulaRows, isSqlQuery);
+          });
+          totalDisplayValue = total;
+          allTotalDisplay += total;
+          isValidTotalDisplayValue = this.props.isValidValue(totalDisplayValue);
+          if (firstSummaryColumnFromMultiple) {
+            totalDisplayValue = getSummaryValueDisplayString(firstSummaryColumnFromMultiple, totalDisplayValue, firstSummaryColumnFromMultiple.method);
+          }
+        } else {
+          totalDisplayValue = getSummaryValueDisplayString(summaryColumn, pivotColumnTotal, summary_method);
+          isValidTotalDisplayValue = this.props.isValidValue(totalDisplayValue);
+        }
+        return /*#__PURE__*/_react.default.createElement("td", {
+          className: "".concat(_statisticPivotTableModule.default['pivot-cell'], " ").concat(isValidTotalDisplayValue ? '' : _statisticPivotTableModule.default['pivot-empty-cell']),
+          key: "total-cell-".concat(index),
+          title: isValidTotalDisplayValue ? totalDisplayValue : '',
+          onClick: () => this.toggleRecords({
+            group_name: c.key,
+            rows: pivotColumnCell,
+            group_original_name: c.original_name
+          }, {
+            isColumn: true
+          })
+        }, isValidTotalDisplayValue ? /*#__PURE__*/_react.default.createElement("div", null, totalDisplayValue) : /*#__PURE__*/_react.default.createElement("i", null));
+      }), this.renderAllTotal(allTotalDisplay, pivotColumnCells, firstSummaryColumnFromMultiple)));
+    };
+  }
+  render() {
+    const {
+      pivotResult,
+      statItem,
+      isPreview,
+      textColor,
+      getTableById
+    } = this.props;
+    if (!pivotResult) return '';
+    const {
+      table_id,
+      groupby_column_key,
+      column_groupby_column_key
+    } = statItem;
+    const table = getTableById(table_id);
+    const groupbyColumn = (0, _dtableUtils.getTableColumnByKey)(table, groupby_column_key) || {};
+    const columnGroupbyColumn = (0, _dtableUtils.getTableColumnByKey)(table, column_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'])
+    }, /*#__PURE__*/_react.default.createElement("caption", {
+      className: _statisticPivotTableModule.default['column-title']
+    }, columnGroupbyColumn.name), /*#__PURE__*/_react.default.createElement("caption", {
+      className: _statisticPivotTableModule.default['row-title']
+    }, groupbyColumn.name), this.renderHeader({
+      groupbyColumn,
+      columnGroupbyColumn
+    }), this.renderRows({
+      table,
+      groupbyColumn
+    }));
+  }
+}
+var _default = exports.default = TwoDimensionTable;