mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
docs(plugins): add css to panel example
This commit is contained in:
parent
f3b915c43a
commit
01d5bc73cc
@ -20,7 +20,7 @@ To interact with the rest of grafana the plugins module file can export 5 differ
|
||||
|
||||
## Plugin json
|
||||
There are two datasource specific settings for the plugin.json
|
||||
```
|
||||
```javascript
|
||||
"metrics": true,
|
||||
"annotations": false,
|
||||
```
|
||||
|
@ -4,7 +4,25 @@ page_description: Panel plugins for Grafana
|
||||
page_keywords: grafana, plugins, documentation
|
||||
---
|
||||
|
||||
> Our goal is not to have a very extensive documentation but rather have actual code that people can look at. An example implementation of a datasource can be found in the grafana repo under /examples/panel-boilerplate-es5
|
||||
|
||||
# Panels
|
||||
|
||||
TODO
|
||||
To interact with the rest of grafana the panel plugin need to export a class in the module.js.
|
||||
This class have to inherit from sdk.PanelCtrl or sdk.MetricsPanelCtrl and be exported as PanelCtrl.
|
||||
|
||||
```javascript
|
||||
return {
|
||||
PanelCtrl: BoilerPlatePanelCtrl
|
||||
};
|
||||
```
|
||||
|
||||
This class will be instancieted once for every panel of its kind in a dashboard and treated as an AngularJs controller.
|
||||
|
||||
## MetricsPanelCtrl or PanelCtrl
|
||||
|
||||
MetricsPanelCtrl inherits from PanelCtrl and adds some common features for datasource usage. So if your Panel will be working with a datasource you should inherit from MetricsPanelCtrl. If dont need to access any datasource then you should inherit from PanelCtrl instead.
|
||||
|
||||
## Implementing a MetricsPanelCtrl
|
||||
|
||||
If you choose to inherit from MetricsPanelCtrl you should implement a function called refreshData that will be called by grafana when its time for all panels to get new data.
|
3
examples/panel-boilerplate-es5/css/styles.css
Normal file
3
examples/panel-boilerplate-es5/css/styles.css
Normal file
@ -0,0 +1,3 @@
|
||||
.panel-boilerplate-values {
|
||||
text-align: center;
|
||||
}
|
@ -1,6 +1,7 @@
|
||||
define([
|
||||
'app/plugins/sdk',
|
||||
'lodash'
|
||||
'lodash',
|
||||
'./css/styles.css!'
|
||||
], function(sdk, _) {
|
||||
|
||||
var BoilerPlatePanelCtrl = (function(_super) {
|
||||
|
@ -2,6 +2,6 @@
|
||||
Basic panel
|
||||
</h2>
|
||||
|
||||
<p class="text-center">{{ctrl.values}}</p>
|
||||
<p class="panel-boilerplate-values">{{ctrl.values}}</p>
|
||||
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user