feat: 允许条件设置数据单元格为空的占位符 (#1309)

* feat: 允许条件设置数据单元格为空的占位符

* fix: fix the ci

* refactor: 更新dataCell placeholder的透传信息

* refactor: 代码逻辑优化

* style: 代码逻辑优化

packages/s2-core/__tests__/unit/utils/text-spec.ts

@@ -4,6 +4,7 @@ import {
   isUpDataValue,
   measureTextWidth,
   getCellWidth,
+  getEmptyPlaceholder,
 } from '@/utils/text';
 
 describe('Text Utils Tests', () => {
@@ -119,4 +120,29 @@ describe('Text Utils Tests', () => {
 
     expect(width).toEqual(90);
   });
+
+  test('should get correct emptyPlaceholder when the type of placeholder is string', () => {
+    const meta = {
+      id: 'root',
+      value: '',
+      key: '',
+    };
+
+    const placeholder = getEmptyPlaceholder(meta, '*');
+
+    expect(placeholder).toEqual('*');
+  });
+
+  test('should get correct emptyPlaceholder when the type of placeholder is function', () => {
+    const meta = {
+      id: 'root',
+      value: 'test',
+    };
+
+    const placeholder = getEmptyPlaceholder(meta, (meta) => {
+      return meta.value;
+    });
+
+    expect(placeholder).toEqual('test');
+  });
 });

packages/s2-core/src/cell/base-cell.ts

@@ -1,5 +1,14 @@
 import { BBox, Group, IShape, Point, SimpleBBox } from '@antv/g-canvas';
-import { each, get, includes, isBoolean, isNumber, keys, pickBy } from 'lodash';
+import {
+  each,
+  get,
+  includes,
+  isBoolean,
+  isFunction,
+  isNumber,
+  keys,
+  pickBy,
+} from 'lodash';
 import {
   CellTypes,
   InteractionStateName,
@@ -23,7 +32,11 @@ import {
 } from '@/utils/cell/cell';
 import { renderLine, renderText, updateShapeAttr } from '@/utils/g-renders';
 import { isMobile } from '@/utils/is-mobile';
-import { getEllipsisText, measureTextWidth } from '@/utils/text';
+import {
+  getEllipsisText,
+  getEmptyPlaceholder,
+  measureTextWidth,
+} from '@/utils/text';
 
 export abstract class BaseCell<T extends SimpleBBox> extends Group {
   // cell's data meta info
@@ -176,11 +189,13 @@ export abstract class BaseCell<T extends SimpleBBox> extends Group {
     const { formattedValue } = this.getFormattedFieldValue();
     const maxTextWidth = this.getMaxTextWidth();
     const textStyle = this.getTextStyle();
+    const { placeholder } = this.spreadsheet.options;
+    const emptyPlaceholder = getEmptyPlaceholder(this, placeholder);
     const ellipsisText = getEllipsisText({
       text: formattedValue,
       maxWidth: maxTextWidth,
       fontParam: textStyle,
-      placeholder: this.spreadsheet.options.placeholder,
+      placeholder: emptyPlaceholder,
     });
     this.actualText = ellipsisText;
     this.actualTextWidth = measureTextWidth(ellipsisText, textStyle);

packages/s2-core/src/cell/corner-cell.ts

@@ -42,7 +42,11 @@ import {
   renderTreeIcon,
 } from '@/utils/g-renders';
 import { isIPhoneX } from '@/utils/is-mobile';
-import { getEllipsisText, measureTextWidth } from '@/utils/text';
+import {
+  getEllipsisText,
+  getEmptyPlaceholder,
+  measureTextWidth,
+} from '@/utils/text';
 import { CornerNodeType } from '@/common/interface/node';
 import { formattedFieldValue } from '@/utils/cell/header-cell';
 
@@ -81,11 +85,15 @@ export class CornerCell extends HeaderCell {
     // 当为树状结构下需要计算文本前收起展开的icon占的位置
 
     const maxWidth = this.getMaxTextWidth();
+    const emptyPlaceholder = getEmptyPlaceholder(
+      this.meta,
+      this.spreadsheet.options.placeholder,
+    );
     const text = getEllipsisText({
       text: cornerText,
       maxWidth,
       fontParam: textStyle,
-      placeholder: this.spreadsheet.options.placeholder,
+      placeholder: emptyPlaceholder,
     });
     this.actualText = text;
     const ellipseIndex = text.indexOf('...');

packages/s2-core/src/common/interface/s2Options.ts

@@ -3,12 +3,14 @@ import {
   FilterDataItemCallback,
   HeaderActionIcon,
   CustomSVGIcon,
+  ViewMeta,
 } from './basic';
 import { Tooltip } from './tooltip';
 import { InteractionOptions } from './interaction';
 import { ColHeaderConfig } from '@/facet/header/col';
 import { RowHeaderConfig } from '@/facet/header/row';
 import { CornerHeaderConfig } from '@/facet/header/corner';
+import { Node } from '@/facet/layout/node';
 import {
   CellCallback,
   CornerHeaderCallback,
@@ -65,7 +67,7 @@ export interface S2BasicOptions<T = Element | string> {
   // the collection of row id and column id of cells which to be merged
   readonly mergedCellsInfo?: MergedCellInfo[][];
   // empty cell placeholder
-  readonly placeholder?: string;
+  readonly placeholder?: ((meta: Record<string, any>) => string) | string;
   // custom corner text
   readonly cornerText?: string;
   // custom virtual extra field text

packages/s2-core/src/utils/text.ts

@@ -2,6 +2,7 @@ import {
   clone,
   isArray,
   isEmpty,
+  isFunction,
   isNil,
   isNumber,
   isString,
@@ -316,6 +317,16 @@ const getTextStyle = (
   return { ...textStyle, fill };
 };
 
+/**
+ * 获取自定义空值占位符
+ */
+export const getEmptyPlaceholder = (
+  meta: Record<string, any>,
+  placeHolder: ((meta: Record<string, any>) => string) | string,
+) => {
+  return isFunction(placeHolder) ? placeHolder(meta) : placeHolder;
+};
+
 /**
  * @desc draw text shape of object
  * @param cell
@@ -394,6 +405,11 @@ export const drawObjectText = (
 
       curX = calX(x, padding.right, totalWidth, textAlign);
       totalWidth += curWidth;
+      const { placeholder } = cell?.getMeta().spreadsheet.options;
+      const emptyPlaceholder = getEmptyPlaceholder(
+        cell?.getMeta(),
+        placeholder,
+      );
       renderText(
         cell,
         [],
@@ -403,7 +419,7 @@ export const drawObjectText = (
           text: curText,
           maxWidth: curWidth,
           fontParam: curStyle,
-          placeholder: cell?.getMeta().spreadsheet.options.placeholder,
+          placeholder: emptyPlaceholder,
         }),
         curStyle,
       );

packages/s2-core/src/utils/tooltip.ts

@@ -29,6 +29,7 @@ import { Event as CanvasEvent } from '@antv/g-canvas';
 import { handleDataItem } from './cell/data-cell';
 import { isMultiDataItem } from './data-item-type-checker';
 import { customMerge } from './merge';
+import { getEmptyPlaceholder } from './text';
 import { AutoAdjustPositionOptions, Data, ListItem } from '@/common/interface';
 import { LayoutResult } from '@/common/interface/basic';
 import {
@@ -415,8 +416,10 @@ export const getSummaries = (params: SummaryParam): TooltipSummaryOptions[] => {
     if (isTableMode) {
       value = '';
     } else if (every(selected, (item) => isNotNumber(get(item, VALUE_FIELD)))) {
-      // 如果选中的单元格都无数据，则显示"-"
-      value = spreadsheet.options.placeholder;
+      const { placeholder } = spreadsheet.options;
+      const emptyPlaceholder = getEmptyPlaceholder(summary, placeholder);
+      // 如果选中的单元格都无数据，则显示"-" 或 options 里配置的占位符
+      value = emptyPlaceholder;
     } else {
       const dataSum = getDataSumByField(selected, VALUE_FIELD);
       value = parseFloat(dataSum.toPrecision(PRECISION)); // solve accuracy problems