sea-chart 0.0.67 → 0.0.68-alpha.1

package/dist/components/row-card/row-card-item.js

@@ -22,7 +22,8 @@ class RowCardItem extends PureComponent {
         rowCardType,
         isExpandRowDetail,
         row,
-        table
+        table,
+        formulaRows
       } = this.props;
       if (rowCardType !== 'link') {
         var _window, _window$app;
@@ -31,7 +32,11 @@ class RowCardItem extends PureComponent {
           window.app.expandRow(row, table);
         } else {
           // row card detail opened by module (universal-app)
-          // EventBus.dispatch(EXTERNAL_EVENT.SHOW_ROW_DETAIL_DIALOG, { row, table });
+          EventBus.dispatch(EXTERNAL_EVENT.SHOW_ROW_DETAIL_DIALOG, {
+            row,
+            table,
+            formulaRows
+          });
         }
       }
     };

package/dist/components/row-card/row-card.css

@@ -264,6 +264,10 @@
   border-radius: 3px;
 }
 
+.row-card-item-content .row-cell-value .sea-chart-statistic-record-formula-container {
+  text-align: left !important;
+}
+
 .image-cell-value .cell-value-size {
   position: absolute;
   bottom: -2px;

package/dist/components/row-card/row-card.js

@@ -226,6 +226,7 @@ class RowCard extends Component {
         isAdditionEditorView: isAdditionEditorView,
         isHighlightRow: highlightRowIndex === rowIdx,
         formulaRow: formulaRow,
+        formulaRows: formulaRows,
         displayRowName: displayRowName,
         rowIdx: rowIdx,
         columns: columns,

package/dist/components/statistic-record-dialog/index.js

@@ -31,7 +31,8 @@ class StatisticRecordDialog extends React.Component {
       } = statisticRecord || {};
       const {
         table_id,
-        view_id
+        view_id,
+        filters
       } = chart.config;
       this.table = getTableById(tables, table_id);
       if (view_id) {
@@ -40,17 +41,37 @@ class StatisticRecordDialog extends React.Component {
       }
       this.unShowColumnKeyList = this.getUnShowColumnKeyList(this.view);
       this.renderedColumns = this.getRenderedColumns(this.table);
-      if (this.isArchiveView || !isCalculateByView || (rows === null || rows === void 0 ? void 0 : rows.length) === 0) {
-        var _context$api;
+      if (this.isArchiveView || !isCalculateByView || statisticRecord.isQueryBySql) {
+        var _context$api, _context$api2;
+        if ((_context$api = context.api) === null || _context$api === void 0 ? void 0 : _context$api.customQueryRows) {
+          const newFilters = (filters === null || filters === void 0 ? void 0 : filters.map(item => {
+            return {
+              ...item,
+              column_key: (item === null || item === void 0 ? void 0 : item.column_key) || '',
+              value: (item === null || item === void 0 ? void 0 : item.filter_term) || ''
+            };
+          })) || [];
+          const detailFilterConditions = {
+            filters: newFilters
+          };
+          context.api.customQueryRows(detailFilterConditions).then(res => {
+            const {
+              results: rows
+            } = res.data;
+            this.processDrilledRows(rows);
+          }).catch(error => new Error(error));
+          return;
+        }
         const chartDataSQL = new ChartDataSQL({
           table: this.table,
-          chart
+          chart,
+          view: this.view
         });
         const sqlString = chartDataSQL.get_statistic_record_sql(chart, statisticRecord, {
           isColumn,
           isRow
         });
-        ((_context$api = context.api) === null || _context$api === void 0 ? void 0 : _context$api.sqlQuery) && context.api.sqlQuery(sqlString).then(res => {
+        ((_context$api2 = context.api) === null || _context$api2 === void 0 ? void 0 : _context$api2.sqlQuery) && context.api.sqlQuery(sqlString).then(res => {
           const {
             results: rows
           } = res.data;
@@ -96,24 +117,22 @@ class StatisticRecordDialog extends React.Component {
       });
     };
     this.initComputedProperties = drilledRows => {
-      if (this.isArchiveView) {
-        const formulaColumns = getFormulaColumnsContainLinks(this.table);
-        if (formulaColumns.length === 0) return {};
-        let formulaRows = {};
-        drilledRows.forEach(row => {
-          const rowId = row._id;
-          formulaRows[rowId] = {};
-          formulaColumns.forEach(column => formulaRows[rowId][column.key] = row[column.key]);
-        });
-        this.formulaRows = formulaRows;
-        return;
-      }
       if (this.view) {
         const {
           formulaRows
         } = this.getTableViewFormulaRows();
         this.formulaRows = formulaRows;
+        return;
       }
+      const formulaColumns = getFormulaColumnsContainLinks(this.table);
+      if (formulaColumns.length === 0) return {};
+      let formulaRows = {};
+      drilledRows.forEach(row => {
+        const rowId = row._id;
+        formulaRows[rowId] = {};
+        formulaColumns.forEach(column => formulaRows[rowId][column.key] = row[column.key]);
+      });
+      this.formulaRows = formulaRows;
     };
     this.onSearch = searchVal => {
       const {

package/dist/constants/index.js

@@ -198,7 +198,7 @@ export const LEGEND_DIRECTION = {
 export const MIRROR_COLUMN_LIST = [CellType.TEXT, CellType.NUMBER, CellType.CTIME, CellType.MTIME, CellType.DATE, CellType.COLLABORATOR, CellType.AUTO_NUMBER, CellType.FORMULA, CellType.GEOLOCATION, CellType.URL, CellType.SINGLE_SELECT, CellType.LINK, CellType.CREATOR, CellType.LAST_MODIFIER, CellType.DURATION, CellType.EMAIL];
 export const CHART_SUPPORT_FONT_WEIGHTS = [400, 700];
 export const DEFAULT_CHART_FONT_WEIGHT = CHART_SUPPORT_FONT_WEIGHTS[1];
-export const DAFAULT_TREND_CHART_TITLE_FONT_SIZE = 16;
+export const DEFAULT_TREND_CHART_TITLE_FONT_SIZE = 16;
 export const DEFAULT_CHART_TITLE_FONT_SIZE = 18;
 export const DEFAULT_CHART_TITLE_FONT_COLOR = '#212529';
 export const CHART_SETTINGS_TYPE = {

package/dist/context.js

@@ -20,8 +20,12 @@ class Context {
         });
       }
       const table = getTableById(tables, chart.config.table_id);
+
+      // use default view here
+      const defaultView = table.views.find(view => view._id === '0000');
       const chartDataSQL = new ChartDataSQL({
         table,
+        view: defaultView,
         chart
       });
       const {

package/dist/settings/table-settings/data-settings.js

@@ -254,6 +254,12 @@ const DataSettings = _ref => {
       summary_type = CHART_SUMMARY_TYPE.ADVANCED;
       column_groupby_multiple_numeric_column = true;
       summary_columns = [];
+      if (numericColumns && numericColumns[0]) {
+        summary_columns.push({
+          column_key: numericColumns[0].key,
+          summary_method: BaseUtils.isDateSummaryColumn(numericColumns[0]) ? CHART_DATE_SUMMARY_CALCULATION_METHOD[0] : CHART_SUMMARY_CALCULATION_METHOD[0]
+        });
+      }
       // column_groupby_column_key = null;
       // column_groupby_date_granularity = null;
       // column_groupby_geolocation_granularity = null;

package/dist/settings/widgets/title-settings/index.js

@@ -4,7 +4,7 @@ import { Label } from 'reactstrap';
 import { settingsContext } from '../../../utils/contexts';
 import { FontSizeSettings, FontWeightSettings, FontColorSettings } from '../font-settings';
 import TextHorizontalSettings from '../text-horizontal-settings';
-import { DEFAULT_CHART_FONT_WEIGHT, DEFAULT_CHART_TITLE_FONT_SIZE, CHART_SUPPORT_FONT_WEIGHTS, HORIZONTAL_ALIGN, DEFAULT_CHART_TITLE_FONT_COLOR, DAFAULT_TREND_CHART_TITLE_FONT_SIZE, CHART_TYPE } from '../../../constants';
+import { DEFAULT_CHART_FONT_WEIGHT, DEFAULT_CHART_TITLE_FONT_SIZE, CHART_SUPPORT_FONT_WEIGHTS, HORIZONTAL_ALIGN, DEFAULT_CHART_TITLE_FONT_COLOR, DEFAULT_TREND_CHART_TITLE_FONT_SIZE, CHART_TYPE } from '../../../constants';
 import intl from '../../../intl';
 import TitleText from './title-text';
 const TitleSetting = props => {
@@ -55,9 +55,9 @@ const TitleSetting = props => {
   const isCard = props.type === CHART_TYPE.TREND || props.type === CHART_TYPE.BASIC_NUMBER_CARD;
 
   // if no text then set trend default font size to 16 and font_weight to 400
-  if (isCard && !initialTitle.TitleText) {
+  if (isCard && !initialTitle.text) {
     initialTitle.font_weight = CHART_SUPPORT_FONT_WEIGHTS[0];
-    initialTitle.font_size = DAFAULT_TREND_CHART_TITLE_FONT_SIZE;
+    initialTitle.font_size = DEFAULT_TREND_CHART_TITLE_FONT_SIZE;
   }
   const getChildren = () => {
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TitleText, {
@@ -66,7 +66,7 @@ const TitleSetting = props => {
     }), /*#__PURE__*/React.createElement(FontSizeSettings, {
       className: 'mt-3',
       fontSize: initialTitle.font_size,
-      defaultFontSize: isCard ? DAFAULT_TREND_CHART_TITLE_FONT_SIZE : DEFAULT_CHART_TITLE_FONT_SIZE,
+      defaultFontSize: isCard ? DEFAULT_TREND_CHART_TITLE_FONT_SIZE : DEFAULT_CHART_TITLE_FONT_SIZE,
       modifyFontSize: modifyFontSize
     }), /*#__PURE__*/React.createElement(FontWeightSettings, {
       className: 'mt-3',

package/dist/utils/chart-utils/base-utils.js

@@ -1372,6 +1372,8 @@ BaseUtils.mergePivotTableSameCollaborator = pivot_rows => {
       new_pivot_rows.push({
         ...item
       });
+    } else {
+      new_pivot_rows.push(item);
     }
   });
   return new_pivot_rows;

package/dist/utils/chart-utils/sql-statistics-utils.js

@@ -646,7 +646,9 @@ SQLStatisticsUtils.twoDimensionTableSQLResult2JavaScript = (chart, sqlRows, char
   pivot_table_total, chart);
   BaseUtils.sortCharts(pivot_rows, groupbyColumn, 'name');
   BaseUtils.sortCharts(pivot_columns, columnGroupbyColumn, 'key');
-  pivot_rows = BaseUtils.mergePivotTableSameCollaborator(pivot_rows);
+  if ((groupbyColumn === null || groupbyColumn === void 0 ? void 0 : groupbyColumn.type) === CellType.COLLABORATOR) {
+    pivot_rows = BaseUtils.mergePivotTableSameCollaborator(pivot_rows);
+  }
   const summary_columns = [summaryColumn, ...summaryColumnsWithMethod.map(item => item.column)];
   return {
     summary_columns,

package/dist/utils/row-record-utils.js

@@ -410,7 +410,8 @@ export const getFormattedCell = function (column, row) {
           value: newValue,
           column,
           isCellSelected: false,
-          readOnly: true
+          readOnly: true,
+          containerClassName: 'sea-chart-statistic-record-formula-container'
         };
         displayValue = createColumnFormatter(type, formatterProps);
         break;

package/dist/utils/sql/chart-data-sql.js

@@ -13,6 +13,7 @@ class ChartDataSQL {
     var _chart$config;
     let {
       table,
+      view,
       chart,
       username,
       userId,
@@ -1059,6 +1060,7 @@ class ChartDataSQL {
     };
     this.error = '';
     this.table = table;
+    this.view = view;
     this.chart = (chart === null || chart === void 0 ? void 0 : chart.config) || {};
     this.username = username;
     const table_name = (table === null || table === void 0 ? void 0 : table.name) || '';
@@ -1072,7 +1074,7 @@ class ChartDataSQL {
     Array.isArray(table.columns) && table.columns.forEach(column => {
       this.column_key_map[column.key] = column;
     });
-    this.filter_sql = filter2SqlCondition(table, chart, username, userId, userDepartmentIdsMap);
+    this.filter_sql = filter2SqlCondition(table, view, username, userId, userDepartmentIdsMap);
   }
 }
 export default ChartDataSQL;

package/dist/view/wrapper/combination.js

@@ -305,7 +305,10 @@ class Combination extends ChartComponent {
         }, 100));
       }
       this.chart.on('element:click', e => {
-        this.props.toggleRecords(e.data.data);
+        this.props.toggleRecords({
+          ...e.data.data,
+          isQueryBySql: true
+        });
       });
       this.chart.on('interval:mouseenter', e => {
         if (this.isInsideInterval) return;

package/dist/view/wrapper/table/index.css

@@ -147,8 +147,7 @@
   padding: 0;
 }
 
-.sea-chart-pivot-table .pivot-table-header-summary-columns-container,
-.sea-chart-pivot-table .pivot-cells-container  {
+.sea-chart-pivot-table .pivot-table-header-summary-columns-container {
   height: 100%;
   width: 100%;
   overflow: hidden;
@@ -156,6 +155,14 @@
   justify-content: space-between;
 }
 
+.sea-chart-pivot-table .pivot-cells-container  {
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+  display: flex;
+  justify-content: center;
+}
+
 .sea-chart-pivot-table .pivot-table-header-summary-columns-container > div,
 .sea-chart-pivot-table .pivot-cells-container > div {
   flex:1;

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

@@ -153,6 +153,7 @@ class OneDimensionTableWithNumericColumns extends PureComponent {
             key: "table-cell-".concat(cellIdx),
             onClick: () => this.toggleRecords({
               rows,
+              name: rowItem === null || rowItem === void 0 ? void 0 : rowItem.name,
               total: total[key]
             }, {
               rowIdx,

package/dist/view/wrapper/table/two-dimension-table.js

@@ -126,6 +126,22 @@ class TwoDimensionTable extends PureComponent {
         total
       }, selectedCell);
     };
+    this.renderSingle = (total, display_empty, cellIdx, isSelectedCell, isSelectedCellTop, isSelectedCellLeft) => {
+      const isValidDisplayValue = BaseUtils.isValidValue(total, display_empty);
+      return /*#__PURE__*/React.createElement("div", {
+        key: "table-cell-".concat(cellIdx),
+        className: classnames('pivot-cell', {
+          'pivot-empty-cell': !isValidDisplayValue,
+          'selected-pivot-cell': isSelectedCell,
+          'selected-pivot-cell-top': isSelectedCellTop,
+          'selected-pivot-cell-left': isSelectedCellLeft
+        })
+      }, isValidDisplayValue ? total : /*#__PURE__*/React.createElement("i", null), /*#__PURE__*/React.createElement("span", {
+        className: classnames({
+          'selected-pivot-cell-border': isSelectedCell
+        })
+      }));
+    };
     this.renderRows = () => {
       const {
         result,
@@ -138,14 +154,16 @@ class TwoDimensionTable extends PureComponent {
       const {
         display_total = true,
         display_empty,
-        summary_type
+        summary_type,
+        column_groupby_multiple_numeric_column,
+        summary_columns
       } = chart.config;
       const {
         pivot_rows,
         pivot_columns,
         pivot_columns_total,
         pivot_table_total,
-        summary_columns
+        summary_columns: summaryColumns
       } = result;
       const {
         rowIdx: selectRowIdx,
@@ -214,7 +232,10 @@ class TwoDimensionTable extends PureComponent {
                 'selected-pivot-cell-left': isSelectedCellLeft
               }),
               key: "table-cell-".concat(cellIdx),
-              onClick: () => this.toggleRecords(c, {
+              onClick: () => this.toggleRecords({
+                ...c,
+                name: rowItem === null || rowItem === void 0 ? void 0 : rowItem.name
+              }, {
                 rowIdx,
                 cellIdx
               }),
@@ -229,10 +250,10 @@ class TwoDimensionTable extends PureComponent {
             className: classnames('pivot-cell'),
             key: "table-cell-".concat(cellIdx)
           }, /*#__PURE__*/React.createElement("div", {
-            className: "pivot-cells-container"
-          }, total && total.map && total.map((summaryCell, idx) => {
+            className: classnames('pivot-cells-container')
+          }, column_groupby_multiple_numeric_column && (total && total.map && total.map((summaryCell, idx) => {
             const summaryCellColumnKey = summaryCell[2];
-            const summaryCellColumn = summary_columns.find(item => item.key === summaryCellColumnKey);
+            const summaryCellColumn = summaryColumns.find(item => item.key === summaryCellColumnKey);
             const displayValue = BaseUtils.getSummaryValueDisplayString(summaryCellColumn, summaryCell[1], summaryMethod);
             const isValidDisplayValue = BaseUtils.isValidValue(displayValue, display_empty);
             return /*#__PURE__*/React.createElement("div", {
@@ -255,7 +276,7 @@ class TwoDimensionTable extends PureComponent {
                 'pivot-empty-cell': true
               })
             }, /*#__PURE__*/React.createElement("i", null));
-          }))));
+          }))), !column_groupby_multiple_numeric_column && this.renderSingle(total, display_empty, cellIdx, isSelectedCell, isSelectedCellTop, isSelectedCellLeft)));
         }), display_total && /*#__PURE__*/React.createElement("td", {
           className: classnames('pivot-cell', {
             'pivot-empty-cell': !isValidSummaryDisplayValue,
@@ -265,7 +286,8 @@ class TwoDimensionTable extends PureComponent {
           }),
           onClick: () => this.toggleRecords({
             rows: Array.isArray(cells) && cells.length > 0 ? pivotRowCells : rowItem.rows,
-            total: total
+            total: total,
+            name: rowItem === null || rowItem === void 0 ? void 0 : rowItem.name
           }, {
             rowIdx,
             cellIdx: cells.length

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sea-chart",
-  "version": "0.0.67",
+  "version": "0.0.68-alpha.1",
   "main": "./dist/index.js",
   "dependencies": {
     "@antv/data-set": "0.11.8",