superset-0.35新增图例(附加报表分析左侧样式调整)

superset是一个报表分析平台，具体的安装方法可以自行查看官方文档Apache Superset (incubating) — Apache Superset documentation安装步骤还是非常简单的，superset具有多种图表，用户可以随意的拖拉需要查看的字段进行查看分析。

但是superset并不能完全的满足用户需求，需要进行二次开发，网上二次开发的资料很少，而且版本过老，不适合现在新版本的superset，所以写了这篇关于superset-0.35新增新图例博客，以下是superset的部分图表

superset原有的图表

superset的默认表格是有分组和基础列的选择，给予用户迷惑，为了提高用户体验，我们需要普通的表格分为两种，一种是只能进行分组和聚合分析，第二种只能选择基础列，展示成普通二维表。

报表分析页面

1、引入图表样式

在incubator-superset-0.35/superset/assets/src/visualizations目录下添加你所需要导入的图表样式，如果是echarts就去echarts官网上去下载所需要的表格js，因为我导入的是superset自带的表格，所以是直接把superset table.js直接复制出来然后拷贝在此目录下，如果需要自定义表名字可以设置name属性，然后修改复制出来的js文件名，防止和原有table重复。

2、注册图表

当进行完导入图表后你需要incubator-superset-0.35/superset/assets/src/visualizations/presets/mainpreset.js文件中，进行图表注册同时给图表赋一个key值在后面js引用中需要使用这个key值。

3、添加图表左侧组件

在incubator-superset-0.35/superset/assets/src/explore/controlPanels目录下新增js文件，这个文件主要是用来选择报表分析左侧的组件，根据你导入表格所需要字段和参数，选择不同的组件，如果superset自带组件不满足你的需求可以自定义组件。

报表分析左侧栏

4、表和组件绑定

将所需要图表导入后然后定好所需要的组件，同时将图表和组件js文件进行绑定，在incubator-superset-0.35/superset/assets/src/setup/setupPlugins.ts文件中key值和js文件进行相互绑定，注意表格名字一定要和之前的key值相同。

5、业务逻辑处理

将表和组件绑定好和注册表之后，就需要处理业务逻辑方面，将前端传入的值进行处理得出数据，通过图表进行展示分析，在incubator-superset-0.35/superset/viz.py文件中添加你自己的逻辑处理。

（viz.py 这个文件起到一个类似于视图的功能，从前端接受请求后进行一系列处理。我们可以看到，一个图例就是一个类。经过分析已有的这些类，发现这些类大部分是继承了BaseViz这个基类，并且主要重写了query_obj和get_data这两个方法。其中query_obj，顾名思义，是用来构造查询条件的。而查询条件来源于页面左侧的组件，这些组件的信息存储在form_data的一个字典中，query_obj方法中将会处理form_data，构造除自己需要的查询条件并返回，在BaseViz这个基类中，会根据这个查询条件来查询出数据。然后是get_data方法，get_data接收一个参数df，也就是query_obj之后查询出来的数据，也可以结合你自己构造的form_data中的一些条件对df进行处理。处理之后的数据以dict格式返回，这个dict会交给js进行下一步处理，进行表格展示）

6、界面展示

最后页面上出现两个同样的表格，通过选择不同表格，左侧显示不同组件，更加方便用户操作体验。

界面展示

7、问题

因为我使用的是superset原有的table文件，然后我拷贝出来多了一级目录,导致Support for the experimental syntax 'dynamicImport' isn't currently enabled错误，描述为不支持懒加载，然后npm安装许多插件，还是无果，最后效仿superset自己的文件结构，然后将文件挪出一个层级，就修复这个问题。

参考Superset二次开发--添加新图例_MK_chan的博客-CSDN博客，但是由于版本过旧，新版本的已经不是很适合，文件目录也有了调整，所以才写了新版的添加样例，后续superset页面修改会持续更新。