Supserset
Superset作为一个开源的BI系统，具有一套完整的BI可视化实现流程。实现的步骤大致可以分为以下几步：
1. 首先，连接用于bi分析的数据库；
2. 根据数据表或SQL Lab查询生成数据集；
3. 由数据集创建对应类型图表；
4. 将创建好的图表添加到BI可视化看板中。
Superset自带的图表类型相当完善，包括卡片，柱状，折线，面积，扇形，散点......，能够实现客户的基本需求，一般来说根据上述步骤就可以完成一份看起来还不错的bi看板。
Superset个性化
但若是客户对于bi看板的布局样式有一定的需求，那么就可能需要Superset图表的开发需求。
1. 看板样式
在创建的一份bi看板时，通常会使用的Superset默认的样式，我们可以在CSS选择中使用css模板，在css模板中的样式可以影响到看板的基本样式和布局。
2. 图表样式
通常Superset中的基础图表中的样式是固定的，不轻易修改，即使是十分基础的样式，例如，如果需要修改字体的颜色和大小，也无法实现。因此，如果希望图表能够实现一些个性化的需求，需要自定义图表，接下来是对自定义图表开发的讲解。
Superset自定义图表开发
在Superset中，图表作为可视化插件注册到可视化工具中，因此创建自定义图表也就是Superset插件的开发。和其他的开发一样，先了解代码的结构。
进入Superset项目
superset 项目目录
- superset 后端代码文件夹
- superset-frontend 前端代码文件夹
- plugins superset插件文件夹
- plugin-chart-echarts echart 图表类型文件夹
...
...
可以看到所有的图表都是放到了plugins文件夹中，并且能够根据目录看出Superset使用了开源的图表库echart，并把基于echart生成的图表放到一个文件夹下。这里使用Pie图表作为例子讲解。还是先了解代码结构：
Pie
- images 存放图片目录
- buildQuery.ts 用于构建数据库查询对象，返回构建查询上下文
- controlPanel.tsx 用于创建控制面板
- EchartsPie.tsx 返回视图
- index.ts 定义图表
- transformProps.ts 用于返回props
- types.ts 定义数据结构
首先了解数据结构，需要了解结构包括：
QueryFormData 存储查询的基础数据，可以根据控制面板返回的数据对其进行扩展
BaseChartProps
部分属性：
height 图表高度
width 图表宽度
formData 返回控制面板数据，也是请求有效载荷
queriesData 返回数据响应数据
BaseTransformedProps 传递给EchartsPie的数据。
ControlPanelConfig 用于生成控制面板
我们在创建图表时，可以扩展这些数据结构来获取图表所需要的数据。
controlPanel.tsx
const config: ControlPanelConfig = {
controlPanelSections: [
{
label: t('Query'),
expanded: true,
controlSetRows: [
['groupby'],
['metric'],
['adhoc_filters'],
['row_limit'],
[
{
name: 'sort_by_metric',
config: {
...sharedControls.sort_by_metric,
default: true,
},
},
],
],
},
...
主要配置controlPanelSections
controlPanelSetions数组中每个对象相当于控制面板中的一组配置，controlSetRows数组中的每一个元素相当于控制面板中的一列。
groupby，metric, adhoc_filters, row_limit是Superset中原始的控件，我们也可以自定一个空间，只需要按照固定的格式写好数据就可以
{
name: 'show_labels_threshold', // 控件名称
config: {
type: 'TextControl', // 控件的类型
label: t('Percentage threshold'), // 控件的Label
renderTrigger: true,
isFloat: true,
default: 5, // 默认参数
description: t(
'Minimum threshold in percentage points for showing labels.',
),
},
},
我们主要关注type字段，Superset中定义了很多的控件类型
- TextControl
- SelectControl
- CheckboxControl
- SliderControl
- DndColumnSelect
- ...
但是最常见的还是提到的这几种控件类型
buildQuery.ts
export default function buildQuery(formData: QueryFormData) {
const { metric, sort_by_metric } = formData;
return buildQueryContext(formData, baseQueryObject => [
{
...baseQueryObject,
...(sort_by_metric && { orderby: [[metric, false]] }),
},
]);
}
buildQuery获取控制面板传递过来的参数，根据查询columns，分组，过滤，排序等信息查询数据。
transformProps.ts
transformProps的工作是负责转换查询的数据信息，并返回视图真正需要的数据，视图在接收到props之后，可以直接使用数据。
EchartsPie.tsx
export default function EchartsPie(props: PieChartTransformedProps) {
const { height, width, echartOptions, selectedValues, refs } = props;
const eventHandlers = allEventHandlers(props);
return (
<Echart
refs={refs}
height={height}
width={width}
echartOptions={echartOptions}
eventHandlers={eventHandlers}
selectedValues={selectedValues}
/>
);
}
返回一个元素由React进行渲染生成视图，这个元素可以进行嵌套。
index.ts
在index中，构建了图表，在构建中包含的信息包括
{
buildQuery,
controlPanel,
transformProps,
loadChart，
metadata // 主要用于初始图表的基本信息，如图表图标，类型，介绍等等
}
将定义好的组件都配置好之后，图表开发也完成了。
最后将创建好的插件集成到 superset-frontend/src/visualizations/presets/MainPreset.js
new EchartsPieChartPlugin().configure({ key: VizType.Pie }),
这样就完成了Pie图表的创建。
Superset自定义图表开发