sea-chart 0.0.64 → 0.0.65

package/dist/locale/lang/de.js

@@ -39,7 +39,7 @@ const de = {
   "Auto_range": "Automatische Grenzen",
   "Select_a_column": "Spalte auswählen",
   "Summary_method": "Auswertungsmethode",
-  "Label": "Label",
+  "Label": "Beschriftung",
   "Y-axis(left side)": "Y-Achse (primär)",
   "Y-axis(right side)": "Y-Achse (sekundär)",
   "Display_title": "Anzeigetitel",
@@ -64,6 +64,7 @@ const de = {
   "Column_grouping_field": "Feld für die Gruppierung von Spalten",
   "Date_range": "Zeitspanne",
   "Compare_to_date_range": "Mit Zeitspanne vergleichen",
+  "Increase": "Zunahme",
   "Display_increase": "Absolute Veränderung anzeigen",
   "Display_percentage_increase": "Prozentuale Veränderung anzeigen",
   "Color": "Farbe",
@@ -82,6 +83,7 @@ const de = {
   "Calculate_the_number_of_records_in_two_time_periods": "Anzahl der Einträge in zwei Zeitperioden vergleichen",
   "Use_a_field_to_calculate_the_sum_maximum_or_minimum_value_of_records_in_two_time_periods": "Ein Feld verwenden, um die Summe, das Maximum, das Minimum oder den Durchschnitt von Datensätzen in zwei Zeiträumen zu berechnen",
   "No_options": "Keine Optionen",
+  "Alignment": "Alignment",
   "Text_horizontal_alignment": "Horizontale Ausrichtung des Textes",
   "Please_input_date": "Datum eingeben",
   "Filter": "Filtern",
@@ -111,8 +113,8 @@ const de = {
   "Pie_chart": "Kuchendiagramm",
   "Basic_pie_chart": "Einfaches Kuchendiagramm",
   "Ring_chart": "Ringdiagramm",
-  "Scatter_chart": "Scatter chart",
-  "Combination_chart": "Combination chart",
+  "Scatter_chart": "Streudiagramm",
+  "Combination_chart": "Kombiniertes Diagramm",
   "Map": "Karte",
   "World_map": "Weltkarte",
   "World_map_bubble": "Weltkarte (Blasendiagramm)",
@@ -193,12 +195,12 @@ const de = {
   "Geo_column_not_found": "Geopositionsspalte wurde nicht gefunden.",
   "Summary_column_not_found": "Die Summenspalte wurde nicht gefunden.",
   "Total_column_not_found": "Die Gesamtwertspalte wurde nicht gefunden.",
-  "Total_summary_method_is_not_valid": "Total summary method is not valid",
+  "Total_summary_method_is_not_valid": "Die Gesamtauswertungsmethode ist nicht gültig.",
   "Y_axis_column_not_found": "Die Spalte für die Y-Achse wurde nicht gefunden.",
   "Numeric_column_not_found": "Die numerische Spalte wurde nicht gefunden.",
   "Target_column_not_found": "Die Zielspalte wurde nicht gefunden.",
   "Completed_column_not_found": "Die Fortschrittsspalte wurde nicht gefunden.",
-  "Target_summary_method_is_not_valid": "Target summary method is not valid",
+  "Target_summary_method_is_not_valid": "Die Zielauswertungsmethode ist nicht gültig.",
   "Grid_size": "Rastergröße",
   "Grid_distance": "Abstand zwischen den Rastern",
   "Sun": "So",
@@ -237,12 +239,11 @@ const de = {
   "Previous_30_days": "Vorherige 30 Tage",
   "The_day_before_yesterday": "Vorgestern",
   "Can_not_compare_with_{var}": "Ein Vergleich mit {var} ist nicht möglich.",
-  "Number_settings": "Zahleinstellungen",
-  "Label_settings": "Labeleinstellungen",
+  "Number": "Number",
   "polylines": "Polygonzug",
   "curves": "Kurven",
   "Line_type": "Linientyp",
-  "Summarize_description": "Calculate the sum, maximum, minimum or average of records based on a field",
+  "Summarize_description": "Die Summe, das Maximum, das Minimum oder den Durchschitt der Einträge basierend auf einem Feld berechnen",
   "Count_description": "Einträge basierend auf den Dateneinstellungen zählen",
   "Display_empty_when_data_is_zero": "Wert 0 als leeren Wert anzeigen"
 };

package/dist/locale/lang/en.js

@@ -64,6 +64,7 @@ const en = {
   "Column_grouping_field": "Column grouping field",
   "Date_range": "Date range",
   "Compare_to_date_range": "Compare to date range",
+  "Increase": "Increase",
   "Display_increase": "Display increase",
   "Display_percentage_increase": "Display percentage increase",
   "Color": "Color",
@@ -130,7 +131,6 @@ const en = {
   "Title": "Title",
   "Custom_title": "Custom title",
   "Edit_type": "Edit type",
-  "All_charts": "All charts",
   "Cancel": "Cancel",
   "Submit": "Submit",
   "There_are_no_statistic_results_yet": "There are no statistic results yet",
@@ -240,13 +240,11 @@ const en = {
   "The_day_before_yesterday": "The day before yesterday",
   "Can_not_compare_with_{var}": "Can not compare with {var}",
   "Number": "Number",
-  "Label_settings": "Label settings",
-  'polylines': 'Polylines',
-  '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',
-  "Search_records": "Search records"
+  "polylines": "Polylines",
+  "curves": "Curves",
+  "Line_type": "Line type",
+  "Summarize_description": "Calculate the sum, maximum, minimum or average 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"
 };
 export default en;

package/dist/locale/lang/es.js

@@ -64,6 +64,7 @@ const es = {
   "Column_grouping_field": "Column grouping field",
   "Date_range": "Date range",
   "Compare_to_date_range": "Compare to date range",
+  "Increase": "Increase",
   "Display_increase": "Display increase",
   "Display_percentage_increase": "Display percentage increase",
   "Color": "Color",
@@ -82,6 +83,7 @@ const es = {
   "Calculate_the_number_of_records_in_two_time_periods": "Calculate the number of records in two time periods",
   "Use_a_field_to_calculate_the_sum_maximum_or_minimum_value_of_records_in_two_time_periods": "Use a field to calculate the sum maximum or minimum value of records in two time periods",
   "No_options": "No options",
+  "Alignment": "Alignment",
   "Text_horizontal_alignment": "Text horizontal alignment",
   "Please_input_date": "Please input date",
   "Filter": "Filter",
@@ -237,8 +239,7 @@ const es = {
   "Previous_30_days": "Previous 30 days",
   "The_day_before_yesterday": "The day before yesterday",
   "Can_not_compare_with_{var}": "Can not compare with {var}",
-  "Number_settings": "Number settings",
-  "Label_settings": "Label settings",
+  "Number": "Number",
   "polylines": "Polylines",
   "curves": "Curves",
   "Line_type": "Line type",

package/dist/locale/lang/fr.js

@@ -39,7 +39,7 @@ const fr = {
   "Auto_range": "Limites automatiques",
   "Select_a_column": "Sélectionner une colonne",
   "Summary_method": "Méthode de résumé",
-  "Label": "Label",
+  "Label": "Étiquette",
   "Y-axis(left side)": "Axe des y (primaire)",
   "Y-axis(right side)": "Axe des y (secondaire)",
   "Display_title": "Titre à afficher",
@@ -64,6 +64,7 @@ const fr = {
   "Column_grouping_field": "Champ pour le groupement de colonnes",
   "Date_range": "Période",
   "Compare_to_date_range": "Comparer à une période de temps",
+  "Increase": "Augmenter",
   "Display_increase": "Afficher le changement total",
   "Display_percentage_increase": "Afficher le changement en pourcentage",
   "Color": "Couleur",
@@ -82,6 +83,7 @@ const fr = {
   "Calculate_the_number_of_records_in_two_time_periods": "Calculer le nombre d'enregistrements pour deux périodes de temps",
   "Use_a_field_to_calculate_the_sum_maximum_or_minimum_value_of_records_in_two_time_periods": "Utiliser une colonne pour calculer la somme, le maximum, le minimum ou la moyenne des enregistrements pour deux périodes de temps",
   "No_options": "Il n'y a pas d'options.",
+  "Alignment": "Alignment",
   "Text_horizontal_alignment": "Alignement de texte horizontal",
   "Please_input_date": "Veuillez entrer la date",
   "Filter": "Filtrer",
@@ -111,8 +113,8 @@ const fr = {
   "Pie_chart": "Graphique circulaire",
   "Basic_pie_chart": "Graphique circulaire simple",
   "Ring_chart": "Graphique en anneau",
-  "Scatter_chart": "Scatter chart",
-  "Combination_chart": "Combination chart",
+  "Scatter_chart": "Graphique en nuage de points",
+  "Combination_chart": "Graphique combiné",
   "Map": "Carte",
   "World_map": "Planisphère",
   "World_map_bubble": "Planisphère (Graphique à bulles)",
@@ -193,12 +195,12 @@ const fr = {
   "Geo_column_not_found": "La colonne géolocalisation n'a pas été trouvée.",
   "Summary_column_not_found": "La colonne de résumé n'a pas été trouvée.",
   "Total_column_not_found": "La colonne pour le total n'a pas été trouvée.",
-  "Total_summary_method_is_not_valid": "Total summary method is not valid",
+  "Total_summary_method_is_not_valid": "La méthode de résumé total n'est pas valide.",
   "Y_axis_column_not_found": "La colonne pour l'axe des y n'a pas été trouvée.",
   "Numeric_column_not_found": "La colonne numérique n'a pas été trouvée.",
   "Target_column_not_found": "La colonne cible n'a pas été trouvée",
   "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": "La méthode de résumé cible n'est pas valide.",
   "Grid_size": "Taille de la grille\n",
   "Grid_distance": "Ecart entre les grilles",
   "Sun": "dim.",
@@ -237,12 +239,11 @@ const fr = {
   "Previous_30_days": "30 jours précédents",
   "The_day_before_yesterday": "Avant-hier",
   "Can_not_compare_with_{var}": "Il est impossible de comparer avec {var}.",
-  "Number_settings": "Paramètres de nombres",
-  "Label_settings": "Paramètres des étiquettes",
+  "Number": "Number",
   "polylines": "Ligne polygonale",
   "curves": "Courbes",
   "Line_type": "Type de ligne",
-  "Summarize_description": "Calculate the sum, maximum, minimum or average of records based on a field",
+  "Summarize_description": "Calculer la somme, le maximum, le minimum our la moyenne pour les enregistrements en fonction d'un champ",
   "Count_description": "Compter les enregistrements basé sur les paramètres de données",
   "Display_empty_when_data_is_zero": "Afficher la valeur 0 comme valeur vide"
 };

package/dist/locale/lang/pt.js

@@ -64,6 +64,7 @@ const pt = {
   "Column_grouping_field": "Column grouping field",
   "Date_range": "Date range",
   "Compare_to_date_range": "Compare to date range",
+  "Increase": "Increase",
   "Display_increase": "Display increase",
   "Display_percentage_increase": "Display percentage increase",
   "Color": "Color",
@@ -82,6 +83,7 @@ const pt = {
   "Calculate_the_number_of_records_in_two_time_periods": "Calculate the number of records in two time periods",
   "Use_a_field_to_calculate_the_sum_maximum_or_minimum_value_of_records_in_two_time_periods": "Use a field to calculate the sum maximum or minimum value of records in two time periods",
   "No_options": "No options",
+  "Alignment": "Alignment",
   "Text_horizontal_alignment": "Text horizontal alignment",
   "Please_input_date": "Please input date",
   "Filter": "Filter",
@@ -237,8 +239,7 @@ const pt = {
   "Previous_30_days": "Previous 30 days",
   "The_day_before_yesterday": "The day before yesterday",
   "Can_not_compare_with_{var}": "Can not compare with {var}",
-  "Number_settings": "Number settings",
-  "Label_settings": "Label settings",
+  "Number": "Number",
   "polylines": "Polylines",
   "curves": "Curves",
   "Line_type": "Line type",

package/dist/locale/lang/ru.js

@@ -64,6 +64,7 @@ const ru = {
   "Column_grouping_field": "Column grouping field",
   "Date_range": "Date range",
   "Compare_to_date_range": "Compare to date range",
+  "Increase": "Увеличивать",
   "Display_increase": "Display increase",
   "Display_percentage_increase": "Display percentage increase",
   "Color": "Color",
@@ -82,6 +83,7 @@ const ru = {
   "Calculate_the_number_of_records_in_two_time_periods": "Calculate the number of records in two time periods",
   "Use_a_field_to_calculate_the_sum_maximum_or_minimum_value_of_records_in_two_time_periods": "Use a field to calculate the sum maximum or minimum value of records in two time periods",
   "No_options": "No options",
+  "Alignment": "Alignment",
   "Text_horizontal_alignment": "Text horizontal alignment",
   "Please_input_date": "Please input date",
   "Filter": "Filter",
@@ -237,8 +239,7 @@ const ru = {
   "Previous_30_days": "Previous 30 days",
   "The_day_before_yesterday": "The day before yesterday",
   "Can_not_compare_with_{var}": "Can not compare with {var}",
-  "Number_settings": "Number settings",
-  "Label_settings": "Label settings",
+  "Number": "Number",
   "polylines": "Polylines",
   "curves": "Curves",
   "Line_type": "Line type",

package/dist/locale/lang/zh_CN.js

@@ -64,6 +64,7 @@ const zh_CN = {
   "Column_grouping_field": "列分组字段",
   "Date_range": "日期范围",
   "Compare_to_date_range": "对比日期范围",
+  "Increase": "增幅",
   "Display_increase": "显示增幅",
   "Display_percentage_increase": "显示百分比增幅",
   "Color": "颜色",
@@ -82,7 +83,7 @@ const zh_CN = {
   "Calculate_the_number_of_records_in_two_time_periods": "计算两个时间段的记录数",
   "Use_a_field_to_calculate_the_sum_maximum_or_minimum_value_of_records_in_two_time_periods": "使用字段计算两个时间段内记录的最大值或最小值之和",
   "No_options": "没有选项",
-  "Alignment": "对齐方式",
+  "Alignment": "Alignment",
   "Text_horizontal_alignment": "文本水平对齐",
   "Please_input_date": "请输入日期",
   "Filter": "过滤",
@@ -130,7 +131,6 @@ const zh_CN = {
   "Title": "标题",
   "Custom_title": "自定义标题",
   "Edit_type": "编辑类型",
-  "All_charts": "所有图表",
   "Cancel": "取消",
   "Submit": "提交",
   "There_are_no_statistic_results_yet": "目前还没有统计结果",
@@ -239,14 +239,12 @@ const zh_CN = {
   "Previous_30_days": "之前 30 天",
   "The_day_before_yesterday": "前天",
   "Can_not_compare_with_{var}": "无法和 {var} 比较",
-  "Number": "数字",
-  "Label_settings": "标签设置",
-  'polylines': '折线',
-  'curves': '曲线',
-  'Line_type': '线型',
-  'Summarize_description': '按照一个字段计算记录的总和、最大值、最小值或者平均值',
-  'Count_description': '根据数据设置计算记录数量',
-  'Display_empty_when_data_is_zero': '数据为零时留空',
-  "Search_records": "搜索记录"
+  "Number": "Number",
+  "polylines": "折线",
+  "curves": "曲线",
+  "Line_type": "线型",
+  "Summarize_description": "按照一个字段计算记录的总和、最大值、最小值或者平均值",
+  "Count_description": "根据数据设置计算记录数量",
+  "Display_empty_when_data_is_zero": "数据为零时留空"
 };
 export default zh_CN;

package/dist/settings/time-comparison-settings/data-settings.js

@@ -7,7 +7,6 @@ import Divider from '../widgets/divider';
 import GroupBy from '../widgets/group-by';
 import BasicSummary from '../widgets/basic-summary';
 import TimePicker from '../widgets/time-picker';
-import { eventStopPropagation } from '../../utils';
 import { CHART_SUMMARY_TYPE, GEOLOCATION_FORMAT_CITY, GEOLOCATION_FORMAT_MAP } from '../../constants';
 import intl from '../../intl';
 import '../../assets/css/time-picker.css';
@@ -96,17 +95,16 @@ const DataSettings = _ref => {
     });
   }, [chart, onChange]);
   const onDisplayIncreaseChange = useCallback(event => {
-    eventStopPropagation(event);
-    const {
-      config
-    } = chart;
-    const {
-      display_increase
-    } = config;
     onChange && onChange({
-      display_increase: !display_increase
+      display_increase: event.target.checked
     });
-  }, [chart, onChange]);
+  }, [onChange]);
+
+  // const [checked, setChecked] = useState(false);
+  // function onDisplayIncreaseChange(e) {
+  //   setChecked(e.target.checked);
+  // }
+
   const {
     table_id,
     x_axis_column_key,
@@ -167,7 +165,7 @@ const DataSettings = _ref => {
     tables: tables,
     onChange: onChange
   }), /*#__PURE__*/React.createElement(Divider, null), /*#__PURE__*/React.createElement(_DTableSwitch, {
-    checked: display_increase || false,
+    checked: display_increase,
     placeholder: intl.get('Display_increase'),
     onChange: onDisplayIncreaseChange
   }));

package/dist/settings/time-comparison-settings/style-settings.js

@@ -83,10 +83,10 @@ const StyleSettings = _ref => {
       config
     } = chart;
     const {
-      display_increase_percentage
+      display_increase
     } = config;
     onChange && onChange({
-      display_increase_percentage: !display_increase_percentage
+      display_increase: !display_increase
     });
   }, [chart, onChange]);
   const onIncreaseDisplayColorChang = useCallback((event, value) => {
@@ -173,8 +173,8 @@ const StyleSettings = _ref => {
       onMaxChange: onYAxisMaxChange
     })))
   }), /*#__PURE__*/React.createElement(Divider, null), /*#__PURE__*/React.createElement(DisplayValuesSettings, {
-    isShowValueKey: "y_axis_show_value",
-    isShowValue: y_axis_show_value,
+    isShowValueKey: "display_increase_percentage",
+    isShowValue: display_increase_percentage,
     fontSizeKey: "label_font_size",
     fontSize: label_font_size,
     onChange: onDisplayValueChange

package/dist/view/wrapper/combination.js

@@ -310,10 +310,6 @@ class Combination extends ChartComponent {
       this.chart.on('interval:mouseenter', e => {
         if (this.isInsideInterval) return;
         this.isInsideInterval = true;
-        // point.style({
-        //   stroke: 0,
-        //   fillOpacity: 0.3,
-        // });
         interval.style('name*value_left', (name, value) => {
           const isHovered = value === e.data.data.value_left && name === e.data.data.name;
           return {
@@ -345,10 +341,6 @@ class Combination extends ChartComponent {
       this.chart.on('interval:mouseleave', e => {
         if (!this.isInsideInterval) return;
         this.isInsideInterval = false;
-        // point.style({
-        //   stroke: 0,
-        //   fillOpacity: 1,
-        // });
         interval.style('name*value_left', (name, value) => {
           return {
             fillOpacity: 1,
@@ -385,7 +377,7 @@ class Combination extends ChartComponent {
           };
         });
         this.chart.render(true);
-      }, 10));
+      }, 100));
       this.chart.on('point:mouseleave', throttle(e => {
         if (!this.isInsidePoint) return;
         this.isInsidePoint = false;

package/dist/view/wrapper/compare.js

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { getTableById, getTableColumnByKey, getNumberDisplayString } from 'dtable-utils';
+import { maxBy, throttle } from 'lodash-es';
 import { CHART_SUMMARY_TYPE, CHART_SUMMARY_SHOW, DEFAULT_NUMBER_FORMAT_OBJECT, EMPTY_NAME, TITLE_AMOUNT, TITLE_INCREASE, CHART_THEME_COLOR } from '../../constants';
 import { BaseUtils } from '../../utils/chart-utils';
 import intl from '../../intl';
@@ -51,6 +52,7 @@ class Compare extends ChartComponent {
         y_axis_summary_type,
         y_axis_column_key,
         y_axis_summary_method,
+        summaryColumn,
         display_data,
         label_font_size,
         display_increase
@@ -61,10 +63,13 @@ class Compare extends ChartComponent {
         const summaryColumn = getTableColumnByKey(table, y_axis_column_key) || {};
         summaryColumnData = summaryColumn.data || DEFAULT_NUMBER_FORMAT_OBJECT;
       }
+
+      // x axis
       const {
         width
       } = this.chart.coordinateBBox;
       const chartData = this.getChartGroupData(data);
+      this.labelCount = chartData.length;
       const ticks = this.getChartDisplayLabels(width, 20, chartData);
       if (ticks.length > 0) {
         this.chart.scale('name', {
@@ -80,7 +85,15 @@ class Compare extends ChartComponent {
           type: 'cat'
         }
       });
-      this.chart.interval().label(display_data ? 'formatted_value' : false, {
+
+      // set the single bar width and radius
+      let singleBarWidth, singleBarRadius;
+      // y-axis label width：6 + 10
+      const chartWidth = this.chart.width - 6 - 10;
+      const maxCountGroup = maxBy(chartData, 'currentGroupCount');
+      singleBarWidth = Math.round(chartWidth / (2 * chartData.length * maxCountGroup.currentGroupCount));
+      singleBarRadius = Math.min(singleBarWidth / 5, 10);
+      const interval = this.chart.interval().label(display_data ? 'formatted_value' : false, {
         style: {
           fontSize: BaseUtils.getLabelFontSize(label_font_size),
           fill: theme.textColor,
@@ -95,23 +108,97 @@ class Compare extends ChartComponent {
           title: titleContent,
           name: nameContent
         };
-      }).adjust('dodge').state({
+      }).adjust({
+        type: 'dodge',
+        marginRatio: 0
+      }).state({
         active: {
           style: {
             stroke: null
           }
         }
+      }).style({
+        radius: [singleBarRadius, singleBarRadius, 0, 0]
       });
-      this.setNameLabelAndTooltip(theme, this.labelCount);
       if (display_increase) {
         this.drawIncreaseLine({
           theme
         });
       }
-      this.setAxis(theme);
-      this.setLegend('group_name', theme);
-      this.chart.interaction('active-region');
-      this.chart.removeInteraction('legend-filter');
+      this.chart.on('interval:mouseenter', e => {
+        if (this.isInsideInterval) return;
+        this.isInsideInterval = true;
+        this.setToolTipForInterval();
+        interval.style('name*value', (name, value) => {
+          const isHovered = name === e.data.data.name;
+          return {
+            fillOpacity: isHovered ? 1 : 0.3,
+            radius: [singleBarRadius, singleBarRadius, 0, 0]
+          };
+        });
+        interval.tooltip('name*formatted_value*raw_name', (name, value, raw_name) => {
+          const nameContent = !raw_name && typeof raw_name !== 'number' ? intl.get(EMPTY_NAME) : raw_name;
+          const titleContent = y_axis_summary_type === 'count' ? intl.get(TITLE_AMOUNT) : intl.get(CHART_SUMMARY_SHOW[y_axis_summary_method]);
+          return {
+            value,
+            title: titleContent,
+            name: nameContent
+          };
+        });
+        this.point && this.point.tooltip(false);
+        this.chart.render(true);
+      });
+      this.chart.on('interval:mouseleave', e => {
+        if (!this.isInsideInterval) return;
+        this.isInsideInterval = false;
+        this.setToolTipForLine();
+        interval.style('name*value', () => {
+          return {
+            fillOpacity: 1,
+            radius: [singleBarRadius, singleBarRadius, 0, 0]
+          };
+        });
+        this.point && this.point.tooltip('name*increase_value', (name, value) => {
+          return {
+            title: intl.get(TITLE_INCREASE),
+            value: getNumberDisplayString(value || 0, {
+              format: 'percent'
+            }),
+            name: !name && typeof name !== 'number' ? intl.get(EMPTY_NAME) : name
+          };
+        });
+        interval.tooltip(false);
+        this.chart.render(true);
+      });
+      this.setColorMap(data, chartColorTheme);
+      this.formatDataByName(data);
+      this.setToolTip(true, summaryColumn, y_axis_summary_method);
+      this.setLegend('group_name', theme, 'top-right');
+
+      // x and y
+      this.setNameLabelAndTooltip(theme, this.labelCount);
+      this.setValueLabel(theme);
+    };
+    this.setToolTipForInterval = () => {
+      const {
+        chart,
+        summaryColumn
+      } = this.props;
+      const {
+        y_axis_summary_method
+      } = chart.config;
+      this.setToolTip(true, summaryColumn, y_axis_summary_method);
+    };
+    this.setToolTipForLine = () => {
+      const {
+        chart,
+        summaryColumn
+      } = this.props;
+      const {
+        y_axis_summary_method
+      } = chart.config;
+      const settings = this.getToolTipSettings(false, summaryColumn, y_axis_summary_method);
+      this.chart.tooltip(settings);
     };
     this.drawIncreaseLine = _ref => {
       let {
@@ -122,27 +209,35 @@ class Compare extends ChartComponent {
       } = this.props;
       const {
         increase_line_color,
-        display_increase_percentage
+        display_increase_percentage,
+        label_font_size
       } = chart.config;
-      this.chart.line().position('name*increase_value').size(3).color(increase_line_color || '#fbd44a').shape('smooth').tooltip('name*increase_value', (name, value) => {
-        return {
-          title: intl.get(TITLE_INCREASE),
-          value: getNumberDisplayString(value || 0, {
-            format: 'percent'
-          }),
-          name: !name && typeof name !== 'number' ? intl.get(EMPTY_NAME) : name
-        };
-      });
-      this.chart.point().label(display_increase_percentage ? 'increase_value' : false, value => {
+      this.chart.line().position('name*increase_value').color(increase_line_color || '#fbd44a').shape('smooth').style({
+        lineWidth: 2,
+        opacity: 1
+      }).tooltip(false);
+      const point = this.chart.point().label(display_increase_percentage ? 'increase_value' : false, value => {
         return {
           content: getNumberDisplayString(value || 0, {
             format: 'percent'
           }),
           style: {
-            fill: theme.textColor
+            fontSize: BaseUtils.getLabelFontSize(label_font_size),
+            fill: theme.labelColor,
+            stroke: '#fff',
+            lineWidth: 1
           }
         };
-      }).color(increase_line_color || '#fbd44a').position('name*increase_value').size(3).tooltip('name*increase_value', (name, value) => {
+      }).color(increase_line_color || '#fbd44a').animate({
+        appear: {
+          animation: 'fadeIn',
+          duration: 1000,
+          easing: 'easeLinear'
+        }
+      }).position('name*increase_value').shape('circle').size(3).style({
+        stroke: 0,
+        fillOpacity: 1
+      }).tooltip('name*increase_value', (name, value) => {
         return {
           title: intl.get(TITLE_INCREASE),
           value: getNumberDisplayString(value || 0, {
@@ -151,39 +246,41 @@ class Compare extends ChartComponent {
           name: !name && typeof name !== 'number' ? intl.get(EMPTY_NAME) : name
         };
       });
+      this.chart.on('point:mouseenter', throttle(e => {
+        if (this.isInsidePoint) return;
+        this.isInsidePoint = true;
+        point.style('name', name => {
+          let r = 3;
+          if (name === e.data.data.name) {
+            r = 5;
+          }
+          return {
+            r,
+            stroke: 0,
+            fillOpacity: 1
+          };
+        });
+        this.chart.render(true);
+      }, 100));
+      this.chart.on('point:mouseleave', throttle(e => {
+        if (!this.isInsidePoint) return;
+        this.isInsidePoint = false;
+        point.style('name', name => {
+          let r = 3;
+          return {
+            r,
+            stroke: 0,
+            fillOpacity: 1
+          };
+        });
+        this.chart.render(true);
+      }, 100));
+      this.point = point;
       this.chart.axis('increase_value', {
         label: null,
         grid: null
       });
     };
-    this.setAxis = theme => {
-      this.chart.axis('name', {
-        line: {
-          style: theme.gridColor
-        },
-        label: {
-          autoRotate: true,
-          style: {
-            fill: theme.textColor
-          },
-          formatter: this.labelFormatter
-        }
-      });
-      this.chart.axis('value', {
-        label: {
-          style: {
-            fill: theme.textColor
-          }
-        },
-        grid: {
-          line: {
-            style: {
-              stroke: theme.gridColor
-            }
-          }
-        }
-      });
-    };
     this.handleAutoRange = (data, summaryColumnData) => {
       const {
         chart

package/package.json

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