🐛 透视表当同时添加迷你图和数据单元格自定义icon时，表现异常

liran19960215 commented 2 weeks ago

🏷 Version

Package	Version
@antv/s2	2.0.0-next.31
@antv/s2-react
@antv/s2-vue	2.0.0-next.16

Sheet Type

[ √ ] PivotSheet
[ ] TableSheet
[ ] GridAnalysisSheet
[ ] StrategySheet
[ ] EditableSheet

🖋 Description

当在透视表中添加迷你图同时对数据单元格添加icon时整个表格左上角会多出来一个icon 表现不符合预期如图所示是对所有成本单元格添加自定义icon 同时对吉林-白山-纸张-成本添加迷你图，但是左上角多出来了icon

⌨️ Code Snapshots

import { PivotSheet, S2DataConfig, S2Options, drawCustomContent, DataCell } from '@antv/s2';

/**
 * 自定义 DataCell，使用 drawCustomContent 绘制简易的 mini 图
 * 查看更多方法 https://github.com/antvis/S2/blob/next/packages/s2-core/src/cell/data-cell.ts
 */
class CustomDataCell extends DataCell {
  // 当数值为对象时，完全接管绘制, 使用内置的 `drawCustomContent` 根据不同的数据结构 (见下方) 绘制不同的图形
  drawTextShape() {
    if (this.isMultiData()) {
      return drawCustomContent(this);
    }

    super.drawTextShape();
  }
}

fetch(
  'https://render.alipay.com/p/yuyan/180020010001215413/s2/total-group.json',
)
  .then((res) => res.json())
  .then(async (data) => {
    const container = document.getElementById('container');
    const s2DataConfig: S2DataConfig = {
      fields: {
        rows: ['province', 'city'],
        columns: ['type'],
        values: ['price', 'cost'],
      },
      meta: [
        {
          field: 'province',
          name: '省份',
        },
        {
          field: 'city',
          name: '城市',
        },
        {
          field: 'type',
          name: '商品类别',
        },
        {
          field: 'price',
          name: '价格',
        },
        {
          field: 'cost',
          name: '成本',
        },
      ],
      // 从  @antv/s2 1.53.0-alpha 开始，如果是多度量的场景，我们期望同一个数据里就包含了多个 values 属性，即：
      // [{ province: "四川", city: "成都", type: "商品", price: 100, cost: 80 }]
      // 而不是：
      // [{ province: "四川", city: "成都", type: "商品", price: 100}, {province: "四川", city: "成都", type: "商品", price: 100 }]
      data: [
        ...data,
        {
          province: '吉林',
          city: '白山',
          type: '纸张',
          cost: {
            // 折线图
            values: {
              type: 'line',
              data: [
                {
                  year: '2017',
                  value: -368,
                },
                {
                  year: '2018',
                  value: 368,
                },
                {
                  year: '2019',
                  value: 368,
                },
                {
                  year: '2020',
                  value: 368,
                },
                {
                  year: '2021',
                  value: 268,
                },
                {
                  year: '2022',
                  value: 168,
                },
              ],
              encode: { x: 'year', y: 'value' },
            },
          },
        },
      ],
    };

    const s2Options: S2Options = {
      width: 600,
      height: 480,
      tooltip: {
        enable: true,
      },
      interaction: {
        copy: { enable: true },
        selectedCellsSpotlight: true,
        hoverHighlight: true,
      },
      customSVGIcons: [
        {
          name: 'customKingIcon',
          // 1. 字符串 (支持自定义颜色)
          src: `<?xml version="1.0" encoding="UTF-8"?><svg t="1634603945212" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="558" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200" fill="currentColor"><defs><style type="text/css"></style></defs><path d="M605.61 884.79h-24.26c-21.34 0-38.66 17.32-38.66 38.66 0 21.34 17.32 38.66 38.66 38.66h24.26c21.34 0 38.66-17.32 38.66-38.66 0-21.35-17.32-38.66-38.66-38.66z" fill="#040000" p-id="559"></path><path d="M950.47 419.76c-22.17-15.48-51.17-16.01-73.92-1.33L715.7 522.53 573.09 223.42c-10.95-22.98-33.55-37.43-58.97-37.75h-0.85c-25.09 0-47.67 13.84-59.05 36.29L302.25 521.82 154.9 419.61c-22-15.18-50.71-15.73-73.27-1.46-22.53 14.32-34.23 40.57-29.8 66.9l70.9 421.76c5.33 32.04 32.82 55.3 65.31 55.3h272.43c21.34 0 38.66-17.32 38.66-38.66 0-21.34-17.32-38.66-38.66-38.66H197.44l-64.99-386.62 136.17 94.46a66.14 66.14 0 0 0 54.01 9.79 66.097 66.097 0 0 0 42.81-34.28l147.54-291.11 138.35 290.2c8.21 17.19 23.41 30.03 41.76 35.19 18.37 5.24 38 2.21 53.99-8.1l148.62-96.17-87.74 386.65h-60.1c-21.34 0-38.66 17.32-38.66 38.66 0 21.34 17.32 38.66 38.66 38.66h68.96c31.16 0 57.71-21.22 64.58-51.57l95.72-421.86c5.97-26.39-4.47-53.42-26.65-68.93zM514.74 151.68c28.08 0 50.85-22.76 50.85-50.85s-22.77-50.85-50.85-50.85c-28.09 0-50.85 22.76-50.85 50.85s22.77 50.85 50.85 50.85zM973.15 277.37c-28.08 0-50.85 22.77-50.85 50.85 0 28.09 22.76 50.85 50.85 50.85 28.08 0 50.85-22.76 50.85-50.85 0-28.08-22.77-50.85-50.85-50.85zM101.69 328.22c0-28.08-22.76-50.85-50.85-50.85S0 300.14 0 328.22c0 28.09 22.76 50.85 50.85 50.85s50.84-22.77 50.84-50.85z" fill="#040000" p-id="560"></path></svg>`,

          // import Icon from '/path/to/icon.svg'
          // 2. 本地文件 (支持自定义颜色, 本质上也是字符串)
          // src: Icon,

          // 3. 在线链接 (不支持自定义颜色)
          // src: 'https://gw.alipayobjects.com/zos/bmw-prod/f44eb1f5-7cea-45df-875e-76e825a6e0ab.svg',
        },
      ],
      // 条件格式
      conditions: {
        icon: [
          {
            field: 'cost',
            position: 'right', // left
            mapping(fieldValue, data) {
              return {
                // icon 用于指定图标条件格式所使用的 icon 类型
                icon: 'customKingIcon',
                // 注意: 如果是在线链接则不支持自定义颜色
                fill: '#30BF78',
              };
            },
          },
        ],
      },
      dataCell: (viewMeta, spreadsheet) => {
        return new CustomDataCell(viewMeta, spreadsheet);
      },
    };

    const s2 = new PivotSheet(container, s2DataConfig, s2Options);

    await s2.render();
  });

🔗 Reproduce Link

https://s2.antv.antgroup.com/zh/examples/analysis/totals/#multiple-values 打开官网demo链接并将上述代码复制粘贴运行即可

🤔 Steps to Reproduce

https://s2.antv.antgroup.com/zh/examples/analysis/totals/#multiple-values 打开官网demo链接并将上述代码复制粘贴运行即可

😊 Expected Behavior

预期效果：左上角不应该添加自定义icon 如果单元格是迷你图且同时满足展示自定义icon的条件按理说不应该展示icon（现在看起来左上角的icon是右下角迷你图的icon偏移了）

😅 Current Behavior

左上角展示了自定义icon 看起来明显不对

💻 System information

Environment	Info
System
Browser

lijinke666 commented 1 week ago

目前不支持 mini 图和字段标记同时使用, 欢迎 PR.

github-actions[bot] commented 1 week ago

你好 @liran19960215，感谢你的建议, 我们会及时评估和排期, 谢谢! 当然, 如果能贡献 PR 帮助我们改进, 不胜感激！

Hello, @liran19960215, thanks for your advice. We will evaluate and schedule in time. Thank you! you could implement it by yourself through the customization capabilities provided by S2. Thanks so much for your understanding.

antvis / S2