sea-chart 2.0.37 → 2.0.38

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

@@ -1,109 +1,99 @@
-"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 _dayjs = _interopRequireDefault(require("dayjs"));
-var _dtableUtils = require("dtable-utils");
-var _lodash = require("lodash");
-var _lodashEs = require("lodash-es");
-var _constants = require("../../constants");
-var _sql = require("../sql");
-var _cellFormatUtils = require("../cell-format-utils");
-var _column2SqlColumn = require("../sql/column-2-sql-column");
-var _columnUtils = require("../column-utils");
-var _trendUtils = require("../trend-utils");
-var _intl = _interopRequireDefault(require("../../intl"));
-var _dateTranslate = require("../date-translate");
-var _baseUtils = _interopRequireWildcard(require("./base-utils"));
 var _SQLStatisticsUtils;
+import dayjs from 'dayjs';
+import { CellType, MULTIPLE_CELL_VALUE_COLUMN_TYPE_MAP, getFormulaDisplayString, getPrecisionNumber, getTableById, getTableColumnByKey, isNumber } from 'dtable-utils';
+import { isObject } from 'lodash';
+import { cloneDeep } from 'lodash-es';
+import { CHART_SUMMARY_TYPE, CHART_TYPE, SUPPORT_DATA_SORT_CHART_TYPES, TABLE_DIMENSIONS, Y_AXIS_TYPE_PREFIX, STYLE_COLORS, TREND_TYPES, CHART_STYLE_COLORS, MAP_CHART_TYPES } from '../../constants';
+import { chartColumn2SqlColumn, summaryMethodColumn2SqlColumn } from '../sql';
+import { getClientLinkDisplayString } from '../cell-format-utils';
+import { column2SqlColumn } from '../sql/column-2-sql-column';
+import { formatNumericValue, getFormattedValue, getSummaryResult } from '../column-utils';
+import { getCompareDate } from '../trend-utils';
+import intl from '../../intl';
+import { convertQuarterToDate } from '../date-translate';
+import BaseUtils, { findIfColumnDataIsArray } from './base-utils';
 class SQLStatisticsUtils {}
 _SQLStatisticsUtils = SQLStatisticsUtils;
 SQLStatisticsUtils.DATA_SOURCE = 'sql_statistics';
 SQLStatisticsUtils.getGroupLabelFromDB = async (cellValue, column, chart, isPivot) => {
-  const dateGranularity = _baseUtils.default.getDateGranularityByType(chart);
   const {
     type,
     data
   } = column;
   switch (type) {
-    case _dtableUtils.CellType.TEXT:
+    case CellType.TEXT:
       {
         return cellValue || null;
       }
-    case _dtableUtils.CellType.DATE:
-    case _dtableUtils.CellType.CTIME:
-    case _dtableUtils.CellType.MTIME:
+    case CellType.DATE:
+    case CellType.CTIME:
+    case CellType.MTIME:
       {
-        // handled in sql query result
         return cellValue;
       }
-    case _dtableUtils.CellType.NUMBER:
+    case CellType.NUMBER:
       {
         if (!cellValue && cellValue !== 0) return null;
-        return (0, _dtableUtils.getPrecisionNumber)(cellValue, data);
+        return getPrecisionNumber(cellValue, data);
       }
-    case _dtableUtils.CellType.SINGLE_SELECT:
+    case CellType.SINGLE_SELECT:
       {
         let isInvalidValue = data && data.options && data.options.findIndex(opt => opt.id === cellValue) < 0;
         return isInvalidValue ? null : cellValue;
       }
-    case _dtableUtils.CellType.MULTIPLE_SELECT:
+    case CellType.MULTIPLE_SELECT:
       {
         let options = data && data.options;
         if (!Array.isArray(options) || options.length === 0) return [];
         if (!Array.isArray(cellValue) || cellValue.length === 0) return [];
         return cellValue.filter(optionId => options.find(option => option.id === optionId));
       }
-    case _dtableUtils.CellType.COLLABORATOR:
+    case CellType.COLLABORATOR:
       {
         if (!Array.isArray(cellValue) || cellValue.length === 0) return [];
         return cellValue;
       }
-    case _dtableUtils.CellType.CREATOR:
-    case _dtableUtils.CellType.LAST_MODIFIER:
+    case CellType.CREATOR:
+    case CellType.LAST_MODIFIER:
       {
         return cellValue ? cellValue : null;
       }
-    case _dtableUtils.CellType.GEOLOCATION:
+    case CellType.GEOLOCATION:
+      {
+        return cellValue || null;
+      }
+    case CellType.FORMULA:
       {
+        if (Array.isArray(cellValue)) {
+          const validValue = getFormulaDisplayString(cellValue, data) || [];
+          return validValue;
+        }
         return cellValue || null;
       }
-    case _dtableUtils.CellType.FORMULA:
-    case _dtableUtils.CellType.LINK_FORMULA:
+    case CellType.LINK_FORMULA:
       {
         const {
-          array_type,
           result_type
         } = data || {};
-        const validValue = (0, _dtableUtils.getFormulaDisplayString)(cellValue, data) || [];
-        if (array_type === 'date' && (cellValue === null || cellValue === void 0 ? void 0 : cellValue.length) === 1) {
-          if (!dateGranularity) return validValue;
-          if (dateGranularity.toUpperCase() === 'QUARTER') return _dtableUtils.DateUtils.getDateByGranularity(validValue, 'QUARTAR');
-          return _dtableUtils.DateUtils.getDateByGranularity(validValue, dateGranularity);
-        }
-
         // handles mutiple select
         if (result_type === 'array') {
           return cellValue;
         }
+        const validValue = getFormulaDisplayString(cellValue, data) || [];
         if (!validValue && validValue !== 0) {
           return null;
         }
         return validValue;
       }
-    case _dtableUtils.CellType.LINK:
+    case CellType.LINK:
       {
-        return Array.isArray(cellValue) ? cellValue.map(linked => (0, _cellFormatUtils.getClientLinkDisplayString)([linked], data, {})) : [];
+        return Array.isArray(cellValue) ? cellValue.map(linked => getClientLinkDisplayString([linked], data, {})) : [];
       }
-    case _dtableUtils.CellType.CHECKBOX:
+    case CellType.CHECKBOX:
       {
         return String(cellValue) === 'true' ? 'Checked' : 'Unchecked';
       }
-    case _dtableUtils.CellType.RATE:
+    case CellType.RATE:
       {
         return cellValue ? String(cellValue) : null;
       }
@@ -178,7 +168,7 @@ SQLStatisticsUtils.updateTwoDimensionRows = (chart, pivot_rows, pivot_columns, i
   const {
     summary_type
   } = chart.config;
-  const isCount = summary_type === _constants.CHART_SUMMARY_TYPE.COUNT;
+  const isCount = summary_type === CHART_SUMMARY_TYPE.COUNT;
   const {
     sqlSummaryColumnKey,
     summarySQLColumnName2ColumnKey = {}
@@ -198,11 +188,11 @@ SQLStatisticsUtils.updateTwoDimensionRows = (chart, pivot_rows, pivot_columns, i
       let {
         key
       } = c;
-      if (_baseUtils.default.isSameGroup(isColumnDataAsAnArray, cellValue, key)) {
+      if (BaseUtils.isSameGroup(isColumnDataAsAnArray, cellValue, key)) {
         if (cells[key]) {
           cells[key].rows.push(row);
           if (isCount) {
-            if (_baseUtils.default.isCollaboratorColumnOrMultipleColumn(columnMap)) {
+            if (BaseUtils.isCollaboratorColumnOrMultipleColumn(columnMap)) {
               cells[key].total = total + row[sqlSummaryColumnKey];
             } else {
               cells[key].total = row[sqlSummaryColumnKey];
@@ -214,10 +204,10 @@ SQLStatisticsUtils.updateTwoDimensionRows = (chart, pivot_rows, pivot_columns, i
               const nextValue = row[currentSqlName];
               // use columnKey to find current value
               const currentValue = Object.values(cells[key].total).find(item => item[2] === columnKey)[1];
-              const computedValue = _baseUtils.default.getSummaryValue({
+              const computedValue = BaseUtils.getSummaryValue({
                 summaryMethod: current.summary_method.toUpperCase(),
                 summaryColumn: current.column
-              }, currentValue, nextValue, _baseUtils.default.isCollaboratorColumnOrMultipleColumn(columnMap));
+              }, currentValue, nextValue, BaseUtils.isCollaboratorColumnOrMultipleColumn(columnMap));
               const columnName = current.column.name;
 
               // keep column key to find currentValue on updating
@@ -255,7 +245,7 @@ SQLStatisticsUtils.updateTwoDimensionRows = (chart, pivot_rows, pivot_columns, i
     } else {
       updatedPivotRow.total = Object.values(cells).reduce((acc, item) => {
         item.total.forEach(t => {
-          (0, _dtableUtils.isNumber)(t[1]) && (acc += t[1]);
+          isNumber(t[1]) && (acc += t[1]);
         });
         return acc;
       }, 0);
@@ -271,7 +261,7 @@ SQLStatisticsUtils.updateTwoDimensionRows = (chart, pivot_rows, pivot_columns, i
     let {
       key
     } = c;
-    if (_baseUtils.default.isSameGroup(isColumnDataAsAnArray, cellValue, key)) {
+    if (BaseUtils.isSameGroup(isColumnDataAsAnArray, cellValue, key)) {
       let total;
       if (isCount) {
         total = row[sqlSummaryColumnKey];
@@ -296,9 +286,9 @@ SQLStatisticsUtils.updateTwoDimensionRows = (chart, pivot_rows, pivot_columns, i
   const cellList = Object.values(cells);
   total = cellList.reduce((acc, item) => {
     let num;
-    if ((0, _lodash.isObject)(item.total)) {
+    if (isObject(item.total)) {
       num = item.total.reduce((acc, item) => {
-        (0, _dtableUtils.isNumber)(item[1]) && (acc += item[1]);
+        isNumber(item[1]) && (acc += item[1]);
         return acc;
       }, 0);
     } else {
@@ -328,7 +318,7 @@ SQLStatisticsUtils.getAndUpdateTwoDimensionTotal = (pivot_columns_total, pivot_c
       if (cell) {
         let pivot_column_total = pivot_columns_total && pivot_columns_total[key] ? pivot_columns_total[key] : 0;
         const currentCellTotal = Array.isArray(cell.total) ? cell.total.reduce((acc, item) => {
-          (0, _dtableUtils.isNumber)(item[1]) && (acc += item[1]);
+          isNumber(item[1]) && (acc += item[1]);
           return acc;
         }, 0) : parseInt(cell.total);
         pivot_columns_total[key] = pivot_column_total + currentCellTotal;
@@ -350,22 +340,22 @@ SQLStatisticsUtils.oneDimensionTableSQLResult2JavaScript = async (chart, sqlRows
   } = chartSQLMap;
   let pivot_columns = [];
   let pivot_rows = [];
-  const isCount = summary_type === _constants.CHART_SUMMARY_TYPE.COUNT;
+  const isCount = summary_type === CHART_SUMMARY_TYPE.COUNT;
 
   // if key is an array, handle it here ,currently only handle collaborator and multiple select
   // MULTIPLE_CELL_VALUE_COLUMN_TYPE = [CellType.COLLABORATOR, CellType.MULTIPLE_SELECT, CellType.LINK]
-  const isGroupByColumnLinkFormula = groupbyColumn.type === _dtableUtils.CellType.LINK_FORMULA;
+  const isGroupByColumnLinkFormula = groupbyColumn.type === CellType.LINK_FORMULA;
   let newSqlRows = sqlRows;
   if (isGroupByColumnLinkFormula) {
     const {
       array_type
     } = groupbyColumn.data;
-    if ([_dtableUtils.CellType.COLLABORATOR, _dtableUtils.CellType.MULTIPLE_SELECT].includes(array_type)) {
-      newSqlRows = _baseUtils.default.formatedTableSqlRowsByCollaboratorAndMultiple(chart, sqlRows, chartSQLMap, columnMap);
+    if ([CellType.COLLABORATOR, CellType.MULTIPLE_SELECT].includes(array_type)) {
+      newSqlRows = BaseUtils.formatedTableSqlRowsByCollaboratorAndMultiple(chart, sqlRows, chartSQLMap, columnMap);
     }
   }
-  if ([_dtableUtils.CellType.COLLABORATOR, _dtableUtils.CellType.MULTIPLE_SELECT].includes(groupbyColumn.type)) {
-    newSqlRows = _baseUtils.default.formatedTableSqlRowsByCollaboratorAndMultiple(chart, sqlRows, chartSQLMap, columnMap);
+  if ([CellType.COLLABORATOR, CellType.MULTIPLE_SELECT].includes(groupbyColumn.type)) {
+    newSqlRows = BaseUtils.formatedTableSqlRowsByCollaboratorAndMultiple(chart, sqlRows, chartSQLMap, columnMap);
   }
   if (isCount) {
     let allTotal = 0;
@@ -381,7 +371,7 @@ SQLStatisticsUtils.oneDimensionTableSQLResult2JavaScript = async (chart, sqlRows
         }
       });
     }
-    if (groupbyColumn.type === _dtableUtils.CellType.LINK_FORMULA && groupbyColumn.data.array_type === 'date') {
+    if (groupbyColumn.type === CellType.LINK_FORMULA && groupbyColumn.data.array_type === 'date') {
       pivot_rows = pivot_rows.reduce((acc, item) => {
         const {
           name,
@@ -398,7 +388,7 @@ SQLStatisticsUtils.oneDimensionTableSQLResult2JavaScript = async (chart, sqlRows
         return acc;
       }, []);
     }
-    _baseUtils.default.sortCharts(pivot_rows, groupbyColumn, 'name', true);
+    BaseUtils.sortCharts(pivot_rows, groupbyColumn, 'name', true);
     return {
       pivot_columns,
       pivot_rows: pivot_rows,
@@ -417,7 +407,7 @@ SQLStatisticsUtils.oneDimensionTableSQLResult2JavaScript = async (chart, sqlRows
   let totalTemplate = {};
   Object.values(summaryColumnKeys).forEach(key => {
     const summaryMethod = summaryTableColumnKey2Method[key];
-    totalTemplate[key] = _baseUtils.default.initTotal(summaryMethod);
+    totalTemplate[key] = BaseUtils.initTotal(summaryMethod);
     pivot_columns.push({
       key
     });
@@ -434,14 +424,14 @@ SQLStatisticsUtils.oneDimensionTableSQLResult2JavaScript = async (chart, sqlRows
       let columnKey = summarySQLColumnName2ColumnKey[key];
       let summaryColumn = summaryTableColumnKey2Column[columnKey];
       const summaryMethod = summaryTableColumnKey2Method[columnKey];
-      let value = row[key] || _baseUtils.default.initTotal(summaryMethod);
-      allTotal[columnKey] = _baseUtils.default.getSummaryValue({
+      let value = row[key] || BaseUtils.initTotal(summaryMethod);
+      allTotal[columnKey] = BaseUtils.getSummaryValue({
         summaryColumn,
         summaryMethod
       }, allTotal[columnKey], value);
-      if (_baseUtils.default.isDateSummaryColumn(summaryColumn)) {
+      if (BaseUtils.isDateSummaryColumn(summaryColumn)) {
         rowTotal[columnKey] = value;
-      } else if (_baseUtils.default.isNumericSummaryColumn(summaryColumn)) {
+      } else if (BaseUtils.isNumericSummaryColumn(summaryColumn)) {
         rowTotal[columnKey] = rowTotal[columnKey] + value;
       }
     });
@@ -451,7 +441,7 @@ SQLStatisticsUtils.oneDimensionTableSQLResult2JavaScript = async (chart, sqlRows
       total: rowTotal
     });
   }
-  if (groupbyColumn.type === _dtableUtils.CellType.LINK_FORMULA && groupbyColumn.data.array_type === 'date') {
+  if (groupbyColumn.type === CellType.LINK_FORMULA && groupbyColumn.data.array_type === 'date') {
     pivot_rows = pivot_rows.reduce((acc, item) => {
       const {
         name,
@@ -484,12 +474,12 @@ SQLStatisticsUtils.oneDimensionTableSQLResult2JavaScript = async (chart, sqlRows
       total: allTotal[key]
     };
   }
-  _baseUtils.default.sortCharts(pivot_rows, groupbyColumn, 'name', true);
+  BaseUtils.sortCharts(pivot_rows, groupbyColumn, 'name', true);
   return {
     pivot_columns,
     pivot_rows,
     pivot_columns_total: allTotal,
-    dimensions: _constants.TABLE_DIMENSIONS.ONE
+    dimensions: TABLE_DIMENSIONS.ONE
   };
 };
 SQLStatisticsUtils.twoDimensionTableSQLResult2JavaScript = async (chart, sqlRows, chartSQLMap, columnMap, tables) => {
@@ -517,8 +507,8 @@ SQLStatisticsUtils.twoDimensionTableSQLResult2JavaScript = async (chart, sqlRows
   let newSqlRows = sqlRows;
 
   // handle LINK_FORMULA
-  const isGroupByColumnLinkFormula = groupbyColumn.type === _dtableUtils.CellType.LINK_FORMULA;
-  const isColumnGroupByColumnLinkFormula = columnGroupbyColumn.type === _dtableUtils.CellType.LINK_FORMULA;
+  const isGroupByColumnLinkFormula = groupbyColumn.type === CellType.LINK_FORMULA;
+  const isColumnGroupByColumnLinkFormula = columnGroupbyColumn.type === CellType.LINK_FORMULA;
   let isRowGroupbyColumnDataAsAnArray, isGroupbyColumnDataAsAnArray;
 
   // Group by column
@@ -526,14 +516,14 @@ SQLStatisticsUtils.twoDimensionTableSQLResult2JavaScript = async (chart, sqlRows
   if (isGroupByColumnLinkFormula && groupbyColumn.data.array_type !== 'date') {
     isGroupbyColumnDataAsAnArray = true;
   } else {
-    isGroupbyColumnDataAsAnArray = !!_dtableUtils.MULTIPLE_CELL_VALUE_COLUMN_TYPE_MAP[groupbyColumn.type];
+    isGroupbyColumnDataAsAnArray = !!MULTIPLE_CELL_VALUE_COLUMN_TYPE_MAP[groupbyColumn.type];
   }
 
   // column group by column
   if (isColumnGroupByColumnLinkFormula && groupbyColumn.data.array_type !== 'date') {
     isRowGroupbyColumnDataAsAnArray = true;
   } else {
-    isRowGroupbyColumnDataAsAnArray = !!_dtableUtils.MULTIPLE_CELL_VALUE_COLUMN_TYPE_MAP[columnGroupbyColumn.type];
+    isRowGroupbyColumnDataAsAnArray = !!MULTIPLE_CELL_VALUE_COLUMN_TYPE_MAP[columnGroupbyColumn.type];
   }
 
   // if key is an array, handle it here ,currently only handle collaborator and multiple select
@@ -542,12 +532,12 @@ SQLStatisticsUtils.twoDimensionTableSQLResult2JavaScript = async (chart, sqlRows
     const {
       array_type
     } = groupbyColumn.data;
-    if ([_dtableUtils.CellType.COLLABORATOR, _dtableUtils.CellType.MULTIPLE_SELECT].includes(array_type)) {
-      newSqlRows = _baseUtils.default.formatedTableSqlRowsByCollaboratorAndMultiple(chart, sqlRows, chartSQLMap, columnMap);
+    if ([CellType.COLLABORATOR, CellType.MULTIPLE_SELECT].includes(array_type)) {
+      newSqlRows = BaseUtils.formatedTableSqlRowsByCollaboratorAndMultiple(chart, sqlRows, chartSQLMap, columnMap);
     }
   }
-  if ([_dtableUtils.CellType.COLLABORATOR, _dtableUtils.CellType.MULTIPLE_SELECT].includes(groupbyColumn.type)) {
-    newSqlRows = _baseUtils.default.formatedTableSqlRowsByCollaboratorAndMultiple(chart, sqlRows, chartSQLMap, columnMap);
+  if ([CellType.COLLABORATOR, CellType.MULTIPLE_SELECT].includes(groupbyColumn.type)) {
+    newSqlRows = BaseUtils.formatedTableSqlRowsByCollaboratorAndMultiple(chart, sqlRows, chartSQLMap, columnMap);
   }
   let pivot_columns = [];
   let pivot_rows = [];
@@ -558,12 +548,12 @@ SQLStatisticsUtils.twoDimensionTableSQLResult2JavaScript = async (chart, sqlRows
   for (const row of newSqlRows) {
     const columnGroupbyColumnCellValue = row[sqlColumnGroupbyColumnKey];
     let columnGroupbyColumnCellValueKey;
-    if (_baseUtils.default.isCollaborator(columnGroupbyColumn)) {
+    if (BaseUtils.isCollaborator(columnGroupbyColumn)) {
       columnGroupbyColumnCellValueKey = columnGroupbyColumnCellValue || [];
     } else {
       columnGroupbyColumnCellValueKey = await _SQLStatisticsUtils.getGroupLabelFromDB(columnGroupbyColumnCellValue, columnGroupbyColumn, chart.config, true);
     }
-    if (_baseUtils.default.isValidCellValue(columnGroupbyColumnCellValue, groupby_include_empty_cells)) {
+    if (BaseUtils.isValidCellValue(columnGroupbyColumnCellValue, groupby_include_empty_cells)) {
       _SQLStatisticsUtils.updateTwoDimensionColumns(pivot_columns, columnGroupbyColumnCellValueKey, {
         isIncludeEmpty: groupby_include_empty_cells,
         isCellValueAsAnArray: isRowGroupbyColumnDataAsAnArray
@@ -573,19 +563,19 @@ SQLStatisticsUtils.twoDimensionTableSQLResult2JavaScript = async (chart, sqlRows
   for (const row of newSqlRows) {
     const groupbyColumnCellValue = row[sqlGroupbyColumnKey];
     let groupbyColumnCellValueKey;
-    if (_baseUtils.default.isCollaborator(groupbyColumn)) {
+    if (BaseUtils.isCollaborator(groupbyColumn)) {
       groupbyColumnCellValueKey = groupbyColumnCellValue || [];
     } else {
       groupbyColumnCellValueKey = await _SQLStatisticsUtils.getGroupLabelFromDB(groupbyColumnCellValue, groupbyColumn, chart.config, true);
     }
     const columnGroupbyColumnCellValue = row[sqlColumnGroupbyColumnKey];
     let columnGroupbyColumnCellValueKey;
-    if (_baseUtils.default.isCollaborator(columnGroupbyColumn)) {
+    if (BaseUtils.isCollaborator(columnGroupbyColumn)) {
       columnGroupbyColumnCellValueKey = columnGroupbyColumnCellValue || [];
     } else {
       columnGroupbyColumnCellValueKey = await _SQLStatisticsUtils.getGroupLabelFromDB(columnGroupbyColumnCellValue, columnGroupbyColumn, chart.config, true);
     }
-    if (_baseUtils.default.isValidCellValue(groupbyColumnCellValue, groupby_include_empty_cells)) {
+    if (BaseUtils.isValidCellValue(groupbyColumnCellValue, groupby_include_empty_cells)) {
       // data is an array is handled previously, but to keep capability, still use old code
       if (isGroupbyColumnDataAsAnArray) {
         if ((!Array.isArray(groupbyColumnCellValueKey) || groupbyColumnCellValueKey.length === 0) && groupby_include_empty_cells) {
@@ -622,15 +612,15 @@ SQLStatisticsUtils.twoDimensionTableSQLResult2JavaScript = async (chart, sqlRows
   }
 
   // update Collaborator and Multiple mean value
-  if (_baseUtils.default.isCollaboratorColumnOrMultipleColumn(columnMap)) {
-    const new_pivot_rows = _baseUtils.default.updateCollaboratorAndMultipleAvg(pivot_rows, [singleNumeriColumnWithMethod, ...multipleNumericColumnsWithMethod]);
+  if (BaseUtils.isCollaboratorColumnOrMultipleColumn(columnMap)) {
+    const new_pivot_rows = BaseUtils.updateCollaboratorAndMultipleAvg(pivot_rows, [singleNumeriColumnWithMethod, ...multipleNumericColumnsWithMethod]);
     pivot_rows = new_pivot_rows;
   }
   [pivot_columns_total, pivot_table_total] = _SQLStatisticsUtils.getAndUpdateTwoDimensionTotal(pivot_columns_total, pivot_columns, pivot_rows, pivot_table_total, chart);
-  _baseUtils.default.sortCharts(pivot_rows, groupbyColumn, 'name', true);
-  _baseUtils.default.sortCharts(pivot_columns, columnGroupbyColumn, 'key', true);
-  if ((groupbyColumn === null || groupbyColumn === void 0 ? void 0 : groupbyColumn.type) === _dtableUtils.CellType.COLLABORATOR) {
-    pivot_rows = _baseUtils.default.mergePivotTableSameCollaborator(pivot_rows);
+  BaseUtils.sortCharts(pivot_rows, groupbyColumn, 'name', true);
+  BaseUtils.sortCharts(pivot_columns, columnGroupbyColumn, 'key', true);
+  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 {
@@ -639,7 +629,7 @@ SQLStatisticsUtils.twoDimensionTableSQLResult2JavaScript = async (chart, sqlRows
     pivot_rows,
     pivot_columns_total,
     pivot_table_total,
-    dimensions: _constants.TABLE_DIMENSIONS.TWO,
+    dimensions: TABLE_DIMENSIONS.TWO,
     isSingleNumericColumn
   };
 };
@@ -660,7 +650,7 @@ SQLStatisticsUtils.basicChartSQLResult2JavaScript = async (chart, sqlRows, chart
     groupbyColumn,
     summaryColumn
   } = columnMap;
-  const isGroupbyColumnDataAsAnArray = (0, _baseUtils.findIfColumnDataIsArray)(groupbyColumn);
+  const isGroupbyColumnDataAsAnArray = findIfColumnDataIsArray(groupbyColumn);
   const {
     sqlGroupbyColumnKey,
     sqlSummaryColumnKey
@@ -670,10 +660,10 @@ SQLStatisticsUtils.basicChartSQLResult2JavaScript = async (chart, sqlRows, chart
     const cellValue = row[sqlGroupbyColumnKey];
     const summaryValue = row[sqlSummaryColumnKey];
     let formatted_value = cellValue;
-    if (y_axis_summary_type === _constants.CHART_SUMMARY_TYPE.ADVANCED) {
-      formatted_value = (0, _columnUtils.getFormattedValue)(cellValue, y_axis_summary_column_key, y_axis_summary_method);
+    if (y_axis_summary_type === CHART_SUMMARY_TYPE.ADVANCED) {
+      formatted_value = getFormattedValue(cellValue, y_axis_summary_column_key, y_axis_summary_method);
     }
-    if (_baseUtils.default.isValidCellValue(cellValue, x_axis_include_empty_cells || groupby_include_empty_cells)) {
+    if (BaseUtils.isValidCellValue(cellValue, x_axis_include_empty_cells || groupby_include_empty_cells)) {
       const key = await _SQLStatisticsUtils.getGroupLabelFromDB(cellValue, groupbyColumn, chart.config);
       if (isGroupbyColumnDataAsAnArray) {
         if (!Array.isArray(key) || key.length === 0) {
@@ -731,11 +721,11 @@ SQLStatisticsUtils.basicChartSQLResult2JavaScript = async (chart, sqlRows, chart
       }
     }
   }
-  _baseUtils.default.sortCharts(result, groupbyColumn, 'name');
-  _baseUtils.default.updateTableViewList(result, groupbyColumn, 'name', 'color', false, true);
-  _baseUtils.default.updateSummaryValuePrecision(result, summaryColumn, 'value');
-  if (_constants.SUPPORT_DATA_SORT_CHART_TYPES.includes(type) && sort_type) {
-    _baseUtils.default.sortChartData(result, sort_type);
+  BaseUtils.sortCharts(result, groupbyColumn, 'name');
+  await BaseUtils.updateTableViewList(result, groupbyColumn, 'name', 'color', false, true);
+  BaseUtils.updateSummaryValuePrecision(result, summaryColumn, 'value');
+  if (SUPPORT_DATA_SORT_CHART_TYPES.includes(type) && sort_type) {
+    BaseUtils.sortChartData(result, sort_type);
     return result;
   }
   return result;
@@ -764,28 +754,28 @@ SQLStatisticsUtils.customChartSQLResult2JavaScript = async (chart, sqlRows, char
     groupbyColumn,
     summaryColumn
   } = columnMap;
-  const table = (0, _dtableUtils.getTableById)(tables, table_id);
+  const table = getTableById(tables, table_id);
   const stack = y_axises[index];
   if (!stack) return [];
   const {
     column_groupby_numeric_columns
   } = stack;
-  const y_axis_type = "".concat(_constants.Y_AXIS_TYPE_PREFIX).concat(index);
+  const y_axis_type = `${Y_AXIS_TYPE_PREFIX}${index}`;
   let summaryMethods = [];
   let originalMethods = [];
   let groupColumnNames = [];
   let numericColumns = [];
   column_groupby_numeric_columns.forEach(item => {
-    const numericColumn = (0, _dtableUtils.getTableColumnByKey)(table, item.column_key);
+    const numericColumn = getTableColumnByKey(table, item.column_key);
     const groupColumnName = numericColumn.name;
     numericColumns.push(numericColumn);
     groupColumnNames.push(groupColumnName);
-    summaryMethods.push((0, _sql.summaryMethodColumn2SqlColumn)(item.summary_method.toUpperCase(), numericColumn).key);
+    summaryMethods.push(summaryMethodColumn2SqlColumn(item.summary_method.toUpperCase(), numericColumn).key);
     originalMethods.push(item.summary_method);
   });
   const {
     key: sqlGroupbyColumnKey
-  } = (0, _column2SqlColumn.column2SqlColumn)(groupbyColumn, {
+  } = column2SqlColumn(groupbyColumn, {
     dateGranularity: x_axis_date_granularity,
     geolocationGranularity: x_axis_geolocation_granularity
   });
@@ -799,8 +789,8 @@ SQLStatisticsUtils.customChartSQLResult2JavaScript = async (chart, sqlRows, char
       if (!(x_axis_include_empty_cells || x_axis_include_empty) && isEmpty) return;
       let value = row[summaryMethod] || 0;
       let formatted_value = value;
-      value = (0, _columnUtils.formatNumericValue)(value, numericColumns[index]);
-      formatted_value = (0, _columnUtils.getFormattedValue)(value, numericColumns[index], originalMethods[index]);
+      value = formatNumericValue(value, numericColumns[index]);
+      formatted_value = getFormattedValue(value, numericColumns[index], originalMethods[index]);
       groupItems.push({
         name: label,
         value,
@@ -812,7 +802,7 @@ SQLStatisticsUtils.customChartSQLResult2JavaScript = async (chart, sqlRows, char
     });
     result = result.concat(groupItems);
   }
-  const isCellValueAsAnArray = (0, _baseUtils.findIfColumnDataIsArray)(groupbyColumn);
+  const isCellValueAsAnArray = findIfColumnDataIsArray(groupbyColumn);
   if (isCellValueAsAnArray) {
     const takenApart = [];
     const assembled = [];
@@ -822,7 +812,7 @@ SQLStatisticsUtils.customChartSQLResult2JavaScript = async (chart, sqlRows, char
         name: names
       } = item;
       if (!Array.isArray(names)) return;
-      if (!(names !== null && names !== void 0 && names.length)) {
+      if (!(names === null || names === void 0 ? void 0 : names.length)) {
         takenApart.push({
           ...item,
           name: null
@@ -853,9 +843,9 @@ SQLStatisticsUtils.customChartSQLResult2JavaScript = async (chart, sqlRows, char
     });
     result = assembled;
   }
-  _baseUtils.default.sortCharts(result, groupbyColumn, 'name');
-  _baseUtils.default.updateTableViewList(result, groupbyColumn, 'name', '', false, true);
-  _baseUtils.default.updateSummaryValuePrecision(result, summaryColumn, 'value');
+  BaseUtils.sortCharts(result, groupbyColumn, 'name');
+  await BaseUtils.updateTableViewList(result, groupbyColumn, 'name', '', false, true);
+  BaseUtils.updateSummaryValuePrecision(result, summaryColumn, 'value');
   return result;
 };
 SQLStatisticsUtils.compareSQLResult2Javascript = async (chart, sqlRows, chartSQLMap, columnMap, tables) => {
@@ -880,20 +870,21 @@ SQLStatisticsUtils.compareSQLResult2Javascript = async (chart, sqlRows, chartSQL
     y_axis_summary_method,
     display_increase
   } = 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);
+  const groupName1 = `${x_axis_date_range_start} - ${x_axis_date_range_end}`;
+  const groupName2 = `${x_axis_compared_date_range_start} - ${x_axis_compared_date_range_end}`;
   const dateRangeResult = new Map();
   let dateComparedResult = new Map();
-  const isAdvanced = y_axis_summary_type === _constants.CHART_SUMMARY_TYPE.ADVANCED;
+  const isAdvanced = y_axis_summary_type === CHART_SUMMARY_TYPE.ADVANCED;
   const startDate = new Date(x_axis_date_range_start);
   const endDate = new Date(x_axis_date_range_end);
   const comparedStartDate = new Date(x_axis_compared_date_range_start);
   const comparedEndDate = new Date(x_axis_compared_date_range_end);
   for (const item of sqlRows) {
     let name = item[sqlGroupbyColumnKey];
+    if (!name) continue;
     const label = await _SQLStatisticsUtils.getGroupLabelFromDB(name, groupbyColumn, chart.config);
     if (x_axis_date_granularity === 'quarter') {
-      name = (0, _dateTranslate.convertQuarterToDate)(name);
+      name = convertQuarterToDate(name);
     } else if (x_axis_date_granularity === 'year') {
       // set the date to the first day of the year, and set the time to 8:05, cause the time zone is UTC+8,
       // need to ensure time is at the range of user's slected time
@@ -906,30 +897,50 @@ SQLStatisticsUtils.compareSQLResult2Javascript = async (chart, sqlRows, chartSQL
       const currentValue = dateRangeResult.get(label);
       if (!currentValue) {
         if (isAdvanced) {
-          dateRangeResult.set(label, [value]);
+          dateRangeResult.set(label, {
+            value: [value],
+            date: name,
+            rows: [item]
+          });
         } else {
-          dateRangeResult.set(label, value);
+          dateRangeResult.set(label, {
+            value,
+            date: name,
+            rows: [item]
+          });
         }
       } else {
         if (isAdvanced) {
-          currentValue.push(value);
+          currentValue.value.push(value);
+          currentValue.rows.push(item);
         } else {
-          dateRangeResult.set(label, value + currentValue);
+          currentValue.value = value + currentValue.value;
+          currentValue.rows.push(item);
         }
       }
     } else if (name >= comparedStartDate && name <= comparedEndDate) {
       const currentValue = dateComparedResult.get(label);
       if (!currentValue) {
         if (isAdvanced) {
-          dateComparedResult.set(label, [value]);
+          dateComparedResult.set(label, {
+            value: [value],
+            date: name,
+            rows: [item]
+          });
         } else {
-          dateComparedResult.set(label, value);
+          dateComparedResult.set(label, {
+            value,
+            date: name,
+            rows: [item]
+          });
         }
       } else {
         if (isAdvanced) {
-          dateComparedResult.push(value);
+          currentValue.value.push(value);
+          currentValue.rows.push(item);
         } else {
-          dateComparedResult.set(label, value + currentValue);
+          currentValue.value = value + currentValue.value;
+          currentValue.rows.push(item);
         }
       }
     }
@@ -937,38 +948,53 @@ SQLStatisticsUtils.compareSQLResult2Javascript = async (chart, sqlRows, chartSQL
   let comparedResult = [];
   let rangeResult = [];
   const data = (summaryColumn === null || summaryColumn === void 0 ? void 0 : summaryColumn.data) || {};
-  for (let item of dateRangeResult) {
-    let value = item[1];
+
+  // convert Map to array and sort by date
+  const sortedDateRangeEntries = Array.from(dateRangeResult.entries()).sort((a, b) => {
+    return a[0] < b[0] ? -1 : a[0] > b[0] ? 1 : 0;
+  });
+  const sortedDateComparedEntries = Array.from(dateComparedResult.entries()).sort((a, b) => {
+    return a[0] < b[0] ? -1 : a[0] > b[0] ? 1 : 0;
+  });
+  for (let item of sortedDateRangeEntries) {
+    const {
+      value: rawValue,
+      rows
+    } = item[1] || {};
+    let value = rawValue;
     let formatted_value = value;
     if (isAdvanced) {
-      value = (0, _columnUtils.getSummaryResult)(item[1], y_axis_summary_method, data.precision);
-      formatted_value = (0, _columnUtils.getFormattedValue)(value, summaryColumn, y_axis_summary_method);
+      value = getSummaryResult(rawValue, y_axis_summary_method, data.precision);
+      formatted_value = getFormattedValue(value, summaryColumn, y_axis_summary_method);
     }
     rangeResult.push({
       name: item[0],
       group_name: groupName1,
       raw_name: item[0],
       value,
+      rows: rows || [],
       formatted_value
     });
   }
   let index = 0;
-  for (let item of dateComparedResult) {
+  for (let item of sortedDateComparedEntries) {
     let dateRangeItem = rangeResult[index];
     if (!dateRangeItem) {
       break;
     }
-    let value = item[1];
+    let value = item[1].value;
+    const rows = item[1].rows;
     let formatted_value = value;
     if (isAdvanced) {
-      value = (0, _columnUtils.getSummaryResult)(item[1], y_axis_summary_method, data.precision);
-      formatted_value = (0, _columnUtils.getFormattedValue)(value, summaryColumn, y_axis_summary_method);
+      value = getSummaryResult(item[1].value, y_axis_summary_method, data.precision);
+      formatted_value = getFormattedValue(value, summaryColumn, y_axis_summary_method);
     }
     const newItem = {
       name: dateRangeItem.name,
       group_name: groupName2,
       raw_name: item[0],
       value,
+      rows,
       formatted_value
     };
     if (display_increase) {
@@ -985,8 +1011,10 @@ SQLStatisticsUtils.compareSQLResult2Javascript = async (chart, sqlRows, chartSQL
   if (comparedResult.length > rangeResult.length) {
     comparedResult = comparedResult.slice(0, rangeResult.length);
   }
-  _baseUtils.default.updateSummaryValuePrecision(comparedResult, summaryColumn, 'value');
-  _baseUtils.default.updateSummaryValuePrecision(rangeResult, summaryColumn, 'value');
+  BaseUtils.updateSummaryValuePrecision(comparedResult, summaryColumn, 'value');
+  BaseUtils.updateSummaryValuePrecision(rangeResult, summaryColumn, 'value');
+  BaseUtils.sortCharts(rangeResult, groupbyColumn, 'name');
+  BaseUtils.sortCharts(comparedResult, groupbyColumn, 'name');
   return [...comparedResult, ...rangeResult];
 };
 SQLStatisticsUtils.combinationSQLResult2Javascript = async (chart, sqlRows, chartSQLMap, columnMap, tables) => {
@@ -1003,7 +1031,7 @@ SQLStatisticsUtils.combinationSQLResult2Javascript = async (chart, sqlRows, char
     table_id,
     y_axis_left_group_by_numeric_columns
   } = config;
-  const table = (0, _dtableUtils.getTableById)(tables, table_id);
+  const table = getTableById(tables, table_id);
   const {
     groupbyColumn,
     summaryColumn
@@ -1017,7 +1045,7 @@ SQLStatisticsUtils.combinationSQLResult2Javascript = async (chart, sqlRows, char
     sqlRightSummaryColumnKey,
     sqlLeftSummaryColumnKey
   } = chartSQLMap;
-  const isGroupbyColumnDataAsAnArray = (0, _baseUtils.findIfColumnDataIsArray)(groupbyColumn);
+  const isGroupbyColumnDataAsAnArray = findIfColumnDataIsArray(groupbyColumn);
   let result = [];
   if (!y_axis_left_group_by_multiple_numeric_column) {
     // let leftSummaryColumn, rightSummaryColumn;
@@ -1044,7 +1072,7 @@ SQLStatisticsUtils.combinationSQLResult2Javascript = async (chart, sqlRows, char
           if (itemIdx < 0) {
             result.push({
               // color is defined by index of the name
-              color: _constants.STYLE_COLORS[0].colors[index % 12],
+              color: STYLE_COLORS[0].colors[index % 12],
               name: null,
               rows: [row],
               value_left: valueLeft,
@@ -1061,7 +1089,7 @@ SQLStatisticsUtils.combinationSQLResult2Javascript = async (chart, sqlRows, char
             let itemIdx = result.findIndex(v => v.name === item);
             if (itemIdx < 0) {
               result.push({
-                color: _constants.STYLE_COLORS[0].colors[index % 12],
+                color: STYLE_COLORS[0].colors[index % 12],
                 name: item,
                 rows: [row],
                 value_left: valueLeft,
@@ -1079,7 +1107,7 @@ SQLStatisticsUtils.combinationSQLResult2Javascript = async (chart, sqlRows, char
         let itemIdx = result.findIndex(v => v.name === key);
         if (itemIdx < 0) {
           result.push({
-            color: _constants.STYLE_COLORS[0].colors[index % 12],
+            color: STYLE_COLORS[0].colors[index % 12],
             name: key,
             rows: [row],
             value_left: valueLeft,
@@ -1099,11 +1127,11 @@ SQLStatisticsUtils.combinationSQLResult2Javascript = async (chart, sqlRows, char
     //   rightSummaryColumn = getTableColumnByKey(table, y_axis_right_summary_column);
     // }
     const groupItems = [];
-    let leftSummaryColumn = (0, _dtableUtils.getTableColumnByKey)(table, y_axis_left_summary_column);
+    let leftSummaryColumn = getTableColumnByKey(table, y_axis_left_summary_column);
     const summaryMethod = y_axis_left_summary_method.toUpperCase();
     const {
       key
-    } = (0, _sql.summaryMethodColumn2SqlColumn)(summaryMethod, leftSummaryColumn || {});
+    } = summaryMethodColumn2SqlColumn(summaryMethod, leftSummaryColumn || {});
     const groupItem = {
       sqlName: key,
       column: leftSummaryColumn
@@ -1113,12 +1141,12 @@ SQLStatisticsUtils.combinationSQLResult2Javascript = async (chart, sqlRows, char
       groupItems.push(groupItem);
     }
     y_axis_left_group_by_numeric_columns.forEach((item, index) => {
-      const column = (0, _dtableUtils.getTableColumnByKey)(table, item.column_key);
+      const column = getTableColumnByKey(table, item.column_key);
       if (column) {
         const itemSummaryMethod = item.summary_method.toUpperCase();
         const {
           key
-        } = (0, _sql.summaryMethodColumn2SqlColumn)(itemSummaryMethod, column || {});
+        } = summaryMethodColumn2SqlColumn(itemSummaryMethod, column || {});
         const groupItem = {
           sqlName: key,
           column
@@ -1159,7 +1187,7 @@ SQLStatisticsUtils.combinationSQLResult2Javascript = async (chart, sqlRows, char
                 rows: [item],
                 group_name: groupName,
                 // for multiple numeric_columns, color is defined by group_name
-                color: _constants.STYLE_COLORS[0].colors[index % 12]
+                color: STYLE_COLORS[0].colors[index % 12]
               });
             } else {
               const itemRow = result[itemIdx];
@@ -1184,16 +1212,16 @@ SQLStatisticsUtils.combinationSQLResult2Javascript = async (chart, sqlRows, char
             value_right: valueRight,
             rows: [item],
             group_name: groupName,
-            color: _constants.STYLE_COLORS[0].colors[index % 12]
+            color: STYLE_COLORS[0].colors[index % 12]
           });
         });
       }
     }
   }
-  _baseUtils.default.updateTableViewList(result, groupbyColumn, 'name', '', false, true);
-  _baseUtils.default.sortCharts(result, groupbyColumn, 'name');
-  _baseUtils.default.updateSummaryValuePrecision(result, summaryColumnLeft, 'value_left');
-  _baseUtils.default.updateSummaryValuePrecision(result, summaryColumnRight, 'value_right');
+  await BaseUtils.updateTableViewList(result, groupbyColumn, 'name', '', false, true);
+  BaseUtils.sortCharts(result, groupbyColumn, 'name');
+  BaseUtils.updateSummaryValuePrecision(result, summaryColumnLeft, 'value_left');
+  BaseUtils.updateSummaryValuePrecision(result, summaryColumnRight, 'value_right');
   return result;
 };
 SQLStatisticsUtils.dashboardSQLResult2JavaScript = (chart, sqlRows, chartSQLMap, columnMap, tables) => {
@@ -1209,17 +1237,17 @@ SQLStatisticsUtils.dashboardSQLResult2JavaScript = (chart, sqlRows, chartSQLMap,
       total_value_column_key,
       table_id
     } = config;
-    const table = (0, _dtableUtils.getTableById)(tables, table_id);
-    const targetColumn = (0, _dtableUtils.getTableColumnByKey)(table, target_value_column_key);
-    const totalColumn = (0, _dtableUtils.getTableColumnByKey)(table, total_value_column_key);
+    const table = getTableById(tables, table_id);
+    const targetColumn = getTableColumnByKey(table, target_value_column_key);
+    const totalColumn = getTableColumnByKey(table, total_value_column_key);
     const targetSummaryMethod = target_value_column_summary_method.toUpperCase();
     const totalSummaryMethod = total_value_column_summary_method.toUpperCase();
     const {
       key: targetResultKey
-    } = (0, _sql.summaryMethodColumn2SqlColumn)(targetSummaryMethod, targetColumn);
+    } = summaryMethodColumn2SqlColumn(targetSummaryMethod, targetColumn);
     const {
       key: totalResultKey
-    } = (0, _sql.summaryMethodColumn2SqlColumn)(totalSummaryMethod, totalColumn);
+    } = summaryMethodColumn2SqlColumn(totalSummaryMethod, totalColumn);
     const targetResult = summaryResult[targetResultKey];
     const totalResult = summaryResult[totalResultKey];
     if (totalResult === 0) {
@@ -1274,12 +1302,12 @@ SQLStatisticsUtils.groupingTwoDimensionChartSQLResult2JavaScript = async (chart,
     sqlSummaryColumnKey
   } = chartSQLMap;
   let result = [];
-  const isGroupbyColumnDataAsAnArray = (0, _baseUtils.findIfColumnDataIsArray)(groupbyColumn);
-  const isColumnGroupbyColumnDataAsAnArray = (0, _baseUtils.findIfColumnDataIsArray)(columnGroupbyColumn);
+  const isGroupbyColumnDataAsAnArray = findIfColumnDataIsArray(groupbyColumn);
+  const isColumnGroupbyColumnDataAsAnArray = findIfColumnDataIsArray(columnGroupbyColumn);
   for (const row of sqlRows) {
     const groupbyColumnCellValue = row[sqlGroupbyColumnKey];
     const groupbyColumnCellValueKey = await _SQLStatisticsUtils.getGroupLabelFromDB(groupbyColumnCellValue, groupbyColumn, chart.config);
-    if (_baseUtils.default.isValidCellValue(groupbyColumnCellValueKey, includeEmpty)) {
+    if (BaseUtils.isValidCellValue(groupbyColumnCellValueKey, includeEmpty)) {
       const columnGroupbyColumnCellValue = row[sqlColumnGroupbyColumnKey];
       const columnGroupbyColumnCellValueKey = await _SQLStatisticsUtils.getGroupLabelFromDB(columnGroupbyColumnCellValue, columnGroupbyColumn, chart.config);
       const count = row[sqlSummaryColumnKey];
@@ -1296,10 +1324,73 @@ SQLStatisticsUtils.groupingTwoDimensionChartSQLResult2JavaScript = async (chart,
       }
     }
   }
-  _baseUtils.default.sortCharts(result, groupbyColumn, 'name');
-  _baseUtils.default.updateTableViewList(result, groupbyColumn, 'name', 'color', false, true);
-  _baseUtils.default.updateTableViewList(result, columnGroupbyColumn, 'group_name', 'group_color', false, false);
-  _baseUtils.default.updateSummaryValuePrecision(result, summaryColumn, 'value');
+
+  // fill empty group name with value 0
+  const allGroupNames = new Set();
+  const nameGroupMap = new Map();
+  result.forEach(item => {
+    const {
+      name,
+      group_name: groupName
+    } = item;
+    allGroupNames.add(groupName);
+    if (!nameGroupMap.has(name)) {
+      nameGroupMap.set(name, new Set());
+    }
+    nameGroupMap.get(name).add(groupName);
+  });
+  const isEmptyGroupName = groupName => groupName === undefined || groupName === null || groupName === '';
+  const groupNameList = Array.from(allGroupNames).sort((a, b) => {
+    const aEmpty = isEmptyGroupName(a);
+    const bEmpty = isEmptyGroupName(b);
+    if (aEmpty && !bEmpty) return 1;
+    if (!aEmpty && bEmpty) return -1;
+    return `${a !== null && a !== void 0 ? a : ''}`.localeCompare(`${b !== null && b !== void 0 ? b : ''}`);
+  });
+  nameGroupMap.forEach((groupSet, name) => {
+    groupNameList.forEach(groupName => {
+      if (!groupSet.has(groupName)) {
+        result.push({
+          name,
+          rows: [],
+          group_name: groupName,
+          value: 0
+        });
+      }
+    });
+  });
+
+  // ensure each name keeps original order while its group_name entries follow the normalized group order
+  const groupOrder = new Map(groupNameList.map((groupName, index) => [groupName, index]));
+  const nameOrder = [];
+  const seenNames = new Set();
+  const nameBuckets = new Map();
+  result.forEach(item => {
+    if (!seenNames.has(item.name)) {
+      seenNames.add(item.name);
+      nameOrder.push(item.name);
+    }
+    if (!nameBuckets.has(item.name)) {
+      nameBuckets.set(item.name, []);
+    }
+    nameBuckets.get(item.name).push(item);
+  });
+  const orderedResult = [];
+  nameOrder.forEach(name => {
+    const items = nameBuckets.get(name).sort((a, b) => {
+      var _a$group_name, _b$group_name;
+      const aOrder = groupOrder.has(a.group_name) ? groupOrder.get(a.group_name) : Number.MAX_SAFE_INTEGER;
+      const bOrder = groupOrder.has(b.group_name) ? groupOrder.get(b.group_name) : Number.MAX_SAFE_INTEGER;
+      if (aOrder !== bOrder) return aOrder - bOrder;
+      return `${(_a$group_name = a.group_name) !== null && _a$group_name !== void 0 ? _a$group_name : ''}`.localeCompare(`${(_b$group_name = b.group_name) !== null && _b$group_name !== void 0 ? _b$group_name : ''}`);
+    });
+    orderedResult.push(...items);
+  });
+  result.splice(0, result.length, ...orderedResult);
+  BaseUtils.sortCharts(result, groupbyColumn, 'name');
+  await BaseUtils.updateTableViewList(result, groupbyColumn, 'name', 'color', false, true);
+  await BaseUtils.updateTableViewList(result, columnGroupbyColumn, 'group_name', 'group_color', false, false);
+  BaseUtils.updateSummaryValuePrecision(result, summaryColumn, 'value');
   return result;
 };
 SQLStatisticsUtils.groupingChartSQLResult2JavaScript = async (chart, sqlRows, chartSQLMap, columnMap, tables) => {
@@ -1318,7 +1409,7 @@ SQLStatisticsUtils.groupingChartSQLResult2JavaScript = async (chart, sqlRows, ch
     summaryColumn,
     summaryColumnsWithMethod
   } = columnMap;
-  if (y_axis_summary_type === _constants.CHART_SUMMARY_TYPE.COUNT) {
+  if (y_axis_summary_type === CHART_SUMMARY_TYPE.COUNT) {
     if (!columnGroupbyColumn) return await _SQLStatisticsUtils.basicChartSQLResult2JavaScript(chart, sqlRows, chartSQLMap, columnMap, tables);
     return await _SQLStatisticsUtils.groupingTwoDimensionChartSQLResult2JavaScript(chart, sqlRows, chartSQLMap, columnMap, tables);
   }
@@ -1330,11 +1421,11 @@ SQLStatisticsUtils.groupingChartSQLResult2JavaScript = async (chart, sqlRows, ch
       summaryColumns
     } = chartSQLMap;
     let result = [];
-    const isGroupbyColumnDataAsAnArray = (0, _baseUtils.findIfColumnDataIsArray)(groupbyColumn);
+    const isGroupbyColumnDataAsAnArray = findIfColumnDataIsArray(groupbyColumn);
     for (const row of sqlRows) {
       const groupbyColumnCellValue = row[sqlGroupbyColumnKey];
       const groupbyColumnCellValueKey = await _SQLStatisticsUtils.getGroupLabelFromDB(groupbyColumnCellValue, groupbyColumn, chart.config);
-      if (_baseUtils.default.isValidCellValue(groupbyColumnCellValueKey, includeEmpty)) {
+      if (BaseUtils.isValidCellValue(groupbyColumnCellValueKey, includeEmpty)) {
         Object.keys(summaryColumns).forEach(sqlSummaryColumnName => {
           const {
             sqlSummaryColumnKey,
@@ -1355,8 +1446,8 @@ SQLStatisticsUtils.groupingChartSQLResult2JavaScript = async (chart, sqlRows, ch
         });
       }
     }
-    _baseUtils.default.sortCharts(result, groupbyColumn, 'name');
-    _baseUtils.default.updateTableViewList(result, groupbyColumn, 'name', 'color', false, true);
+    BaseUtils.sortCharts(result, groupbyColumn, 'name');
+    await BaseUtils.updateTableViewList(result, groupbyColumn, 'name', 'color', false, true);
     const allSummaryColumns = [summaryColumn].concat(summaryColumnsWithMethod.map(item => item.column));
 
     // format precision of enabled precision columns
@@ -1369,7 +1460,7 @@ SQLStatisticsUtils.groupingChartSQLResult2JavaScript = async (chart, sqlRows, ch
     });
     Object.values(columnNameResultMap).forEach(items => {
       const targetColumn = allSummaryColumns.find(column => column.name === items[0].group_name);
-      _baseUtils.default.updateSummaryValuePrecision(items, targetColumn, 'value');
+      BaseUtils.updateSummaryValuePrecision(items, targetColumn, 'value');
     });
     return result;
   }
@@ -1392,11 +1483,11 @@ SQLStatisticsUtils.heatMapChartSQLResult2JavaScript = (chart, sqlRows, chartSQLM
     if (currentValue || currentValue === 0) {
       let value = item[sqlSummaryColumnKey];
       if (summaryColumn) {
-        value = (0, _columnUtils.formatNumericValue)(value, summaryColumn);
+        value = formatNumericValue(value, summaryColumn);
       }
       const name = typeof currentValue === 'string' ? currentValue : currentValue.country_region;
       result.push({
-        name: (0, _dayjs.default)(name).format('YYYY-MM-DD'),
+        name: dayjs(name).format('YYYY-MM-DD'),
         value
       });
     }
@@ -1408,7 +1499,7 @@ SQLStatisticsUtils.heatMapChartSQLResult2JavaScript = (chart, sqlRows, chartSQLM
       data.push(item);
       return;
     }
-    const year = (0, _dayjs.default)(item.name).year();
+    const year = dayjs(item.name).year();
     data.push({
       ...item,
       year
@@ -1446,7 +1537,7 @@ SQLStatisticsUtils.mirrorMapChartSQLResult2JavaScript = async (chart, sqlRows, c
   const {
     sqlSummaryColumnKey
   } = chartSQLMap;
-  const isAdvanced = summary_type === _constants.CHART_SUMMARY_TYPE.ADVANCED;
+  const isAdvanced = summary_type === CHART_SUMMARY_TYPE.ADVANCED;
   const newResult = [];
   const groupData = _SQLStatisticsUtils.getGroupData(sqlRows, columnGroupbyColumn);
   if (groupData.length > 0) {
@@ -1462,8 +1553,8 @@ SQLStatisticsUtils.mirrorMapChartSQLResult2JavaScript = async (chart, sqlRows, c
         let value = item[sqlSummaryColumnKey];
         let formattedValue = value;
         if (isAdvanced) {
-          value = (0, _columnUtils.formatNumericValue)(value, summaryColumn);
-          formattedValue = (0, _columnUtils.getFormattedValue)(value, summary_column_key, summary_method);
+          value = formatNumericValue(value, summaryColumn);
+          formattedValue = getFormattedValue(value, summary_column_key, summary_method);
         }
         newResult.push({
           name: label,
@@ -1471,7 +1562,7 @@ SQLStatisticsUtils.mirrorMapChartSQLResult2JavaScript = async (chart, sqlRows, c
           value: equal2GroupData0 ? value : 0,
           formatted_value: equal2GroupData0 ? formattedValue : 0,
           group_name: ((_groupData$ = groupData[0]) === null || _groupData$ === void 0 ? void 0 : _groupData$.name) || '',
-          color: ((_groupData$2 = groupData[0]) === null || _groupData$2 === void 0 ? void 0 : _groupData$2.color) || _constants.STYLE_COLORS[0].colors[0],
+          color: ((_groupData$2 = groupData[0]) === null || _groupData$2 === void 0 ? void 0 : _groupData$2.color) || STYLE_COLORS[0].colors[0],
           rows: [item]
         });
         groupData[1] && newResult.push({
@@ -1480,7 +1571,7 @@ SQLStatisticsUtils.mirrorMapChartSQLResult2JavaScript = async (chart, sqlRows, c
           value: equal2GroupData1 ? value : 0,
           formatted_value: equal2GroupData1 ? formattedValue : 0,
           group_name: ((_groupData$3 = groupData[1]) === null || _groupData$3 === void 0 ? void 0 : _groupData$3.name) || '',
-          color: ((_groupData$4 = groupData[1]) === null || _groupData$4 === void 0 ? void 0 : _groupData$4.color) || _constants.STYLE_COLORS[0].colors[0],
+          color: ((_groupData$4 = groupData[1]) === null || _groupData$4 === void 0 ? void 0 : _groupData$4.color) || STYLE_COLORS[0].colors[0],
           rows: [item]
         });
       }
@@ -1511,14 +1602,14 @@ SQLStatisticsUtils.trendMapChartSQLResult2JavaScript = (chart, sqlRows, chartSQL
     const {
       compareValue: value1,
       comparedValue: value2
-    } = _baseUtils.default.summaryDurationResult(sqlRows, date_granularity, summary_type, summary_method, true, sqlGroupbyColumnKey, sqlSummaryColumnKey);
+    } = BaseUtils.summaryDurationResult(sqlRows, date_granularity, summary_type, summary_method, true, sqlGroupbyColumnKey, sqlSummaryColumnKey);
     compareValue = value1;
     comparedValue = value2;
   } else {
     const {
       compareDate,
       comparedDate
-    } = (0, _trendUtils.getCompareDate)(date_granularity);
+    } = getCompareDate(date_granularity, 'app');
     for (const item of sqlRows) {
       if (!item[sqlGroupbyColumnKey]) continue;
       const currentDate = item[sqlGroupbyColumnKey] + '';
@@ -1548,11 +1639,11 @@ SQLStatisticsUtils.trendMapChartSQLResult2JavaScript = (chart, sqlRows, chartSQL
   }
   let type;
   if (compareValue > comparedValue) {
-    type = _constants.TREND_TYPES.UP;
+    type = TREND_TYPES.UP;
   } else if (compareValue < comparedValue) {
-    type = _constants.TREND_TYPES.DOWN;
+    type = TREND_TYPES.DOWN;
   } else if (compareValue === comparedValue) {
-    type = _constants.TREND_TYPES.EQUAL;
+    type = TREND_TYPES.EQUAL;
   }
   if (compareValue === 0 && comparedValue === 0) {
     result = '0%';
@@ -1569,15 +1660,15 @@ SQLStatisticsUtils.sqlResult2JavaScript = async (chart, sqlRows, chartSQLMap, co
     type
   } = chart.config;
   switch (type) {
-    case _constants.CHART_TYPE.TABLE_ELEMENT:
+    case CHART_TYPE.TABLE_ELEMENT:
       {
         return {
           result: sqlRows
         };
       }
-    case _constants.CHART_TYPE.TABLE:
+    case CHART_TYPE.TABLE:
       {
-        sqlRows = _baseUtils.default.recalculateAvg(sqlRows);
+        sqlRows = BaseUtils.recalculateAvg(sqlRows);
         const {
           column_groupby_column_key
         } = chart.config;
@@ -1593,106 +1684,106 @@ SQLStatisticsUtils.sqlResult2JavaScript = async (chart, sqlRows, chartSQLMap, co
         }
         return result;
       }
-    case _constants.CHART_TYPE.PIE:
-    case _constants.CHART_TYPE.RING:
-    case _constants.CHART_TYPE.TREE_MAP:
+    case CHART_TYPE.PIE:
+    case CHART_TYPE.RING:
+    case CHART_TYPE.TREE_MAP:
       {
         return {
           result: await _SQLStatisticsUtils.basicChartSQLResult2JavaScript(chart, sqlRows, chartSQLMap, columnMap, tables)
         };
       }
-    case _constants.CHART_TYPE.BASIC_NUMBER_CARD:
+    case CHART_TYPE.BASIC_NUMBER_CARD:
       {
         return {
           result: _SQLStatisticsUtils.basicNumberCardSQLResult2JavaScript(chart, sqlRows, chartSQLMap, columnMap, tables)
         };
       }
-    case _constants.CHART_TYPE.DASHBOARD:
+    case CHART_TYPE.DASHBOARD:
       {
         return {
           result: _SQLStatisticsUtils.dashboardSQLResult2JavaScript(chart, sqlRows, chartSQLMap, columnMap, tables)
         };
       }
-    case _constants.CHART_TYPE.BAR:
-    case _constants.CHART_TYPE.LINE:
-    case _constants.CHART_TYPE.HORIZONTAL_BAR:
-    case _constants.CHART_TYPE.AREA:
-    case _constants.CHART_TYPE.FUNNEL:
+    case CHART_TYPE.BAR:
+    case CHART_TYPE.LINE:
+    case CHART_TYPE.HORIZONTAL_BAR:
+    case CHART_TYPE.AREA:
+    case CHART_TYPE.FUNNEL:
       {
         return {
           result: await _SQLStatisticsUtils.basicChartSQLResult2JavaScript(chart, sqlRows, chartSQLMap, columnMap, tables)
         };
       }
-    case _constants.CHART_TYPE.COMPLETENESS:
-    case _constants.CHART_TYPE.COMPLETENESS_GROUP:
+    case CHART_TYPE.COMPLETENESS:
+    case CHART_TYPE.COMPLETENESS_GROUP:
       {
-        const result = _SQLStatisticsUtils.completenessSQlResult(chart, sqlRows, chartSQLMap, tables);
+        const result = await _SQLStatisticsUtils.completenessSQlResult(chart, sqlRows, chartSQLMap, tables);
         return {
           result
         };
       }
-    case _constants.CHART_TYPE.COMBINATION:
+    case CHART_TYPE.COMBINATION:
       {
         return {
           result: await _SQLStatisticsUtils.combinationSQLResult2Javascript(chart, sqlRows, chartSQLMap, columnMap, tables)
         };
       }
-    case _constants.CHART_TYPE.COMPARE_BAR:
+    case CHART_TYPE.COMPARE_BAR:
       {
         return {
           result: await _SQLStatisticsUtils.compareSQLResult2Javascript(chart, sqlRows, chartSQLMap, columnMap, tables)
         };
       }
-    case _constants.CHART_TYPE.BAR_GROUP:
-    case _constants.CHART_TYPE.BAR_STACK:
-    case _constants.CHART_TYPE.LINE_GROUP:
-    case _constants.CHART_TYPE.AREA_GROUP:
-    case _constants.CHART_TYPE.HORIZONTAL_GROUP_BAR:
-    case _constants.CHART_TYPE.STACKED_HORIZONTAL_BAR:
+    case CHART_TYPE.BAR_GROUP:
+    case CHART_TYPE.BAR_STACK:
+    case CHART_TYPE.LINE_GROUP:
+    case CHART_TYPE.AREA_GROUP:
+    case CHART_TYPE.HORIZONTAL_GROUP_BAR:
+    case CHART_TYPE.STACKED_HORIZONTAL_BAR:
       {
         return {
           result: await _SQLStatisticsUtils.groupingChartSQLResult2JavaScript(chart, sqlRows, chartSQLMap, columnMap, tables)
         };
       }
-    case _constants.CHART_TYPE.SCATTER:
+    case CHART_TYPE.SCATTER:
       {
         return {
-          result: _SQLStatisticsUtils.scatterSQLResult2JavaScript(chart, sqlRows, chartSQLMap, columnMap, tables)
+          result: await _SQLStatisticsUtils.scatterSQLResult2JavaScript(chart, sqlRows, chartSQLMap, columnMap, tables)
         };
       }
-    case _constants.CHART_TYPE.BAR_CUSTOM:
+    case CHART_TYPE.BAR_CUSTOM:
       {
         return {
           result: await _SQLStatisticsUtils.customChartSQLResult2JavaScript(chart, sqlRows, chartSQLMap, columnMap, tables, params)
         };
       }
-    case _constants.CHART_TYPE.MAP:
-    case _constants.CHART_TYPE.MAP_BUBBLE:
+    case CHART_TYPE.MAP:
+    case CHART_TYPE.MAP_BUBBLE:
       {
         return {
           result: _SQLStatisticsUtils.mapSQLResult2JavaScript(chart, sqlRows, chartSQLMap, columnMap, tables)
         };
       }
-    case _constants.CHART_TYPE.WORLD_MAP:
-    case _constants.CHART_TYPE.WORLD_MAP_BUBBLE:
+    case CHART_TYPE.WORLD_MAP:
+    case CHART_TYPE.WORLD_MAP_BUBBLE:
       {
         return {
           result: _SQLStatisticsUtils.worldMapSQLResult2JavaScript(chart, sqlRows, chartSQLMap, columnMap, tables)
         };
       }
-    case _constants.CHART_TYPE.HEAT_MAP:
+    case CHART_TYPE.HEAT_MAP:
       {
         return {
           result: _SQLStatisticsUtils.heatMapChartSQLResult2JavaScript(chart, sqlRows, chartSQLMap, columnMap, tables)
         };
       }
-    case _constants.CHART_TYPE.MIRROR:
+    case CHART_TYPE.MIRROR:
       {
         return {
           result: await _SQLStatisticsUtils.mirrorMapChartSQLResult2JavaScript(chart, sqlRows, chartSQLMap, columnMap, tables)
         };
       }
-    case _constants.CHART_TYPE.TREND:
+    case CHART_TYPE.TREND:
       {
         return {
           result: _SQLStatisticsUtils.trendMapChartSQLResult2JavaScript(chart, sqlRows, chartSQLMap, columnMap, tables)
@@ -1711,16 +1802,10 @@ SQLStatisticsUtils._get_completeness_name = (row, column) => {
   }
   return value;
 };
-SQLStatisticsUtils.completenessSQlResult = (chart, sqlRows, chartSQLMap, tables) => {
-  const {
-    config: {
-      type
-    }
-  } = chart;
-  const isGroup = type === _constants.CHART_TYPE.COMPLETENESS_GROUP;
+SQLStatisticsUtils.completenessSQlResult = async (chart, sqlRows, chartSQLMap, tables) => {
   const {
     sqlColumns,
-    sqlColumnGroupByColumnKey
+    sqlColumnGroupbyColumnKey
   } = chartSQLMap;
   const {
     name_column,
@@ -1728,134 +1813,23 @@ SQLStatisticsUtils.completenessSQlResult = (chart, sqlRows, chartSQLMap, tables)
     target_column,
     column_groupby_column
   } = sqlColumns;
-  const res = [];
-  let summedSqlRows;
-  const nameColumnDataAsAnArray = (0, _baseUtils.findIfColumnDataIsArray)(name_column);
-  if (!isGroup) {
-    if (nameColumnDataAsAnArray) {
-      const sumSqlRows = sqlRows.reduce((acc, row) => {
-        const names = row[name_column.key];
-        if (!names) {
-          row[name_column.key] = _intl.default.get('Empty');
-          acc[_intl.default.get('Empty')] = row;
-          return acc;
-        }
-        names.forEach(name => {
-          if (!acc[name]) {
-            row[name_column.key] = name;
-            acc[name] = row;
-          } else {
-            const accRow = acc[name];
-            Object.keys(row).forEach(key => {
-              if (key === completed_column.key || key === target_column.key) {
-                // in case of null
-                if (!row[key]) {
-                  row[key] = 0;
-                }
-                if (!accRow[key]) {
-                  accRow[key] = 0;
-                }
-                accRow[key] = accRow[key] + row[key];
-              }
-            });
-          }
-        });
-        return acc;
-      }, {});
-      summedSqlRows = Object.values(sumSqlRows);
-    } else {
-      const sumSqlRows = sqlRows.reduce((acc, row) => {
-        const nameValue = row[name_column.key];
-        if (!nameValue) {
-          row[name_column.key] = _intl.default.get('Empty');
-          acc[_intl.default.get('Empty')] = row;
-          return acc;
-        }
-        if (!acc[nameValue]) {
-          acc[nameValue] = row;
-        } else {
-          const accRow = acc[nameValue];
-          Object.keys(row).forEach(key => {
-            if (key === completed_column.key || key === target_column.key) {
-              accRow[key] = accRow[key] + row[key];
-            }
-          });
-        }
-        return acc;
-      }, {});
-      summedSqlRows = Object.values(sumSqlRows);
-    }
-  } else {
-    if (nameColumnDataAsAnArray) {
-      const sumSqlRows = sqlRows.reduce((acc, row) => {
-        const groupby = row[sqlColumnGroupByColumnKey];
-        const names = row[name_column.key];
-        if (!names) {
-          const key = "empty_".concat(groupby);
-          row[name_column.key] = _intl.default.get('Empty');
-          acc[key] = row;
-          return acc;
-        }
-        names.forEach(name => {
-          const key = "".concat(name, "_").concat(groupby);
-          if (!acc[key]) {
-            row[name_column.key] = name;
-            acc[key] = row;
-          } else {
-            const accRow = acc[key];
-            Object.keys(row).forEach(k => {
-              if (key === completed_column.key || key === target_column.key) {
-                accRow[key] = accRow[key] + row[key];
-              }
-            });
-          }
-        });
-        return acc;
-      }, {});
-      summedSqlRows = Object.values(sumSqlRows);
-    } else {
-      const sumSqlRows = sqlRows.reduce((acc, row) => {
-        const nameValue = row[name_column.key];
-        const groupby = row[sqlColumnGroupByColumnKey];
-        if (!nameValue) {
-          const key = "empty_".concat(groupby);
-          row[name_column.key] = _intl.default.get('Empty');
-          acc[key] = row;
-          return acc;
-        }
-        const key = "".concat(nameValue, "_").concat(groupby);
-        if (!acc[key]) {
-          acc[key] = row;
-        } else {
-          const accRow = acc[key];
-          Object.keys(row).forEach(key => {
-            if (key === completed_column.key || key === target_column.key) {
-              accRow[key] = accRow[key] + row[key];
-            }
-          });
-        }
-        return acc;
-      }, {});
-      summedSqlRows = Object.values(sumSqlRows);
-    }
+  const nameColumnDataAsAnArray = findIfColumnDataIsArray(name_column);
+  // group by name_column, so it can only have one value
+  let originalSqlRows = cloneDeep(sqlRows);
+  if (nameColumnDataAsAnArray) {
+    sqlRows.forEach(row => {
+      var _row$name_column$key;
+      row[name_column.key] = (_row$name_column$key = row[name_column.key]) === null || _row$name_column$key === void 0 ? void 0 : _row$name_column$key[0];
+    });
   }
-
-  // format the fetched value
-  _baseUtils.default.updateTableViewList(sqlRows, name_column, name_column.key, 'color', false, true);
-  if (sqlColumnGroupByColumnKey) _baseUtils.default.updateTableViewList(sqlRows, column_groupby_column, sqlColumnGroupByColumnKey, 'color', false, false);
-  summedSqlRows.forEach(row => {
+  await BaseUtils.updateTableViewList(sqlRows, name_column, name_column.key, 'color', false, true);
+  if (sqlColumnGroupbyColumnKey) await BaseUtils.updateTableViewList(sqlRows, column_groupby_column, sqlColumnGroupbyColumnKey, 'color', false, false);
+  const res = [];
+  sqlRows.forEach((row, index) => {
     const nameValue = row[name_column.key];
-    let targetValue;
-    let completedValue;
-    let groupby;
-    if (sqlColumnGroupByColumnKey) {
-      targetValue = row["SUM(".concat(target_column.name, ")")];
-      completedValue = row["SUM(".concat(completed_column.name, ")")];
-      groupby = row[sqlColumnGroupByColumnKey] || _intl.default.get('Empty');
-    } else {
-      completedValue = _SQLStatisticsUtils._get_completeness_name(row, completed_column);
-      targetValue = _SQLStatisticsUtils._get_completeness_name(row, target_column);
-    }
+    const targetValue = row[`SUM(${target_column.name})`];
+    const completedValue = row[`SUM(${completed_column.name})`];
+    const groupby = row[sqlColumnGroupbyColumnKey] || intl.get('Empty');
     let completedRate;
     if (!targetValue && completedValue) {
       completedRate = 100;
@@ -1872,8 +1846,9 @@ SQLStatisticsUtils.completenessSQlResult = (chart, sqlRows, chartSQLMap, tables)
       original_name,
       group_name: 'completed',
       groupby,
-      color: row.color || _constants.CHART_STYLE_COLORS[0],
-      value: completedValue
+      color: row.color || CHART_STYLE_COLORS[0],
+      value: completedValue,
+      rows: [originalSqlRows[index]]
     });
     res.push({
       name: nameValue,
@@ -1882,7 +1857,8 @@ SQLStatisticsUtils.completenessSQlResult = (chart, sqlRows, chartSQLMap, tables)
       value: Math.max(targetValue - completedValue, 0),
       groupby,
       color: '#bdbdbd',
-      completedRate
+      completedRate,
+      rows: [originalSqlRows[index]]
     });
   });
 
@@ -1894,9 +1870,29 @@ SQLStatisticsUtils.completenessSQlResult = (chart, sqlRows, chartSQLMap, tables)
       return 1;
     }
   });
-  return res;
+
+  // deduplicate by (name, group_name)
+  const deduplicatedRes = [];
+  const keyMap = {};
+  res.forEach(item => {
+    const key = `${item.name}_${item.group_name}`;
+    if (!keyMap[key]) {
+      keyMap[key] = item;
+      deduplicatedRes.push(item);
+    } else {
+      const existingItem = keyMap[key];
+      existingItem.value = (existingItem.value || 0) + (item.value || 0);
+      if (item.rows) {
+        existingItem.rows = (existingItem.rows || []).concat(item.rows);
+      }
+      if (item.group_name === 'rest' && item.completedRate !== undefined) {
+        existingItem.completedRate = item.completedRate;
+      }
+    }
+  });
+  return deduplicatedRes;
 };
-SQLStatisticsUtils.scatterSQLResult2JavaScript = (chart, sqlRows, chartSQLMap, columnMap, tables) => {
+SQLStatisticsUtils.scatterSQLResult2JavaScript = async (chart, sqlRows, chartSQLMap, columnMap, tables) => {
   const {
     sqlXColumnKey,
     sqlYColumnKey,
@@ -1908,15 +1904,15 @@ SQLStatisticsUtils.scatterSQLResult2JavaScript = (chart, sqlRows, chartSQLMap, c
     summaryColumn
   } = columnMap;
   // format sql rows
-  const originalSqlRows = (0, _lodashEs.cloneDeep)(sqlRows);
+  const originalSqlRows = cloneDeep(sqlRows);
   const isScatter = true;
-  _baseUtils.default.updateTableViewList(sqlRows, groupbyColumn, groupbyColumn.key, 'color', isScatter, true);
-  _baseUtils.default.updateTableViewList(sqlRows, summaryColumn, summaryColumn.key, 'color', isScatter, true);
-  if (sqlColumnGroupbyColumnKey) _baseUtils.default.updateTableViewList(sqlRows, columnGroupbyColumn, sqlColumnGroupbyColumnKey, 'color', isScatter, false);
+  await BaseUtils.updateTableViewList(sqlRows, groupbyColumn, groupbyColumn.key, 'color', isScatter, true);
+  await BaseUtils.updateTableViewList(sqlRows, summaryColumn, summaryColumn.key, 'color', isScatter, true);
+  if (sqlColumnGroupbyColumnKey) await BaseUtils.updateTableViewList(sqlRows, columnGroupbyColumn, sqlColumnGroupbyColumnKey, 'color', isScatter, false);
   const res = [];
   sqlRows.forEach((row, index) => {
-    const xValue = row[sqlXColumnKey] ? '' + row[sqlXColumnKey] : _intl.default.get('Empty');
-    const yValue = row[sqlYColumnKey] ? '' + row[sqlYColumnKey] : _intl.default.get('Empty');
+    const xValue = row[sqlXColumnKey];
+    const yValue = row[sqlYColumnKey];
     const groupby = row[sqlColumnGroupbyColumnKey] ? '' + row[sqlColumnGroupbyColumnKey] : null;
     const originalSqlRow = originalSqlRows[index];
     const originalXValue = originalSqlRow[sqlXColumnKey];
@@ -1924,16 +1920,17 @@ SQLStatisticsUtils.scatterSQLResult2JavaScript = (chart, sqlRows, chartSQLMap, c
     const originalGroupby = originalSqlRow[sqlColumnGroupbyColumnKey];
     res.push({
       name: xValue,
-      value: yValue,
+      value: yValue !== null ? Number(yValue) : yValue,
       groupby,
+      rows: [originalSqlRow],
       original_value: {
-        rows: [originalSqlRow],
         name: originalXValue,
         value: originalYValue,
         groupby: originalGroupby
       }
     });
   });
+  BaseUtils.sortCharts(res, groupbyColumn, 'name');
   return res;
 };
 SQLStatisticsUtils.mapSQLResult2JavaScript = (chart, sqlRows, chartSQLMap, columnMap, tables) => {
@@ -2031,8 +2028,8 @@ SQLStatisticsUtils.worldMapSQLResult2JavaScript = (chart, sqlRows, chartSQLMap,
       let value = nameValueMap[name];
       let formatted_value = value;
       if (summary_type === 'advanced') {
-        value = (0, _columnUtils.formatNumericValue)(value, summaryColumn);
-        formatted_value = (0, _columnUtils.getFormattedValue)(value, summaryColumn, summary_method);
+        value = formatNumericValue(value, summaryColumn);
+        formatted_value = getFormattedValue(value, summaryColumn, summary_method);
       }
       acc.push({
         name,
@@ -2048,8 +2045,8 @@ SQLStatisticsUtils.worldMapSQLResult2JavaScript = (chart, sqlRows, chartSQLMap,
       let value = item[sqlSummaryColumnKey];
       let formatted_value = value;
       if (summary_type === 'advanced') {
-        value = (0, _columnUtils.formatNumericValue)(value, summaryColumn);
-        formatted_value = (0, _columnUtils.getFormattedValue)(value, summaryColumn, summary_method);
+        value = formatNumericValue(value, summaryColumn);
+        formatted_value = getFormattedValue(value, summaryColumn, summary_method);
       }
       if (currentValue) {
         const name = typeof currentValue === 'string' ? currentValue : currentValue.country_region;
@@ -2067,7 +2064,7 @@ SQLStatisticsUtils.calculateChart = async (chart, value, callback, sqlRows) => {
   const {
     tables
   } = value;
-  if (!_baseUtils.default.isValidExistChart(tables, chart)) {
+  if (!BaseUtils.isValidExistChart(tables, chart)) {
     const tip_message = 'Please_complete_the_chart_configuration_first';
     return callback && callback('', tip_message, null);
   }
@@ -2077,7 +2074,7 @@ SQLStatisticsUtils.calculateChart = async (chart, value, callback, sqlRows) => {
     type
   } = chart;
   const chartType = config.type;
-  const newConfig = _baseUtils.default.convertConfig(config);
+  const newConfig = BaseUtils.convertConfig(config);
   const newChart = {
     id,
     config: newConfig,
@@ -2086,11 +2083,11 @@ SQLStatisticsUtils.calculateChart = async (chart, value, callback, sqlRows) => {
   const {
     table_id
   } = config;
-  const table = (0, _dtableUtils.getTableById)(tables, table_id);
-  const groupbyColumn = _baseUtils.default.getGroupColumn(table, newChart);
-  const columnGroupbyColumn = _baseUtils.default.getColumnGroupColumn(table, newChart);
-  const summaryColumn = _baseUtils.default.getSummaryColumn(table, newChart);
-  const summaryColumnsWithMethod = _baseUtils.default.getSummaryColumnsWithMethod(table, newChart);
+  const table = getTableById(tables, table_id);
+  const groupbyColumn = BaseUtils.getGroupColumn(table, newChart);
+  const columnGroupbyColumn = BaseUtils.getColumnGroupColumn(table, newChart);
+  const summaryColumn = BaseUtils.getSummaryColumn(table, newChart);
+  const summaryColumnsWithMethod = BaseUtils.getSummaryColumnsWithMethod(table, newChart);
   // summary column is referring to single_numeric_column, but summaryColumns is referring to multiple_numeric_column
   // single_numeric_column is used as the first setting option when switched to multiple_numeric_column
   const columnMap = {
@@ -2102,7 +2099,7 @@ SQLStatisticsUtils.calculateChart = async (chart, value, callback, sqlRows) => {
   const chartTableColumns = table.columns;
   let chartSQLMap = null;
   try {
-    chartSQLMap = (0, _sql.chartColumn2SqlColumn)(newChart, table);
+    chartSQLMap = chartColumn2SqlColumn(newChart, table);
   } catch (error) {
     let error_message = 'There_are_some_problems_with_the_filters';
     if (error.message) error_message = error.message;
@@ -2111,7 +2108,7 @@ SQLStatisticsUtils.calculateChart = async (chart, value, callback, sqlRows) => {
   const tipMessage = 'There_are_no_statistic_results_yet';
 
   // Custom Bar
-  if (chartType === _constants.CHART_TYPE.BAR_CUSTOM) {
+  if (chartType === CHART_TYPE.BAR_CUSTOM) {
     const result = [];
     for (const [index, item] of sqlRows.entries()) {
       if (item.length !== 0) {
@@ -2138,14 +2135,14 @@ SQLStatisticsUtils.calculateChart = async (chart, value, callback, sqlRows) => {
   }
 
   // map is special, still need to show map even data is empty
-  if (!Array.isArray(sqlRows) || sqlRows.length === 0 && !_constants.MAP_CHART_TYPES.includes(chartType)) {
+  if (!Array.isArray(sqlRows) || sqlRows.length === 0 && !MAP_CHART_TYPES.includes(chartType)) {
     callback && callback('', tipMessage, null);
     return;
   }
   const chartResult = await _SQLStatisticsUtils.sqlResult2JavaScript(newChart, sqlRows, chartSQLMap, columnMap, tables);
 
   // map is special
-  if (_baseUtils.default.imEmptyChartResult(chartResult) && !chartType.includes('map')) {
+  if (BaseUtils.imEmptyChartResult(chartResult) && !chartType.includes('map')) {
     callback && callback('', tipMessage, null);
     return;
   }
@@ -2165,7 +2162,7 @@ SQLStatisticsUtils.calculateStaticChart = (chart, value, statisticalResult, call
     config
   } = chart;
   const tables = value.tables;
-  const newConfig = _baseUtils.default.convertConfig(config);
+  const newConfig = BaseUtils.convertConfig(config);
   const newChart = {
     id,
     config: newConfig
@@ -2173,31 +2170,31 @@ SQLStatisticsUtils.calculateStaticChart = (chart, value, statisticalResult, call
   const {
     type
   } = config;
-  if ([_constants.CHART_TYPE.TABLE, _constants.CHART_TYPE.TABLE_ELEMENT].includes(type)) return callback && callback('', '', statisticalResult);
+  if ([CHART_TYPE.TABLE, CHART_TYPE.TABLE_ELEMENT].includes(type)) return callback && callback('', '', statisticalResult);
   const {
     table_id,
     sort_type
   } = config;
-  const table = (0, _dtableUtils.getTableById)(tables, table_id);
-  const groupbyColumn = _baseUtils.default.getGroupColumn(table, newChart);
+  const table = getTableById(tables, table_id);
+  const groupbyColumn = BaseUtils.getGroupColumn(table, newChart);
   let result = statisticalResult.result;
   if (!result) {
     const tip_message = 'There_are_no_statistic_results_yet';
     return callback && callback('', tip_message, null);
   }
-  if (_constants.SUPPORT_DATA_SORT_CHART_TYPES.includes(type) && sort_type) {
-    _baseUtils.default.sortChartData(result, sort_type);
+  if (SUPPORT_DATA_SORT_CHART_TYPES.includes(type) && sort_type) {
+    BaseUtils.sortChartData(result, sort_type);
     const newStatisticalResult = {
       ...statisticalResult,
       result
     };
     return callback && callback('', '', newStatisticalResult);
   }
-  _baseUtils.default.sortCharts(result, groupbyColumn, 'name');
+  BaseUtils.sortCharts(result, groupbyColumn, 'name');
   const newStatisticalResult = {
     ...statisticalResult,
     result
   };
   return callback && callback('', '', newStatisticalResult);
 };
-var _default = exports.default = SQLStatisticsUtils;
+export default SQLStatisticsUtils;