sea-chart 0.0.28-beta → 0.0.29

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,8 +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',
-  'Display_empty_when_data_is_zero': 'Display empty when data is zero',
-  '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,8 +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',
-  'Display_empty_when_data_is_zero': 'Display empty when data is zero',
-  '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,8 +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',
-  'Display_empty_when_data_is_zero': 'Display empty when data is zero',
-  '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/pt.js

@@ -168,7 +168,6 @@ const pt = {
   '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',
-  'Display_empty_when_data_is_zero': 'Display empty when data is zero',
-  '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 pt;

package/dist/locale/lang/ru.js

@@ -168,7 +168,6 @@ const ru = {
   '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',
-  'Display_empty_when_data_is_zero': 'Display empty when data is zero',
-  '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 ru;

package/dist/locale/lang/zh_CN.js

@@ -129,6 +129,7 @@ const zh_CN = {
   "Table": '表格',
   "Pivot_table": "透视表",
   "Title": "标题",
+  "Custom_title": "自定义标题",
   "Edit_type": "编辑类型",
   'Cancel': '取消',
   'Submit': '提交',
@@ -245,7 +246,6 @@ const zh_CN = {
   'Line_type': '线型',
   'Summarize_description': '按照一个字段计算记录的总和、最大值、最小值或者平均值',
   'Count_description': '根据数据设置计算记录数量',
-  'Display_empty_when_data_is_zero': '数据为零时留空',
-  'Count_description': '根据数据设置计算记录数量'
+  'Display_empty_when_data_is_zero': '数据为零时留空'
 };
 export default zh_CN;

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/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/utils/chart-utils/base-utils.js

@@ -80,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

@@ -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'] || '';
@@ -748,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) {
@@ -782,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/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,7 +78,9 @@ 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) => {
         return {

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,7 +76,9 @@ 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)

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.28beta",
+  "version": "0.0.29",
   "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.30",
+    "dtable-ui-component": "4.4.31",
     "dtable-utils": "~4.4.*",
     "prop-types": "15.8.1",
     "react": "^17.0.0",