fix: 修复行头为空无默认角头指标文字问题 (#1104)

嘤嘤嘤 · web-flow · commit 62e94af75473 · 2022-02-18T15:44:16.000+08:00
* fix: 修复行头为空无默认角头指标文字问题

* test: 增加角头单元格文本单测

* style: 代码优化

* style: 代码优化
diff --git a/packages/s2-core/__tests__/unit/cell/custom-tree-corner-cell-spec.ts b/packages/s2-core/__tests__/unit/cell/custom-tree-corner-cell-spec.ts
@@ -0,0 +1,64 @@
+/**
+ * custom-tree mode.
+ */
+import { get } from 'lodash';
+import { customTreeItems } from 'tests/data/custom-tree-items';
+import { dataCustomTrees } from 'tests/data/data-custom-trees';
+import { S2DataConfig } from '@/common/interface';
+import { EXTRA_FIELD, VALUE_FIELD } from '@/common/constant';
+import { PivotSheet } from '@/sheet-type';
+import { CornerCell, S2Options, transformCustomTreeItems } from '@/index';
+import { CustomTreePivotDataSet } from '@/data-set/custom-tree-pivot-data-set';
+
+describe('test for corner text', () => {
+  const values = [
+    'measure-a',
+    'measure-b',
+    'measure-c',
+    'measure-d',
+    'measure-e',
+    'measure-f',
+  ];
+  const dataCfg: S2DataConfig = {
+    meta: [],
+    data: dataCustomTrees,
+    totalData: [],
+    fields: {
+      rows: [],
+      columns: ['type', 'sub_type'],
+      values,
+      customTreeItems: transformCustomTreeItems(customTreeItems),
+      valueInCols: false,
+    },
+  };
+
+  const options: S2Options = {
+    width: 600,
+    height: 480,
+    hierarchyType: 'customTree',
+  };
+  const container = document.createElement('div');
+
+  const mockSheet = new PivotSheet(container, dataCfg, options);
+  mockSheet.render();
+
+  test('get correct default corner text when the corner label is empty.', () => {
+    const cornerCells = get(
+      mockSheet,
+      'facet.cornerBBox.facet.cornerHeader.cfg.children',
+    ).filter((v) => v instanceof CornerCell);
+    expect(cornerCells[0].actualText).toEqual('指标');
+    expect(cornerCells[1].actualText).toEqual('type');
+  });
+
+  test('get correct default corner text when set the cornerText.', () => {
+    mockSheet.setOptions({ ...options, cornerText: 'test' });
+    mockSheet.render();
+    const cornerCells = get(
+      mockSheet,
+      'facet.cornerBBox.facet.cornerHeader.cfg.children',
+    ).filter((v) => v instanceof CornerCell);
+    expect(cornerCells[0].actualText).toEqual('test');
+    expect(cornerCells[1].actualText).toEqual('type');
+  });
+});
diff --git a/packages/s2-core/__tests__/unit/cell/data-cell-spec.ts b/packages/s2-core/__tests__/unit/cell/data-cell-spec.ts
diff --git a/packages/s2-core/src/cell/corner-cell.ts b/packages/s2-core/src/cell/corner-cell.ts
@@ -19,6 +19,7 @@ import {
 import {
   CellTypes,
   EXTRA_FIELD,
+  DEFAULT_CORNER_TEXT,
   KEY_GROUP_CORNER_RESIZE_AREA,
   ResizeAreaEffect,
   ResizeDirectionType,
@@ -73,17 +74,12 @@ export class CornerCell extends HeaderCell {
   protected drawCellText() {
     const { label } = this.meta;
 
-    if (isEqual(label, EXTRA_FIELD)) {
-      // don't render extra node
-      return;
-    }
-
     const { x } = this.getContentArea();
     const { y, height } = this.getCellArea();
 
     const textStyle = this.getTextStyle();
-    const { formattedValue } = this.getFormattedFieldValue();
-    const cornerText = this.spreadsheet.options?.cornerText || formattedValue;
+
+    const cornerText = this.getCornerText(label);
 
     // 当为树状结构下需要计算文本前收起展开的icon占的位置
 
@@ -368,4 +364,13 @@ export class CornerCell extends HeaderCell {
       y: 0,
     };
   }
+
+  protected getCornerText(label: string): string {
+    if (isEqual(label, EXTRA_FIELD)) {
+      return this.spreadsheet.options?.cornerText || DEFAULT_CORNER_TEXT;
+    }
+
+    const { formattedValue } = this.getFormattedFieldValue();
+    return formattedValue;
+  }
 }
diff --git a/packages/s2-core/src/common/constant/basic.ts b/packages/s2-core/src/common/constant/basic.ts
@@ -1,9 +1,10 @@
+import { i18n } from '../i18n';
 // 值字段的 id 是固定的！
 export const VALUE_FIELD = '$$value$$';
 export const EXTRA_FIELD = '$$extra$$';
 export const TOTAL_VALUE = '$$total$$';
 export const SERIES_NUMBER_FIELD = '$$series_number$$';
-// export const COLUMN_FIELD_KEY = '$$column_key$$';
+export const DEFAULT_CORNER_TEXT = i18n('指标');
 
 export const BACK_GROUND_GROUP_CONTAINER_Z_INDEX = 0;
 
diff --git a/packages/s2-core/src/common/i18n/en_US.ts b/packages/s2-core/src/common/i18n/en_US.ts
@@ -28,6 +28,7 @@ export const EN_US = {
   选择下钻维度: 'Select drill down dimension',
   恢复默认: 'Restore default',
   搜索字段: 'Search field',
+  指标: 'Measure',
   // switcher
   行列切换: 'Switch Dimensions',
   行头: 'Rows',
diff --git a/packages/s2-core/src/common/i18n/zh_CN.ts b/packages/s2-core/src/common/i18n/zh_CN.ts
@@ -28,6 +28,7 @@ export const ZH_CN = {
   选择下钻维度: '选择下钻维度',
   恢复默认: '恢复默认',
   搜索字段: '搜索字段',
+  指标: '指标',
 
   // switcher
   行列切换: '行列切换',
diff --git a/packages/s2-react/playground/config.ts b/packages/s2-react/playground/config.ts
@@ -105,7 +105,7 @@ export const sliderOptions: SliderSingleProps = {
 export const strategyOptions: S2Options = {
   width: 1000,
   height: 400,
-  cornerText: '时间',
+  cornerText: '指标',
   headerActionIcons: [
     {
       iconNames: ['Trend'],

Original file line number	Diff line number	Diff line change
`@@ -105,7 +105,7 @@ export const sliderOptions: SliderSingleProps = {`
`105`	`105`	`export const strategyOptions: S2Options = {`
`106`	`106`	`width: 1000,`
`107`	`107`	`height: 400,`
`108`		`- cornerText: '时间',`
	`108`	`+ cornerText: '指标',`
`109`	`109`	`headerActionIcons: [`
`110`	`110`	`{`
`111`	`111`	`iconNames: ['Trend'],`