Superset Series 5/6 — Adding plugins

Teclead Ventures
We enable our enterprise clients to reach the mass market and digitalize internal and external businees processes. https://teclead-ventures.de/en

We are hiring!

Introduction

If you have a specific visualization or data source that’s not already available in Superset, creating a new plugin can be a great way to add it to your instance. Make sure you have superset installed properly. This guide will teach you how to setup the structure of a most basic plugin. Once you created a new plugin you have the foundation to start building your own data visualization in superset.

Requirements :

• MacOS or Linux (Windows is not officially supported, but may work)
• Node.js 16
• npm 7 or 8
• Python version 3.6 or higher

Version

In this Guide we are using Superset version 2.1.0

You can use the same version by checking out in the corresponding branch

git checkout 2.1.0

Result Repository

This Superset documentation series will guide you through each step of customizing Superset. If you’d like to use the results directly, you can clone our Git repository, which includes all changes made during the course of this guide:

(OPTIONAL)
git clone https://github.com/Teclead-Ventures/superset

Steps

1. To begin, you must first acquire the Superset Yeoman Generator. It’s advised to utilize the template version that is included with the Superset version you’re using. You can install it by executing these commands from root directory:

npm i -g yo
cd superset-frontend/packages/generator-superset
npm link

Initially, we install Yeoman and then obtain the Superset plugin generator template from the Superset repository.

2. Following this, you can proceed to create your visualization plugin. Construct a new directory for your visualization plugin, starting with the prefix superset-plugin-chart-YOURPLUGINNAME, and execute the Yeoman generator:

mkdir /tmp/superset-plugin-chart-hello-world
cd /tmp/superset-plugin-chart-hello-world
yo @superset-ui/superset

3. Next, the generator will pose several questions (the default answers should suffice):

4. To compile the visualization plugin, execute these commands:

npm ci
npm run build

This phase fetches the necessary dependencies, constructs the package, and executes the predefined unit tests located in the test/ subdirectory. Alternatively, to operate the visualization plugin in development mode (recompiling when code modifications occur), initiate the development server with this command:

npm run dev

5. To incorporate the package into Superset, navigate to the superset-frontend subdirectory within your Superset source folder and execute this command:

npm i -S /tmp/superset-plugin-chart-hello-world

6. Subsequently, modify the superset-frontend/src/visualizations/presets/MainPreset.js file and apply these changes:

import { SupersetPluginChartHelloWorld } from 'superset-plugin-chart-hello-world';

7. Then, import the visualization plugin and insert the following line into the array passed to the plugins property:

new SupersetPluginChartHelloWorld().configure({ key: 'hello_world' }),

8. From Root run:

cd superset-frontend
npm i
npm run build
cd ..
superset db upgrade
superset init
superset run -p 8088 --with-threads --reload --debugger

When you now list all Charts , “Hello World” will be available:

The visualization will return the query as a json :

And that is it! Creating a plugin from scratch can be very useful if you are interested in building completely new plugins which do not exist yet. In the last guide of this superset series we will use the hello world plugin to visualize maps using Openlayers.

Superset Setup Part 1 : https://medium.com/@teclead-ventures/superset-series-1-6-setting-up-superset-a750481c228e

Superset Controlpanel Part 2 : https://medium.com/@teclead-ventures/superset-series-2-6-control-panel-31a84afae465

Cloning Superset Plugins Part 3: https://medium.com/@teclead-ventures/superset-series-3-6-cloning-plugins-3336a8a979a0

Modifying Superset Plugins Part 4 : https://medium.com/@teclead-ventures/superset-series-4-6-modifying-plugins-abad61517230

Visualizing Maps using Openlayers in Superset Part 6 : https://teclead-ventures.medium.com/superset-series-6-6-openlayers-map-visualization-e72e2976cfa0

Author : Daniel Jin Wodke

Editors: Ruben Karlsson, Matthias Daiber, Cherif Khlass, Lukas Zöllner, John Einicke