SuperAPI AI 工具集

migrate-to-tanstack-charts

数据与分析

查看项目

更新于 10-16 08:10

技能介绍

用途:把现有图表从 Observable Plot、Recharts、Chart.js、ECharts、直接 D3 或其它渲染器迁移到 TanStack Charts。该技能要求先阅读 design-a-chart 与 debug-and-verify-charts,以保留原有分析任务并定义等价证据。

核心流程为 trigger → inspect → decide → build → verify,即先盘点再决策、构建与验证;迁移期间保留旧图表,直到等价证据通过才移除。

主要能力:先建立迁移清单(MigrationInventory),记录分析问题、行粒度、指标、变换、图层、域、交互、无障碍、导出与性能预算,并记录每项当前由哪个图层拥有。迁移时按数据行与粒度、分析变换、标记局部布局、位置/分组/颜色/区间通道、语义刻度域、标记与图层顺序、焦点与控制状态、渲染器/适配器/导出生命周期逐项映射。

建议一次迁移一个归属边界:冻结源数据准备并采集测试夹具;用相同行构建静态 TanStack 场景;匹配刻度、标记、标签与空值/缺失行为;再加入焦点与提示;随后加入受控选择、刷选、缩放或应用叠加;接入目标框架适配器与 SSR 生命周期;对比打包体积和持续交互性能;确认无需回滚后再移除源渲染器。

等价性需按场景证明:数据(夹具行与变换输出)、视觉(几何、域、参考线、标签、颜色、缺失/负值)、交互(指针与键盘焦点、分组、固定、受控状态)、生命周期(挂载、更新、缩放、SSR/水合、销毁)、无障碍(名称、等价数值/操作、摘要/表格)、导出(SVG/Canvas/静态输出与字体资源)、打包(消费者导入与保留的可选模块)、性能。迁移中可保留对比开关,用同一份准备行与同一应用状态切换新旧渲染器。

常见错误:逐一按名称翻译组件(应独立映射数据、变换、刻度、几何、交互与生命周期归属);同时替换变换与渲染器(应先冻结并测试分析行,再迁移渲染器);把截图相似当作完全等价(应测试焦点、键盘、更新、固定、导出、打包与性能场景);盲目移植源内部实现(应保留已验证的数据/D3/SQL 准备,仅扩展已验证缺口)。

限制:技能本身未提供具体代码示例、安装命令、收费信息、支持版本或性能数值;实际迁移细节需以官方文档为准,未提供的部分暂未提供。