superset package ui

发表于 | 更新于: | 分类于 |

准备工作

  • MacOS 或 Linux（Windows 不受官方支持，但可能会工作）
  • nodejs 16
  • npm 7 或 8

安装必须的包

1
2
3
4
npm i -g yo
cd superset-frontend/packages/generator-superset
npm i
npm link

开始

1.新建插件的文件夹， 在文件夹下执行yo @superset-ui/superset

1
2
3
4
5
6
# 创建目录
mkdir /tmp/superset-plugin-chart-hello-world
# 进入目录
cd /tmp/superset-plugin-chart-hello-world
# 初始化
yo @superset-ui/superset
  1. 插件打包
    1
    2
    npm ci
    npm run build

添加到superset

1.要将包添加到 Superset，请转到superset-frontend Superset源文件夹中的子目录并运行以下命令：

1
2
npm i -S /tmp/superset-plugin-chart-hello-world
# tips： 在superset-frontend 同级目录创建的话, npm i -S ../superset-plugin-chart-hello-world

2.在此之后编辑superset-frontend/src/visualizations/presets/MainPreset.js并进行以下更改：

1
2
3
4
#引入插件
import { SupersetPluginChartHelloWorld } from 'superset-plugin-chart-hello-world';
# 在plugins数组中加入
new SupersetPluginChartHelloWorld().configure({ key: 'ext-hello-world' }),
  1. superset 中查看
    1
    2
    npm run dev 
    #  或者 npm run dev-server

结合前篇 查看效果。

参考文档在 Superset v2 中构建自定义 Viz 插件
Creating Visualization Plugins