sea-chart 0.0.91 → 0.0.92

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

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

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

@@ -1,6 +1,6 @@
 import dayjs from 'dayjs';
 import { CellType, DATE_COLUMN_OPTIONS, FORMULA_COLUMN_TYPES_MAP, getTableById, getViewById, getTableColumnByKey } from 'dtable-utils';
-import { CHART_SUMMARY_TYPE, CHART_TYPE, Y_AXIS_TYPE_PREFIX } from '../../../constants';
+import { CHART_STYLE_COLORS, CHART_SUMMARY_TYPE, CHART_TYPE, Y_AXIS_TYPE_PREFIX } from '../../../constants';
 import { getColorFromSingleSelectColumn, islinkDateFormula } from '../../column-utils';
 import { isArrayCellValue } from '../../cell-value-utils';
 import { getFormattedLabel, isValidRow } from '../../row-utils';
@@ -175,7 +175,7 @@ async function calculateGroupingChart(chart, value, _ref2) {
   results = results.map(result => {
     return {
       ...result,
-      group_color: result.color,
+      group_color: result.color || CHART_STYLE_COLORS[0],
       name: getFormattedLabel(groupbyColumn, result.name, value.collaborators)
     };
   });

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

@@ -87,7 +87,7 @@ async function calculateOneDimensionTable(chart, value, _ref) {
   }).filter(item => getTableColumnByKey(table, item.key));
   pivot_rows.forEach(row => {
     row.original_name = row.name;
-    row.name = getFormattedLabel(column, row.name, value.collaborators);
+    row.name = getFormattedLabel(column, row.name, value.collaborators, chart.type);
   });
   return {
     pivot_columns_total,
@@ -324,12 +324,12 @@ async function calculateTwoDimensionTable(chart, value, _ref2) {
   // format shown label(name)
   const map = {};
   pivot_columns.forEach(column => {
-    const name = getFormattedLabel(rowGroupbyColumn, column.key, value.collaborators);
+    const name = getFormattedLabel(rowGroupbyColumn, column.key, value.collaborators, chart.type);
     map[column.key] = name;
     column.key = name;
   });
   pivot_rows.forEach(row => {
-    row.name = getFormattedLabel(groupbyColumn, row.name, value.collaborators);
+    row.name = getFormattedLabel(groupbyColumn, row.name, value.collaborators, chart.type);
     const cells = {};
     Object.keys(row.cells).forEach(key => {
       cells[map[key]] = row.cells[key];

package/dist/utils/row-utils.js

@@ -29,9 +29,7 @@ export const isValidRow = (row, formulaRow, column, includeEmpty) => {
   }
   return cellValue || cellValue === 0;
 };
-
-// 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];
+const RETURN_ARRAY_CHART_TYPES = [CHART_TYPE.TABLE];
 export const getFormattedLabel = (column, name, collaborators, chartType) => {
   let {
     type: columnType,
@@ -53,22 +51,22 @@ export const getFormattedLabel = (column, name, collaborators, chartType) => {
       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;
+    if (RETURN_ARRAY_CHART_TYPES.includes(chartType)) {
+      if (Array.isArray(name)) {
+        return name;
+      }
+      return [];
     }
-    return [];
+    const options = getColumnOptions(column);
+    let selectedOption = getOption(options, name);
+    let {
+      name: optionName,
+      color: optionColor
+    } = selectedOption || {};
+    // TODO：use option‘s color
+    // return { name: optionName, color: optionColor };
+    return optionName;
   } else if (columnType === CellType.COLLABORATOR) {
     let collaborator = collaborators.find(item => {
       let email = name;

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

@@ -85,8 +85,8 @@ class BarGroup extends ChartComponent {
       const theme = CHART_THEME_COLOR[globalTheme];
       const isGroup = type === CHART_TYPE.BAR_GROUP;
       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 && color_theme === STACK_AND_PIE_CHART_THEMES_OPTIONS.SINGLE_SELECT_COLUMN_COLORS;
+      const column_groupby_column = this.getColumn(tables, table_id, column_groupby_column_key);
+      const useSingleSelectColumnColor = (column_groupby_column === null || column_groupby_column === void 0 ? void 0 : column_groupby_column.type) === CellType.SINGLE_SELECT && color_theme === STACK_AND_PIE_CHART_THEMES_OPTIONS.SINGLE_SELECT_COLUMN_COLORS;
       let singleBarWidth, singleBarRadius;
       // y-axis label width：6 + 10
       const chartWidth = this.chart.width - 6 - 10;
@@ -146,7 +146,9 @@ class BarGroup extends ChartComponent {
         type: 'dodge',
         marginRatio: 0
       };
-      this.setColorMap(data, chartColorTheme);
+
+      // use single select column color
+      useSingleSelectColumnColor ? this.setSingleSelectColorMap(data) : this.setColorMap(data, chartColorTheme);
       this.chart.interval().animate({
         // custom update animation
         update: {
@@ -162,8 +164,8 @@ class BarGroup extends ChartComponent {
           lineWidth: 1
         },
         position: type === CHART_TYPE.BAR_STACK ? 'middle' : ''
-      }).position('name*value').size(singleBarWidth).color('group_name*group_color', (group_name, group_color) => {
-        return useSingleSelectColumnColor ? group_color : this.colorMap[group_name] || CHART_STYLE_COLORS[0];
+      }).position('name*value').size(singleBarWidth).color('group_name', group_name => {
+        return this.colorMap[group_name] || CHART_STYLE_COLORS[0];
       }).tooltip('name*value*group_name*raw_name', (name, value, group_name, raw_name) => {
         return {
           title: !name && typeof name !== 'number' ? intl.get(EMPTY_NAME) : name,

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

@@ -465,6 +465,13 @@ export default class ChartComponent extends Component {
       }, {});
       this.colorMap = colorMap;
     };
+    this.setSingleSelectColorMap = data => {
+      const colorMap = {};
+      data.forEach(item => {
+        colorMap[item.group_name] = item.group_color || item.color;
+      });
+      this.colorMap = colorMap;
+    };
     this.formatDataByName = data => {
       const formattedItems = {};
       data.forEach(item => {

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

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

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

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

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

@@ -99,6 +99,7 @@ class OneDimensionTableWithNumericColumns extends PureComponent {
         total
       }, selectedCell);
     };
+    // click records only support summary_type is COUNT
     this.renderRows = () => {
       const {
         result,
@@ -177,15 +178,9 @@ class OneDimensionTableWithNumericColumns extends PureComponent {
               'selected-pivot-cell-top': isSelectedCellTop,
               'selected-pivot-cell-left': isSelectedCellLeft
             }),
-            key: "table-cell-".concat(cellIdx),
-            onClick: () => this.toggleRecords({
-              rows,
-              name: rowItem === null || rowItem === void 0 ? void 0 : rowItem.name,
-              total: total[key]
-            }, {
-              rowIdx,
-              cellIdx
-            }),
+            key: "table-cell-".concat(cellIdx)
+            // onClick={() => this.toggleRecords({ rows, name: rowItem?.name, total: total[key] }, { rowIdx, cellIdx })}
+            ,
             title: isValidDisplayValue ? displayValue : ''
           }, isValidDisplayValue ? displayValue : /*#__PURE__*/React.createElement("i", null), /*#__PURE__*/React.createElement("span", {
             className: classnames({
@@ -197,14 +192,9 @@ class OneDimensionTableWithNumericColumns extends PureComponent {
             '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
-          }),
+          })
+          // onClick={() => this.toggleRecords({ rows, name: rowItem?.name, total: rowTotal }, { rowIdx })}
+          ,
           title: rowTotal ? rowTotal : 0
         }, rowTotal ? rowTotal : /*#__PURE__*/React.createElement("i", null, "0"), /*#__PURE__*/React.createElement("span", {
           className: classnames({
@@ -230,14 +220,9 @@ class OneDimensionTableWithNumericColumns extends PureComponent {
             'selected-pivot-cell': isSelectRowTotalCell,
             'selected-pivot-cell-left': isSelectRowTotalCellLeft
           }),
-          key: "total-cell-".concat(index),
-          onClick: () => this.toggleRecords({
-            rows: pivotColumnCell,
-            total: pivot_columns_total[c.key]
-          }, {
-            rowIdx: pivot_rows.length,
-            cellIdx: index
-          }),
+          key: "total-cell-".concat(index)
+          // onClick={() => this.toggleRecords({ rows: pivotColumnCell, total: pivot_columns_total[c.key] }, { rowIdx: pivot_rows.length, cellIdx: index })}
+          ,
           title: totalDisplayValue
         }, isValidTotalDisplayValue ? totalDisplayValue : /*#__PURE__*/React.createElement("i", null), /*#__PURE__*/React.createElement("span", {
           className: classnames({
@@ -247,14 +232,9 @@ class OneDimensionTableWithNumericColumns extends PureComponent {
       }), /*#__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
-        }),
+        })
+        // onClick={() => this.toggleRecords({ rows: lastRows, total: lastRowTotal }, { rowIdx: pivot_rows.length, cellIdx: pivot_columns?.length })}
+        ,
         title: lastRowTotal
       }, BaseUtils.isValidValue(lastRowTotal, display_empty) ? lastRowTotal : /*#__PURE__*/React.createElement("i", null))));
     };

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

@@ -108,7 +108,7 @@ class TwoDimensionTable extends PureComponent {
       })));
     };
     this.toggleRecords = (cell, selectedCell) => {
-      if (window.isMobile) return;
+      if (window.isMobile || !this.isCount) return;
       const {
         rowIdx: selectedRowIdx,
         cellIdx: selectedCellIdx
@@ -121,7 +121,7 @@ class TwoDimensionTable extends PureComponent {
       this.props.toggleRecords(cell, selectedCell);
     };
     this.onClickTotals = (recordsList, selectedCell) => {
-      if (window.isMobile) return;
+      if (window.isMobile || !this.isCount) return;
       const rows = recordsList.flat();
       const total = rows.length;
       this.toggleRecords({
@@ -186,6 +186,7 @@ class TwoDimensionTable extends PureComponent {
       const tableTotalDisplayValue = BaseUtils.getSummaryValueDisplayString(summaryColumn, pivot_table_total, summaryMethod);
       const isValidTableTotalDisplayValue = BaseUtils.isValidValue(tableTotalDisplayValue, display_empty);
       const isCount = summary_type === CHART_SUMMARY_TYPE.COUNT;
+      this.isCount = isCount;
       const isCollaborator = groupbyColumn.type === CellType.COLLABORATOR;
       return /*#__PURE__*/React.createElement("tbody", null, pivotRowsLen > 0 && pivot_rows.map((rowItem, rowIdx) => {
         let {

package/package.json

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