S2: 进击的表格看数体验

avatar
数据可视化 @蚂蚁集团

image.png

导语

AntV S2 是一个专注于数据表领域的可视分析引擎,旨在提供实用(好用、简单、易扩展)的多维可视分析表解决方案。去年品牌日(2021.11.22),我们开源了 antvis/S2 (/ɛs tuː/),作为 AntV 的新成员,在蚂蚁内部解决了原有商业表格软件扩展难、交互差、性能吃紧的问题。

在过去的一年里,我们经历了一段疯狂修 Bug 、增加新特性(更新日志)和补充文档的日子,在此非常感谢来自社区同学给我们提供的建议和贡献。经过 1000+ PR ,200+ release 的快速迭代,我们关闭了 400+ issues,新增了 80+ 示例 Demo,使得 S2 在社区生态、分析能力、性能上都有了新的提升,也因此收获了来自社区 1k+ 🌟 的鼓励。

开源一年后的今天,我们也在思考,如何才能让 S2 走得更远,拓展表更多的分析场景。

看数分析新姿势

今年,我们一直围绕着 “如何提高看数分析专业度” 这个方向进行探索,按照 “数据分析” -> “功能沉淀” 的思考模式进行功能拓展,在真实的业务分析场景驱动下,我们增加了如下特性:

内置 mini 图绘制

在指标趋势分析场景下,通常我们希望看到数据的全局走势。走势分析不仅需要包含具体的涨跌,最好还能展示出固定时间段内的趋势图,或者指标的完成情况(进度),所以我们在表格里提供了 mini 图的绘制。为了减少对外部组件库的依赖,我们内置了一个十分轻量的,基于 @antv/g 绘制的 mini 图库,以极小的性能开销在单元格内绘制出子弹图、折线图及柱状图。

新的动态主题生成方案

由于表格体内色彩要素过多,即使用户可以通过主题 schema 完整定制,但过程仍显繁琐。为满足客制化的主题诉求,我们在 1.0 主题的基础上,优化了主题取色机制,提供了根据 主题色生成色板 的功能。想要了解更多请查看 主题配置 文档。

「色板主题映射机制」

同时,我们也在官网中提供了 自助色板调色工具,所见即所得帮助你快速调配色板,「一键复制粘贴」进项目即可使用。

更强大的字段标记能力

字段标记」是表格分析里十分常用的图形语法,通过不同通道去标记用户重点关注的数据,而今年我们也继续打磨了这个功能点:

  • 条形图通道支持双向绘制。
  • 表头单元格支持图标 、文本、背景字段标记。
  • 背景色字段标记支持智能反色。

近乎 100% 的性能提升

虽然 S2 1.0 已经能扛住 100w 海量数据的考验,但极致的性能体验一直是我们的首要追求。今年继续针对性能开启专项,从数据加工到渲染全链路层层优化,最终,表格的渲染速度相较 1.0 版本得到了约 2 倍 提升:

VIP 包厢那些事儿

去年的这个时候我们开放了一个只有 9 人的交流包厢,到今天已经壮大成好几百人的 “会场”。在这里每天有专人值班的答疑 bot(表哥&表姐)为大家进行服务,同时也能触及用户的需求原声。这个过程中,遇到了不少“诡计多端” 的问题,让我们时不时停下来反思自查:

  • 是文档写的不够全面?
  • 还是 API 扩展性不够好?

这才有了我们 200 多次疯狂发版的故事。其中 s2-vue 就是在此包厢大家的监(催)督(促)下诞生的。

目前 S2 支持原生、React 组件和 Vue (3.0) 组件引入的方式使用。(S2-Vue 2.0 版本期待你的贡献!)

此外,为了进一步降低新用户的上手成本,我们在不断增加官网示例 Demo 的基础上,新添了一个在线体验 S2 功能集的 PlayGround,支持交互式的在线体验, 探索 S2 表格基础特性,未来还将支持导入数据集、导出 S2 配置等功能 (敬请期待)。

应广大用户要求,我们提供了一个编辑表格组件,满足大家对于表格编辑的基本诉求。如果结合 这篇文章 服用,你也可以用 S2 快速封装一个自己的精简版 Excel 组件。

最后非常感谢社区 zeyongTsai 同学的贡献,给明细表增加了呼声最高的多级表头特性。(生病住院的情况下完成了整个 PR,修复了所有的单测、Bug,补充文档、Demo,简直不要太感人。如果这位同学看到蹲个联系方式送 AntV 周边)

所以,这么厉害的包厢走过路过请不要错过,我们的客服小哥哥小姐姐们会尽力提供海底捞式的答疑服务。(如果进群之后没有达到预期也请大家理解下,可能是客服有自己的 🧱 要搬 0x0)

表格还能这么玩儿

得益于 S2 强大的自定义能力,我们几乎可以将所有内置的单元格进行重写,从而得到一个全新的表格。因此,除了正常的符合业务语义的表格外,我们也可以利用 S2 绘制一些有意思的表格。

S2 全新版本预告

为了能全面拥抱 AntV 生态,我们在下一个新版本中升级了底层渲染引擎 (G5.0),并将 1.0 版本中不再能支持我们走得更远的老旧代码逻辑进行重新设计。将带来如下新特性:

  • 全新布局升级
  • 移动端体验优化
  • 支持 TypeScript 严格模式
  • 「图·表组件」 S2 X G2 5.0

在正式版发布之前,我们还有很多事情要做。如果你已经迫不及待尝鲜,可以尝试我们的 Next 版本。(但不建议直接升级)

接下来要做的事情

  • 提供从 1.0 迁移至 2.0 的 codemod 工具。
  • 补充相关文档案例。
  • 性能的进一步提升。
  • G 5.0 新特性全面接入。
  • 支持 React 18。

结语

非常感谢你的耐心阅读,我们深知依然还有很多遗漏和不足,欢迎大家在 GitHub 给我们反馈问题。我们今年也做了很多工程优化,研发体验更加丝滑,欢迎有有兴趣的同学一起加入贡献~

最后,感谢每一位为 S2 添砖加瓦过的小伙伴(历史贡献者),是你们的努力让 S2 不断变好。


附录

AntV 发布详情

  • 主文
  • 技术专文
  • 设计专文
  • 学海无涯