前面一个专栏介绍了前后端服务器的搭建,这一章讲一下通过pip安装的superset如何添加组件。
内网环境下的Superset自定义组件——环境搭建-CSDN博客
目标一:搭建Superset前后端环境,能正确运行;
目标二:在Superset中添加自定义组件,能在Superset中进行添加删除等操作;
目标三:封装Superset仪表盘接入sdk,支持其他系统可以直接展示Superset生成的仪表盘。
1、下载官方模板
路径:/superset-master/superset-frontend/plugins
下载superset自定义组件模板
https://github.com/apache-superset/superset-ui-plugins-template/tree/master/packages
其中superset-ui-preset-chart-dummies是在单个文件夹中定义多个组件的模板,直接下载到plugins路径下打开,将文件夹更改成需要的名称,在其中的src路径下可以进行组件的添加
![](https://i-blog.csdnimg.cn/direct/f2582374275d4777b2df5e7817612324.png)
images/thumbnail.png是Supserset中显示的对应图表的缩略图。
2、配置 index.ts
创建图表的索引和介绍
import { t, ChartMetadata, ChartPlugin } from '@superset-ui/core';
import transformProps from './transformProps';
import thumbnail from './images/thumbnail.png';
import controlPanel from './controlPanel';
const metadata = new ChartMetadata({
name: t('number chart'),
thumbnail,
category: t('antv'),
description: t('antv 数字'),
tags: [t('数字'), t('test number')],
});
export default class NumberPlugin extends ChartPlugin {
constructor() {
super({
loadChart: () => import('./Number'),
metadata,
transformProps,
controlPanel,
});
}
}
3、配置 controlPanel.tsx
图表创建后Superset中的前端控件,能自定义需要获取的参数
import { t } from '@superset-ui/core';
import {
ControlPanelConfig,
D3_FORMAT_DOCS,
D3_FORMAT_OPTIONS,
sharedControls,
} from '@superset-ui/chart-controls';
const config: ControlPanelConfig = {
controlPanelSections: [
{
label: t('Query'),
expanded: true,
controlSetRows: [
[
{
name: 'columns',
config: {
...sharedControls.columns,
label: t('Column'),
},
} // 数据集数据
],
[
{
name: 'big_number',
config: {
type: 'TextControl',
freeForm: true,
label: t('数据字段名'),
renderTrigger: true,
default: 'total_customer',
description: t(
'默认字段名big_number',
)
},
}, // 自定义需要额外获取的字段
]
],
},
{
label: t('Chart Options'),
expanded: true,
controlSetRows: [
[
{
name: 'number_format',
config: {
type: 'SelectControl',
freeForm: true,
label: t('Number format'),
renderTrigger: true,
default: 'SMART_NUMBER',
choices: D3_FORMAT_OPTIONS,
description: D3_FORMAT_DOCS,
},
}, // 其他选择性填写的自定义数据段
]
],
}
],
formDataOverrides: formData => ({
...formData,
}),
};
export default config;
4、创建 buildQuery.ts
将Superset可视化界面中得到的数据构建成Query进行数据传输 模板中不存在buildQuery.ts,需要自己创建
import { buildQueryContext, QueryFormData } from '@superset-ui/core';
export default function buildQuery(formData: QueryFormData) {
return buildQueryContext(formData, baseQueryObject => [baseQueryObject]);
}
5、配置 transfromProps.ts
从封装好的chartProps中获得客户端与数据库的数据,并进行相应的处理,方便后续的获取,数据基本都存储在chartProps的queriesData和formData中
import {
ChartProps,
} from '@superset-ui/core';
export default function transformProps(chartProps: ChartProps) {
const { width, height, formData, queriesData} = chartProps;
const data = queriesData[0].data[0];
const bigNumber = data[formData.bigNumber];
return {
width,
height,
bigNumber,
};
}
6、配置 chart.tsx
根据拿到的数据进行前端图表的构建
function NumberChart(props: NumberChartProps) {
let { width,height, bigNumber, weekly_growth, monthly_growth, new_user, new_user_this_month, new_user_this_year} = props
// 拿到数据transfromProps中定义传输的数据
const number = defaultNumberFormatter(bigNumber)
const weeklyPer = (parseFloat(weekly_growth*100 + '')).toFixed(2) + '%'
const monthlyPer = (parseFloat(monthly_growth*100 + '')).toFixed(2) + '%'
const isRed = (val:number) => {
if(val>=0) {
return true
}
return false
}
const weekClassName = isRed(weekly_growth) ? 'data_value data_red': 'data_value data_green'
const monthClassName = isRed(monthly_growth) ? 'data_value data_red': 'data_value data_green'
const StyledDiv = styled.div`
width: ${width}px;
height:${height}px;
text-align: left;
.big_number {
height: 48px;
font-size: 30px;
font-weight: 400;
color: #333333;
line-height: 42px;
}
/* css样式 */
`
let userPanel = null
return (<StyledDiv>
<div className='big_number bl_top'>
{number}
</div>
</StyledDiv>)
// 返回的图表html
}
export default NumberChart
7、添加依赖与注册
在superset-frontend\package-lock.json中添加对应依赖
"packages":{
"":{
"@superset-ui/plugin-chart-antv": "file:./plugins/plugin-chart-antv",
}
}
在superset-frontend\plugins\plugin-chart-antv\package.json中添加对应的依赖
"dependencies": {
"@superset-ui/plugin-chart-antv": "file:./plugins/plugin-chart-antv",
}
在superset-frontend\package.json中添加对应的依赖
"dependencies": {
"@superset-ui/plugin-chart-antv": "file:./plugins/plugin-chart-antv",
}
在superset-frontend\plugins\plugin-chart-antv\src\index.ts添加组件
export { default as AntVNumberPlugin } from './Number';
在superset-frontend\src\visualizations\presets\MainPreset.js进行注册
import {
AntVNumberPlugin,
} from '@superset-ui/plugin-chart-antv';
export default class MainPreset extends Preset {
constructor() {
super({
plugins: [
new AntVNumberPlugin().configure({key: 'antv_number'}),
],
});
}
}
8、重建前端资源
组件开发完之后,需要重新 npm run build
将前端配置覆盖到生产环境。
由于项目的生成前端资源的prettier要求比较严格,会导致构建不成功,可以在
superset-frontend\webpack.config.js
中注释掉检测的代码
// plugins.push(
// // runs type checking on a separate process to speed up the build
// new ForkTsCheckerWebpackPlugin({
// eslint: {
// files: './{src,packages,plugins}/**/*.{ts,tsx,js,jsx}',
// memoryLimit: 4096,
// options: {
// ignorePath: './.eslintignore',
// },
// },
// }),
// );
build完毕后,如果项目搭建没有问题,新的前端资源会直接覆盖原有的前端资源,superset run -h 0.0.0.0 -p 8088 --with-threads --reload
重启Superset服务器后即可在生产环境看到自定义开发的组件。
如果没发现自己的自定义组件,则需要手动复制黏贴覆盖原本的前端文件。新建的前端文件会放在superset-master\superset\static\assets
中,需要将该文件夹复制并覆盖掉生产环境的assets文件夹,一般在superset-master\venv\Lib\site-packages\superset\static\
路径下。重启服务也可以使用自己的自定义组件。