开源Superset在线设计图表框架源码解析

目的

superset是很强大的BI分析框架，有些不满足需求的难免要二次开发，二次开发首先要读懂它的源码，基于此目的把自己阅读代码的一些分析分享给大家，让大家都superset整体的源码有个整体的认识，然后具体到哪块代码的时候，可以快速找到具体分析。

Superset是什么？

Superset 是一款由 Airbnb 开源的“现代化的企业级 BI（商业智能） Web 应用程序”，其通过创建和分享 dashboard，为数据分析提供了轻量级的数据查询和可视化方案。

支持的图表类型非常多，如下一部分：

进入正题，源码分析

后台

spuerset 后端采用 Flask-AppBuilder, Sqlachermy, celery，pandas

Flask-AppBuilder: superset 的基本框架，登录验证，权限控制

pandas：数据处理

celery：定时异步任务

sqlachermy: 数据引擎，连接DB

superset源码结构如下：

前端

superset 前端采用 React，D3

总结

动态图表设计思路其实都是如此，前端会把各种图表先写好，内置到代码中，然后每个图表都是自己唯一标示和相应的属性，等通过拖拽设计好后，保存的时候其实就是把图表对应的属性元数据信息（描述图表的json字符串），发送给后台。 等预览图表的时候，其实就是从后台读取这些元数据信息，然后给前端组件按照这些元数据信息，找到对应的内置好的图表组件，并渲染出来，而上面的SuperChart组件其实就是superset框架中的渲染组件。

前端和后台交互源码分析

前端的代码结构中webpack.config.js 入口文件中 定义了 以src文件夹去生成打包js文件，webpack的功能

会根据不同的源码，打包成不同的文件，打包后的文件是可以直接给浏览器运行的

后台代码入口

superset/app.py

下面列出一些主要的代码片段，大部分都是这种的

appbuilder.add_link(
    "SQL Editor",
    label=_("SQL Editor"),
    href="/superset/sqllab/",
    category_icon="fa-flask",
    icon="fa-flask",
    category="SQL Lab",
    category_label=__("SQL Lab"),
)
appbuilder.add_link(
    __("Saved Queries"),
    href="/savedqueryview/list/",
    icon="fa-save",
    category="SQL Lab",
)
appbuilder.add_link(
    "Query Search",
    label=_("Query History"),
    href="/superset/sqllab/history/",
    icon="fa-search",
    category_icon="fa-flask",
    category="SQL Lab",
    category_label=__("SQL Lab"),
)
 appbuilder.add_view(
            SliceModelView,
            "Charts",
            label=__("Charts"),
            icon="fa-bar-chart",
            category="",
            category_icon="",
        )
appbuilder.add_view(
            DashboardModelView,
            "Dashboards",
            label=__("Dashboards"),
            icon="fa-dashboard",
            category="",
            category_icon="",
        )

这些都是flask Appbuilder框架的内容，大概意思就是通过add_link和add_view会在界面上加入相应的菜单，如果是add_link点击菜单的时候就会访问相应的链接，比如第一个，点击“SQL Editor”菜单的时候，会访问/superset/sqllab/链接发送给后台。

然后后台处理/superset/sqllab/链接的后台代码在哪？

在superset/view/core.py文件中，代码如下：

@has_access
@event_logger.log_this
@expose("/sqllab/", methods=["GET", "POST"])
def sqllab(self) -> FlaskResponse:
    """SQL Editor"""
    payload = {
        "defaultDbId": config["SQLLAB_DEFAULT_DBID"],
        "common": common_bootstrap_payload(),
        **self._get_sqllab_tabs(g.user.get_id()),
    }
    form_data = request.form.get("form_data")
    if form_data:
        try:
            payload["requested_query"] = json.loads(form_data)
        except json.JSONDecodeError:
            pass
    payload["user"] = bootstrap_user_data(g.user)
    bootstrap_data = json.dumps(
        payload, default=utils.pessimistic_json_iso_dttm_ser
    )
    return self.render_template(
        "superset/basic.html", entry="sqllab", bootstrap_data=bootstrap_data
    )

上面的注解都是flask框架的东西，定义了处理/sqllab请求的方法，其中render_template是flask框架渲染模板的方法，里面传入两个参数一个entry=“sqllab”和bootstrap_data，最后会把渲染后台的页面返回给后台。

这里再详细看下模板渲染，先看下superset/basic.html这个模板文件，默认的flask框架的模板都在源码的templates目录下，这里是templates/superset/basic.html,这里粘贴核心代码如下：

{% block body %}
  

    
  
{% endblock %}
// --------------------------------
{% block tail_js %}
      {% if not standalone_mode %}
        {{ js_bundle('menu') }}
      {% endif %}
      {% if entry %}
        {{ js_bundle(entry) }}
      {% endif %}
      {% include "tail_js_custom_extra.html" %}
    {% endblock %}

上面一部分的代码定义了一个id=app的div，用过前端react或vue框架的都知道，这个是前端js文件渲染的入口，无论是vue还是react生成的js文件都会绑定到一个id=app的div下面的。

下面那块代码会js_bundle(entry)，其中通过上面分析entry是sqllab，他会从目录中到到前端通过webpack打包好的js_bundle文件，这里的sqllab在前面的webpack.config.js中已经定义了，这里再粘贴一下吧

可以看到里面有sqlab，最终后台代码

return self.render_template(
        "superset/basic.html", entry="sqllab", bootstrap_data=bootstrap_data
    )

就是根据模板把前端代码/src/sqllab/index.jsx打包生成的对应js代码，嵌入到了模板中哪个浏览器可以看源码，然后返回给前端显示了。

后续页面中的具体请求都是rest api请求，后台对应的代码如下：

结构都很类似，都有api.py，dao.py等，其中api.py就是处理页面中发起的rest api请求的（其实最终通过ajax），到时候具体问题具体分析即可。

总结

superset框架app.py中定义了界面上各个菜单按钮的功能跳转链接哪个浏览器可以看源码，然后具体链接的后台处理在views/core.py中，它会继续根据templates模板渲染出结果给前端显示，模板中会根据传入的参数来找到对应的前端webpack打包好的文件（不一定都是这样，这些只是其中的一部分）。

它这个前后端分离跟之前的还是有点区别的，并不是把打包好的前端代码通过nginx访问的，他还是通过python代码访问的，模板的方式嵌入。