feat: 支持渲染 G2 图表

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

@@ -317,7 +317,7 @@ export abstract class BaseCell<T extends SimpleBBox> extends Group {
     return resize?.[type];
   }
 
-  public getBBoxByType(type = CellClipBox.BORDER_BOX) {
+  public getBBoxByType(type = CellClipBox.BORDER_BOX): SimpleBBox {
     const bbox: SimpleBBox = {
       x: this.meta.x,
       y: this.meta.y,

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

@@ -1,5 +1,14 @@
 import type { PointLike } from '@antv/g';
-import { find, findLast, first, get, isEmpty, isEqual, merge } from 'lodash';
+import {
+  find,
+  findLast,
+  first,
+  get,
+  isEmpty,
+  isEqual,
+  isObject,
+  merge,
+} from 'lodash';
 import { BaseCell } from '../cell/base-cell';
 import {
   CellType,
@@ -22,6 +31,8 @@ import type {
   TextTheme,
   ViewMeta,
   ViewMetaIndexType,
+  MultiData,
+  BaseChartData,
 } from '../common/interface';
 import {
   getHorizontalTextIconPosition,
@@ -61,6 +72,27 @@ export class DataCell extends BaseCell<ViewMeta> {
     return CellType.DATA_CELL;
   }
 
+  public isMultiData() {
+    return isObject(this.getMeta().fieldValue);
+  }
+
+  public getRenderChartData(): BaseChartData {
+    const { fieldValue } = this.meta;
+
+    return (fieldValue as MultiData)?.values as BaseChartData;
+  }
+
+  public getRenderChartOptions() {
+    const chartData = this.getRenderChartData();
+    const cellArea = this.getBBoxByType(CellClipBox.CONTENT_BOX);
+
+    return {
+      ...cellArea,
+      ...chartData,
+      autoFit: true,
+    };
+  }
+
   protected getBorderPositions(): CellBorderPosition[] {
     return [CellBorderPosition.BOTTOM, CellBorderPosition.RIGHT];
   }

packages/s2-core/src/common/constant/events/basic.ts

@@ -37,6 +37,7 @@ export enum S2Event {
   DATA_CELL_MOUSE_MOVE = 'data-cell:mouse-move',
   DATA_CELL_BRUSH_SELECTION = 'data-cell:brush-selection',
   DATA_CELL_SELECT_MOVE = 'data-cell:select-move',
+  DATA_CELL_RENDER = 'data-cell:render',
 
   /** ================ Corner Cell ================  */
   CORNER_CELL_HOVER = 'corner-cell:hover',

packages/s2-core/src/common/interface/basic.ts

@@ -1,5 +1,5 @@
-import type { FederatedPointerEvent as Event, Group } from '@antv/g';
-import type { MergedCell } from '../../cell';
+import type { FederatedPointerEvent as Event } from '@antv/g';
+import type { DataCell, MergedCell } from '../../cell';
 import type {
   CustomTreeNode,
   Data,
@@ -376,7 +376,7 @@ export type CellCallback<T extends BaseHeaderConfig> = (
   headerConfig: T,
 ) => S2CellType;
 
-export type DataCellCallback = (viewMeta: ViewMeta) => S2CellType;
+export type DataCellCallback = (viewMeta: ViewMeta) => DataCell;
 
 export type MergedCellCallback = (
   spreadsheet: SpreadSheet,
@@ -502,13 +502,6 @@ export interface GridInfo {
   rows: number[];
 }
 
-export type RenderHandler = (
-  options: Record<string, unknown>,
-  context: {
-    group: Group;
-  },
-) => void;
-
 export interface Point {
   x: number;
   y: number;

packages/s2-core/src/common/interface/emitter.ts

@@ -78,6 +78,7 @@ export interface EmitterType {
   [S2Event.DATA_CELL_CONTEXT_MENU]: CanvasEventHandler;
   [S2Event.DATA_CELL_BRUSH_SELECTION]: (cells: (DataCell | CellMeta)[]) => void;
   [S2Event.DATA_CELL_SELECT_MOVE]: (metas: CellMeta[]) => void;
+  [S2Event.DATA_CELL_RENDER]: (cell: DataCell) => void;
 
   /** ================ Row Cell ================  */
   [S2Event.ROW_CELL_MOUSE_DOWN]: CanvasEventHandler;

packages/s2-core/src/common/interface/s2DataConfig.ts

@@ -10,17 +10,21 @@ export interface BaseChartData {
    * 类型
    */
   type: MiniChartTypes;
+
   /**
    * 数据
    */
   data: RawData[];
+
   /**
    * 坐标轴数据
    */
   encode?: {
     x: keyof RawData;
     y: keyof RawData;
   };
+
+  [key: string]: unknown;
 }
 
 /* 子弹图数据结构 */
@@ -29,10 +33,12 @@ export interface BulletValue {
    * 类型
    */
   type: MiniChartTypes.Bullet;
+
   /**
    * 当前值
    */
   measure: number | string;
+
   /**
    * 目标值
    */

packages/s2-core/src/facet/base-facet.ts

@@ -1275,54 +1275,60 @@ export abstract class BaseFacet {
     this.columnHeader.onColScroll(scrollX, KEY_GROUP_COL_RESIZE_AREA);
   }
 
-  addCell = (cell: S2CellType<ViewMeta>) => {
+  addDataCell = (cell: DataCell) => {
     this.panelScrollGroup?.appendChild(cell);
+    this.spreadsheet.emit(S2Event.DATA_CELL_RENDER, cell);
     this.spreadsheet.emit(S2Event.LAYOUT_CELL_MOUNTED, cell);
   };
 
-  realCellRender = (scrollX: number, scrollY: number) => {
+  realDataCellRender = (scrollX: number, scrollY: number) => {
     const indexes = this.calculateXYIndexes(scrollX, scrollY);
 
     DebuggerUtil.getInstance().logger(
-      'realCellRender:',
+      'realDataCellRender:',
       this.preCellIndexes,
       indexes,
     );
-    const { add, remove } = diffPanelIndexes(this.preCellIndexes!, indexes);
+    const { add: willAddDataCells, remove: willRemoveDataCells } =
+      diffPanelIndexes(this.preCellIndexes!, indexes);
 
     DebuggerUtil.getInstance().debugCallback(DEBUG_VIEW_RENDER, () => {
       // add new cell in panelCell
-      each(add, ([i, j]) => {
+      each(willAddDataCells, ([i, j]) => {
         const viewMeta = this.getCellMeta(j, i);
 
         if (viewMeta) {
           const cell = this.spreadsheet.options.dataCell?.(viewMeta)!;
 
           // mark cell for removing
           cell.name = `${i}-${j}`;
-          this.addCell(cell);
+          this.addDataCell(cell);
         }
       });
-      const allCells = getAllChildCells(
-        this.panelGroup.children,
+      const allDataCells = getAllChildCells<DataCell>(
+        this.panelGroup.children as DataCell[],
         DataCell,
-      ) as DataCell[];
+      );
 
       // remove cell from panelCell
-      each(remove, ([i, j]) => {
-        const findOne = find(allCells, (cell) => cell.name === `${i}-${j}`);
+      each(willRemoveDataCells, ([i, j]) => {
+        const mountedDataCell = find(
+          allDataCells,
+          (cell) => cell.name === `${i}-${j}`,
+        );
 
-        findOne?.remove();
+        mountedDataCell?.remove();
       });
 
       DebuggerUtil.getInstance().logger(
-        `Render Cell Panel: ${allCells?.length}, Add: ${add?.length}, Remove: ${remove?.length}`,
+        `Render Cell Panel: ${allDataCells?.length}, Add: ${willAddDataCells?.length}, Remove: ${willRemoveDataCells?.length}`,
       );
     });
+
     this.preCellIndexes = indexes;
     this.spreadsheet.emit(S2Event.LAYOUT_AFTER_REAL_DATA_CELL_RENDER, {
-      add,
-      remove,
+      add: willAddDataCells,
+      remove: willRemoveDataCells,
       spreadsheet: this.spreadsheet,
     });
   };
@@ -1549,7 +1555,7 @@ export abstract class BaseFacet {
     this.spreadsheet.hideTooltip();
     this.spreadsheet.interaction.clearHoverTimer();
 
-    this.realCellRender(scrollX, scrollY);
+    this.realDataCellRender(scrollX, scrollY);
     this.updatePanelScrollGroup();
     this.translateRelatedGroups(scrollX, scrollY, rowHeaderScrollX);
     if (!skipScrollEvent) {

packages/s2-core/src/facet/pivot-facet.ts

@@ -27,7 +27,7 @@ import {
 import { EXTRA_FIELD, LayoutWidthTypes, VALUE_FIELD } from '../common/constant';
 import { CellType } from '../common/constant/interaction';
 import { DebuggerUtil } from '../common/debug';
-import type { LayoutResult } from '../common/interface';
+import type { LayoutResult, SimpleData } from '../common/interface';
 import type { PivotDataSet } from '../data-set/pivot-data-set';
 import type { SpreadSheet } from '../sheet-type';
 import { safeJsonParse } from '../utils';
@@ -763,7 +763,7 @@ export class PivotFacet extends BaseFacet {
       for (let j = 0; j < cellDataKeys.length; j++) {
         const dataValue: MultiData = get(cellData, cellDataKeys[j]);
 
-        const valueSize = size(get(dataValue?.values, '0'));
+        const valueSize = size(get(dataValue?.values as SimpleData[][], '0'));
 
         if (valueSize > maxLength) {
           // greater length

packages/s2-core/src/facet/table-facet.ts

@@ -946,7 +946,7 @@ export class TableFacet extends BaseFacet {
     };
   };
 
-  addCell = (cell: S2CellType<ViewMeta>) => {
+  addDataCell = (cell: S2CellType<ViewMeta>) => {
     const {
       rowCount: frozenRowCount = 0,
       colCount: frozenColCount = 0,

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

@@ -129,7 +129,7 @@ export const getCellBoxByType = (
   borderPositions: CellBorderPosition[],
   cellStyle: CellTheme,
   boxType: CellClipBox,
-) => {
+): SimpleBBox => {
   if (boxType === CellClipBox.BORDER_BOX) {
     return bbox;
   }

packages/s2-core/src/utils/index.ts

@@ -9,7 +9,6 @@ export * from './export/index';
 export * from './export/copy';
 export * from './interaction';
 export * from './g-renders';
-export * from './custom-render';
 export * from './g-mini-charts';
 export * from './merge';
 export * from './is-mobile';