Create a plugin based on the default grafana graph-panel

Grafana Plugin Development
1

Hello,
I’m trying to add some simple modifications to the default graph panel plugin, but I’m failing to build it.
As far as I understood, it’s an angular type plugin (judging from the .ts file type and the angular imports), so I started from https://github.com/grafana/simple-angular-panel (from the docs) but when I copied over the contents of the default graph panel plugin to ./src/ and tried building it (via yarn dev) it blew up with a bunch of errors. The react plugin was behaving the same way (tried it because I saw some .tsx files in the Legend folder).

What is the proper way to extend the Grafana Graph Panel?

Thanks!

Edit: Clarifying that I want to extend the default grafana graph panel and not the default example plugin from the documentation.

2

Try building the react graph plugin using ‘yarn watch’ command. This enables you to develop without rebuilding it every change you make. I also had trouble with building angular version, but when I did this it worked straight away. Also if your problem persists could you please copy over or at least screenshot the errors you are given?

3

Hi!
Thanks for taking time to answer!

I see that I actually wrote my question very poorly. I’ll edit it so that it actually makes sense.
What I want to do is to extend the default grafana graph panel, the one residing in public/app/plugins/panel/graph on a default installation from the tarball. My steps so far:

  1. Extract grafana-6.3.2.tar.gz
  2. Run bin/grafana-server once to generate data/plugins
  3. Create directory data/plugins/grafana-extended-graph-panel
  4. Run npm init, tsc initand create a webpack.config.js in that folder
  5. Create folder ‘src’ and copy everything from public/app/plugins/panel/graph
  6. Grab a copy of webpack.plugin.config.js from @grafana/toolkit/src/config/

So far, so good.
Running webpack-cli results in a "Can’t load module tinycolor2" which I add manually to externals and webpack is satisfied.
ts-loader however is shouting at me for almost everything.

I tried using grafana-toolkit plugin:build but that failed even on the linting part.

1 Like
4

Have you got any good results with this?

I’ve been trying to clone the elasticsearch datasource plugin. And it seems it is so tightly coupled to the rest of codebase, so it is not really practical doing it. Unless someone will give a hint…