sea-chart 0.0.12 → 0.0.13

package/dist/model/area-group.js

@@ -1,6 +1,6 @@
 import BaseModel from './base-model';
 import { isBoolean } from '../utils';
-import { LABEL_COLORS, CHART_TYPE, CHART_SUMMARY_TYPE } from '../constants';
+import { CHART_TYPE, CHART_SUMMARY_TYPE } from '../constants';
 class AreaGroup extends BaseModel {
   constructor(options) {
     super({
@@ -26,7 +26,7 @@ class AreaGroup extends BaseModel {
     this.y_axis_auto_range = options.y_axis_auto_range;
     this.y_axis_min = options.y_axis_min;
     this.y_axis_max = options.y_axis_max;
-    this.y_axis_label_color = options.y_axis_label_color || LABEL_COLORS[0];
+    this.y_axis_label_color = options.y_axis_label_color;
 
     // column-group
     this.column_groupby_column_key = options.column_groupby_column_key;

package/dist/model/area.js

@@ -1,6 +1,6 @@
 import BaseModel from './base-model';
 import { isBoolean } from '../utils';
-import { LABEL_COLORS, CHART_TYPE, CHART_SUMMARY_TYPE } from '../constants';
+import { CHART_TYPE, CHART_SUMMARY_TYPE } from '../constants';
 class Area extends BaseModel {
   constructor(options) {
     super({
@@ -24,7 +24,7 @@ class Area extends BaseModel {
     this.y_axis_auto_range = options.y_axis_auto_range;
     this.y_axis_min = options.y_axis_min;
     this.y_axis_max = options.y_axis_max;
-    this.y_axis_label_color = options.y_axis_label_color || LABEL_COLORS[0];
+    this.y_axis_label_color = options.y_axis_label_color;
     this.sort_type = options.sort_type;
     this.label_font_size = options.label_font_size;
   }

package/dist/model/bar-custom.js

@@ -1,6 +1,6 @@
 import BaseModel from './base-model';
 import { isBoolean } from '../utils';
-import { LABEL_COLORS, CHART_TYPE, CHART_SUMMARY_TYPE } from '../constants';
+import { CHART_TYPE, CHART_SUMMARY_TYPE } from '../constants';
 class BarCustom extends BaseModel {
   constructor(options) {
     super({
@@ -30,7 +30,7 @@ class BarCustom extends BaseModel {
     this.y_axis_auto_range = options.y_axis_auto_range;
     this.y_axis_min = options.y_axis_min;
     this.y_axis_max = options.y_axis_max;
-    this.y_axis_label_color = options.y_axis_label_color || LABEL_COLORS[0];
+    this.y_axis_label_color = options.y_axis_label_color;
     this.display_each_block_data = options.display_each_block_data || false;
     this.sort_type = options.sort_type;
     this.label_font_size = options.label_font_size;

package/dist/model/bar-group.js

@@ -1,6 +1,6 @@
 import BaseModel from './base-model';
 import { isBoolean } from '../utils';
-import { LABEL_COLORS, CHART_TYPE, CHART_SUMMARY_TYPE } from '../constants';
+import { CHART_TYPE, CHART_SUMMARY_TYPE } from '../constants';
 class BarGroup extends BaseModel {
   constructor(options) {
     super({
@@ -30,7 +30,7 @@ class BarGroup extends BaseModel {
     this.y_axis_auto_range = options.y_axis_auto_range;
     this.y_axis_min = options.y_axis_min;
     this.y_axis_max = options.y_axis_max;
-    this.y_axis_label_color = options.y_axis_label_color || LABEL_COLORS[0];
+    this.y_axis_label_color = options.y_axis_label_color;
 
     // column group
     this.column_groupby_column_key = options.column_groupby_column_key;

package/dist/model/bar-stack.js

@@ -1,6 +1,6 @@
 import BaseModel from './base-model';
 import { isBoolean } from '../utils';
-import { LABEL_COLORS, CHART_TYPE, CHART_SUMMARY_TYPE } from '../constants';
+import { CHART_TYPE, CHART_SUMMARY_TYPE } from '../constants';
 class BarStack extends BaseModel {
   constructor(options) {
     super({
@@ -26,7 +26,7 @@ class BarStack extends BaseModel {
     this.y_axis_auto_range = options.y_axis_auto_range;
     this.y_axis_min = options.y_axis_min;
     this.y_axis_max = options.y_axis_max;
-    this.y_axis_label_color = options.y_axis_label_color || LABEL_COLORS[0];
+    this.y_axis_label_color = options.y_axis_label_color;
 
     // column-group
     this.column_groupby_column_key = options.column_groupby_column_key;

package/dist/model/bar.js

@@ -1,6 +1,6 @@
 import BaseModel from './base-model';
 import { isBoolean } from '../utils';
-import { LABEL_COLORS, CHART_TYPE, CHART_SUMMARY_TYPE } from '../constants';
+import { CHART_TYPE, CHART_SUMMARY_TYPE } from '../constants';
 class Bar extends BaseModel {
   constructor(options) {
     super({
@@ -30,7 +30,7 @@ class Bar extends BaseModel {
     this.y_axis_auto_range = options.y_axis_auto_range;
     this.y_axis_min = options.y_axis_min;
     this.y_axis_max = options.y_axis_max;
-    this.y_axis_label_color = options.y_axis_label_color || LABEL_COLORS[0];
+    this.y_axis_label_color = options.y_axis_label_color;
     this.sort_type = options.sort_type;
     this.label_font_size = options.label_font_size;
   }

package/dist/model/completeness.js

@@ -1,6 +1,6 @@
 import BaseModel from './base-model';
 import { isBoolean } from '../utils';
-import { LABEL_COLORS, CHART_TYPE } from '../constants';
+import { CHART_TYPE } from '../constants';
 class Completeness extends BaseModel {
   constructor(options) {
     super({
@@ -10,7 +10,7 @@ class Completeness extends BaseModel {
     this.name_column_key = options.x_axis_column_key;
     this.completed_column_key = options.completed_column_key;
     this.target_column_key = options.target_column_key;
-    this.completed_color = options.completed_color || LABEL_COLORS[0];
+    this.completed_color = options.completed_color;
     this.display_percentage = isBoolean(options.display_percentage) ? options.display_percentage : true;
     this.label_font_size = options.label_font_size;
   }

package/dist/model/horizontal-bar.js

@@ -1,6 +1,6 @@
 import BaseModel from './base-model';
 import { isBoolean } from '../utils';
-import { LABEL_COLORS, CHART_TYPE, CHART_SUMMARY_TYPE } from '../constants';
+import { CHART_TYPE, CHART_SUMMARY_TYPE } from '../constants';
 class HorizontalBar extends BaseModel {
   constructor(options) {
     super({
@@ -24,7 +24,7 @@ class HorizontalBar extends BaseModel {
     this.horizontal_axis_summary_method = options.y_axis_summary_method || CHART_SUMMARY_TYPE.SUM;
 
     // horizontal axis style
-    this.horizontal_axis_label_color = options.y_axis_label_color || LABEL_COLORS[0];
+    this.horizontal_axis_label_color = options.y_axis_label_color;
     this.show_horizontal_axis_label = isBoolean(options.y_axis_show_label) ? options.y_axis_show_label : false;
     this.horizontal_axis_label_position = options.y_axis_label_position;
     this.display_data = isBoolean(options.y_axis_show_value) ? options.y_axis_show_value : false;

package/dist/model/horizontal-group-bar.js

@@ -1,6 +1,6 @@
 import BaseModel from './base-model';
 import { isBoolean } from '../utils';
-import { CHART_TYPE, LABEL_COLORS, CHART_SUMMARY_TYPE } from '../constants';
+import { CHART_TYPE, CHART_SUMMARY_TYPE } from '../constants';
 class HorizontalGroupBar extends BaseModel {
   constructor(options) {
     super({
@@ -24,7 +24,7 @@ class HorizontalGroupBar extends BaseModel {
     this.horizontal_axis_summary_method = options.y_axis_summary_method || CHART_SUMMARY_TYPE.SUM;
 
     // horizontal axis style
-    this.horizontal_axis_label_color = options.y_axis_label_color || LABEL_COLORS[0];
+    this.horizontal_axis_label_color = options.y_axis_label_color;
     this.show_horizontal_axis_label = isBoolean(options.y_axis_show_label) ? options.y_axis_show_label : false;
     this.horizontal_axis_label_position = options.y_axis_label_position;
     this.horizontal_axis_auto_range = options.y_axis_auto_range;

package/dist/model/line-group.js

@@ -1,6 +1,6 @@
 import BaseModel from './base-model';
 import { isBoolean } from '../utils';
-import { LABEL_COLORS, CHART_TYPE, CHART_SUMMARY_TYPE } from '../constants';
+import { CHART_TYPE, CHART_SUMMARY_TYPE } from '../constants';
 class LineGroup extends BaseModel {
   constructor(options) {
     super({
@@ -30,7 +30,7 @@ class LineGroup extends BaseModel {
     this.y_axis_auto_range = options.y_axis_auto_range;
     this.y_axis_min = options.y_axis_min;
     this.y_axis_max = options.y_axis_max;
-    this.y_axis_label_color = options.y_axis_label_color || LABEL_COLORS[0];
+    this.y_axis_label_color = options.y_axis_label_color;
 
     // column group
     this.column_groupby_column_key = options.column_groupby_column_key;

package/dist/model/line.js

@@ -1,6 +1,6 @@
 import BaseModel from './base-model';
 import { isBoolean } from '../utils';
-import { LABEL_COLORS, CHART_TYPE, CHART_SUMMARY_TYPE } from '../constants';
+import { CHART_TYPE, CHART_SUMMARY_TYPE } from '../constants';
 class Line extends BaseModel {
   constructor(options) {
     super({
@@ -30,7 +30,7 @@ class Line extends BaseModel {
     this.y_axis_auto_range = options.y_axis_auto_range;
     this.y_axis_min = options.y_axis_min;
     this.y_axis_max = options.y_axis_max;
-    this.y_axis_label_color = options.y_axis_label_color || LABEL_COLORS[0];
+    this.y_axis_label_color = options.y_axis_label_color;
     this.sort_type = options.sort_type;
     this.label_font_size = options.label_font_size;
   }

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

@@ -17,21 +17,37 @@ const StyleSettings = _ref => {
     onChange
   } = _ref;
   const xAxisLabelOptions = useMemo(() => {
+    if (xLabel === 'Vertical_axis') {
+      return Y_LABEL_POSITIONS.map(item => {
+        return {
+          value: item,
+          label: intl.get(LABEL_POSITION_TYPE_SHOW[item])
+        };
+      });
+    }
     return X_LABEL_POSITIONS.map(item => {
       return {
         value: item,
         label: intl.get(LABEL_POSITION_TYPE_SHOW[item])
       };
     });
-  }, []);
+  }, [xLabel]);
   const yAxisLabelOptions = useMemo(() => {
+    if (yLabel === 'Horizontal_axis') {
+      return X_LABEL_POSITIONS.map(item => {
+        return {
+          value: item,
+          label: intl.get(LABEL_POSITION_TYPE_SHOW[item])
+        };
+      });
+    }
     return Y_LABEL_POSITIONS.map(item => {
       return {
         value: item,
         label: intl.get(LABEL_POSITION_TYPE_SHOW[item])
       };
     });
-  }, []);
+  }, [yLabel]);
   const onAxisLabelShowChange = useCallback((event, labelKey) => {
     eventStopPropagation(event);
     const {

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

@@ -18,21 +18,37 @@ const StyleSettings = _ref => {
     labelColorConfigs
   } = _ref;
   const xAxisLabelOptions = useMemo(() => {
+    if (xLabel === 'Vertical_axis') {
+      return Y_LABEL_POSITIONS.map(item => {
+        return {
+          value: item,
+          label: intl.get(LABEL_POSITION_TYPE_SHOW[item])
+        };
+      });
+    }
     return X_LABEL_POSITIONS.map(item => {
       return {
         value: item,
         label: intl.get(LABEL_POSITION_TYPE_SHOW[item])
       };
     });
-  }, []);
+  }, [xLabel]);
   const yAxisLabelOptions = useMemo(() => {
+    if (yLabel === 'Horizontal_axis') {
+      return X_LABEL_POSITIONS.map(item => {
+        return {
+          value: item,
+          label: intl.get(LABEL_POSITION_TYPE_SHOW[item])
+        };
+      });
+    }
     return Y_LABEL_POSITIONS.map(item => {
       return {
         value: item,
         label: intl.get(LABEL_POSITION_TYPE_SHOW[item])
       };
     });
-  }, []);
+  }, [yLabel]);
   const onAxisLabelShowChange = useCallback((event, labelKey) => {
     eventStopPropagation(event);
     const {

package/dist/settings/data-settings.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { CHART_TYPE } from '../constants';
 import { BarDataSettings } from './bar-settings';
 import { AdvanceBarDataSettings } from './advance-bar-settings';
@@ -10,6 +10,8 @@ import { BasicNumberCardDataSettings } from './basic-number-card';
 import { CombinationDataSettings } from './combination-settings';
 import { DashboardDataSettings } from './dashboard-settings';
 const DataSettings = props => {
+  const [refreshToggle, setRefreshToggle] = useState(false);
+  const cacheRef = useRef(props);
   const {
     chart
   } = props;
@@ -19,6 +21,20 @@ const DataSettings = props => {
   const {
     type
   } = config;
+  useEffect(() => {
+    const {
+      chart: oldChart
+    } = cacheRef.current;
+    const {
+      chart
+    } = props;
+    // Refresh settings after changing chart type
+    if (oldChart.config.type !== chart.config.type) {
+      cacheRef.current = props;
+      setRefreshToggle(!refreshToggle);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [props]);
   switch (type) {
     case CHART_TYPE.BAR:
     case CHART_TYPE.BAR_CUSTOM:

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

@@ -22,13 +22,11 @@ const DataSettings = _ref => {
       ...oldConfig,
       ...update
     };
-    Object.keys(newConfig).forEach(key => {
+    Object.keys(update).forEach(key => {
       if (BAR_MAP_TO_HORIZONTAL_MAP[key]) {
         updateConfig[BAR_MAP_TO_HORIZONTAL_MAP[key]] = newConfig[key];
       } else {
-        if (!Object.values(BAR_MAP_TO_HORIZONTAL_MAP).includes(key)) {
-          updateConfig[key] = newConfig[key];
-        }
+        updateConfig[key] = newConfig[key];
       }
     });
     oldOnChange && oldOnChange(updateConfig);

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

@@ -7,6 +7,7 @@ const StyleSettings = _ref => {
   let {
     chart,
     tables,
+    labelColorConfigs,
     onChange: oldOnChange
   } = _ref;
   const onChange = useCallback(update => {
@@ -15,7 +16,7 @@ const StyleSettings = _ref => {
       ...chart.config,
       ...update
     };
-    Object.keys(newConfig).forEach(key => {
+    Object.keys(update).forEach(key => {
       if (BAR_MAP_TO_HORIZONTAL_MAP[key]) {
         updateConfig[BAR_MAP_TO_HORIZONTAL_MAP[key]] = newConfig[key];
       } else {
@@ -40,6 +41,7 @@ const StyleSettings = _ref => {
   return /*#__PURE__*/React.createElement(BarStyleComponent, {
     xLabel: 'Vertical_axis',
     yLabel: 'Horizontal_axis',
+    labelColorConfigs: labelColorConfigs,
     chart: newChart,
     onChange: onChange
   });

package/dist/settings/index.js

@@ -1,9 +1,10 @@
 import React, { useCallback, useMemo, useState, useEffect } from 'react';
 import classnames from 'classnames';
 import { eventStopPropagation } from '../utils';
+import { BaseUtils } from '../utils';
 import DataSettings from './data-settings';
 import StyleSettings from './style-settings';
-import { CHART_SETTINGS_TYPE, LABEL_COLORS, CHART_SETTINGS } from '../constants';
+import { CHART_SETTINGS_TYPE, CHART_SETTINGS } from '../constants';
 import intl from '../intl';
 import Divider from './widgets/divider';
 import './index.css';
@@ -21,7 +22,7 @@ const Settings = _ref => {
   useEffect(() => {
     var _window$dtable;
     const systemCustomColors = ((_window$dtable = window.dtable) === null || _window$dtable === void 0 ? void 0 : _window$dtable.customColors) || [];
-    const colorConfigs = [...LABEL_COLORS.map(color => ({
+    const colorConfigs = [...BaseUtils.getCurrentTheme().colors.map(color => ({
       color: color.toUpperCase(),
       text_color: '#fff'
     })), ...systemCustomColors.map(customColor => ({
@@ -51,7 +52,7 @@ const Settings = _ref => {
       ...chart,
       ...update
     };
-    onChange && onChange(newChart, CHART_SETTINGS_TYPE.STYLE);
+    onChange && onChange(newChart, CHART_SETTINGS_TYPE.CHART_STYLE);
   }, [chart, onChange]);
   const validTitle = useMemo(() => {
     return title || {};

package/dist/settings/widgets/color-settings/color-use-type-selector.js

@@ -56,6 +56,7 @@ class ColorUseTypeSelector extends Component {
             return [TYPE_COLOR_USING.USE_DEFAULT, TYPE_COLOR_USING.USE_COLUMN_COLORS];
           }
         case CHART_TYPE.BAR:
+        case CHART_TYPE.AREA:
         case CHART_TYPE.LINE:
         case CHART_TYPE.HORIZONTAL_BAR:
           {
@@ -79,7 +80,7 @@ class ColorUseTypeSelector extends Component {
         return {
           value: colorType,
           label: /*#__PURE__*/React.createElement("span", {
-            className: "select-module select-module-name"
+            className: "select-module"
           }, intl.get(TYPE_DISPLAY_COLOR_USING[colorType]))
         };
       });
@@ -94,7 +95,9 @@ class ColorUseTypeSelector extends Component {
       } = chart;
       switch (type) {
         case CHART_TYPE.LINE:
+        case CHART_TYPE.AREA:
         case CHART_TYPE.BAR:
+        case CHART_TYPE.HORIZONTAL_BAR:
           {
             const {
               y_axis_label_color
@@ -104,16 +107,6 @@ class ColorUseTypeSelector extends Component {
             }
             return labelColorConfigs[0].color;
           }
-        case CHART_TYPE.HORIZONTAL_BAR:
-          {
-            const {
-              horizontal_axis_label_color
-            } = chart;
-            if (horizontal_axis_label_color) {
-              return horizontal_axis_label_color.toUpperCase();
-            }
-            return labelColorConfigs[0].color;
-          }
         default:
           {
             return '';
@@ -169,27 +162,26 @@ class ColorUseTypeSelector extends Component {
         chart,
         labelColorConfigs
       } = this.props;
-      let updatedChart = Object.assign({}, chart, {
+      let updatedChart = {
         color_option
-      });
+      };
       if (color_option === TYPE_COLOR_USING.USE_SPECIFIC_COLORS) {
         switch (chart.type) {
+          case CHART_TYPE.HORIZONTAL_BAR:
           case CHART_TYPE.BAR:
             {
               updatedChart.y_axis_label_color = updatedChart.y_axis_label_color || labelColorConfigs[0].color;
               break;
             }
-          case CHART_TYPE.HORIZONTAL_BAR:
-            {
-              updatedChart.horizontal_axis_label_color = updatedChart.horizontal_axis_label_color || labelColorConfigs[0].color;
-              break;
-            }
           default:
             {
               break;
             }
         }
       }
+      if (color_option === TYPE_COLOR_USING.USE_DEFAULT) {
+        updatedChart.y_axis_label_color = labelColorConfigs[0].color;
+      }
       this.props.updateChart(updatedChart);
     };
     this.onToggleColorSelector = () => {
@@ -218,16 +210,14 @@ class ColorUseTypeSelector extends Component {
       const {
         chart
       } = this.props;
-      let updatedChart = Object.assign({}, chart);
+      let updatedChart = {};
       switch (chart.type) {
         case CHART_TYPE.BAR:
-          {
-            updatedChart.y_axis_label_color = color;
-            break;
-          }
+        case CHART_TYPE.AREA:
+        case CHART_TYPE.LINE:
         case CHART_TYPE.HORIZONTAL_BAR:
           {
-            updatedChart.horizontal_axis_label_color = color;
+            updatedChart.y_axis_label_color = color;
             break;
           }
         default:
@@ -251,8 +241,7 @@ class ColorUseTypeSelector extends Component {
       const {
         chart
       } = this.props;
-      console.log('colorRules', colorRules);
-      let updatedChart = Object.assign({}, chart);
+      let updatedChart = {};
       switch (chart.type) {
         case CHART_TYPE.BAR:
           {

package/dist/settings/widgets/date-summary-item.js

@@ -85,7 +85,7 @@ class DateSummaryItem extends Component {
     }, /*#__PURE__*/React.createElement("i", {
       onClick: this.onToggleExpand,
       className: "icon dtable-font ".concat(isExpand ? 'dtable-icon-drop-down' : 'dtable-icon-right-slide')
-    }), /*#__PURE__*/React.createElement("label", null, (type === CHART_TYPE.TABLE ? intl.get('Summary_field') : intl.get('Numeric_field')) + (1 + index))), /*#__PURE__*/React.createElement("span", {
+    }), /*#__PURE__*/React.createElement("label", null, intl.get('Summary_field') + (1 + index))), /*#__PURE__*/React.createElement("span", {
       className: "title-item title-right"
     }, index !== 0 && /*#__PURE__*/React.createElement("i", {
       className: "dtable-font dtable-icon-fork-number close-icon",

package/dist/settings/widgets/numeric-summary-item.js

@@ -47,7 +47,7 @@ class NumericSummaryItem extends Component {
       column_key,
       summary_method
     } = value;
-    const selectedColumnOption = numericColumnOptions.find(option => option.value === column_key);
+    const selectedColumnOption = numericColumnOptions.find(option => option.value.key === column_key);
     const selectedSummaryMethodOption = this.summaryMethodOptions.find(option => option.value === summary_method);
     const {
       isExpand

package/dist/settings/widgets/summary-method-setting.js

@@ -34,13 +34,9 @@ class SummaryMethodSettings extends Component {
   }
   render() {
     const {
-      chart,
       value,
       numericColumnOptions
     } = this.props;
-    const {
-      type
-    } = chart.config;
     const {
       column_key,
       summary_method
@@ -49,7 +45,7 @@ class SummaryMethodSettings extends Component {
     const selectedSummaryMethodOption = this.summaryMethodOptions.find(option => option.value === summary_method);
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FormGroup, {
       className: "chart-parameter-item"
-    }, /*#__PURE__*/React.createElement(Label, null, type === CHART_TYPE.TABLE ? intl.get('Summary_field') : intl.get('Numeric_field')), /*#__PURE__*/React.createElement(DTableSelect, {
+    }, /*#__PURE__*/React.createElement(Label, null, intl.get('Summary_field')), /*#__PURE__*/React.createElement(DTableSelect, {
       value: selectedColumnOption,
       placeholder: intl.get('Select_a_column'),
       onChange: this.props.onColumnOptionChange,

package/dist/settings/widgets/summary-settings.js

@@ -186,7 +186,7 @@ class SummarySettings extends Component {
       let selectedColumnOption = this.numericColumnsOptions.find(o => o.value.key === summaryColumn);
       return /*#__PURE__*/React.createElement(FormGroup, {
         className: "sea-chart-parameter-item"
-      }, /*#__PURE__*/React.createElement("label", null, intl.get('Numeric_field')), /*#__PURE__*/React.createElement(DTableSelect, {
+      }, /*#__PURE__*/React.createElement("label", null, intl.get('Summary_field')), /*#__PURE__*/React.createElement(DTableSelect, {
         value: selectedColumnOption,
         onChange: this.onSelectSummaryColumn,
         options: this.numericColumnsOptions,

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

@@ -72,7 +72,13 @@ BaseUtils.isValidExistChart = (tables, chart, rule) => {
     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;
+  let groupByColumnKey = config.groupby_column_key || config.x_axis_column_key || config.vertical_axis_column_key;
+  if ([CHART_TYPE.BAR, CHART_TYPE.BAR_GROUP, CHART_TYPE.BAR_CUSTOM, CHART_TYPE.BAR_STACK, CHART_TYPE.LINE, CHART_TYPE.LINE_GROUP, CHART_TYPE.AREA, CHART_TYPE.AREA_GROUP].includes(config.type)) {
+    groupByColumnKey = config.x_axis_column_key;
+  }
+  if ([CHART_TYPE.HORIZONTAL_BAR, CHART_TYPE.HORIZONTAL_GROUP_BAR].includes(config.type)) {
+    groupByColumnKey = config.vertical_axis_column_key;
+  }
   if (!groupByColumnKey) return false;
   if (!getTableColumnByKey(table, groupByColumnKey)) return false;
   if (type === CHART_TYPE.COMBINATION) {

package/dist/view/wrapper/area.js

@@ -42,7 +42,8 @@ class Area extends ChartComponent {
         chart,
         summaryColumn,
         theme,
-        customRender
+        customRender,
+        themeName
       } = this.props;
       const {
         y_axis_summary_type,
@@ -51,7 +52,10 @@ class Area extends ChartComponent {
         y_axis_show_value,
         label_font_size
       } = chart.config;
-      const chartBarColor = y_axis_label_color || '#2a67d1';
+      let chartBarColor = y_axis_label_color || '#5B8FF9';
+      if (themeName) {
+        chartBarColor = BaseUtils.getCurrentTheme(themeName).colors[0];
+      }
       this.drawLabels(data);
 
       // set Coord type

package/dist/view/wrapper/bar.js

@@ -44,7 +44,8 @@ class Bar extends ChartComponent {
         chart,
         summaryColumn,
         theme,
-        customRender
+        customRender,
+        themeName
       } = this.props;
       const {
         y_axis_summary_type,
@@ -55,7 +56,10 @@ class Bar extends ChartComponent {
         color_option,
         y_axis_label_color_rules
       } = chart.config;
-      const chartBarColor = BaseUtils.getCurrentTheme().colors[0] || y_axis_label_color || '#2a67d1';
+      let chartBarColor = y_axis_label_color || '#5B8FF9';
+      if (themeName) {
+        chartBarColor = BaseUtils.getCurrentTheme(themeName).colors[0];
+      }
       const colorRules = color_option === TYPE_COLOR_USING.USE_RULES && y_axis_label_color_rules && getConvertedColorRules(y_axis_label_color_rules);
       this.drawLabels(data);
 

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

@@ -44,7 +44,8 @@ class HorizontalBar extends HorizontalComponent {
       const {
         chart,
         summaryColumn,
-        theme
+        theme,
+        themeName
       } = this.props;
       const {
         horizontal_axis_summary_type,
@@ -53,7 +54,10 @@ class HorizontalBar extends HorizontalComponent {
         display_data,
         label_font_size
       } = chart.config;
-      const chartBarColor = horizontal_axis_label_color || '#2a67d1';
+      let chartBarColor = horizontal_axis_label_color || '#5B8FF9';
+      if (themeName) {
+        chartBarColor = BaseUtils.getCurrentTheme(themeName).colors[0];
+      }
       data.reverse();
       this.drawLabels(data);
 

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

@@ -11,8 +11,8 @@ export default class HorizontalComponent extends ChartComponent {
         table_id,
         x_axis_column_key,
         y_axis_summary_column_key,
-        y_axis_label_position,
-        x_axis_label_position,
+        vertical_axis_label_position,
+        horizontal_axis_label_position,
         y_axis_summary_type,
         show_vertical_axis_label,
         show_horizontal_axis_label
@@ -33,11 +33,11 @@ export default class HorizontalComponent extends ChartComponent {
           const column = getTableColumnByKey(table, y_axis_summary_column_key);
           div.innerHTML = "".concat(column ? column.name : '');
         }
-        div.setAttribute('style', "color:".concat(textColor, "; width: 100%; text-align: ").concat(x_axis_label_position, "; bottom: -20px; position: absolute"));
+        div.setAttribute('style', "color:".concat(textColor, "; width: 100%; text-align: ").concat(horizontal_axis_label_position, "; bottom: -20px; position: absolute"));
         chartContainer.appendChild(div);
       }
       if (xLabel && show_horizontal_axis_label) {
-        xLabel.setAttribute('style', "color:".concat(textColor, "; width: 100%; text-align: ").concat(x_axis_label_position, "; bottom: -20px; position: absolute"));
+        xLabel.setAttribute('style', "color:".concat(textColor, "; width: 100%; text-align: ").concat(horizontal_axis_label_position, "; bottom: -20px; position: absolute"));
       }
       if (xLabel && !show_horizontal_axis_label) {
         xLabel.parentNode.removeChild(xLabel);
@@ -52,16 +52,16 @@ export default class HorizontalComponent extends ChartComponent {
         div.innerHTML = column.name || '';
         const containerHeight = chartContainer.offsetHeight;
         let textAlign = 'center';
-        if (y_axis_label_position === LABEL_POSITION_TYPE.BOTTOM) textAlign = 'left';
-        if (y_axis_label_position === LABEL_POSITION_TYPE.TOP) textAlign = 'right';
-        div.setAttribute('style', "color:".concat(textColor, "; position: absolute; width: ").concat(containerHeight, "px; text-align: ").concat(textAlign, "; top: 0; left: 0; transform: translate(-").concat(containerHeight / 2 + 12, "px, ").concat((containerHeight - autoPadding.bottom) / 2 + autoPadding.bottom / 4, "px) rotate(-90deg)"));
+        if (vertical_axis_label_position === LABEL_POSITION_TYPE.BOTTOM) textAlign = 'left';
+        if (vertical_axis_label_position === LABEL_POSITION_TYPE.TOP) textAlign = 'right';
+        div.setAttribute('style', "color:".concat(textColor, "; position: absolute; width: ").concat(containerHeight, "px; text-align: ").concat(textAlign, "; top: 0; left: 0; transform: translate(-").concat(containerHeight / 2 + 12, "px, ").concat((containerHeight - autoPadding.bottom) / 2, "px) rotate(-90deg)"));
         chartContainer.appendChild(div);
       }
       if (yLabel && show_horizontal_axis_label) {
         const containerHeight = chartContainer.offsetHeight;
         let textAlign = 'center';
-        if (y_axis_label_position === LABEL_POSITION_TYPE.BOTTOM) textAlign = 'left';
-        if (y_axis_label_position === LABEL_POSITION_TYPE.TOP) textAlign = 'right';
+        if (vertical_axis_label_position === LABEL_POSITION_TYPE.BOTTOM) textAlign = 'left';
+        if (vertical_axis_label_position === LABEL_POSITION_TYPE.TOP) textAlign = 'right';
         yLabel.setAttribute('style', "color:".concat(textColor, "; position: absolute; width: ").concat(containerHeight, "px; text-align: ").concat(textAlign, "; top: 0; left: 0; transform: translate(-").concat(containerHeight / 2 + 12, "px, ").concat((containerHeight - autoPadding.bottom) / 2 + autoPadding.bottom / 4, "px) rotate(-90deg)"));
       }
       if (yLabel && !show_horizontal_axis_label) {

package/dist/view/wrapper/line.js

@@ -44,14 +44,18 @@ class Line extends ChartComponent {
     this.draw = data => {
       const {
         chart,
-        theme
+        theme,
+        themeName
       } = this.props;
       const {
         y_axis_label_color,
         y_axis_show_value,
         label_font_size
       } = chart.config;
-      const chartBarColor = y_axis_label_color || '#2a67d1';
+      let chartBarColor = y_axis_label_color || '#5B8FF9';
+      if (themeName) {
+        chartBarColor = BaseUtils.getCurrentTheme(themeName).colors[0];
+      }
       this.drawLabels(data);
 
       // set Coord type

package/package.json

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