sea-chart 0.0.26 → 0.0.28-beta

package/dist/components/loading/index.css

@@ -36,6 +36,12 @@
   }
 }
 
+.loading {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
 .loading-icon {
   display: inline-block;
   width: 20px;

package/dist/intl.js

@@ -4,15 +4,15 @@ class Intl {
   constructor(_ref) {
     var _this = this;
     let {
-      lang: _lang = 'zh_CN'
+      lang: _lang = 'zh-cn'
     } = _ref;
     this.setLang = function () {
-      let lang = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'zh_CN';
+      let lang = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'zh-cn';
       const validLang = lang.toLowerCase();
+      setLocale(validLang);
       if (validLang === _this.lang) return;
       _this.lang = validLang;
-      _this.translation = LOCALES[_this.lang] || LOCALES['zh_CN'];
-      setLocale(validLang);
+      _this.translation = LOCALES[_this.lang] || LOCALES['zh-cn'];
     };
     this.get = function (key) {
       let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
@@ -30,10 +30,10 @@ class Intl {
       }) || key;
     };
     this.lang = _lang.toLowerCase();
-    this.translation = LOCALES[this.lang] || LOCALES['zh_CN'];
+    this.translation = LOCALES[this.lang] || LOCALES['zh-cn'];
   }
 }
 const intl = new Intl({
-  lang: 'zh_CN'
+  lang: 'zh-cn'
 });
 export default intl;

package/dist/locale/lang/de.js

@@ -165,6 +165,9 @@ const de = {
   'Target_summary_method_is_not_valid': 'Target summary method is not valid',
   'polylines': 'Polylines',
   'curves': 'Curves',
-  'Line_type': 'Line type'
+  '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'
 };
 export default de;

package/dist/locale/lang/en.js

@@ -242,6 +242,10 @@ const en = {
   "Label_settings": "Label settings",
   'polylines': 'Polylines',
   'curves': 'Curves',
-  'Line_type': 'Line type'
+  'Line_type': 'Line type',
+  'Summarize_description': 'Count the sum, maximum, minimum, average, or number of distinct values of records based on a field',
+  'Count_description': 'Count the number of records based on  data settings',
+  'Display_empty_when_data_is_zero': 'Display empty when data is zero',
+  'Count_description': 'Count the number of records based on  data settings'
 };
 export default en;

package/dist/locale/lang/es.js

@@ -165,6 +165,10 @@ const es = {
   'Target_summary_method_is_not_valid': 'Target summary method is not valid',
   'polylines': 'Polylines',
   'curves': 'Curves',
-  'Line_type': 'Line type'
+  'Line_type': 'Line type',
+  'Summarize_description': 'Count the sum, maximum, minimum, average, or number of distinct values of records based on a field',
+  'Count_description': 'Count the number of records based on  data settings',
+  'Display_empty_when_data_is_zero': 'Display empty when data is zero',
+  'Count_description': 'Count the number of records based on  data settings'
 };
 export default es;

package/dist/locale/lang/fr.js

@@ -165,6 +165,10 @@ const fr = {
   'Target_summary_method_is_not_valid': 'Target summary method is not valid',
   'polylines': 'Polylines',
   'curves': 'Curves',
-  'Line_type': 'Line type'
+  'Line_type': 'Line type',
+  'Summarize_description': 'Count the sum, maximum, minimum, average, or number of distinct values of records based on a field',
+  'Count_description': 'Count the number of records based on  data settings',
+  'Display_empty_when_data_is_zero': 'Display empty when data is zero',
+  'Count_description': 'Count the number of records based on  data settings'
 };
 export default fr;

package/dist/locale/lang/pt.js

@@ -165,6 +165,10 @@ const pt = {
   'Target_summary_method_is_not_valid': 'Target summary method is not valid',
   'polylines': 'Polylines',
   'curves': 'Curves',
-  'Line_type': 'Line type'
+  'Line_type': 'Line type',
+  'Summarize_description': 'Count the sum, maximum, minimum, average, or number of distinct values of records based on a field',
+  'Count_description': 'Count the number of records based on  data settings',
+  'Display_empty_when_data_is_zero': 'Display empty when data is zero',
+  'Count_description': 'Count the number of records based on  data settings'
 };
 export default pt;

package/dist/locale/lang/ru.js

@@ -165,6 +165,10 @@ const ru = {
   'Target_summary_method_is_not_valid': 'Target summary method is not valid',
   'polylines': 'Polylines',
   'curves': 'Curves',
-  'Line_type': 'Line type'
+  'Line_type': 'Line type',
+  'Summarize_description': 'Count the sum, maximum, minimum, average, or number of distinct values of records based on a field',
+  'Count_description': 'Count the number of records based on  data settings',
+  'Display_empty_when_data_is_zero': 'Display empty when data is zero',
+  'Count_description': 'Count the number of records based on  data settings'
 };
 export default ru;

package/dist/locale/lang/zh_CN.js

@@ -242,6 +242,10 @@ const zh_CN = {
   "Label_settings": "标签设置",
   'polylines': '折线',
   'curves': '曲线',
-  'Line_type': '线型'
+  'Line_type': '线型',
+  'Summarize_description': '按照一个字段计算记录的总和、最大值、最小值或者平均值',
+  'Count_description': '根据数据设置计算记录数量',
+  'Display_empty_when_data_is_zero': '数据为零时留空',
+  'Count_description': '根据数据设置计算记录数量'
 };
 export default zh_CN;

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

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

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

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

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

@@ -503,7 +503,8 @@ const DataSettings = _ref => {
     column_groupby_column_key,
     column_groupby_date_granularity,
     column_groupby_geolocation_granularity,
-    display_total = true
+    display_total = true,
+    display_empty
   } = config;
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CommonDataSettings, {
     chart: chart,
@@ -562,6 +563,20 @@ const DataSettings = _ref => {
         display_total: !display_total
       });
     }
+  })), /*#__PURE__*/React.createElement(Divider, {
+    className: "mt-4"
+  }), /*#__PURE__*/React.createElement(FormGroup, {
+    className: "sea-chart-parameter-item"
+  }, /*#__PURE__*/React.createElement(DTableSwitch, {
+    switchClassName: "display-value-settings",
+    checked: display_empty || false,
+    disabled: false,
+    placeholder: intl.get('Display_empty_when_data_is_zero'),
+    onChange: () => {
+      onChange({
+        display_empty: !display_empty
+      });
+    }
   })));
 };
 export default DataSettings;

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

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

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

@@ -2,7 +2,7 @@ var _class;
 import shallowEqual from 'shallowequal';
 import dayjs from 'dayjs';
 import { CellType, COLLABORATOR_COLUMN_TYPES, FORMULA_COLUMN_TYPES_MAP, FORMULA_RESULT_TYPE, getDateDisplayString, getNumberDisplayString, getOption, getPrecisionNumber, getTableById, getTableColumnByKey, isNumber, isNumericColumn, isDateColumn, sortText, sortNumber, sortDate, sortSingleSelect, sortFormula, getColumnOptions, DateUtils, getGeolocationDisplayString, getFormulaDisplayString } from 'dtable-utils';
-import { PIE_CHART_COLORS, CHART_SUMMARY_TYPE, CHART_SUPPORT_SORT_COLUMNS, CHART_TYPE, CHART_STYLE_SETTING_KEYS, DEFAULT_LABEL_FONT_SIZE, DEFAULT_NUMBER_FORMAT_OBJECT, X_AXIS_IS_GROUPBY_COLUMN_KEY_CHART_TYPES, STYLE_COLORS, CHART_DATA_SORT_TYPE } from '../../constants';
+import { PIE_CHART_COLORS, CHART_SUMMARY_TYPE, CHART_SUPPORT_SORT_COLUMNS, CHART_TYPE, CHART_STYLE_SETTING_KEYS, DEFAULT_LABEL_FONT_SIZE, DEFAULT_NUMBER_FORMAT_OBJECT, X_AXIS_IS_GROUPBY_COLUMN_KEY_CHART_TYPES, STYLE_COLORS, CHART_DATA_SORT_TYPE, CHART_Y_GROUP_TYPE } from '../../constants';
 import { getClientFormulaDisplayString } from '../cell-format-utils';
 import { getKnownCollaboratorByEmail, generateDefaultUser, getUsers } from '../collaborator-utils';
 import { getDateColumnFormat, getColumnByKey } from '../column-utils';
@@ -60,6 +60,10 @@ BaseUtils.isValidExistChart = (tables, chart) => {
   const table = getTableById(tables, table_id);
   if (!table) return false;
   if (config.type === CHART_TYPE.BASIC_NUMBER_CARD) {
+    const {
+      summary_type
+    } = config;
+    if (summary_type === CHART_Y_GROUP_TYPE.COUNT || !summary_type) return true;
     const numericColumnKey = config.numeric_column_key;
     if (!numericColumnKey) return false;
     return getTableColumnByKey(table, numericColumnKey);
@@ -207,8 +211,13 @@ BaseUtils.isSameGroup = (isColumnDataAsAnArray, source, target) => {
   }
   return source === null && target === null || source === undefined && target === undefined || source === target;
 };
-BaseUtils.isValidValue = value => {
-  if (value === 0) return true;
+BaseUtils.isValidValue = function (value) {
+  let display_empty = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  // convert str to number
+  if (value === '0') {
+    value = +value;
+  }
+  if (value === 0 && !display_empty) return true;
   return Boolean(value);
 };
 BaseUtils.getSummaryValueDisplayString = function (summaryColumn, summaryValue) {

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

@@ -1,9 +1,13 @@
+import context from '../../context';
 import BaseUtils from './base-utils';
 import SQLStatisticsUtils from './sql-statistics-utils';
 import OriginalDataUtils from './original-data-utils';
-import context from '../../context';
 class ChartUtils {}
 ChartUtils.calculateChart = (chart, value, callback) => {
+  if (!BaseUtils.isValidExistChart(value.tables, chart)) {
+    const tip_message = 'Please_complete_the_chart_configuration_first';
+    return callback && callback('', tip_message, null);
+  }
   context.queryChartResult({
     chart,
     tables: value.tables,

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

@@ -90,10 +90,11 @@ SQLStatisticsUtils.formatedTableSqlRows = (chart, sqlRows, chartSQLMap, columnMa
   const {
     config
   } = chart;
-  const {
+  let {
     sqlGroupbyColumnKey,
     sqlSummaryColumnKey,
-    summarySQLColumnName2ColumnKey
+    summarySQLColumnName2ColumnKey,
+    sqlColumnGroupbyColumnKey
   } = chartSQLMap;
   const newSqlRows = JSON.parse(JSON.stringify(sqlRows));
   if (config.summary_type === CHART_SUMMARY_TYPE.COUNT) {
@@ -126,7 +127,15 @@ SQLStatisticsUtils.formatedTableSqlRows = (chart, sqlRows, chartSQLMap, columnMa
     });
   }
   if (config.summary_type === CHART_SUMMARY_TYPE.ADVANCED) {
-    const summarySQLColumnName2ColumnKeys = Object.keys(summarySQLColumnName2ColumnKey);
+    let summarySQLColumnName2ColumnKeys;
+    if (summarySQLColumnName2ColumnKey) {
+      summarySQLColumnName2ColumnKeys = Object.keys(summarySQLColumnName2ColumnKey);
+    } else if (sqlColumnGroupbyColumnKey) {
+      summarySQLColumnName2ColumnKeys = [sqlColumnGroupbyColumnKey];
+    } else {
+      console.error('on formatedTableSqlRows: summarySQLColumnName2ColumnKey is null');
+      return [];
+    }
     sqlRows.forEach((item, index) => {
       const collaborators = item[sqlGroupbyColumnKey];
       // Multiple collaborators

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

@@ -1,6 +1,6 @@
 import { CellType, filter2SqlCondition, isNumericColumn, isDateColumn } from 'dtable-utils';
 import { getSqlGroup } from '../column-utils';
-import { CHART_TYPE, DTABLE_DB_SUMMARY_METHOD, CHART_SUMMARY_TYPE, TIME_COLUMN_LIST, Y_AXIS_TYPE_PREFIX } from '../../constants';
+import { CHART_TYPE, DTABLE_DB_SUMMARY_METHOD, CHART_SUMMARY_TYPE, TIME_COLUMN_LIST, Y_AXIS_TYPE_PREFIX, CHART_Y_GROUP_TYPE } from '../../constants';
 import { fixGeoGranularity } from '../map';
 
 /*
@@ -678,6 +678,10 @@ class ChartDataSQL {
       return "SELECT ".concat(groupby_column_name, " FROM ").concat(this.table_name, " ").concat(this.filter_sql, " GROUP BY ").concat(groupby_column_name, " LIMIT 0, 5000");
     };
     this._basic_number_card_chart_statistic_2_sql = () => {
+      const summary_type = this.chart['summary_type'];
+      if (summary_type === CHART_Y_GROUP_TYPE.COUNT) {
+        return "SELECT COUNT(*) FROM ".concat(this.table_name, " ").concat(this.filter_sql, " LIMIT 0, 5000");
+      }
       const numeric_column_key = this.chart['numeric_column_key'] || '';
       let summary_method = this.chart['summary_method'] || '';
       const numeric_column = this._get_column_by_key(numeric_column_key);

package/dist/view/index.css

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

package/dist/view/index.js

@@ -78,7 +78,7 @@ class View extends React.PureComponent {
       tipMessage: ''
     };
     context.init(props);
-    const lang = context.getSetting('lang') || 'zh_CN';
+    const lang = context.getSetting('lang') || 'zh-cn';
     intl.setLang(lang);
   }
   componentDidMount() {

package/dist/view/wrapper/area.js

@@ -101,7 +101,9 @@ class Area extends ChartComponent {
       const line = this.chart.line().label(y_axis_show_value ? 'value' : false, {
         style: {
           fontSize: BaseUtils.getLabelFontSize(label_font_size),
-          fill: theme.labelColor
+          fill: theme.labelColor,
+          stroke: '#fff',
+          lineWidth: 1
         }
       }).position('name*value').animate({
         appear: {

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

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import DataSet from '@antv/data-set';
 import { getNumberDisplayString } from 'dtable-utils';
-import { debounce, maxBy } from 'lodash-es';
+import { debounce, maxBy, throttle } from 'lodash-es';
 import classNames from 'classnames';
 import intl from '../../intl';
 import { sortDataByGroupSum } from '../../utils/column-utils';
@@ -76,23 +76,21 @@ class BarGroup extends ChartComponent {
         display_each_block_data,
         y_axis_summary_type
       } = chart.config;
-      const isGroup = type === CHART_TYPE.BAR_GROUP ? true : false;
+      const isGroup = type === CHART_TYPE.BAR_GROUP;
       const chartBarColor = this.groupName;
       const newData = this.getChartGroupData(data);
       let singleBarWidth, singleBarRadius;
+      // y-axis label width：6 + 10
+      const chartWidth = this.chart.width - 6 - 10;
       if (!isGroup) {
-        // y-axis label width：6 + 10
-        const chartWidth = this.chart.width - 6 - 10;
         singleBarWidth = Math.round(chartWidth / (2 * newData.length));
-        singleBarRadius = singleBarWidth / 5;
         this.markFirstOrLast(data, 'first');
       } else {
         const maxCountGroup = maxBy(newData, 'currentGroupCount');
         // y-axis label width：6 + 10
-        const chartWidth = this.chart.width - 6 - 10;
         singleBarWidth = Math.round(chartWidth / (2 * newData.length * maxCountGroup.currentGroupCount));
-        singleBarRadius = singleBarWidth / 5;
       }
+      singleBarRadius = singleBarWidth / 5;
       this.drawLabels(newData);
       // set Coord type
       this.chart.coordinate('rect');
@@ -140,16 +138,29 @@ class BarGroup extends ChartComponent {
         type: 'dodge',
         marginRatio: 0
       };
-      this.chart.interval().label(y_axis_show_value ? 'value' : false, {
-        formatter: value => {
-          return value;
+      this.setColorMap(data);
+      this.chart.interval().animate({
+        // custom update animation
+        update: {
+          animation: 'fadeIn',
+          duration: 1000,
+          easing: 'easeLinear'
+        }
+      }).label(y_axis_show_value ? 'value' : false, {
+        content: data => {
+          if (this.currentName) {
+            return data.name === this.currentName ? data.value : '';
+          }
+          return data.value;
         },
         style: {
           fontSize: BaseUtils.getLabelFontSize(label_font_size),
           fill: theme.labelColor
         },
         position: type === CHART_TYPE.BAR_STACK ? 'middle' : ''
-      }).position('name*value').size(singleBarWidth).color(chartBarColor).tooltip('name*value*group_name*raw_name', (name, value, group_name, raw_name) => {
+      }).position('name*value').size(singleBarWidth).color(chartBarColor, group_name => {
+        return this.colorMap[group_name];
+      }).tooltip('name*value*group_name*raw_name', (name, value, group_name, raw_name) => {
         return {
           title: !name && typeof name !== 'number' ? intl.get(EMPTY_NAME) : name,
           value: BaseUtils.getSummaryValueDisplayString(summaryColumn, value, y_axis_summary_method),
@@ -179,12 +190,28 @@ class BarGroup extends ChartComponent {
           };
         }
       });
-      this.setToolTip();
+      if (isGroup) {
+        this.formatDataByName(data);
+      }
+      this.setToolTip(isGroup, summaryColumn, y_axis_summary_method);
       isFunction(customRender) && customRender(this.chart);
       this.setNameLabelAndTooltip(theme, this.labelCount);
       this.setValueLabel(theme);
       this.setLegend(this.groupName, theme, 'top-right');
-      this.chart.interaction('element-highlight');
+      this.chart.interaction('element-highlight-by-x');
+      if (y_axis_show_value) {
+        this.chart.on('element:mouseenter', throttle(e => {
+          const currentName = e.data.data.name;
+          if (this.currentName && this.currentName === currentName) return;
+          this.currentName = currentName;
+          this.chart.render(true);
+        }, 500));
+        this.chart.on('element:mouseleave', throttle(e => {
+          if (!this.currentName) return;
+          this.currentName = null;
+          this.chart.render(true);
+        }, 500));
+      }
     };
     this.chart = null;
     this.groupName = 'group_name';

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

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

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

@@ -3,7 +3,7 @@ import { getTableById, getTableColumnByKey } from 'dtable-utils';
 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';
+import { CHART_TYPE, CHART_SUMMARY_TYPE, LABEL_POSITION_TYPE, CHART_THEME_COLOR, EMPTY_NAME, THEME_NAME_MAP, CHART_STYLE_COLORS } from '../../constants';
 import intl from '../../intl';
 export default class ChartComponent extends Component {
   constructor() {
@@ -413,8 +413,31 @@ export default class ChartComponent extends Component {
         }
       });
     };
-    this.getToolTipSettings = () => {
-      return {
+    this.setColorMap = data => {
+      let currentIdx = 0;
+      const colorMap = data.reduce((acc, cur) => {
+        if (cur.group_name && !acc[cur.group_name]) {
+          acc[cur.group_name] = CHART_STYLE_COLORS[currentIdx++ % CHART_STYLE_COLORS.length];
+        }
+        return acc;
+      }, {});
+      this.colorMap = colorMap;
+    };
+    this.formatDataByName = data => {
+      const formattedItems = {};
+      data.forEach(item => {
+        const {
+          name
+        } = item;
+        if (!formattedItems[name]) {
+          formattedItems[name] = [];
+        }
+        formattedItems[name].push(item);
+      });
+      this.formatedDataByName = formattedItems;
+    };
+    this.getToolTipSettings = (isGroup, summaryColumn, y_axis_summary_method) => {
+      const obj = {
         showMarkers: false,
         containerTpl: "<div class=\"g2-tooltip\">\n        <div class=\"g2-tooltip-title\">{title}</div>\n        <ul class=\"g2-tooltip-list\"></ul>\n      </div>",
         itemTpl: "<li class=\"g2-tooltip-list-item\">\n         <span class=\"g2-tooltip-marker\" style=\"background-color:{color};display:inline-block;\"></span>\n         <span class=\"g2-tooltip-name\">{name}</span>\n         <span class=\"g2-tooltip-value\">{value}</span>\n      </li>",
@@ -464,9 +487,25 @@ export default class ChartComponent extends Component {
           }
         }
       };
+      if (isGroup) {
+        obj.customItems = items => {
+          const activeItem = items[0];
+          const name = activeItem.data.name;
+          return this.formatedDataByName[name].map(item => {
+            return {
+              color: this.colorMap[item.group_name] || CHART_STYLE_COLORS[0],
+              data: item,
+              name: !item.group_name && typeof item.group_name !== 'number' ? intl.get(EMPTY_NAME) : item.group_name,
+              title: item.name,
+              value: BaseUtils.getSummaryValueDisplayString(summaryColumn, item.value, y_axis_summary_method)
+            };
+          });
+        };
+      }
+      return obj;
     };
-    this.setToolTip = () => {
-      const settings = this.getToolTipSettings();
+    this.setToolTip = (isGroup, summaryColumn, y_axis_summary_method) => {
+      const settings = this.getToolTipSettings(isGroup, summaryColumn, y_axis_summary_method);
       this.chart.tooltip(settings);
     };
     this.setToolTipForLine = () => {

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { debounce, maxBy } from 'lodash-es';
+import { debounce, maxBy, throttle } from 'lodash-es';
 import classNames from 'classnames';
 import { CHART_TYPE, EMPTY_NAME } from '../../constants';
 import { BaseUtils, isFunction } from '../../utils';
@@ -62,13 +62,14 @@ class HorizontalBarGroup extends HorizontalComponent {
         label_font_size,
         type
       } = chart.config;
+      const isGroup = type === CHART_TYPE.HORIZONTAL_GROUP_BAR;
       const chartBarColor = this.groupName;
       const newData = this.getChartGroupData(data);
       let singleBarWidth, singleBarRadius;
       // y-axis label width：(6 + 10)
       // topPadding and legend height
       const chartHeight = this.chart.height - 6 - 10 - this.chartTopPadding - 30;
-      if (type === CHART_TYPE.STACKED_HORIZONTAL_BAR) {
+      if (!isGroup) {
         singleBarWidth = Math.round(chartHeight / (2 * newData.length));
         this.markFirstOrLast(data, 'last');
       } else {
@@ -81,21 +82,34 @@ class HorizontalBarGroup extends HorizontalComponent {
       // set Coord type
       this.chart.coordinate('rect');
       this.autoAdjustDataOptions(chart, data, summaryColumn);
-      const adjust = type === CHART_TYPE.STACKED_HORIZONTAL_BAR ? {
+      const adjust = !isGroup ? {
         type: 'stack'
       } : {
         type: 'dodge',
         marginRatio: 0
       };
-      this.chart.interval().label(display_data ? 'value' : false, {
-        formatter: value => {
-          return value;
+      this.setColorMap(data);
+      this.chart.interval().animate({
+        // custom update animation
+        update: {
+          animation: 'fadeIn',
+          duration: 1000,
+          easing: 'easeLinear'
+        }
+      }).label(display_data ? 'value' : false, {
+        content: data => {
+          if (this.currentName) {
+            return data.name === this.currentName ? data.value : '';
+          }
+          return data.value;
         },
         style: {
           fontSize: BaseUtils.getLabelFontSize(label_font_size),
           fill: theme.labelColor
         }
-      }).position('name*value').size(singleBarWidth).color(chartBarColor).tooltip('name*value*group_name*raw_name', (name, value, group_name, raw_name) => {
+      }).position('name*value').size(singleBarWidth).color(chartBarColor, group_name => {
+        return this.colorMap[group_name];
+      }).tooltip('name*value*group_name*raw_name', (name, value, group_name, raw_name) => {
         return {
           title: !name && typeof name !== 'number' ? intl.get(EMPTY_NAME) : name,
           value: BaseUtils.getSummaryValueDisplayString(summaryColumn, value, horizontal_axis_summary_method),
@@ -125,12 +139,28 @@ class HorizontalBarGroup extends HorizontalComponent {
           };
         }
       });
-      this.setToolTip();
+      if (isGroup) {
+        this.formatDataByName(data);
+      }
+      this.setToolTip(isGroup, summaryColumn, horizontal_axis_summary_method);
       this.setNameLabelAndTooltip(theme, this.labelCount);
       this.setValueLabel(theme);
       this.chart.coordinate().transpose();
       this.setLegend(this.groupName, theme, 'top-right');
-      this.chart.interaction('element-highlight');
+      this.chart.interaction('element-highlight-by-x');
+      if (display_data) {
+        this.chart.on('element:mouseenter', throttle(e => {
+          const currentName = e.data.data.name;
+          if (this.currentName && this.currentName === currentName) return;
+          this.currentName = currentName;
+          this.chart.render(true);
+        }, 500));
+        this.chart.on('element:mouseleave', throttle(e => {
+          if (!this.currentName) return;
+          this.currentName = null;
+          this.chart.render(true);
+        }, 500));
+      }
     };
     this.chart = null;
     this.groupName = 'group_name';

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

@@ -71,7 +71,9 @@ class LineGroup extends ChartComponent {
       const line = this.chart.line().label(y_axis_show_value ? 'value' : false, {
         style: {
           fontSize: BaseUtils.getLabelFontSize(label_font_size),
-          fill: theme.labelColor
+          fill: theme.labelColor,
+          stroke: '#fff',
+          lineWidth: 1
         }
       }).animate({
         appear: {

package/dist/view/wrapper/line.js

@@ -71,7 +71,9 @@ class Line extends ChartComponent {
       const line = this.chart.line().label(y_axis_show_value ? 'value' : false, {
         style: {
           fontSize: BaseUtils.getLabelFontSize(label_font_size),
-          fill: theme.labelColor
+          fill: theme.labelColor,
+          stroke: '#fff',
+          lineWidth: 1
         }
       }).animate({
         appear: {

package/dist/view/wrapper/table/index.js

@@ -1,9 +1,9 @@
 import React, { PureComponent } from 'react';
+import intl from '../../../intl';
+import { eventStopPropagation } from '../../../utils';
 import TwoDimensionTable from './two-dimension-table';
 import OneDimensionTableNoNumericColumns from './one-dimension-table-no-numeric-columns';
 import OneDimensionTableWithNumericColumns from './one-dimension-table-with-numeric-columns';
-import intl from '../../../intl';
-import { eventStopPropagation } from '../../../utils';
 import './index.css';
 class Table extends PureComponent {
   constructor() {

package/dist/view/wrapper/table/one-dimension-table-no-numeric-columns.js

@@ -1,8 +1,8 @@
 import React, { PureComponent } from 'react';
 import classnames from 'classnames';
-import PivotTableDisplayName from './pivot-table-display-name';
 import { BaseUtils, ObjectUtils } from '../../../utils';
 import intl from '../../../intl';
+import PivotTableDisplayName from './pivot-table-display-name';
 class OneDimensionTableNoNumericColumns extends PureComponent {
   constructor() {
     super(...arguments);
@@ -64,7 +64,8 @@ class OneDimensionTableNoNumericColumns extends PureComponent {
         chart
       } = this.props;
       const {
-        display_total = true
+        display_total = true,
+        display_empty
       } = chart.config;
       const {
         pivot_rows,
@@ -81,7 +82,7 @@ class OneDimensionTableNoNumericColumns extends PureComponent {
       // eslint-disable-next-line
       const total = ObjectUtils.hasOwnProperty(pivot_columns_total, 'total') ? pivot_columns_total['total'] : 0;
       const summaryDisplayValue = BaseUtils.getSummaryValueDisplayString(summaryColumn, total);
-      const isValidSummaryDisplayValue = BaseUtils.isValidValue(summaryDisplayValue);
+      const isValidSummaryDisplayValue = BaseUtils.isValidValue(summaryDisplayValue, display_empty);
       return /*#__PURE__*/React.createElement("tbody", null, pivotRowsLen > 0 && pivot_rows.map((rowItem, rowIdx) => {
         const {
           name,
@@ -95,7 +96,7 @@ class OneDimensionTableNoNumericColumns extends PureComponent {
         let isSelectedTotalCellLeft = selectRowIdx === rowIdx && selectedCellIdx === 0;
         pivotColumnCells[rowIdx] = rows;
         const totalDisplayValue = BaseUtils.getSummaryValueDisplayString(summaryColumn, total.total);
-        const isValidTotalDisplayValue = BaseUtils.isValidValue(totalDisplayValue);
+        const isValidTotalDisplayValue = BaseUtils.isValidValue(totalDisplayValue, display_empty);
         return /*#__PURE__*/React.createElement("tr", {
           key: 'table-row-' + rowIdx
         }, /*#__PURE__*/React.createElement("td", {

package/dist/view/wrapper/table/one-dimension-table-with-numeric-columns.js

@@ -1,8 +1,8 @@
 import React, { PureComponent } from 'react';
 import classnames from 'classnames';
-import PivotTableDisplayName from './pivot-table-display-name';
 import { BaseUtils } from '../../../utils';
 import intl from '../../../intl';
+import PivotTableDisplayName from './pivot-table-display-name';
 class OneDimensionTableWithNumericColumns extends PureComponent {
   constructor(_props) {
     super(_props);
@@ -91,7 +91,8 @@ class OneDimensionTableWithNumericColumns extends PureComponent {
         chart
       } = this.props;
       const {
-        display_total = true
+        display_total = true,
+        display_empty
       } = chart.config;
       const {
         pivot_rows,
@@ -133,7 +134,7 @@ class OneDimensionTableWithNumericColumns extends PureComponent {
           } = columnMap;
           const column = chartTableColumns.find(item => item.key === key);
           const displayValue = BaseUtils.getSummaryValueDisplayString(column, total[key], this.summaryColumnsMethodMap[key]);
-          const isValidDisplayValue = BaseUtils.isValidValue(displayValue);
+          const isValidDisplayValue = BaseUtils.isValidValue(displayValue, display_empty);
           if (Array.isArray(rows) && rows.length > 0) {
             if (pivotColumnCells[cellIdx]) {
               pivotColumnCells[cellIdx].push(...rows);
@@ -167,7 +168,7 @@ class OneDimensionTableWithNumericColumns extends PureComponent {
         const pivotColumnTotal = pivot_columns_total[c.key];
         const column = chartTableColumns.find(column => column.key === c.key);
         const totalDisplayValue = BaseUtils.getSummaryValueDisplayString(column, pivotColumnTotal, this.summaryColumnsMethodMap[c.key]);
-        const isValidTotalDisplayValue = BaseUtils.isValidValue(totalDisplayValue);
+        const isValidTotalDisplayValue = BaseUtils.isValidValue(totalDisplayValue, display_empty);
         const isSelectRowTotalCell = selectRowIdx === pivot_rows.length && selectedCellIdx === index;
         const isSelectRowTotalCellLeft = selectRowIdx === pivot_rows.length && selectedCellIdx - 1 === index;
         return /*#__PURE__*/React.createElement("td", {

package/dist/view/wrapper/table/two-dimension-table.js

@@ -1,8 +1,8 @@
 import React, { PureComponent } from 'react';
 import classnames from 'classnames';
-import PivotTableDisplayName from './pivot-table-display-name';
 import { BaseUtils } from '../../../utils';
 import intl from '../../../intl';
+import PivotTableDisplayName from './pivot-table-display-name';
 class TwoDimensionTable extends PureComponent {
   constructor() {
     super(...arguments);
@@ -108,7 +108,8 @@ class TwoDimensionTable extends PureComponent {
         chart
       } = this.props;
       const {
-        display_total = true
+        display_total = true,
+        display_empty
       } = chart.config;
       const {
         pivot_rows,
@@ -125,7 +126,7 @@ class TwoDimensionTable extends PureComponent {
       const isSelectRowTotalCellRight = selectRowIdx === pivotRowsLen && selectedCellIdx === 0;
       const isSelectTotal = selectRowIdx === pivotRowsLen && selectedCellIdx === (Array.isArray(pivot_columns) ? pivot_columns.length : 0);
       const tableTotalDisplayValue = BaseUtils.getSummaryValueDisplayString(summaryColumn, pivot_table_total, summaryMethod);
-      const isValidTableTotalDisplayValue = BaseUtils.isValidValue(tableTotalDisplayValue);
+      const isValidTableTotalDisplayValue = BaseUtils.isValidValue(tableTotalDisplayValue, display_empty);
       return /*#__PURE__*/React.createElement("tbody", null, pivotRowsLen > 0 && pivot_rows.map((rowItem, rowIdx) => {
         const {
           name,
@@ -141,7 +142,7 @@ class TwoDimensionTable extends PureComponent {
           pivotColumnCells[rowIdx] = rowItem.rows || [];
         }
         const summaryDisplayValue = BaseUtils.getSummaryValueDisplayString(summaryColumn, total, summaryMethod);
-        const isValidSummaryDisplayValue = BaseUtils.isValidValue(summaryDisplayValue);
+        const isValidSummaryDisplayValue = BaseUtils.isValidValue(summaryDisplayValue, display_empty);
         return /*#__PURE__*/React.createElement("tr", {
           key: 'table-row' + rowIdx
         }, /*#__PURE__*/React.createElement("td", {
@@ -160,7 +161,7 @@ class TwoDimensionTable extends PureComponent {
             total
           } = c;
           const displayValue = BaseUtils.getSummaryValueDisplayString(column, total, summaryMethod);
-          const isValidDisplayValue = BaseUtils.isValidValue(displayValue);
+          const isValidDisplayValue = BaseUtils.isValidValue(displayValue, display_empty);
           if (c && Array.isArray(c.rows) && c.rows.length > 0) {
             pivotRowCells.push(...c.rows);
             if (pivotColumnCells[cellIdx]) {
@@ -210,7 +211,7 @@ class TwoDimensionTable extends PureComponent {
         const isSelectRowTotalCellLeft = selectRowIdx === pivot_rows.length && selectedCellIdx - 1 === index;
         const pivotColumnTotal = pivot_columns_total[c.key];
         const totalDisplayValue = BaseUtils.getSummaryValueDisplayString(summaryColumn, pivotColumnTotal, summaryMethod);
-        const isValidTotalDisplayValue = BaseUtils.isValidValue(totalDisplayValue);
+        const isValidTotalDisplayValue = BaseUtils.isValidValue(totalDisplayValue, display_empty);
         return /*#__PURE__*/React.createElement("td", {
           className: classnames('pivot-cell', {
             'pivot-empty-cell': !isValidTotalDisplayValue,

package/package.json

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