🐛透视表：自定义列头；合并的列头不显示排序图标，二级有排序图标但是没有排序效果 #2898
Comments
|
目前自定义行列头不支持排序
这个排序图标不应该渲染出来, 是 BUG |
|
那以后会实现列头加上排序的功能吗，可以给加上吗？
♂糖的哀伤♀
***@***.***
…------------------ 原始邮件 ------------------
发件人: "antvis/S2" ***@***.***>;
发送时间: 2024年9月19日(星期四) 中午11:47
***@***.***>;
***@***.******@***.***>;
主题: Re: [antvis/S2] 🐛透视表：自定义列头；合并的列头不显示排序图标，二级有排序图标但是没有排序效果 (Issue #2898)
目前自定义行列头不支持排序
二级列头会显示排序的图标，点击排序可以打开tooltip框，但是点击行内排序没有效果
这个排序图标不应该渲染出来, 是 BUG
—
Reply to this email directly, view it on GitHub, or unsubscribe.
You are receiving this because you authored the thread.Message ID: ***@***.***>
|
你好，我看到明细表在合并列头的时候是可以排序的，为什么透视表在合并列头后就不可以排序了？ 或者让明细表支持相同名称自动聚合也可以的，像下面这张图一样 |
自定义行列头时, 内部实现不同, 透视表是组内排序, 明细表是全局排序, 数据查询逻辑都不同, 所以不支持, 要让透视表在自定义列头的场景同时支持组内排序, 需要进行改造, 有一定的工作量, 后面会排期迭代, 目前没精力, 欢迎 PR.
都自动聚合了那不就又成了透视表了吗? |
|
你好 @dyllike3892654，感谢你的建议, 我们会及时评估和排期, 谢谢! Hello, @dyllike3892654, thanks for your advice. We will evaluate and schedule in time. Thank you! |
是的哈，脑洞开了一下， |
…2893 (#2934) * fix: 开启自定义行列头时, 不应该渲染总计节点和组内排序 icon closes #2898 #2893 * docs: 优化文档 * test: 更新单测 * fix: 明细表非叶子节点不渲染 sort icon * test: 修复单测 * fix: 兼容自定义布局时 dataset 层对象类型 field 的定位处理 * fix: lint fix * refactor: 移除 todo 代码 * feat: 增加自定义行列头对总计小计的支持 * docs: 文档更新 * refactor: 移除 CustomTreeDataSet * test: 增加单测 * test: 单测修复 * test: 单测修复 * refactor: 去除注释 * refactor: 还原 custom-tree 单测 --------- Co-authored-by: wjgogogo <[email protected]>
|
已支持自定义列头的组内排序, 预计本周发布
不过需要明确的一点是, 不管是默认的列头, 还是自定义列头, 只有数值才有排序能力 对于透视表, 即 |
|
🎉 This issue has been resolved in version @antv/s2-v2.0.0-next.31 🎉 The release is available on: Your semantic-release bot 📦🚀 |
|
🎉 This issue has been resolved in version @antv/s2-react-v2.0.0-next.30 🎉 The release is available on: Your semantic-release bot 📦🚀 |
|
🎉 This issue has been resolved in version @antv/s2-vue-v2.0.0-next.16 🎉 The release is available on: Your semantic-release bot 📦🚀 |
🏷 Version
Sheet Type
🖋 Description
我使用的是s2-react和SheetComponent sheetType="pivot" react 透视表组件，不显示tooltip提示行内排序，点击现有的排序功能也无法进行排序
问题：透视表合并表头后，
合并成一级的列头都没有排序图标，所以不能点击显示tooltip和排序；
二级列头会显示排序的图标，点击排序可以打开tooltip框，但是点击行内排序没有效果
刚渲染的时候不会显示排序的Icon，只有自定义加上headerActionIcons才能显示出来排序的Icon，加入headerActionIcons后，会显示tooltip排序，但是没有排序效果，像图片中的这样，这个图片是在columns中设置的分组效果:
columns中设置代码，：
columns：[
{
field: 'a-1',
title: '自定义节点 a-1',
description: 'a-1 描述',
children: [
{
field: 'a-1-1',
title: '自定义节点 a-1-1',
description: 'a-1-1 描述',
children: [
{
field: 'measure-1',
title: '指标 1',
description: '指标 1 描述',
children: [],
},
{
field: 'measure-2',
title: '指标 2',
description: '指标 2 描述',
children: [],
},
],
},
{
field: 'a-1-2',
title: '自定义节点 a-1-2',
description: 'a-1-2 描述',
children: [],
},
],
},
{
field: 'a-2',
title: '自定义节点 a-2',
description: 'a-2 描述',
children: [],
},
],
我不知道是哪个地方出问题了，链接中复现不出来，但是可以在 React自适应 图表实例中显示出来，效果和代码如下
// organize-imports-ignore
import React from 'react';
import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
fetch(
'https://gw.alipayobjects.com/os/bmw-prod/2a5dbbc8-d0a7-4d02-b7c9-34f6ca63cff6.json',
)
.then((res) => res.json())
.then((dataCfg) => {
const data = [
{
'measure-1': 13,
'measure-2': 2,
type: '家具',
sub_type: '桌子',
},
{
'measure-1': 11,
'measure-2': 8,
type: '家具',
sub_type: '椅子',
},
{
'measure-1': 21,
'measure-2': 16,
type: '家具',
sub_type: '茶几',
},
];
const s2DataConfig: S2DataConfig = {
fields: {
columns: [
{
field: 'a-1',
title: '自定义节点 a-1',
description: 'a-1 描述',
children: [
{
field: 'a-1-1',
title: '自定义节点 a-1-1',
description: 'a-1-1 描述',
children: [
{
field: 'measure-1',
title: '指标 1',
description: '指标 1 描述',
children: [],
},
{
field: 'measure-2',
title: '指标 2',
description: '指标 2 描述',
children: [],
},
],
},
{
field: 'a-1-2',
title: '自定义节点 a-1-2',
description: 'a-1-2 描述',
children: [],
},
],
},
{
field: 'a-2',
title: '自定义节点 a-2',
description: 'a-2 描述',
children: [],
},
],
rows: ['type', 'sub_type'],
values: ['measure-1', 'measure-2'],
valueInCols: true,
},
data,
// 自定义节点默认使用
title作为展示名, 也可以通过 meta 来统一进行格式化meta: [
{
field: 'type',
formatter: (value) => '商品类别',
},
{
field: 'sub_type',
formatter: (value) => '商品子类别',
},
{
field: 'a-1',
name: '角头1',
},
{
field: 'a-1-1',
name: '角头2',
},
// 自定义格式化数值
// {
// field: 'measure-1',
// formatter: (value, record, meta) =>
指标: ${value},// },
],
};
const s2Options: S2Options = {
width: 600,
height: 480,
hierarchyType: 'grid',
};
reactDOMClient.createRoot(document.getElementById('container')).render(
<SheetComponent
dataCfg={s2DataConfig}
options={s2Options}
adaptive={{
width: true,
height: false,
getContainer: () => document.getElementById('container'),
}}
/>,
);
});
我的预期效果是在以上的透视表代码中实现 一级列和二级列的排序效果，
⌨ Code Snapshots
🔗 Reproduce Link
🤔 Steps to Reproduce
😊 Expected Behavior
😅 Current Behavior
💻 System information
The text was updated successfully, but these errors were encountered: