feat: 交叉表支持冻结首行能力 (#2416)

* feat: 交叉表支持冻结首行

* feat: 调整冻结实现逻辑 & CR遗留问题 & 行头部分重构实现

* fix: 修复 CR 系列反馈的问题

* fix: 修复二轮 CR 反馈的问题

---------

Co-authored-by: wuding.why <wuding.why@alibaba-inc.com>

packages/s2-core/__tests__/bugs/issue-1191-spec.ts

@@ -7,6 +7,7 @@
  */
 import * as mockDataConfig from 'tests/data/simple-data.json';
 import { getContainer } from 'tests/util/helpers';
+import type { Group } from '@antv/g-canvas';
 import type { S2DataConfig, S2Options } from '@/common/interface';
 import { PivotSheet, SpreadSheet } from '@/sheet-type';
 
@@ -76,15 +77,19 @@ describe('Link Field Tests', () => {
 
   test('province row cell should use link field style', () => {
     // 浙江省对应 cell
-    const province = s2.facet.rowHeader.getChildByIndex(0);
+    const province = (
+      s2.facet.rowHeader.getChildByIndex(0) as Group
+    ).getChildByIndex(0);
     // @ts-ignore
     expect(province.textShape.attr('fill')).toEqual('red');
     // @ts-ignore
     expect(province.linkFieldShape).toBeDefined();
   });
   test('city row cell should not use link field style', () => {
     // 义乌对应 cell
-    const city = s2.facet.rowHeader.getChildByIndex(1);
+    const city = (
+      s2.facet.rowHeader.getChildByIndex(0) as Group
+    ).getChildByIndex(1);
     // @ts-ignore
     expect(city.textShape.attr('fill')).not.toEqual('red');
     // @ts-ignore

packages/s2-core/__tests__/bugs/issue-1201-spec.ts

@@ -4,7 +4,7 @@
  * https://github.com/antvis/S2/issues/1201
  * fillOpacity
  */
-import type { IGroup } from '@antv/g-canvas';
+import type { Group, IGroup } from '@antv/g-canvas';
 import { getContainer } from '../util/helpers';
 import * as mockDataConfig from '../data/data-issue-292.json';
 import { PivotSheet } from '@/sheet-type';
@@ -45,7 +45,8 @@ describe('background color opacity test', () => {
     expect(cornerCell.backgroundShape.attr('fillOpacity')).toEqual(0.1);
 
     // row cell
-    const rowCell = s2.facet.rowHeader.getChildByIndex(0);
+    const rowHeaderScrollGroup = s2.facet.rowHeader.getChildByIndex(0) as Group;
+    const rowCell = rowHeaderScrollGroup.getFirst();
     // @ts-ignore
     expect(rowCell.backgroundShape.attr('fillOpacity')).toEqual(0.2);
 

packages/s2-core/__tests__/spreadsheet/__snapshots__/theme-spec.ts.snap

@@ -493,7 +493,7 @@ Object {
       "linkTextFill": "#326EF4",
       "opacity": 1,
       "textAlign": "center",
-      "textBaseline": "middle",
+      "textBaseline": "top",
     },
     "text": Object {
       "fill": "#000000",

packages/s2-core/__tests__/spreadsheet/theme-spec.ts

@@ -1,6 +1,6 @@
 /* eslint-disable jest/expect-expect */
 import { createPivotSheet } from 'tests/util/helpers';
-import type { IGroup, ShapeAttrs } from '@antv/g-canvas';
+import type { Group, IGroup, ShapeAttrs } from '@antv/g-canvas';
 import { get } from 'lodash';
 import type {
   TextBaseline,
@@ -157,7 +157,9 @@ describe('SpreadSheet Theme Tests', () => {
         },
       });
       s2.render();
-      const rowCell = s2.facet.rowHeader.getFirst() as RowCell;
+      const rowCell = (
+        s2.facet.rowHeader.getChildByIndex(0) as Group
+      ).getFirst() as RowCell;
       const actionIconCfg: ShapeAttrs = get(rowCell, 'actionIcons.[0].cfg');
 
       expect(actionIconCfg.fill).toEqual(iconInfo.fill);
@@ -191,7 +193,9 @@ describe('SpreadSheet Theme Tests', () => {
         s2.setThemeCfg(getRowCellThemeCfg(align));
         s2.render();
 
-        const rowCell = s2.facet.rowHeader.getFirst() as RowCell;
+        const rowCell = (
+          s2.facet.rowHeader.getChildByIndex(0) as Group
+        ).getFirst() as RowCell;
 
         const rowCellWidth = get(rowCell, 'meta.width');
         const actionIconCfg: ShapeAttrs = get(rowCell, 'actionIcons.[0].cfg');
@@ -458,13 +462,18 @@ describe('SpreadSheet Theme Tests', () => {
 
         s2.render();
 
-        const rowCell = s2.facet.rowHeader.getChildByIndex(0) as IGroup; // 浙江省
+        const rowCell = (
+          s2.facet.rowHeader.getChildByIndex(0) as Group
+        ).getFirst() as IGroup; // 浙江省
         const textOfRowCell = getTextShape(rowCell);
 
-        const seriesCell = s2.facet.rowIndexHeader.getChildByIndex(3) as IGroup; // 序号1
+        const seriesCell = (
+          s2.facet.rowIndexHeader.getChildByIndex(0) as Group
+        ).getFirst() as IGroup; // 序号1
         const textOfSeriesCell = getTextShape(seriesCell);
+
         expect(textOfRowCell.attr('textBaseline')).toEqual(textBaseline);
-        expect(textOfSeriesCell.attr('textBaseline')).toEqual('top');
+        expect(textOfSeriesCell.attr('textBaseline')).toEqual(textBaseline);
         expect(textOfRowCell.attr('y')).toEqual(textOfSeriesCell.attr('y'));
       },
     );

packages/s2-core/__tests__/unit/cell/row-cell-spec.ts

@@ -1,6 +1,7 @@
 import { get } from 'lodash';
 import { createPivotSheet } from 'tests/util/helpers';
 import type { RowCell } from '@antv/s2';
+import type { Group } from '@antv/g-canvas';
 import type { SpreadSheet } from '@/sheet-type';
 import type { TextAlign } from '@/common';
 
@@ -34,7 +35,9 @@ describe('Row Cell Tests', () => {
         });
         s2.render();
 
-        const provinceCell = s2.facet.rowHeader.getChildByIndex(0) as RowCell;
+        const provinceCell = (
+          s2.facet.rowHeader.getChildByIndex(0) as Group
+        ).getChildByIndex(0) as RowCell;
         const { minX, maxX } = (provinceCell as any).linkFieldShape.getBBox();
 
         // 宽度相当
@@ -67,7 +70,8 @@ describe('Row Cell Tests', () => {
     });
     test('should draw right condition text shape', () => {
       s2.render();
-      const rowCell = s2.facet.rowHeader.getChildByIndex(1);
+      const scrollGroup = s2.facet.rowHeader.getChildByIndex(0) as Group;
+      const rowCell = scrollGroup.getChildByIndex(1);
       expect(get(rowCell, 'textShape.attrs.fill')).toEqual('#5083F5');
     });
 
@@ -88,7 +92,8 @@ describe('Row Cell Tests', () => {
         },
       });
       s2.render();
-      const rowCell = s2.facet.rowHeader.getChildByIndex(1);
+      const scrollRowGroup = s2.facet.rowHeader.getChildByIndex(0) as Group;
+      const rowCell = scrollRowGroup.getChildByIndex(1);
       expect(get(rowCell, 'conditionIconShape.cfg.name')).toEqual('CellUp');
       expect(get(rowCell, 'conditionIconShape.cfg.fill')).toEqual('red');
     });
@@ -109,7 +114,8 @@ describe('Row Cell Tests', () => {
         },
       });
       s2.render();
-      const rowCell = s2.facet.rowHeader.getChildByIndex(0);
+      const scrollGroup = s2.facet.rowHeader.getChildByIndex(0) as Group;
+      const rowCell = scrollGroup.getChildByIndex(0);
       expect(get(rowCell, 'backgroundShape.attrs.fill')).toEqual('#F7B46F');
     });
   });
@@ -135,9 +141,10 @@ describe('Row Cell Tests', () => {
     });
     s2.render();
     test('should draw right condition background shape', () => {
-      const rowCell0 = s2.facet.rowHeader.getChildByIndex(0);
-      const rowCell1 = s2.facet.rowHeader.getChildByIndex(1);
-      const rowCell2 = s2.facet.rowHeader.getChildByIndex(2);
+      const scrollGroup = s2.facet.rowHeader.getChildByIndex(0) as Group;
+      const rowCell0 = scrollGroup.getChildByIndex(0);
+      const rowCell1 = scrollGroup.getChildByIndex(1);
+      const rowCell2 = scrollGroup.getChildByIndex(2);
       expect(get(rowCell0, 'actualText')).toEqual('浙江');
       expect(get(rowCell0, 'backgroundShape.attrs.fill')).toEqual(defaultColor);
       expect(get(rowCell1, 'actualText')).toEqual('义乌');

packages/s2-core/__tests__/unit/facet/header/frozen-row-spec.ts

@@ -0,0 +1,69 @@
+import { createPivotSheet } from 'tests/util/helpers';
+import { get } from 'lodash';
+import { DEFAULT_OPTIONS } from '@/common';
+
+import { FrozenRowCell, SeriesNumberCell } from '@/cell';
+import { PivotRowHeader } from '@/facet/header';
+import { SeriesNumberHeader } from '@/facet/header/series-number';
+
+const s2 = createPivotSheet(
+  {
+    ...DEFAULT_OPTIONS,
+    frozenFirstRowPivot: true,
+    totals: { row: { showGrandTotals: true, reverseLayout: true } },
+    showSeriesNumber: true,
+  },
+  { useSimpleData: false },
+);
+describe('Frozen Row Header Test', () => {
+  test.each(['grid', 'tree'])(
+    'frozen row header group api',
+    (hierarchyType: 'grid' | 'tree') => {
+      s2.setOptions({ hierarchyType });
+      s2.render();
+      const rowHeader: PivotRowHeader = s2.facet.rowHeader as PivotRowHeader;
+
+      expect(rowHeader instanceof PivotRowHeader).toBeTrue();
+      expect(rowHeader.frozenHeadGroup).toBeTruthy();
+      expect(rowHeader.scrollGroup).toBeTruthy();
+
+      expect(rowHeader.frozenHeadGroup.getChildren()).toHaveLength(1);
+      const frozenRowCell = rowHeader.frozenHeadGroup.getChildren()[0];
+
+      expect(frozenRowCell instanceof FrozenRowCell).toBeTrue();
+      expect(get(frozenRowCell, 'meta.height')).toEqual(30);
+
+      expect(rowHeader.scrollGroup.getChildren()).toHaveLength(10);
+      const scrollCell = rowHeader.scrollGroup.getChildren()[0];
+
+      expect(scrollCell instanceof FrozenRowCell).toBeTrue();
+      expect(get(frozenRowCell, 'meta.height')).toEqual(30);
+
+      expect(rowHeader.getFrozenFirstRowHeight()).toBe(30);
+    },
+  );
+});
+
+describe('Frozen Series Number Test', () => {
+  test.each(['grid', 'tree'])(
+    'series number test',
+    (hierarchyType: 'grid' | 'tree') => {
+      s2.setOptions({ hierarchyType });
+      s2.render();
+      const rowIndexHeader: SeriesNumberHeader = s2.facet
+        .rowIndexHeader as SeriesNumberHeader;
+      expect(rowIndexHeader instanceof SeriesNumberHeader).toBe(true);
+
+      const seriesNumberCell = rowIndexHeader.frozenHeadGroup.getChildren();
+      expect(seriesNumberCell).toHaveLength(1);
+
+      expect(
+        rowIndexHeader.scrollGroup.getChildren()[0] instanceof SeriesNumberCell,
+      ).toBe(true);
+
+      expect(seriesNumberCell[0] instanceof SeriesNumberCell).toBe(true);
+
+      expect(get(seriesNumberCell[0], 'meta.height')).toBe(30);
+    },
+  );
+});