sea-chart 0.0.27 → 0.0.28

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,9 @@ 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'
 };
 export default en;

package/dist/locale/lang/es.js

@@ -165,6 +165,9 @@ 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'
 };
 export default es;

package/dist/locale/lang/fr.js

@@ -165,6 +165,9 @@ 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'
 };
 export default fr;

package/dist/locale/lang/pt.js

@@ -165,6 +165,9 @@ 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'
 };
 export default pt;

package/dist/locale/lang/ru.js

@@ -165,6 +165,9 @@ 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'
 };
 export default ru;

package/dist/locale/lang/zh_CN.js

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

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

@@ -207,8 +207,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/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/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/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.27",
+  "version": "0.0.28",
   "main": "./dist/index.js",
   "dependencies": {
     "@antv/data-set": "0.11.8",