sea-chart 0.0.79 → 0.0.80

package/dist/components/chart-color-selector/color-selector.js

@@ -0,0 +1,27 @@
+import _DTableSelect from "dtable-ui-component/lib/DTableSelect";
+import React from 'react';
+import { FormGroup, Label } from 'reactstrap';
+import { STACK_AND_PIE_CHART_THEMES_OPTIONS } from '../../constants/color-rules';
+import intl from '../../intl';
+export default function ColorSelector(_ref) {
+  let {
+    colorTheme,
+    onChange
+  } = _ref;
+  const options = [{
+    value: STACK_AND_PIE_CHART_THEMES_OPTIONS.DEFAULT,
+    label: /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", null, intl.get('Use_default_color')))
+  }, {
+    value: STACK_AND_PIE_CHART_THEMES_OPTIONS.SINGLE_SELECT_COLUMN_COLORS,
+    label: /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", null, intl.get('Use_colors_in_single_select_solumn')))
+  }];
+  const selectedOption = options.find(option => option.value === colorTheme);
+  const handleChange = selectedOption => {
+    onChange(selectedOption.value);
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FormGroup, null, /*#__PURE__*/React.createElement(Label, null, intl.get('Color')), /*#__PURE__*/React.createElement(_DTableSelect, {
+    value: selectedOption,
+    onChange: handleChange,
+    options: options
+  })));
+}

package/dist/constants/color-rules.js

@@ -1,4 +1,8 @@
 import { CellType, FILTER_PREDICATE_TYPE } from 'dtable-utils';
+export const STACK_AND_PIE_CHART_THEMES_OPTIONS = {
+  DEFAULT: 'default',
+  SINGLE_SELECT_COLUMN_COLORS: 'single_select_column_colors'
+};
 export const COLOR_RULE_FILTER_TYPE_MAP = {
   NUMERIC_VALUE: 'numeric_value'
 };

package/dist/locale/lang/de.js

@@ -247,6 +247,8 @@ const de = {
   "Line_type": "Linientyp",
   "Summarize_description": "Die Summe, das Maximum, das Minimum oder den Durchschitt der Einträge basierend auf einem Feld berechnen",
   "Count_description": "Einträge basierend auf den Dateneinstellungen zählen",
-  "Display_empty_when_data_is_zero": "Wert 0 als leeren Wert anzeigen"
+  "Display_empty_when_data_is_zero": "Wert 0 als leeren Wert anzeigen",
+  "Use_default_color": "Standardfarbe verwenden",
+  "Use_colors_in_single_select_solumn": "Verwenden Sie Farben in einer einzelnen Auswahlspalte"
 };
 export default de;

package/dist/locale/lang/en.js

@@ -247,6 +247,8 @@ const en = {
   "Line_type": "Line type",
   "Summarize_description": "Calculate the sum, maximum, minimum or average of records based on a field",
   "Count_description": "Count the number of records based on data settings",
-  "Display_empty_when_data_is_zero": "Display empty when data is zero"
+  "Display_empty_when_data_is_zero": "Display empty when data is zero",
+  "Use_default_color": "Use default color",
+  "Use_colors_in_single_select_solumn": "Use colors in single select column"
 };
 export default en;

package/dist/locale/lang/es.js

@@ -247,6 +247,8 @@ const es = {
   "Line_type": "Line type",
   "Summarize_description": "Calculate the sum, maximum, minimum or average of records based on a field",
   "Count_description": "Count the number of records based on data settings",
-  "Display_empty_when_data_is_zero": "Display empty when data is zero"
+  "Display_empty_when_data_is_zero": "Display empty when data is zero",
+  "Use_default_color": "Use default color",
+  "Use_colors_in_single_select_solumn": "Use colors in single select column"
 };
 export default es;

package/dist/locale/lang/fr.js

@@ -247,6 +247,8 @@ const fr = {
   "Line_type": "Type de ligne",
   "Summarize_description": "Calculer la somme, le maximum, le minimum our la moyenne pour les enregistrements en fonction d'un champ",
   "Count_description": "Compter les enregistrements basé sur les paramètres de données",
-  "Display_empty_when_data_is_zero": "Afficher la valeur 0 comme valeur vide"
+  "Display_empty_when_data_is_zero": "Afficher la valeur 0 comme valeur vide",
+  "Use_default_color": "Utiliser la couleur par défaut",
+  "Use_colors_in_single_select_solumn": "Utiliser les couleurs dans une colonne de sélection unique"
 };
 export default fr;

package/dist/locale/lang/pt.js

@@ -247,6 +247,8 @@ const pt = {
   "Line_type": "Line type",
   "Summarize_description": "Calculate the sum, maximum, minimum or average of records based on a field",
   "Count_description": "Count the number of records based on data settings",
-  "Display_empty_when_data_is_zero": "Display empty when data is zero"
+  "Display_empty_when_data_is_zero": "Display empty when data is zero",
+  "Use_default_color": "Use default color",
+  "Use_colors_in_single_select_solumn": "Use colors in single select column"
 };
 export default pt;

package/dist/locale/lang/ru.js

@@ -247,6 +247,8 @@ const ru = {
   "Line_type": "Line type",
   "Summarize_description": "Calculate the sum, maximum, minimum or average of records based on a field",
   "Count_description": "Count the number of records based on data settings",
-  "Display_empty_when_data_is_zero": "Display empty when data is zero"
+  "Display_empty_when_data_is_zero": "Display empty when data is zero",
+  "Use_default_color": "Use default color",
+  "Use_colors_in_single_select_solumn": "Use colors in single select column"
 };
 export default ru;

package/dist/locale/lang/zh_CN.js

@@ -247,6 +247,8 @@ const zh_CN = {
   "Line_type": "线型",
   "Summarize_description": "按照一个字段计算记录的总和、最大值、最小值或者平均值",
   "Count_description": "根据数据设置计算记录数量",
-  "Display_empty_when_data_is_zero": "数据为零时留空"
+  "Display_empty_when_data_is_zero": "数据为零时留空",
+  "Use_default_color": "使用默认颜色",
+  "Use_colors_in_single_select_solumn": "使用列中的选项颜色"
 };
 export default zh_CN;

package/dist/settings/advance-bar-settings/style-settings.js

@@ -3,18 +3,23 @@ import _DTableRadioGroup from "dtable-ui-component/lib/DTableRadioGroup";
 import _DTableSwitch from "dtable-ui-component/lib/DTableSwitch";
 import React, { useCallback, useMemo, useState } from 'react';
 import { Label, Input, Row } from 'reactstrap';
+import { CellType } from 'dtable-ui-component/lib/constants';
 import Divider from '../widgets/divider';
 import MinMaxSetting from '../widgets/min-max-setting';
 import DisplayValuesSettings from '../widgets/display-values-settings';
 import { X_LABEL_POSITIONS, Y_LABEL_POSITIONS, LABEL_POSITION_TYPE_SHOW, SUPPORT_STACK_VALUE_CHART_TYPES, CHART_TYPE } from '../../constants';
 import intl from '../../intl';
 import SelectLineType from '../widgets/select-line-type';
+import ColorSelector from '../../components/chart-color-selector/color-selector';
+import { STACK_AND_PIE_CHART_THEMES_OPTIONS } from '../../constants/color-rules';
+import { getColumnByKey } from '../../utils';
 const StyleSettings = _ref => {
   let {
     chart,
     xLabel,
     yLabel,
-    onChange
+    onChange,
+    tables
   } = _ref;
   const {
     config
@@ -32,8 +37,15 @@ const StyleSettings = _ref => {
     label_font_size,
     display_each_block_data,
     line_type,
-    title_name
+    title_name,
+    color_theme,
+    column_groupby_column_key,
+    table_id
   } = config;
+  const table = tables.find(table => table._id === table_id);
+  const column = getColumnByKey(column_groupby_column_key, table.columns);
+  const isGroupBySingleSelectColumn = (column === null || column === void 0 ? void 0 : column.type) === CellType.SINGLE_SELECT;
+  const defaultColorTheme = STACK_AND_PIE_CHART_THEMES_OPTIONS.DEFAULT;
   const [currYaxisTitle, setCurrYaxisTitle] = useState(title_name || '');
   const xAxisLabelOptions = useMemo(() => {
     if (xLabel === 'Vertical_axis') {
@@ -120,6 +132,12 @@ const StyleSettings = _ref => {
     };
     onChange(update);
   }, [chart, onChange]);
+  const onChartColorChange = useCallback(value => {
+    const update = {
+      'color_theme': value
+    };
+    onChange(update);
+  }, [onChange]);
   const onKeyDown = useCallback(event => {
     if (event.key === 'Enter') {
       event.preventDefault();
@@ -198,7 +216,10 @@ const StyleSettings = _ref => {
       onMinChange: onYAxisMinChange,
       onMaxChange: onYAxisMaxChange
     })))
-  }), /*#__PURE__*/React.createElement(Divider, null), ![CHART_TYPE.BAR_CUSTOM].includes(type) && /*#__PURE__*/React.createElement(DisplayValuesSettings, {
+  }), isGroupBySingleSelectColumn && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Divider, null), /*#__PURE__*/React.createElement(ColorSelector, {
+    colorTheme: color_theme || defaultColorTheme,
+    onChange: onChartColorChange
+  })), /*#__PURE__*/React.createElement(Divider, null), ![CHART_TYPE.BAR_CUSTOM].includes(type) && /*#__PURE__*/React.createElement(DisplayValuesSettings, {
     isShowValueKey: "y_axis_show_value",
     isShowValue: y_axis_show_value,
     fontSizeKey: "label_font_size",

package/dist/settings/horizontal-bar-settings/style-settings.js

@@ -43,7 +43,8 @@ const StyleSettings = _ref => {
     yLabel: 'Horizontal_axis',
     labelColorConfigs: labelColorConfigs,
     chart: newChart,
-    onChange: onChange
+    onChange: onChange,
+    tables: tables
   });
 };
 export default StyleSettings;

package/dist/settings/index.js

@@ -90,6 +90,7 @@ const Settings = _ref => {
     onChange: modifyStatistic
   }), type === CHART_SETTINGS_TYPE.CHART_STYLE && /*#__PURE__*/React.createElement(StyleSettings, {
     chart: chart,
+    tables: tables,
     labelColorConfigs: labelColorConfigs,
     onChange: modifyStyle
   }), children && type === CHART_SETTINGS_TYPE.GENERAL_STYLE && /*#__PURE__*/React.createElement(React.Fragment, null, children)))));

package/dist/settings/pie-settings/style-settings.js

@@ -3,16 +3,20 @@ import _DTableSelect from "dtable-ui-component/lib/DTableSelect";
 import _DTableSwitch from "dtable-ui-component/lib/DTableSwitch";
 import React, { useCallback, useMemo } from 'react';
 import { Label, FormGroup } from 'reactstrap';
+import { CellType } from 'dtable-ui-component/lib/constants';
 import Divider from '../widgets/divider';
 import MiniNumSlicePercent from '../widgets/mininum-slice-percent';
 import { FontSizeSettings } from '../widgets/font-settings';
-import { eventStopPropagation } from '../../utils';
+import { eventStopPropagation, getColumnByKey } from '../../utils';
 import { CHART_LABEL_POSITIONS, CHART_LABEL_POSITION_SHOW, CHART_LABEL_FORMATS, CHART_LABEL_FORMAT_SHOW } from '../../constants';
 import intl from '../../intl';
+import { STACK_AND_PIE_CHART_THEMES_OPTIONS } from '../../constants/color-rules';
+import ColorSelector from '../../components/chart-color-selector/color-selector';
 const StyleSettings = _ref => {
   let {
     chart,
-    onChange
+    onChange,
+    tables
   } = _ref;
   const labelPositionOptions = useMemo(() => {
     return CHART_LABEL_POSITIONS.map(item => {
@@ -89,6 +93,11 @@ const StyleSettings = _ref => {
       minimum_slice_percent: value
     });
   }, [onChange]);
+  const onChartColorChange = useCallback(value => {
+    onChange && onChange({
+      color_theme: value
+    });
+  }, [onChange]);
   const {
     config
   } = chart;
@@ -98,8 +107,15 @@ const StyleSettings = _ref => {
     label_position,
     label_format,
     label_font_size,
-    minimum_slice_percent
+    minimum_slice_percent,
+    table_id,
+    groupby_column_key,
+    color_theme
   } = config;
+  const table = tables.find(table => table._id === table_id);
+  const column = getColumnByKey(groupby_column_key, table.columns);
+  const isGroupBySingleSelectColumn = (column === null || column === void 0 ? void 0 : column.type) === CellType.SINGLE_SELECT;
+  const defaultColorTheme = STACK_AND_PIE_CHART_THEMES_OPTIONS.DEFAULT;
   const selectedLabelOption = labelPositionOptions.find(item => item.value === label_position);
   const selectedLabelFormat = labelFormatOptions.find(item => item.value === label_format) || labelFormatOptions[0];
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FormGroup, {
@@ -108,6 +124,9 @@ const StyleSettings = _ref => {
     checked: show_legend || false,
     placeholder: intl.get('Display_legend'),
     onChange: onDisplayLegendChange
+  })), isGroupBySingleSelectColumn && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Divider, null), /*#__PURE__*/React.createElement(ColorSelector, {
+    colorTheme: color_theme || defaultColorTheme,
+    onChange: onChartColorChange
   })), /*#__PURE__*/React.createElement(Divider, null), /*#__PURE__*/React.createElement(_CollapsibleSettingLayout, {
     title: intl.get('Label'),
     children: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_DTableSwitch, {

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

@@ -485,7 +485,7 @@ BaseUtils.getPieColorSet = (tables, chart, result) => {
   });
   return backgroundColor;
 };
-BaseUtils.getPieColor = (column, index, data, currentTheme) => {
+BaseUtils.getPieColor = (column, index, data, currentTheme, useColumnColor) => {
   let {
     type: columnType,
     data: columnData
@@ -493,7 +493,7 @@ BaseUtils.getPieColor = (column, index, data, currentTheme) => {
   const {
     colors
   } = currentTheme;
-  if (columnType === 'single-select' || columnType === 'multiple-select') {
+  if ((columnType === 'single-select' || columnType === 'multiple-select') && useColumnColor) {
     if (columnData && columnData.options) {
       const selectedItem = columnData.options.find(item => {
         return item.name === data.name.trim();
@@ -506,7 +506,7 @@ BaseUtils.getPieColor = (column, index, data, currentTheme) => {
     return colors[newIndex];
   }
 };
-BaseUtils.formatPieChartData = (data, chart, tables, currentTheme) => {
+BaseUtils.formatPieChartData = (data, chart, tables, currentTheme, useColumnColor) => {
   if (!Array.isArray(data) || data.length === 0 || !chart) {
     return {
       data: [],
@@ -527,7 +527,7 @@ BaseUtils.formatPieChartData = (data, chart, tables, currentTheme) => {
   const minimumSlicePercentage = typeof minimum_slice_percent === 'number' ? minimum_slice_percent : 1.5;
   const threshold = sum * (minimumSlicePercentage / 100 || 0);
   let filteredItems = [];
-  let colorSet = [];
+  let colorMap = {};
   let filteredData = [];
   let rows = [];
   data.forEach((item, index) => {
@@ -535,9 +535,9 @@ BaseUtils.formatPieChartData = (data, chart, tables, currentTheme) => {
     item.name = item.name + ' ';
     if (value >= threshold) {
       item.percent = String(Number.parseFloat(value / sum * 100).toFixed(1)) + '%';
-      const color = _BaseUtils.getPieColor(column, index, item, currentTheme);
+      const color = _BaseUtils.getPieColor(column, index, item, currentTheme, useColumnColor);
       item.color = color;
-      colorSet.push(color);
+      colorMap[item.name.trim()] = color;
       filteredData.push(item);
     } else {
       rows.push(...item.rows);
@@ -555,23 +555,21 @@ BaseUtils.formatPieChartData = (data, chart, tables, currentTheme) => {
       percent: String(Number.parseFloat(filteredSum / sum * 100).toFixed(1)) + '%',
       rows
     });
-    colorSet.push('#dbdbdb');
+    colorMap['_Others'] = '#dbdbdb';
   }
   return {
     data: filteredData,
     total: sum,
-    colorSet
+    colorMap
   };
 };
 // table
 // format SINGLE_SELECT, LAST_MODIFIER, CREATOR, COLLABORATOR, DATE, NUMBER
-// need to be optimized
 BaseUtils.updateTableViewListItemNameAndColor = (result, column, nameKey, colorKey) => {
   let {
     type: columnType,
     data: columnData
   } = column;
-  // name is nameKey's value here
   let name = result[nameKey];
   if (columnType === CellType.SINGLE_SELECT || columnType === CellType.MULTIPLE_SELECT) {
     const options = getColumnOptions(column);
@@ -611,28 +609,6 @@ BaseUtils.updateTableViewListItemNameAndColor = (result, column, nameKey, colorK
       }
       result[nameKey] = users.map(user => user.name).join(', ');
     });
-
-    // 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;

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

@@ -1,4 +1,6 @@
 import context from '../../context';
+import { getErrorMessage } from '..';
+import intl from '../../intl';
 import BaseUtils from './base-utils';
 import SQLStatisticsUtils from './sql-statistics-utils';
 import OriginalDataUtils from './original-data-utils';
@@ -19,7 +21,8 @@ ChartUtils.calculateChart = (chart, value, callback) => {
         error_message
       } = res.data;
       if (!success) {
-        callback && callback(error_message, '', null);
+        const errMsg = intl.get(error_message);
+        callback && callback(errMsg, '', null);
         return;
       }
       if (dataSources === OriginalDataUtils.dataSources) {
@@ -29,15 +32,7 @@ ChartUtils.calculateChart = (chart, value, callback) => {
       SQLStatisticsUtils.calculateChart(chart, value, callback, (res === null || res === void 0 ? void 0 : (_res$data = res.data) === null || _res$data === void 0 ? void 0 : _res$data.results) || []);
     },
     onFail: err => {
-      let errorMessage = String(err) || 'Network_error';
-      if (err.response) {
-        const {
-          status
-        } = err.response;
-        if (status === 500) {
-          errorMessage = 'Internal_server_error';
-        }
-      }
+      let errorMessage = getErrorMessage(err);
       callback && callback(errorMessage, '', null);
     }
   });

package/dist/utils/collaborator-utils.js

@@ -75,7 +75,7 @@ export function getUsers(emails, cb) {
     return;
   }
 
-  // if any user is not fetched, fetch them
+  // if any user not fetched, fetch them
   context.queryUsers(unFetchedUsers, emailUserMap => {
     // add them to cache
     updateKnownUsers(emailUserMap);

package/dist/view/index.js

@@ -182,7 +182,7 @@ class View extends React.PureComponent {
     if (errorMessage) {
       return /*#__PURE__*/React.createElement("div", {
         className: classnames('error', validClassName, tipBackgroundColorClassName)
-      }, /*#__PURE__*/React.createElement("span", null, intl.get(errorMessage)));
+      }, /*#__PURE__*/React.createElement("span", null, errorMessage));
     }
     if (tipMessage) {
       return /*#__PURE__*/React.createElement("div", {

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

@@ -2,12 +2,14 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import DataSet from '@antv/data-set';
 import { getNumberDisplayString } from 'dtable-utils';
-import { debounce, maxBy, throttle } from 'lodash-es';
+import { debounce, maxBy } from 'lodash-es';
 import classNames from 'classnames';
+import { CellType } from 'dtable-ui-component/lib/constants';
 import intl from '../../intl';
 import { sortDataByGroupSum } from '../../utils/column-utils';
 import { EMPTY_NAME, CHART_TYPE, CHART_SUMMARY_TYPE, DEFAULT_NUMBER_FORMAT_OBJECT, CHART_THEME_COLOR } from '../../constants';
 import { BaseUtils, isFunction } from '../../utils';
+import { STACK_AND_PIE_CHART_THEMES_OPTIONS } from '../../constants/color-rules';
 import ChartComponent from './chart-component';
 class BarGroup extends ChartComponent {
   constructor(props) {
@@ -66,7 +68,8 @@ class BarGroup extends ChartComponent {
         summaryColumn,
         globalTheme,
         chartColorTheme,
-        customRender
+        customRender,
+        tables
       } = this.props;
       const {
         type,
@@ -74,12 +77,17 @@ class BarGroup extends ChartComponent {
         y_axis_show_value,
         label_font_size,
         display_each_block_data,
-        y_axis_summary_type
+        y_axis_summary_type,
+        table_id,
+        column_groupby_column_key,
+        color_theme
       } = chart.config;
       const theme = CHART_THEME_COLOR[globalTheme];
       const isGroup = type === CHART_TYPE.BAR_GROUP;
-      const chartBarColor = this.groupName;
+      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;
       let singleBarWidth, singleBarRadius;
       // y-axis label width：6 + 10
       const chartWidth = this.chart.width - 6 - 10;
@@ -158,8 +166,8 @@ class BarGroup extends ChartComponent {
           lineWidth: 1
         },
         position: type === CHART_TYPE.BAR_STACK ? 'middle' : ''
-      }).position('name*value').size(singleBarWidth).color(chartBarColor, group_name => {
-        return this.colorMap[group_name];
+      }).position('name*value').size(singleBarWidth).color('group_name*group_color', (group_name, group_color) => {
+        return useSingleSelectColumnColor ? group_color : this.colorMap[group_name];
       }).tooltip('name*value*group_name*raw_name', (name, value, group_name, raw_name) => {
         return {
           title: !name && typeof name !== 'number' ? intl.get(EMPTY_NAME) : name,
@@ -185,7 +193,6 @@ class BarGroup extends ChartComponent {
           }
         } else {
           return {
-            // fill: chartBarColor,
             radius: [singleBarRadius, singleBarRadius, 0, 0]
           };
         }
@@ -197,11 +204,10 @@ class BarGroup extends ChartComponent {
       isFunction(customRender) && customRender(this.chart);
       this.setNameLabelAndTooltip(theme, this.labelCount);
       this.setValueLabel(theme);
-      this.setLegend(this.groupName, theme, 'top-right');
+      this.setLegend('group_name', theme, 'top-right');
       this.chart.interaction('element-highlight-by-x');
     };
     this.chart = null;
-    this.groupName = 'group_name';
   }
   componentDidMount() {
     this.createChart();

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

@@ -22,9 +22,13 @@ export default class ChartComponent extends Component {
     this.getTitle = (tables, table_id, yAxisType, yAxisKey) => {
       return yAxisType === CHART_SUMMARY_TYPE.COUNT ? intl.get('Amount') : this.getAxisLabel(tables, table_id, yAxisKey);
     };
-    this.getAxisLabel = (tables, tableId, columnKey) => {
-      const table = getTableById(tables, tableId);
+    this.getColumn = (tables, table_id, columnKey) => {
+      const table = getTableById(tables, table_id);
       const column = getTableColumnByKey(table, columnKey) || {};
+      return column;
+    };
+    this.getAxisLabel = (tables, tableId, columnKey) => {
+      const column = this.getColumn(tables, tableId, columnKey);
       return column.name || '';
     };
     this.initChart = (container, _ref) => {
@@ -448,7 +452,8 @@ export default class ChartComponent extends Component {
     };
     this.setColorMap = (data, chartColorTheme) => {
       let currentIdx = 0;
-      let colors = CHART_STYLE_COLORS;
+      const defaultColors = CHART_STYLE_COLORS;
+      let colors = defaultColors;
       if (chartColorTheme) {
         colors = BaseUtils.getCurrentTheme(chartColorTheme).colors;
       }

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

@@ -2,9 +2,11 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { debounce, maxBy, throttle } from 'lodash-es';
 import classNames from 'classnames';
+import { CellType } from 'dtable-ui-component/lib/constants';
 import { CHART_TYPE, EMPTY_NAME, CHART_THEME_COLOR } from '../../constants';
 import { BaseUtils, isFunction } from '../../utils';
 import intl from '../../intl';
+import { STACK_AND_PIE_CHART_THEMES_OPTIONS } from '../../constants/color-rules';
 import HorizontalComponent from './horizontal-component';
 class HorizontalBarGroup extends HorizontalComponent {
   constructor(props) {
@@ -55,17 +57,23 @@ class HorizontalBarGroup extends HorizontalComponent {
         chart,
         summaryColumn,
         globalTheme,
-        chartColorTheme
+        chartColorTheme,
+        tables
       } = this.props;
       const theme = CHART_THEME_COLOR[globalTheme];
       const {
         horizontal_axis_summary_method,
         display_data,
         label_font_size,
-        type
+        type,
+        column_groupby_column_key,
+        table_id,
+        color_theme
       } = chart.config;
       const isGroup = type === CHART_TYPE.HORIZONTAL_GROUP_BAR;
-      const chartBarColor = this.groupName;
+      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 newData = this.getChartGroupData(data);
       let singleBarWidth, singleBarRadius;
       // y-axis label width：(6 + 10)
@@ -75,6 +83,7 @@ class HorizontalBarGroup extends HorizontalComponent {
         singleBarWidth = Math.round(chartHeight / (2 * newData.length));
         this.markFirstOrLast(data, 'last');
       } else {
+        // stacked chart
         const maxCountGroup = maxBy(newData, 'currentGroupCount');
         // calculate the width of each bar in a mostCommonCountGroup
         singleBarWidth = Math.round(chartHeight / (2 * newData.length * maxCountGroup.currentGroupCount));
@@ -108,8 +117,8 @@ class HorizontalBarGroup extends HorizontalComponent {
           stroke: '#fff',
           lineWidth: 1
         }
-      }).position('name*value').size(singleBarWidth).color(chartBarColor, group_name => {
-        return this.colorMap[group_name];
+      }).position('name*value').size(singleBarWidth).color('group_name*group_color', (group_name, group_color) => {
+        return useSingleSelectColumnColor ? group_color : this.colorMap[group_name];
       }).tooltip('name*value*group_name*raw_name', (name, value, group_name, raw_name) => {
         return {
           title: !name && typeof name !== 'number' ? intl.get(EMPTY_NAME) : name,
@@ -135,7 +144,6 @@ class HorizontalBarGroup extends HorizontalComponent {
           }
         } else {
           return {
-            // fill: chartBarColor,
             radius: [singleBarRadius, singleBarRadius, 0, 0]
           };
         }
@@ -147,11 +155,10 @@ class HorizontalBarGroup extends HorizontalComponent {
       this.setNameLabelAndTooltip(theme, this.labelCount);
       this.setValueLabel(theme);
       this.chart.coordinate().transpose();
-      this.setLegend(this.groupName, theme, 'top-right');
+      this.setLegend('group_name', theme, 'top-right');
       this.chart.interaction('element-highlight-by-x');
     };
     this.chart = null;
-    this.groupName = 'group_name';
   }
   componentDidMount() {
     this.createChart();

package/dist/view/wrapper/pie.js

@@ -1,8 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { CellType } from 'dtable-ui-component/lib/constants';
 import { CHART_LABEL_POSITIONS, CHART_LABEL_FORMATS, CHART_THEME_COLOR } from '../../constants';
 import { BaseUtils, isFunction } from '../../utils';
 import intl from '../../intl';
+import { STACK_AND_PIE_CHART_THEMES_OPTIONS } from '../../constants/color-rules';
 import ChartComponent from './chart-component';
 class Pie extends ChartComponent {
   constructor(props) {
@@ -46,13 +48,15 @@ class Pie extends ChartComponent {
         display_label,
         label_position,
         label_font_size,
-        summary_method
+        summary_method,
+        color_theme
       } = chart.config;
       const currentTheme = BaseUtils.getCurrentTheme(chartColorTheme);
+      const useSingleSelectColumnColor = color_theme === STACK_AND_PIE_CHART_THEMES_OPTIONS.SINGLE_SELECT_COLUMN_COLORS;
       const {
         data: newData,
-        colorSet
-      } = BaseUtils.formatPieChartData(data, chart, tables, currentTheme);
+        colorMap
+      } = BaseUtils.formatPieChartData(data, chart, tables, currentTheme, useSingleSelectColumnColor);
       if (!Array.isArray(newData)) return;
       this.loadData(newData);
       this.chart.on('interval:click', e => {
@@ -73,7 +77,9 @@ class Pie extends ChartComponent {
       this.isInnerLabel = !label_position || label_position === CHART_LABEL_POSITIONS[0];
       this.innerLabelOffset = '-25%';
       this.outerLabelOffset = 20;
-      this.currentChart = this.chart.interval().adjust('stack').position('value').color('name', colorSet).label('value*percent', (value, percent) => {
+      this.currentChart = this.chart.interval().adjust('stack').position('value').color('name', name => {
+        return colorMap[name.trim()];
+      }).label('value*percent', (value, percent) => {
         const displayValue = BaseUtils.getSummaryValueDisplayString(summaryColumn, value, summary_method);
         return {
           content: this.getLabel(displayValue, percent)

package/dist/view/wrapper/ring.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { CHART_LABEL_POSITIONS, CHART_LABEL_FORMATS, CHART_THEME_COLOR } from '../../constants';
 import { BaseUtils, isFunction } from '../../utils';
 import intl from '../../intl';
+import { STACK_AND_PIE_CHART_THEMES_OPTIONS } from '../../constants/color-rules';
 import ChartComponent from './chart-component';
 class Ring extends ChartComponent {
   constructor(props) {
@@ -48,14 +49,16 @@ class Ring extends ChartComponent {
         label_position,
         label_font_size,
         summary_method,
-        label_format
+        label_format,
+        color_theme
       } = chart.config;
       const colorTheme = BaseUtils.getCurrentTheme(chartColorTheme);
+      const useSingleSelectColumnColor = color_theme === STACK_AND_PIE_CHART_THEMES_OPTIONS.SINGLE_SELECT_COLUMN_COLORS;
       const {
         data: newData,
-        colorSet,
+        colorMap,
         total
-      } = BaseUtils.formatPieChartData(data, chart, tables, colorTheme);
+      } = BaseUtils.formatPieChartData(data, chart, tables, colorTheme, useSingleSelectColumnColor);
       if (!Array.isArray(newData)) return;
       this.sum = total;
       this.loadData(newData);
@@ -93,7 +96,9 @@ class Ring extends ChartComponent {
       }
       this.innerLabelOffset = innerLabelOffset;
       this.outerLabelOffset = outerLabelOffset;
-      this.currentChart = this.chart.interval().adjust('stack').position('value').color('name', colorSet).label('value*percent', (value, percent) => {
+      this.currentChart = this.chart.interval().adjust('stack').position('value').color('name', name => {
+        return colorMap[name.trim()];
+      }).label('value*percent', (value, percent) => {
         const displayValue = BaseUtils.getSummaryValueDisplayString(summaryColumn, value, summary_method);
         return {
           content: this.getLabel(displayValue, percent)

package/dist/view/wrapper/treemap.js

@@ -43,6 +43,7 @@ class Treemap extends ChartComponent {
       this.chart.clear(true);
     };
     this.drawChart = () => {
+      debugger;
       let {
         result: data,
         chart,
@@ -58,7 +59,7 @@ class Treemap extends ChartComponent {
       let colorsTheme = BaseUtils.getCurrentTheme(chartColorTheme);
       const {
         data: newData,
-        colorSet
+        colorMap
       } = BaseUtils.formatPieChartData(data, chart, tables, colorsTheme);
       if (!Array.isArray(newData)) return;
       const {
@@ -130,7 +131,9 @@ class Treemap extends ChartComponent {
           }
         }
       });
-      this.chart.polygon().position('x*y').color('name', colorSet).tooltip('name*value*percent', (name, value, percent) => {
+      this.chart.polygon().position('x*y').color('name', name => {
+        return colorMap[name.trim()];
+      }).tooltip('name*value*percent', (name, value, percent) => {
         const displayValue = BaseUtils.getSummaryValueDisplayString(summaryColumn, value, summary_method);
         return {
           name,

package/package.json

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