sea-chart 0.0.1 → 0.0.2

package/dist/utils/chart-utils.js

@@ -0,0 +1,1803 @@
+var _class;
+import shallowEqual from 'shallowequal';
+import dayjs from 'dayjs';
+import { CellType, COLLABORATOR_COLUMN_TYPES, FORMULA_COLUMN_TYPES_MAP, FORMULA_RESULT_TYPE, MULTIPLE_CELL_VALUE_COLUMN_TYPE_MAP, getDateDisplayString, getFormulaDisplayString, getNumberDisplayString, getOption, getPrecisionNumber, getTableById, getTableColumnByKey, isNumber, isNumericColumn, isDateColumn, sortText, sortNumber, sortDate, sortSingleSelect, sortFormula, getColumnOptions } from 'dtable-utils';
+import { PIE_CHART_COLORS, CHART_SUMMARY_TYPE, CHART_SUPPORT_SORT_COLUMNS, CHART_TYPE, CHART_STYLE_SETTING_KEYS, DEFAULT_LABEL_FONT_SIZE, DEFAULT_NUMBER_FORMAT_OBJECT, SUPPORT_DATA_SORT_CHART_TYPES, X_AXIS_IS_GROUPBY_COLUMN_KEY_CHART_TYPES, STYLE_COLORS, LABEL_COLORS } from '../constants';
+import chartColumn2SqlColumn, { summaryMethodColumn2SqlColumn } from './column-2-sql-column';
+import { getClientFormulaDisplayString, getClientLinkDisplayString } from './cell-format-utils';
+import { getKnownCollaboratorByEmail, generateDefaultUser } from './collaborator-utils';
+import { getDateColumnFormat, getColumnByKey } from './column-utils';
+import ObjectUtils from './object-utils';
+import intl from '../intl';
+import context from '../context';
+class ChartUtils {
+  static formatGroupsLabel(results, chart, tables) {
+    if (!results) return;
+    let groupby_column_key, column_groupby_column_key;
+    const {
+      type,
+      config
+    } = chart;
+    if (X_AXIS_IS_GROUPBY_COLUMN_KEY_CHART_TYPES.includes(type)) {
+      groupby_column_key = config.groupby_column_key;
+    } else {
+      groupby_column_key = config.x_axis_column_key;
+      column_groupby_column_key = config.column_groupby_column_key;
+    }
+    const {
+      table_id
+    } = config;
+    const table = getTableById(tables, table_id);
+    const groupbyColumn = getTableColumnByKey(table, groupby_column_key);
+    const columnGroupbyColumn = getTableColumnByKey(table, column_groupby_column_key);
+    results.forEach(item => {
+      const {
+        name,
+        group_name
+      } = item;
+      if (groupbyColumn) {
+        this.convertResultName(item, groupbyColumn, name, 'name', 'color');
+      }
+      if (columnGroupbyColumn) {
+        this.convertResultName(item, columnGroupbyColumn, group_name, 'group_name', 'group_color');
+      }
+    });
+  }
+  static convertResultName(result, column, name, nameKey, colorKey) {
+    const {
+      type: columnType,
+      data: columnData
+    } = column;
+    if (columnType === CellType.SINGLE_SELECT || columnType === CellType.MULTIPLE_SELECT) {
+      const options = getColumnOptions(column);
+      const selectedOption = getOption(options, name);
+      if (selectedOption) {
+        result[nameKey] = selectedOption.name;
+        result[colorKey] = selectedOption.color;
+      } else {
+        result[colorKey] = '#dbdbdb';
+      }
+    } else if (columnType === CellType.COLLABORATOR) {
+      let collaborator = getKnownCollaboratorByEmail(name);
+      if (collaborator) {
+        result[nameKey] = collaborator.name;
+      }
+    } else if (columnType === CellType.CREATOR || columnType === CellType.LAST_MODIFIER) {
+      if (name === 'anonymous') {
+        result[nameKey] = name;
+      } else {
+        const collaborator = getKnownCollaboratorByEmail(name);
+        const collaboratorTemplate = {
+          loaded: false,
+          email: name,
+          name: name
+        };
+        context.updateCollaboratorsCache(name, collaboratorTemplate);
+        if (!collaborator) {
+          context.queryUsers([name], emailUserMap => {
+            const collaborator = emailUserMap && emailUserMap[name] || generateDefaultUser(name);
+            const loadedCollaborator = {
+              ...collaborator,
+              loaded: true
+            };
+            context.updateCollaboratorsCache(name, loadedCollaborator);
+            result[nameKey] = name;
+          });
+        } else {
+          result[nameKey] = collaborator.name;
+        }
+      }
+    } else if (columnType === CellType.NUMBER) {
+      const valueNumber = parseFloat(name);
+      result[nameKey] = isNumber(valueNumber) ? getNumberDisplayString(valueNumber, columnData) : name;
+    } else if (columnType === CellType.DATE) {
+      if (name && name.split('-').length === 3) {
+        let format = getDateColumnFormat(column);
+        const spaceIndex = format.indexOf(' ');
+        if (spaceIndex > -1) {
+          format = format.slice(0, spaceIndex);
+        }
+        result[nameKey] = dayjs(name).format(format);
+      }
+    } else if (FORMULA_COLUMN_TYPES_MAP[columnType]) {
+      const {
+        result_type,
+        array_type
+      } = columnData || {};
+      if (result_type === FORMULA_RESULT_TYPE.NUMBER) {
+        const valueNumber = parseFloat(name);
+        result[nameKey] = isNumber(valueNumber) ? getNumberDisplayString(valueNumber, columnData) : name;
+      } else if (result_type === FORMULA_RESULT_TYPE.ARRAY) {
+        if (COLLABORATOR_COLUMN_TYPES.includes(array_type) && Array.isArray(name)) {
+          result[nameKey] = name.map(email => {
+            let user = array_type === CellType.COLLABORATOR ? getKnownCollaboratorByEmail(email) : getKnownCollaboratorByEmail(email);
+            return (user || {}).name;
+          });
+        }
+      }
+    } else if (columnType === CellType.LINK) {
+      result[nameKey] = getClientFormulaDisplayString([name], columnData) || null;
+    }
+  }
+  static shouldChartComponentUpdate(prevProps, currentProps) {
+    return !this.isChartEqual(prevProps.chart, currentProps.chart) ||
+    // chart attributes changed
+    !shallowEqual(prevProps.canvasStyle, currentProps.canvasStyle) ||
+    // canvasStyle
+    !shallowEqual(prevProps.groupbyColumn, currentProps.groupbyColumn) ||
+    // groupbyColumn's data、type changed or not exist
+    !shallowEqual(prevProps.columnGroupbyColumn, currentProps.columnGroupbyColumn) ||
+    // columnGroupbyColumn's data、type changed or not exist
+    !shallowEqual(prevProps.summaryColumn, currentProps.summaryColumn) ||
+    // summaryColumn's data、type changed or not exist
+    this._isChartDataChange(prevProps, currentProps) || this.isChartStyleChanged(prevProps.chart, currentProps.chart);
+  }
+  static _isCombinationDataChange(prevResult, currentResult) {
+    if (prevResult.value_left !== currentResult.value_left) return true;
+    if (prevResult.value_right !== currentResult.value_right) return true;
+    return false;
+  }
+}
+_class = ChartUtils;
+ChartUtils.sortCharts = (charts, column, sortKey) => {
+  const {
+    type: columnType,
+    data
+  } = column;
+  const sortType = 'up';
+  const optionIdIndexMap = {};
+  if (columnType === CellType.SINGLE_SELECT) {
+    const {
+      options
+    } = data || {};
+    Array.isArray(options) && options.forEach((option, index) => {
+      optionIdIndexMap[option.id] = index;
+    });
+  }
+  charts.sort((currResult, nextResult) => {
+    let {
+      [sortKey]: current
+    } = currResult;
+    let {
+      [sortKey]: next
+    } = nextResult;
+    if (!current && current !== 0) {
+      return -1;
+    }
+    if (!next && next !== 0) {
+      return 1;
+    }
+    if (CHART_SUPPORT_SORT_COLUMNS.includes(columnType)) {
+      switch (columnType) {
+        case CellType.NUMBER:
+        case CellType.RATE:
+          {
+            if (current) {
+              current = current - 0;
+            }
+            if (next) {
+              next = next - 0;
+            }
+            return sortNumber(current, next, sortType);
+          }
+        case CellType.DATE:
+        case CellType.CTIME:
+        case CellType.MTIME:
+          {
+            return sortDate(current, next, sortType);
+          }
+        case CellType.SINGLE_SELECT:
+        case CellType.MULTIPLE_SELECT:
+          {
+            return sortSingleSelect(current, next, {
+              sort_type: sortType,
+              option_id_index_map: optionIdIndexMap
+            });
+          }
+        case CellType.FORMULA:
+        case CellType.LINK_FORMULA:
+          {
+            return sortFormula(current, next, sortType, {
+              columnData: data,
+              value: {}
+            });
+          }
+        default:
+          {
+            return sortText(current, next, sortType);
+          }
+      }
+    }
+    return 0;
+  });
+};
+ChartUtils.sortChartData = (charts, sort_key) => {
+  charts.sort((currResult, nextResult) => {
+    const {
+      value: current
+    } = currResult;
+    const {
+      value: next
+    } = nextResult;
+    if (!current && current !== 0) return -1;
+    if (!next && next !== 0) return 1;
+    if (sort_key === 'ascending') {
+      return current > next ? 1 : -1;
+    }
+    return current > next ? -1 : 1;
+  });
+};
+ChartUtils.sortByDate = (currentDate, nextDate) => {
+  if (currentDate.name === 'undefined') return -1;
+  if (nextDate.name === 'undefined') return 1;
+  if (currentDate.name > nextDate.name) return 1;
+  if (currentDate.name < nextDate.name) return -1;
+  return 0;
+};
+ChartUtils.moveNullDataToEnd = arr => {
+  let nullData;
+  const nullDataIndex = arr.findIndex(item => {
+    return item.name === 'undefined';
+  });
+  if (nullDataIndex > -1) {
+    nullData = arr.splice(nullDataIndex, 1);
+    arr.push(...nullData);
+  }
+  return arr;
+};
+ChartUtils.getGroupColumn = (table, chart) => {
+  const {
+    config
+  } = chart;
+  const {
+    type
+  } = config;
+  if (X_AXIS_IS_GROUPBY_COLUMN_KEY_CHART_TYPES.includes(type)) {
+    return getTableColumnByKey(table, config.groupby_column_key);
+  }
+  if (type === CHART_TYPE.BASIC_NUMBER_CARD) {
+    return getTableColumnByKey(table, config.numeric_column_key);
+  }
+  return getTableColumnByKey(table, config.x_axis_column_key);
+};
+ChartUtils.getColumnGroupColumn = (table, chart) => {
+  const {
+    config
+  } = chart;
+  const {
+    type
+  } = config;
+  if (X_AXIS_IS_GROUPBY_COLUMN_KEY_CHART_TYPES.includes(type)) {
+    return getTableColumnByKey(table, config.column_groupby_column_key);
+  }
+  if ([CHART_TYPE.BAR_GROUP, CHART_TYPE.LINE_GROUP, CHART_TYPE.HORIZONTAL_GROUP_BAR].includes(type)) {
+    return getTableColumnByKey(table, config.column_groupby_column_key);
+  }
+  return getTableColumnByKey(table, config.y_axis_summary_column_key);
+};
+ChartUtils.getSummaryColumn = (table, chart) => {
+  const {
+    config
+  } = chart;
+  const {
+    summary_column_key,
+    y_axis_summary_column_key,
+    type,
+    numeric_column_key
+  } = config;
+  switch (type) {
+    case CHART_TYPE.BAR:
+    case CHART_TYPE.BAR_GROUP:
+    case CHART_TYPE.LINE:
+    case CHART_TYPE.LINE_GROUP:
+    case CHART_TYPE.AREA:
+    case CHART_TYPE.HORIZONTAL_BAR:
+    case CHART_TYPE.HORIZONTAL_GROUP_BAR:
+      {
+        return getTableColumnByKey(table, y_axis_summary_column_key);
+      }
+    case CHART_TYPE.BASIC_NUMBER_CARD:
+      {
+        return getTableColumnByKey(table, numeric_column_key);
+      }
+    default:
+      {
+        return getTableColumnByKey(table, summary_column_key);
+      }
+  }
+};
+ChartUtils.getGroupName = (tables, chart) => {
+  const {
+    config
+  } = chart;
+  const table = getTableById(tables, config.table_id);
+  const column = _class.getGroupColumn(table, chart);
+  return column.name;
+};
+ChartUtils.getChartGroups = charts => {
+  let chartGroups = [];
+  Array.isArray(charts) && charts.forEach(item => {
+    if (!chartGroups.find(g => g.name === item.name)) {
+      chartGroups.push(item);
+    }
+  });
+  return chartGroups;
+};
+ChartUtils.isValidExistChart = (tables, chart) => {
+  if (!chart) return false;
+  const {
+    config
+  } = chart;
+  const {
+    table_id,
+    type
+  } = config;
+  const table = getTableById(tables, table_id);
+  if (!table) return false;
+  if (config.type === CHART_TYPE.BASIC_NUMBER_CARD) {
+    const numericColumnKey = config.numeric_column_key;
+    if (!numericColumnKey) return false;
+    return getTableColumnByKey(table, numericColumnKey);
+  }
+  if (config.type === CHART_TYPE.DASHBOARD) {
+    const targetColumnKey = config.target_value_column_key;
+    if (!targetColumnKey) return false;
+    const totalColumnKey = config.total_value_column_key;
+    if (!totalColumnKey) return false;
+    if (!getTableColumnByKey(table, targetColumnKey)) return false;
+    return getTableColumnByKey(table, totalColumnKey);
+  }
+  const groupByColumnKey = config.groupby_column_key || config.x_axis_column_key || config.vertical_axis_column_key;
+  if (!groupByColumnKey) return false;
+  if (!getTableColumnByKey(table, groupByColumnKey)) return false;
+  if (type === CHART_TYPE.COMBINATION) {
+    const isExist = _class.isValidCombinationChart(config, table);
+    if (!isExist) return false;
+  } else {
+    const summaryColumnKey = config.summary_column_key || config.y_axis_summary_column_key || config.horizontal_axis_column_key;
+    const summaryType = config.summary_type || config.y_axis_summary_type || config.horizontal_axis_summary_type;
+    if (summaryType === CHART_SUMMARY_TYPE.ADVANCED && !summaryColumnKey) return false;
+    if (summaryColumnKey) {
+      return getTableColumnByKey(table, summaryColumnKey);
+    }
+  }
+  return true;
+};
+ChartUtils.isValidCombinationChart = (config, table) => {
+  const summaryLeftColumnKey = config.y_axis_left_summary_column;
+  const summaryLeftType = config.y_axis_left_summary_type;
+  if (summaryLeftType === CHART_SUMMARY_TYPE.ADVANCED && !summaryLeftColumnKey) return false;
+  if (summaryLeftColumnKey) {
+    if (!getTableColumnByKey(table, summaryLeftColumnKey)) return false;
+  }
+  const summaryRightColumnKey = config.y_axis_right_summary_column;
+  const summaryRightType = config.y_axis_right_summary_type;
+  if (summaryRightType === CHART_SUMMARY_TYPE.ADVANCED && !summaryRightColumnKey) return false;
+  if (summaryRightColumnKey) {
+    return getTableColumnByKey(table, summaryRightColumnKey);
+  }
+  return true;
+};
+ChartUtils.getGroupLabelFromDB = (cellValue, column, tables) => {
+  const collaborators = context.getCollaboratorsFromCache();
+  const {
+    type,
+    data
+  } = column;
+  switch (type) {
+    case CellType.TEXT:
+    case CellType.DATE:
+    case CellType.CTIME:
+    case CellType.MTIME:
+      {
+        return cellValue || null;
+      }
+    case CellType.NUMBER:
+      {
+        if (!cellValue && cellValue !== 0) return null;
+        return getPrecisionNumber(cellValue, data);
+      }
+    case CellType.SINGLE_SELECT:
+      {
+        let isInvalidValue = data && data.options && data.options.findIndex(opt => opt.id === cellValue) < 0;
+        return isInvalidValue ? null : cellValue;
+      }
+    case CellType.MULTIPLE_SELECT:
+      {
+        let options = data && data.options;
+        if (!Array.isArray(options) || options.length === 0) return [];
+        if (!Array.isArray(cellValue) || cellValue.length === 0) return [];
+        return cellValue.filter(optionId => options.find(option => option.id === optionId));
+      }
+    case 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));
+      }
+    case CellType.CREATOR:
+    case CellType.LAST_MODIFIER:
+      {
+        return cellValue ? cellValue : null;
+      }
+    case CellType.GEOLOCATION:
+      {
+        return cellValue || null;
+      }
+    case CellType.FORMULA:
+    case CellType.LINK_FORMULA:
+      {
+        const validValue = getFormulaDisplayString(cellValue, data, {
+          tables
+        });
+        if (!validValue && validValue !== 0) return null;
+        return validValue;
+      }
+    case CellType.LINK:
+      {
+        return Array.isArray(cellValue) ? cellValue.map(linked => getClientLinkDisplayString([linked], data, {})) : [];
+      }
+    case CellType.CHECKBOX:
+      {
+        return String(cellValue) === 'true' ? 'Checked' : 'Unchecked';
+      }
+    case CellType.RATE:
+      {
+        return cellValue ? String(cellValue) : null;
+      }
+    default:
+      {
+        return null;
+      }
+  }
+};
+ChartUtils.oneDimensionTableSQLResult2JavaScript = (chart, sqlRows, chartSQLMap, columnMap, tables) => {
+  const {
+    groupbyColumn
+  } = columnMap;
+  const {
+    summary_type
+  } = chart.config;
+  let pivot_columns = [];
+  let pivot_rows = [];
+  const isCount = summary_type === CHART_SUMMARY_TYPE.COUNT;
+  if (isCount) {
+    const {
+      sqlGroupbyColumnKey,
+      sqlSummaryColumnKey
+    } = chartSQLMap;
+    let allTotal = 0;
+    sqlRows.forEach(row => {
+      const total = row[sqlSummaryColumnKey] || 0;
+      allTotal += total;
+      pivot_rows.push({
+        name: _class.getGroupLabelFromDB(row[sqlGroupbyColumnKey], groupbyColumn, tables),
+        rows: [],
+        total: {
+          total
+        }
+      });
+    });
+    return {
+      pivot_columns,
+      pivot_rows: pivot_rows,
+      pivot_columns_total: {
+        total: allTotal
+      }
+    };
+  }
+  const {
+    sqlGroupbyColumnKey,
+    summarySQLColumnName2ColumnKey,
+    summaryTableColumnKey2Column,
+    summaryTableColumnKey2Method
+  } = chartSQLMap;
+  const summaryColumnKeys = Object.values(summarySQLColumnName2ColumnKey);
+  const sqlSummaryColumnKeys = Object.keys(summarySQLColumnName2ColumnKey);
+  let totalTemplate = {};
+  Object.values(summaryColumnKeys).forEach(key => {
+    const summaryMethod = summaryTableColumnKey2Method[key];
+    totalTemplate[key] = _class.initTotal(summaryMethod);
+    pivot_columns.push({
+      key
+    });
+  });
+  let allTotal = {
+    ...totalTemplate
+  };
+  sqlRows.forEach(row => {
+    let rowTotal = {
+      ...totalTemplate
+    };
+    sqlSummaryColumnKeys.forEach(key => {
+      let columnKey = summarySQLColumnName2ColumnKey[key];
+      let summaryColumn = summaryTableColumnKey2Column[columnKey];
+      const summaryMethod = summaryTableColumnKey2Method[columnKey];
+      let value = row[key] || _class.initTotal(summaryMethod);
+      allTotal[columnKey] = _class.getSummaryValue({
+        summaryColumn,
+        summaryMethod
+      }, allTotal[columnKey], value);
+      if (_class.isDateSummaryColumn(summaryColumn)) {
+        rowTotal[columnKey] = value;
+      } else if (_class.isNumericSummaryColumn(summaryColumn)) {
+        rowTotal[columnKey] = rowTotal[columnKey] + value;
+      }
+    });
+    pivot_rows.push({
+      name: _class.getGroupLabelFromDB(row[sqlGroupbyColumnKey], groupbyColumn, tables),
+      rows: [row],
+      total: rowTotal
+    });
+  });
+  if (pivot_columns.length < 2) {
+    const pivot_column = pivot_columns[0];
+    const {
+      key
+    } = pivot_column;
+    pivot_rows.forEach(row => {
+      row.total = {
+        ...row.total,
+        total: row.total[key]
+      };
+    });
+    allTotal = {
+      ...allTotal,
+      total: allTotal[key]
+    };
+  }
+  _class.sortCharts(pivot_rows, groupbyColumn, 'name');
+  return {
+    pivot_columns,
+    pivot_rows,
+    pivot_columns_total: allTotal
+  };
+};
+ChartUtils.updateTwoDimensionColumns = (pivot_columns, key, _ref) => {
+  let {
+    isIncludeEmpty,
+    isCellValueAsAnArray
+  } = _ref;
+  if (isCellValueAsAnArray) {
+    if ((!Array.isArray(key) || key.length === 0) && isIncludeEmpty) {
+      const pivotColumnIndex = pivot_columns.findIndex(r => !r.key);
+      if (pivotColumnIndex < 0) {
+        pivot_columns.unshift({
+          key: null
+        });
+      }
+      return;
+    }
+    key.forEach(k => {
+      const pivotColumnIndex = pivot_columns.findIndex(r => r.key === k);
+      if (pivotColumnIndex < 0) {
+        pivot_columns.push({
+          key: k
+        });
+      }
+    });
+    return;
+  }
+  const pivotColumnIndex = pivot_columns.findIndex(r => {
+    let resKey = r.key;
+    return resKey === null && key === null || resKey === undefined && key === undefined || resKey === 0 && key === 0 || resKey === key;
+  });
+  if (pivotColumnIndex < 0) {
+    pivot_columns.push({
+      key
+    });
+  }
+};
+ChartUtils.isSameGroup = (isColumnDataAsAnArray, source, target) => {
+  if (isColumnDataAsAnArray) {
+    return (!Array.isArray(source) || source.length === 0) && !target || source.includes(target);
+  }
+  return source === null && target === null || source === undefined && target === undefined || source === target;
+};
+ChartUtils.updateTwoDimensionRows = (pivot_rows, pivot_columns, index, name, count, row, isColumnDataAsAnArray, cellValue, _ref2) => {
+  let {
+    summaryMethod,
+    summaryColumn
+  } = _ref2;
+  if (index > -1) {
+    let updatedPivotRow = pivot_rows[index];
+    let {
+      cells,
+      total
+    } = updatedPivotRow;
+    pivot_columns.forEach(c => {
+      let {
+        key
+      } = c;
+      if (_class.isSameGroup(isColumnDataAsAnArray, cellValue, key)) {
+        if (cells[key]) {
+          cells[key].rows.push(row);
+          cells[key].total = _class.getSummaryValue({
+            summaryMethod,
+            summaryColumn
+          }, cells[key].total, count);
+        } else {
+          cells[key] = {
+            rows: [row],
+            total: count
+          };
+        }
+      }
+    });
+    updatedPivotRow.cells = cells;
+    updatedPivotRow.total = _class.getSummaryValue({
+      summaryMethod,
+      summaryColumn
+    }, total, count);
+    pivot_rows[index] = updatedPivotRow;
+    return;
+  }
+  let cells = {};
+  let total = _class.initTotal(summaryMethod);
+  pivot_columns.forEach(c => {
+    let {
+      key
+    } = c;
+    if (_class.isSameGroup(isColumnDataAsAnArray, cellValue, key)) {
+      cells[key] = {
+        rows: [row],
+        total: count
+      };
+      total = _class.getSummaryValue({
+        summaryMethod,
+        summaryColumn
+      }, total, count);
+    }
+  });
+  pivot_rows.push({
+    name,
+    cells,
+    total
+  });
+};
+ChartUtils.getSummaryValue = (_ref3, currentValue, nextValue) => {
+  let {
+    summaryMethod,
+    summaryColumn
+  } = _ref3;
+  if (_class.isDateSummaryColumn(summaryColumn)) {
+    if (summaryMethod === 'MAX') {
+      if (currentValue && nextValue) {
+        return dayjs(currentValue).isBefore(nextValue) ? nextValue : currentValue;
+      }
+      if (!currentValue && nextValue) return nextValue;
+      return currentValue;
+    }
+    if (summaryMethod === 'MIN') {
+      if (currentValue && nextValue) {
+        return dayjs(currentValue).isBefore(nextValue) ? currentValue : nextValue;
+      }
+      if (!currentValue && nextValue) return nextValue;
+      return currentValue;
+    }
+    return currentValue;
+  }
+  if (summaryMethod === 'MAX' || summaryMethod === 'MIN') {
+    if (currentValue === null && nextValue === null) return null;
+    if (currentValue === null) return nextValue;
+    if (nextValue === null) return currentValue;
+  }
+  return (currentValue - 0 || 0) + (nextValue - 0 || 0);
+};
+ChartUtils.getAndUpdateTwoDimensionTotal = (pivot_columns_total, pivot_columns, pivot_rows, _ref4) => {
+  let {
+    summaryMethod,
+    summaryColumn
+  } = _ref4;
+  let pivot_table_total = _class.initTotal(summaryMethod);
+  pivot_rows.forEach(row => {
+    const {
+      cells,
+      total
+    } = row;
+    pivot_table_total = _class.getSummaryValue({
+      summaryMethod,
+      summaryColumn
+    }, pivot_table_total, total);
+    pivot_columns.forEach(column => {
+      const {
+        key
+      } = column;
+      const cell = cells[key];
+      if (cell) {
+        let pivot_column_total = pivot_columns_total && pivot_columns_total[key] ? pivot_columns_total[key] : _class.initTotal(summaryMethod);
+        pivot_columns_total[key] = _class.getSummaryValue({
+          summaryMethod,
+          summaryColumn
+        }, pivot_column_total, cell.total);
+      }
+    });
+  });
+  return pivot_table_total;
+};
+ChartUtils.isValidCellValue = function (cellValue) {
+  let includeEmpty = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  if (includeEmpty) return true;
+  if (typeof cellValue === 'boolean') return true;
+  return cellValue || cellValue === 0;
+};
+ChartUtils.twoDimensionTableSQLResult2JavaScript = (chart, sqlRows, chartSQLMap, columnMap, tables) => {
+  const {
+    groupbyColumn,
+    columnGroupbyColumn,
+    summaryColumn
+  } = columnMap || {};
+  const {
+    groupby_include_empty_cells,
+    summary_method
+  } = chart.config;
+  const {
+    sqlGroupbyColumnKey,
+    sqlColumnGroupbyColumnKey,
+    sqlSummaryColumnKey
+  } = chartSQLMap;
+  if (!sqlColumnGroupbyColumnKey) return _class.oneDimensionTableSQLResult2JavaScript(chart, sqlRows, chartSQLMap, columnMap, tables);
+  const summaryMethod = (summary_method || 'sum').toUpperCase();
+  let pivot_columns = [];
+  let pivot_rows = [];
+  let pivot_columns_total = {};
+  const isRowGroupbyColumnDataAsAnArray = !!MULTIPLE_CELL_VALUE_COLUMN_TYPE_MAP[columnGroupbyColumn.type];
+  sqlRows.forEach(row => {
+    const groupbyColumnCellValue = row[sqlGroupbyColumnKey];
+    const groupbyColumnCellValueKey = _class.getGroupLabelFromDB(groupbyColumnCellValue, groupbyColumn, tables);
+    const columnGroupbyColumnCellValue = row[sqlColumnGroupbyColumnKey];
+    const columnGroupbyColumnCellValueKey = _class.getGroupLabelFromDB(columnGroupbyColumnCellValue, columnGroupbyColumn, tables);
+    const count = !row[sqlSummaryColumnKey] && row[sqlSummaryColumnKey] !== 0 ? null : row[sqlSummaryColumnKey];
+    if (_class.isValidCellValue(columnGroupbyColumnCellValue, groupby_include_empty_cells)) {
+      _class.updateTwoDimensionColumns(pivot_columns, columnGroupbyColumnCellValueKey, {
+        isIncludeEmpty: groupby_include_empty_cells,
+        isCellValueAsAnArray: isRowGroupbyColumnDataAsAnArray
+      });
+    }
+    if (_class.isValidCellValue(groupbyColumnCellValue, groupby_include_empty_cells)) {
+      if (MULTIPLE_CELL_VALUE_COLUMN_TYPE_MAP[groupbyColumn]) {
+        if ((!Array.isArray(groupbyColumnCellValueKey) || groupbyColumnCellValueKey.length === 0) && groupby_include_empty_cells) {
+          let pivotRowIndex = pivot_rows.findIndex(r => !r.name);
+          _class.updateTwoDimensionRows(pivot_rows, pivot_columns, pivotRowIndex, null, count, row, isRowGroupbyColumnDataAsAnArray, columnGroupbyColumnCellValueKey, {
+            summaryMethod,
+            summaryColumn
+          });
+        } else {
+          groupbyColumnCellValueKey.forEach(n => {
+            let pivotRowIndex = pivot_rows.findIndex(r => n === r.name);
+            _class.updateTwoDimensionRows(pivot_rows, pivot_columns, pivotRowIndex, n, count, row, isRowGroupbyColumnDataAsAnArray, columnGroupbyColumnCellValueKey, {
+              summaryMethod,
+              summaryColumn
+            });
+          });
+        }
+      } else {
+        let pivotRowIndex = pivot_rows.findIndex(r => {
+          let resName = r.name;
+          return resName === null && groupbyColumnCellValueKey === null || resName === undefined && groupbyColumnCellValueKey === undefined || resName === 0 && groupbyColumnCellValueKey === 0 || resName === groupbyColumnCellValueKey;
+        });
+        _class.updateTwoDimensionRows(pivot_rows, pivot_columns, pivotRowIndex, groupbyColumnCellValueKey, count, row, isRowGroupbyColumnDataAsAnArray, columnGroupbyColumnCellValueKey, {
+          summaryMethod,
+          summaryColumn
+        });
+      }
+    }
+  });
+  let pivot_table_total = _class.getAndUpdateTwoDimensionTotal(pivot_columns_total, pivot_columns, pivot_rows, {
+    summaryMethod,
+    summaryColumn
+  });
+  _class.sortCharts(pivot_rows, groupbyColumn, 'name');
+  _class.sortCharts(pivot_columns, columnGroupbyColumn, 'key');
+  return {
+    pivot_columns,
+    pivot_rows,
+    pivot_columns_total,
+    pivot_table_total
+  };
+};
+ChartUtils.basicChartSQLResult2JavaScript = (chart, sqlRows, chartSQLMap, columnMap, tables) => {
+  const {
+    config
+  } = chart;
+  const {
+    type,
+    sort_type
+  } = config;
+  const {
+    groupbyColumn
+  } = columnMap;
+  const isGroupbyColumnDataAsAnArray = MULTIPLE_CELL_VALUE_COLUMN_TYPE_MAP[groupbyColumn.type];
+  const {
+    sqlGroupbyColumnKey,
+    sqlSummaryColumnKey
+  } = chartSQLMap;
+  let result = [];
+  sqlRows.forEach(row => {
+    const cellValue = row[sqlGroupbyColumnKey];
+    const summaryValue = row[sqlSummaryColumnKey];
+    if (_class.isValidCellValue(cellValue)) {
+      const key = _class.getGroupLabelFromDB(cellValue, groupbyColumn, tables);
+      if (isGroupbyColumnDataAsAnArray) {
+        if (!Array.isArray(key) || key.length === 0) {
+          let itemIdx = result.findIndex(v => v.name === null);
+          if (itemIdx < 0) {
+            result.push({
+              color: '',
+              name: null,
+              rows: [row],
+              value: summaryValue
+            });
+          } else {
+            let itemRow = result[itemIdx];
+            itemRow.rows.push(row);
+            itemRow.value = itemRow.value + summaryValue;
+          }
+        } else {
+          key.forEach(item => {
+            let itemIdx = result.findIndex(v => v.name === item);
+            if (itemIdx < 0) {
+              result.push({
+                color: '',
+                name: item,
+                rows: [row],
+                value: summaryValue
+              });
+            } else {
+              let itemRow = result[itemIdx];
+              itemRow.rows.push(row);
+              itemRow.value = itemRow.value + summaryValue;
+            }
+          });
+        }
+      } else {
+        let itemIdx = result.findIndex(v => v.name === key);
+        if (itemIdx < 0) {
+          result.push({
+            color: '',
+            name: key,
+            rows: [row],
+            value: summaryValue
+          });
+        } else {
+          let itemRow = result[itemIdx];
+          itemRow.rows.push(row);
+          itemRow.value = itemRow.value + summaryValue;
+        }
+      }
+    }
+  });
+  _class.updateTableViewList(result, groupbyColumn, 'name', 'color');
+  if (SUPPORT_DATA_SORT_CHART_TYPES.includes(type) && sort_type) {
+    _class.sortChartData(result, sort_type);
+    return result;
+  }
+  _class.sortCharts(result, groupbyColumn, 'name');
+  return result;
+};
+ChartUtils.basicNumberCardSQLResult2JavaScript = (chart, sqlRows, chartSQLMap, columnMap, tables) => {
+  if (sqlRows.length > 0) {
+    const summaryResult = sqlRows[0];
+    const key = Object.keys(summaryResult)[0];
+    return summaryResult[key];
+  }
+  return 0;
+};
+ChartUtils.combinationSQLResult2Javascript = (chart, sqlRows, chartSQLMap, columnMap, tables) => {
+  const {
+    config
+  } = chart;
+  const {
+    y_axis_left_group_by_multiple_numeric_column,
+    y_axis_left_summary_type,
+    y_axis_left_summary_column,
+    y_axis_left_summary_method,
+    y_axis_right_summary_type,
+    y_axis_right_summary_column,
+    table_id,
+    y_axis_left_group_by_numeric_columns
+  } = config;
+  const table = getTableById(tables, table_id);
+  const {
+    groupbyColumn
+  } = columnMap;
+  const {
+    sqlGroupbyColumnKey,
+    sqlSummaryColumnKey,
+    sqlRightSummaryColumnKey,
+    sqlLeftSummaryColumnKey
+  } = chartSQLMap;
+  const isGroupbyColumnDataAsAnArray = MULTIPLE_CELL_VALUE_COLUMN_TYPE_MAP[groupbyColumn.type];
+  let result = [];
+  if (!y_axis_left_group_by_multiple_numeric_column) {
+    let leftSummaryColumn, rightSummaryColumn;
+    if (y_axis_left_summary_type === CHART_SUMMARY_TYPE.ADVANCED) {
+      leftSummaryColumn = getTableColumnByKey(table, y_axis_left_summary_column);
+    }
+    if (y_axis_right_summary_type === CHART_SUMMARY_TYPE.ADVANCED) {
+      rightSummaryColumn = getTableColumnByKey(table, y_axis_right_summary_column);
+    }
+    sqlRows.forEach(row => {
+      const cellValue = row[sqlGroupbyColumnKey];
+      const summaryValue = row[sqlSummaryColumnKey];
+      const key = _class.getGroupLabelFromDB(cellValue, groupbyColumn, tables);
+      let valueLeft = row[sqlLeftSummaryColumnKey] || 0;
+      let valueRight = row[sqlRightSummaryColumnKey] || 0;
+      if (y_axis_left_summary_type === CHART_SUMMARY_TYPE.ADVANCED) {
+        valueLeft = _class.getPrecisionNumber(valueLeft, leftSummaryColumn.data);
+      }
+      if (y_axis_right_summary_type === CHART_SUMMARY_TYPE.ADVANCED) {
+        valueRight = _class.getPrecisionNumber(valueRight, rightSummaryColumn.data);
+      }
+      if (isGroupbyColumnDataAsAnArray) {
+        if (!Array.isArray(key) || key.length === 0) {
+          let itemIdx = result.findIndex(v => v.name === null);
+          if (itemIdx < 0) {
+            result.push({
+              color: '',
+              name: null,
+              rows: [row],
+              value_left: valueLeft,
+              value_right: valueRight
+            });
+          } else {
+            let itemRow = result[itemIdx];
+            itemRow.rows.push(row);
+            itemRow.value_left = itemRow.value_left + summaryValue;
+            itemRow.value_right = itemRow.value_right + summaryValue;
+          }
+        } else {
+          key.forEach(item => {
+            let itemIdx = result.findIndex(v => v.name === item);
+            if (itemIdx < 0) {
+              result.push({
+                color: '',
+                name: item,
+                rows: [row],
+                value_left: valueLeft,
+                value_right: valueRight
+              });
+            } else {
+              let itemRow = result[itemIdx];
+              itemRow.rows.push(row);
+              itemRow.value_left = itemRow.value_left + summaryValue;
+              itemRow.value_right = itemRow.value_right + summaryValue;
+            }
+          });
+        }
+      } else {
+        let itemIdx = result.findIndex(v => v.name === key);
+        if (itemIdx < 0) {
+          result.push({
+            color: '',
+            name: key,
+            rows: [row],
+            value_left: valueLeft,
+            value_right: valueRight
+          });
+        } else {
+          let itemRow = result[itemIdx];
+          itemRow.rows.push(row);
+          itemRow.value_left = itemRow.value_left + summaryValue;
+          itemRow.value_right = itemRow.value_right + summaryValue;
+        }
+      }
+    });
+  } else {
+    let rightSummaryColumn;
+    if (y_axis_right_summary_type === CHART_SUMMARY_TYPE.ADVANCED) {
+      rightSummaryColumn = getTableColumnByKey(table, y_axis_right_summary_column);
+    }
+    const groupItems = [];
+    let leftSummaryColumn = getTableColumnByKey(table, y_axis_left_summary_column);
+    const summaryMethod = y_axis_left_summary_method.toUpperCase();
+    const {
+      key: groupItem
+    } = summaryMethodColumn2SqlColumn(summaryMethod, leftSummaryColumn || {});
+    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) {
+        const itemSummaryMethod = item.summary_method.toUpperCase();
+        const {
+          key: groupItem
+        } = summaryMethodColumn2SqlColumn(itemSummaryMethod, column || {});
+        !groupItems.includes(groupItem) && groupItems.push(groupItem);
+      }
+    });
+    sqlRows.forEach((item, index) => {
+      const cellValue = item[sqlGroupbyColumnKey];
+      const key = _class.getGroupLabelFromDB(cellValue, groupbyColumn, tables);
+      let valueRight = item[sqlRightSummaryColumnKey] || 0;
+      if (y_axis_right_summary_type === CHART_SUMMARY_TYPE.ADVANCED) {
+        valueRight = _class.getPrecisionNumber(valueRight, rightSummaryColumn.data);
+      }
+      groupItems.forEach((groupItem, index) => {
+        let value = item[groupItem] || 0;
+        if (y_axis_right_summary_type === CHART_SUMMARY_TYPE.ADVANCED) {
+          value = _class.getPrecisionNumber(value, leftSummaryColumn.data);
+        }
+        result.push({
+          name: key,
+          value_left: value,
+          value_right: valueRight,
+          color: LABEL_COLORS[index % 12]
+        });
+      });
+    });
+  }
+  return result;
+};
+ChartUtils.getPrecisionNumber = (value, data) => {
+  const valueString = getPrecisionNumber(value, data);
+  const valueNumber = parseFloat(valueString);
+  return isNumber(valueNumber) ? valueNumber : 0;
+};
+ChartUtils.dashboardSQLResult2JavaScript = (chart, sqlRows, chartSQLMap, columnMap, tables) => {
+  if (sqlRows.length > 0) {
+    const summaryResult = sqlRows[0];
+    const {
+      config
+    } = chart;
+    const {
+      target_value_column_summary_method,
+      total_value_column_summary_method,
+      target_value_column_key,
+      total_value_column_key,
+      table_id
+    } = config;
+    const table = getTableById(tables, table_id);
+    const targetColumn = getTableColumnByKey(table, target_value_column_key);
+    const totalColumn = getTableColumnByKey(table, total_value_column_key);
+    const targetSummaryMethod = target_value_column_summary_method.toUpperCase();
+    const totalSummaryMethod = total_value_column_summary_method.toUpperCase();
+    const {
+      key: targetResultKey
+    } = summaryMethodColumn2SqlColumn(targetSummaryMethod, targetColumn);
+    const {
+      key: totalResultKey
+    } = summaryMethodColumn2SqlColumn(totalSummaryMethod, totalColumn);
+    const targetResult = summaryResult[targetResultKey];
+    const totalResult = summaryResult[totalResultKey];
+    if (totalResult === 0) {
+      return 0;
+    }
+    return targetResult / totalResult;
+  }
+  return 0;
+};
+ChartUtils.updateTableViewListItemNameAndColor = (result, column, nameKey, colorKey) => {
+  let {
+    type: columnType,
+    data: columnData
+  } = column;
+  let name = result[nameKey];
+  if (columnType === CellType.SINGLE_SELECT || columnType === CellType.MULTIPLE_SELECT) {
+    const options = getColumnOptions(column);
+    let selectedOption = getOption(options, name);
+    let {
+      name: optionName,
+      color: optionColor
+    } = selectedOption || {};
+    if (selectedOption) {
+      result[nameKey] = optionName;
+      result[colorKey] = optionColor;
+    } else {
+      result[colorKey] = '#dbdbdb';
+    }
+  } else if (columnType === CellType.COLLABORATOR) {
+    let collaborator = getKnownCollaboratorByEmail(name);
+    if (collaborator) {
+      result[nameKey] = collaborator.name;
+    }
+  } else if (columnType === CellType.CREATOR || columnType === CellType.LAST_MODIFIER) {
+    if (name === 'anonymous') {
+      result[nameKey] = name;
+    } else {
+      const collaborator = getKnownCollaboratorByEmail(name);
+      const collaboratorTemplate = {
+        loaded: false,
+        email: name,
+        name: name
+      };
+      context.updateCollaboratorsCache(name, collaboratorTemplate);
+      if (!collaborator) {
+        context.queryUsers([name], emailUserMap => {
+          const collaborator = emailUserMap && emailUserMap[name] || generateDefaultUser(name);
+          const loadedCollaborator = {
+            ...collaborator,
+            loaded: true
+          };
+          context.updateCollaboratorsCache(name, loadedCollaborator);
+          result[nameKey] = name;
+        });
+      } else {
+        result[nameKey] = collaborator.name;
+      }
+    }
+  } else if (columnType === CellType.NUMBER) {
+    let valueNumber = parseFloat(name);
+    result[nameKey] = isNumber(valueNumber) ? getNumberDisplayString(valueNumber, columnData) : name;
+  } else if (columnType === CellType.DATE) {
+    name = name + '';
+    if (name && name.split('-').length === 3) {
+      let format = getDateColumnFormat(column);
+      let spaceIndex = format.indexOf(' ');
+      if (spaceIndex > -1) {
+        format = format.slice(0, spaceIndex);
+      }
+      result[nameKey] = dayjs(name).format(format);
+    }
+  }
+};
+ChartUtils.updateTableViewList = (result, column, nameKey, colorKey) => {
+  result.forEach(result => {
+    _class.updateTableViewListItemNameAndColor(result, column, nameKey, colorKey);
+  });
+};
+ChartUtils.updateGroupingChartRow = (results, name, groupName, row, count) => {
+  let updatedIndex = results.findIndex(result => result.name === name && result.group_name === groupName);
+  if (updatedIndex > -1) {
+    let updatedResult = results[updatedIndex];
+    updatedResult.rows.push(row);
+    updatedResult.value = updatedResult.value + count;
+    results[updatedIndex] = updatedResult;
+  } else {
+    results.push({
+      name,
+      rows: [row],
+      group_name: groupName,
+      value: count
+    });
+  }
+};
+ChartUtils.updateGroupingChartRows = (results, name, row, count, isColumnGroupbyColumnDataAsAnArray, groupName) => {
+  if (isColumnGroupbyColumnDataAsAnArray) {
+    if (!Array.isArray(groupName) || groupName.length === 0) {
+      _class.updateGroupingChartRow(results, name, null, row, count);
+      return;
+    }
+    groupName.forEach(v => {
+      _class.updateGroupingChartRow(results, name, v, row, count);
+    });
+    return;
+  }
+  _class.updateGroupingChartRow(results, name, groupName, row, count);
+};
+ChartUtils.groupingTwoDimensionChartSQLResult2JavaScript = (chart, sqlRows, chartSQLMap, columnMap, tables) => {
+  const {
+    groupbyColumn,
+    columnGroupbyColumn
+  } = columnMap;
+  const {
+    x_axis_include_empty_cells: includeEmpty
+  } = chart.config;
+  const {
+    sqlGroupbyColumnKey,
+    sqlColumnGroupbyColumnKey,
+    sqlSummaryColumnKey
+  } = chartSQLMap;
+  let result = [];
+  const isGroupbyColumnDataAsAnArray = !!MULTIPLE_CELL_VALUE_COLUMN_TYPE_MAP[groupbyColumn.type];
+  const isColumnGroupbyColumnDataAsAnArray = !!MULTIPLE_CELL_VALUE_COLUMN_TYPE_MAP[columnGroupbyColumn.type];
+  sqlRows.forEach(row => {
+    const groupbyColumnCellValue = row[sqlGroupbyColumnKey];
+    const groupbyColumnCellValueKey = _class.getGroupLabelFromDB(groupbyColumnCellValue, groupbyColumn, tables);
+    if (_class.isValidCellValue(groupbyColumnCellValueKey, includeEmpty)) {
+      const columnGroupbyColumnCellValue = row[sqlColumnGroupbyColumnKey];
+      const columnGroupbyColumnCellValueKey = _class.getGroupLabelFromDB(columnGroupbyColumnCellValue, columnGroupbyColumn, tables);
+      const count = row[sqlSummaryColumnKey];
+      if (isGroupbyColumnDataAsAnArray) {
+        if (!Array.isArray(groupbyColumnCellValueKey) || groupbyColumnCellValueKey.length === 0) {
+          _class.updateGroupingChartRows(result, null, row, count, isColumnGroupbyColumnDataAsAnArray, columnGroupbyColumnCellValueKey);
+        } else {
+          groupbyColumnCellValueKey.forEach(n => {
+            _class.updateGroupingChartRows(result, n, row, count, isColumnGroupbyColumnDataAsAnArray, columnGroupbyColumnCellValueKey);
+          });
+        }
+      } else {
+        _class.updateGroupingChartRows(result, groupbyColumnCellValueKey, row, count, isColumnGroupbyColumnDataAsAnArray, columnGroupbyColumnCellValueKey);
+      }
+    }
+  });
+  _class.updateTableViewList(result, groupbyColumn, 'name', 'color');
+  _class.updateTableViewList(result, columnGroupbyColumn, 'group_name', 'group_color');
+  _class.sortCharts(result, groupbyColumn, 'name');
+  return result;
+};
+ChartUtils.groupingChartSQLResult2JavaScript = (chart, sqlRows, chartSQLMap, columnMap, tables) => {
+  const {
+    column_groupby_column_key,
+    column_groupby_multiple_numeric_column,
+    y_axis_summary_type,
+    x_axis_include_empty_cells: includeEmpty
+  } = chart.config;
+  if (!column_groupby_column_key && !column_groupby_multiple_numeric_column) {
+    return _class.basicChartSQLResult2JavaScript(chart, sqlRows, chartSQLMap, columnMap, tables);
+  }
+  const {
+    groupbyColumn,
+    columnGroupbyColumn
+  } = columnMap;
+  if (y_axis_summary_type === CHART_SUMMARY_TYPE.COUNT) {
+    if (!columnGroupbyColumn) return _class.basicChartSQLResult2JavaScript(chart, sqlRows, chartSQLMap, columnMap, tables);
+    return _class.groupingTwoDimensionChartSQLResult2JavaScript(chart, sqlRows, chartSQLMap, columnMap, tables);
+  }
+  const {
+    sqlGroupbyColumnKey
+  } = chartSQLMap;
+  if (column_groupby_multiple_numeric_column) {
+    const {
+      summaryColumns
+    } = chartSQLMap;
+    let result = [];
+    const isGroupbyColumnDataAsAnArray = !!MULTIPLE_CELL_VALUE_COLUMN_TYPE_MAP[groupbyColumn.type];
+    sqlRows.forEach(row => {
+      const groupbyColumnCellValue = row[sqlGroupbyColumnKey];
+      const groupbyColumnCellValueKey = _class.getGroupLabelFromDB(groupbyColumnCellValue, groupbyColumn, tables);
+      if (_class.isValidCellValue(groupbyColumnCellValueKey, includeEmpty)) {
+        Object.keys(summaryColumns).forEach(sqlSummaryColumnName => {
+          const {
+            sqlSummaryColumnKey,
+            columnName
+          } = summaryColumns[sqlSummaryColumnName];
+          const numberColumnCellValue = row[sqlSummaryColumnKey];
+          if (isGroupbyColumnDataAsAnArray) {
+            if (!Array.isArray(groupbyColumnCellValueKey) || groupbyColumnCellValueKey.length === 0) {
+              _class.updateGroupingChartRows(result, null, row, numberColumnCellValue, false, columnName);
+            } else {
+              groupbyColumnCellValueKey.forEach(n => {
+                _class.updateGroupingChartRows(result, n, row, numberColumnCellValue, false, columnName);
+              });
+            }
+          } else {
+            _class.updateGroupingChartRows(result, groupbyColumnCellValueKey, row, numberColumnCellValue, false, columnName);
+          }
+        });
+      }
+    });
+    _class.updateTableViewList(result, groupbyColumn, 'name', 'color');
+    _class.sortCharts(result, groupbyColumn, 'name');
+    return result;
+  }
+  if (!columnGroupbyColumn) {
+    return _class.basicChartSQLResult2JavaScript(chart, sqlRows, chartSQLMap, columnMap, tables);
+  }
+  return _class.groupingTwoDimensionChartSQLResult2JavaScript(chart, sqlRows, chartSQLMap, columnMap, tables);
+};
+ChartUtils.sqlResult2JavaScript = (chart, sqlRows, chartSQLMap, columnMap, tables) => {
+  const {
+    type
+  } = chart.config;
+  switch (type) {
+    case CHART_TYPE.TABLE:
+      {
+        const {
+          column_groupby_column_key
+        } = chart.config;
+        if (!column_groupby_column_key) {
+          return {
+            result: _class.oneDimensionTableSQLResult2JavaScript(chart, sqlRows, chartSQLMap, columnMap, tables)
+          };
+        }
+        return {
+          result: _class.twoDimensionTableSQLResult2JavaScript(chart, sqlRows, chartSQLMap, columnMap, tables)
+        };
+      }
+    case CHART_TYPE.PIE:
+    case CHART_TYPE.RING:
+    case CHART_TYPE.TREE_MAP:
+      {
+        return {
+          result: _class.basicChartSQLResult2JavaScript(chart, sqlRows, chartSQLMap, columnMap, tables)
+        };
+      }
+    case CHART_TYPE.BASIC_NUMBER_CARD:
+      {
+        return {
+          result: _class.basicNumberCardSQLResult2JavaScript(chart, sqlRows, chartSQLMap, columnMap, tables)
+        };
+      }
+    case CHART_TYPE.DASHBOARD:
+      {
+        return {
+          result: _class.dashboardSQLResult2JavaScript(chart, sqlRows, chartSQLMap, columnMap, tables)
+        };
+      }
+    case CHART_TYPE.BAR:
+    case CHART_TYPE.LINE:
+    case CHART_TYPE.HORIZONTAL_BAR:
+    case CHART_TYPE.AREA:
+      {
+        return {
+          result: _class.basicChartSQLResult2JavaScript(chart, sqlRows, chartSQLMap, columnMap, tables)
+        };
+      }
+    case CHART_TYPE.COMBINATION:
+      {
+        return {
+          result: _class.combinationSQLResult2Javascript(chart, sqlRows, chartSQLMap, columnMap, tables)
+        };
+      }
+    case CHART_TYPE.BAR_GROUP:
+    case CHART_TYPE.LINE_GROUP:
+    case CHART_TYPE.HORIZONTAL_GROUP_BAR:
+      {
+        return {
+          result: _class.groupingChartSQLResult2JavaScript(chart, sqlRows, chartSQLMap, columnMap, tables)
+        };
+      }
+    default:
+      {
+        return;
+      }
+  }
+};
+ChartUtils.convertConfig = config => {
+  const {
+    type
+  } = config;
+  if (type === CHART_TYPE.HORIZONTAL_BAR || type === CHART_TYPE.HORIZONTAL_GROUP_BAR) {
+    const {
+      vertical_axis_column_key,
+      vertical_axis_date_granularity,
+      vertical_axis_geolocation_granularity,
+      vertical_axis_include_empty,
+      horizontal_axis_summary_type,
+      horizontal_axis_summary_method,
+      horizontal_axis_column_key,
+      show_vertical_axis_label,
+      vertical_axis_label_position,
+      show_horizontal_axis_label,
+      horizontal_axis_label_position,
+      horizontal_axis_label_color
+    } = config;
+    const newConfig = {
+      x_axis_column_key: vertical_axis_column_key,
+      x_axis_date_granularity: vertical_axis_date_granularity,
+      x_axis_geolocation_granularity: vertical_axis_geolocation_granularity,
+      x_axis_include_empty_cells: vertical_axis_include_empty,
+      y_axis_summary_type: horizontal_axis_summary_type,
+      y_axis_summary_method: horizontal_axis_summary_method,
+      y_axis_summary_column_key: horizontal_axis_column_key,
+      x_axis_show_label: show_vertical_axis_label,
+      x_axis_label_position: vertical_axis_label_position,
+      y_axis_show_label: show_horizontal_axis_label,
+      y_axis_label_position: horizontal_axis_label_position,
+      y_axis_label_color: horizontal_axis_label_color,
+      y_axis_auto_range: config.horizontal_axis_auto_range,
+      y_axis_max: config.horizontal_axis_max,
+      y_axis_mix: config.horizontal_axis_min
+    };
+    return Object.assign({}, config, newConfig);
+  }
+  return config;
+};
+ChartUtils.imEmptyChartResult = chartResult => {
+  return !chartResult || !chartResult.result && chartResult.result !== 0 || Array.isArray(chartResult.result) && chartResult.result.length === 0;
+};
+ChartUtils.calculateChart = (chart, tables, callback, isChartData) => {
+  if (!_class.isValidExistChart(tables, chart)) {
+    const tip_message = 'Please_complete_the_chart_configuration_first';
+    return callback && callback('', tip_message, null);
+  }
+  const {
+    id,
+    config,
+    type
+  } = chart;
+  const newConfig = _class.convertConfig(config);
+  const newChart = {
+    id,
+    config: newConfig,
+    type
+  };
+  const {
+    table_id
+  } = config;
+  const table = getTableById(tables, table_id);
+  const groupbyColumn = _class.getGroupColumn(table, newChart);
+  const columnGroupbyColumn = _class.getColumnGroupColumn(table, newChart);
+  const summaryColumn = _class.getSummaryColumn(table, newChart);
+  const columnMap = {
+    groupbyColumn,
+    columnGroupbyColumn,
+    summaryColumn
+  };
+  const chartTableColumns = table.columns;
+  let chartSQLMap = null;
+  try {
+    chartSQLMap = chartColumn2SqlColumn(newChart, table);
+  } catch (error) {
+    const error_message = 'There_are_some_problems_with_the_filters';
+    return callback && callback(error_message, '', null);
+  }
+  context.queryResultFromDB({
+    chart,
+    tables,
+    onSuccess: res => {
+      const {
+        success,
+        results: sqlRows,
+        error_message
+      } = res.data;
+      if (success) {
+        if (isChartData) {
+          const tipMessage = 'There_are_no_statistic_results_yet';
+          if (!Array.isArray(sqlRows) || sqlRows.length === 0) {
+            callback && callback('', tipMessage, null);
+            return;
+          }
+          const chartResult = _class.sqlResult2JavaScript(newChart, sqlRows, chartSQLMap, columnMap, tables);
+          if (_class.imEmptyChartResult(chartResult)) {
+            callback && callback('', tipMessage, null);
+            return;
+          }
+          callback && callback('', '', {
+            ...chartResult,
+            groupbyColumn,
+            columnGroupbyColumn,
+            summaryColumn,
+            chartTableColumns
+          });
+          return;
+        }
+      }
+      callback && callback(error_message, '', null);
+    },
+    onFail: err => {
+      let errorMessage = 'Network_error';
+      if (err.response) {
+        const {
+          status
+        } = err.response;
+        if (status === 500) {
+          errorMessage = 'Internal_server_error';
+        }
+      }
+      callback && callback(errorMessage, '', null);
+    }
+  });
+};
+ChartUtils.calculateStaticChart = (tables, chart, statisticalResult, callback) => {
+  if (!_class.isValidExistChart(tables, chart)) {
+    const tip_message = 'Please_complete_the_chart_configuration_first';
+    return callback && callback('', tip_message, null);
+  }
+  if (!statisticalResult) {
+    const tip_message = 'There_are_no_statistic_results_yet';
+    return callback && callback('', tip_message, null);
+  }
+  const {
+    id,
+    config
+  } = chart;
+  const newConfig = _class.convertConfig(config);
+  const newChart = {
+    id,
+    config: newConfig
+  };
+  const {
+    type
+  } = config;
+  if (type === CHART_TYPE.TABLE) return callback && callback('', '', statisticalResult);
+  const {
+    table_id,
+    sort_type
+  } = config;
+  const table = getTableById(tables, table_id);
+  const groupbyColumn = _class.getGroupColumn(table, newChart);
+  let result = statisticalResult.result;
+  if (!result) {
+    const tip_message = 'There_are_no_statistic_results_yet';
+    return callback && callback('', tip_message, null);
+  }
+  if (SUPPORT_DATA_SORT_CHART_TYPES.includes(type) && sort_type) {
+    _class.sortChartData(result, sort_type);
+    const newStatisticalResult = {
+      ...statisticalResult,
+      result
+    };
+    return callback && callback('', '', newStatisticalResult);
+  }
+  _class.sortCharts(result, groupbyColumn, 'name');
+  const newStatisticalResult = {
+    ...statisticalResult,
+    result
+  };
+  return callback && callback('', '', newStatisticalResult);
+};
+ChartUtils.getPieColorSet = (tables, chart, result) => {
+  if (!Array.isArray(result)) return [];
+  const {
+    table_id,
+    groupby_column_key: column_id
+  } = chart.config;
+  const column = _class.getColumn(tables, table_id, column_id);
+  const {
+    type: columnType
+  } = column || {};
+  const pieChartColorsLength = PIE_CHART_COLORS.length - 1;
+  const backgroundColor = [];
+  result.forEach((item, index) => {
+    if (columnType === CellType.SINGLE_SELECT || columnType === CellType.MULTIPLE_SELECT) {
+      let {
+        color
+      } = item;
+      backgroundColor.push(color);
+    } else {
+      if (index > pieChartColorsLength) {
+        index = index % pieChartColorsLength;
+      }
+      backgroundColor.push(PIE_CHART_COLORS[index]);
+    }
+  });
+  return backgroundColor;
+};
+ChartUtils.getColumn = (tables, tableId, columnKey) => {
+  const table = getTableById(tables, tableId);
+  return getTableColumnByKey(table, columnKey);
+};
+ChartUtils.formatEmptyName = (dataList, column_groupby_column_key, emptyName) => {
+  if (!Array.isArray(dataList)) return [];
+  let updatedStatistics = [];
+  dataList.forEach(item => {
+    let updated = {};
+    if (!item.name) {
+      updated.name = emptyName;
+    }
+    if (column_groupby_column_key && !item.group_name) {
+      updated.group_name = emptyName;
+    }
+    updatedStatistics.push(Object.assign({}, item, updated));
+  });
+  return updatedStatistics;
+};
+ChartUtils.getStatisticColumns = table => {
+  let {
+    columns
+  } = table;
+  let unStatisticalColumns = [CellType.LONG_TEXT, CellType.IMAGE, CellType.FILE, CellType.CHECKBOX];
+  return columns.filter(column => {
+    return unStatisticalColumns.indexOf(column.type) === -1;
+  });
+};
+ChartUtils.isChartEqual = (preChartElement, curChartElement) => {
+  const elementType = preChartElement.config.type;
+  if (elementType !== curChartElement.config.type) return false;
+  return shallowEqual(preChartElement.config, curChartElement.config);
+};
+ChartUtils.isChartStyleChange = (preChartElement, curChartElement) => {
+  const elementType = preChartElement.config.type;
+  if (elementType !== curChartElement.config.type) return false;
+  if (preChartElement.height.value !== curChartElement.height.value) return true;
+  if (preChartElement.left_in_unit !== curChartElement.left_in_unit) return true;
+  if (preChartElement.width_in_unit !== curChartElement.width_in_unit) return true;
+  if (!ObjectUtils.isSameObject(preChartElement.style_config, curChartElement.style_config)) return true;
+  return !CHART_STYLE_SETTING_KEYS.every(key => preChartElement.config[key] === curChartElement.config[key]);
+};
+ChartUtils.isChartTypeChange = (preChartElement, curChartElement) => {
+  const elementType = preChartElement.config.type;
+  if (elementType !== curChartElement.config.type) return true;
+  return false;
+};
+ChartUtils.isChartSortChange = (preChartElement, curChartElement) => {
+  return preChartElement.config.sort_type !== curChartElement.config.sort_type;
+};
+ChartUtils.isChartStyleChanged = (prevElement, currElement) => {
+  const prevStyleConfig = prevElement && prevElement.style_config;
+  const currStyleConfig = currElement && currElement.style_config;
+  if (!prevStyleConfig && !currStyleConfig) {
+    return false;
+  }
+  if (!prevStyleConfig || !currStyleConfig) {
+    return true;
+  }
+  const {
+    border: prevBorder,
+    title: prevTitle
+  } = prevStyleConfig;
+  const {
+    border: currBorder,
+    title: currTitle
+  } = currStyleConfig;
+  return !shallowEqual(prevBorder, currBorder) || !shallowEqual(prevTitle, currTitle);
+};
+ChartUtils._isChartDataChange = (prevProps, currentProps) => {
+  const {
+    result: newData,
+    chart
+  } = prevProps;
+  const {
+    result: oldData
+  } = currentProps;
+  if (chart.config.type === CHART_TYPE.COMBINATION) {
+    return _class._isCombinationDataChange(newData, oldData);
+  }
+  if (!newData && !oldData) return false;
+  if (!newData && oldData || newData && !oldData) return true;
+  let dataLength = newData === null || newData === void 0 ? void 0 : newData.length;
+  if (dataLength !== (oldData === null || oldData === void 0 ? void 0 : oldData.length)) return true;
+  for (let i = 0; i < dataLength; i++) {
+    let newDataItem = newData[i];
+    let oldDataItem = oldData[i];
+    if (newDataItem.value !== oldDataItem.value) return true; // row's length
+    if (newDataItem.name !== oldDataItem.name) return true;
+  }
+  for (let i = 0; i < dataLength; i++) {
+    let newDataItemRows = newData[i].rows;
+    let oldDataItemRows = oldData[i].rows;
+    for (let j = 0; j < (newDataItemRows === null || newDataItemRows === void 0 ? void 0 : newDataItemRows.length) || 0; j++) {
+      let newDataItemRow = newDataItemRows[j];
+      let oldDataItemRow = oldDataItemRows[j];
+      if (!shallowEqual(newDataItemRow, oldDataItemRow)) return true;
+    }
+  }
+  return false;
+};
+ChartUtils.isValidValue = value => {
+  if (value === 0) return true;
+  return Boolean(value);
+};
+ChartUtils.getSummaryValueDisplayString = function (summaryColumn, summaryValue) {
+  let summaryMethod = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'count';
+  if (!summaryColumn) return summaryValue;
+  if (!summaryValue && summaryValue !== 0) return summaryValue;
+  if (summaryMethod.toUpperCase() === 'DISTINCT_VALUES') return summaryValue;
+  const {
+    data
+  } = summaryColumn;
+  if (_class.isDateSummaryColumn(summaryColumn)) {
+    if (typeof summaryValue !== 'string') return summaryValue;
+
+    // Compatible with previous data
+    const {
+      format
+    } = data || {
+      format: 'YYYY-HH-MM'
+    };
+
+    // The date returned by db carries T and Z, so that there is a time difference in data formatting
+    return getDateDisplayString(summaryValue.replace(/[T|Z]/g, ' '), format);
+  }
+  if (typeof summaryValue !== 'number') return summaryValue;
+  return getNumberDisplayString(summaryValue, data || DEFAULT_NUMBER_FORMAT_OBJECT);
+};
+ChartUtils.isNumericSummaryColumn = summaryColumn => {
+  if (!summaryColumn) return false;
+  const {
+    type
+  } = summaryColumn;
+  return type !== CellType.LINK && isNumericColumn(summaryColumn);
+};
+ChartUtils.isDateSummaryColumn = summaryColumn => {
+  if (!summaryColumn) return false;
+  const {
+    type
+  } = summaryColumn;
+  return type !== CellType.LINK && isDateColumn(summaryColumn);
+};
+ChartUtils.getSummaryExplanation = chart => {
+  const {
+    config
+  } = chart;
+  const {
+    type
+  } = config;
+  switch (type) {
+    case CHART_TYPE.PIE:
+    case CHART_TYPE.LINE:
+    case CHART_TYPE.LINE_GROUP:
+    case CHART_TYPE.RING:
+      {
+        return {
+          count: intl.get('Count_the_number_of_records_in_each_group'),
+          advanced: intl.get('Compute_the_sum_maximum_or_minimum_value_of_records_in_each_group_by_a_field')
+        };
+      }
+    case CHART_TYPE.BAR:
+    case CHART_TYPE.BAR_GROUP:
+      {
+        return {
+          count: intl.get('Group_the_records_according_to_the_vertical_axis_and_count_the_records_in_each_group'),
+          advanced: intl.get('Group_the_records_according_to_the_vertical_axis_and_compute_the_sum_maximum_or_minimum_of_records_in_each_group_by_a_field')
+        };
+      }
+    default:
+      {
+        return {
+          count: intl.get('Count_the_records'),
+          advanced: intl.get('Compute_sum_max_min')
+        };
+      }
+  }
+};
+ChartUtils.getLabelFontSize = labelFontSize => {
+  return isNumber(labelFontSize) ? labelFontSize : DEFAULT_LABEL_FONT_SIZE;
+};
+ChartUtils.getPieColor = (column, index, data) => {
+  let {
+    type: columnType,
+    data: columnData
+  } = column;
+  if (columnType === 'single-select' || columnType === 'multiple-select') {
+    if (columnData && columnData.options) {
+      const selectedItem = columnData.options.find(item => {
+        return item.name === data.name;
+      }) || {};
+      return selectedItem.color || '#dbdbdb';
+    }
+  } else {
+    const pieChartColorsLength = PIE_CHART_COLORS.length - 1;
+    const newIndex = index > pieChartColorsLength ? index % pieChartColorsLength : index;
+    return PIE_CHART_COLORS[newIndex];
+  }
+};
+ChartUtils.formatPieChartData = (data, chart, tables) => {
+  if (!Array.isArray(data) || data.length === 0 || !chart) {
+    return {
+      data: [],
+      total: 0,
+      colorSet: []
+    };
+  }
+  const {
+    table_id,
+    groupby_column_key,
+    minimum_slice_percent
+  } = chart.config;
+  const table = getTableById(tables, table_id);
+  const column = getColumnByKey(groupby_column_key, table ? table.columns : []);
+  let sum = data.reduce((total, currentValue) => {
+    return total += currentValue.value;
+  }, 0);
+  const minimumSlicePercentage = typeof minimum_slice_percent === 'number' ? minimum_slice_percent : 1.5;
+  const threshold = sum * (minimumSlicePercentage / 100 || 0);
+  let filteredItems = [];
+  let colorSet = [];
+  let filteredData = [];
+  let rows = [];
+  data.forEach((item, index) => {
+    const value = item.value;
+    if (value >= threshold) {
+      item.percent = String(Number.parseFloat(value / sum * 100).toFixed(1)) + '%';
+      const color = _class.getPieColor(column, index, item);
+      item.color = color;
+      colorSet.push(color);
+      filteredData.push(item);
+    } else {
+      rows.push(...item.rows);
+      filteredItems.push(item);
+    }
+  });
+  if (filteredItems.length > 0) {
+    const filteredSum = filteredItems.reduce((total, currentValue) => {
+      return total += currentValue.value;
+    }, 0);
+    filteredData.push({
+      name: '_Others',
+      value: filteredSum,
+      color: '#dbdbdb',
+      percent: String(Number.parseFloat(filteredSum / sum * 100).toFixed(1)) + '%',
+      rows
+    });
+    colorSet.push('#dbdbdb');
+  }
+  return {
+    data: filteredData,
+    total: sum,
+    colorSet
+  };
+};
+ChartUtils.initTotal = summaryMethod => {
+  if (summaryMethod === 'SUM' || summaryMethod === 'DISTINCT_VALUES') return 0;
+  return null;
+};
+ChartUtils.getCurrentTheme = themeName => {
+  if (themeName) {
+    const currentColorTheme = STYLE_COLORS.find(item => item.name === themeName);
+    return currentColorTheme;
+  }
+  return STYLE_COLORS[0];
+};
+export default ChartUtils;