{"id":13478849,"url":"https://github.com/grafana/grafana-plugin-examples","last_synced_at":"2025-05-16T15:03:11.028Z","repository":{"id":40484255,"uuid":"264939182","full_name":"grafana/grafana-plugin-examples","owner":"grafana","description":null,"archived":false,"fork":false,"pushed_at":"2025-05-14T14:53:45.000Z","size":613448,"stargazers_count":205,"open_issues_count":18,"forks_count":60,"subscribers_count":147,"default_branch":"main","last_synced_at":"2025-05-14T14:57:33.257Z","etag":null,"topics":["keep"],"latest_commit_sha":null,"homepage":"","language":"Shell","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/grafana.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2020-05-18T12:54:22.000Z","updated_at":"2025-05-14T14:53:47.000Z","dependencies_parsed_at":"2023-02-10T01:45:23.620Z","dependency_job_id":"513b24e0-78ea-423e-a86f-4e7cb2c9c35d","html_url":"https://github.com/grafana/grafana-plugin-examples","commit_stats":{"total_commits":465,"total_committers":33,"mean_commits":"14.090909090909092","dds":0.7612903225806451,"last_synced_commit":"639ac0488cc311281ab4ea807cd89d28c60ff2b9"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/grafana%2Fgrafana-plugin-examples","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/grafana%2Fgrafana-plugin-examples/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/grafana%2Fgrafana-plugin-examples/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/grafana%2Fgrafana-plugin-examples/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/grafana","download_url":"https://codeload.github.com/grafana/grafana-plugin-examples/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254553936,"owners_count":22090415,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["keep"],"created_at":"2024-07-31T16:02:04.454Z","updated_at":"2025-05-16T15:03:11.015Z","avatar_url":"https://github.com/grafana.png","language":"Shell","funding_links":[],"categories":["Shell"],"sub_categories":[],"readme":"# Grafana plugin examples\n\nThis repository contains example plugins to showcase different use cases.\n\n## App plugins\n\n| Example                                                       | Description                                                                                |\n| ------------------------------------------------------------- | ------------------------------------------------------------------------------------------ |\n| [app-basic](examples/app-basic)                               | Shows how to build a basic app plugin that uses custom routing                             |\n\n## Panel plugins\n\n| Example                                           | Description                                                                                                                       |\n| ------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- |\n| [panel-basic](examples/panel-basic)               | Shows how to build a panel plugin that uses the time series graph from `@grafana/ui` to read and update the dashboard time range. |\n| [panel-datalinks](examples/panel-datalinks)       | Shows how to build a panel plugin that uses the datalinks functionality of Grafana.                                               |\n\n## Data source plugins\n\n| Example                                                                                   | Description                                                                                                   |\n| ----------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- |\n| [datasource-basic](examples/datasource-basic)                                             | Shows how to build a basic data source plugin.                                                                |\n\n\u003e [!NOTE]\n\u003e The plugin examples in this repository use NPM to manage frontend dependencies. Whilst you are welcome to copy these examples and use Yarn or PNPM instead, we offer no support for them.\n\n## Integration tests\n\nSome of the examples in this repository contain integration tests that make use of [`@grafana/plugin-e2e`](https://npmjs.com/package/@grafana/plugin-e2e) package. These tests can be run individually by navigating to the example plugin and running one of the following commands:\n\n- `npm run e2e` - run Playwright e2e tests\n\n### Testing against latest versions of Grafana\n\nThe GitHub workflow `.github/workflows/integration-tests.yml` finds all plugin examples identified by the existence of `src/plugin.json`. For every example plugin, build scripts will be run to confirm the plugins can be built against intended and canary NPM packages. Any example plugin that has a playwright.config.ts file will run the following:\n\n1. Build the plugin with the provided version of Grafana packages and test against the provided version of Grafana\n   - _asserting the plugin works with its expected versions_\n2. Build the plugin with the provided version of Grafana packages and test against the latest version of Grafana\n   - _asserting the plugin can run with the packages provided by the latest Grafana core_\n3. Upgrade all Grafana NPM packages to the latest version and test against latest version of Grafana\n   - _asserting the plugin can still build with the latest Grafana NPM packages_\n\n## Using the examples as the base for your plugins\n\nAll of the examples use [grafana/create-plugin](https://grafana.com/developers/plugin-tools) instead of `@grafana/toolkit`.\n\nYou can read more about customizing and extending the base configuration in our [documentation](https://grafana.com/developers/plugin-tools/create-a-plugin/extend-a-plugin/extend-configurations).\n\n## API Compatibility\n\nIf your plugin uses TypeScript, then you can use [`@grafana/levitate`](https://github.com/grafana/levitate/) to test if the Grafana APIs your plugin is using are compatible with a certain version of Grafana.\n\nFor example, to see a compatibility report of your plugin code and the latest release of the grafana APIs, use:\n\n```\nnpx @grafana/levitate@latest is-compatible --path src/module.ts --target @grafana/data,@grafana/ui,@grafana/runtime\n\n```\n\nYou may also specify a target version:\n\n```\nnpx @grafana/levitate@latest is-compatible --path src/module.ts --target @grafana/data@9.0.5,@grafana/ui@9.0.5,@grafana/runtime@9.0.5\n\n```\n\nThe following GitHub workflow example can be used in your project to keep an eye on the compatibility of your plugin and the grafana API.\n\nIf you host your project in GitHub and want to use [GitHub Actions](https://docs.github.com/en/actions), then you could create a new file in your project in `.github/workflows/levitate.yml` and add the following content:\n\n```yaml\nname: Compatibility check\non: [push]\n\njobs:\n  compatibilitycheck:\n    runs-on: ubuntu-latest\n    steps:\n      - uses: actions/checkout@v3\n      - uses: actions/setup-node@v3\n        with:\n          node-version: '20'\n      - name: Install dependencies\n        run: npm install\n      - name: Build plugin\n        run: npm run build\n      - name: Compatibility check\n        uses: grafana/plugin-actions/is-compatible@v1\n        with:\n          module: './src/module.ts'\n          comment-pr: 'yes'\n          fail-if-incompatible: 'no'\n```\n\nThis runs a compatibility check for the latest release of Grafana plugins API in your project every time a new push or pull request is open. If it finds an error you will see a message indicating you have an incompatibility.\n\nSometimes incompatibilities are minor. For example, a type changed but this doesn't affect your plugin. We recommend that you upgrade your Grafana dependencies if this is the case so you always use the latest API.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgrafana%2Fgrafana-plugin-examples","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgrafana%2Fgrafana-plugin-examples","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgrafana%2Fgrafana-plugin-examples/lists"}