grafana/grafana-starter-panel

A starter for Grafana panel plugins

⚠️ Deprecated!

This repository is deprecated.
A more up-to-date version of panel plugin examples is available here: https://github.com/grafana/grafana-plugin-examples#panel-plugins

Examples:

• panel-basic - demonstrates how to build a panel plugin that uses the time series graph
• panel-flot - demonstrates how to use the Flot plotting library in a panel plugin.
• panel-plotly - demonstrates how to use the Plotly graphing library in a panel plugin.

---

Grafana Panel Plugin Template

This template is a starting point for building Grafana Panel Plugins in Grafana 7.0+

What is Grafana Panel Plugin?

Panels are the building blocks of Grafana. They allow you to visualize data in different ways. While Grafana has several types of panels already built-in, you can also build your own panel, to add support for other visualizations.

For more information about panels, refer to the documentation on Panels

Getting started

1. Install dependencies

   yarn install

2. Build plugin in development mode or run in watch mode

   yarn dev

   or

   yarn watch

3. Build plugin in production mode

   yarn build

Learn more

• Build a panel plugin tutorial
• Grafana documentation
• Grafana Tutorials - Grafana Tutorials are step-by-step guides that help you make the most of Grafana
• Grafana UI Library - UI components to help you build interfaces using Grafana Design System

grafana-starter-panel's Issues

Error building on windows

I'm new to React development, so I could be making a noob mistake, but I get this error when checking out a fresh copy of the master branch and running yarn build.

Cannot read property 'name' of null

$ node -v
v8.11.4  

$ npm -v
6.9.0

Full output -

$ yarn build
yarn run v1.17.3
$ grafana-toolkit plugin:build
Running Build plugin task
√ Cleaning
√ Preparing
√ Prettier check
√ Linting
 PASS  src/module.test.ts

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        1.841s, estimated 2s
Ran all test suites with tests matching "".
√ Running tests
× Cannot read property 'name' of null
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Error building on linux

Just downloaded yarn and cloned this repository in a fresh ubuntu machine:

yarn build

yarn run v1.21.1
$ grafana-toolkit plugin:build
TypeError: Cannot read property 'access' of undefined
    at Object.<anonymous> (/var/lib/grafana/plugins/simple-react-panel/node_modules/@grafana/toolkit/src/cli/tasks/plugin.build.js:16:28)
    at Module._compile (module.js:652:30)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)
    at Module.require (module.js:596:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/var/lib/grafana/plugins/simple-react-panel/node_modules/@grafana/toolkit/src/cli/index.js:13:22)
    at Module._compile (module.js:652:30)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)
    at Module.require (module.js:596:17)
    at require (internal/module.js:11:18)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

How to disable lint???

Lint is a matter of taste, so, as boilerplate, there should be a way to disable or change the lint.

Can I write datasource plugin in react?

Thanks for sharing panel plugin in react.
At the same time can I write datasource plugin in react ? If so, Is there any demo like this one?

ENV variables are not available in plugin

I'm trying to pass environment variables to the plugin to be able to configure it.
I have the env variable REACT_APP_API_URL set, I can see it in my container by running the env command.
But for some reasons console.log(process.env) is empty when the plugin is executed on the Grafana dashboard.

Cannot find toolkit-6.4.0-alpha.44-63f47fd8e.tgz

Hi,
I tried to install dependencies and I get following error:

$ yarn install
yarn install v1.5.1
(node:44048) [DEP0005] DeprecationWarning: Buffer() is deprecated due to security and usability issues. Please use the Buffer.alloc(), Buffer.allocUnsafe(), or Buffer.from() methods instead.
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
error An unexpected error occurred: "https://registry.yarnpkg.com/@grafana/toolkit/-/toolkit-6.4.0-alpha.44-63f47fd8e.tgz: Request failed \"404 Not Found\"".
info If you think this is a bug, please open a bug report with the information provided in "XXXX/simple-react-panel/yarn-error.log".
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.

The problem seems to be introduced in cfbfd76 because if I checkin the commit before install works fine.

Error loading: myorgid-simple-panel

Error loading: myorgid-simple-panel

yarn.lock refresh

Hello,

The existing yarn.lock is a big PITA because of node-sass@^4.13.1 which depends on node-gyp@^3.8.0 which ultimately needs Python 2... Is there a problem if we do a yarn upgrade and then commit the updated yarn.lock to avoid this kind of issues for new comers?

Thanks,
Nicolae

Can't seem to load the plugin in grafana

Hi,

first of all I'm a beginner, so sorry if I'm asking something obvious.

I downloaded the master grafana branch and the master branch of this plugin. Then I ran yarn build and yarn dev, as written in the readme, but when I try loading it in a grafana panel, I get a "panel not found errro", although I see the icon image and the option to use it as visualization. Any ideas?

Add example webpack config

Can u please add a webpack.config.(t|j)s example. ?

Map is not showing geo points

I've setup the panel as per the animated gif on the grafana plugin registry:

This is an example of my data:

And here is the panel configuration:

But I get no points on the map:

There are also no console log errors.
Have I done something wrong?
This is grafana v7.5.0

Error loading: myorgid-simple-panel

I read the grafana documentation and starting with this example and then working my way towards integrating the funnel part but I can't seem to get it working。I restarted the Server when I tried opening this Panel I got an error saying Error loading: myorgid-simple-panel.My grafana version is 6.4.4, node.js version is 12.13.1;How to solve this?

setPanelOptions is not a function

Hello guys,

I tried to install this plugin in Grafana 6.5.3 (built from sources, Linux environment) and after I have executed yarn install and yarn dev this error message is shown in browser console:

Error loading panel plugin: myorgid-simple-panel Error: "(new _grafana_data__WEBPACK_IMPORTED_MODULE_0__.PanelPlugin(...)).setPanelOptions is not a function
  Evaluating http://localhost:3000/public/plugins/myorgid-simple-panel/module.js
  Loading plugins/myorgid-simple-panel/module"
    ts module.ts:5
    Webpack 9
        __webpack_require__
        <anonymous>
        <anonymous>
        i
        qe
        j
        O
        k
        ./node_modules/systemjs/dist/system.js/</</f.prototype[i.resolveInstantiate]/</<
plugin_loader.ts:246

I don't know what to do because I did nothing :) but installing it.

Have I forgotten something?

Thank you in advance

Add the actual needed dependencies in case yarn is not used

The yarn thing is just a guess, because I ripped it out immediately. But doing so, I discovered I then had to install a bunch of packages that were just? never specified?

"@babel/preset-env": "^7.10.4",              
"@grafana/tsconfig": "^1.0.0-rc1",           
"babel-loader": "^8.1.0",                    
"babel-plugin-angularjs-annotate": "^0.10.0",
"ts-loader": "^8.0.1",                       
"tslib": "^2.0.0"                            

Without that it just doesn't build.

That was a frustrating experience! Hope this helps someone else