antvis / antvis/G2

g2-extensions-table

Open
#5,841 2 comments 0 reactions 0 assignees View on GitHub
OSCP v5
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

![image](https://github.com/antvis/G2/assets/7856674/543b757f-be98-46d9-8529-60e47e57bbd7)

但是缺失功能:

- 样式配置,比如颜色,高度等
- 大数据下的滚动条
- 视窗按需渲染

Contributor guide

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.