superset数据可视化项目二次开发之新增图表

 前言

一、预先阅读相关文档

针对superset项目1.5版本进行二次开发，参考github上的官方文档进行本地配置。首先，最好详细阅读项目中相关文档，可以对这个项目的迭代过程及涉及的feature等做个大概了解。docs和RELEASING文件夹的内容，有对应版本的changelog，README.md文档，可以明白每个版本的具体的迭代内容。另外，扩展阅读github的superset项目插件使用，配置，开源贡献等相关内容。

本文主要介绍superset1.5版本新增图表的流程，及配置过程。

---

二、插件分类

该项目集成的所有plugin在superset-frontend/plugins下，legacy-plugin-chart-xxx是基于superset原始项目api迁移的插件，插件meta信息中多配置useLegacyApi:true来和explore_json这个endpoint做数据传输。后来经过api迁移到v1，插件plugin-chart-xxx弃用了useLegacyApi:true该配置，主要与v1/chart这个接口做数据传输。本次基于Apache Echarts做图表集成，所以都在plugin-chart-echarts文件夹做开发。

一、添加插件

1.插件目录

参考superset-frontend/package/generator-super/README.md，也可参考docs/docs/contributing/creating-viz-plugins.mdx，这俩个文档一样，来在plugins/plugin-chart-echarts下生成插件目录。可参考已有的Gauge，Timeseries等进行目录重组，本次我以如下插件作为解读。

插件目录

2.配置插件到viz图表中

注意：如果在plugins下配置新的文件夹来开发插件，需要在superset-frontend/package.json里的dependencies下添加插件地址，然后npm install，将该插件添加到node-modules中，然后在MainPreset.js中引入该包，进行插件注册。

新插件加入node-modules依赖

配置mainPreset.js

本次案例在echarts中加入目录，故省去第2步骤。

到此可以在add new chart中选择新图表，如下图。

选择新图表

二、插件面板配置

1.插件目录结构说明

• NegativeBar/index.ts：暴露出的模块名称，是MainPreset.js的插件注册名称（plugins下添加的新图表在这里注册），也是eharts/index.ts中暴露的名称，注意一一对应关系即可。
• 上一步的index.ts进入到plugin的index.ts，该文件将配置图表的queryData，controlPanel，metadata，loadChart，transformProps。
• plugin/buildQuery.ts文件create queryContext实例，用来和接口做查询交互，e.g. full payload, samples, query of result。
• plugin/controlPanel.tsx：参数配置面板的config，可参考已有文件配置基础的模块，Chart Type，Time，Query，CHart Options，需要单独增加的配置项，可在ecarts下的control.ts中添加，配置到该文件中即可。

• plugin/transformProps.ts：echarts options的配置，将传入的queryData，formData等配置具体的图表的参数，如legend，series，坐标轴，选中的值，图表宽高等。
• NegativeBar.tsx：接收transformProps传入的数据，处理必要的事件，注册node节点后将所有数据传入到Echart图表组件中，即可渲染为对应的图表。
• transformers.ts：主要为tranformProps.ts用到的处理数据的逻辑。
• 其他引用均为已经封装好的，如果需要增加配置项，务必考虑已经引用到地方，不要进行覆盖或者重写等操作。
• NegativeBar/image：选择图表时展示的缩略图和logo。
• 查看配置效果，superset-frontend项目进行npm run dev进行编译。

注意：项目中已有配置非常灵活，不同图表的配置参数不尽相同，需要多查看其他图表的配置进行扩展等，并非新图表都需要添加新的插件文件夹。

2.公共配置，接口等

•  插件使用到的基础类，接口，配置项，工具函数等均在superset-ui-core文件夹下，有兴趣可以学习，这里基本不用自行配置，图表底层的及公用的逻辑都在这里。
• 公共配置，高级配置等在superset-ui-chart-controls下，具体可在插件配置中逐一查看学习。

总结

图表的基本配置如上述，深层次的配置可深入研究，如advancedAnalytics，annotationAndLayers，forecastInternal等，进一步优化配置是我们的追求，深入学习开源项目的精髓和理念有助于提高开发思维，拓展眼界和技能。

最后，开发路上祝各位好运！