sea-chart 0.0.28 → 0.0.30

package/dist/constants/index.js

@@ -14,7 +14,6 @@ export const ZH_CN_SUPPORT_CHARTS = [CHART_TYPE.MAP, CHART_TYPE.MAP_BUBBLE];
 export const SUPPORT_DATA_SORT_CHART_TYPES = [CHART_TYPE.BAR, CHART_TYPE.BAR_STACK, CHART_TYPE.LINE, CHART_TYPE.PIE, CHART_TYPE.RING, CHART_TYPE.HORIZONTAL_BAR, CHART_TYPE.AREA, CHART_TYPE.TREE_MAP];
 export const SUPPORT_STACK_VALUE_CHART_TYPES = [CHART_TYPE.BAR_STACK, CHART_TYPE.BAR_CUSTOM];
 export const X_AXIS_IS_GROUPBY_COLUMN_KEY_CHART_TYPES = [CHART_TYPE.TABLE, CHART_TYPE.PIE, CHART_TYPE.RING, CHART_TYPE.TREE_MAP];
-export const SUPPORT_TITLE_CHART_TYPES = [CHART_TYPE.BAR, CHART_TYPE.BAR_GROUP, CHART_TYPE.HORIZONTAL_BAR, CHART_TYPE.HORIZONTAL_GROUP_BAR, CHART_TYPE.STACKED_HORIZONTAL_BAR, CHART_TYPE.COMPLETENESS, CHART_TYPE.COMPLETENESS_GROUP, CHART_TYPE.LINE, CHART_TYPE.LINE_GROUP, CHART_TYPE.AREA, CHART_TYPE.PIE, CHART_TYPE.RING, CHART_TYPE.COMBINATION, CHART_TYPE.DASHBOARD, CHART_TYPE.TREE_MAP, CHART_TYPE.TABLE, CHART_TYPE.BAR_CUSTOM, CHART_TYPE.AREA, CHART_TYPE.AREA_GROUP];
 export const CHART_CHART_MAP = {
   [CHART_TYPE.BAR]: CHART_TYPE.BAR,
   [CHART_TYPE.PIE]: CHART_TYPE.PIE,

package/dist/constants/type-image.js

@@ -8,7 +8,7 @@ export const CHART_TYPE_IMAGE = {
   [CHART_TYPE.HORIZONTAL_BAR]: 'horizontal-bar.png',
   [CHART_TYPE.HORIZONTAL_GROUP_BAR]: 'horizontal-group-bar.png',
   [CHART_TYPE.STACKED_HORIZONTAL_BAR]: 'stacked-horizontal-bar.png',
-  [CHART_TYPE.COMPLETENESS]: 'combination-chart.png',
+  [CHART_TYPE.COMPLETENESS]: 'completeness-chart.png',
   [CHART_TYPE.COMPLETENESS_GROUP]: 'group-completeness-chart.png',
   [CHART_TYPE.LINE]: 'line.png',
   [CHART_TYPE.LINE_GROUP]: 'group_line.png',

package/dist/locale/lang/de.js

@@ -167,7 +167,7 @@ const de = {
   'curves': 'Curves',
   'Line_type': 'Line type',
   'Summarize_description': 'Count the sum, maximum, minimum, average, or number of distinct values of records based on a field',
-  'Count_description': 'Count the number of records based on  data settings',
+  'Count_description': 'Count the number of records based on data settings',
   'Display_empty_when_data_is_zero': 'Display empty when data is zero'
 };
 export default de;

package/dist/locale/lang/en.js

@@ -129,6 +129,7 @@ const en = {
   "Table": 'Table',
   'Pivot_table': 'Pivot table',
   'Title': 'Title',
+  "Custom_title": "Custom title",
   'Edit_type': 'Edit type',
   'Cancel': 'Cancel',
   'Submit': 'Submit',
@@ -244,7 +245,7 @@ const en = {
   'curves': 'Curves',
   'Line_type': 'Line type',
   'Summarize_description': 'Count the sum, maximum, minimum, average, or number of distinct values of records based on a field',
-  'Count_description': 'Count the number of records based on  data settings',
+  'Count_description': 'Count the number of records based on data settings',
   'Display_empty_when_data_is_zero': 'Display empty when data is zero'
 };
 export default en;

package/dist/locale/lang/es.js

@@ -167,7 +167,7 @@ const es = {
   'curves': 'Curves',
   'Line_type': 'Line type',
   'Summarize_description': 'Count the sum, maximum, minimum, average, or number of distinct values of records based on a field',
-  'Count_description': 'Count the number of records based on  data settings',
+  'Count_description': 'Count the number of records based on data settings',
   'Display_empty_when_data_is_zero': 'Display empty when data is zero'
 };
 export default es;

package/dist/locale/lang/fr.js

@@ -167,7 +167,7 @@ const fr = {
   'curves': 'Curves',
   'Line_type': 'Line type',
   'Summarize_description': 'Count the sum, maximum, minimum, average, or number of distinct values of records based on a field',
-  'Count_description': 'Count the number of records based on  data settings',
+  'Count_description': 'Count the number of records based on data settings',
   'Display_empty_when_data_is_zero': 'Display empty when data is zero'
 };
 export default fr;

package/dist/locale/lang/zh_CN.js

@@ -129,6 +129,7 @@ const zh_CN = {
   "Table": '表格',
   "Pivot_table": "透视表",
   "Title": "标题",
+  "Custom_title": "自定义标题",
   "Edit_type": "编辑类型",
   'Cancel': '取消',
   'Submit': '提交',

package/dist/model/basic-number-card.js

@@ -1,5 +1,5 @@
 import { isNumericColumn, getTableById, getTableColumnByKey } from 'dtable-utils';
-import { CHART_SUMMARY_TYPE, CHART_TYPE } from '../constants';
+import { CHART_SUMMARY_CALCULATION_METHOD, CHART_TYPE, CHART_Y_GROUP_TYPE } from '../constants';
 import BaseModel from './base-model';
 class BasicNumberCard extends BaseModel {
   constructor(options, tables) {
@@ -16,7 +16,8 @@ class BasicNumberCard extends BaseModel {
         this.numeric_column_key = null;
       }
     }
-    this.summary_method = options.y_axis_summary_method || CHART_SUMMARY_TYPE.ROW_COUNT;
+    this.summary_type = options.x_axis_summary_type || CHART_Y_GROUP_TYPE.COUNT;
+    this.summary_method = options.y_axis_summary_method || CHART_SUMMARY_CALCULATION_METHOD[0];
     this.font_size = options.font_size || 40;
     this.font_color = options.font_color;
     this.label_font_size = options.label_font_size || 12;

package/dist/model/chart.js

@@ -1,5 +1,5 @@
 import { generateChartConfig } from '../utils';
-import { HORIZONTAL_ALIGN, DEFAULT_CHART_FONT_WEIGHT, DEFAULT_CHART_TITLE_FONT_SIZE, SUPPORT_TITLE_CHART_TYPES } from '../constants';
+import { HORIZONTAL_ALIGN, DEFAULT_CHART_FONT_WEIGHT, DEFAULT_CHART_TITLE_FONT_SIZE } from '../constants';
 class ChartModel {
   constructor(options, tables) {
     const {
@@ -10,14 +10,12 @@ class ChartModel {
     this.type = 'statistic';
     this.config = generateChartConfig(options, tables);
     this.style_config = style_config || {};
-    if (SUPPORT_TITLE_CHART_TYPES.includes(this.config.type)) {
-      this.style_config.title = {
-        text: '',
-        font_size: DEFAULT_CHART_TITLE_FONT_SIZE,
-        font_weight: DEFAULT_CHART_FONT_WEIGHT,
-        horizontal_align: HORIZONTAL_ALIGN.LEFT
-      };
-    }
+    this.style_config.title = {
+      text: '',
+      font_size: DEFAULT_CHART_TITLE_FONT_SIZE,
+      font_weight: DEFAULT_CHART_FONT_WEIGHT,
+      horizontal_align: HORIZONTAL_ALIGN.LEFT
+    };
   }
 }
 export default ChartModel;

package/dist/model/compare-bar.js

@@ -28,7 +28,7 @@ class CompareBar extends BaseModel {
     this.y_axis_compare_label_color = options.y_axis_compare_label_color;
     this.y_axis_compared_label_color = options.y_axis_compared_label_color;
     this.y_axis_summary_column_key = options.y_axis_summary_column_key;
-    this.y_axis_summary_type = options.y_axis_summary_type;
+    this.y_axis_summary_type = options.y_axis_summary_type || 'count';
     this.y_axis_summary_method = options.y_axis_summary_method;
     this.display_increase = isBoolean(options.display_increase) ? options.display_increase : false;
     this.display_increase_percentage = isBoolean(options.display_increase_percentage) ? options.display_increase_percentage : false;

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

@@ -1,5 +1,5 @@
-import React, { useCallback, useMemo } from 'react';
-import { Label, FormGroup } from 'reactstrap';
+import React, { useCallback, useMemo, useState } from 'react';
+import { Label, FormGroup, Input } from 'reactstrap';
 import DTableSelect from "dtable-ui-component/lib/DTableSelect";
 import DTableSwitch from "dtable-ui-component/lib/DTableSwitch";
 import Switch from '../widgets/switch';
@@ -17,6 +17,25 @@ const StyleSettings = _ref => {
     yLabel,
     onChange
   } = _ref;
+  const {
+    config
+  } = chart;
+  const {
+    x_axis_show_label,
+    x_axis_label_position,
+    y_axis_show_label,
+    y_axis_label_position,
+    y_axis_auto_range = true,
+    type,
+    y_axis_min,
+    y_axis_max,
+    y_axis_show_value,
+    label_font_size,
+    display_each_block_data,
+    line_type,
+    title_name
+  } = config;
+  const [currYaxisTitle, setCurrYaxisTitle] = useState(title_name || '');
   const xAxisLabelOptions = useMemo(() => {
     if (xLabel === 'Vertical_axis') {
       return Y_LABEL_POSITIONS.map(item => {
@@ -125,30 +144,19 @@ const StyleSettings = _ref => {
     };
     onChange(update);
   }, [chart, onChange]);
-  const {
-    config
-  } = chart;
-  const {
-    x_axis_show_label,
-    x_axis_label_position,
-    y_axis_show_label,
-    y_axis_label_position,
-    y_axis_auto_range = true,
-    type,
-    y_axis_min,
-    y_axis_max,
-    y_axis_show_value,
-    label_font_size,
-    display_each_block_data,
-    line_type
-  } = config;
+  const onKeyDown = useCallback(event => {
+    if (event.key === 'Enter') {
+      event.preventDefault();
+      event.target.blur();
+    }
+  }, []);
   const xAxisLabelPosition = xAxisLabelOptions.find(option => option.value === x_axis_label_position) || xAxisLabelOptions[0];
   const yAxisLabelPosition = yAxisLabelOptions.find(option => option.value === y_axis_label_position) || yAxisLabelOptions[0];
   const isLineChart = [CHART_TYPE.LINE, CHART_TYPE.LINE_GROUP, CHART_TYPE.AREA, CHART_TYPE.AREA_GROUP].includes(type);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, isLineChart && /*#__PURE__*/React.createElement(SelectLineType, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, isLineChart && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SelectLineType, {
     selectedLineType: line_type,
     onChange: onChange
-  }), /*#__PURE__*/React.createElement(Divider, null), /*#__PURE__*/React.createElement(FormGroup, {
+  }), /*#__PURE__*/React.createElement(Divider, null)), /*#__PURE__*/React.createElement(FormGroup, {
     className: "sea-chart-parameter-item"
   }, /*#__PURE__*/React.createElement(Label, null, intl.get(xLabel)), /*#__PURE__*/React.createElement(Switch, {
     key: "x_axis_show_label",
@@ -166,7 +174,19 @@ const StyleSettings = _ref => {
     checked: y_axis_show_label || false,
     placeholder: intl.get('Display_title'),
     onChange: event => onAxisLabelShowChange(event, 'y_axis_show_label')
-  }), y_axis_show_label && /*#__PURE__*/React.createElement("div", {
+  }), y_axis_show_label && [CHART_TYPE.BAR_STACK].includes(type) && /*#__PURE__*/React.createElement("div", {
+    className: "sea-chart-parameter-container"
+  }, /*#__PURE__*/React.createElement(Label, null, intl.get('Custom_title')), /*#__PURE__*/React.createElement(Input, {
+    type: "text",
+    value: currYaxisTitle,
+    onBlur: () => {
+      onChange({
+        'title_name': currYaxisTitle
+      });
+    },
+    onChange: event => setCurrYaxisTitle(event.target.value),
+    onKeyDown: onKeyDown
+  })), y_axis_show_label && /*#__PURE__*/React.createElement("div", {
     className: "sea-chart-parameter-container"
   }, /*#__PURE__*/React.createElement(DTableSelect, {
     value: yAxisLabelPosition,

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

@@ -136,10 +136,10 @@ const StyleSettings = _ref => {
   const xAxisLabelPosition = xAxisLabelOptions.find(option => option.value === x_axis_label_position) || xAxisLabelOptions[0];
   const yAxisLabelPosition = yAxisLabelOptions.find(option => option.value === y_axis_label_position) || yAxisLabelOptions[0];
   const isLineChart = [CHART_TYPE.LINE, CHART_TYPE.LINE_GROUP, CHART_TYPE.AREA, CHART_TYPE.AREA_GROUP].includes(type);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, isLineChart && /*#__PURE__*/React.createElement(SelectLineType, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, isLineChart && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SelectLineType, {
     selectedLineType: line_type,
     onChange: onChange
-  }), /*#__PURE__*/React.createElement(Divider, null), /*#__PURE__*/React.createElement(FormGroup, {
+  }), /*#__PURE__*/React.createElement(Divider, null)), /*#__PURE__*/React.createElement(FormGroup, {
     className: "sea-chart-parameter-item"
   }, /*#__PURE__*/React.createElement(Label, null, intl.get(xLabel)), /*#__PURE__*/React.createElement(Switch, {
     key: "x_axis_show_label",

package/dist/settings/basic-number-card/data-settings.js

@@ -4,7 +4,7 @@ import { COLUMNS_ICON_CONFIG, getTableById } from 'dtable-utils';
 import DTableSelect from "dtable-ui-component/lib/DTableSelect";
 import CommonDataSettings from '../widgets/common-data-settings';
 import { BaseUtils } from '../../utils';
-import { CHART_SUMMARY_SHOW, CHART_SUMMARY_CALCULATION_METHOD, CHART_SUPPORT_COLUMNS, BASIC_NUMBER_CARD_CALCULATION_METHOD } from '../../constants';
+import { CHART_SUMMARY_SHOW, CHART_SUMMARY_CALCULATION_METHOD, CHART_SUPPORT_COLUMNS, CHART_Y_GROUP_TYPE } from '../../constants';
 import intl from '../../intl';
 const DataSettings = _ref => {
   let {
@@ -14,7 +14,7 @@ const DataSettings = _ref => {
     onChange
   } = _ref;
   const summaryMethodsOptions = useMemo(() => {
-    const numberCardSummaryMethod = [BASIC_NUMBER_CARD_CALCULATION_METHOD, ...CHART_SUMMARY_CALCULATION_METHOD];
+    const numberCardSummaryMethod = [...CHART_SUMMARY_CALCULATION_METHOD];
     return numberCardSummaryMethod.map(method => {
       return {
         label: /*#__PURE__*/React.createElement("span", {
@@ -24,6 +24,21 @@ const DataSettings = _ref => {
       };
     });
   }, []);
+  const summaryTypeOptions = [{
+    value: CHART_Y_GROUP_TYPE.COUNT,
+    label: /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+      className: "select-module select-module-name ml-0"
+    }, intl.get(CHART_SUMMARY_SHOW['count'])), /*#__PURE__*/React.createElement("div", {
+      className: "summary-type-explanation"
+    }, intl.get('Count_description')))
+  }, {
+    value: CHART_Y_GROUP_TYPE.SINGLE_NUMERIC_COLUMN,
+    label: /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+      className: "select-module select-module-name ml-0"
+    }, intl.get(CHART_SUMMARY_SHOW['advanced'])), /*#__PURE__*/React.createElement("div", {
+      className: "summary-type-explanation"
+    }, intl.get('Summarize_description')))
+  }];
   const selectedTable = useMemo(() => {
     const {
       table_id: selectedTableId
@@ -63,6 +78,19 @@ const DataSettings = _ref => {
       }
     }, ...options];
   }, [numericColumns]);
+  const onSummaryTypeChange = useCallback(option => {
+    const {
+      config
+    } = chart;
+    const {
+      summary_type
+    } = config;
+    const newSummaryType = option.value;
+    if (newSummaryType === summary_type) return;
+    onChange && onChange({
+      summary_type: newSummaryType
+    });
+  }, [chart, onChange]);
   const onSelectColumnChange = useCallback(option => {
     const {
       config
@@ -92,23 +120,19 @@ const DataSettings = _ref => {
   const getSelectedMethodOption = useCallback((method, summaryMethodsOptions) => {
     return summaryMethodsOptions.find(m => m.value === method) || summaryMethodsOptions[0];
   }, []);
-  const renderSummaryMethod = useCallback(() => {
-    const {
-      summary_method
-    } = chart.config;
-    const selectedMethodOption = getSelectedMethodOption(summary_method, summaryMethodsOptions);
-    return /*#__PURE__*/React.createElement("div", {
-      className: "dtable-plugin-stat-parameter-item"
-    }, /*#__PURE__*/React.createElement("label", null, intl.get('Summary_method')), /*#__PURE__*/React.createElement(DTableSelect, {
-      value: selectedMethodOption,
-      onChange: onSelectSummaryMethod,
-      options: summaryMethodsOptions
-    }));
-  }, [chart, getSelectedMethodOption, onSelectSummaryMethod, summaryMethodsOptions]);
+  const selectedSummaryTypeOption = summaryTypeOptions.find(option => option.value === chart.config.summary_type) || summaryTypeOptions[0];
+  const isSummarizeAField = chart.config.summary_type === CHART_Y_GROUP_TYPE.SINGLE_NUMERIC_COLUMN;
   const {
-    config
-  } = chart;
-  const selectedColumnOption = numericColumnOptions.find(option => option.value.key === config.numeric_column_key) || numericColumnOptions[0];
+    summary_method
+  } = chart.config;
+  const selectedMethodOption = getSelectedMethodOption(summary_method, summaryMethodsOptions);
+  let selectedColumnOption;
+  if (isSummarizeAField) {
+    const {
+      config
+    } = chart;
+    selectedColumnOption = numericColumnOptions.find(option => option.value.key === config.numeric_column_key) || numericColumnOptions[0];
+  }
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CommonDataSettings, {
     dataSources: dataSources,
     chart: chart,
@@ -116,13 +140,26 @@ const DataSettings = _ref => {
     onChange: onChange
   }), /*#__PURE__*/React.createElement(FormGroup, {
     className: "sea-chart-parameter-item"
-  }, /*#__PURE__*/React.createElement("label", null, intl.get('Statistic_field')), /*#__PURE__*/React.createElement(DTableSelect, {
+  }, /*#__PURE__*/React.createElement("label", null, intl.get('Summary_type')), /*#__PURE__*/React.createElement(DTableSelect, {
+    classNamePrefix: "chart-summary-types",
+    value: selectedSummaryTypeOption,
+    options: summaryTypeOptions,
+    placeholder: intl.get('Select_a_column'),
+    onChange: onSummaryTypeChange
+  })), isSummarizeAField && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FormGroup, {
+    className: "sea-chart-parameter-item"
+  }, /*#__PURE__*/React.createElement("label", null, intl.get('Summary_field')), /*#__PURE__*/React.createElement(DTableSelect, {
     value: selectedColumnOption,
     options: numericColumnOptions,
-    placeholder: intl.get('Select_a_column'),
     onChange: onSelectColumnChange
   })), /*#__PURE__*/React.createElement(FormGroup, {
     className: "sea-chart-parameter-item"
-  }, renderSummaryMethod()));
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "dtable-plugin-stat-parameter-item"
+  }, /*#__PURE__*/React.createElement("label", null, intl.get('Summary_method')), /*#__PURE__*/React.createElement(DTableSelect, {
+    value: selectedMethodOption,
+    onChange: onSelectSummaryMethod,
+    options: summaryMethodsOptions
+  })))));
 };
 export default DataSettings;

package/dist/settings/scatter/data-settings.js

@@ -130,7 +130,7 @@ export default function ScatterDataSettings(_ref) {
     tables: tables,
     type: type,
     className: "selected-x-axis",
-    label: intl.get('X_axis'),
+    label: intl.get('Y_axis'),
     selectedTableId: table_id,
     selectedColumnKey: y_axis_column_key,
     onGroupByChange: onYAxisColumnChange

package/dist/settings/style-settings.js

@@ -1,5 +1,5 @@
 import React, { useCallback } from 'react';
-import { CHART_TYPE, SUPPORT_TITLE_CHART_TYPES } from '../constants';
+import { CHART_TYPE } from '../constants';
 import { BarStyleSettings } from './bar-settings';
 import { AdvanceBarStyleSettings } from './advance-bar-settings';
 import { TimeComparisonStyleSettings } from './time-comparison-settings';
@@ -28,12 +28,6 @@ const StyleSettings = _ref => {
       config: newUpdate
     });
   }, [chart, onChange]);
-
-  // const modifyCommonSettings = useCallback((update) => {
-  //   const newUpdate = { ...chart.style_config, ...update };
-  //   onChange({ style_config: newUpdate });
-  // }, [chart, onChange]);
-
   const modifyTitle = useCallback(title => {
     const {
       style_config
@@ -49,17 +43,14 @@ const StyleSettings = _ref => {
     });
   }, [chart, onChange]);
   const renderTitleSettings = useCallback(() => {
-    const {
-      type
-    } = chart.config;
     const {
       style_config
     } = chart;
-    return /*#__PURE__*/React.createElement(React.Fragment, null, SUPPORT_TITLE_CHART_TYPES.includes(type) && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StatisticTitleSetting, {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StatisticTitleSetting, {
       key: "title-setting-".concat(chart.id),
       title: style_config && style_config.title,
       modifyTitle: modifyTitle
-    }), /*#__PURE__*/React.createElement(Divider, null)));
+    }), /*#__PURE__*/React.createElement(Divider, null));
   }, [chart, modifyTitle]);
   const renderStatisticStyleSettings = useCallback(() => {
     const {

package/dist/settings/widgets/divider/index.js

@@ -1,11 +1,18 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import classnames from 'classnames';
 import './index.css';
 const Divider = _ref => {
   let {
     className
   } = _ref;
+  const dividerRef = useRef(null);
+  useEffect(() => {
+    if (!dividerRef.current.nextElementSibling) {
+      dividerRef.current.style.display = 'none';
+    }
+  }, []);
   return /*#__PURE__*/React.createElement("div", {
+    ref: dividerRef,
     className: classnames('sea-chart-divider', className)
   });
 };

package/dist/settings/widgets/y-axis-group-settings.js

@@ -2,12 +2,12 @@ import React, { Component } from 'react';
 import { FormGroup, Label } from 'reactstrap';
 import DTableSelect from "dtable-ui-component/lib/DTableSelect";
 import { COLUMNS_ICON_CONFIG, getTableById } from 'dtable-utils';
-import NumericSummaryItem from './numeric-summary-item';
-import SummaryMethodSettings from './summary-method-setting';
-import Groupby from './group-by';
 import { CHART_Y_GROUP_TYPE, CHART_SUMMARY_SHOW, CHART_SUMMARY_CALCULATION_METHOD, CHART_SUMMARY_TYPE, DATE_GRANULATES, GEOLOCATION_GRANULATES, CHART_DATE_SUMMARY_CALCULATION_METHOD, CHART_SUPPORT_COLUMNS, CHART_TYPE } from '../../constants';
 import { BaseUtils } from '../../utils';
 import intl from '../../intl';
+import NumericSummaryItem from './numeric-summary-item';
+import SummaryMethodSettings from './summary-method-setting';
+import Groupby from './group-by';
 class YAxisGroupSettings extends Component {
   constructor(_props) {
     super(_props);
@@ -20,7 +20,7 @@ class YAxisGroupSettings extends Component {
         table_id,
         type
       } = chart.config;
-      this.isMapChart = type === CHART_TYPE.MAP || type === CHART_TYPE.MAP_BUBBLE || type === CHART_TYPE.WORLD_MAP || type === CHART_TYPE.WORLD_MAP_BUBBLE;
+      this.isMapChart = [CHART_TYPE.MAP, CHART_TYPE.MAP_BUBBLE, CHART_TYPE.WORLD_MAP, CHART_TYPE.WORLD_MAP_BUBBLE].includes(type);
       this.selectedTable = getTableById(tables, table_id);
     };
     this.initGroupTypeOptions = () => {

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

@@ -2,7 +2,7 @@ var _class;
 import shallowEqual from 'shallowequal';
 import dayjs from 'dayjs';
 import { CellType, COLLABORATOR_COLUMN_TYPES, FORMULA_COLUMN_TYPES_MAP, FORMULA_RESULT_TYPE, getDateDisplayString, getNumberDisplayString, getOption, getPrecisionNumber, getTableById, getTableColumnByKey, isNumber, isNumericColumn, isDateColumn, sortText, sortNumber, sortDate, sortSingleSelect, sortFormula, getColumnOptions, DateUtils, getGeolocationDisplayString, getFormulaDisplayString } from 'dtable-utils';
-import { PIE_CHART_COLORS, CHART_SUMMARY_TYPE, CHART_SUPPORT_SORT_COLUMNS, CHART_TYPE, CHART_STYLE_SETTING_KEYS, DEFAULT_LABEL_FONT_SIZE, DEFAULT_NUMBER_FORMAT_OBJECT, X_AXIS_IS_GROUPBY_COLUMN_KEY_CHART_TYPES, STYLE_COLORS, CHART_DATA_SORT_TYPE } from '../../constants';
+import { PIE_CHART_COLORS, CHART_SUMMARY_TYPE, CHART_SUPPORT_SORT_COLUMNS, CHART_TYPE, CHART_STYLE_SETTING_KEYS, DEFAULT_LABEL_FONT_SIZE, DEFAULT_NUMBER_FORMAT_OBJECT, X_AXIS_IS_GROUPBY_COLUMN_KEY_CHART_TYPES, STYLE_COLORS, CHART_DATA_SORT_TYPE, CHART_Y_GROUP_TYPE } from '../../constants';
 import { getClientFormulaDisplayString } from '../cell-format-utils';
 import { getKnownCollaboratorByEmail, generateDefaultUser, getUsers } from '../collaborator-utils';
 import { getDateColumnFormat, getColumnByKey } from '../column-utils';
@@ -60,6 +60,10 @@ BaseUtils.isValidExistChart = (tables, chart) => {
   const table = getTableById(tables, table_id);
   if (!table) return false;
   if (config.type === CHART_TYPE.BASIC_NUMBER_CARD) {
+    const {
+      summary_type
+    } = config;
+    if (summary_type === CHART_Y_GROUP_TYPE.COUNT || !summary_type) return true;
     const numericColumnKey = config.numeric_column_key;
     if (!numericColumnKey) return false;
     return getTableColumnByKey(table, numericColumnKey);
@@ -76,7 +80,7 @@ BaseUtils.isValidExistChart = (tables, chart) => {
   // if current chart is using "groupby_column_key" as key
   // if groupby_column_key is null, still return false
   let groupByColumnKey = config.groupby_column_key || config.x_axis_column_key || config.vertical_axis_column_key || config.columnKey || config.date_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)) {
+  if ([CHART_TYPE.BAR, CHART_TYPE.BAR_GROUP, CHART_TYPE.BAR_CUSTOM, CHART_TYPE.BAR_STACK, CHART_TYPE.COMPARE_BAR, CHART_TYPE.LINE, CHART_TYPE.LINE_GROUP, CHART_TYPE.AREA, CHART_TYPE.AREA_GROUP, CHART_TYPE.SCATTER, CHART_TYPE.COMBINATION].includes(config.type)) {
     groupByColumnKey = config.x_axis_column_key;
   }
   if ([CHART_TYPE.HORIZONTAL_BAR, CHART_TYPE.HORIZONTAL_GROUP_BAR, CHART_TYPE.STACKED_HORIZONTAL_BAR].includes(config.type)) {

package/dist/utils/sql/chart-data-sql.js

@@ -1,6 +1,6 @@
 import { CellType, filter2SqlCondition, isNumericColumn, isDateColumn } from 'dtable-utils';
 import { getSqlGroup } from '../column-utils';
-import { CHART_TYPE, DTABLE_DB_SUMMARY_METHOD, CHART_SUMMARY_TYPE, TIME_COLUMN_LIST, Y_AXIS_TYPE_PREFIX } from '../../constants';
+import { CHART_TYPE, DTABLE_DB_SUMMARY_METHOD, CHART_SUMMARY_TYPE, TIME_COLUMN_LIST, Y_AXIS_TYPE_PREFIX, CHART_Y_GROUP_TYPE } from '../../constants';
 import { fixGeoGranularity } from '../map';
 
 /*
@@ -188,37 +188,6 @@ class ChartDataSQL {
       }
       return sqlString;
     };
-    this._compare_chart_statistic_2_sql = () => {
-      const {
-        x_axis_column_key,
-        y_axis_summary_type,
-        y_axis_column_key,
-        x_axis_geolocation_granularity,
-        y_axis_summary_method,
-        x_axis_include_empty_cells
-      } = this.chart;
-      const selectedTable = this.table;
-      const selectedColumn = this._get_column_by_key(x_axis_column_key);
-      const isAdvanced = y_axis_summary_type === CHART_SUMMARY_TYPE.ADVANCED;
-      const method = isAdvanced ? DTABLE_DB_SUMMARY_METHOD[y_axis_summary_method] : DTABLE_DB_SUMMARY_METHOD.COUNT;
-      let groupName = getSqlGroup(selectedColumn, {
-        'date_granularity': 'day',
-        'geolocation_granularity': x_axis_geolocation_granularity
-      });
-      const sqlOrder = this._get_sql_order_by(null, groupName);
-      let selectedSummaryColumn = {};
-      selectedSummaryColumn = this._get_column_by_key(y_axis_column_key);
-      if (isAdvanced) {
-        if (!selectedSummaryColumn) {
-          this.error = 'Group_by_column_not_found';
-          return '';
-        }
-      }
-      const summary_column = this.columnKeyMap[x_axis_column_key];
-      const summaryColumnMethod = this._summary_column_2_sql(method, summary_column);
-      this._update_filter_sql(x_axis_include_empty_cells, selectedColumn);
-      return "SELECT ".concat(groupName, ", ").concat(summaryColumnMethod, " FROM `").concat(selectedTable.name, "` ").concat(this.filter_sql, " GROUP BY ").concat(groupName, " ").concat(sqlOrder, " LIMIT 0, 5000");
-    };
     this._grouping_statistic_2_sql = () => {
       let x_axis_column_key, x_axis_date_granularity, x_axis_geolocation_granularity, x_axis_include_empty_cells, y_axis_summary_type, y_axis_summary_method, y_axis_summary_column_key;
       if ([CHART_TYPE.HORIZONTAL_GROUP_BAR, CHART_TYPE.STACKED_HORIZONTAL_BAR].includes(this.chart_type)) {
@@ -390,11 +359,14 @@ class ChartDataSQL {
         x_axis_geolocation_granularity,
         y_axis_summary_method
       } = this.chart;
-      const selectedTable = this.table;
-      const selectedColumn = this._get_column_by_key(x_axis_column_key);
+      const groupby_column = this._get_column_by_key(x_axis_column_key);
+      if (!groupby_column) {
+        this.error = 'Group_by_column_not_found';
+        return '';
+      }
       const isAdvanced = y_axis_summary_type === CHART_SUMMARY_TYPE.ADVANCED;
       const method = isAdvanced ? DTABLE_DB_SUMMARY_METHOD[y_axis_summary_method] : DTABLE_DB_SUMMARY_METHOD.COUNT;
-      let groupName = getSqlGroup(selectedColumn, {
+      let groupName = getSqlGroup(groupby_column, {
         'date_granularity': 'day',
         'geolocation_granularity': x_axis_geolocation_granularity
       });
@@ -403,14 +375,14 @@ class ChartDataSQL {
       selectedSummaryColumn = this._get_column_by_key(y_axis_column_key);
       if (isAdvanced) {
         if (!selectedSummaryColumn) {
-          this.error = 'Group_by_column_not_found';
+          this.error = 'Summary_column_not_found';
           return '';
         }
       }
-      const summary_column = this.columnKeyMap[x_axis_column_key];
+      const summary_column = this._get_column_by_key(x_axis_column_key);
       const summaryColumnMethod = this._summary_column_2_sql(method, summary_column);
       const sqlCondition = filter2SqlCondition(this.table, this.chart);
-      return "SELECT ".concat(groupName, ", ").concat(summaryColumnMethod, " FROM `").concat(selectedTable.name, "` ").concat(sqlCondition, " GROUP BY ").concat(groupName, " ").concat(sqlOrder, " LIMIT 0, 5000");
+      return "SELECT ".concat(groupName, ", ").concat(summaryColumnMethod, " FROM ").concat(this.table_name, " ").concat(sqlCondition, " GROUP BY ").concat(groupName, " ").concat(sqlOrder, " LIMIT 0, 5000");
     };
     this._combination_chart_statistic_2_sql = () => {
       const x_axis_column_key = this.chart['x_axis_column_key'] || '';
@@ -678,6 +650,10 @@ class ChartDataSQL {
       return "SELECT ".concat(groupby_column_name, " FROM ").concat(this.table_name, " ").concat(this.filter_sql, " GROUP BY ").concat(groupby_column_name, " LIMIT 0, 5000");
     };
     this._basic_number_card_chart_statistic_2_sql = () => {
+      const summary_type = this.chart['summary_type'];
+      if (summary_type === CHART_Y_GROUP_TYPE.COUNT) {
+        return "SELECT COUNT(*) FROM ".concat(this.table_name, " ").concat(this.filter_sql, " LIMIT 0, 5000");
+      }
       const numeric_column_key = this.chart['numeric_column_key'] || '';
       let summary_method = this.chart['summary_method'] || '';
       const numeric_column = this._get_column_by_key(numeric_column_key);
@@ -744,7 +720,14 @@ class ChartDataSQL {
       }
       const targetColumnName = (_this$_get_column_by_ = this._get_column_by_key(targetColumnKey)) === null || _this$_get_column_by_ === void 0 ? void 0 : _this$_get_column_by_.name;
       const completedColumnName = (_this$_get_column_by_2 = this._get_column_by_key(completedColumnKey)) === null || _this$_get_column_by_2 === void 0 ? void 0 : _this$_get_column_by_2.name;
-      if (!targetColumnName || !completedColumnName) return;
+      if (!completedColumnName) {
+        this.error = 'Completed_column_not_found';
+        return '';
+      }
+      if (!targetColumnName) {
+        this.error = 'Target_column_not_found';
+        return '';
+      }
       if (column_groupby_column_key) {
         const column_groupby_column = this._get_column_by_key(column_groupby_column_key);
         if (!column_groupby_column) {
@@ -778,6 +761,10 @@ class ChartDataSQL {
       // y axis column
       const y_axis_column = this._get_column_by_key(y_axis_column_key);
       const yAxisColumnName = y_axis_column === null || y_axis_column === void 0 ? void 0 : y_axis_column.name;
+      if (!yAxisColumnName) {
+        this.error = 'Y_axis_column_not_found';
+        return '';
+      }
       if (column_groupby_column_key) {
         const column_groupby_column = this._get_column_by_key(column_groupby_column_key);
         if (!column_groupby_column) {

package/dist/view/index.css

@@ -43,6 +43,10 @@
   bottom: 8%;
 }
 
+.sea-chart-formatter .sea-chart-container.plugin-number-card {
+  bottom: 2%;
+}
+
 .sea-chart-formatter .sea-chart-container.show-x-axis-label,
 .sea-chart-formatter .sea-chart-container.show-horizontal-axis-label {
   padding-bottom: 20px;

package/dist/view/title/index.js

@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react';
 import { isNumber } from 'dtable-utils';
 import classnames from 'classnames';
-import { HORIZONTAL_ALIGNS, HORIZONTAL_ALIGN, DEFAULT_CHART_FONT_WEIGHT, DEFAULT_CHART_TITLE_FONT_SIZE, CHART_SUPPORT_FONT_WEIGHTS, SUPPORT_TITLE_CHART_TYPES } from '../../constants';
+import { HORIZONTAL_ALIGNS, HORIZONTAL_ALIGN, DEFAULT_CHART_FONT_WEIGHT, DEFAULT_CHART_TITLE_FONT_SIZE, CHART_SUPPORT_FONT_WEIGHTS } from '../../constants';
 import './index.css';
 const Title = _ref => {
   let {
@@ -35,12 +35,9 @@ const Title = _ref => {
     return style;
   }, [chart]);
   if (!chart) return null;
-  const {
-    type: chartType
-  } = chart.config;
   const title = chart.style_config && chart.style_config.title;
   const text = title && title.text;
-  if (!SUPPORT_TITLE_CHART_TYPES.includes(chartType) || !text) return null;
+  if (!text) return null;
   const style = getTitleStyle();
   return /*#__PURE__*/React.createElement("div", {
     className: classnames('sea-chart-title', className),

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

@@ -125,7 +125,9 @@ class BarCustom extends ChartComponent {
       let labelCfg = {
         style: {
           fontSize: BaseUtils.getLabelFontSize(label_font_size),
-          fill: themeColors.labelColor
+          fill: themeColors.labelColor,
+          stroke: '#fff',
+          lineWidth: 1
         }
       };
       if (displayData) {

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

@@ -155,7 +155,9 @@ class BarGroup extends ChartComponent {
         },
         style: {
           fontSize: BaseUtils.getLabelFontSize(label_font_size),
-          fill: theme.labelColor
+          fill: theme.labelColor,
+          stroke: '#fff',
+          lineWidth: 1
         },
         position: type === CHART_TYPE.BAR_STACK ? 'middle' : ''
       }).position('name*value').size(singleBarWidth).color(chartBarColor, group_name => {

package/dist/view/wrapper/bar.js

@@ -78,9 +78,18 @@ class Bar extends ChartComponent {
       this.chart.interval().label(y_axis_show_value ? 'value' : false, {
         style: {
           fontSize: BaseUtils.getLabelFontSize(label_font_size),
-          fill: theme.labelColor
+          fill: theme.labelColor,
+          stroke: '#fff',
+          lineWidth: 1
         }
-      }).position('name*value').size(singleBarWidth).tooltip('name*value', (name, value) => {
+      }).position('name*value').size(singleBarWidth).color('value', value => {
+        const color = getLabelColor({
+          chart: chart.config,
+          colorRules,
+          value
+        });
+        return color || chartBarColor;
+      }).tooltip('name*value', (name, value) => {
         return {
           title: y_axis_summary_type === CHART_SUMMARY_TYPE.COUNT ? intl.get('Amount') : intl.get(CHART_SUMMARY_SHOW[y_axis_summary_method]),
           value: BaseUtils.getSummaryValueDisplayString(summaryColumn, value, y_axis_summary_method),
@@ -93,16 +102,11 @@ class Bar extends ChartComponent {
           }
         }
       }).style('value', value => {
-        const color = getLabelColor({
-          chart: chart.config,
-          colorRules,
-          value
-        });
         return {
-          fill: color || chartBarColor,
           radius: [singleBarRadius, singleBarRadius, 0, 0]
         };
       });
+      this.chart.legend(false);
       this.setToolTip();
       isFunction(customRender) && customRender(this.chart);
       this.setNameLabelAndTooltip(theme, this.labelCount);

package/dist/view/wrapper/basic-number-card.js

@@ -54,9 +54,11 @@ class BasicNumericCard extends Component {
         summaryColumn
       } = this.props;
       const {
+        summary_type,
         summary_method
       } = chart.config;
-      if (summary_method !== BASIC_NUMBER_CARD_CALCULATION_METHOD) {
+      // COUNT / SUMMARIZE_A_FIELD
+      if (summary_type !== BASIC_NUMBER_CARD_CALCULATION_METHOD) {
         const formattedContent = BaseUtils.getSummaryValueDisplayString(summaryColumn, data, summary_method);
         return formattedContent;
       }

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

@@ -444,7 +444,7 @@ export default class ChartComponent extends Component {
         domStyles: {
           'g2-tooltip': {
             boxSizing: 'border-box',
-            width: '178px',
+            minWidth: '178px',
             borderRadius: '3px',
             border: '1px solid #e2e2e2',
             backgroundColor: '#fff',
@@ -465,7 +465,8 @@ export default class ChartComponent extends Component {
             textOverflow: 'ellipsis'
           },
           'g2-tooltip-list-item': {
-            marginBottom: '8px'
+            marginBottom: '8px',
+            display: 'flex'
           },
           'g2-tooltip-marker': {
             width: '12px',
@@ -476,7 +477,7 @@ export default class ChartComponent extends Component {
           'g2-tooltip-name': {
             display: 'inline-block',
             fontSize: '12px',
-            maxWidth: '80px',
+            minWidth: '80px',
             whiteSpace: 'nowrap',
             overflow: 'hidden',
             lineHeight: '12px',

package/dist/view/wrapper/combination.js

@@ -91,7 +91,9 @@ class Combination extends React.Component {
       this.chart.axis('name', {
         label: {
           style: {
-            fill: theme.textColor
+            fill: theme.textColor,
+            stroke: '#fff',
+            lineWidth: 1
           },
           formatter: name => {
             const isString = typeof name === 'string';

package/dist/view/wrapper/compare.js

@@ -38,7 +38,6 @@ class Compare extends ChartComponent {
       this.loadData(data);
       this.draw(data);
       this.chart.render();
-      this.renderAxisLabel(this.props.chart, this.props.tables);
     };
     this.draw = data => {
       const {
@@ -84,7 +83,9 @@ class Compare extends ChartComponent {
       this.chart.interval().label(display_data ? 'formatted_value' : false, {
         style: {
           fontSize: BaseUtils.getLabelFontSize(label_font_size),
-          fill: themeColors.textColor
+          fill: themeColors.textColor,
+          stroke: '#fff',
+          lineWidth: 1
         }
       }).position('name*value').color('group_name', currentTheme && currentTheme.colors).tooltip('name*formatted_value*raw_name', (name, value, raw_name) => {
         const nameContent = !raw_name && typeof raw_name !== 'number' ? intl.get(EMPTY_NAME) : raw_name;
@@ -234,12 +235,14 @@ class Compare extends ChartComponent {
   componentDidMount() {
     this.createChart();
     this.drawChart();
+    this.renderAxisLabel(this.props.chart, this.props.tables);
   }
   componentDidUpdate(prevProps) {
     if (BaseUtils.shouldChartComponentUpdate(prevProps, this.props)) {
       this.chart && this.chart.destroy();
       this.createChart();
       this.drawChart();
+      this.renderAxisLabel(this.props.chart, this.props.tables);
     }
   }
   componentWillUnmount() {

package/dist/view/wrapper/completeness.js

@@ -123,7 +123,9 @@ export default function Completeness(props) {
         },
         style: {
           fontSize: BaseUtils.getLabelFontSize(label_font_size),
-          fill: theme.labelColor
+          fill: theme.labelColor,
+          stroke: '#fff',
+          lineWidth: 1
         }
       }).position('name*value').size(singleBarWidth).color(colorField, colorFieldCb).adjust(adjustType).tooltip('name*group_name*value', (name, group_name, value) => {
         return {

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

@@ -105,7 +105,9 @@ class HorizontalBarGroup extends HorizontalComponent {
         },
         style: {
           fontSize: BaseUtils.getLabelFontSize(label_font_size),
-          fill: theme.labelColor
+          fill: theme.labelColor,
+          stroke: '#fff',
+          lineWidth: 1
         }
       }).position('name*value').size(singleBarWidth).color(chartBarColor, group_name => {
         return this.colorMap[group_name];

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

@@ -76,11 +76,18 @@ class HorizontalBar extends HorizontalComponent {
       this.chart.interval().label(display_data ? 'value' : false, {
         style: {
           fontSize: BaseUtils.getLabelFontSize(label_font_size),
-          fill: theme.labelColor
+          fill: theme.labelColor,
+          stroke: '#fff',
+          lineWidth: 1
         }
-      }).position('name*value')
-      // .color(chartBarColor)
-      .size(singleBarWidth).tooltip('name*value', (name, value) => {
+      }).position('name*value').color('value', value => {
+        const color = getLabelColor({
+          chart: chart.config,
+          colorRules,
+          value
+        });
+        return color || chartBarColor;
+      }).size(singleBarWidth).tooltip('name*value', (name, value) => {
         return {
           title: horizontal_axis_summary_type === CHART_SUMMARY_TYPE.COUNT ? intl.get('Amount') : intl.get(CHART_SUMMARY_SHOW[horizontal_axis_summary_method]),
           value: BaseUtils.getSummaryValueDisplayString(summaryColumn, value, horizontal_axis_summary_method),
@@ -93,16 +100,11 @@ class HorizontalBar extends HorizontalComponent {
           }
         }
       }).style('value', value => {
-        const color = getLabelColor({
-          chart: chart.config,
-          colorRules,
-          value
-        });
         return {
-          fill: color || chartBarColor,
           radius: [singleBarRadius, singleBarRadius, 0, 0]
         };
       });
+      this.chart.legend(false);
       this.setToolTip();
       this.setNameLabelAndTooltip(theme, this.labelCount);
       this.setValueLabel(theme);

package/dist/view/wrapper/map.js

@@ -168,7 +168,9 @@ export default function Map(props) {
         style: {
           // TODO
           // use data_color temporarily
-          fill: data_color
+          fill: data_color,
+          stroke: '#fff',
+          lineWidth: 1
         },
         align: legendDirection === 'vertical' ? 'right' : 'bottom',
         formatter: value => {

package/dist/view/wrapper/mirror.js

@@ -71,7 +71,9 @@ class Mirror extends ChartComponent {
         },
         label: {
           style: {
-            fill: themeColors.labelColor
+            fill: themeColors.labelColor,
+            stroke: '#fff',
+            lineWidth: 1
           },
           formatter: name => {
             let label = name;

package/dist/view/wrapper/scatter.js

@@ -83,7 +83,9 @@ export function Scatter(props) {
       currentChart.chart.point().position('name*value').label(y_axis_show_value ? 'value' : false, {
         style: {
           fontSize: BaseUtils.getLabelFontSize(label_font_size),
-          fill: theme.labelColor
+          fill: theme.labelColor,
+          stroke: '#fff',
+          lineWidth: 1
         }
       }).color('groupby', groupby => {
         if (groupby[0] === 'groupby') {

package/dist/view/wrapper/world-map.js

@@ -4,11 +4,11 @@ import { getNumberDisplayString } from 'dtable-utils';
 import PropTypes from 'prop-types';
 import { debounce } from 'lodash-es';
 import intl from '../../intl';
-import ChartComponent from './chart-component';
 import fetchMapJson from '../../services/map-json';
 import { BaseUtils, getMediaUrlForMap } from '../../utils';
 import { COLOR_OPTIONS } from '../../constants/color-rules';
 import { CHART_SUMMARY_TYPE, MAP_LEVEL, CHART_TYPE, TITLE_AMOUNT, DEFAULT_NUMBER_FORMAT_OBJECT } from '../../constants';
+import ChartComponent from './chart-component';
 const WIDTH = 798;
 const HEIGHT = 394;
 class WorldMap extends ChartComponent {
@@ -221,7 +221,9 @@ class WorldMap extends ChartComponent {
         label: {
           spacing: 2,
           style: {
-            fill: themeColors.textColor
+            fill: themeColors.textColor,
+            stroke: '#fff',
+            lineWidth: 1
           },
           align: legendDirection === 'vertical' ? 'right' : 'bottom',
           formatter: value => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sea-chart",
-  "version": "0.0.28",
+  "version": "0.0.30",
   "main": "./dist/index.js",
   "dependencies": {
     "@antv/data-set": "0.11.8",
@@ -22,7 +22,7 @@
   "peerDependencies": {
     "@antv/scale": "0.3.14",
     "babel-plugin-on-demand-loading": "^0.0.9",
-    "dtable-ui-component": "~4.4.*",
+    "dtable-ui-component": "4.4.31",
     "dtable-utils": "~4.4.*",
     "prop-types": "15.8.1",
     "react": "^17.0.0",