TellPlot 可编辑图表引擎 | 邓枭雄项目案例
个人开源项目 · v1.0 已发布

TellPlot 可编辑图表引擎

把排序、递归分组、折叠、固定、注释、撤销和导出统一到确定性 ViewSpec,让 DOM、React 18/19 与 Vue 3 共享同一套图表编辑内核。

我的职责

独立完成产品边界、编辑交互、领域模型、框架适配、质量体系与公开发布。

核心问题

常见图表库解决渲染,却缺少可嵌入业务产品的编辑状态、历史、导出和框架一致性。

核心决策

以不可变 SourceData 和确定性 ViewSpec 分离事实与表达,用唯一编辑内核服务 DOM、React 和 Vue。

公开验证

tellplot@1.0.0、生产官网、在线工作台、文档与 GitHub Release 均可直接访问。

公开边界

个人独立开源项目,采用 MIT 许可证。tellplot@1.0.0 已发布至 npm,代码、文档、GitHub Release 与生产官网均可公开核验。

案例主线

从产品问题到可验证交付。

01 / 产品问题

图表库擅长渲染,但业务产品还需要可编辑、可撤销、可持久化的图表状态。

排序、分组、折叠、固定、注释和导出如果散落在宿主业务代码里,不同框架会形成多套实现,交互结果与升级成本都难以控制。

产品目标:让图表编辑成为稳定、可嵌入的基础能力,而不是一次性的页面逻辑。
02 / 产品判断

把业务事实与视图表达分开,再让所有编辑入口共享同一命令模型。

SourceData 保存不可变事实,ViewSpec 保存可编辑表达;图上操作、大纲、键盘和宿主调用统一生成确定性命令,进入同一段历史。

关键取舍:数据不回写、编辑器唯一实现、框架适配保持轻量。
03 / 工程交付

用稳定 npm 包、跨框架合同和真实工作台完成公开发布。

TellPlot 同时提供 DOM、React 18/19 与 Vue 3 接入,覆盖瀑布图、分类柱状图与条形图,并对包产物、公共类型、浏览器、导出、性能和无障碍执行发布闸门。

当前可核验:tellplot@1.0.0、GitHub Release、tellplot.com 与在线编辑工作台。
TellPlot 在线编辑工作台,展示配置、瀑布图与结构大纲
01

在线编辑工作台:配置、图表、结构大纲与检查器共享同一份 ViewSpec 和命令历史。

对象模型

01

SourceData

保存不可变业务事实,编辑操作不会回写宿主持有的原始数据。

02

ViewSpec

保存排序、递归分组、折叠、固定、注释和强调等可编辑视图状态。

03

Command / History

直接操作、大纲、键盘和宿主调用进入同一套确定性命令与撤销重做历史。

04

Framework-neutral Editor

统一拥有 DOM 工作台、G2 runtime、Inspector、导出与无障碍摘要。

05

React / Vue Adapters

薄适配器只负责 create、update 与 destroy,不复制编辑状态和图表运行时。

06

Release Gates

校验公共 API、类型、包产物、框架矩阵、浏览器、性能、安全与无障碍合同。

关键产品决策

01

原始数据与编辑状态分离

选择:SourceData 保持不可变,所有编辑结果只生成新的 ViewSpec。

理由:宿主系统仍然拥有业务事实,图表库只管理表达方式,才能安全撤销、持久化和恢复。

02

编辑器只实现一次

选择:公共包提供 imperative editor,并通过 React 与 Vue 薄适配器接入不同宿主。

理由:避免框架版本各自维护状态、交互和 G2 生命周期,保持行为与错误语义一致。

03

所有入口进入同一命令历史

选择:直接拖拽、结构大纲、键盘操作和宿主命令统一转为确定性 command。

理由:同一编辑动作需要得到一致结果,并能可靠撤销、重做、序列化和回归测试。

04

把稳定发布作为产品能力

选择:同时校验 ESM、CJS、TypeScript 类型、React/Vue 版本、浏览器、导出、性能和无障碍合同。

理由:基础库的价值不仅是功能可用,还要让不同宿主能够可预测地安装、升级和运行。

产品界面

更多产品界面

查看项目中的主要界面与交互状态。

TellPlot 生产官网首页与经营变动瀑布图
02

生产官网:真实运行的瀑布图组件,并提供 DOM、React 与 Vue 接入文档。

TellPlot 图表示例中心,展示瀑布图、柱状图和条形图
03

示例中心:瀑布图、分类柱状图和分类条形图均可进入在线编辑。

下一步

查看完整经历,继续聊聊产品与岗位。

下载与当前方向匹配的简历,或通过邮件、电话直接联系。

下一个案例 · 03 / 10 AI 产研协同交付平台
esc