Panel plugin using React and D3js

Hi everyone,

I have been trying to make some data visualization using Grafana, React and D3js.
However, after serveral attempts, i can not figure out how many basic actions are done.
(Some attempts were somewhat successful - but definitely not ‘good’ attempts :joy:)

It looks like there is very little to no documentation and even Github is pretty empty regarding a panel plugin made in React and D3js.

My question is …
Is there anyone here who have successfully made a panel plugin using React and D3 who is willing to share their knowledge?

Some code or some guidance would be appreciated :slight_smile:

Even I am trying to develop the same. I followed the tutorial but the plugin doesn’t appear in the local grafana instance. If anybody have done this successfully, please help.

Folks, I tried to run and install this plugin.

Nice work, the original code in *SimplePanel.tsx as created by the

npx @grafana/toolkit plugin:create my-plugin

it just works!

However, whatever I do to the code in following the instructions in the tutorial, fails to compile with yarn dev. This even applies to the "Complete Example"
This fails with

../grafana-plugins/my-plugin/src/SimplePanel.tsx 29:11 error Missing "key" prop for element in iterator react/jsx-key

Why does it not just work like the original code?

Thank you kind folk for taking a moment to assist.

Best wishes