美文网首页人工智能 物联网 大数据 云计算
superset-0.35新增图例(附加报表分析左侧样式调整)

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

作者: ksice | 来源:发表于2020-01-10 22:15 被阅读0次

            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页面修改会持续更新。

    相关文章

      网友评论

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

        本文链接:https://www.haomeiwen.com/subject/ukayactx.html