superset开发iframe嵌入参数自定义

左手的ㄟ右手 2023-06-27 11:15 11阅读 0赞

# 说明 #

进行`superset`二次开发集成`echarts`的时候，需要对不同报表的标题做传参处理，但是直接在`form_data`的`json`数据中直接添加无法直接传入到`superset`对应的报表的`js`文件中，所以就仔细研究了一下，发现可以在`superset`的`Charts`的维护页面左侧的`Data`中增加配置项进行参数传递。  
一开始是直接参考的`IFrame`报表中的`URL`配置项进行开发，但是这样实在是不友好且不方便。  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5ODAwNDM0_size_16_color_FFFFFF_t_70][]  
所以就有继续研究了一下，发现可以左边的配置项也可以自定义。这样就方便很多了。

# 自定义步骤 #

## 注册配置项 ##

进入`static/assets/src/explore`目录下，编辑`controls.jsx`文件，在`controls`中增加`title`配置项，如下：

title: { 
        type: 'TextControl',
        label: t('TITLE'),
        description: t('Title of report'),
        default: '',
      },

保存退出。

## 在对应报表中增加该配置项 ##

进入`static/assets/src/explore/controlPanels`目录下，编辑需要`title`报表的`js`文件。代码如下：

import {  t } from '@superset-ui/translation';
    export default { 
        controlPanelSections: [
            { 
            label: t('Query'),
            expanded: true,
            controlSetRows: [
                ['metrics', 'groupby'],
                ['limit'],
                ['title'],
            ],
            },
            { 
            label: t('Chart Options'),
            controlSetRows: [
                ['color_scheme'],
            ],
            },
        ],
    };

## 编辑重启 ##

进入`static\assets`目录下运行`npm run dev`，然后重启`superset run`即可。进入web维护页面即可看到  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5ODAwNDM0_size_16_color_FFFFFF_t_70 1][]  
多了一个TITLE的配置项。

## 加入业务逻辑 ##

然后在对应报表的`js`文件中加入相关的业务逻辑用来配置报表的title即可。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5ODAwNDM0_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200106134844286.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5ODAwNDM0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5ODAwNDM0_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200106140456994.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5ODAwNDM0,size_16,color_FFFFFF,t_70