sea-chart 0.0.89 → 0.0.91

package/dist/constants/index.js

@@ -6,6 +6,11 @@ import { CHART_TYPE, CHART_TYPE_SHOW, CHART_TYPES } from './type';
 import { CHART_TYPE_IMAGE } from './type-image';
 import { regions } from './regions';
 import { TABLE_DIMENSIONS } from './table';
+export const TREND_TYPES = {
+  UP: 'up',
+  DOWN: 'down',
+  EQUAL: 'equal'
+};
 export const CHART_STYLE_COLORS = ['#5B8FF9', '#5AD8A6', '#5D7092', '#F6BD16', '#6F5EF9', '#6DC8EC', '#945FB9', '#FF9845', '#1E9493', '#FF99C3'];
 export const ONLY_NEED_NUMBER_OPTIONS_CHART_TYPE = [CHART_TYPE.COMPLETENESS, CHART_TYPE.COMPLETENESS_GROUP, CHART_TYPE.SCATTER];
 export const COMPLETENESS_GROUPBY_SUPPORTED_COLUMN_TYPE = [CellType.COLLABORATOR, CellType.TEXT, CellType.SINGLE_SELECT];

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

@@ -692,6 +692,22 @@ BaseUtils.sortCharts = (charts, column, sortKey) => {
             return sortDate(current, next, sortType);
           }
         case CellType.SINGLE_SELECT:
+          {
+            const {
+              name: currentName,
+              group_name: currentGroupName
+            } = currResult || {};
+            const {
+              name: nextName,
+              group_name: nextGroupName
+            } = nextResult || {};
+            const current = currentGroupName || currentName;
+            const next = nextGroupName || nextName;
+            return sortSingleSelect(current, next, {
+              sort_type: sortType,
+              option_id_index_map: optionIdIndexMap
+            });
+          }
         case CellType.MULTIPLE_SELECT:
           {
             return sortSingleSelect(current, next, {

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

@@ -175,6 +175,7 @@ async function calculateGroupingChart(chart, value, _ref2) {
   results = results.map(result => {
     return {
       ...result,
+      group_color: result.color,
       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

@@ -284,10 +284,40 @@ 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');
 
@@ -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/original-data-utils/trend-calculator.js

@@ -1,7 +1,7 @@
 import dayjs from 'dayjs';
 import quarterOfYear from 'dayjs/plugin/quarterOfYear';
 import { FORMULA_COLUMN_TYPES_MAP, isNumber, getTableById, getViewById, getTableColumnByKey } from 'dtable-utils';
-import { CHART_SUMMARY_TYPE } from '../../../constants';
+import { CHART_SUMMARY_TYPE, TREND_TYPES } from '../../../constants';
 import BaseUtils from '../base-utils';
 import { getCellValue } from '../../row-utils';
 import { getCompareDate, summaryDurationResult } from '../../trend-utils';
@@ -94,11 +94,22 @@ async function calculator(chart, value, _ref) {
     result = '--';
     previousValues = 0;
   }
+  let type;
+  if (currentValues > previousValues) {
+    type = TREND_TYPES.UP;
+  } else if (currentValues < previousValues) {
+    type = TREND_TYPES.DOWN;
+  } else if (currentValues === previousValues) {
+    type = TREND_TYPES.EQUAL;
+  }
+  if (currentValues === 0 && previousValues === 0) {
+    result = '0%';
+  }
   return {
     latest: currentValues,
     previous: previousValues,
     result,
-    type: currentValues >= previousValues ? 'up' : 'down'
+    type
   };
 }
 export default calculator;

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

@@ -2,10 +2,9 @@ var _SQLStatisticsUtils;
 import dayjs from 'dayjs';
 import { CellType, MULTIPLE_CELL_VALUE_COLUMN_TYPE_MAP, getFormulaDisplayString, getPrecisionNumber, getTableById, getTableColumnByKey, isNumber, DateUtils } from 'dtable-utils';
 import { isObject } from 'lodash';
-import { CHART_SUMMARY_TYPE, CHART_TYPE, SUPPORT_DATA_SORT_CHART_TYPES, TABLE_DIMENSIONS, Y_AXIS_TYPE_PREFIX, STYLE_COLORS } from '../../constants';
+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,9 +56,8 @@ 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.filter(email => collaborators.find(option => option.email === email));
+        return cellValue;
       }
     case CellType.CREATOR:
     case CellType.LAST_MODIFIER:
@@ -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) => {
@@ -1454,11 +1521,22 @@ SQLStatisticsUtils.trendMapChartSQLResult2JavaScript = (chart, sqlRows, chartSQL
     result = '--';
     comparedValue = 0;
   }
+  let type;
+  if (compareValue > comparedValue) {
+    type = TREND_TYPES.UP;
+  } else if (compareValue < comparedValue) {
+    type = TREND_TYPES.DOWN;
+  } else if (compareValue === comparedValue) {
+    type = TREND_TYPES.EQUAL;
+  }
+  if (compareValue === 0 && comparedValue === 0) {
+    result = '0%';
+  }
   return {
     latest: compareValue,
     previous: comparedValue,
     result,
-    type: compareValue >= comparedValue ? 'up' : 'down'
+    type
   };
 };
 SQLStatisticsUtils.sqlResult2JavaScript = (chart, sqlRows, chartSQLMap, columnMap, tables, params) => {

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,10 @@ export const isValidRow = (row, formulaRow, column, includeEmpty) => {
   }
   return cellValue || cellValue === 0;
 };
-export const getFormattedLabel = (column, name, collaborators) => {
+
+// currently just COMBINATION, if something wrong of MULTIPLE_SELECT happens find out, add more types here
+const FORMAT_MULTIPLE_SELECT_CHART_TYPES = [CHART_TYPE.COMBINATION, CHART_TYPE.BAR_CUSTOM];
+export const getFormattedLabel = (column, name, collaborators, chartType) => {
   let {
     type: columnType,
     data: columnData
@@ -49,6 +53,17 @@ export const getFormattedLabel = (column, name, collaborators) => {
       return optionName;
     }
   } else if (columnType === CellType.MULTIPLE_SELECT) {
+    if (FORMAT_MULTIPLE_SELECT_CHART_TYPES.includes(chartType)) {
+      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;
+    }
     // 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;

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 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;
       let singleBarWidth, singleBarRadius;
       // y-axis label width：6 + 10
       const chartWidth = this.chart.width - 6 - 10;
@@ -197,7 +196,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

@@ -478,7 +478,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 +537,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 +548,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/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;
@@ -108,13 +124,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 +160,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) {
@@ -168,7 +192,25 @@ class OneDimensionTableWithNumericColumns extends PureComponent {
               '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 === null || rowItem === void 0 ? void 0 : 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,6 +223,7 @@ 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,
@@ -201,7 +244,19 @@ class OneDimensionTableWithNumericColumns extends PureComponent {
             '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 === null || pivot_columns === void 0 ? void 0 : 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,7 +103,7 @@ class TwoDimensionTable extends PureComponent {
             globalTheme: globalTheme
           }));
         })));
-      }), /*#__PURE__*/React.createElement("th", {
+      }), display_total && /*#__PURE__*/React.createElement("th", {
         className: "pivot-table-header"
       })));
     };
@@ -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,
@@ -199,8 +204,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 +226,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 +267,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 +284,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 +296,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

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import classNames from 'classnames';
 import { BaseUtils } from '../../utils';
 import intl from '../../intl';
-import { BASIC_NUMBER_CARD_CALCULATION_METHOD, EMPTY_NAME, CHART_SUMMARY_TYPE, CHART_THEME_COLOR } from '../../constants';
+import { BASIC_NUMBER_CARD_CALCULATION_METHOD, EMPTY_NAME, CHART_SUMMARY_TYPE, CHART_THEME_COLOR, TREND_TYPES } from '../../constants';
 class Trend extends Component {
   constructor() {
     super(...arguments);
@@ -75,12 +75,19 @@ class Trend extends Component {
         type,
         previous
       } = data || {};
-      let color = '#fa5757',
-        icon = 'dtable-icon-down1';
-      if (type === 'up') {
+      let color, icon;
+      if (type === TREND_TYPES.UP) {
         color = '#34aa95';
         icon = 'dtable-icon-up1';
       }
+      if (type === TREND_TYPES.DOWN) {
+        color = '#fa5757';
+        icon = 'dtable-icon-down1';
+      }
+      if (type === TREND_TYPES.EQUAL) {
+        color = '#666666';
+        icon = 'dtable-icon-narrow';
+      }
       if (labelFontSize <= 12) {
         return /*#__PURE__*/React.createElement("span", {
           style: {

package/package.json

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