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

[lijinke666]

👀 PR includes

✨ Feature

• New feature

📝 Description

数据源类型为 MultiData 支持普通数值单元格和图表单元格 共存.

const s2DataConfig = {
  data: [
    // 普通数据
    {
      number: 1343,
      province: '浙江省',
      city: '杭州市',
      type: '办公用品',
      sub_type: '纸张',
    },
    {
      number: {
        // G2 图表数据 (Spec) https://g2.antv.antgroup.com/examples/general/interval/#column
        values: {
          type: 'view',
          autoFit: true,
          padding: 0,
          axis: false,
          children: [
            {
              type: 'image',
              style: {
                src: 'https://gw.alipayobjects.com/zos/rmsportal/NeUTMwKtPcPxIFNTWZOZ.png',
                x: '50%',
                y: '50%',
                width: '100%',
                height: '100%',
              },
              tooltip: false,
            },
            {
              type: 'heatmap',
              data: {
                type: 'fetch',
                value: 'https://assets.antv.antgroup.com/g2/heatmap.json',
              },
              encode: { x: 'g', y: 'l', color: 'tmp' },
              style: { opacity: 0 },
              tooltip: false,
            },
          ],
        },
      },
      province: '浙江省',
      city: '舟山市',
      type: '办公用品',
      sub_type: '笔',
    },
  ],
};

前置条件, 确保已安装 @antv/g2

yarn add @antv/g2 --save

1. 在 @antv/s2 中使用

import { PivotSheet, DataCell } from '@antv/s2';
import { renderToMountedElement, stdlib } from '@antv/g2';

// 1.1 自定义 `DataCell`, 如果是图表数据, 则不渲染默认的文本

class ChartSheetDataCell extends DataCell {
  public drawTextShape(options) {
    if (this.isMultiData()) {
      return null;
    }

    super.drawTextShape(options);
  }
}
  

const s2 = new PivotSheet(container, s2DataConfig, {
  dataCell: (viewMeta) => new ChartSheetDataCell(viewMeta, viewMeta.spreadsheet)
});

s2.render();

// 1.2 监听数值单元格渲染完成后, 使用 `G2` 提供的 `renderToMountedElement` 将图表挂载在 `S2` 单元格实例上
s2.on(S2Event.DATA_CELL_RENDER, (cell) => {
  const chartOptions = cell.getRenderChartOptions();

  renderToMountedElement(chartOptions, {
    group: cell,
    // https://g2.antv.antgroup.com/manual/extra-topics/bundle#g2stdlib
    library: stdlib(),
  });
});

2. 在 @antv/s2-react 使用

import { SheetComponent } from '@antv/s2-react';
import { renderToMountedElement, stdlib } from '@antv/g2';

const onDataCellRender = (cell) => {
  const chartOptions = cell.getRenderChartOptions();

  renderToMountedElement(chartOptions, {
    group: cell,
    // 根据实际需要渲染的图表，选择 library：https://g2.antv.antgroup.com/manual/extra-topics/bundle#g2stdlib
    library: stdlib(),
  });
};


<SheetComponent dataCfg={s2DataConfig} sheetType="chart" onDataCellRender={onDataCellRender} /> 

3. 废弃 renderToMountedCell() 和 renderConfig, 统一使用 onDataCellRender
4. G2 层在单元格按需渲染场景有 bug, 以提交 PR 修复 fix: cannot find document if group destroyed G2#5870

TODO:

• 兼容 Tooltip 展示

优化前	优化后

• dataCell 禁用 tooltip, 刷选 dataCell 还是会展示
• 复制/导出兼容

优化前	优化后

• 兼容暗黑模式
• 单测
• 文档
• Demo

🖼️ Screenshot

🔗 Related issue link

🔍 Self-Check before the merge

• Add or update relevant docs.
• Add or update relevant demos.
• Add or update test case.
• Add or update relevant TypeScript definitions.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
antvis-s2	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 12, 2023 9:05am

[github-actions]

Size Change: +395 B (0%)

Total Size: 311 kB

Filename	Size	Change
./packages/s2-core/dist/index.min.js	217 kB	+322 B (0%)
./packages/s2-react/dist/index.min.js	67.6 kB	+73 B (0%)

ℹ️ View Unchanged

Filename	Size
./packages/s2-core/dist/style.min.css	402 B
./packages/s2-react/dist/style.min.css	3.99 kB
./packages/s2-vue/dist/index.min.js	20.2 kB
./packages/s2-vue/dist/style.min.css	1.98 kB

_{compressed-size-action}

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Comparison is base (ecdc9c8) 75.77% compared to head (6df62c3) 78.00%.
Report is 219 commits behind head on next.

Additional details and impacted files

@@            Coverage Diff             @@
##             next    #2437      +/-   ##
==========================================
+ Coverage   75.77%   78.00%   +2.22%     
==========================================
  Files         257      270      +13     
  Lines       11994    12091      +97     
  Branches     2464     2448      -16     
==========================================
+ Hits         9088     9431     +343     
+ Misses       1398     1155     -243     
+ Partials     1508     1505       -3     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[github-actions]

你好, @lijinke666 CI 执行失败, 请点击 [Details] 按钮查看, 并根据日志修复。

Hello, @lijinke666 CI run failed, please click the [Details] button for detailed log information and fix it.

[wjgogogo]

交互还有点冲突，单元格选中的黑框在点击 chart 交互后，就没有了

[lijinke666]

交互还有点冲突，单元格选中的黑框在点击 chart 交互后，就没有了

这个不好搞, 只能尽量在主题配置测解决, 比如隐藏选中的黑框

[lijinke666]

🎉 This PR is included in version @antv/s2-v2.0.0-next.10 🎉

The release is available on:

• npm package (@next dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[lijinke666]

🎉 This PR is included in version @antv/s2-react-v2.0.0-next.9 🎉

The release is available on:

• npm package (@next dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[lijinke666]

🎉 This PR is included in version @antv/s2-vue-v2.0.0-next.9 🎉

The release is available on:

• npm package (@next dist-tag)
• GitHub release

Your semantic-release bot 📦🚀