g2-extensions-table
- Dominant language
- TypeScript
- Stars
- 12.6k
- Forks
- 1.7k
- PR merge metrics
- No merged PRs in 30d
Description
### AntV Open Source Contribution Plan(可选)
- [X] 我同意将这个 Issue 参与 OSCP 计划
### Issue 类型
专家任务
### 任务介绍
对于数组数据,可以使用 line、interval、point 等 mark 去可视化,对于完成度百分比数据,我们可以使用 gauge、liquid 等去可视化。
而对于更高维度的数据可视化,有几种方案:
- [x] 增加 聚合的 transform,比如 groupBy 等
- [x] 使用 series 等通道,但是对于不同图形有限制,不是所有 mark 都有这些通道
- [x] 使用平行坐标系,但是对于维度值数量比较多的,效果不好
- [ ] 表格 table
目前前三种都是 G2 能支持的,只有 table 目前不支持,而只有表格 table 是无论多少维度的数据,都能很好的支持显示的。
### 技术方案
```ts
chart
.table()
.data(dataArr)
.style({
/* 各种样式配置,需要考虑,参考 S2 */
});
```
核心提示:
- mark 中什么都不做,直接透传数据和配置。
- shape.table 中获得画布剩余视窗空间、字段列、行列高度等信息去处理视窗显示的数据
- 按需显示滚动条,以及滚动条的事件
- 仅仅只实现只有列头的表格,无行头
- 表头锁定
最终在 [g2-extensions](https://github.com/antvis/g2-extensions) 中增加一个 @antv/g2-extension-table 的包。
### 参考说明
一个简单的实现:https://observablehq.com/@pearmini/g2-table

但是缺失功能:
- 样式配置,比如颜色,高度等
- 大数据下的滚动条
- 视窗按需渲染
Contributor guide
Research direction
Start with the referenced Observable implementation and the proposed @antv/g2-extension-table package in g2-extensions. Review the table mark and shape.table responsibilities, then define the remaining work around styling, viewport rendering, scrollbars, and a locked header. Done means a column-header-only table can display data with the requested configuration and large-data behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- data-visualization
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 25/100