TellPlot 可编辑图表引擎 | 邓枭雄项目案例
精选案例

个人开源项目 · v1.0 已发布

TellPlot 可编辑图表引擎

框架无关的可编辑基础图表库 · npm v1.0

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

我的工作:产品定义 · 交互设计 · 编辑器架构 · TypeScript 开源实现

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

交付与验证

独立完成产品定义、图表编辑模型、框架无关内核、React/Vue 适配、测试与公开发布;tellplot@1.0.0、GitHub Release 和生产官网均可核验。

tellplot@1.0.0
npm、GitHub Release、受保护 tag 与生产官网完成稳定版发布
DOM · React 18/19 · Vue 3
共享同一编辑内核、命令模型与 G2 runtime,不维护多套状态

TellPlot 1.0 已完成公开稳定版发布。

生产官网提供首页、示例、文档与在线编辑工作台;npm latest 指向 1.0.0,GitHub Release、tag、包产物与 SLSA provenance 保持一致。

项目性质

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

关键产品决策

01

原始数据与编辑状态分离

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

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

02

编辑器只实现一次

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

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

03

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

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

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

04

把稳定发布作为产品能力

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

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

从问题到交付

01 / 产品问题

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

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

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

02 / 产品判断

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

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

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

03 / 工程交付

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

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

当前可核验:tellplot@1.0.0、GitHub Release、tellplot.com 与在线编辑工作台。

项目背景与实现范围
对象模型
SourceData
保存不可变业务事实,编辑操作不会回写宿主持有的原始数据。
ViewSpec
保存排序、递归分组、折叠、固定、注释和强调等可编辑视图状态。
Command / History
直接操作、大纲、键盘和宿主调用进入同一套确定性命令与撤销重做历史。
Framework-neutral Editor
统一拥有 DOM 工作台、G2 runtime、Inspector、导出与无障碍摘要。
React / Vue Adapters
薄适配器只负责 create、update 与 destroy,不复制编辑状态和图表运行时。
Release Gates
校验公共 API、类型、包产物、框架矩阵、浏览器、性能、安全与无障碍合同。

更多产品界面

TellPlot 生产官网首页与经营变动瀑布图
生产官网:真实运行的瀑布图组件,并提供 DOM、React 与 Vue 接入文档。
TellPlot 图表示例中心,展示瀑布图、柱状图和条形图
示例中心:瀑布图、分类柱状图和分类条形图均可进入在线编辑。
esc