sea-chart 0.0.20 → 0.0.22

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/wrapper/area.js

@@ -1,6 +1,6 @@
 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';
@@ -64,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;
@@ -93,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)) {
@@ -161,6 +203,7 @@ class Area extends ChartComponent {
   }
   componentWillUnmount() {
     this.chart && this.chart.destroy();
+    super.componentWillUnmount();
   }
   render() {
     return /*#__PURE__*/React.createElement("div", {

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

@@ -28,7 +28,11 @@ class BasicNumericCard extends Component {
       } = chart;
       const {
         summary_method,
-        name
+        name,
+        font_size,
+        font_color,
+        label_font_size,
+        label_font_color
       } = config;
       let content = null;
       if (summary_method === 'Distinct_values') {
@@ -36,17 +40,9 @@ class BasicNumericCard extends Component {
       } else {
         content = this.formatData(result);
       }
-      const fontSize = this.getFontSize(content);
-      let labelFontSize = fontSize - 35;
-      if (labelFontSize > 20) {
-        labelFontSize = 20;
-      }
-      if (labelFontSize < 12) {
-        labelFontSize = 12;
-      }
       this.chart.annotation().html({
         position: ['50%', '50%'],
-        html: "\n        <div style=\"color: ".concat(theme.cardColor, "; text-align: center;\">\n          <p class=\"text-content\" style=\"font-size: ").concat(fontSize, "px; margin: -15px 0 2px 0;\">").concat(content, "</p>\n          <p style=\"font-size: ").concat(labelFontSize, "px;margin: 0;overflow: hidden;text-overflow: ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;\">").concat(name, "</p>\n        </div>\n      ")
+        html: "\n        <div style=\"color: ".concat(theme.cardColor, "; text-align: center;\">\n          <p class=\"text-content\" style=\"font-size: ").concat(font_size, "px; color: ").concat(font_color, "; margin: -15px 0 2px 0;\">").concat(content, "</p>\n          <p style=\"font-size: ").concat(label_font_size, "px; color: ").concat(label_font_color, "; margin: 0;overflow: hidden;text-overflow: ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;\">").concat(name, "</p>\n        </div>\n      ")
       });
       isFunction(customRender) && customRender(this.chart);
       this.chart.render();
@@ -89,29 +85,6 @@ class BasicNumericCard extends Component {
       }
       return content;
     };
-    this.getFontSize = content => {
-      let canvas = document.createElement('canvas');
-      const context = canvas.getContext('2d');
-      const {
-        width
-      } = this.chart;
-      let font = context.font;
-      let initFontSize = 50;
-      const fontStyle = font.slice(font.indexOf('px'));
-      font = initFontSize + fontStyle;
-      context.font = font;
-      context.fontSize = initFontSize;
-      while (context.measureText(content).width >= width - 40) {
-        initFontSize -= 1;
-        context.font = initFontSize + fontStyle;
-        context.fontSize = initFontSize;
-      }
-      canvas = null;
-      if (initFontSize < 16) {
-        initFontSize = 16;
-      }
-      return initFontSize;
-    };
   }
   componentDidUpdate(prevProps) {
     if (BaseUtils.shouldChartComponentUpdate(prevProps, this.props)) {

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

@@ -1,6 +1,6 @@
 import { Component } from 'react';
 import { getTableById, getTableColumnByKey } from 'dtable-utils';
-import { cloneDeep } from 'lodash-es';
+import { cloneDeep, debounce } from 'lodash-es';
 import { Chart } from '../../utils/custom-g2';
 import { BaseUtils } from '../../utils';
 import { CHART_TYPE, CHART_SUMMARY_TYPE, LABEL_POSITION_TYPE, CHART_THEME_COLOR, EMPTY_NAME, THEME_NAME_MAP } from '../../constants';
@@ -10,6 +10,15 @@ export default class ChartComponent extends Component {
     var _this;
     super(...arguments);
     _this = this;
+    this.handleResize = debounce(() => {
+      if (!this.createChart || !this.drawChart) return;
+      this.chart && this.chart.destroy();
+      this.createChart();
+      this.drawChart();
+      if (this.needRenderAxisLabel) {
+        this.renderAxisLabel(this.props.chart, this.props.tables);
+      }
+    }, 300);
     this.initChart = (container, _ref) => {
       let {
         appendPadding,
@@ -389,12 +398,17 @@ export default class ChartComponent extends Component {
             // Draw the bottom line back to the right edge of the left semi-circle
             ['A', r, r, 0, 0, 1, x - rectWidth / 2 - 3, y - r - 1] // Draw the left semi-circle
             ];
+          },
+          style: style => {
+            // fill legend with stroke color
+            style.fill = style.stroke;
+            return style;
           }
         }
       });
     };
-    this.setToolTip = () => {
-      this.chart.tooltip({
+    this.getToolSettings = () => {
+      return {
         showMarkers: false,
         domStyles: {
           'g2-tooltip': {
@@ -431,6 +445,32 @@ export default class ChartComponent extends Component {
             fontSize: '12px'
           }
         }
+      };
+    };
+    this.setToolTip = () => {
+      const settings = this.getToolSettings();
+      this.chart.tooltip(settings);
+    };
+    this.setToolTipForLine = () => {
+      const settings = this.getToolSettings();
+      const lineToolTipSettings = {
+        showCrosshairs: true,
+        showTitle: true,
+        shared: true,
+        showMarkers: true,
+        marker: {
+          strokeOpacity: 0,
+          r: 6
+        },
+        crosshairs: {
+          line: {
+            fill: '#e2e2e2'
+          }
+        }
+      };
+      this.chart.tooltip({
+        ...settings,
+        ...lineToolTipSettings
       });
     };
     this.isShowXAxisLabel = chart => {
@@ -449,4 +489,10 @@ export default class ChartComponent extends Component {
       return themeColors || CHART_THEME_COLOR[THEME_NAME_MAP.LIGHT];
     };
   }
+  componentDidMount() {
+    window.addEventListener('resize', this.handleResize);
+  }
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.handleResize);
+  }
 }

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

@@ -8,11 +8,6 @@ import HorizontalComponent from './horizontal-component';
 class HorizontalBar extends HorizontalComponent {
   constructor(props) {
     super(props);
-    this.handleResize = debounce(() => {
-      this.chart && this.chart.destroy();
-      this.createChart();
-      this.drawChart();
-    }, 300);
     this.createChart = () => {
       const {
         chart
@@ -116,7 +111,7 @@ class HorizontalBar extends HorizontalComponent {
   componentDidMount() {
     this.createChart();
     this.drawChart();
-    window.addEventListener('resize', this.handleResize);
+    super.componentDidMount();
   }
   componentDidUpdate(prevProps) {
     if (BaseUtils.shouldChartComponentUpdate(prevProps, this.props)) {
@@ -127,7 +122,7 @@ class HorizontalBar extends HorizontalComponent {
   }
   componentWillUnmount() {
     this.chart && this.chart.destroy();
-    window.removeEventListener('resize', this.handleResize);
+    super.componentWillUnmount();
   }
   render() {
     return /*#__PURE__*/React.createElement("div", {

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

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { BaseUtils, isFunction } from '../../utils';
 import intl from '../../intl';
+import { CHART_LINE_TYPES, CHART_SUMMARY_SHOW, CHART_SUMMARY_TYPE } from '../../constants';
 import ChartComponent from './chart-component';
 class LineGroup extends ChartComponent {
   constructor(props) {
@@ -49,11 +50,15 @@ class LineGroup extends ChartComponent {
       } = this.props;
       const {
         y_axis_show_value,
-        label_font_size
+        label_font_size,
+        line_type,
+        y_axis_summary_type,
+        y_axis_summary_method
       } = chart.config;
       const chartBarColor = this.groupName;
       const newData = this.getChartGroupData(data);
       this.drawLabels(newData);
+      const isSmooth = line_type === CHART_LINE_TYPES[1];
 
       // set Coord type
       this.chart.coordinate('rect');
@@ -63,68 +68,78 @@ class LineGroup extends ChartComponent {
           type: 'cat'
         }
       });
-      this.chart.line().label(y_axis_show_value ? 'value' : false, {
+      const line = this.chart.line().label(y_axis_show_value ? 'value' : false, {
         style: {
           fontSize: BaseUtils.getLabelFontSize(label_font_size),
           fill: theme.textColor
         }
-      }).position('name*value').color(chartBarColor);
-      this.chart.point().position('name*value').color(chartBarColor).shape('circle').size(3).style({
-        lineWidth: 1,
-        stroke: '#fff'
+      }).animate({
+        appear: {
+          animation: 'fadeIn',
+          duration: 1000,
+          easing: 'easeLinear'
+        }
+      }).position('name*value').color(chartBarColor).shape(isSmooth ? 'smooth' : 'line').style({
+        lineWidth: 3,
+        opacity: 1
+      }).tooltip('group_name*name*value', (group_name, 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),
+          name: group_name
+        };
       });
-      this.chart.tooltip({
-        showCrosshairs: true,
-        showTitle: true,
-        containerTpl: '<div class="g2-tooltip"> <div class="g2-tooltip-title"></div> <div class="g2-tooltip-list"></div></div>',
-        itemTpl: '<li class="tooltip-item"> <span>{value}</span> <span class="tooltip-item-left"><span class="tooltip-item-rect" style="background-color:{color}"></span> <span>{name}</span></span> </li>',
-        domStyles: {
-          'g2-tooltip': {
-            borderRadius: '3px',
-            backgroundColor: '#fff',
-            padding: '16px',
-            width: '180px',
-            border: '1px solid #E2E2E2'
-          },
-          'g2-tooltip-title': {
-            color: '#333333',
-            fontSize: '14px',
-            marginTop: '-1px'
-          },
-          'tooltip-item': {
-            display: 'flex',
-            width: '100%',
-            justifyContent: 'space-between',
-            marginTop: '8px',
-            color: '#333333',
-            fontSize: '12px'
-          },
-          'tooltip-item-left': {
-            display: 'flex',
-            justifyContent: 'space-between',
-            alignItem: 'center'
-          },
-          'tooltip-item-rect': {
-            display: 'inline-block',
-            width: '12px',
-            height: '12px',
-            borderRadius: '2px',
-            marginRight: '8px'
+      let point;
+      if (y_axis_show_value) {
+        point = this.chart.point().position('name*value').color(chartBarColor).animate({
+          appear: {
+            animation: 'fadeIn',
+            duration: 1000,
+            easing: 'easeLinear'
           }
-        },
-        shared: true
+        }).shape('circle').size(4).style({
+          stroke: 0,
+          fillOpacity: 1
+        });
+      }
+      this.chart.on('tooltip:show', () => {
+        if (line.styleOption.cfg.opacity === 0.3) return;
+        line.style({
+          opacity: 0.3,
+          lineWidth: 3
+        });
+        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
+        });
+        if (point) point.style({
+          fillOpacity: 1,
+          stroke: 0
+        });
+        this.chart.render();
       });
+      this.setToolTipForLine();
       this.setNameLabelAndTooltip(theme, this.labelCount);
       this.setValueLabel(theme);
-      this.setLegend(this.groupName, theme, 'bottom');
+      this.setLegend(this.groupName, theme, 'top-right');
     };
     this.chart = null;
     this.groupName = 'group_name';
+    this.needRenderAxisLabel = true;
   }
   componentDidMount() {
     this.createChart();
     this.drawChart();
     this.renderAxisLabel(this.props.chart, this.props.tables);
+    super.componentDidMount();
   }
   componentDidUpdate(prevProps) {
     if (BaseUtils.shouldChartComponentUpdate(prevProps, this.props)) {
@@ -136,6 +151,7 @@ class LineGroup extends ChartComponent {
   }
   componentWillUnmount() {
     this.chart && this.chart.destroy();
+    super.componentWillUnmount();
   }
   render() {
     const {

package/dist/view/wrapper/line.js

@@ -1,9 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
+import { getTableById, getTableColumnByKey } from 'dtable-utils';
 import { BaseUtils, isFunction } from '../../utils';
-import ChartComponent from './chart-component';
 import intl from '../../intl';
+import { CHART_LINE_TYPES, CHART_SUMMARY_SHOW, CHART_SUMMARY_TYPE } from '../../constants';
+import ChartComponent from './chart-component';
 class Line extends ChartComponent {
   constructor(props) {
     super(props);
@@ -45,95 +47,97 @@ class Line extends ChartComponent {
       const {
         chart,
         theme,
-        themeName
+        themeName,
+        summaryColumn
       } = this.props;
       const {
         y_axis_label_color,
         y_axis_show_value,
-        label_font_size
+        label_font_size,
+        line_type,
+        y_axis_column_key,
+        y_axis_summary_type,
+        y_axis_summary_method
       } = chart.config;
       let chartBarColor = y_axis_label_color || '#5B8FF9';
       if (themeName) {
         chartBarColor = BaseUtils.getCurrentTheme(themeName).colors[0];
       }
       this.drawLabels(data);
+      const isSmooth = line_type === CHART_LINE_TYPES[1];
 
       // set Coord type
       this.chart.coordinate('rect');
-      this.chart.line().label(y_axis_show_value ? 'value' : false, {
+      const line = this.chart.line().label(y_axis_show_value ? 'value' : false, {
         style: {
           fontSize: BaseUtils.getLabelFontSize(label_font_size),
-          fill: theme.textColor
+          fill: theme.labelColor
         }
-      }).position('name*value').color(chartBarColor);
-      this.chart.point().position('name*value').color(chartBarColor).shape('circle').size(3).style({
-        lineWidth: 1,
-        stroke: '#fff'
+      }).animate({
+        appear: {
+          animation: 'fadeIn',
+          duration: 1000,
+          easing: 'easeLinear'
+        }
+      }).position('name*value').color(chartBarColor).shape(isSmooth ? 'smooth' : 'line').style({
+        lineWidth: 3,
+        opacity: 1
+      }).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),
+          name
+        };
       });
-      this.chart.tooltip({
-        showCrosshairs: true,
-        showTitle: true,
-        containerTpl: '<div class="g2-tooltip"> <div class="g2-tooltip-title"></div> <div class="g2-tooltip-list"></div></div>',
-        itemTpl: '<li class="tooltip-item"> <span>{value}</span> <span class="tooltip-item-left"><span class="tooltip-item-rect" style="background-color:{color}"></span> <span>{title}</span></span> </li>',
-        domStyles: {
-          'g2-tooltip': {
-            borderRadius: '3px',
-            backgroundColor: '#fff',
-            padding: '16px',
-            width: '180px',
-            border: '1px solid #E2E2E2'
-          },
-          'g2-tooltip-title': {
-            color: '#333333',
-            fontSize: '14px',
-            marginTop: '-1px'
-          },
-          'tooltip-item': {
-            display: 'flex',
-            width: '100%',
-            justifyContent: 'space-between',
-            marginTop: '8px',
-            color: '#333333',
-            fontSize: '12px'
-          },
-          'tooltip-item-left': {
-            display: 'flex',
-            justifyContent: 'space-between',
-            alignItem: 'center'
-          },
-          'tooltip-item-rect': {
-            display: 'inline-block',
-            width: '12px',
-            height: '12px',
-            borderRadius: '2px',
-            marginRight: '8px'
+      let point;
+      if (y_axis_show_value) {
+        point = this.chart.point().position('name*value').color(chartBarColor).animate({
+          appear: {
+            animation: 'fadeIn',
+            duration: 1000,
+            easing: 'easeLinear'
           }
-        },
-        shared: true
+        }).shape('circle').size(4).style({
+          stroke: 0,
+          fillOpacity: 1
+        });
+      }
+      this.chart.on('tooltip:show', () => {
+        if (line.styleOption.cfg.opacity === 0.3) return;
+        line.style({
+          opacity: 0.3,
+          lineWidth: 3
+        });
+        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
+        });
+        if (point) point.style({
+          fillOpacity: 1,
+          stroke: 0
+        });
+        this.chart.render();
+      });
+      this.setToolTipForLine();
       this.setNameLabelAndTooltip(theme, this.labelCount);
       this.setValueLabel(theme);
-      this.chart.theme({
-        geometries: {
-          point: {
-            circle: {
-              active: {
-                style: {
-                  stroke: 'rgba(0, 0, 0, 0)',
-                  r: 4
-                }
-              }
-            }
-          }
-        }
-      });
     };
     this.chart = null;
+    this.needRenderAxisLabel = true;
   }
   componentDidMount() {
     this.createChart();
     this.drawChart();
     this.renderAxisLabel(this.props.chart, this.props.tables);
+    super.componentDidMount();
   }
   componentDidUpdate(prevProps) {
     if (BaseUtils.shouldChartComponentUpdate(prevProps, this.props)) {
@@ -145,6 +149,7 @@ class Line extends ChartComponent {
   }
   componentWillUnmount() {
     this.chart && this.chart.destroy();
+    super.componentWillUnmount();
   }
   render() {
     const {

package/package.json

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