sea-chart 0.0.1 → 0.0.2

package/dist/view/wrapper/table/one-dimension-table-no-numeric-columns.js

@@ -0,0 +1,144 @@
+import React, { PureComponent } from 'react';
+import classnames from 'classnames';
+import PivotTableDisplayName from './pivot-table-display-name';
+import { ChartUtils, ObjectUtils } from '../../../utils';
+import intl from '../../../intl';
+class OneDimensionTableNoNumericColumns extends PureComponent {
+  constructor() {
+    super(...arguments);
+    this.renderHeader = () => {
+      const {
+        groupbyColumn,
+        selectedCell
+      } = this.props;
+      const {
+        name: groupName
+      } = groupbyColumn;
+      const {
+        rowIdx: selectRowIdx,
+        cellIdx: selectedCellIdx
+      } = selectedCell || {};
+      const isSelectedTotalCellBottom = selectRowIdx === 0 && selectedCellIdx === 0;
+      return /*#__PURE__*/React.createElement("thead", {
+        className: "seatable-table-header-sm"
+      }, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("th", {
+        className: "pivot-table-header"
+      }, groupName), /*#__PURE__*/React.createElement("th", {
+        className: classnames('pivot-table-header', {
+          'selected-pivot-cell-top': isSelectedTotalCellBottom
+        })
+      }, /*#__PURE__*/React.createElement("div", null, intl.get('Total')))));
+    };
+    this.toggleRecords = (cell, selectedCell) => {
+      if (window.isMobile) return;
+      const {
+        rowIdx: selectedRowIdx,
+        cellIdx: selectedCellIdx
+      } = this.props.selectedCell || {};
+      const {
+        rowIdx,
+        cellIdx
+      } = selectedCell;
+      if (rowIdx === selectedRowIdx && selectedCellIdx === cellIdx) return;
+      this.props.toggleRecords(cell, selectedCell);
+    };
+    this.onClickTotals = (recordsList, selectedCell) => {
+      if (window.isMobile) return;
+      const rows = recordsList.flat();
+      const total = rows.length;
+      this.toggleRecords({
+        rows,
+        total
+      }, selectedCell);
+    };
+    this.renderRows = () => {
+      const {
+        result,
+        groupbyColumn,
+        selectedCell,
+        summaryColumn
+      } = this.props;
+      const {
+        pivot_rows,
+        pivot_columns_total
+      } = result;
+      const {
+        rowIdx: selectRowIdx,
+        cellIdx: selectedCellIdx
+      } = selectedCell || {};
+      const pivotRowsLen = Array.isArray(pivot_rows) ? pivot_rows.length : 0;
+      let pivotColumnCells = [];
+      const isSelectRowTotalCellRight = selectRowIdx === pivotRowsLen && selectedCellIdx === 0;
+      const isSelectTotal = selectRowIdx === pivotRowsLen && selectedCellIdx === 0;
+      // eslint-disable-next-line
+      const total = ObjectUtils.hasOwnProperty(pivot_columns_total, 'total') ? pivot_columns_total['total'] : 0;
+      const summaryDisplayValue = ChartUtils.getSummaryValueDisplayString(summaryColumn, total);
+      const isValidSummaryDisplayValue = ChartUtils.isValidValue(summaryDisplayValue);
+      return /*#__PURE__*/React.createElement("tbody", null, pivotRowsLen > 0 && pivot_rows.map((rowItem, rowIdx) => {
+        const {
+          name,
+          total,
+          rows
+        } = rowItem;
+        let isSelectedRowNameRight = selectRowIdx === rowIdx && selectedCellIdx === 0;
+        // let pivotRowCells = [];
+        let isSelectedTotalCell = selectRowIdx === rowIdx && selectedCellIdx === 0;
+        let isSelectedTotalCellTop = selectRowIdx - 1 === rowIdx && selectedCellIdx === 0;
+        let isSelectedTotalCellLeft = selectRowIdx === rowIdx && selectedCellIdx === 0;
+        pivotColumnCells[rowIdx] = rows;
+        const totalDisplayValue = ChartUtils.getSummaryValueDisplayString(summaryColumn, total.total);
+        const isValidTotalDisplayValue = ChartUtils.isValidValue(totalDisplayValue);
+        return /*#__PURE__*/React.createElement("tr", {
+          key: 'table-row-' + rowIdx
+        }, /*#__PURE__*/React.createElement("td", {
+          className: classnames('pivot-row-name', {
+            'selected-pivot-cell-left': isSelectedRowNameRight
+          })
+        }, /*#__PURE__*/React.createElement(PivotTableDisplayName, {
+          value: name,
+          column: groupbyColumn
+        })), /*#__PURE__*/React.createElement("td", {
+          className: classnames('pivot-cell', {
+            'pivot-empty-cell': !isValidTotalDisplayValue,
+            'selected-pivot-cell': isSelectedTotalCell,
+            'selected-pivot-cell-top': isSelectedTotalCellTop,
+            'selected-pivot-cell-left': isSelectedTotalCellLeft
+          })
+          // onClick={() => this.toggleRecords({rows: Array.isArray(rows) && rows.length > 0 ? rows : pivotRowCells, total: total}, {rowIdx, cellIdx: 0})}
+          ,
+          total: totalDisplayValue
+        }, isValidTotalDisplayValue ? totalDisplayValue : /*#__PURE__*/React.createElement("i", null), /*#__PURE__*/React.createElement("span", {
+          className: classnames({
+            'selected-pivot-cell-border': isSelectedTotalCell
+          })
+        })));
+      }), /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
+        className: classnames('pivot-column-total', {
+          'selected-pivot-cell-left': isSelectRowTotalCellRight
+        })
+      }, /*#__PURE__*/React.createElement("div", null, intl.get('Total'))), /*#__PURE__*/React.createElement("td", {
+        className: classnames('pivot-cell pivot-table-total', {
+          'pivot-empty-cell': !isValidSummaryDisplayValue,
+          'selected-pivot-cell': isSelectTotal
+        })
+        // onClick={() => this.onClickTotals(pivotColumnCells, {rowIdx: pivot_rows.length, cellIdx: 0})}
+        ,
+        title: isValidSummaryDisplayValue ? summaryDisplayValue : ''
+      }, isValidSummaryDisplayValue ? summaryDisplayValue : /*#__PURE__*/React.createElement("i", null), /*#__PURE__*/React.createElement("span", {
+        className: classnames({
+          'selected-pivot-cell-border': isSelectTotal
+        })
+      }))));
+    };
+  }
+  render() {
+    const {
+      groupbyColumn
+    } = this.props;
+    if (!groupbyColumn) return '';
+    return /*#__PURE__*/React.createElement("table", {
+      className: "sea-chart-pivot-table"
+    }, this.renderHeader(), this.renderRows());
+  }
+}
+export default OneDimensionTableNoNumericColumns;

package/dist/view/wrapper/table/one-dimension-table-with-numeric-columns.js

@@ -0,0 +1,198 @@
+import React, { PureComponent } from 'react';
+import classnames from 'classnames';
+import PivotTableDisplayName from './pivot-table-display-name';
+import { ChartUtils } from '../../../utils';
+import intl from '../../../intl';
+class OneDimensionTableWithNumericColumns extends PureComponent {
+  constructor(_props) {
+    super(_props);
+    this.init = props => {
+      const {
+        summaryColumns
+      } = props;
+      this.summaryColumnsMethodMap = {};
+      if (Array.isArray(summaryColumns) && summaryColumns.length > 0) {
+        summaryColumns.forEach(item => {
+          const {
+            column_key,
+            summary_method
+          } = item;
+          this.summaryColumnsMethodMap[column_key] = summary_method;
+        });
+      }
+    };
+    this.renderHeader = () => {
+      const {
+        result,
+        groupbyColumn,
+        columnGroupbyColumn,
+        selectedCell,
+        chartTableColumns
+      } = this.props;
+      const {
+        name: groupName
+      } = groupbyColumn;
+      const {
+        name: rowGroupName
+      } = columnGroupbyColumn || {};
+      const {
+        pivot_columns
+      } = result;
+      const {
+        rowIdx: selectRowIdx,
+        cellIdx: selectedCellIdx
+      } = selectedCell || {};
+      return /*#__PURE__*/React.createElement("thead", {
+        className: "seatable-table-header-sm"
+      }, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("th", {
+        className: "pivot-table-header"
+      }, !rowGroupName && groupName), Array.isArray(pivot_columns) && pivot_columns.map((item, index) => {
+        const {
+          key
+        } = item;
+        const column = chartTableColumns.find(column => column.key === key);
+        const isSelectedHeaderBottom = selectRowIdx === 0 && selectedCellIdx === index;
+        return /*#__PURE__*/React.createElement("th", {
+          className: classnames('pivot-table-header', {
+            'selected-pivot-cell-top': isSelectedHeaderBottom
+          }),
+          key: "pivot-column-".concat(index)
+        }, /*#__PURE__*/React.createElement("div", null, column.name));
+      })));
+    };
+    this.toggleRecords = (cell, selectedCell) => {
+      if (window.isMobile) return;
+      const {
+        rowIdx: selectedRowIdx,
+        cellIdx: selectedCellIdx
+      } = this.props.selectedCell || {};
+      const {
+        rowIdx,
+        cellIdx
+      } = selectedCell;
+      if (rowIdx === selectedRowIdx && selectedCellIdx === cellIdx) return;
+      this.props.toggleRecords(cell, selectedCell);
+    };
+    this.onClickTotals = (recordsList, selectedCell) => {
+      if (window.isMobile) return;
+      const rows = recordsList.flat();
+      const total = rows.length;
+      this.toggleRecords({
+        rows,
+        total
+      }, selectedCell);
+    };
+    this.renderRows = () => {
+      const {
+        result,
+        groupbyColumn,
+        selectedCell,
+        chartTableColumns
+      } = this.props;
+      const {
+        pivot_rows,
+        pivot_columns,
+        pivot_columns_total
+      } = result;
+      const {
+        rowIdx: selectRowIdx,
+        cellIdx: selectedCellIdx
+      } = selectedCell || {};
+      const pivotRowsLen = Array.isArray(pivot_rows) ? pivot_rows.length : 0;
+      let pivotColumnCells = [];
+      const isSelectRowTotalCellRight = selectRowIdx === pivotRowsLen && selectedCellIdx === 0;
+      return /*#__PURE__*/React.createElement("tbody", null, pivotRowsLen > 0 && pivot_rows.map((rowItem, rowIdx) => {
+        const {
+          name,
+          total,
+          rows
+        } = rowItem;
+        const isSelectedRowNameRight = selectRowIdx === rowIdx && selectedCellIdx === 0;
+        if (!Array.isArray(pivot_columns)) {
+          pivotColumnCells[rowIdx] = rowItem.rows || [];
+        }
+        return /*#__PURE__*/React.createElement("tr", {
+          key: 'table-row' + rowIdx
+        }, /*#__PURE__*/React.createElement("td", {
+          className: classnames('pivot-row-name', {
+            'selected-pivot-cell-left': isSelectedRowNameRight
+          })
+        }, /*#__PURE__*/React.createElement(PivotTableDisplayName, {
+          value: name,
+          column: groupbyColumn
+        })), Array.isArray(pivot_columns) && pivot_columns.map((columnMap, cellIdx) => {
+          const isSelectedCell = selectRowIdx === rowIdx && selectedCellIdx === cellIdx;
+          const isSelectedCellTop = selectRowIdx - 1 === rowIdx && selectedCellIdx === cellIdx;
+          const isSelectedCellLeft = selectRowIdx === rowIdx && selectedCellIdx - 1 === cellIdx;
+          const {
+            key
+          } = columnMap;
+          const column = chartTableColumns.find(item => item.key === key);
+          const displayValue = ChartUtils.getSummaryValueDisplayString(column, total[key], this.summaryColumnsMethodMap[key]);
+          const isValidDisplayValue = ChartUtils.isValidValue(displayValue);
+          if (Array.isArray(rows) && rows.length > 0) {
+            if (pivotColumnCells[cellIdx]) {
+              pivotColumnCells[cellIdx].push(...rows);
+            } else {
+              pivotColumnCells[cellIdx] = [...rows];
+            }
+          }
+          return /*#__PURE__*/React.createElement("td", {
+            className: classnames('pivot-cell', {
+              'pivot-empty-cell': !isValidDisplayValue,
+              'selected-pivot-cell': isSelectedCell,
+              'selected-pivot-cell-top': isSelectedCellTop,
+              'selected-pivot-cell-left': isSelectedCellLeft
+            }),
+            key: "table-cell-".concat(cellIdx)
+            // onClick={() => this.toggleRecords({rows, total: total[key]}, {rowIdx, cellIdx})}
+            ,
+            title: isValidDisplayValue ? displayValue : ''
+          }, isValidDisplayValue ? displayValue : /*#__PURE__*/React.createElement("i", null), /*#__PURE__*/React.createElement("span", {
+            className: classnames({
+              'selected-pivot-cell-border': isSelectedCell
+            })
+          }));
+        }));
+      }), /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
+        className: classnames('pivot-column-total', {
+          'selected-pivot-cell-left': isSelectRowTotalCellRight
+        })
+      }, /*#__PURE__*/React.createElement("div", null, intl.get('Total'))), Array.isArray(pivot_columns) && pivot_columns.map((c, index) => {
+        // const pivotColumnCell = pivotColumnCells[index];
+        const pivotColumnTotal = pivot_columns_total[c.key];
+        const column = chartTableColumns.find(column => column.key === c.key);
+        const totalDisplayValue = ChartUtils.getSummaryValueDisplayString(column, pivotColumnTotal, this.summaryColumnsMethodMap[c.key]);
+        const isValidTotalDisplayValue = ChartUtils.isValidValue(totalDisplayValue);
+        const isSelectRowTotalCell = selectRowIdx === pivot_rows.length && selectedCellIdx === index;
+        const isSelectRowTotalCellLeft = selectRowIdx === pivot_rows.length && selectedCellIdx - 1 === index;
+        return /*#__PURE__*/React.createElement("td", {
+          className: classnames('pivot-cell', {
+            'pivot-empty-cell': !isValidTotalDisplayValue,
+            'selected-pivot-cell': isSelectRowTotalCell,
+            'selected-pivot-cell-left': isSelectRowTotalCellLeft
+          }),
+          key: "total-cell-".concat(index)
+          // onClick={() => this.toggleRecords({ rows: pivotColumnCell, total: pivot_columns_total[c.key] }, {rowIdx: pivot_rows.length, cellIdx: index})}
+          ,
+          title: totalDisplayValue
+        }, isValidTotalDisplayValue ? totalDisplayValue : /*#__PURE__*/React.createElement("i", null), /*#__PURE__*/React.createElement("span", {
+          className: classnames({
+            'selected-pivot-cell-border': isSelectRowTotalCell
+          })
+        }));
+      })));
+    };
+    this.init(_props);
+  }
+  render() {
+    const {
+      groupbyColumn
+    } = this.props;
+    if (!groupbyColumn) return '';
+    return /*#__PURE__*/React.createElement("table", {
+      className: "sea-chart-pivot-table"
+    }, this.renderHeader(), this.renderRows());
+  }
+}
+export default OneDimensionTableWithNumericColumns;

package/dist/view/wrapper/table/pivot-table-display-name.js

@@ -0,0 +1,248 @@
+import React, { Fragment } from 'react';
+import shallowEqual from 'shallowequal';
+import dayjs from 'dayjs';
+import { CellType, COLLABORATOR_COLUMN_TYPES, FORMULA_RESULT_TYPE, getOption, getCollaborator, getNumberDisplayString, isNumber } from 'dtable-utils';
+import { getClientFormulaDisplayString, getKnownCollaboratorByEmail, getColumnOptions, getDateColumnFormat, generateDefaultUser } from '../../../utils';
+import { Collaborator } from '../../../components';
+import intl from '../../../intl';
+import context from '../../../context';
+class PivotTableDisplayName extends React.Component {
+  constructor(props) {
+    super(props);
+    this.updateCreator = email => {
+      let creator = getKnownCollaboratorByEmail(email);
+      if (creator) {
+        this.setState({
+          creator
+        });
+        return;
+      }
+      if (creator && creator.loaded) {
+        this.setState({
+          creator
+        });
+        return;
+      }
+      if (!creator) {
+        const valueTemplate = {
+          loaded: false,
+          email: email,
+          name: email
+        };
+        context.updateCollaboratorsCache(email, valueTemplate);
+        context.queryUsers([email], emailUserMap => {
+          creator = emailUserMap && emailUserMap[email] || generateDefaultUser(email);
+          const loadedCreator = {
+            ...creator,
+            loaded: true
+          };
+          context.updateCollaboratorsCache(email, loadedCreator);
+          this.setState({
+            creator
+          });
+        });
+      }
+    };
+    this.renderSelectOption = option => {
+      if (!option) return null;
+      const {
+        name: optionName,
+        color,
+        textColor
+      } = option;
+      return /*#__PURE__*/React.createElement("div", {
+        style: {
+          color: textColor,
+          backgroundColor: color
+        },
+        className: "multiple-select-option d-inline-block align-middle mw-100",
+        title: optionName,
+        "aria-label": optionName
+      }, optionName);
+    };
+    this.renderCollaborator = collaborator => {
+      if (!collaborator) return null;
+      const {
+        avatar_url,
+        name
+      } = collaborator;
+      return /*#__PURE__*/React.createElement("div", {
+        className: "collaborators-formatter"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "collaborator"
+      }, /*#__PURE__*/React.createElement("span", {
+        className: "collaborator-avatar-container"
+      }, /*#__PURE__*/React.createElement("img", {
+        src: avatar_url,
+        alt: '',
+        className: "collaborator-avatar"
+      })), /*#__PURE__*/React.createElement("span", {
+        className: "collaborator-name",
+        title: name,
+        "aria-label": name
+      }, name)));
+    };
+    this.getDisplayName = (value, column) => {
+      let {
+        type,
+        data
+      } = column;
+      const collaborators = context.getCollaboratorsFromCache();
+      let displayName;
+      switch (type) {
+        case CellType.SINGLE_SELECT:
+          {
+            const options = getColumnOptions(column);
+            const option = getOption(options, value) || {};
+            displayName = /*#__PURE__*/React.createElement(React.Fragment, null, this.renderSelectOption(option));
+            break;
+          }
+        case CellType.MULTIPLE_SELECT:
+          {
+            const options = getColumnOptions(column);
+            const validValue = Array.isArray(value) && value.length !== 0 ? value : [];
+            displayName = /*#__PURE__*/React.createElement("div", {
+              className: "pivot-table-display-name-row"
+            }, validValue.map(item => {
+              const option = getOption(options, item);
+              if (!item) return null;
+              return /*#__PURE__*/React.createElement(Fragment, {
+                key: item
+              }, this.renderSelectOption(option));
+            }));
+            break;
+          }
+        case CellType.COLLABORATOR:
+          {
+            const validValue = Array.isArray(value) && value.length !== 0 ? value : [];
+            displayName = /*#__PURE__*/React.createElement("div", {
+              className: "pivot-table-display-name-row"
+            }, validValue.map(item => {
+              const collaborator = getCollaborator(collaborators, item);
+              if (!item) return null;
+              return /*#__PURE__*/React.createElement(Fragment, {
+                key: item
+              }, this.renderCollaborator(collaborator));
+            }));
+            break;
+          }
+        case CellType.CREATOR:
+        case CellType.LAST_MODIFIER:
+          {
+            let {
+              creator
+            } = this.state;
+            displayName = /*#__PURE__*/React.createElement(Collaborator, {
+              collaborator: creator
+            });
+            break;
+          }
+        case CellType.NUMBER:
+          {
+            let valueNumber = parseFloat(value);
+            let displayValue = isNumber(valueNumber) ? getNumberDisplayString(valueNumber, data) : value;
+            displayName = /*#__PURE__*/React.createElement("div", {
+              title: displayValue,
+              "aria-label": displayValue
+            }, displayValue);
+            break;
+          }
+        case CellType.DATE:
+          {
+            let displayValue = value + '';
+            if (displayValue && displayValue.split('-').length === 3) {
+              let format = getDateColumnFormat(column);
+              let spaceIndex = format.indexOf(' ');
+              if (spaceIndex > -1) {
+                format = format.slice(0, spaceIndex);
+              }
+              displayValue = dayjs(displayValue).format(format);
+            }
+            displayName = /*#__PURE__*/React.createElement("div", {
+              title: displayValue,
+              "aria-label": displayValue
+            }, displayValue);
+            break;
+          }
+        case CellType.LINK:
+          {
+            const displayValue = getClientFormulaDisplayString([value], data, {
+              collaborators
+            }) || null;
+            displayName = /*#__PURE__*/React.createElement("div", {
+              title: displayValue,
+              "aria-label": displayValue
+            }, displayValue);
+            break;
+          }
+        case CellType.FORMULA:
+        case CellType.LINK_FORMULA:
+          {
+            let displayValue = value;
+            let {
+              result_type,
+              array_type
+            } = data || {};
+            if (result_type === FORMULA_RESULT_TYPE.NUMBER) {
+              let valueNumber = parseFloat(value);
+              displayValue = isNumber(valueNumber) ? getNumberDisplayString(valueNumber, data) : value;
+            } else if (result_type === FORMULA_RESULT_TYPE.ARRAY) {
+              if (COLLABORATOR_COLUMN_TYPES.includes(array_type) && Array.isArray(value)) {
+                displayValue = value.map(email => {
+                  let user = array_type === CellType.COLLABORATOR ? getCollaborator(collaborators, email) : getKnownCollaboratorByEmail(email);
+                  return (user || {}).name;
+                });
+              }
+            }
+            displayName = /*#__PURE__*/React.createElement("div", {
+              title: displayValue,
+              "aria-label": displayValue
+            }, displayValue);
+            break;
+          }
+        default:
+          {
+            displayName = /*#__PURE__*/React.createElement("div", {
+              title: String(value),
+              "aria-label": String(value)
+            }, value);
+            break;
+          }
+      }
+      return displayName;
+    };
+    this.state = {
+      creator: {}
+    };
+  }
+  componentDidMount() {
+    let {
+      column,
+      value
+    } = this.props;
+    if (column.type !== CellType.CREATOR && column.type !== CellType.LAST_MODIFIER) return;
+    this.updateCreator(value);
+  }
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    let {
+      column,
+      value
+    } = nextProps;
+    let {
+      type
+    } = column;
+    if (type !== CellType.CREATOR && type !== CellType.LAST_MODIFIER) return;
+    if (value !== this.props.value || shallowEqual(nextProps.column, this.props.column)) {
+      this.updateCreator(value);
+    }
+  }
+  render() {
+    let {
+      value,
+      column
+    } = this.props;
+    let displayName = value ? this.getDisplayName(value, column) : /*#__PURE__*/React.createElement("div", null, "(".concat(intl.get('Empty'), ")"));
+    return /*#__PURE__*/React.createElement(Fragment, null, displayName);
+  }
+}
+export default PivotTableDisplayName;