Discovery is a powerful dashboarding tool and allows for totally custom data visualization. Learn how to create a Discovery plugin.

Since Discovery-widgets 1.1.4, we integrate a plugin system in order to add your own tiles which will interact with Discovery Dashboards. It becomes quite easy to create a custom chart.
Tiles are based on Web Components, so your plugin must also be a Web Component.
In this tutorial, we will build a radar chart based upon the nice ChartJS library and embed it into a StencilJS Web Component.
What exactly is Discovery? Learn more |
Bootstrap the project
In a new folder, we will scaffold a StencilJS Web Component:
Bootstrap your component
In order to parse your package.json to add some of its fields in your plugin definition, edit tsconfig.ts
:
Just add "resolveJsonModule": true
to the compilerOptions
.
To facilitate the packaging of your component, edit stencil.config.ts
:
We add a globalScript
field to allow your component to be registered by Discovery.
Create src/plugin.ts
to allow your component to be registered:
This code will be called when the browser loads the component. It creates a plugin definition:
- type: the chart type that you will use in your dashboards tiles definition (must be unique across Discovery)
- name: we fetch the package name as declared in package.json, it will act as a unique key to register your plugin
- tag: the HTML tag corresponding to your component
- author: we fetch the author field of the package.json file (do not forget to fill it)
- description: we fetch the description field of the package.json file (do not forget to fill it)
- version: your package version
The radar component
Stencil should have created 2 files:
- src/components/discovery-plugin-radar/discovery-plugin-radar.css
- src/components/discovery-plugin-radar/discovery-plugin-radar.tsx
Edit src/components/discovery-plugin-radar/discovery-plugin-radar.css
:
StencilJS also supports Less, Sass, Stylus, and PostCss (Learn more about StencilJS plugins).
Edit src/components/discovery-plugin-radar/discovery-plugin-radar.tsx
.
Start with the imports:
Now, have a look at the mandatory parts of a Discovery plugin.
The attributes
As it is a Web Component, you can define custom HTML attributes. Some of them are mandatory for a Discovery Plugin:
The events
As it will interact with other tiles, your component needs to emit events:
Other inner variables
Watchers
Watchers will be called each time an attribute is updated. Those are mandatory:
Public methods
The dashboard can invoke some methods on tiles, some methods are mandatory:
Events handler
Those handlers will compute things when an event is trapped by the tile:
Component lifecycle methods
As your component will be loaded in a browser, StencilJS provide handy lifecycle methods (learn more):
The logic part
Now, I will show you how to handle the execution result and feed ChartJS with it (learn more about the data structure of ChartJS) :
That is all.
Test and run
At first edit src/index.html
:
And now, start your dev server:
Here you are:

Going further
Now, you can develop your own tiles and charts. Feel free to publish them on NPMjs.org.
Let us know about your creations.
A final thought
But how to use the plugin mechanism with Discovery Explorer? It handles plugins since 1.0.12.
Create a conf file, like conf.json
:
The "dashRoot"
field must remain like that.
The conf file defines a list of plugins to include, the module version and the nomodule version like we saw in the previous index.html
file.
And now start the docker image:
Discover more articles and tutorials about Discovery.
Read more
3 ways to perform HTTP requests
Automatic Time Series archiving
Leveraging WarpScript from Pig to analyze your time series

Senior Software Engineer