sea-chart 0.0.19 → 0.0.21

package/dist/constants/index.js

@@ -14,7 +14,7 @@ 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];
+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,
@@ -74,6 +74,9 @@ export const CHART_DATA_SORT_TYPE = {
   ASCENDING: 'ascending',
   DESCENDING: 'descending'
 };
+const POLYLINES = 'polylines';
+const CURVES = 'curves';
+export const CHART_LINE_TYPES = [POLYLINES, CURVES];
 export const CHART_DATA_SORT_TYPES = [CHART_DATA_SORT_TYPE.NOT_SORTED, CHART_DATA_SORT_TYPE.ASCENDING, CHART_DATA_SORT_TYPE.DESCENDING];
 export const CHART_DATA_SORT_TYPE_SHOW = {
   [CHART_DATA_SORT_TYPE.NOT_SORTED]: 'Not_sorted',

package/dist/locale/lang/de.js

@@ -162,6 +162,9 @@ const de = {
   'Numeric_column_not_found': 'Numeric column not found',
   'Target_column_not_found': 'Target column not found',
   'Completed_column_not_found': 'Completed column not found',
-  'Target_summary_method_is_not_valid': 'Target summary method is not valid'
+  'Target_summary_method_is_not_valid': 'Target summary method is not valid',
+  'polylines': 'Polylines',
+  'curves': 'Curves',
+  'Line_type': 'Line type'
 };
 export default de;

package/dist/locale/lang/en.js

@@ -237,6 +237,11 @@ const en = {
   "Previous_7_days": "Previous 7 days",
   "Previous_30_days": "Previous 30 days",
   "The_day_before_yesterday": "The day before yesterday",
-  "Can_not_compare_with_{var}": "Can not compare with {var}"
+  "Can_not_compare_with_{var}": "Can not compare with {var}",
+  "Number_settings": "Number settings",
+  "Label_settings": "Label settings",
+  'polylines': 'Polylines',
+  'curves': 'Curves',
+  'Line_type': 'Line type'
 };
 export default en;

package/dist/locale/lang/es.js

@@ -162,6 +162,9 @@ const es = {
   'Numeric_column_not_found': 'Numeric column not found',
   'Target_column_not_found': 'Target column not found',
   'Completed_column_not_found': 'Completed column not found',
-  'Target_summary_method_is_not_valid': 'Target summary method is not valid'
+  'Target_summary_method_is_not_valid': 'Target summary method is not valid',
+  'polylines': 'Polylines',
+  'curves': 'Curves',
+  'Line_type': 'Line type'
 };
 export default es;

package/dist/locale/lang/fr.js

@@ -162,6 +162,9 @@ const fr = {
   'Numeric_column_not_found': 'Numeric column not found',
   'Target_column_not_found': 'Target column not found',
   'Completed_column_not_found': 'Completed column not found',
-  'Target_summary_method_is_not_valid': 'Target summary method is not valid'
+  'Target_summary_method_is_not_valid': 'Target summary method is not valid',
+  'polylines': 'Polylines',
+  'curves': 'Curves',
+  'Line_type': 'Line type'
 };
 export default fr;

package/dist/locale/lang/pt.js

@@ -162,6 +162,9 @@ const pt = {
   'Numeric_column_not_found': 'Numeric column not found',
   'Target_column_not_found': 'Target column not found',
   'Completed_column_not_found': 'Completed column not found',
-  'Target_summary_method_is_not_valid': 'Target summary method is not valid'
+  'Target_summary_method_is_not_valid': 'Target summary method is not valid',
+  'polylines': 'Polylines',
+  'curves': 'Curves',
+  'Line_type': 'Line type'
 };
 export default pt;

package/dist/locale/lang/ru.js

@@ -162,6 +162,9 @@ const ru = {
   'Numeric_column_not_found': 'Numeric column not found',
   'Target_column_not_found': 'Target column not found',
   'Completed_column_not_found': 'Completed column not found',
-  'Target_summary_method_is_not_valid': 'Target summary method is not valid'
+  'Target_summary_method_is_not_valid': 'Target summary method is not valid',
+  'polylines': 'Polylines',
+  'curves': 'Curves',
+  'Line_type': 'Line type'
 };
 export default ru;

package/dist/locale/lang/zh_CN.js

@@ -105,9 +105,9 @@ const zh_CN = {
   "Stacked_bar_chart": "堆叠条形图",
   "Completeness": "完成度图",
   "Grouped_completeness": "分组完成度图",
-  "Line_chart": "折线图",
-  "Basic_line_chart": "基础折线图",
-  "Grouped_line_chart": "分组折线图",
+  "Line_chart": "线型图",
+  "Basic_line_chart": "基础线型图",
+  "Grouped_line_chart": "分组线型图",
   "Area": "面积图",
   "Grouped_area": "分组面积图",
   "Pie_chart": "饼图",
@@ -237,6 +237,11 @@ const zh_CN = {
   "Previous_7_days": "之前 7 天",
   "Previous_30_days": "之前 30 天",
   "The_day_before_yesterday": "前天",
-  "Can_not_compare_with_{var}": "无法和 {var} 比较"
+  "Can_not_compare_with_{var}": "无法和 {var} 比较",
+  "Number_settings": "数字设置",
+  "Label_settings": "标签设置",
+  'polylines': '折线',
+  'curves': '曲线',
+  'Line_type': '线型'
 };
 export default zh_CN;

package/dist/model/area-group.js

@@ -1,6 +1,6 @@
-import BaseModel from './base-model';
 import { isBoolean } from '../utils';
-import { CHART_TYPE, CHART_SUMMARY_TYPE } from '../constants';
+import { CHART_TYPE, CHART_SUMMARY_TYPE, CHART_LINE_TYPES } from '../constants';
+import BaseModel from './base-model';
 class AreaGroup extends BaseModel {
   constructor(options) {
     super({
@@ -36,6 +36,8 @@ class AreaGroup extends BaseModel {
     this.summary_columns = options.summary_columns;
     this.y_axis_use_stack = options.y_axis_use_stack;
     this.label_font_size = options.label_font_size;
+    // default as curve
+    this.line_type = options.line_type || CHART_LINE_TYPES[1];
   }
 }
 export default AreaGroup;

package/dist/model/area.js

@@ -1,6 +1,6 @@
-import BaseModel from './base-model';
 import { isBoolean } from '../utils';
-import { CHART_TYPE, CHART_SUMMARY_TYPE } from '../constants';
+import { CHART_TYPE, CHART_SUMMARY_TYPE, CHART_LINE_TYPES } from '../constants';
+import BaseModel from './base-model';
 class Area extends BaseModel {
   constructor(options) {
     super({
@@ -27,6 +27,7 @@ class Area extends BaseModel {
     this.y_axis_label_color = options.y_axis_label_color;
     this.sort_type = options.sort_type;
     this.label_font_size = options.label_font_size;
+    this.line_type = options.line_type || CHART_LINE_TYPES[1];
   }
 }
 export default Area;

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

@@ -1,6 +1,6 @@
 import { isNumericColumn, getTableById, getTableColumnByKey } from 'dtable-utils';
-import BaseModel from './base-model';
 import { CHART_SUMMARY_TYPE, CHART_TYPE } from '../constants';
+import BaseModel from './base-model';
 class BasicNumberCard extends BaseModel {
   constructor(options, tables) {
     super({
@@ -17,6 +17,10 @@ class BasicNumberCard extends BaseModel {
       }
     }
     this.summary_method = options.y_axis_summary_method || CHART_SUMMARY_TYPE.ROW_COUNT;
+    this.font_size = options.font_size || 40;
+    this.font_color = options.font_color;
+    this.label_font_size = options.label_font_size || 12;
+    this.label_font_color = options.label_font_color;
   }
 }
 export default BasicNumberCard;

package/dist/model/line-group.js

@@ -1,6 +1,6 @@
-import BaseModel from './base-model';
 import { isBoolean } from '../utils';
-import { CHART_TYPE, CHART_SUMMARY_TYPE } from '../constants';
+import { CHART_TYPE, CHART_SUMMARY_TYPE, CHART_LINE_TYPES } from '../constants';
+import BaseModel from './base-model';
 class LineGroup extends BaseModel {
   constructor(options) {
     super({
@@ -39,6 +39,7 @@ class LineGroup extends BaseModel {
     this.column_groupby_multiple_numeric_column = isBoolean(options.column_groupby_multiple_numeric_column) ? options.column_groupby_multiple_numeric_column : false;
     this.summary_columns = options.summary_columns;
     this.label_font_size = options.label_font_size;
+    this.line_type = options.line_type || CHART_LINE_TYPES[1];
   }
 }
 export default LineGroup;

package/dist/model/line.js

@@ -1,6 +1,6 @@
-import BaseModel from './base-model';
 import { isBoolean } from '../utils';
-import { CHART_TYPE, CHART_SUMMARY_TYPE } from '../constants';
+import { CHART_TYPE, CHART_SUMMARY_TYPE, CHART_LINE_TYPES } from '../constants';
+import BaseModel from './base-model';
 class Line extends BaseModel {
   constructor(options) {
     super({
@@ -33,6 +33,7 @@ class Line extends BaseModel {
     this.y_axis_label_color = options.y_axis_label_color;
     this.sort_type = options.sort_type;
     this.label_font_size = options.label_font_size;
+    this.line_type = options.line_type || CHART_LINE_TYPES[1];
   }
 }
 export default Line;

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

@@ -9,6 +9,7 @@ import DisplayValuesSettings from '../widgets/display-values-settings';
 import { eventStopPropagation } from '../../utils';
 import { X_LABEL_POSITIONS, Y_LABEL_POSITIONS, LABEL_POSITION_TYPE_SHOW, SUPPORT_STACK_VALUE_CHART_TYPES, CHART_TYPE } from '../../constants';
 import intl from '../../intl';
+import SelectLineType from '../widgets/select-line-type';
 const StyleSettings = _ref => {
   let {
     chart,
@@ -138,11 +139,16 @@ const StyleSettings = _ref => {
     y_axis_max,
     y_axis_show_value,
     label_font_size,
-    display_each_block_data
+    display_each_block_data,
+    line_type
   } = config;
   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];
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FormGroup, {
+  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, {
+    selectedLineType: line_type,
+    onChange: onChange
+  }), /*#__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/bar-settings/style-settings.js

@@ -7,8 +7,9 @@ import MinMaxSetting from '../widgets/min-max-setting';
 import DisplayValuesSettings from '../widgets/display-values-settings';
 import ColorUseTypeSelector from '../widgets/color-settings/color-use-type-selector';
 import { eventStopPropagation } from '../../utils';
-import { X_LABEL_POSITIONS, Y_LABEL_POSITIONS, LABEL_POSITION_TYPE_SHOW } from '../../constants';
+import { X_LABEL_POSITIONS, Y_LABEL_POSITIONS, LABEL_POSITION_TYPE_SHOW, CHART_TYPE } from '../../constants';
 import intl from '../../intl';
+import SelectLineType from '../widgets/select-line-type';
 const StyleSettings = _ref => {
   let {
     chart,
@@ -128,11 +129,17 @@ const StyleSettings = _ref => {
     y_axis_min,
     y_axis_max,
     y_axis_show_value,
-    label_font_size
+    label_font_size,
+    type,
+    line_type
   } = config;
   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];
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FormGroup, {
+  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, {
+    selectedLineType: line_type,
+    onChange: onChange
+  }), /*#__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/style-settings.js

@@ -1,6 +1,9 @@
 import React, { useCallback, useState } from 'react';
-import { Input, FormGroup } from 'reactstrap';
+import { Input, FormGroup, Label } from 'reactstrap';
+import { FontSizeSettings, FontColorSettings } from '../widgets/font-settings';
+import Divider from '../widgets/divider';
 import intl from '../../intl';
+import { DEFAULT_CHART_TITLE_FONT_COLOR } from '../../constants';
 const StyleSettings = _ref => {
   let {
     chart,
@@ -25,18 +28,60 @@ const StyleSettings = _ref => {
       e.target.blur();
     }
   }, []);
+  const modifyFontSize = (updatedFontSize, key) => {
+    onChange({
+      [key]: updatedFontSize
+    });
+  };
+  const modifyFontColor = (updatedFontColor, key) => {
+    onChange({
+      [key]: updatedFontColor
+    });
+  };
   const {
     config
   } = chart;
-  return /*#__PURE__*/React.createElement(FormGroup, {
+  const {
+    font_size,
+    font_color,
+    label_font_size,
+    label_font_color
+  } = config;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Label, null, intl.get('Number_settings')), /*#__PURE__*/React.createElement(FontSizeSettings, {
+    fontSize: font_size,
+    defaultFontSize: 40,
+    modifyFontSize: updatedFontSize => {
+      modifyFontSize(updatedFontSize, 'font_size');
+    }
+  }), /*#__PURE__*/React.createElement(FontColorSettings, {
+    fontColor: font_color,
+    defaultFontColor: DEFAULT_CHART_TITLE_FONT_COLOR,
+    modifyFontColor: updatedFontColor => {
+      modifyFontColor(updatedFontColor, 'font_color');
+    }
+  }), /*#__PURE__*/React.createElement(Divider, {
+    className: "mt-4"
+  }), /*#__PURE__*/React.createElement(Label, null, intl.get('Label_settings')), /*#__PURE__*/React.createElement(FormGroup, {
     className: "sea-chart-parameter-item"
-  }, /*#__PURE__*/React.createElement("label", null, intl.get('Label')), /*#__PURE__*/React.createElement(Input, {
+  }, /*#__PURE__*/React.createElement(Label, null, intl.get('Label')), /*#__PURE__*/React.createElement(Input, {
     type: "text",
     value: name,
     placeholder: config.name || '',
     onBlur: onSaveName,
     onChange: onChangeName,
     onKeyDown: onKeyDown
+  })), /*#__PURE__*/React.createElement(FontSizeSettings, {
+    fontSize: label_font_size,
+    defaultFontSize: 12,
+    modifyFontSize: updatedFontSize => {
+      modifyFontSize(updatedFontSize, 'label_font_size');
+    }
+  }), /*#__PURE__*/React.createElement(FontColorSettings, {
+    fontColor: label_font_color,
+    defaultFontColor: DEFAULT_CHART_TITLE_FONT_COLOR,
+    modifyFontColor: updatedFontColor => {
+      modifyFontColor(updatedFontColor, 'label_font_color');
+    }
   }));
 };
 export default StyleSettings;

package/dist/settings/widgets/select-line-type/index.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { FormGroup, Label } from 'reactstrap';
+import DTableRadio from "dtable-ui-component/lib/DTableRadio";
+import { CHART_LINE_TYPES } from '../../../constants';
+import intl from '../../../intl';
+function SelectLineType(_ref) {
+  let {
+    selectedLineType,
+    onChange
+  } = _ref;
+  const onChangeLineType = lineType => {
+    if (lineType === selectedLineType) return;
+    onChange && onChange({
+      line_type: lineType
+    });
+  };
+  return /*#__PURE__*/React.createElement(FormGroup, null, /*#__PURE__*/React.createElement(Label, null, intl.get('Line_type')), CHART_LINE_TYPES.map((lineType, index) => {
+    const isChecked = lineType === selectedLineType;
+    return /*#__PURE__*/React.createElement(DTableRadio, {
+      key: index,
+      isChecked: isChecked,
+      onCheckedChange: () => onChangeLineType(lineType),
+      label: intl.get(lineType)
+    });
+  }));
+}
+export default SelectLineType;

package/dist/view/index.css

@@ -1,14 +1,15 @@
 .sea-chart-formatter {
   height: 100%;
   width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  position: relative;
 }
 
 .sea-chart-formatter-tip {
   background-color: #F5F5F5;
   border-radius: 4px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 .sea-chart-formatter.error {
@@ -23,14 +24,23 @@
   overflow: hidden;
 }
 
+.sea-chart-formatter .sea-chart-cavans-container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
 .sea-chart-formatter .sea-chart-table-formatter-container {
   overflow: scroll;
 }
 
 .sea-chart-formatter .sea-chart-container {
-  flex: 1;
   font-size: 12px;
-  padding: 20px 40px 50px 50px;
+  position: absolute;
+  left: 2%;
+  right: 2%;
+  top: 2%;
+  bottom: 8%;
 }
 
 .sea-chart-formatter .sea-chart-container.show-x-axis-label,
@@ -64,5 +74,5 @@
 }
 
 .sea-chart-formatter .sea-chart-completeness-chart {
-  padding-right: 20px;
+  padding-right: 0.5%;
 }

package/dist/view/index.js

@@ -138,17 +138,17 @@ class View extends React.PureComponent {
     if (errorMessage) {
       return /*#__PURE__*/React.createElement("div", {
         className: classnames('error', validClassName, tipBackgroundColorClassName)
-      }, intl.get(errorMessage));
+      }, /*#__PURE__*/React.createElement("span", null, intl.get(errorMessage)));
     }
     if (tipMessage) {
       return /*#__PURE__*/React.createElement("div", {
         className: classnames('error', validClassName, tipBackgroundColorClassName)
-      }, intl.get(tipMessage));
+      }, /*#__PURE__*/React.createElement("span", null, intl.get(tipMessage)));
     }
     if (BaseUtils.imEmptyChartResult(data) && !chartType.includes('map')) {
       return /*#__PURE__*/React.createElement("div", {
         className: classnames('error', validClassName, tipBackgroundColorClassName)
-      }, intl.get('There_are_no_statistic_results_yet'));
+      }, /*#__PURE__*/React.createElement("span", null, intl.get('There_are_no_statistic_results_yet')));
     }
     return /*#__PURE__*/React.createElement("div", {
       className: validClassName
@@ -156,13 +156,15 @@ class View extends React.PureComponent {
       className: classnames('sea-chart-formatter-container', "sea-chart-".concat(chart === null || chart === void 0 ? void 0 : (_chart$config2 = chart.config) === null || _chart$config2 === void 0 ? void 0 : _chart$config2.type, "-formatter-container"))
     }, /*#__PURE__*/React.createElement(Title, {
       chart: chart
-    }), /*#__PURE__*/React.createElement(Wrapper, {
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "sea-chart-cavans-container"
+    }, /*#__PURE__*/React.createElement(Wrapper, {
       chart: chart,
       data: data,
       tables: tables,
       canvasStyle: canvasStyle,
       customRender: render
-    })));
+    }))));
   }
 }
 const propTypes = {

package/dist/view/wrapper/area.js

@@ -1,7 +1,6 @@
-import classnames from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
-import { CHART_SUMMARY_SHOW, CHART_SUMMARY_TYPE } from '../../constants';
+import { CHART_LINE_TYPES, CHART_SUMMARY_SHOW, CHART_SUMMARY_TYPE } from '../../constants';
 import intl from '../../intl';
 import { BaseUtils, isFunction } from '../../utils';
 import ChartComponent from './chart-component';
@@ -24,7 +23,7 @@ class Area extends ChartComponent {
       const {
         y_axis_show_value
       } = chart.config;
-      const appendPadding = [y_axis_show_value ? 47 : 30, 0, 0, 0];
+      const appendPadding = [y_axis_show_value ? 17 : 0, 0, 0, 0];
       this.initChart(this.container, {
         appendPadding
       });
@@ -65,10 +64,12 @@ class Area extends ChartComponent {
         y_axis_summary_type,
         y_axis_summary_method,
         y_axis_label_color,
+        line_type,
         y_axis_show_value,
         label_font_size
       } = chart.config;
       const newData = this.getChartGroupData(data);
+      const isSmooth = line_type === CHART_LINE_TYPES[1];
       let chartBarColor;
       if (this.isGroupChart) {
         chartBarColor = this.groupName;
@@ -94,62 +95,102 @@ class Area extends ChartComponent {
           }
         });
       }
-      this.chart.line().position('name*value').color(chartBarColor);
-      this.chart.point().label(y_axis_show_value ? 'value' : false, {
+
+      // line
+      const line = this.chart.line().label(y_axis_show_value ? 'value' : false, {
         style: {
           fontSize: BaseUtils.getLabelFontSize(label_font_size),
-          fill: '#6e6e6e'
+          fill: theme.labelColor
         }
-      }).position('name*value').color(chartBarColor).shape('circle').style({
-        lineWidth: 1,
-        stroke: '#fff'
-      }).state({
-        active: {
-          style: {
-            stroke: null
-          }
+      }).position('name*value').animate({
+        appear: {
+          animation: 'fadeIn',
+          duration: 1000,
+          easing: 'easeLinear'
         }
+      }).color(chartBarColor).shape(isSmooth ? 'smooth' : 'line').tooltip(false).style({
+        lineWidth: 3,
+        opacity: 1
       });
-      this.chart.area().position('name*value').color(chartBarColor).tooltip('name*value', (name, value) => {
+
+      // point
+      let point;
+      if (y_axis_show_value) {
+        point = this.chart.point().animate({
+          appear: {
+            animation: 'fadeIn',
+            duration: 1000,
+            easing: 'easeLinear'
+          }
+        }).position('name*value').color(chartBarColor).shape('circle').size(4).style({
+          stroke: 0,
+          fillOpacity: 1
+        });
+      }
+      const area = this.chart.area().position('name*value').animate({
+        appear: {
+          animation: 'fadeIn',
+          duration: 1000,
+          easing: 'easeLinear'
+        }
+      }).shape(isSmooth ? 'smooth' : 'area').color(chartBarColor).tooltip('group_name*name*value', (group_name, name, value) => {
         return {
-          name,
+          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),
-          title: y_axis_summary_type === CHART_SUMMARY_TYPE.COUNT ? intl.get('Amount') : intl.get(CHART_SUMMARY_SHOW[y_axis_summary_method])
+          name: group_name
         };
+      }).style({
+        fillOpacity: 0.3
       });
-      this.chart.tooltip({
-        showTitle: true,
-        showMarkers: false,
-        containerTpl: '<div class="g2-tooltip"><div class="g2-tooltip-list"></div></div>',
-        itemTpl: '<div class="g2-tooltip-content"><div class="tooltip-name">{title}<div><div class="tooltip-item">{name}: {value}<div></div>',
-        domStyles: {
-          'g2-tooltip': {
-            borderRadius: '2px',
-            backgroundColor: '#fff',
-            padding: '10px'
-          },
-          'tooltip-item': {
-            marginTop: '5px'
-          }
-        }
+      this.chart.on('tooltip:show', () => {
+        if (line.styleOption.cfg.opacity === 0.3) return;
+        line.style({
+          opacity: 0.3,
+          lineWidth: 3
+        });
+        area.style({
+          fillOpacity: 0.1
+        });
+        if (point) point.style({
+          fillOpacity: 0.3,
+          stroke: 0
+        });
+        this.chart.render();
+      });
+      this.chart.on('tooltip:hide', () => {
+        if (line.styleOption.cfg.opacity === 1) return;
+        line.style({
+          opacity: 1,
+          lineWidth: 3
+        });
+        area.style({
+          fillOpacity: 0.3
+        });
+        if (point) point.style({
+          fillOpacity: 1,
+          stroke: 0
+        });
+        this.chart.render();
       });
+      this.setToolTipForLine();
       isFunction(customRender) && customRender(this.chart);
       this.setNameLabelAndTooltip(theme, this.labelCount);
       this.setValueLabel(theme);
-      this.chart.interaction('active-region');
       if (this.isGroupChart) {
-        this.setLegend(this.groupName, theme, 'bottom');
+        this.setLegend(this.groupName, theme, 'top-right');
       }
     };
     this.chart = null;
     this.groupName = 'group_name';
     this.isGroupChart = false;
+    this.needRenderAxisLabel = true;
   }
   componentDidMount() {
     this.initChartType();
     this.createChart();
     this.drawChart();
     this.renderAxisLabel(this.props.chart, this.props.tables);
+    super.componentDidMount();
   }
   componentDidUpdate(prevProps) {
     if (BaseUtils.shouldChartComponentUpdate(prevProps, this.props)) {
@@ -162,16 +203,11 @@ class Area extends ChartComponent {
   }
   componentWillUnmount() {
     this.chart && this.chart.destroy();
+    super.componentWillUnmount();
   }
   render() {
-    const {
-      chart
-    } = this.props;
     return /*#__PURE__*/React.createElement("div", {
-      className: classnames('sea-chart-container w-100', {
-        'show-x-axis-label': this.isShowXAxisLabel(chart),
-        'show-y-axis-label': this.isShowYAxisLabel(chart)
-      }),
+      className: 'sea-chart-container',
       ref: ref => this.container = ref
     });
   }