feat: 在行列头配置为空时，趋势分析表不渲染框架 (#2216)

* feat: 当用户还未配置行列头和数值时，不渲染 * feat: 当用户还未配置行列头和数值时，不渲染表格框架 * feat: 当 dataCfg 配置为空时，不展示空框架，兼容趋势分析表 * test: 添加当 dataCfg 配置为空时，不展示空框架，兼容趋势分析表单测 * test: 添加趋势分析表中自定义 cornerExtraFieldText 相关单测 --------- Co-authored-by: zishang <[email protected]>
antvis · May 19, 2023 · 7501606 · 7501606
1 parent bb6b0b1
commit 7501606
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 19 deletions.
diff --git a/packages/s2-core/__tests__/unit/data-set/custom-tree-data-set-spec.ts b/packages/s2-core/__tests__/unit/data-set/custom-tree-data-set-spec.ts
@@ -43,6 +43,7 @@ describe('Custom Tree Dataset Test', () => {
 
   describe('test base dataset structure', () => {
     test('should get correct field data', () => {
+      expect(dataCfg.fields.rows).toEqual([]);
       expect(dataSet.fields.rows).toEqual([EXTRA_FIELD]);
       expect(dataSet.fields.columns).toEqual(['type', 'sub_type']);
       expect(dataSet.fields.values).toEqual(values);

diff --git a/packages/s2-core/__tests__/unit/facet/pivot-facet-spec.ts b/packages/s2-core/__tests__/unit/facet/pivot-facet-spec.ts
@@ -293,7 +293,7 @@ describe('Pivot Mode Facet Test', () => {
       height: 100,
       container: document.body,
     });
-    // 所以我需要重置 Spreadsheet  中的 dataCfg.fields todo: 然后调用 render 看是否会进入后续的方法
+    // 所以我需要重置 Spreadsheet  中的 dataCfg.fields
     const spreadsheet = Object.assign({}, s2, {
       dataCfg: { fields },
       panelGroup: container.addGroup(),

diff --git a/packages/s2-core/src/data-set/base-data-set.ts b/packages/s2-core/src/data-set/base-data-set.ts
@@ -103,15 +103,14 @@ export abstract class BaseDataSet {
   }
 
   public processMeta(meta: Meta[] = [], defaultExtraFieldText: string) {
-    const newMeta: Meta[] = [
+    return [
       ...meta,
       generateExtraFieldMeta(
         meta,
         this.spreadsheet?.options?.cornerExtraFieldText,
         defaultExtraFieldText,
       ),
     ];
-    return newMeta;
   }
 
   public getDisplayDataSet() {

diff --git a/packages/s2-core/src/data-set/custom-tree-pivot-data-set.ts b/packages/s2-core/src/data-set/custom-tree-pivot-data-set.ts
@@ -55,10 +55,8 @@ export class CustomTreePivotDataSet extends PivotDataSet {
 
   processDataCfg(dataCfg: S2DataConfig): S2DataConfig {
     // 自定义行头有如下几个特点
-    // 1、rows配置必须是空，需要额外添加 $$extra$$ 定位数据（标记指标的id）
     // 2、要有配置 fields.rowCustomTree(行头结构)
     // 3、values 不需要参与计算，默认就在行头结构中
-    dataCfg.fields.rows = [EXTRA_FIELD];
     dataCfg.fields.valueInCols = false;
     const { data, meta, ...restCfg } = dataCfg;
     const { values } = dataCfg.fields;
@@ -94,6 +92,11 @@ export class CustomTreePivotDataSet extends PivotDataSet {
       ...restCfg,
       meta: newMeta,
       data: uniq(transformedData),
+      fields: {
+        ...dataCfg.fields,
+        // 1、rows配置必须是空，需要额外添加 $$extra$$ 定位数据（标记指标的id）
+        rows: [EXTRA_FIELD],
+      },
     };
   }
 }
diff --git a/packages/s2-react/__tests__/unit/components/sheets/strategy-sheet/index-spec.tsx b/packages/s2-react/__tests__/unit/components/sheets/strategy-sheet/index-spec.tsx
@@ -2,38 +2,40 @@ import type { Event as GEvent } from '@antv/g-canvas';
 import {
   CellTypes,
   copyData,
+  CornerNodeType,
   customMerge,
+  EXTRA_FIELD,
   getCellMeta,
   InteractionStateName,
-  SpreadSheet,
   type S2DataConfig,
+  SpreadSheet,
 } from '@antv/s2';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { act } from 'react-dom/test-utils';
+import { merge } from 'lodash';
 import {
   SheetComponent,
   SheetComponentOptions,
 } from '../../../../../src/components';
 import { getContainer } from '../../../../util/helpers';
 import {
-  StrategySheetDataConfig,
   StrategyOptions,
+  StrategySheetDataConfig,
 } from '../../../../data/strategy-data';
 
 describe('<StrategySheet/> Tests', () => {
   let s2: SpreadSheet;
   let container: HTMLDivElement;
 
-  beforeAll(() => {
+  beforeEach(() => {
     container = getContainer();
   });
 
-  afterAll(() => {
+  afterEach(() => {
     ReactDOM.unmountComponentAtNode(container);
     container.remove();
   });
-
   const renderStrategySheet = (
     options: SheetComponentOptions | null,
     dataCfg?: S2DataConfig,
@@ -181,6 +183,35 @@ describe('<StrategySheet/> Tests', () => {
     ]);
   });
 
+  test('should get custom corner extra field text', () => {
+    const cornerExtraFieldText = '自定义';
+    const s2DataCfg = {
+      fields: {
+        ...StrategySheetDataConfig.fields,
+        valueInCols: false,
+      },
+    };
+    const s2Options = {
+      cornerExtraFieldText,
+    };
+
+    renderStrategySheet(s2Options, {
+      ...StrategySheetDataConfig,
+      ...s2DataCfg,
+    });
+
+    const cornerNode = s2.facet
+      .getCornerNodes()
+      .find((node) => node.cornerType === CornerNodeType.Row);
+    const textList = s2.facet.cornerHeader
+      .getChildren()
+      .map((element) => (element as any).actualText);
+
+    expect(textList).toEqual([cornerExtraFieldText, '日期']);
+
+    expect(cornerNode.label).toEqual(cornerExtraFieldText);
+  });
+
   test('should format corner date field', () => {
     renderStrategySheet(
       {
@@ -201,7 +232,9 @@ describe('<StrategySheet/> Tests', () => {
     const textList = s2.facet.cornerHeader
       .getChildren()
       .map((element) => (element as any).actualText);
+    const dataSetFields = s2.dataSet.fields;
 
+    expect(dataSetFields.rows).toEqual([EXTRA_FIELD]);
     expect(textList).toEqual(['数值', '日期']);
   });
 

diff --git a/packages/s2-react/src/components/sheets/strategy-sheet/custom-data-set.ts b/packages/s2-react/src/components/sheets/strategy-sheet/custom-data-set.ts
@@ -10,7 +10,6 @@ import {
 
 export class StrategyDataSet extends CustomTreePivotDataSet {
   processDataCfg(dataCfg: S2DataConfig): S2DataConfig {
-    dataCfg.fields.rows = [EXTRA_FIELD];
     dataCfg.fields.valueInCols = false;
     const { data, meta, ...restCfg } = dataCfg;
     const transformedData = [];
@@ -31,19 +30,16 @@ export class StrategyDataSet extends CustomTreePivotDataSet {
       }
     });
 
-    const extraFieldName =
-      this.spreadsheet?.options?.cornerExtraFieldText || i18n('数值');
-
-    const extraFieldMeta: Meta = {
-      field: EXTRA_FIELD,
-      name: extraFieldName,
-    };
-    const newMeta: Meta[] = [...meta, extraFieldMeta];
+    const newMeta: Meta[] = this.processMeta(meta, i18n('数值'));
 
     return {
       data: uniq(transformedData),
       meta: newMeta,
       ...restCfg,
+      fields: {
+        ...dataCfg.fields,
+        rows: [EXTRA_FIELD],
+      },
     };
   }
 }