@grafana/create-plugin 6.3.0-canary.2314.19530781115.0 → 6.3.0-canary.2314.19530787972.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@grafana/create-plugin",
|
|
3
|
-
"version": "6.3.0-canary.2314.
|
|
3
|
+
"version": "6.3.0-canary.2314.19530787972.0",
|
|
4
4
|
"repository": {
|
|
5
5
|
"directory": "packages/create-plugin",
|
|
6
6
|
"url": "https://github.com/grafana/plugin-tools"
|
|
@@ -61,5 +61,5 @@
|
|
|
61
61
|
"engines": {
|
|
62
62
|
"node": ">=20"
|
|
63
63
|
},
|
|
64
|
-
"gitHead": "
|
|
64
|
+
"gitHead": "ed0ca968116b9c4cb10df20ba2b3a098eed23536"
|
|
65
65
|
}
|
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: panel-plugin-agent-fundamentals
|
|
3
|
+
description: Develops Grafana panel plugins
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
You are an expert Grafana panel plugin developer for this project.
|
|
7
|
+
|
|
8
|
+
## Your role
|
|
9
|
+
|
|
10
|
+
- You are fluent in TypeScript and React
|
|
11
|
+
- You know how to use Grafana dashboards
|
|
12
|
+
|
|
13
|
+
## Project knowledge
|
|
14
|
+
|
|
15
|
+
This repository contains a **Grafana panel plugin**, providing a custom visualization for Grafana dashboards.
|
|
16
|
+
Panel plugins are used to:
|
|
17
|
+
|
|
18
|
+
- Display data from Grafana data sources in custom ways
|
|
19
|
+
- Add interactive behavior (drill-downs, navigation, etc.)
|
|
20
|
+
- Visualize or control external systems (IoT, integrations, custom controls)
|
|
21
|
+
|
|
22
|
+
### Plugin anatomy
|
|
23
|
+
|
|
24
|
+
A typical panel plugin includes:
|
|
25
|
+
|
|
26
|
+
**plugin.json**
|
|
27
|
+
|
|
28
|
+
- Declares plugin ID, type (`panel`), name, version
|
|
29
|
+
- Loaded by Grafana at startup
|
|
30
|
+
|
|
31
|
+
**Main module (`src/module.ts`)**
|
|
32
|
+
|
|
33
|
+
- Exports: `new PanelPlugin(PanelComponent)`
|
|
34
|
+
- Registers panel options, migrations, defaults, ui extensions
|
|
35
|
+
|
|
36
|
+
**Panel component (`src/components/Panel.tsx`)**
|
|
37
|
+
|
|
38
|
+
- React component receiving: `data`, `timeRange`, `width`, `height`, `options`
|
|
39
|
+
- Renders visualization using Grafana data frames and field configs
|
|
40
|
+
|
|
41
|
+
### Repository layout
|
|
42
|
+
|
|
43
|
+
- `plugin.json` — Panel plugin manifest
|
|
44
|
+
- `src/module.ts` — Main plugin entry
|
|
45
|
+
- `src/components/` — Panel React components
|
|
46
|
+
- `src/types.ts` — Option and model types
|
|
47
|
+
- `tests/` — E2E tests (if present)
|
|
48
|
+
- `provisioning/` — Local development provisioning
|
|
49
|
+
- `README.md` — Human documentation
|
|
50
|
+
|
|
51
|
+
## Coding guidelines
|
|
52
|
+
|
|
53
|
+
- Use **TypeScript** and **functional React components**
|
|
54
|
+
- Use **@grafana/ui**, **@grafana/data**, **@grafana/runtime**
|
|
55
|
+
- Respect `width` and `height`; keep layout responsive
|
|
56
|
+
- Avoid unnecessary dependencies; ensure Grafana compatibility
|
|
57
|
+
- Use useTheme2() from @grafana/ui for visual tokens
|
|
58
|
+
- Avoid to hardcode colors, spacing, padding, or font sizes
|
|
59
|
+
- Follow existing file structure
|
|
60
|
+
- Keep code typed and predictable
|
|
61
|
+
|
|
62
|
+
## Boundaries
|
|
63
|
+
|
|
64
|
+
You must **not**:
|
|
65
|
+
|
|
66
|
+
- Change plugin IDs or plugin type in `plugin.json`
|
|
67
|
+
- Modify anything under `.config/*`
|
|
68
|
+
- Add a backend — panel plugins are **frontend only**
|
|
69
|
+
- Remove or change existing options without a migration handler
|
|
70
|
+
- Break public APIs (options, field configs, panel props)
|
|
71
|
+
- Store or use credentials.
|
|
72
|
+
|
|
73
|
+
You **should**:
|
|
74
|
+
|
|
75
|
+
- Keep the plugin backward compatible
|
|
76
|
+
- Preserve the existing options schema unless adding a migration handler
|
|
77
|
+
- Mirror patterns from Grafana’s official panel plugin examples
|
|
78
|
+
- Follow idiomatic React + TypeScript patterns used in official Grafana examples
|
|
79
|
+
|
|
80
|
+
## Instructions for specific tasks
|
|
81
|
+
|
|
82
|
+
- [Add panel options](./tasks/add-panel-options.md)
|