feat(tooltip): add tooltip.showNil (#3216)

* feat(tooltip): add tooltip.showNil

* chore: add default value for function

Author: hustcc

src/chart/controller/tooltip.ts

@@ -694,12 +694,13 @@ export default class Tooltip extends Controller<TooltipOption> {
   }
 
   private getTooltipItemsByHitShape(geometry, point, title) {
+    const { showNil } = this.getTooltipCfg();
     const result = [];
     const container = geometry.container;
     const shape = container.getShape(point.x, point.y);
     if (shape && shape.get('visible') && shape.get('origin')) {
       const mappingData = shape.get('origin').mappingData;
-      const items = getTooltipItems(mappingData, geometry, title);
+      const items = getTooltipItems(mappingData, geometry, title, showNil);
       if (items.length) {
         result.push(items);
       }
@@ -709,6 +710,7 @@ export default class Tooltip extends Controller<TooltipOption> {
   }
 
   private getTooltipItemsByFindData(geometry: Geometry, point, title) {
+    const { showNil } = this.getTooltipCfg();
     const result = [];
     const dataArray = geometry.dataArray;
     if (!isEmpty(dataArray)) {
@@ -721,7 +723,7 @@ export default class Tooltip extends Controller<TooltipOption> {
           if (geometry.type === 'heatmap' || element.visible) {
             // Heatmap 没有 Element
             // 如果图形元素隐藏了，怎不再 tooltip 上展示相关数据
-            const items = getTooltipItems(record, geometry, title);
+            const items = getTooltipItems(record, geometry, title, showNil);
             if (items.length) {
               result.push(items);
             }

src/interface.ts

@@ -1235,6 +1235,8 @@ export interface TooltipCfg {
   offset?: number;
   /** 是否将 tooltip items 逆序 */
   reversed?: boolean;
+  /** 是否显示空值的 tooltip 项目 */
+  showNil?: boolean;
   /** 支持自定义模板 */
   customContent?: (title: string, data: any[]) => string | HTMLElement;
 }

src/util/tooltip.ts

@@ -295,7 +295,7 @@ export function findDataByPoint(point: Point, data: MappingDatum[], geometry: Ge
  * @param [title]
  * @returns
  */
-export function getTooltipItems(data: MappingDatum, geometry: Geometry, title: string = '') {
+export function getTooltipItems(data: MappingDatum, geometry: Geometry, title: string = '', showNil: boolean = false) {
   const originData = data[FIELD_ORIGIN];
   const tooltipTitle = getTooltipTitle(originData, geometry, title);
   const tooltipOption = geometry.tooltipOption;
@@ -305,7 +305,7 @@ export function getTooltipItems(data: MappingDatum, geometry: Geometry, title: s
   let value;
 
   function addItem(itemName, itemValue) {
-    if (!isNil(itemValue) && itemValue !== '') {
+    if (showNil || (!isNil(itemValue) && itemValue !== '')) {
       // 值为 null的时候，忽视
       const item = {
         title: tooltipTitle,
@@ -353,12 +353,10 @@ export function getTooltipItems(data: MappingDatum, geometry: Geometry, title: s
     }
   } else {
     const valueScale = getTooltipValueScale(geometry);
-    if (!isNil(originData[valueScale.field])) {
-      // 字段数据为null ,undefined时不显示
-      value = getTooltipValue(originData, valueScale);
-      name = getTooltipName(originData, geometry);
-      addItem(name, value);
-    }
+    // 字段数据为null ,undefined时不显示
+    value = getTooltipValue(originData, valueScale);
+    name = getTooltipName(originData, geometry);
+    addItem(name, value);
   }
   return items;
 }

tests/bugs/1518-spec.ts

@@ -0,0 +1,47 @@
+// 欢迎使用全新的 G2 4.0
+import { Chart } from '../../src';
+import { createDiv } from '../util/dom';
+
+describe('#1518', () => {
+  it('tooltip.showNil', () => {
+    const chart = new Chart({
+      container: createDiv(),
+      width: 500,
+      height: 500,
+      autoFit: false,
+    });
+
+    chart.data([
+      { x: 'A', type: '分类一', value: 30 },
+      { x: 'A', type: '分类二', value: 10 },
+      { x: 'A', type: '分类三', value: null },
+      { x: 'B', type: '分类一', value: 15 },
+      { x: 'B', type: '分类二', value: undefined },
+      { x: 'B', type: '分类三', value: 20 },
+    ]);
+
+    chart.interval().position('x*value').color('type').adjust('stack');
+
+    chart.tooltip({
+      shared: true,
+      // showNil: true,
+    });
+    chart.render();
+    chart.showTooltip({ x: 150, y: 150 });
+    expect(chart.ele.querySelectorAll('.g2-tooltip-list-item').length).toBe(2);
+
+    chart.hideTooltip();
+
+    chart.tooltip({
+      shared: true,
+      showNil: true,
+    });
+    chart.render();
+    chart.showTooltip({ x: 150, y: 150 });
+
+    expect(chart.ele.querySelectorAll('.g2-tooltip-list-item').length).toBe(3);
+    expect(chart.ele.querySelector('.g2-tooltip-list-item:nth-child(3) span:nth-child(3)').innerHTML).toBe('');
+
+    chart.destroy();
+  });
+});