Create panel plugin

Our goal in this doc is to develop a panel plugin named candlestick1, we named with 1 because there already exists a candlestick panel.

Create plugin

The simplest way of creating a panel plugin is just copy a existing external plugin.

You can copy demo plugin for start, because it is a very simple and clean plugin, but our goal is to create a canclestick1 plugin, so we should copy the candlestick plugin directory for start.

Create candlestick1 directory

First, enter DATAV_ROOT/ui/external-plugins/panel directory, you should see there is already a candlestick panel in it, let's copy this panel and rename to candlestick1.

Now you should have a code layout as above, next, rename candlestick1/candlestick.svg to candlestick1/candlestick1.svg. In datav , the icon of external plugin must has a same name as plugin directory for automatically install.

Install plugin

Since we have prepared our plugin source codes, now let's install it to the source code of Datav.

Execute the script in DATAV_ROOT/ui/external-plugins :

go run buildPlugins.go
2023/09/26 09:49:08 Generate panel plugins file successfully!

That's super easy, at this time, our new plugin candlestick1 is installed, you can develop this plugin now, but before start, we need to understand what has happened after calling the script.

Installed plugin files

The the install process, the files of external plugin has been installed to several places:

1. DATAV_ROOT/ui/public/plugins/external/panel, plugin icon and meta data are installed in this directory

open plugins.json, you should see the metadata as below:

[{"type":"candlestick"},{"type":"candlestick1"}]

This will tell Datav: there are currently two external panel plugins been installed, some readers may notice that: plugin directory, plugin icon and plugin type, they all have the same names.

2. DATAV_ROOT/ui/src/views/dashboard/plugins/external

There is a plugins.ts fileIn this directory, it is very important, because the import relationships of modules is described in this file:

// DON'T modify this file, it is automatically generated by Datav external plugin system
import { DatasourcePluginComponents, PanelPluginComponents } from "types/plugins/plugin"

import CandlestickComponents from "./panel/candlestick"
import Candlestick1Components from "./panel/candlestick1"
import VictoriaMetricsDatasrouceComponents from "./datasource/victoriaMetrics"
export const externalPanelPlugins: Record<string,PanelPluginComponents> = {
	"candlestick": CandlestickComponents,
	"candlestick1": Candlestick1Components,
}
export const externalDatasourcePlugins: Record<string,DatasourcePluginComponents> = {
	"victoriaMetrics": VictoriaMetricsDatasrouceComponents,
}

3. DATAV_ROOT/ui/src/views/dashboard/plugins/external/panel

Yep, this is the most important part of the candlestick1 plugin, because its source code is in this directory, and also that's where we will develop our plugin in.

Browse plugin in UI

Since we have just installed this plugin, before start to develop, let's view it in UI, and see what it looks like.

In UI directory, run vite to start a dev server and open http://localhost:5173. Create a panel, then enter its panel editor, you should see :

You should see exactly the same as above image, let's choose candlestick1 panel for visualization:

Nice, it works as expected, now it's time for some develoment.