feat: 支持在单元格内渲染 G2 图表

package.json

@@ -170,5 +170,8 @@
   "repository": {
     "type": "git",
     "url": "https://github.com/antvis/S2.git"
+  },
+  "tnpm": {
+    "mode": "pnpm"
   }
 }

packages/s2-core/__tests__/spreadsheet/interaction-brush-selection-scroll-spec.ts

@@ -143,6 +143,8 @@ const expectScrollBrush = async (
   const allCells = s2.interaction.getCells();
   const lastCell = allCells[allCells.length - 1];
 
+  await sleep(500);
+
   expect(s2.facet.getScrollOffset().scrollY).toBeGreaterThan(0);
   expect(brushRange.start.colIndex).toBe(allCells[0].colIndex);
   expect(brushRange.start.rowIndex).toBe(allCells[0].rowIndex);
@@ -238,6 +240,7 @@ describe('PivotSheet Brush Selection Scroll Tests', () => {
     } as any);
 
     await emitBrushEvent(s2, 200, 200);
+    await sleep(500);
 
     expect(s2.facet.getScrollOffset().scrollY).toBeGreaterThan(0);
     expect(s2.interaction.getCells()).not.toBeEmpty();
@@ -280,6 +283,7 @@ describe('PivotSheet Brush Selection Scroll Tests', () => {
 
     // 只刷选 [省份]
     await emitBrushEvent(s2, 100, 200);
+    await sleep(500);
 
     // 只选中 [浙江省, 四川省]
     expect(s2.facet.getScrollOffset().scrollY).toBeGreaterThan(0);

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

@@ -678,7 +678,7 @@ describe('Scroll Tests', () => {
 
       canvas.dispatchEvent(wheelEvent);
 
-      await sleep(200);
+      await sleep(1000);
 
       expect(onScroll).toHaveBeenCalled();
     });

packages/s2-core/__tests__/spreadsheet/spread-sheet-spec.ts

@@ -140,6 +140,8 @@ describe('SpreadSheet Tests', () => {
       s2.updateScrollOffset({
         offsetX: { value: 30 },
       });
+      await sleep(500);
+
       expect(s2.facet.hScrollBar.current()).toBeGreaterThan(0);
       expect(s2.facet.getScrollOffset()).toMatchInlineSnapshot(`
         Object {
@@ -165,6 +167,8 @@ describe('SpreadSheet Tests', () => {
       s2.updateScrollOffset({
         offsetY: { value: 20 },
       });
+
+      await sleep(500);
       expect(s2.facet.vScrollBar.current()).toBeGreaterThan(0);
       expect(s2.facet.getScrollOffset()).toMatchInlineSnapshot(`
         Object {
@@ -200,6 +204,8 @@ describe('SpreadSheet Tests', () => {
       s2.updateScrollOffset({
         rowHeaderOffsetX: { value: 30 },
       });
+
+      await sleep(500);
       expect(s2.facet.hRowScrollBar.current()).toBeGreaterThan(0);
       expect(s2.facet.getScrollOffset()).toMatchInlineSnapshot(`
         Object {
@@ -230,6 +236,9 @@ describe('SpreadSheet Tests', () => {
         offsetX: { value: 30 },
         rowHeaderOffsetX: { value: 40 },
       });
+
+      await sleep(500);
+
       expect(s2.facet.vScrollBar.current()).toBeGreaterThan(0);
       expect(s2.facet.hScrollBar.current()).toBeGreaterThan(0);
       expect(s2.facet.hRowScrollBar.current()).toBeGreaterThan(0);

packages/s2-core/__tests__/unit/cell/__snapshots__/data-cell-spec.ts.snap

@@ -0,0 +1,57 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Data Cell Tests Data Cell Formatter & Method Tests should get empty chart data and default options 1`] = `
+Object {
+  "autoFit": true,
+  "height": 83,
+  "theme": Object {
+    "type": "light",
+  },
+  "width": 83,
+  "x": NaN,
+  "y": NaN,
+}
+`;
+
+exports[`Data Cell Tests Data Cell Formatter & Method Tests should get multiple chart data and all options 1`] = `
+Object {
+  "autoFit": true,
+  "data": Array [
+    Object {
+      "genre": "Sports",
+      "sold": 275,
+    },
+  ],
+  "encode": Object {
+    "color": "genre",
+    "x": "genre",
+    "y": "sold",
+  },
+  "type": "interval",
+}
+`;
+
+exports[`Data Cell Tests Data Cell Formatter & Method Tests should get multiple chart data and all options 2`] = `
+Object {
+  "autoFit": true,
+  "data": Array [
+    Object {
+      "genre": "Sports",
+      "sold": 275,
+    },
+  ],
+  "encode": Object {
+    "color": "genre",
+    "x": "genre",
+    "y": "sold",
+  },
+  "height": 83,
+  "theme": Object {
+    "type": "dark",
+  },
+  "type": "interval",
+  "width": 83,
+  "x": 8,
+  "y": 208,
+}
+`;

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

@@ -99,7 +99,7 @@
     );
   });
 
-  describe('Data Cell Formatter Tests', () => {
+  describe('Data Cell Formatter & Method Tests', () => {
     beforeEach(() => {
       const container = document.createElement('div');
 
@@ -137,6 +137,64 @@
 
       expect(dataCell.getTextShape().attr('fill')).toEqual(DEFAULT_FONT_COLOR);
     });
+
+    test('should get empty chart data and default options', () => {
+      const dataCell = new DataCell(meta, s2);
+
+      expect(dataCell.isMultiData()).toBeFalsy();
+      expect(dataCell.isChartData()).toBeFalsy();
+      expect(dataCell.getRenderChartData()).toBeUndefined();
+      expect(dataCell.getRenderChartOptions()).toMatchSnapshot();
+    });
+
+    test('should get correctly cell data status', () => {
+      const multipleMeta = {
+        fieldValue: {
+          values: [1, 2, 3],
+        },
+      } as unknown as ViewMeta;
+
+      const dataCell = new DataCell(multipleMeta, s2);
+
+      expect(dataCell.isMultiData()).toBeTruthy();
+      expect(dataCell.isChartData()).toBeFalsy();
+    });
+
+    test('should get multiple chart data and all options', () => {
+      s2.setThemeCfg({ name: 'dark' });
+
+      const multipleMeta = {
+        fieldValue: {
+          values: {
+            type: 'interval',
+            autoFit: true,
+            data: [
+              {
+                genre: 'Sports',
+                sold: 275,
+              },
+            ],
+            encode: {
+              x: 'genre',
+              y: 'sold',
+              color: 'genre',
+            },
+          },
+        },
+        value: 'value',
+        width: 100,
+        height: 100,
+        x: 0,
+        y: 200,
+      } as unknown as ViewMeta;
+
+      const dataCell = new DataCell(multipleMeta, s2);
+
+      expect(dataCell.isMultiData()).toBeTruthy();
+      expect(dataCell.isChartData()).toBeTruthy();
+      expect(dataCell.getRenderChartData()).toMatchSnapshot();
+      expect(dataCell.getRenderChartOptions()).toMatchSnapshot();
+    });
   });
 
   describe('Data Cell Shape Tests', () => {
@@ -209,7 +267,7 @@
   });
 
   describe('Condition by formattedValue Tests', () => {
     const s2 = createPivotSheet(
       {
         conditions: {
           text: [
@@ -254,8 +312,9 @@
       expect(dataCell?.getTextShape().parsedStyle.fill).toBeColor('#D03050');
     });
   });
+
   describe('Condition Tests', () => {
     const s2 = createPivotSheet({
       conditions: {
         text: [
           {
@@ -530,8 +589,6 @@
   });
 
   describe('Data Cell Interaction', () => {
-    // let s2: SpreadSheet;
-
     beforeEach(async () => {
       s2 = createPivotSheet({
         showSeriesNumber: true,
@@ -541,6 +598,11 @@
       });
       await s2.render();
     });
+
+    afterEach(() => {
+      s2.destroy();
+    });
+
     const emitEvent = (type: S2Event, event: Partial<OriginalEvent>) => {
       s2.emit(type, {
         originalEvent: event,

packages/s2-core/__tests__/unit/sheet-type/pivot-sheet-spec.ts

@@ -3,7 +3,7 @@ import { Canvas, CanvasEvent } from '@antv/g';
 import { cloneDeep, get, last } from 'lodash';
 import dataCfg from 'tests/data/simple-data.json';
 import { waitForRender } from 'tests/util';
-import { getContainer } from 'tests/util/helpers';
+import { createPivotSheet, getContainer, sleep } from 'tests/util/helpers';
 import type {
   BaseEvent,
   BaseTooltipOperatorMenuOptions,
@@ -498,7 +498,7 @@ describe('PivotSheet Tests', () => {
     expect(afterRender).toHaveBeenCalledTimes(1);
   });
 
-  test('should emit after real dataCell render', async () => {
+  test('should emit after real dataCell render event', async () => {
     const afterRealDataCellRender = jest.fn();
     const sheet = new PivotSheet(container, dataCfg, s2Options);
 
@@ -511,6 +511,36 @@ describe('PivotSheet Tests', () => {
     expect(afterRealDataCellRender).toHaveBeenCalledTimes(1);
   });
 
+  test('should emit data cell render event', async () => {
+    const cornerCellRender = jest.fn();
+    const rowCellRender = jest.fn();
+    const colCellRender = jest.fn();
+    const dataCellRender = jest.fn();
+    const seriesNumberCellRender = jest.fn();
+    const layoutCellRender = jest.fn();
+
+    const sheet = createPivotSheet(
+      {
+        ...s2Options,
+        showSeriesNumber: true,
+      },
+      { useSimpleData: false },
+    );
+
+    sheet.on(S2Event.CORNER_CELL_RENDER, cornerCellRender);
+    sheet.on(S2Event.ROW_CELL_RENDER, rowCellRender);
+    sheet.on(S2Event.COL_CELL_RENDER, colCellRender);
+    sheet.on(S2Event.DATA_CELL_RENDER, dataCellRender);
+    sheet.on(S2Event.SERIES_NUMBER_CELL_RENDER, seriesNumberCellRender);
+    sheet.on(S2Event.LAYOUT_CELL_RENDER, layoutCellRender);
+
+    await sheet.render();
+    await sleep(500);
+
+    expect(dataCellRender).toHaveBeenCalledTimes(8);
+    expect(layoutCellRender).toHaveBeenCalledTimes(20);
+  });
+
   test('should updatePagination', () => {
     s2.updatePagination({
       current: 2,

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

@@ -34,6 +34,7 @@ import {
   PivotSheet,
   type S2DataConfig,
   type S2Options,
+  type TooltipOperatorMenuItems,
 } from '@/index';
 import type { BaseFacet } from '@/facet/base-facet';
 import type { BBox } from '@/engine';
@@ -256,6 +257,9 @@ describe('Tooltip Utils Tests', () => {
           options: {
             tooltip,
           },
+          interaction: {
+            getInteractedCells: jest.fn(() => []),
+          },
         } as unknown as SpreadSheet;
 
         expect(getTooltipOptions(spreadsheet, {} as Event)).toEqual({
@@ -306,6 +310,9 @@ describe('Tooltip Utils Tests', () => {
           options: {
             tooltip,
           },
+          interaction: {
+            getInteractedCells: jest.fn(() => []),
+          },
         } as unknown as SpreadSheet;
 
         const tooltipOptions = omit(
@@ -330,16 +337,43 @@ describe('Tooltip Utils Tests', () => {
       },
     );
 
+    test('should use interacted cell type if cannot get current cell type', () => {
+      const mockInteractedCell = { cellType: CellType.DATA_CELL };
+
+      const tooltip: Tooltip = {
+        enable: true,
+        [CellType.DATA_CELL]: {
+          enable: false,
+        },
+        content: '',
+        operation: {},
+      };
+
+      const spreadsheet = {
+        getCellType: () => undefined,
+        options: {
+          tooltip,
+        },
+        interaction: {
+          getInteractedCells: jest.fn(() => [mockInteractedCell]),
+        },
+      } as unknown as SpreadSheet;
+
+      const tooltipOptions = getTooltipOptions(spreadsheet, {} as Event);
+
+      expect(tooltipOptions?.enable).toBeFalsy();
+    });
+
     test('should filter not displayed tooltip operation menus', () => {
       const mockCell = {
         cellType: CellType.DATA_CELL,
       } as unknown as S2CellType;
       const onClick = jest.fn();
 
-      const defaultMenus = [
+      const defaultMenus: TooltipOperatorMenuItems = [
         {
           key: 'default-menu',
-          text: 'default-menu',
+          label: 'default-menu',
         },
       ];