sea-chart 0.0.12 → 0.0.14

package/dist/components/color-picker/index.css

@@ -0,0 +1,64 @@
+.sea-chart-color-picker .color-select-container {
+  display: block;
+  width: 100%;
+  height: 2.375rem;
+  color: #495057;
+  background-color: #fff;
+  background-clip: padding-box;
+  border: 1px solid rgba(0, 40, 100, 0.12);
+  border-radius: 3px;
+  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+}
+
+.sea-chart-color-picker .color-picker-container {
+  display: block;
+  width: 100%;
+  height: 2.375rem;
+  line-height: 2.375rem;
+  color: #495057;
+  background-color: #fff;
+  background-clip: padding-box;
+  border: 1px solid rgba(0, 40, 100, 0.12);
+  border-radius: 3px;
+  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+  position: relative;
+}
+
+.sea-chart-color-picker .color-picker-container .picker-control {
+  height: 100%;
+  display: flex;
+  align-items: center;
+}
+
+.sea-chart-color-picker .picker-control .color-control {
+  width: 24px;
+  height: 24px;
+  margin-left: 10px;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.sea-chart-color-picker .color-picker-container .picker-control.readOnly,
+.sea-chart-color-picker .color-picker-container .picker-control.readOnly .text-control {
+  background-color: #f7f7f7;
+}
+
+.sea-chart-color-picker .picker-control .color-control {
+  cursor: default;
+}
+
+.sea-chart-color-picker .picker-control .color-control.white-color {
+  border: 3px #eee solid;
+}
+
+.sea-chart-color-picker .picker-control .text-control {
+  height: 100%;
+  border: none;
+  outline: none;
+  padding-left: 10px;
+  font-size: 14px;
+}
+
+.sea-chart-color-picker .color-picker-container .picker-control.readOnly .text-control {
+  cursor: default;
+}

package/dist/components/color-picker/index.js

@@ -0,0 +1,109 @@
+import React from 'react';
+import { ChromePicker } from 'react-color';
+import './index.css';
+const COVER = {
+  top: '0px',
+  right: '0px',
+  bottom: '0px',
+  left: '0px'
+};
+class ColorPicker extends React.PureComponent {
+  constructor(props) {
+    super(props);
+    this.onInputChanged = event => {
+      const value = event.target.value;
+      if (value === this.state.activeColor) return;
+      this.updateColor(value);
+      this.setState({
+        activeColor: value
+      });
+    };
+    this.onPickColorToggle = () => {
+      this.setState({
+        isShowColorPicker: !this.state.isShowColorPicker
+      });
+    };
+    this.onPickChanged = color => {
+      if (color.hex === this.state.activeColor) return;
+      this.updateColor(color.hex);
+      this.setState({
+        activeColor: color.hex
+      });
+    };
+    this.updateColor = color => {
+      this.props.onColorChanged(color);
+    };
+    this.getPopoverStyle = () => {
+      if (!this.colorPickerContainerRef) return {};
+      const {
+        top,
+        height
+      } = this.colorPickerContainerRef.getBoundingClientRect();
+      const {
+        clientHeight
+      } = document.body;
+      const selectTop = top + height;
+      if (clientHeight - selectTop < 247) {
+        // 247: ChromePicker's height
+        return {
+          position: 'absolute',
+          left: 0,
+          bottom: '2.375rem',
+          zIndex: '2'
+        };
+      }
+      return {
+        position: 'absolute',
+        left: 0,
+        zIndex: '2'
+      };
+    };
+    this.state = {
+      isShowColorPicker: false,
+      activeColor: props.activeColor
+    };
+    this.colorPickerContainerRef = null;
+  }
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    this.setState({
+      activeColor: nextProps.activeColor
+    });
+  }
+  render() {
+    const {
+      activeColor
+    } = this.state;
+    const isWhiteColor = activeColor && activeColor.toUpperCase() === '#FFFFFF';
+    return /*#__PURE__*/React.createElement("div", {
+      className: "color-picker-container",
+      ref: ref => this.colorPickerContainerRef = ref
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "picker-control"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "color-control ".concat(isWhiteColor ? 'white-color' : ''),
+      onClick: this.onPickColorToggle,
+      style: {
+        background: activeColor
+      }
+    }), /*#__PURE__*/React.createElement("input", {
+      className: "text-control",
+      type: "text",
+      value: activeColor,
+      onChange: this.onInputChanged
+    })), this.state.isShowColorPicker && /*#__PURE__*/React.createElement("div", {
+      style: this.getPopoverStyle()
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "position-fixed",
+      style: COVER,
+      onClick: this.onPickColorToggle
+    }), /*#__PURE__*/React.createElement(ChromePicker, {
+      disableAlpha: true,
+      color: activeColor,
+      onChange: this.onPickChanged
+    })));
+  }
+}
+ColorPicker.defaultProps = {
+  activeColor: '#000000'
+};
+export default ColorPicker;

package/dist/constants/index.js

@@ -184,6 +184,7 @@ export const MIRROR_COLUMN_LIST = [CellType.TEXT, CellType.NUMBER, CellType.CTIM
 export const CHART_SUPPORT_FONT_WEIGHTS = [400, 700];
 export const DEFAULT_CHART_FONT_WEIGHT = CHART_SUPPORT_FONT_WEIGHTS[1];
 export const DEFAULT_CHART_TITLE_FONT_SIZE = 24;
+export const DEFAULT_CHART_TITLE_FONT_COLOR = '#212529';
 export const CHART_SETTINGS_TYPE = {
   DATA: 'data',
   CHART_STYLE: 'style',

package/dist/locale/lang/en.js

@@ -90,6 +90,7 @@ const en = {
   '1 Filter': '1 filter',
   'Filters': 'filters',
   'Font_size': 'Font size',
+  'Font_color': 'Font color',
   'Font_weight': 'Font weight',
   'Chart_type': 'Chart type',
   "Histogram": "Histogram",

package/dist/locale/lang/zh_CN.js

@@ -90,6 +90,7 @@ const zh_CN = {
   "1 Filter": "1 个过滤条件",
   "Filters": "个过滤条件",
   "Font_size": "字体大小",
+  'Font_color': '字体颜色',
   "Font_weight": "字体粗细",
   'Chart_type': '图表类型',
   "Histogram": "柱状图",

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/font-settings/font-color-settings.js

@@ -0,0 +1,27 @@
+import React, { useMemo } from 'react';
+import classnames from 'classnames';
+import { FormGroup, Label } from 'reactstrap';
+import ColorPicker from '../../../components/color-picker';
+import intl from '../../../intl';
+const FontColorSettings = _ref => {
+  let {
+    fontColor,
+    defaultFontColor,
+    modifyFontColor,
+    className,
+    title
+  } = _ref;
+  const initialFontColor = useMemo(() => {
+    if (fontColor) return fontColor;
+    return defaultFontColor;
+  }, [defaultFontColor, fontColor]);
+  return /*#__PURE__*/React.createElement(FormGroup, {
+    className: classnames('sea-chart-setting-item', className)
+  }, /*#__PURE__*/React.createElement(Label, null, title || intl.get('Font_color')), /*#__PURE__*/React.createElement("div", {
+    className: "sea-chart-color-picker"
+  }, /*#__PURE__*/React.createElement(ColorPicker, {
+    activeColor: initialFontColor,
+    onColorChanged: modifyFontColor
+  })));
+};
+export default FontColorSettings;

package/dist/settings/widgets/font-settings/index.js

@@ -1,3 +1,4 @@
 import FontSizeSettings from './font-size-settings';
 import FontWeightSettings from './font-weight-settings';
-export { FontSizeSettings, FontWeightSettings };
+import FontColorSettings from './font-color-settings';
+export { FontSizeSettings, FontWeightSettings, FontColorSettings };

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/settings/widgets/title-settings/index.js

@@ -1,8 +1,8 @@
 import React, { useMemo } from 'react';
 import TitleText from './title-text';
-import { FontSizeSettings, FontWeightSettings } from '../font-settings';
+import { FontSizeSettings, FontWeightSettings, FontColorSettings } from '../font-settings';
 import TextHorizontalSettings from '../text-horizontal-settings';
-import { DEFAULT_CHART_FONT_WEIGHT, DEFAULT_CHART_TITLE_FONT_SIZE, CHART_SUPPORT_FONT_WEIGHTS, HORIZONTAL_ALIGN } from '../../../constants';
+import { DEFAULT_CHART_FONT_WEIGHT, DEFAULT_CHART_TITLE_FONT_SIZE, CHART_SUPPORT_FONT_WEIGHTS, HORIZONTAL_ALIGN, DEFAULT_CHART_TITLE_FONT_COLOR } from '../../../constants';
 const TitleSetting = props => {
   const initialTitle = useMemo(() => {
     return props.title || {};
@@ -40,6 +40,11 @@ const TitleSetting = props => {
       font_weight: updatedFontWeight
     });
   };
+  const modifyFontColor = updatedFontColor => {
+    modifyTitle({
+      font_color: updatedFontColor
+    });
+  };
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TitleText, {
     text: initialTitle.text,
     modifyText: modifyText
@@ -51,6 +56,10 @@ const TitleSetting = props => {
     fontWeight: initialTitle.font_weight || DEFAULT_CHART_FONT_WEIGHT,
     supportFontWeights: CHART_SUPPORT_FONT_WEIGHTS,
     modifyFontWeight: modifyFontWeight
+  }), /*#__PURE__*/React.createElement(FontColorSettings, {
+    fontColor: initialTitle.font_color,
+    defaultFontColor: DEFAULT_CHART_TITLE_FONT_COLOR,
+    modifyFontColor: modifyFontColor
   }), /*#__PURE__*/React.createElement(TextHorizontalSettings, {
     value: initialTitle.horizontal_align,
     defaultValue: HORIZONTAL_ALIGN.LEFT,

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/title/index.js

@@ -19,6 +19,7 @@ const Title = _ref => {
     const {
       font_size,
       font_weight,
+      font_color,
       horizontal_align
     } = chart.style_config.title;
     if (isNumber(font_size)) {
@@ -27,6 +28,9 @@ const Title = _ref => {
     if (CHART_SUPPORT_FONT_WEIGHTS.includes(font_weight)) {
       style.fontWeight = font_weight;
     }
+    if (font_color) {
+      style.color = font_color;
+    }
     style.textAlign = horizontal_align && HORIZONTAL_ALIGNS.includes(horizontal_align) ? horizontal_align : HORIZONTAL_ALIGN.LEFT;
     return style;
   }, [chart]);

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.14",
   "main": "./dist/index.js",
   "dependencies": {
     "@antv/data-set": "0.11.8",