fix: 开启自定义行列头时, 不应该渲染总计节点和组内排序 icon closes #2898 #2893

Author: lijinke666

packages/s2-core/__tests__/spreadsheet/custom-grid-spec.ts

@@ -254,6 +254,19 @@ describe('SpreadSheet Custom Grid Tests', () => {
         s2.facet.getRowNodes().every((node) => node.isCollapsed),
       ).toBeTruthy();
     });
+
+    // https://github.com/antvis/S2/issues/2898
+    test('should not render sort action icon for custom row header', async () => {
+      s2.setOptions({
+        showDefaultHeaderActionIcon: true,
+      });
+
+      await s2.render(false);
+
+      s2.facet.getRowCells().forEach((cell) => {
+        expect(cell.getActionIcons()).toHaveLength(0);
+      });
+    });
   });
 
   describe('Custom Col Grid Tests', () => {
@@ -276,7 +289,7 @@ describe('SpreadSheet Custom Grid Tests', () => {
     });
 
     afterEach(() => {
-      s2.destroy();
+      // s2.destroy();
     });
 
     test('should enable valueInCols', () => {
@@ -538,5 +551,42 @@ describe('SpreadSheet Custom Grid Tests', () => {
         s2.facet.getColNodes().some((node) => node.isCollapsed),
       ).toBeFalsy();
     });
+
+    // https://github.com/antvis/S2/issues/2893
+    test.each(['tree', 'grid'])(
+      'should not render total node for %s mode',
+      async (hierarchyType) => {
+        s2.setOptions({
+          hierarchyType,
+          totals: {
+            col: {
+              showGrandTotals: true,
+              reverseGrandTotalsLayout: true,
+            },
+            row: {
+              showGrandTotals: true,
+              reverseGrandTotalsLayout: true,
+            },
+          },
+        });
+
+        await s2.render(false);
+
+        expect(s2.facet.getColGrandTotalsNodes()).toHaveLength(0);
+        expect(s2.facet.getRowGrandTotalsNodes()).toHaveLength(0);
+      },
+    );
+
+    test('should not render sort action icon for custom col header', async () => {
+      s2.setOptions({
+        showDefaultHeaderActionIcon: true,
+      });
+
+      await s2.render(false);
+
+      s2.facet.getColCells().forEach((cell) => {
+        expect(cell.getActionIcons()).toHaveLength(0);
+      });
+    });
   });
 });

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

@@ -335,6 +335,11 @@ export abstract class HeaderCell<
   }
 
   protected isSortCell() {
+    // https://github.com/antvis/S2/issues/2898
+    if (this.meta.extra?.isCustomNode) {
+      return false;
+    }
+
     // 数值置于列头, 排序 icon 绘制在列头叶子节点; 置于行头, 排序 icon 绘制在行头叶子节点
     const isValueInCols = this.spreadsheet?.isValueInCols?.();
     const isMaxLevel = this.meta.level === this.meta.hierarchy?.maxLevel;

packages/s2-core/src/facet/layout/build-gird-hierarchy.ts

@@ -114,14 +114,16 @@ const buildNormalGridHierarchy = (params: GridHeaderParams) => {
     }
   }
 
-  // add totals if needed
-  addTotals({
-    currentField,
-    lastField: fields[index - 1],
-    isFirstField: index === 0,
-    fieldValues,
-    spreadsheet,
-  });
+  // https://github.com/antvis/S2/issues/2893
+  if (!spreadsheet.isCustomHeaderFields()) {
+    addTotals({
+      currentField,
+      lastField: fields[index - 1],
+      isFirstField: index === 0,
+      fieldValues,
+      spreadsheet,
+    });
+  }
 
   const displayFieldValues = filterOutDetail(fieldValues as string[]);
 

packages/s2-core/src/facet/layout/build-row-tree-hierarchy.ts

@@ -61,7 +61,7 @@ export const buildRowTreeHierarchy = (params: TreeHeaderParams) => {
     fieldValues = fieldValues.slice(0, drillItemsNum);
   }
 
-  if (level === 0) {
+  if (level === 0 && !spreadsheet.isCustomHeaderFields()) {
     addTotals(spreadsheet, currentField, fieldValues);
   }
 

packages/s2-react/playground/components/CustomGrid.tsx

@@ -78,7 +78,6 @@ export const pivotSheetCustomColGridDataCfg: S2DataConfig = {
 enum CustomType {
   Row = 'row',
   Col = 'col',
-  All = 'all',
 }
 
 type CustomGridProps = Partial<SheetComponentProps>;
@@ -122,9 +121,6 @@ export const CustomGrid = React.forwardRef<SpreadSheet, CustomGridProps>(
           >
             <Radio.Button value={CustomType.Row}>自定义行头</Radio.Button>
             <Radio.Button value={CustomType.Col}>自定义列头</Radio.Button>
-            <Radio.Button value={CustomType.All} disabled>
-              TODO: 自定义行头和列头
-            </Radio.Button>
           </Radio.Group>
           <Switch
             checkedChildren="树状模式"

s2-site/docs/common/totals.zh.md

@@ -9,8 +9,8 @@ order: 3
 
 | 参数 | 说明   | 类型                                          | 必选  | 默认值 |
 | ---- | ------ | --------------------------------------------- | ---- | ------ |
-| row  | 行总计配置 | [Total](/docs/api/general/S2Options#total) |       |    |
-| col  | 列总计配置 | [Total](/docs/api/general/S2Options#total) |       |    |
+| row  | 列总计（在 [自定义行列头时](/manual/advanced/custom/custom-header) 无效） | [Total](#total) |  -     |      |
+| col  | 行总计（在 [自定义行列头时](/manual/advanced/custom/custom-header) 无效） | [Total](#total) | -     |      |
 
 ## Total
 

s2-site/docs/manual/advanced/custom/custom-header.zh.md

@@ -6,7 +6,17 @@ tag: New
 
 `S2` 默认提供 [平铺模式 (grid)](https://s2.antv.vision/zh/examples/basic/pivot#grid) 和 [树状模式 (tree)](https://s2.antv.vision/zh/examples/basic/pivot#tree) 两种**行头**单元格布局方式。
 
-默认通过**分组之后得到的数据生成层级结构**, 如果都不满足的话，可以通过自定义行列头，来定制你的目录结构，同样兼容平铺和树状这两种布局方式。
+默认通过**分组之后得到的数据生成层级结构**, 如果都不满足，还可以通过自定义行列头，来定制你的目录结构，同样兼容平铺和树状这两种布局方式。
+
+## 一些限制
+
+:::warning{title="注意"}
+
+1. 默认的排序 icon `showDefaultHeaderActionIcon` 无效。
+2. 不支持 [组内排序](/manual/basic/sort/group), 相关 API 无效。
+3. 不支持 [小计总计](/manual/basic/totals), 且 [自定义汇总](/manual/basic/totals#2-%E6%95%B0%E6%8D%AE) 中无法获取到明细数据。
+
+:::
 
 ## 数据结构
 

s2-site/docs/manual/basic/sort/group.zh.md

@@ -9,7 +9,10 @@ tag: Updated
 `组内排序` 代表只影响一个分组内部的排序，例如下图中 `笔-价格` 选择 `组内升序` 时，`省份` 的排序方式不会更改，只会更改每个 `省份` 内部 `城市` 的顺序。
 
 :::warning{title="注意"}
-`行头/列头` 只存在单一状态，当前状态会覆盖前一状态，如上图所示，当对 `笔` 进行排序时，`纸张` 的排序状态消失，`行头 + 列头` 可同时存在自身状态。
+
+1. `行头/列头` 只存在单一状态，当前状态会**覆盖前一状态**，如上图所示，当对 `笔` 进行排序时，`纸张` 的排序状态消失，`行头 + 列头` 可同时存在自身状态。
+2. 在开启 [自定义行列头时](/manual/advanced/custom/custom-header) 组内排序无效。
+
 :::
 
 <img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*PuoGS7DQdV8AAAAAAAAAAAAADmJ7AQ/original" width="600" alt="group-sort" />

s2-site/docs/manual/basic/totals.zh.md

@@ -5,7 +5,7 @@ order: 5
 
 ## 简介
 
-小计总计属于表的透视功能，可以给行头和列头分别配置小计总计。
+小计总计属于表的透视功能，可以给行头和列头分别配置汇总能力，展示小计总计，开启 [自定义行列头](/manual/advanced/custom/custom-header) 时，汇总能力无效。
 
 ### 小计
 
@@ -81,53 +81,7 @@ order: 5
 
 配置 [S2Options](/docs/api/general/S2Options#total) 的 `totals` 属性来实现是否展示行列小计总计以及显示位置，类型如下：
 
-#### Totals
-
-功能描述： 行/列小计总计配置
-
-| 参数 | 说明   | 类型                                          | 默认值 | 必选 |
-| ---- | ------ | --------------------------------------------- | ------ | ---- |
-| row  | 列总计 | [Total](/docs/api/general/S2Options#total) |  -     |      |
-| col  | 行总计 | [Total](/docs/api/general/S2Options#total) | -     |      |
-
-#### Total
-
-功能描述：小计总计算配置
-
-| 参数                | 说明                     | 类型         | 默认值 | 必选 |
-| ------------------- | ------------------------ | ------------ | ------ | ---- |
-| showGrandTotals     | 是否显示总计             | `boolean`    | false  |     |
-| showSubTotals       | 是否显示小计。配置为对象时，`always` 用于控制当子维度小于 2 个时是否始终展示小计，默认展示  | `boolean \| { always: boolean }`    | false  |     |
-| subTotalsDimensions | 小计的汇总维度           | `string[]`   | []     |     |
-| reverseGrandTotalsLayout       | 总计布局位置，默认下或右 | `boolean`    | false  |     |
-| reverseSubTotalsLayout    | 小计布局位置，默认下或右 | `boolean`    | false  |     |
-| grandTotalsLabel               | 总计别名                 | `string`     |   `总计`     |      |
-| subTotalsLabel            | 小计别名                 | `string`     |   `小计`     |      |
-| calcGrandTotals          | 计算总计                 | `CalcTotals` |        |      |
-| calcSubTotals       | 计算小计                 | `CalcTotals` |        |      |
-
-```ts
-const s2Options = {
-  totals: {
-    row: {
-      showGrandTotals: true,
-      showSubTotals: true,
-      reverseGrandTotalsLayout: true,
-      reverseSubTotalsLayout: true,
-      subTotalsDimensions: ['province'],
-      grandTotalsGroupDimensions: ['city'],
-      subTotalsGroupDimensions: ['type', 'sub_type'],
-    },
-    col: {
-      showGrandTotals: true,
-      showSubTotals: true,
-      reverseGrandTotalsLayout: true,
-      reverseSubTotalsLayout: true,
-      subTotalsDimensions: ['type'],
-    },
-  },
-};
-```
+<embed src="@/docs/common/totals.zh.md"></embed>
 
 ### 2. 数据
 
@@ -269,11 +223,12 @@ const s2Options = {
 
 注意：`data` 为明细数据，如需获取包含汇总的数据
 
-```ts
+```ts | pure
 import { QueryDataType } from '@antv/s2';
 
 const calcFunc = (query, data, spreadsheet) => {
-  const allData = spreadsheet.dataSet.getMultiData(query, {
+  const allData = spreadsheet.dataSet.getMultiData({
+    query,
     queryType: QueryDataType.All,
   });
 

s2-site/examples/analysis/totals/demo/custom.ts

@@ -39,7 +39,8 @@ fetch('https://render.alipay.com/p/yuyan/180020010001215413/s2/basic.json')
     };
 
     const calcFunc: CalcTotals['calcFunc'] = (query, data, spreadsheet) => {
-      const allData = spreadsheet.dataSet.getMultiData(query, {
+      const allData = spreadsheet.dataSet.getCellMultiData({
+        query,
         queryType: QueryDataType.All,
       });