sea-chart 0.0.90 → 0.0.92

package/dist/settings/widgets/group-by.js

@@ -111,7 +111,7 @@ class GroupBy extends Component {
             type: 'text'
           },
           label: /*#__PURE__*/React.createElement("span", {
-            className: 'select-module select-module-name ml-0'
+            className: "ml-0"
           }, intl.get('Not_used'))
         });
       }

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

@@ -237,7 +237,7 @@ BaseUtils.isSameGroup = (isColumnDataAsAnArray, source, target) => {
     if (Array.isArray(source) && Array.isArray(target)) {
       return JSON.stringify(source) === JSON.stringify(target);
     }
-    return (!Array.isArray(source) || source.length === 0) && !target || source.includes(target);
+    return (!Array.isArray(source) || source.length === 0) && !target || (source === null || source === void 0 ? void 0 : source.includes(target));
   }
   return source === null && target === null || source === undefined && target === undefined || source === target;
 };

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

@@ -1,6 +1,6 @@
 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 { CHART_STYLE_COLORS, CHART_SUMMARY_TYPE, CHART_TYPE, Y_AXIS_TYPE_PREFIX } from '../../../constants';
 import { getColorFromSingleSelectColumn, islinkDateFormula } from '../../column-utils';
 import { isArrayCellValue } from '../../cell-value-utils';
 import { getFormattedLabel, isValidRow } from '../../row-utils';
@@ -175,6 +175,7 @@ async function calculateGroupingChart(chart, value, _ref2) {
   results = results.map(result => {
     return {
       ...result,
+      group_color: result.color || CHART_STYLE_COLORS[0],
       name: getFormattedLabel(groupbyColumn, result.name, value.collaborators)
     };
   });
@@ -439,6 +440,7 @@ async function calculateCustomBar(statItem, value, _ref4) {
     getTableFormulaResults
   } = _ref4;
   const {
+    type,
     table_id,
     view_id,
     x_axis_column_key,
@@ -497,7 +499,7 @@ async function calculateCustomBar(statItem, value, _ref4) {
   results = results.map(result => {
     return {
       ...result,
-      name: getFormattedLabel(groupbyColumn, result.name, value.collaborators)
+      name: getFormattedLabel(groupbyColumn, result.name, value.collaborators, type)
     };
   });
   return results;

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

@@ -1,7 +1,7 @@
 import { isNumber, getTableById, getViewById, getTableColumnByKey } from 'dtable-utils';
 import BaseUtils from '../base-utils';
 import { isArrayCellValue } from '../../cell-value-utils';
-import { LABEL_COLORS, CHART_SUMMARY_TYPE } from '../../../constants';
+import { CHART_SUMMARY_TYPE, STYLE_COLORS } from '../../../constants';
 import { getCellValue, getFormattedLabel } from '../../row-utils';
 async function calculator(chart, value, _ref) {
   let {
@@ -22,7 +22,8 @@ async function calculator(chart, value, _ref) {
     y_axis_left_summary_method,
     y_axis_right_summary_method,
     y_axis_left_group_by_multiple_numeric_column,
-    y_axis_left_group_by_numeric_columns
+    y_axis_left_group_by_numeric_columns,
+    type
   } = chart;
   const table = getTableById(value.tables, table_id);
   const view = table && getViewById(table.views, view_id);
@@ -47,7 +48,7 @@ async function calculator(chart, value, _ref) {
         column_name: column1.name,
         type: column1.type,
         data: column1.data,
-        color: LABEL_COLORS[0]
+        color: STYLE_COLORS[0].colors[0]
       };
     }
     if (y_axis_left_group_by_multiple_numeric_column) {
@@ -59,7 +60,7 @@ async function calculator(chart, value, _ref) {
             column_name: summaryColumn.name,
             type: summaryColumn.type,
             data: summaryColumn.data,
-            color: LABEL_COLORS[(index + 1) % 12]
+            color: STYLE_COLORS[0].colors[index % 12]
           };
         }
       });
@@ -244,7 +245,7 @@ async function calculator(chart, value, _ref) {
         formatted_value_right: formattedValueRight
       });
     } else {
-      leftSummaryColumnKeys.forEach(columnKey => {
+      leftSummaryColumnKeys.forEach((columnKey, index) => {
         const summaryColumn = leftSummaryColumn[columnKey];
         const summaryMethod = summaryColumn.method;
         const list = leftValue[columnKey];
@@ -254,7 +255,8 @@ async function calculator(chart, value, _ref) {
           name: key,
           value_left: value,
           group_name: summaryColumn.column_name,
-          color: leftSummaryColumn[columnKey].color,
+          // color: leftSummaryColumn[columnKey].color,
+          color: STYLE_COLORS[0].colors[index % 12],
           value_right: value2,
           formatted_value_left: formattedValueLeft,
           formatted_value_right: formattedValueRight
@@ -264,7 +266,7 @@ async function calculator(chart, value, _ref) {
   }
   BaseUtils.sortCharts(results, xAxisColumn, 'name');
   results.forEach(item => {
-    item.name = getFormattedLabel(xAxisColumn, item.name, value.collaborators);
+    item.name = getFormattedLabel(xAxisColumn, item.name, value.collaborators, type);
   });
   return results;
 }

package/dist/utils/chart-utils/original-data-utils/index.js

@@ -84,6 +84,7 @@ OriginalDataUtils.calculateChart = async (chart, value, callback) => {
       chartTableColumns
     });
   } catch (error) {
+    console.log('Error', error);
     const error_message = getErrorMessage(error);
     return callback && callback(error_message, '', null);
   }

package/dist/utils/chart-utils/original-data-utils/pivot-table-calculator.js

@@ -87,7 +87,7 @@ async function calculateOneDimensionTable(chart, value, _ref) {
   }).filter(item => getTableColumnByKey(table, item.key));
   pivot_rows.forEach(row => {
     row.original_name = row.name;
-    row.name = getFormattedLabel(column, row.name, value.collaborators);
+    row.name = getFormattedLabel(column, row.name, value.collaborators, chart.type);
   });
   return {
     pivot_columns_total,
@@ -284,22 +284,52 @@ async function calculateTwoDimensionTable(chart, value, _ref2) {
   if (summary_column_key) {
     summaryColumn = getTableColumnByKey(table, summary_column_key);
   }
+
+  // Single field
   let {
     pivot_columns_total,
     pivot_table_total
-  } = getTwoDimensionTotal(summaryColumn, summary_type, summary_method, formulaRows, pivot_rows, pivot_columns);
+  } = getTwoDimensionTotal(summaryColumn, summary_type, summary_method, formulaRows, pivot_rows, pivot_columns, 0);
+
+  // Multiple field
+  if (Array.isArray(summary_columns) && summary_columns.length > 0) {
+    summary_columns.forEach((item, index) => {
+      if (item && Object.keys(item).length !== 0) {
+        const {
+          column_key,
+          summary_method
+        } = item;
+        const itemSummaryColumn = getTableColumnByKey(table, column_key);
+        const itemSummaryMethod = summary_method;
+        if (itemSummaryColumn && itemSummaryMethod) {
+          // The index of a single field is 0, so the index of a multiple-select field starts at 1.
+          const currentItemIndex = index + 1;
+          const {
+            pivot_columns_total: item_pivot_columns_total,
+            pivot_table_total: item_pivot_table_total
+          } = getTwoDimensionTotal(itemSummaryColumn, summary_type, itemSummaryMethod, formulaRows, pivot_rows, pivot_columns, currentItemIndex);
+
+          // Update pivot_columns_total and pivot_table_total
+          Object.keys(item_pivot_columns_total).forEach(key => {
+            pivot_columns_total[key] = pivot_columns_total[key] + item_pivot_columns_total[key];
+          });
+          pivot_table_total = pivot_table_total + item_pivot_table_total;
+        }
+      }
+    });
+  }
   BaseUtils.sortCharts(pivot_rows, groupbyColumn, 'name');
   BaseUtils.sortCharts(pivot_columns, rowGroupbyColumn, 'key');
 
   // format shown label(name)
   const map = {};
   pivot_columns.forEach(column => {
-    const name = getFormattedLabel(rowGroupbyColumn, column.key, value.collaborators);
+    const name = getFormattedLabel(rowGroupbyColumn, column.key, value.collaborators, chart.type);
     map[column.key] = name;
     column.key = name;
   });
   pivot_rows.forEach(row => {
-    row.name = getFormattedLabel(groupbyColumn, row.name, value.collaborators);
+    row.name = getFormattedLabel(groupbyColumn, row.name, value.collaborators, chart.type);
     const cells = {};
     Object.keys(row.cells).forEach(key => {
       cells[map[key]] = row.cells[key];
@@ -529,6 +559,7 @@ function updateTwoDimensionRows(pivot_rows, pivot_columns, index, name, row, isC
 function getTwoDimensionTotal(summaryColumn, summary_type, summary_method, formula_rows) {
   let pivot_rows = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : [];
   let pivot_columns = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : [];
+  let index = arguments.length > 6 ? arguments[6] : undefined;
   let pivot_columns_total = {};
   let pivot_table_total = 0;
   let dateColumnsTotalArr = [];
@@ -551,7 +582,7 @@ function getTwoDimensionTotal(summaryColumn, summary_type, summary_method, formu
         let {
           rows
         } = cells[key];
-        let subTotal = getTotal(summaryColumn, summary_type, summary_method, rows, formula_rows, (_cells$key = cells[key]) === null || _cells$key === void 0 ? void 0 : _cells$key.total);
+        let subTotal = getTotal(summaryColumn, summary_type, summary_method, rows, formula_rows, (_cells$key = cells[key]) === null || _cells$key === void 0 ? void 0 : _cells$key.total, index);
         if (isSummaryDateColumn) {
           if (subTotal === 0) {
             cells[key].total = 0;
@@ -564,9 +595,9 @@ function getTwoDimensionTotal(summaryColumn, summary_type, summary_method, formu
         } else {
           if (Array.isArray(subTotal)) {
             cells[key].total = subTotal;
-            total += subTotal[0][1] ? subTotal[0][1] - 0 : 0;
+            total += subTotal[index][1] ? subTotal[index][1] - 0 : 0;
             let columnTotal = pivot_columns_total[key] ? pivot_columns_total[key] : 0;
-            columnTotal += subTotal[0][1] ? subTotal[0][1] - 0 : 0;
+            columnTotal += subTotal[index][1] ? subTotal[index][1] - 0 : 0;
             pivot_columns_total[key] = columnTotal;
           } else {
             cells[key].total = subTotal;
@@ -623,6 +654,7 @@ function getTotal(summary_column, summary_type, summary_method) {
   let rows = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : [];
   let formula_rows = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {};
   let oldTotal = arguments.length > 5 ? arguments[5] : undefined;
+  let index = arguments.length > 6 ? arguments[6] : undefined;
   const summary_column_key = summary_column ? summary_column.key : '';
   const summary_column_type = summary_column ? summary_column.type : '';
   const rowsLength = rows.length;
@@ -654,7 +686,7 @@ function getTotal(summary_column, summary_type, summary_method) {
           total++;
         }
       });
-      total = getTotalByType(oldTotal, total);
+      total = getTotalByType(oldTotal, total, index);
       return total;
     }
     if (summary_column && isDateColumn(summary_column)) {
@@ -712,10 +744,10 @@ function getTotal(summary_column, summary_type, summary_method) {
               }
             });
             if (summary_method === 'Sum') {
-              total = getTotalByType(oldTotal, Number.parseFloat(sum.toFixed(8)));
+              total = getTotalByType(oldTotal, Number.parseFloat(sum.toFixed(8)), index);
             } else if (summary_method === 'Mean') {
               const val = validNumbersCount === 0 ? 0 : Number.parseFloat((sum / validNumbersCount).toFixed(8));
-              total = getTotalByType(oldTotal, val);
+              total = getTotalByType(oldTotal, val, index);
             }
             break;
           }
@@ -748,15 +780,15 @@ function getTotal(summary_column, summary_type, summary_method) {
                 let formulaRow = formula_rows[result._id];
                 if (formulaRow) {
                   if (formulaRow[summary_column_key] && typeof formulaRow[summary_column_key] === 'object') {
-                    total = getTotalByType(oldTotal, formulaRow[summary_column_key][0]);
+                    total = getTotalByType(oldTotal, formulaRow[summary_column_key][0], index);
                   } else {
-                    getTotalByType(oldTotal, formulaRow[summary_column_key]);
+                    getTotalByType(oldTotal, formulaRow[summary_column_key], index);
                   }
                 } else {
-                  total = getTotalByType(oldTotal, null);
+                  total = getTotalByType(oldTotal, null, index);
                 }
               } else {
-                total = getTotalByType(oldTotal, result[summary_column_key]);
+                total = getTotalByType(oldTotal, result[summary_column_key], index);
               }
             }
             break;
@@ -770,7 +802,7 @@ function getTotal(summary_column, summary_type, summary_method) {
   }
   // formula_rows result can be '#VALUE!'
   if (total === '#VALUE!') {
-    total = getTotalByType(oldTotal, 0);
+    total = getTotalByType(oldTotal, 0, index);
   }
   return total || 0;
 }
@@ -820,11 +852,11 @@ function getDateMaxOrMinTotal(dateArr, type) {
   dateIndex = list.indexOf(dateValue);
   return dateArr[dateIndex];
 }
-function getTotalByType(oldTotal, value) {
+function getTotalByType(oldTotal, value, index) {
   let newTotal = '';
   if (Array.isArray(oldTotal)) {
     newTotal = JSON.parse(JSON.stringify(oldTotal));
-    newTotal[0][1] = value;
+    newTotal[index][1] = value;
   } else {
     newTotal = value;
   }

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

@@ -5,7 +5,6 @@ import { isObject } from 'lodash';
 import { CHART_SUMMARY_TYPE, CHART_TYPE, SUPPORT_DATA_SORT_CHART_TYPES, TABLE_DIMENSIONS, Y_AXIS_TYPE_PREFIX, STYLE_COLORS, TREND_TYPES } from '../../constants';
 import { chartColumn2SqlColumn, summaryMethodColumn2SqlColumn } from '../sql';
 import { getClientLinkDisplayString } from '../cell-format-utils';
-import context from '../../context';
 import { column2SqlColumn } from '../sql/column-2-sql-column';
 import { formatNumericValue, getFormattedValue, getSummaryResult } from '../column-utils';
 import { getCompareDate } from '../trend-utils';
@@ -16,7 +15,6 @@ _SQLStatisticsUtils = SQLStatisticsUtils;
 SQLStatisticsUtils.dataSources = 'sql_statistics';
 SQLStatisticsUtils.getGroupLabelFromDB = (cellValue, column, chart) => {
   const dateGranularity = BaseUtils.getDateGranularityByType(chart);
-  const collaborators = context.getCollaboratorsFromCache();
   const {
     type,
     data
@@ -58,7 +56,6 @@ SQLStatisticsUtils.getGroupLabelFromDB = (cellValue, column, chart) => {
       }
     case CellType.COLLABORATOR:
       {
-        if (!Array.isArray(collaborators) || collaborators.length === 0) return [];
         if (!Array.isArray(cellValue) || cellValue.length === 0) return [];
         return cellValue;
       }
@@ -842,6 +839,43 @@ SQLStatisticsUtils.customChartSQLResult2JavaScript = (chart, sqlRows, chartSQLMa
     });
     result = result.concat(groupItems);
   });
+  const isCellValueAsAnArray = MULTIPLE_CELL_VALUE_COLUMN_TYPE_MAP[groupbyColumn.type];
+  if (isCellValueAsAnArray) {
+    const takenApart = [];
+    const assembled = [];
+    // take apart cell value of arrays, and then assemble them by name and group_name
+    result.forEach(item => {
+      const {
+        name: names
+      } = item;
+      if (!Array.isArray(names)) return;
+      names.forEach(name => {
+        takenApart.push({
+          ...item,
+          name,
+          original_name: name
+        });
+      });
+    });
+    takenApart.forEach(item => {
+      const {
+        name,
+        group_name
+      } = item;
+      const index = assembled.findIndex(r => r.name === name && r.group_name === group_name);
+      if (index < 0) {
+        assembled.push({
+          ...item
+        });
+      } else {
+        // TODO: formatted_value maybe need to be handled, but it's useless by now
+        assembled[index].value += item.value;
+      }
+    });
+    result = assembled;
+  }
+  BaseUtils.updateTableViewList(result, groupbyColumn, 'name', '');
+  BaseUtils.sortCharts(result, groupbyColumn, 'name');
   return result;
 };
 SQLStatisticsUtils.compareSQLResult2Javascript = (chart, sqlRows, chartSQLMap, columnMap, tables) => {
@@ -993,7 +1027,7 @@ SQLStatisticsUtils.combinationSQLResult2Javascript = (chart, sqlRows, chartSQLMa
     if (y_axis_right_summary_type === CHART_SUMMARY_TYPE.ADVANCED) {
       rightSummaryColumn = getTableColumnByKey(table, y_axis_right_summary_column);
     }
-    sqlRows.forEach(row => {
+    sqlRows.forEach((row, index) => {
       const cellValue = row[sqlGroupbyColumnKey];
       const summaryValue = row[sqlSummaryColumnKey];
       const key = _SQLStatisticsUtils.getGroupLabelFromDB(cellValue, groupbyColumn, chart.config);
@@ -1010,7 +1044,8 @@ SQLStatisticsUtils.combinationSQLResult2Javascript = (chart, sqlRows, chartSQLMa
           let itemIdx = result.findIndex(v => v.name === null);
           if (itemIdx < 0) {
             result.push({
-              color: '',
+              // color is defined by index of the name
+              color: STYLE_COLORS[0].colors[index % 12],
               name: null,
               rows: [row],
               value_left: valueLeft,
@@ -1019,15 +1054,15 @@ SQLStatisticsUtils.combinationSQLResult2Javascript = (chart, sqlRows, chartSQLMa
           } else {
             let itemRow = result[itemIdx];
             itemRow.rows.push(row);
-            itemRow.value_left = itemRow.value_left + summaryValue;
-            itemRow.value_right = itemRow.value_right + summaryValue;
+            itemRow.value_left = itemRow.value_left + valueLeft;
+            itemRow.value_right = itemRow.value_right + valueRight;
           }
         } else {
           key.forEach(item => {
             let itemIdx = result.findIndex(v => v.name === item);
             if (itemIdx < 0) {
               result.push({
-                color: '',
+                color: STYLE_COLORS[0].colors[index % 12],
                 name: item,
                 rows: [row],
                 value_left: valueLeft,
@@ -1036,8 +1071,8 @@ SQLStatisticsUtils.combinationSQLResult2Javascript = (chart, sqlRows, chartSQLMa
             } else {
               let itemRow = result[itemIdx];
               itemRow.rows.push(row);
-              itemRow.value_left = itemRow.value_left + summaryValue;
-              itemRow.value_right = itemRow.value_right + summaryValue;
+              itemRow.value_left = itemRow.value_left + valueLeft;
+              itemRow.value_right = itemRow.value_right + valueRight;
             }
           });
         }
@@ -1045,7 +1080,7 @@ SQLStatisticsUtils.combinationSQLResult2Javascript = (chart, sqlRows, chartSQLMa
         let itemIdx = result.findIndex(v => v.name === key);
         if (itemIdx < 0) {
           result.push({
-            color: '',
+            color: STYLE_COLORS[0].colors[index % 12],
             name: key,
             rows: [row],
             value_left: valueLeft,
@@ -1054,8 +1089,8 @@ SQLStatisticsUtils.combinationSQLResult2Javascript = (chart, sqlRows, chartSQLMa
         } else {
           let itemRow = result[itemIdx];
           itemRow.rows.push(row);
-          itemRow.value_left = itemRow.value_left + summaryValue;
-          itemRow.value_right = itemRow.value_right + summaryValue;
+          itemRow.value_left = itemRow.value_left + valueLeft;
+          itemRow.value_right = itemRow.value_right + valueRight;
         }
       }
     });
@@ -1078,7 +1113,6 @@ SQLStatisticsUtils.combinationSQLResult2Javascript = (chart, sqlRows, chartSQLMa
     if (!exists && leftSummaryColumn) {
       groupItems.push(groupItem);
     }
-    // leftSummaryColumn && !groupItems.includes(groupItem) && groupItems.push(groupItem);
     y_axis_left_group_by_numeric_columns.forEach((item, index) => {
       const column = getTableColumnByKey(table, item.column_key);
       if (column) {
@@ -1094,7 +1128,6 @@ SQLStatisticsUtils.combinationSQLResult2Javascript = (chart, sqlRows, chartSQLMa
         if (!exists) {
           groupItems.push(groupItem);
         }
-        // !groupItems.includes(groupItem) && groupItems.push(groupItem);
       }
     });
     sqlRows.forEach((item, index) => {
@@ -1104,24 +1137,58 @@ SQLStatisticsUtils.combinationSQLResult2Javascript = (chart, sqlRows, chartSQLMa
       if (y_axis_right_summary_type === CHART_SUMMARY_TYPE.ADVANCED) {
         valueRight = BaseUtils.getPrecisionNumber(valueRight, rightSummaryColumn.data);
       }
-      groupItems.forEach((groupItem, index) => {
-        var _groupItem$column;
-        const sqlName = groupItem.sqlName;
-        const groupName = (_groupItem$column = groupItem.column) === null || _groupItem$column === void 0 ? void 0 : _groupItem$column.name;
-        let value = item[sqlName] || 0;
-        if (y_axis_right_summary_type === CHART_SUMMARY_TYPE.ADVANCED) {
-          value = BaseUtils.getPrecisionNumber(value, leftSummaryColumn.data);
-        }
-        result.push({
-          name: key,
-          value_left: value,
-          value_right: valueRight,
-          group_name: groupName,
-          color: STYLE_COLORS[0].colors[index % 12]
+      if (isGroupbyColumnDataAsAnArray) {
+        key.forEach(key => {
+          groupItems.forEach((groupItem, index) => {
+            var _groupItem$column;
+            const sqlName = groupItem.sqlName;
+            const groupName = (_groupItem$column = groupItem.column) === null || _groupItem$column === void 0 ? void 0 : _groupItem$column.name;
+            let value = item[sqlName] || 0;
+            if (y_axis_right_summary_type === CHART_SUMMARY_TYPE.ADVANCED) {
+              value = BaseUtils.getPrecisionNumber(value, leftSummaryColumn.data);
+            }
+            const itemIdx = result.findIndex(v => {
+              var _groupItem$column2;
+              return v.group_name === ((_groupItem$column2 = groupItem.column) === null || _groupItem$column2 === void 0 ? void 0 : _groupItem$column2.name) && v.name === key;
+            });
+            if (itemIdx < 0) {
+              result.push({
+                name: key,
+                value_left: value,
+                value_right: valueRight,
+                group_name: groupName,
+                // for multiple numeric_columns, color is defined by group_name
+                color: STYLE_COLORS[0].colors[index % 12]
+              });
+            } else {
+              const itemRow = result[itemIdx];
+              itemRow.value_left = itemRow.value_left + value;
+              itemRow.value_right = itemRow.value_right + valueRight;
+            }
+          });
         });
-      });
+      } else {
+        groupItems.forEach((groupItem, index) => {
+          var _groupItem$column3;
+          const sqlName = groupItem.sqlName;
+          const groupName = (_groupItem$column3 = groupItem.column) === null || _groupItem$column3 === void 0 ? void 0 : _groupItem$column3.name;
+          let value = item[sqlName] || 0;
+          if (y_axis_right_summary_type === CHART_SUMMARY_TYPE.ADVANCED) {
+            value = BaseUtils.getPrecisionNumber(value, leftSummaryColumn.data);
+          }
+          result.push({
+            name: key,
+            value_left: value,
+            value_right: valueRight,
+            group_name: groupName,
+            color: STYLE_COLORS[0].colors[index % 12]
+          });
+        });
+      }
     });
   }
+  BaseUtils.updateTableViewList(result, groupbyColumn, 'name', '');
+  BaseUtils.sortCharts(result, groupbyColumn, 'name');
   return result;
 };
 SQLStatisticsUtils.dashboardSQLResult2JavaScript = (chart, sqlRows, chartSQLMap, columnMap, tables) => {

package/dist/utils/row-utils.js

@@ -1,4 +1,5 @@
-import { CellType, COLLABORATOR_COLUMN_TYPES, FORMULA_COLUMN_TYPES_MAP, FORMULA_RESULT_TYPE, isNumber, getNumberDisplayString } from 'dtable-utils';
+import { CellType, COLLABORATOR_COLUMN_TYPES, FORMULA_COLUMN_TYPES_MAP, FORMULA_RESULT_TYPE, isNumber, getNumberDisplayString, getOption, getColumnOptions } from 'dtable-utils';
+import { CHART_TYPE } from '../constants';
 import { getClientFormulaDisplayString } from './cell-format-utils';
 export const isEmptyGeolocationCell = (cellValue, format) => {
   if (!cellValue) return null;
@@ -28,7 +29,8 @@ export const isValidRow = (row, formulaRow, column, includeEmpty) => {
   }
   return cellValue || cellValue === 0;
 };
-export const getFormattedLabel = (column, name, collaborators) => {
+const RETURN_ARRAY_CHART_TYPES = [CHART_TYPE.TABLE];
+export const getFormattedLabel = (column, name, collaborators, chartType) => {
   let {
     type: columnType,
     data: columnData
@@ -50,10 +52,21 @@ export const getFormattedLabel = (column, name, collaborators) => {
     }
   } else if (columnType === CellType.MULTIPLE_SELECT) {
     // Return the array directly and process it in the rendering, file directly: src/view/wrapper/table/pivot-table-display-name.js
-    if (Array.isArray(name)) {
-      return name;
+    if (RETURN_ARRAY_CHART_TYPES.includes(chartType)) {
+      if (Array.isArray(name)) {
+        return name;
+      }
+      return [];
     }
-    return [];
+    const options = getColumnOptions(column);
+    let selectedOption = getOption(options, name);
+    let {
+      name: optionName,
+      color: optionColor
+    } = selectedOption || {};
+    // TODO：use option‘s color
+    // return { name: optionName, color: optionColor };
+    return optionName;
   } else if (columnType === CellType.COLLABORATOR) {
     let collaborator = collaborators.find(item => {
       let email = name;

package/dist/view/wrapper/bar-group.js

@@ -84,10 +84,9 @@ class BarGroup extends ChartComponent {
       } = chart.config;
       const theme = CHART_THEME_COLOR[globalTheme];
       const isGroup = type === CHART_TYPE.BAR_GROUP;
-      const isStack = type === CHART_TYPE.BAR_STACK;
       const newData = this.getChartGroupData(data);
-      const groupByColumn = this.getColumn(tables, table_id, column_groupby_column_key);
-      const useSingleSelectColumnColor = (groupByColumn === null || groupByColumn === void 0 ? void 0 : groupByColumn.type) === CellType.SINGLE_SELECT && isStack && color_theme === STACK_AND_PIE_CHART_THEMES_OPTIONS.SINGLE_SELECT_COLUMN_COLORS;
+      const column_groupby_column = this.getColumn(tables, table_id, column_groupby_column_key);
+      const useSingleSelectColumnColor = (column_groupby_column === null || column_groupby_column === void 0 ? void 0 : column_groupby_column.type) === CellType.SINGLE_SELECT && color_theme === STACK_AND_PIE_CHART_THEMES_OPTIONS.SINGLE_SELECT_COLUMN_COLORS;
       let singleBarWidth, singleBarRadius;
       // y-axis label width：6 + 10
       const chartWidth = this.chart.width - 6 - 10;
@@ -147,7 +146,9 @@ class BarGroup extends ChartComponent {
         type: 'dodge',
         marginRatio: 0
       };
-      this.setColorMap(data, chartColorTheme);
+
+      // use single select column color
+      useSingleSelectColumnColor ? this.setSingleSelectColorMap(data) : this.setColorMap(data, chartColorTheme);
       this.chart.interval().animate({
         // custom update animation
         update: {
@@ -163,8 +164,8 @@ class BarGroup extends ChartComponent {
           lineWidth: 1
         },
         position: type === CHART_TYPE.BAR_STACK ? 'middle' : ''
-      }).position('name*value').size(singleBarWidth).color('group_name*group_color', (group_name, group_color) => {
-        return useSingleSelectColumnColor ? group_color : this.colorMap[group_name] || CHART_STYLE_COLORS[0];
+      }).position('name*value').size(singleBarWidth).color('group_name', group_name => {
+        return this.colorMap[group_name] || CHART_STYLE_COLORS[0];
       }).tooltip('name*value*group_name*raw_name', (name, value, group_name, raw_name) => {
         return {
           title: !name && typeof name !== 'number' ? intl.get(EMPTY_NAME) : name,
@@ -197,7 +198,7 @@ class BarGroup extends ChartComponent {
       if (isGroup) {
         this.formatDataByName(data);
       }
-      this.setToolTip(isGroup, summaryColumn, y_axis_summary_method);
+      this.setToolTip(isGroup, summaryColumn, y_axis_summary_method, useSingleSelectColumnColor);
       isFunction(customRender) && customRender(this.chart);
       this.setNameLabelAndTooltip(theme, this.labelCount);
       this.setValueLabel(theme);

package/dist/view/wrapper/chart-component.js

@@ -465,6 +465,13 @@ export default class ChartComponent extends Component {
       }, {});
       this.colorMap = colorMap;
     };
+    this.setSingleSelectColorMap = data => {
+      const colorMap = {};
+      data.forEach(item => {
+        colorMap[item.group_name] = item.group_color || item.color;
+      });
+      this.colorMap = colorMap;
+    };
     this.formatDataByName = data => {
       const formattedItems = {};
       data.forEach(item => {
@@ -478,7 +485,7 @@ export default class ChartComponent extends Component {
       });
       this.formatedDataByName = formattedItems;
     };
-    this.getToolTipSettings = (isGroup, summaryColumn, y_axis_summary_method) => {
+    this.getToolTipSettings = (isGroup, summaryColumn, y_axis_summary_method, useSingleSelectColumnColor) => {
       const obj = {
         showMarkers: false,
         containerTpl: "<div class=\"g2-tooltip\">\n        <div class=\"g2-tooltip-title\">{title}</div>\n        <ul class=\"g2-tooltip-list\"></ul>\n      </div>",
@@ -537,7 +544,7 @@ export default class ChartComponent extends Component {
           const name = activeItem.data.name;
           return this.formatedDataByName[name].map(item => {
             return {
-              color: this.colorMap[item.group_name] || CHART_STYLE_COLORS[0],
+              color: useSingleSelectColumnColor ? item.group_color : this.colorMap[item.group_name] || CHART_STYLE_COLORS[0],
               data: item,
               name: !item.group_name && typeof item.group_name !== 'number' ? intl.get(EMPTY_NAME) : item.group_name,
               title: item.name,
@@ -548,8 +555,8 @@ export default class ChartComponent extends Component {
       }
       return obj;
     };
-    this.setToolTip = (isGroup, summaryColumn, y_axis_summary_method) => {
-      const settings = this.getToolTipSettings(isGroup, summaryColumn, y_axis_summary_method);
+    this.setToolTip = (isGroup, summaryColumn, y_axis_summary_method, useSingleSelectColumnColor) => {
+      const settings = this.getToolTipSettings(isGroup, summaryColumn, y_axis_summary_method, useSingleSelectColumnColor);
       this.chart.tooltip(settings);
     };
     this.setToolTipForLine = () => {

package/dist/view/wrapper/horizontal-bar-group.js

@@ -71,9 +71,8 @@ class HorizontalBarGroup extends HorizontalComponent {
         color_theme
       } = chart.config;
       const isGroup = type === CHART_TYPE.HORIZONTAL_GROUP_BAR;
-      const isStack = type === CHART_TYPE.STACKED_HORIZONTAL_BAR;
       const groupByColumn = this.getColumn(tables, table_id, column_groupby_column_key);
-      const useSingleSelectColumnColor = (groupByColumn === null || groupByColumn === void 0 ? void 0 : groupByColumn.type) === CellType.SINGLE_SELECT && isStack && color_theme === STACK_AND_PIE_CHART_THEMES_OPTIONS.SINGLE_SELECT_COLUMN_COLORS;
+      const useSingleSelectColumnColor = (groupByColumn === null || groupByColumn === void 0 ? void 0 : groupByColumn.type) === CellType.SINGLE_SELECT && color_theme === STACK_AND_PIE_CHART_THEMES_OPTIONS.SINGLE_SELECT_COLUMN_COLORS;
       const newData = this.getChartGroupData(data);
       let singleBarWidth, singleBarRadius;
       // y-axis label width：(6 + 10)
@@ -99,7 +98,9 @@ class HorizontalBarGroup extends HorizontalComponent {
         type: 'dodge',
         marginRatio: 0
       };
-      this.setColorMap(data, chartColorTheme);
+
+      // use single select column color
+      useSingleSelectColumnColor ? this.setSingleSelectColorMap(data) : this.setColorMap(data, chartColorTheme);
       this.chart.interval().animate({
         // custom update animation
         update: {
@@ -114,8 +115,8 @@ class HorizontalBarGroup extends HorizontalComponent {
           stroke: '#fff',
           lineWidth: 1
         }
-      }).position('name*value').size(singleBarWidth).color('group_name*group_color', (group_name, group_color) => {
-        return useSingleSelectColumnColor ? group_color : this.colorMap[group_name] || CHART_STYLE_COLORS[0];
+      }).position('name*value').size(singleBarWidth).color('group_name', group_name => {
+        return this.colorMap[group_name] || CHART_STYLE_COLORS[0];
       }).tooltip('name*value*group_name*raw_name', (name, value, group_name, raw_name) => {
         return {
           title: !name && typeof name !== 'number' ? intl.get(EMPTY_NAME) : name,

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

@@ -23,6 +23,7 @@ class OneDimensionTableNoNumericColumns extends PureComponent {
         name: groupName
       } = groupbyColumn;
       const isCount = summary_type === CHART_SUMMARY_TYPE.COUNT;
+      this.isCount = isCount;
       const columnName = isCount ? intl.get('Amount') : this.getColumnName();
       const {
         rowIdx: selectRowIdx,
@@ -63,7 +64,7 @@ class OneDimensionTableNoNumericColumns extends PureComponent {
       return '';
     };
     this.toggleRecords = (cell, selectedCell) => {
-      if (window.isMobile) return;
+      if (window.isMobile || !this.isCount) return;
       const {
         rowIdx: selectedRowIdx,
         cellIdx: selectedCellIdx
@@ -76,8 +77,17 @@ class OneDimensionTableNoNumericColumns extends PureComponent {
       this.props.toggleRecords(cell, selectedCell);
     };
     this.onClickTotals = (recordsList, selectedCell) => {
+      if (!this.isCount) return; // only count support show details
       if (window.isMobile) return;
-      const rows = recordsList.flat();
+      const rows = recordsList.reduce((acc, cur) => {
+        const {
+          rows
+        } = cur;
+        if (Array.isArray(rows)) {
+          acc = acc.concat(rows);
+        }
+        return acc;
+      }, []);
       const total = rows.length;
       this.toggleRecords({
         rows,
@@ -185,6 +195,10 @@ class OneDimensionTableNoNumericColumns extends PureComponent {
           'pivot-empty-cell': !isValidSummaryDisplayValue,
           'selected-pivot-cell': isSelectTotal
         }),
+        onClick: () => this.onClickTotals(pivotColumnCells, {
+          rowIdx: pivot_rows.length,
+          cellIdx: 0
+        }),
         title: isValidSummaryDisplayValue ? summaryDisplayValue : ''
       }, isValidSummaryDisplayValue ? summaryDisplayValue : /*#__PURE__*/React.createElement("i", null), /*#__PURE__*/React.createElement("span", {
         className: classnames({

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

@@ -1,5 +1,6 @@
 import React, { PureComponent } from 'react';
 import classnames from 'classnames';
+import { isNumber } from 'dtable-utils';
 import { BaseUtils } from '../../../utils';
 import intl from '../../../intl';
 import { CHART_THEME_COLOR } from '../../../constants';
@@ -22,14 +23,24 @@ class OneDimensionTableWithNumericColumns extends PureComponent {
         });
       }
     };
+    this.getRowTotal = (rowTotal, value) => {
+      if (value && isNumber(value)) {
+        return rowTotal + value;
+      }
+      return rowTotal;
+    };
     this.renderHeader = () => {
       const {
         result,
         groupbyColumn,
         columnGroupbyColumn,
         selectedCell,
-        chartTableColumns
+        chartTableColumns,
+        chart
       } = this.props;
+      const {
+        display_total = true
+      } = chart.config;
       const {
         name: groupName
       } = groupbyColumn;
@@ -43,6 +54,7 @@ class OneDimensionTableWithNumericColumns extends PureComponent {
         rowIdx: selectRowIdx,
         cellIdx: selectedCellIdx
       } = selectedCell || {};
+      const isSelectedTotalHeaderBottom = selectRowIdx === 0 && selectedCellIdx === (pivot_columns === null || pivot_columns === void 0 ? void 0 : pivot_columns.length);
       return /*#__PURE__*/React.createElement("thead", {
         className: "seatable-table-header-sm"
       }, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("th", {
@@ -59,7 +71,11 @@ class OneDimensionTableWithNumericColumns extends PureComponent {
           }),
           key: "pivot-column-".concat(index)
         }, /*#__PURE__*/React.createElement("div", null, column.name));
-      })));
+      }), display_total && /*#__PURE__*/React.createElement("th", {
+        className: classnames('pivot-table-header', {
+          'selected-pivot-cell-top': isSelectedTotalHeaderBottom
+        })
+      }, /*#__PURE__*/React.createElement("div", null, intl.get('Total')))));
     };
     this.toggleRecords = (cell, selectedCell) => {
       if (window.isMobile) return;
@@ -83,6 +99,7 @@ class OneDimensionTableWithNumericColumns extends PureComponent {
         total
       }, selectedCell);
     };
+    // click records only support summary_type is COUNT
     this.renderRows = () => {
       const {
         result,
@@ -108,13 +125,20 @@ class OneDimensionTableWithNumericColumns extends PureComponent {
       const pivotRowsLen = Array.isArray(pivot_rows) ? pivot_rows.length : 0;
       let pivotColumnCells = [];
       const isSelectRowTotalCellRight = selectRowIdx === pivotRowsLen && selectedCellIdx === 0;
+      let lastRowTotal = 0;
+      let lastRows = [];
       return /*#__PURE__*/React.createElement("tbody", null, pivotRowsLen > 0 && pivot_rows.map((rowItem, rowIdx) => {
         const {
           name,
           total,
           rows
         } = rowItem;
+        lastRows.push(rows);
         const isSelectedRowNameRight = selectRowIdx === rowIdx && selectedCellIdx === 0;
+        const isSelectedTotalCell = selectRowIdx === rowIdx && selectedCellIdx === (pivot_columns === null || pivot_columns === void 0 ? void 0 : pivot_columns.length);
+        const isSelectedTotalCellTop = selectRowIdx - 1 === rowIdx && selectedCellIdx === (pivot_columns === null || pivot_columns === void 0 ? void 0 : pivot_columns.length);
+        const isSelectedTotalCellLeft = selectRowIdx === rowIdx && selectedCellIdx - 1 === (pivot_columns === null || pivot_columns === void 0 ? void 0 : pivot_columns.length) - 1;
+        let rowTotal = 0;
         if (!Array.isArray(pivot_columns)) {
           pivotColumnCells[rowIdx] = rowItem.rows || [];
         }
@@ -137,6 +161,7 @@ class OneDimensionTableWithNumericColumns extends PureComponent {
             key
           } = columnMap;
           const column = chartTableColumns.find(item => item.key === key);
+          rowTotal = this.getRowTotal(rowTotal, total[key]);
           const displayValue = BaseUtils.getSummaryValueDisplayString(column, total[key], this.summaryColumnsMethodMap[key]);
           const isValidDisplayValue = BaseUtils.isValidValue(displayValue, display_empty);
           if (Array.isArray(rows) && rows.length > 0) {
@@ -153,22 +178,29 @@ class OneDimensionTableWithNumericColumns extends PureComponent {
               'selected-pivot-cell-top': isSelectedCellTop,
               'selected-pivot-cell-left': isSelectedCellLeft
             }),
-            key: "table-cell-".concat(cellIdx),
-            onClick: () => this.toggleRecords({
-              rows,
-              name: rowItem === null || rowItem === void 0 ? void 0 : rowItem.name,
-              total: total[key]
-            }, {
-              rowIdx,
-              cellIdx
-            }),
+            key: "table-cell-".concat(cellIdx)
+            // onClick={() => this.toggleRecords({ rows, name: rowItem?.name, total: total[key] }, { rowIdx, cellIdx })}
+            ,
             title: isValidDisplayValue ? displayValue : ''
           }, isValidDisplayValue ? displayValue : /*#__PURE__*/React.createElement("i", null), /*#__PURE__*/React.createElement("span", {
             className: classnames({
               'selected-pivot-cell-border': isSelectedCell
             })
           }));
-        }));
+        }), display_total && /*#__PURE__*/React.createElement("td", {
+          className: classnames('pivot-cell', {
+            'selected-pivot-cell': isSelectedTotalCell,
+            'selected-pivot-cell-top': isSelectedTotalCellTop,
+            'selected-pivot-cell-left': isSelectedTotalCellLeft
+          })
+          // onClick={() => this.toggleRecords({ rows, name: rowItem?.name, total: rowTotal }, { rowIdx })}
+          ,
+          title: rowTotal ? rowTotal : 0
+        }, rowTotal ? rowTotal : /*#__PURE__*/React.createElement("i", null, "0"), /*#__PURE__*/React.createElement("span", {
+          className: classnames({
+            'selected-pivot-cell-border': isSelectedTotalCell
+          })
+        })));
       }), display_total && /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
         className: classnames('pivot-column-total', {
           'selected-pivot-cell-left': isSelectRowTotalCellRight
@@ -181,27 +213,30 @@ class OneDimensionTableWithNumericColumns extends PureComponent {
         const isValidTotalDisplayValue = BaseUtils.isValidValue(totalDisplayValue, display_empty);
         const isSelectRowTotalCell = selectRowIdx === pivot_rows.length && selectedCellIdx === index;
         const isSelectRowTotalCellLeft = selectRowIdx === pivot_rows.length && selectedCellIdx - 1 === index;
+        lastRowTotal = this.getRowTotal(lastRowTotal, pivotColumnTotal);
         return /*#__PURE__*/React.createElement("td", {
           className: classnames('pivot-cell', {
             'pivot-empty-cell': !isValidTotalDisplayValue,
             'selected-pivot-cell': isSelectRowTotalCell,
             'selected-pivot-cell-left': isSelectRowTotalCellLeft
           }),
-          key: "total-cell-".concat(index),
-          onClick: () => this.toggleRecords({
-            rows: pivotColumnCell,
-            total: pivot_columns_total[c.key]
-          }, {
-            rowIdx: pivot_rows.length,
-            cellIdx: index
-          }),
+          key: "total-cell-".concat(index)
+          // onClick={() => this.toggleRecords({ rows: pivotColumnCell, total: pivot_columns_total[c.key] }, { rowIdx: pivot_rows.length, cellIdx: index })}
+          ,
           title: totalDisplayValue
         }, isValidTotalDisplayValue ? totalDisplayValue : /*#__PURE__*/React.createElement("i", null), /*#__PURE__*/React.createElement("span", {
           className: classnames({
             'selected-pivot-cell-border': isSelectRowTotalCell
           })
         }));
-      })));
+      }), /*#__PURE__*/React.createElement("td", {
+        className: classnames('pivot-cell', {
+          'pivot-empty-cell': !BaseUtils.isValidValue(lastRowTotal, display_empty)
+        })
+        // onClick={() => this.toggleRecords({ rows: lastRows, total: lastRowTotal }, { rowIdx: pivot_rows.length, cellIdx: pivot_columns?.length })}
+        ,
+        title: lastRowTotal
+      }, BaseUtils.isValidValue(lastRowTotal, display_empty) ? lastRowTotal : /*#__PURE__*/React.createElement("i", null))));
     };
     this.init(_props);
   }

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

@@ -103,6 +103,11 @@ class PivotTableDisplayName extends React.Component {
       const {
         collaborators
       } = this.state;
+
+      // link formula column is collaborator
+      if (type === CellType.LINK_FORMULA && (data === null || data === void 0 ? void 0 : data.array_type) === CellType.COLLABORATOR) {
+        type = CellType.COLLABORATOR;
+      }
       let displayName;
       switch (type) {
         case CellType.SINGLE_SELECT:
@@ -147,9 +152,20 @@ class PivotTableDisplayName extends React.Component {
             const {
               original_name
             } = rowData || {};
-            let validValue = Array.isArray(value) && value.length !== 0 ? value : [];
+            let validValue;
+            if (Array.isArray(value)) {
+              validValue = value;
+            } else if (value) {
+              validValue = [value];
+            } else {
+              validValue = [];
+            }
             if (original_name) {
-              validValue = [original_name];
+              if (!Array.isArray(original_name)) {
+                validValue = [original_name];
+              } else {
+                validValue = original_name;
+              }
             }
             const unknowEmails = validValue.filter(email => !getCollaborator(collaborators, email));
 

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

@@ -1,7 +1,6 @@
 import React, { PureComponent } from 'react';
 import classnames from 'classnames';
-import { CellType } from 'dtable-utils';
-import classNames from 'classnames';
+import { CellType, isNumber } from 'dtable-utils';
 import { BaseUtils } from '../../../utils';
 import intl from '../../../intl';
 import { CHART_SUMMARY_TYPE, CHART_THEME_COLOR } from '../../../constants';
@@ -104,12 +103,12 @@ class TwoDimensionTable extends PureComponent {
             globalTheme: globalTheme
           }));
         })));
-      }), /*#__PURE__*/React.createElement("th", {
+      }), display_total && /*#__PURE__*/React.createElement("th", {
         className: "pivot-table-header"
       })));
     };
     this.toggleRecords = (cell, selectedCell) => {
-      if (window.isMobile) return;
+      if (window.isMobile || !this.isCount) return;
       const {
         rowIdx: selectedRowIdx,
         cellIdx: selectedCellIdx
@@ -122,7 +121,7 @@ class TwoDimensionTable extends PureComponent {
       this.props.toggleRecords(cell, selectedCell);
     };
     this.onClickTotals = (recordsList, selectedCell) => {
-      if (window.isMobile) return;
+      if (window.isMobile || !this.isCount) return;
       const rows = recordsList.flat();
       const total = rows.length;
       this.toggleRecords({
@@ -148,6 +147,12 @@ class TwoDimensionTable extends PureComponent {
         })
       }, /*#__PURE__*/React.createElement("i", null));
     };
+    this.getRowTotal = (rowTotal, value) => {
+      if (value && isNumber(value)) {
+        return rowTotal + value;
+      }
+      return rowTotal;
+    };
     this.renderRows = () => {
       const {
         result,
@@ -181,6 +186,7 @@ class TwoDimensionTable extends PureComponent {
       const tableTotalDisplayValue = BaseUtils.getSummaryValueDisplayString(summaryColumn, pivot_table_total, summaryMethod);
       const isValidTableTotalDisplayValue = BaseUtils.isValidValue(tableTotalDisplayValue, display_empty);
       const isCount = summary_type === CHART_SUMMARY_TYPE.COUNT;
+      this.isCount = isCount;
       const isCollaborator = groupbyColumn.type === CellType.COLLABORATOR;
       return /*#__PURE__*/React.createElement("tbody", null, pivotRowsLen > 0 && pivot_rows.map((rowItem, rowIdx) => {
         let {
@@ -199,8 +205,7 @@ class TwoDimensionTable extends PureComponent {
         if (!Array.isArray(pivot_columns)) {
           pivotColumnCells[rowIdx] = rowItem.rows || [];
         }
-        const summaryDisplayValue = BaseUtils.getSummaryValueDisplayString(summaryColumn, total, summaryMethod);
-        const isValidSummaryDisplayValue = BaseUtils.isValidValue(summaryDisplayValue, display_empty);
+        let rowTotal = 0;
         return /*#__PURE__*/React.createElement("tr", {
           key: 'table-row' + rowIdx
         }, /*#__PURE__*/React.createElement("td", {
@@ -222,6 +227,7 @@ class TwoDimensionTable extends PureComponent {
           if (isCount) {
             const displayValue = total;
             const isValidDisplayValue = BaseUtils.isValidValue(displayValue, display_empty);
+            rowTotal = this.getRowTotal(rowTotal, displayValue);
             if (c && Array.isArray(c.rows) && c.rows.length > 0) {
               pivotRowCells.push(...c.rows);
               if (pivotColumnCells[cellIdx]) {
@@ -262,6 +268,7 @@ class TwoDimensionTable extends PureComponent {
             const summaryCellColumn = summaryColumns === null || summaryColumns === void 0 ? void 0 : summaryColumns.find(item => item.key === summaryCellColumnKey);
             const displayValue = BaseUtils.getSummaryValueDisplayString(summaryCellColumn, summaryCell[1], summaryMethod);
             const isValidDisplayValue = BaseUtils.isValidValue(displayValue, display_empty);
+            rowTotal = this.getRowTotal(rowTotal, summaryCell[1]);
             return /*#__PURE__*/React.createElement("div", {
               key: "table-cell-".concat(cellIdx, "-").concat(idx),
               className: classnames('pivot-cell', {
@@ -278,7 +285,6 @@ class TwoDimensionTable extends PureComponent {
           }), !total && !(typeof total === 'number') && this.renderEmpty(summaryColumns, cellIdx)));
         }), display_total && /*#__PURE__*/React.createElement("td", {
           className: classnames('pivot-cell', {
-            'pivot-empty-cell': !isValidSummaryDisplayValue,
             'selected-pivot-cell': isSelectedTotalCell,
             'selected-pivot-cell-top': isSelectedTotalCellTop,
             'selected-pivot-cell-left': isSelectedTotalCellLeft
@@ -291,8 +297,8 @@ class TwoDimensionTable extends PureComponent {
             rowIdx,
             cellIdx: cells.length
           }),
-          title: summaryDisplayValue
-        }, isValidSummaryDisplayValue ? summaryDisplayValue : /*#__PURE__*/React.createElement("i", null), /*#__PURE__*/React.createElement("span", {
+          title: rowTotal
+        }, BaseUtils.isValidValue(rowTotal, display_empty) ? rowTotal : /*#__PURE__*/React.createElement("i", null), /*#__PURE__*/React.createElement("span", {
           className: classnames({
             'selected-pivot-cell-border': isSelectedTotalCell
           })

package/dist/view/wrapper/trend.js

@@ -77,11 +77,11 @@ class Trend extends Component {
       } = data || {};
       let color, icon;
       if (type === TREND_TYPES.UP) {
-        color = '#fa5757';
+        color = '#34aa95';
         icon = 'dtable-icon-up1';
       }
       if (type === TREND_TYPES.DOWN) {
-        color = '#34aa95';
+        color = '#fa5757';
         icon = 'dtable-icon-down1';
       }
       if (type === TREND_TYPES.EQUAL) {

package/package.json

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