sea-chart 0.0.68-alpha.9 → 0.0.69

package/dist/settings/advance-bar-settings/data-settings.js

@@ -5,7 +5,6 @@ import CommonDataSettings from '../widgets/common-data-settings';
 import Divider from '../widgets/divider';
 import GroupBy from '../widgets/group-by';
 import YAxisGroupSettings from '../widgets/y-axis-group-settings';
-import { islinkDateFormula } from '../../utils/column-utils';
 import { CHART_SUMMARY_TYPE, GEOLOCATION_FORMAT_CITY, GEOLOCATION_FORMAT_MAP } from '../../constants';
 import intl from '../../intl';
 const DataSettings = _ref => {
@@ -37,7 +36,7 @@ const DataSettings = _ref => {
       update['x_axis_date_granularity'] = null;
       update['x_axis_geolocation_granularity'] = null;
     } else {
-      if (DATE_COLUMN_OPTIONS.includes(type) || islinkDateFormula(column)) {
+      if (DATE_COLUMN_OPTIONS.includes(type)) {
         update['x_axis_date_granularity'] = CHART_SUMMARY_TYPE.MONTH;
         update['x_axis_geolocation_granularity'] = null;
       } else if (type === CellType.GEOLOCATION) {

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

@@ -7,7 +7,6 @@ import Divider from '../widgets/divider';
 import GroupBy from '../widgets/group-by';
 import BasicSummary from '../widgets/basic-summary';
 import DataSort from '../widgets/data-sort';
-import { islinkDateFormula } from '../../utils/column-utils';
 import { CHART_SUMMARY_TYPE, SUPPORT_DATA_SORT_CHART_TYPES, CHART_SUMMARY_TYPES, GEOLOCATION_FORMAT_CITY, GEOLOCATION_FORMAT_MAP, CHART_TYPE } from '../../constants';
 const DataSettings = _ref => {
   let {
@@ -38,7 +37,7 @@ const DataSettings = _ref => {
       update['x_axis_date_granularity'] = null;
       update['x_axis_geolocation_granularity'] = null;
     } else {
-      if (DATE_COLUMN_OPTIONS.includes(type) || islinkDateFormula(column)) {
+      if (DATE_COLUMN_OPTIONS.includes(type)) {
         update['x_axis_date_granularity'] = CHART_SUMMARY_TYPE.MONTH;
         update['x_axis_geolocation_granularity'] = null;
       } else if (type === CellType.GEOLOCATION) {

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/group-by.js

@@ -4,7 +4,6 @@ import React, { Component } from 'react';
 import classnames from 'classnames';
 import { Label, FormGroup } from 'reactstrap';
 import { CellType, COLUMNS_ICON_CONFIG, DATE_COLUMN_OPTIONS, getTableById, getTableColumnByKey } from 'dtable-utils';
-import { islinkDateFormula } from '../../utils/column-utils';
 import { CHART_SUPPORT_COLUMNS, DATE_GRANULATES, GEOLOCATION_GRANULATES, CHART_SUMMARY_SHOW, GEOLOCATION_FORMAT_MAP, CHART_TYPE, TIME_COLUMN_LIST, COMPLETENESS_GROUPBY_SUPPORTED_COLUMN_TYPE, NUMBERIC_COLUMN_TYPE, MIRROR_COLUMN_LIST } from '../../constants';
 import intl from '../../intl';
 class GroupBy extends Component {
@@ -177,7 +176,7 @@ class GroupBy extends Component {
       const {
         type: groupbyColumnType
       } = groupbyColumn;
-      return /*#__PURE__*/React.createElement(React.Fragment, null, (DATE_COLUMN_OPTIONS.includes(groupbyColumnType) || islinkDateFormula(groupbyColumn)) && this.renderGroupbyDateGranulates(), groupbyColumnType === CellType.GEOLOCATION && this.geolocationGranulatesOptions.length > 0 && this.renderGroupbyGeolocationGranulates());
+      return /*#__PURE__*/React.createElement(React.Fragment, null, DATE_COLUMN_OPTIONS.includes(groupbyColumnType) && this.renderGroupbyDateGranulates(), groupbyColumnType === CellType.GEOLOCATION && this.geolocationGranulatesOptions.length > 0 && this.renderGroupbyGeolocationGranulates());
     };
     this.dateGranulatesOptions = this.generatorGranulatesOptions(DATE_GRANULATES);
     this.initOptions(_props);

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

@@ -1052,16 +1052,9 @@ BaseUtils.getGroupLabel = (cellValue, formulaRow, column, dateGranularity, geoGr
         if (!formulaRow) return '';
         let formulaCellValue = formulaRow[key];
         let {
-          result_type,
-          array_type
+          result_type
         } = data || {};
         if (result_type === FORMULA_RESULT_TYPE.ARRAY) {
-          if (array_type === 'date' && (formulaCellValue === null || formulaCellValue === void 0 ? void 0 : formulaCellValue.length) === 1) {
-            const dateCellValue = formulaCellValue[0];
-            if (!dateGranularity) return getDateDisplayString(dateCellValue);
-            if (dateGranularity.toUpperCase() === 'QUARTER') return DateUtils.getDateByGranularity(dateCellValue, 'QUARTAR');
-            return DateUtils.getDateByGranularity(dateCellValue, dateGranularity);
-          }
           return getFormulaDisplayString(formulaCellValue, data, {
             tables: value.tables
           }) || null;
@@ -1379,26 +1372,10 @@ BaseUtils.mergePivotTableSameCollaborator = pivot_rows => {
       new_pivot_rows.push({
         ...item
       });
+    } else {
+      new_pivot_rows.push(item);
     }
   });
   return new_pivot_rows;
 };
-BaseUtils.getDateGranularityByType = chart => {
-  const {
-    type
-  } = chart;
-  if ([CHART_TYPE.AREA_GROUP, CHART_TYPE.AREA, CHART_TYPE.BAR, CHART_TYPE.BAR_CUSTOM, CHART_TYPE.BAR_GROUP, CHART_TYPE.BAR_STACK, CHART_TYPE.COMPARE_BAR, CHART_TYPE.COMBINATION, CHART_TYPE.LINE_GROUP, CHART_TYPE.LINE].includes(type)) {
-    return chart['x_axis_date_granularity'];
-  }
-  if ([CHART_TYPE.COMPLETENESS_GROUP, CHART_TYPE.SCATTER, CHART_TYPE.TREND].includes(type)) {
-    return chart['date_granularity'];
-  }
-  if ([CHART_TYPE.HORIZONTAL_BAR, CHART_TYPE.HORIZONTAL_GROUP_BAR, CHART_TYPE.STACKED_HORIZONTAL_BAR].includes(type)) {
-    return chart['vertical_axis_date_granularity'];
-  }
-  if ([CHART_TYPE.PIE, CHART_TYPE.RING, CHART_TYPE.TABLE, CHART_TYPE.TREE_MAP].includes(type)) {
-    return chart['groupby_date_granularity'];
-  }
-  return null;
-};
 export default BaseUtils;

package/dist/utils/chart-utils/original-data-utils/basic-chart-calculator.js

@@ -1,7 +1,7 @@
 import dayjs from 'dayjs';
 import { CellType, DATE_COLUMN_OPTIONS, FORMULA_COLUMN_TYPES_MAP, getTableById, getViewById, getTableColumnByKey } from 'dtable-utils';
 import { CHART_SUMMARY_TYPE, CHART_TYPE, Y_AXIS_TYPE_PREFIX } from '../../../constants';
-import { getColorFromSingleSelectColumn, islinkDateFormula } from '../../column-utils';
+import { getColorFromSingleSelectColumn } from '../../column-utils';
 import { isArrayCellValue } from '../../cell-value-utils';
 import { getFormattedLabel, isValidRow } from '../../row-utils';
 import { fixGeoGranularity } from '../../map';
@@ -67,7 +67,7 @@ async function calculateBasicChart(chart, value, _ref) {
   const {
     type: groupby_column_type
   } = groupbyColumn;
-  if ((DATE_COLUMN_OPTIONS.includes(groupby_column_type) || islinkDateFormula(groupbyColumn)) && !groupby_date_granularity) {
+  if (DATE_COLUMN_OPTIONS.includes(groupby_column_type) && !groupby_date_granularity) {
     groupby_date_granularity = CHART_SUMMARY_TYPE.MONTH;
     if ([CHART_TYPE.HEAT_MAP].includes(chart.type)) {
       groupby_date_granularity = CHART_SUMMARY_TYPE.DAY;
@@ -161,7 +161,7 @@ async function calculateGroupingChart(chart, value, _ref2) {
   const {
     type: groupby_column_type
   } = groupbyColumn;
-  if ((DATE_COLUMN_OPTIONS.includes(groupby_column_type) || islinkDateFormula(groupbyColumn)) && !groupby_date_granularity) {
+  if (DATE_COLUMN_OPTIONS.includes(groupby_column_type) && !groupby_date_granularity) {
     groupby_date_granularity = CHART_SUMMARY_TYPE.MONTH;
   }
   if (groupby_column_type === CellType.GEOLOCATION && !groupby_geolocation_granularity) {
@@ -461,7 +461,7 @@ async function calculateCustomBar(statItem, value, _ref4) {
   } = groupbyColumn;
   let groupbyDateGranularity = x_axis_date_granularity;
   let groupbyGeolocationGranularity = x_axis_geolocation_granularity;
-  if ((DATE_COLUMN_OPTIONS.includes(groupbyColumnType) || islinkDateFormula(groupbyColumn)) && !groupbyDateGranularity) {
+  if (DATE_COLUMN_OPTIONS.includes(groupbyColumnType) && !groupbyDateGranularity) {
     groupbyDateGranularity = CHART_SUMMARY_TYPE.MONTH;
   }
   if (groupbyColumnType === CellType.GEOLOCATION && !groupbyGeolocationGranularity) {

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

@@ -14,8 +14,7 @@ import BaseUtils from './base-utils';
 class SQLStatisticsUtils {}
 _SQLStatisticsUtils = SQLStatisticsUtils;
 SQLStatisticsUtils.dataSources = 'sql_statistics';
-SQLStatisticsUtils.getGroupLabelFromDB = (cellValue, column, chart) => {
-  const dateGranularity = BaseUtils.getDateGranularityByType(chart);
+SQLStatisticsUtils.getGroupLabelFromDB = (cellValue, column, tables, dateGranularity) => {
   const collaborators = context.getCollaboratorsFromCache();
   const {
     type,
@@ -74,15 +73,9 @@ SQLStatisticsUtils.getGroupLabelFromDB = (cellValue, column, chart) => {
     case CellType.FORMULA:
     case CellType.LINK_FORMULA:
       {
-        const validValue = getFormulaDisplayString(cellValue, data);
-        const {
-          array_type
-        } = data || {};
-        if (array_type === 'date' && (cellValue === null || cellValue === void 0 ? void 0 : cellValue.length) === 1) {
-          if (!dateGranularity) return validValue;
-          if (dateGranularity.toUpperCase() === 'QUARTER') return DateUtils.getDateByGranularity(validValue, 'QUARTAR');
-          return DateUtils.getDateByGranularity(validValue, dateGranularity);
-        }
+        const validValue = getFormulaDisplayString(cellValue, data, {
+          tables
+        });
         if (!validValue && validValue !== 0) return null;
         return validValue;
       }
@@ -235,6 +228,112 @@ SQLStatisticsUtils.getGroupData = (result, groupColumn) => {
   }
   return groupList;
 };
+SQLStatisticsUtils.oneDimensionTableSQLResult2JavaScript = (chart, sqlRows, chartSQLMap, columnMap, tables) => {
+  const {
+    groupbyColumn
+  } = columnMap;
+  const {
+    summary_type
+  } = chart.config;
+  const {
+    sqlGroupbyColumnKey,
+    sqlSummaryColumnKey
+  } = chartSQLMap;
+  let pivot_columns = [];
+  let pivot_rows = [];
+  const isCount = summary_type === CHART_SUMMARY_TYPE.COUNT;
+  let newSqlRows = sqlRows;
+  if (groupbyColumn.type === CellType.COLLABORATOR) {
+    newSqlRows = _SQLStatisticsUtils.formatedTableSqlRows(chart, sqlRows, chartSQLMap, columnMap, tables);
+  }
+  if (isCount) {
+    let allTotal = 0;
+    newSqlRows.forEach(row => {
+      const total = row[sqlSummaryColumnKey] || 0;
+      allTotal += total;
+      pivot_rows.push({
+        name: _SQLStatisticsUtils.getGroupLabelFromDB(row[sqlGroupbyColumnKey], groupbyColumn, tables),
+        rows: [],
+        total: {
+          total
+        }
+      });
+    });
+    return {
+      pivot_columns,
+      pivot_rows: pivot_rows,
+      pivot_columns_total: {
+        total: allTotal
+      }
+    };
+  }
+  const {
+    summarySQLColumnName2ColumnKey,
+    summaryTableColumnKey2Column,
+    summaryTableColumnKey2Method
+  } = chartSQLMap;
+  const summaryColumnKeys = Object.values(summarySQLColumnName2ColumnKey);
+  const sqlSummaryColumnKeys = Object.keys(summarySQLColumnName2ColumnKey);
+  let totalTemplate = {};
+  Object.values(summaryColumnKeys).forEach(key => {
+    const summaryMethod = summaryTableColumnKey2Method[key];
+    totalTemplate[key] = BaseUtils.initTotal(summaryMethod);
+    pivot_columns.push({
+      key
+    });
+  });
+  let allTotal = {
+    ...totalTemplate
+  };
+  newSqlRows.forEach(row => {
+    let rowTotal = {
+      ...totalTemplate
+    };
+    sqlSummaryColumnKeys.forEach(key => {
+      let columnKey = summarySQLColumnName2ColumnKey[key];
+      let summaryColumn = summaryTableColumnKey2Column[columnKey];
+      const summaryMethod = summaryTableColumnKey2Method[columnKey];
+      let value = row[key] || BaseUtils.initTotal(summaryMethod);
+      allTotal[columnKey] = BaseUtils.getSummaryValue({
+        summaryColumn,
+        summaryMethod
+      }, allTotal[columnKey], value);
+      if (BaseUtils.isDateSummaryColumn(summaryColumn)) {
+        rowTotal[columnKey] = value;
+      } else if (BaseUtils.isNumericSummaryColumn(summaryColumn)) {
+        rowTotal[columnKey] = rowTotal[columnKey] + value;
+      }
+    });
+    pivot_rows.push({
+      name: _SQLStatisticsUtils.getGroupLabelFromDB(row[sqlGroupbyColumnKey], groupbyColumn, tables),
+      rows: [row],
+      total: rowTotal
+    });
+  });
+  if (pivot_columns.length < 2) {
+    const pivot_column = pivot_columns[0];
+    const {
+      key
+    } = pivot_column;
+    pivot_rows.forEach(row => {
+      row.total = {
+        ...row.total,
+        total: row.total[key]
+      };
+    });
+    allTotal = {
+      ...allTotal,
+      total: allTotal[key]
+    };
+  }
+  BaseUtils.sortCharts(pivot_rows, groupbyColumn, 'name');
+  return {
+    pivot_columns,
+    pivot_rows,
+    pivot_columns_total: allTotal,
+    dimensions: TABLE_DIMENSIONS.ONE
+  };
+};
 SQLStatisticsUtils.updateTwoDimensionColumns = (pivot_columns, key, _ref) => {
   let {
     isIncludeEmpty,
@@ -450,112 +549,6 @@ pivot_table_total, chart) => {
   });
   return [pivot_columns_total, pivot_table_total];
 };
-SQLStatisticsUtils.oneDimensionTableSQLResult2JavaScript = (chart, sqlRows, chartSQLMap, columnMap, tables) => {
-  const {
-    groupbyColumn
-  } = columnMap;
-  const {
-    summary_type
-  } = chart.config;
-  const {
-    sqlGroupbyColumnKey,
-    sqlSummaryColumnKey
-  } = chartSQLMap;
-  let pivot_columns = [];
-  let pivot_rows = [];
-  const isCount = summary_type === CHART_SUMMARY_TYPE.COUNT;
-  let newSqlRows = sqlRows;
-  if (groupbyColumn.type === CellType.COLLABORATOR) {
-    newSqlRows = _SQLStatisticsUtils.formatedTableSqlRows(chart, sqlRows, chartSQLMap, columnMap, tables);
-  }
-  if (isCount) {
-    let allTotal = 0;
-    newSqlRows.forEach(row => {
-      const total = row[sqlSummaryColumnKey] || 0;
-      allTotal += total;
-      pivot_rows.push({
-        name: _SQLStatisticsUtils.getGroupLabelFromDB(row[sqlGroupbyColumnKey], groupbyColumn, chart.config),
-        rows: [],
-        total: {
-          total
-        }
-      });
-    });
-    return {
-      pivot_columns,
-      pivot_rows: pivot_rows,
-      pivot_columns_total: {
-        total: allTotal
-      }
-    };
-  }
-  const {
-    summarySQLColumnName2ColumnKey,
-    summaryTableColumnKey2Column,
-    summaryTableColumnKey2Method
-  } = chartSQLMap;
-  const summaryColumnKeys = Object.values(summarySQLColumnName2ColumnKey);
-  const sqlSummaryColumnKeys = Object.keys(summarySQLColumnName2ColumnKey);
-  let totalTemplate = {};
-  Object.values(summaryColumnKeys).forEach(key => {
-    const summaryMethod = summaryTableColumnKey2Method[key];
-    totalTemplate[key] = BaseUtils.initTotal(summaryMethod);
-    pivot_columns.push({
-      key
-    });
-  });
-  let allTotal = {
-    ...totalTemplate
-  };
-  newSqlRows.forEach(row => {
-    let rowTotal = {
-      ...totalTemplate
-    };
-    sqlSummaryColumnKeys.forEach(key => {
-      let columnKey = summarySQLColumnName2ColumnKey[key];
-      let summaryColumn = summaryTableColumnKey2Column[columnKey];
-      const summaryMethod = summaryTableColumnKey2Method[columnKey];
-      let value = row[key] || BaseUtils.initTotal(summaryMethod);
-      allTotal[columnKey] = BaseUtils.getSummaryValue({
-        summaryColumn,
-        summaryMethod
-      }, allTotal[columnKey], value);
-      if (BaseUtils.isDateSummaryColumn(summaryColumn)) {
-        rowTotal[columnKey] = value;
-      } else if (BaseUtils.isNumericSummaryColumn(summaryColumn)) {
-        rowTotal[columnKey] = rowTotal[columnKey] + value;
-      }
-    });
-    pivot_rows.push({
-      name: _SQLStatisticsUtils.getGroupLabelFromDB(row[sqlGroupbyColumnKey], groupbyColumn, chart.config),
-      rows: [row],
-      total: rowTotal
-    });
-  });
-  if (pivot_columns.length < 2) {
-    const pivot_column = pivot_columns[0];
-    const {
-      key
-    } = pivot_column;
-    pivot_rows.forEach(row => {
-      row.total = {
-        ...row.total,
-        total: row.total[key]
-      };
-    });
-    allTotal = {
-      ...allTotal,
-      total: allTotal[key]
-    };
-  }
-  BaseUtils.sortCharts(pivot_rows, groupbyColumn, 'name');
-  return {
-    pivot_columns,
-    pivot_rows,
-    pivot_columns_total: allTotal,
-    dimensions: TABLE_DIMENSIONS.ONE
-  };
-};
 SQLStatisticsUtils.twoDimensionTableSQLResult2JavaScript = (chart, sqlRows, chartSQLMap, columnMap, tables) => {
   const {
     groupbyColumn,
@@ -596,14 +589,14 @@ SQLStatisticsUtils.twoDimensionTableSQLResult2JavaScript = (chart, sqlRows, char
     if (BaseUtils.isCollaborator(groupbyColumn)) {
       groupbyColumnCellValueKey = groupbyColumnCellValue || [];
     } else {
-      groupbyColumnCellValueKey = _SQLStatisticsUtils.getGroupLabelFromDB(groupbyColumnCellValue, groupbyColumn, chart.config);
+      groupbyColumnCellValueKey = _SQLStatisticsUtils.getGroupLabelFromDB(groupbyColumnCellValue, groupbyColumn, tables);
     }
     const columnGroupbyColumnCellValue = row[sqlColumnGroupbyColumnKey];
     let columnGroupbyColumnCellValueKey;
     if (BaseUtils.isCollaborator(columnGroupbyColumn)) {
       columnGroupbyColumnCellValueKey = columnGroupbyColumnCellValue || [];
     } else {
-      columnGroupbyColumnCellValueKey = _SQLStatisticsUtils.getGroupLabelFromDB(columnGroupbyColumnCellValue, columnGroupbyColumn, chart.config);
+      columnGroupbyColumnCellValueKey = _SQLStatisticsUtils.getGroupLabelFromDB(columnGroupbyColumnCellValue, columnGroupbyColumn, tables);
     }
     if (BaseUtils.isValidCellValue(columnGroupbyColumnCellValue, groupby_include_empty_cells)) {
       _SQLStatisticsUtils.updateTwoDimensionColumns(pivot_columns, columnGroupbyColumnCellValueKey, {
@@ -653,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,
@@ -665,7 +660,7 @@ SQLStatisticsUtils.twoDimensionTableSQLResult2JavaScript = (chart, sqlRows, char
     isSingleNumericColumn
   };
 };
-SQLStatisticsUtils.basicChartSQLResult2JavaScript = (chart, sqlRows, chartSQLMap, columnMap) => {
+SQLStatisticsUtils.basicChartSQLResult2JavaScript = (chart, sqlRows, chartSQLMap, columnMap, tables) => {
   const {
     config
   } = chart;
@@ -693,7 +688,7 @@ SQLStatisticsUtils.basicChartSQLResult2JavaScript = (chart, sqlRows, chartSQLMap
       formatted_value = getFormattedValue(cellValue, y_axis_summary_column_key, y_axis_summary_method);
     }
     if (BaseUtils.isValidCellValue(cellValue)) {
-      const key = _SQLStatisticsUtils.getGroupLabelFromDB(cellValue, groupbyColumn, chart.config);
+      const key = _SQLStatisticsUtils.getGroupLabelFromDB(cellValue, groupbyColumn, tables);
       if (isGroupbyColumnDataAsAnArray) {
         if (!Array.isArray(key) || key.length === 0) {
           let itemIdx = result.findIndex(v => v.name === null);
@@ -807,7 +802,7 @@ SQLStatisticsUtils.customChartSQLResult2JavaScript = (chart, sqlRows, chartSQLMa
   let result = [];
   sqlRows.forEach(row => {
     const cellValue = row[sqlGroupbyColumnKey];
-    const label = _SQLStatisticsUtils.getGroupLabelFromDB(cellValue, groupbyColumn, chart.config);
+    const label = _SQLStatisticsUtils.getGroupLabelFromDB(cellValue, groupbyColumn, tables);
     const isEmpty = !label;
     const groupItems = [];
     summaryMethods.forEach((summaryMethod, index) => {
@@ -848,7 +843,8 @@ SQLStatisticsUtils.compareSQLResult2Javascript = (chart, sqlRows, chartSQLMap, c
     x_axis_compared_date_range_end,
     y_axis_summary_type,
     y_axis_summary_method,
-    display_increase
+    display_increase,
+    x_axis_date_granularity
   } = config;
   const groupName1 = "".concat(x_axis_date_range_start, " - ").concat(x_axis_date_range_end);
   const groupName2 = "".concat(x_axis_compared_date_range_start, " - ").concat(x_axis_compared_date_range_end);
@@ -857,7 +853,7 @@ SQLStatisticsUtils.compareSQLResult2Javascript = (chart, sqlRows, chartSQLMap, c
   const isAdvanced = y_axis_summary_type === CHART_SUMMARY_TYPE.ADVANCED;
   sqlRows.forEach(item => {
     const name = item[sqlGroupbyColumnKey];
-    const label = _SQLStatisticsUtils.getGroupLabelFromDB(name, groupbyColumn, chart.config);
+    const label = _SQLStatisticsUtils.getGroupLabelFromDB(name, groupbyColumn, tables, x_axis_date_granularity);
     const value = item[sqlSummaryColumnKey];
     if (name >= x_axis_date_range_start && name <= x_axis_date_range_end) {
       const currentValue = dateRangeResult.get(label);
@@ -981,7 +977,7 @@ SQLStatisticsUtils.combinationSQLResult2Javascript = (chart, sqlRows, chartSQLMa
     sqlRows.forEach(row => {
       const cellValue = row[sqlGroupbyColumnKey];
       const summaryValue = row[sqlSummaryColumnKey];
-      const key = _SQLStatisticsUtils.getGroupLabelFromDB(cellValue, groupbyColumn, chart.config);
+      const key = _SQLStatisticsUtils.getGroupLabelFromDB(cellValue, groupbyColumn, tables);
       let valueLeft = row[sqlLeftSummaryColumnKey] || 0;
       let valueRight = row[sqlRightSummaryColumnKey] || 0;
       if (y_axis_left_summary_type === CHART_SUMMARY_TYPE.ADVANCED) {
@@ -1084,7 +1080,7 @@ SQLStatisticsUtils.combinationSQLResult2Javascript = (chart, sqlRows, chartSQLMa
     });
     sqlRows.forEach((item, index) => {
       const cellValue = item[sqlGroupbyColumnKey];
-      const key = _SQLStatisticsUtils.getGroupLabelFromDB(cellValue, groupbyColumn, chart.config);
+      const key = _SQLStatisticsUtils.getGroupLabelFromDB(cellValue, groupbyColumn, tables);
       let valueRight = item[sqlRightSummaryColumnKey] || 0;
       if (y_axis_right_summary_type === CHART_SUMMARY_TYPE.ADVANCED) {
         valueRight = BaseUtils.getPrecisionNumber(valueRight, rightSummaryColumn.data);
@@ -1189,10 +1185,10 @@ SQLStatisticsUtils.groupingTwoDimensionChartSQLResult2JavaScript = (chart, sqlRo
   const isColumnGroupbyColumnDataAsAnArray = !!MULTIPLE_CELL_VALUE_COLUMN_TYPE_MAP[columnGroupbyColumn.type];
   sqlRows.forEach(row => {
     const groupbyColumnCellValue = row[sqlGroupbyColumnKey];
-    const groupbyColumnCellValueKey = _SQLStatisticsUtils.getGroupLabelFromDB(groupbyColumnCellValue, groupbyColumn, chart.config);
+    const groupbyColumnCellValueKey = _SQLStatisticsUtils.getGroupLabelFromDB(groupbyColumnCellValue, groupbyColumn, tables);
     if (BaseUtils.isValidCellValue(groupbyColumnCellValueKey, includeEmpty)) {
       const columnGroupbyColumnCellValue = row[sqlColumnGroupbyColumnKey];
-      const columnGroupbyColumnCellValueKey = _SQLStatisticsUtils.getGroupLabelFromDB(columnGroupbyColumnCellValue, columnGroupbyColumn, chart.config);
+      const columnGroupbyColumnCellValueKey = _SQLStatisticsUtils.getGroupLabelFromDB(columnGroupbyColumnCellValue, columnGroupbyColumn, tables);
       const count = row[sqlSummaryColumnKey];
       if (isGroupbyColumnDataAsAnArray) {
         if (!Array.isArray(groupbyColumnCellValueKey) || groupbyColumnCellValueKey.length === 0) {
@@ -1241,7 +1237,7 @@ SQLStatisticsUtils.groupingChartSQLResult2JavaScript = (chart, sqlRows, chartSQL
     const isGroupbyColumnDataAsAnArray = !!MULTIPLE_CELL_VALUE_COLUMN_TYPE_MAP[groupbyColumn.type];
     sqlRows.forEach(row => {
       const groupbyColumnCellValue = row[sqlGroupbyColumnKey];
-      const groupbyColumnCellValueKey = _SQLStatisticsUtils.getGroupLabelFromDB(groupbyColumnCellValue, groupbyColumn, chart.config);
+      const groupbyColumnCellValueKey = _SQLStatisticsUtils.getGroupLabelFromDB(groupbyColumnCellValue, groupbyColumn, tables);
       if (BaseUtils.isValidCellValue(groupbyColumnCellValueKey, includeEmpty)) {
         Object.keys(summaryColumns).forEach(sqlSummaryColumnName => {
           const {
@@ -1347,7 +1343,7 @@ SQLStatisticsUtils.mirrorMapChartSQLResult2JavaScript = (chart, sqlRows, chartSQ
     const groupData0 = groupData[0] || {};
     const groupData1 = groupData[1] || {};
     sqlRows.forEach(item => {
-      const label = _SQLStatisticsUtils.getGroupLabelFromDB(item[column_key], groupbyColumn, chart.config);
+      const label = _SQLStatisticsUtils.getGroupLabelFromDB(item[column_key], groupbyColumn, tables);
       const groupValue = item[group_column_key];
       const equal2GroupData0 = groupData0.id === groupValue;
       const equal2GroupData1 = groupData1.id === groupValue;

package/dist/utils/column-utils.js

@@ -5,7 +5,21 @@ import { MIRROR_COLUMN_LIST, CHART_SUMMARY_TYPE } from '../constants';
 import { getClientFormulaDisplayString } from './cell-format-utils';
 import { BaseUtils } from './chart-utils';
 
-// is
+// get dtable column options
+export function getColumnOptions(columns) {
+  return columns.map(column => {
+    return {
+      value: column,
+      label: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+        className: "sea-chart-column-icon"
+      }, /*#__PURE__*/React.createElement("i", {
+        className: COLUMNS_ICON_CONFIG[column.type]
+      })), /*#__PURE__*/React.createElement("span", {
+        className: 'select-module select-module-name ml-0'
+      }, column.name))
+    };
+  });
+}
 export const isMapColumn = column => {
   if (!column) return false;
   const {
@@ -76,6 +90,11 @@ export const isWorldMapColumn = column => {
   }
   return false;
 };
+export const getDateColumnFormat = column => {
+  const format = column && column.data && column.data.format ? column.data.format : DEFAULT_DATE_FORMAT;
+  // Old Europe format is D/M/YYYY new format is DD/MM/YYYY
+  return format;
+};
 export const isCheckboxColumn = column => {
   let {
     type,
@@ -93,6 +112,33 @@ export const isCheckboxColumn = column => {
   }
   return type === CellType.CHECKBOX;
 };
+export const getColumnByKey = (columnKey, columns) => {
+  if (!columnKey || !Array.isArray(columns)) {
+    return null;
+  }
+  return columns.find(column => column.key === columnKey);
+};
+export const getColumnByName = (columnName, columns) => {
+  if (!columnName || !Array.isArray(columns)) {
+    return null;
+  }
+  return columns.find(column => column.name === columnName);
+};
+export const getColumnByType = (columnType, columns) => {
+  if (!columnType || !Array.isArray(columns)) {
+    return null;
+  }
+  return columns.find(column => column.type === columnType);
+};
+export const getColumnByIndex = (index, columns) => {
+  if (Array.isArray(columns)) {
+    return columns[index];
+  }
+  if (typeof Immutable !== 'undefined') {
+    return columns.get(index);
+  }
+  return null;
+};
 export const isNameColumn = column => {
   return column.key === '0000';
 };
@@ -113,10 +159,69 @@ export const isUrlColumn = column => {
   }
   return type === CellType.URL;
 };
+export const getLinkColumns = columns => {
+  if (!columns) {
+    return [];
+  }
+  return columns.filter(column => column.type === CellType.LINK && column.data);
+};
+export const calculateFormulaRows = (rows, columns) => {
+  const COMPUTED_COLUMN_TYPES = [CellType.FORMULA, CellType.LINK_FORMULA, CellType.LINK];
+  const formulaColumns = columns.filter(column => COMPUTED_COLUMN_TYPES.includes(column.type));
+  let formula_rows = {};
+  if (formulaColumns.length > 0) {
+    rows.forEach(row => {
+      let formulaRow = {};
+      formulaColumns.forEach(column => formulaRow[column.key] = row[column.key]);
+      formula_rows[row._id] = formulaRow;
+    });
+  }
+  return formula_rows;
+};
+export const handleCascadeColumn = function (optionValue, columnKey, columns, row) {
+  let updated = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {};
+  let processedColumns = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : new Set();
+  // This column has already been processed, avoid circular dependency.
+  if (!Array.isArray(columns) || processedColumns.has(columnKey)) {
+    return updated;
+  }
+  processedColumns.add(columnKey);
+  const singleSelectColumns = columns.filter(column => column.type === CellType.SINGLE_SELECT);
+  for (let i = 0; i < singleSelectColumns.length; i++) {
+    const singleSelectColumn = singleSelectColumns[i];
+    const {
+      data: {
+        cascade_column_key,
+        cascade_settings
+      }
+    } = singleSelectColumn;
+    if (cascade_column_key === columnKey) {
+      const {
+        key: childColumnKey
+      } = singleSelectColumn;
+      const childColumnOptions = cascade_settings[optionValue];
+      const childColumnCellValue = row[childColumnKey];
+      const cellValueInOptions = childColumnOptions && childColumnOptions.includes(childColumnCellValue);
+      if (!cellValueInOptions) {
+        updated[childColumnKey] = '';
+        handleCascadeColumn('', childColumnKey, columns, row, updated, processedColumns);
+      }
+    }
+  }
+  return updated;
+};
 export const isFrozen = column => {
   if (!column) return false;
   return column.frozen === true;
 };
+export const findLastFrozenColumnIndex = columns => {
+  for (let i = 0; i < columns.length; i++) {
+    if (isFrozen(columns[i])) {
+      return i;
+    }
+  }
+  return -1;
+};
 export const isStatisticMapColumn = column => {
   if (!column) return false;
   const {
@@ -191,73 +296,6 @@ export const isStatisticMirrorColumn = column => {
   if (!column) return false;
   return MIRROR_COLUMN_LIST.includes(column.type);
 };
-export const islinkDateFormula = column => {
-  if (column) {
-    const {
-      type,
-      data
-    } = column;
-    const {
-      array_type
-    } = data || {};
-    if (type === 'link-formula' && array_type === 'date') return true;
-  }
-  return false;
-};
-
-// get
-export function getColumnOptions(columns) {
-  return columns.map(column => {
-    return {
-      value: column,
-      label: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
-        className: "sea-chart-column-icon"
-      }, /*#__PURE__*/React.createElement("i", {
-        className: COLUMNS_ICON_CONFIG[column.type]
-      })), /*#__PURE__*/React.createElement("span", {
-        className: 'select-module select-module-name ml-0'
-      }, column.name))
-    };
-  });
-}
-export const getDateColumnFormat = column => {
-  const format = column && column.data && column.data.format ? column.data.format : DEFAULT_DATE_FORMAT;
-  // Old Europe format is D/M/YYYY new format is DD/MM/YYYY
-  return format;
-};
-export const getColumnByKey = (columnKey, columns) => {
-  if (!columnKey || !Array.isArray(columns)) {
-    return null;
-  }
-  return columns.find(column => column.key === columnKey);
-};
-export const getColumnByName = (columnName, columns) => {
-  if (!columnName || !Array.isArray(columns)) {
-    return null;
-  }
-  return columns.find(column => column.name === columnName);
-};
-export const getColumnByType = (columnType, columns) => {
-  if (!columnType || !Array.isArray(columns)) {
-    return null;
-  }
-  return columns.find(column => column.type === columnType);
-};
-export const getColumnByIndex = (index, columns) => {
-  if (Array.isArray(columns)) {
-    return columns[index];
-  }
-  if (typeof Immutable !== 'undefined') {
-    return columns.get(index);
-  }
-  return null;
-};
-export const getLinkColumns = columns => {
-  if (!columns) {
-    return [];
-  }
-  return columns.filter(column => column.type === CellType.LINK && column.data);
-};
 export const getColorFromSingleSelectColumn = (column, target) => {
   let {
     type: columnType,
@@ -406,12 +444,6 @@ export const getSqlGroup = (column, groupBy) => {
   }
   return validColumnName;
 };
-export function getSelectColumnOptions(column) {
-  if (!column || !column.data || !Array.isArray(column.data.options)) {
-    return [];
-  }
-  return column.data.options;
-}
 
 // for stacked bar, stacked horizontal bar
 export const sortDataByGroupSum = (data, sortType) => {
@@ -441,56 +473,9 @@ export const formatNumericValue = function (value) {
   value = value || 0;
   return parseFloat(value.toFixed(precision));
 };
-export const calculateFormulaRows = (rows, columns) => {
-  const COMPUTED_COLUMN_TYPES = [CellType.FORMULA, CellType.LINK_FORMULA, CellType.LINK];
-  const formulaColumns = columns.filter(column => COMPUTED_COLUMN_TYPES.includes(column.type));
-  let formula_rows = {};
-  if (formulaColumns.length > 0) {
-    rows.forEach(row => {
-      let formulaRow = {};
-      formulaColumns.forEach(column => formulaRow[column.key] = row[column.key]);
-      formula_rows[row._id] = formulaRow;
-    });
-  }
-  return formula_rows;
-};
-export const handleCascadeColumn = function (optionValue, columnKey, columns, row) {
-  let updated = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {};
-  let processedColumns = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : new Set();
-  // This column has already been processed, avoid circular dependency.
-  if (!Array.isArray(columns) || processedColumns.has(columnKey)) {
-    return updated;
-  }
-  processedColumns.add(columnKey);
-  const singleSelectColumns = columns.filter(column => column.type === CellType.SINGLE_SELECT);
-  for (let i = 0; i < singleSelectColumns.length; i++) {
-    const singleSelectColumn = singleSelectColumns[i];
-    const {
-      data: {
-        cascade_column_key,
-        cascade_settings
-      }
-    } = singleSelectColumn;
-    if (cascade_column_key === columnKey) {
-      const {
-        key: childColumnKey
-      } = singleSelectColumn;
-      const childColumnOptions = cascade_settings[optionValue];
-      const childColumnCellValue = row[childColumnKey];
-      const cellValueInOptions = childColumnOptions && childColumnOptions.includes(childColumnCellValue);
-      if (!cellValueInOptions) {
-        updated[childColumnKey] = '';
-        handleCascadeColumn('', childColumnKey, columns, row, updated, processedColumns);
-      }
-    }
-  }
-  return updated;
-};
-export const findLastFrozenColumnIndex = columns => {
-  for (let i = 0; i < columns.length; i++) {
-    if (isFrozen(columns[i])) {
-      return i;
-    }
+export function getSelectColumnOptions(column) {
+  if (!column || !column.data || !Array.isArray(column.data.options)) {
+    return [];
   }
-  return -1;
-};
+  return column.data.options;
+}

package/dist/view/index.css

@@ -13,7 +13,7 @@
 }
 
 .sea-chart-formatter.error {
-  color: red;
+  color: #666666;
 }
 
 .sea-chart-formatter .sea-chart-formatter-container {

package/dist/view/wrapper/index.js

@@ -84,7 +84,8 @@ const Wrapper = _ref => {
           return /*#__PURE__*/React.createElement(Table, Object.assign({}, baseProps, {
             summaryColumns: summary_columns,
             summaryMethod: summary_method,
-            chartTableColumns: chartTableColumns
+            chartTableColumns: chartTableColumns,
+            isCalculateByView: isCalculateByView
           }));
         }
       case CHART_TYPE.COMBINATION:

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/two-dimension-table.js

@@ -126,6 +126,22 @@ class TwoDimensionTable extends PureComponent {
         total
       }, selectedCell);
     };
+    this.renderByView = (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,
@@ -133,7 +149,8 @@ class TwoDimensionTable extends PureComponent {
         selectedCell,
         summaryColumn,
         summaryMethod,
-        chart
+        chart,
+        isCalculateByView
       } = this.props;
       const {
         display_total = true,
@@ -145,7 +162,7 @@ class TwoDimensionTable extends PureComponent {
         pivot_columns,
         pivot_columns_total,
         pivot_table_total,
-        summary_columns
+        summary_columns: summaryColumns
       } = result;
       const {
         rowIdx: selectRowIdx,
@@ -232,10 +249,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')
+          }, !isCalculateByView && 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", {
@@ -251,14 +268,14 @@ class TwoDimensionTable extends PureComponent {
                 'selected-pivot-cell-border': isSelectedCell
               })
             }));
-          }), !total && (summary_columns === null || summary_columns === void 0 ? void 0 : summary_columns.map(() => {
+          }), !isCalculateByView && !total && (summaryColumns === null || summaryColumns === void 0 ? void 0 : summaryColumns.map(() => {
             return /*#__PURE__*/React.createElement("div", {
               key: "table-cell-".concat(cellIdx),
               className: classnames('pivot-cell', {
                 'pivot-empty-cell': true
               })
             }, /*#__PURE__*/React.createElement("i", null));
-          }))));
+          })), isCalculateByView && this.renderByView(total, display_empty, cellIdx, isSelectedCell, isSelectedCellTop, isSelectedCellLeft)));
         }), display_total && /*#__PURE__*/React.createElement("td", {
           className: classnames('pivot-cell', {
             'pivot-empty-cell': !isValidSummaryDisplayValue,

package/package.json

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