Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

🙏透视表、明细表希望支持按维度+数值的列宽自适应,且能设置最大宽度并兼容自动换行 #3096

Open
DantinZhang opened this issue Feb 10, 2025 · 2 comments
Labels
🙏feature request 新需求支持

Comments

@DantinZhang
Copy link

Describe the feature / 功能描述

一、需求

  1. 透视表、明细表,能够设置列宽自适应,按维度和数值实际宽度显示
  2. 能设置最大宽度(如200),超过最大宽度,默认用…,hover展示tooltip完整信息
  3. 如果设置了自动换行,则换行显示,超出最大宽度时自动换行,最大100字符,超过仍然显示“…”

二、现状

1. 关于列宽自适应

  • 2.0版本已支持 layoutWidthType: 'compact' 实现数值单元格列宽自适应,但不支持行头列头的列宽自适应,某些情况会无法完全显示列头的文本
  • 列宽自适应时,貌似不支持设置最大宽度

2. 关于自动换行

  • 没有看到超出最大字符即省略的配置,好像只有maxLines设置超出行数省略。
  • 最好能配合列宽自适应设置的最大宽度使用,当设置自动换行时,超出最大宽度时即自动换行,否则正常用...省略

三、官网自测示例

import { PivotSheet } from '@antv/s2';
 
Promise.resolve({
  "describe": "标准交叉表数据。",
  "fields": {
    "rows": [
      "province",
      "city"
    ],
    "columns": [
      "type",
      "sub_type"
    ],
    "values": [
      "number"
    ],
    "valueInCols": true
  },
  "meta": [
    {
      "field": "number",
      "name": "数量"
    },
    {
      "field": "province",
      "name": "省份"
    },
    {
      "field": "city",
      "name": "城市"
    },
    {
      "field": "type",
      "name": "类别"
    },
    {
      "field": "sub_type",
      "name": "子类别"
    }
  ],
  "data": [
    {
      "number": 'sdfwerwegerg1asdwergregwerqwresdgfsg',
      "province": "浙江省",
      "city": "杭州市",
      "type": "家具",
      "sub_type": "桌子"
    },
    {
      "number": 2367,
      "province": "浙江省",
      "city": "绍兴市",
      "type": "家具",
      "sub_type": "桌子"
    },
    {
      "number": 5343,
      "province": "浙江省",
      "city": "杭州市",
      "type": "家具",
      "sub_type": "沙发"
    },
    {
      "number": 632,
      "province": "浙江省",
      "city": "绍兴市",
      "type": "家具",
      "sub_type": "沙发"
    },
    {
      "number": '345',
      "province": "浙江省",
      "city": "杭州市",
      "type": "办公用品",
      "sub_type": "笔"
    },
    {
      "number": 1304,
      "province": "浙江省",
      "city": "绍兴市",
      "type": "办公用品",
      "sub_type": "笔"
    },
  ],
})
  .then((dataCfg) => {
    const container = document.getElementById('container');
 
    // 详情请查看: https://s2-v1.antv.antgroup.com/zh/docs/manual/advanced/custom/cell-size
    const s2Options = {
      width: 600,
      height: 480,
      hierarchyType: 'grid',
      style: {
        layoutWidthType: 'compact',
        dataCell: {
          width: 100,
          height: 90,
          // 最大行数,文本超出后将被截断
          maxLines: 2,
          // 文本是否换行
          wordWrap: true,
          // 可选项见:https://g.antv.antgroup.com/api/basic/text#textoverflow
          textOverflow: 'ellipsis',
        },
      },
    };
 
    const s2 = new PivotSheet(container, dataCfg, s2Options);
    s2.render();
  });

四、其他说明

  1. 目前我们还在用s2 1.0,有比较多的需求不能满足,但是升级的工作量不小,所以迟迟没有升级,希望能确认系列需求能够支持之后,我们再一次性升级到最新的版本
  2. 目前我们还在同步使用s2-vue 1.x版本中的SheetComponent,但是官网提示该版本2.x也不再维护,如果本需求能够支持,是否s2-vue 2.x版本也能支持
  3. 希望能确认下能否支持,以及支持的大概排期时间,感谢🙏

Design the API / API 设计

不成熟的几个api设想

const s2Options = {
  ......,
  style: {
    layoutWidthType: {
      type: 'compact',
      maxWidth: 200,
    },
    dataCell: {
      width: 100,
      height: 90,
      // 文本换行配置
      wordWrapConfig: {
        isWrap: true,
        // 最大宽度,超过即换行
        maxWidth: 200,
        // 最大字符数,文本超出后将...省略
        maxLength: 100,
        textOverflow: 'ellipsis',
      },

    },
  },
};

Are you willing to contribute? / 是否愿意参与贡献?

❌ No / 否

@DantinZhang DantinZhang added the 🙏feature request 新需求支持 label Feb 10, 2025
Copy link
Contributor

你好 @DantinZhang:

提 Issue 须知

⚠️ 在提出问题前,请确保你已经仔细阅读👓/搜索🔍过 官方文档常见问题 以及 图表示例, 并且已经搜索查阅过相关 Issues 列表Discussions 列表. 当你确定自己的问题没有解决方案时,请提交 issue。 ⚠️

如果是使用问题,不知道怎么用,移步 Discussions 讨论区 并提供 有效信息 进行 提问

参与社区共建

这是一个开源项目, 我们也有繁忙的业务要做, 是用自己的业余时间在维护, 为爱发电, 精力有限, 所以有时候 issue 响应速度不是那么及时, 如果你遇到了问题, 或者对 IssuesDiscussions 列表的问题感兴趣, 可以直接认领并尝试修复 (贡献指南),帮助 S2 变得更好, 而不是一味的埋怨和催促, 我们不是甲方乙方的关系.

@Create-Peace
Copy link

这个功能可以在CustomFacet中重写getAdaptGridColWidth方法实现,根据自己的具体需求实现

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🙏feature request 新需求支持
Projects
None yet
Development

No branches or pull requests

2 participants