Canvas panel for Grafana | Advanced animated SVG element
Вставка
- Опубліковано 22 лип 2024
- The Canvas panel for Grafana becomes generally available (GA) in Grafana 10. This video highlights the main features and demonstrates how to work with it. Ultimately, I touch base on how we built a pizzeria observability dashboard with advanced animated SVG.
Become a member of our fan club / @volkovlabs and earn loyalty badges!
LINKS FROM THE VIDEO
👉Blog post volkovlabs.io/blog/pizzeria-c...
👉Enable alpha configuration grafana.com/docs/grafana/late...
👉Official Canvas panel documentation grafana.com/docs/grafana/late...
👉What is new in Grafana 10 grafana.com/docs/grafana/late...
CHAPTERS
0:00 Intro
1:00 Canvas panel elements
1:15 Background
2:39 Simple elements
5:16 Edit mode versus Inline editor
6:03 Button on the Canvas panel
7:03 Animated SVG
7:43 Custom animated SVG
DISCOVER
👉 Documentation: docs.volkovlabs.io
👉 Blog: blog.volkovlabs.io
👉 GitHub: github.com/VolkovLabs
GET IN TOUCH
👉 Issues and questions: github.com/VolkovLabs
👉 GitHub Sponsor: github.com/sponsors/VolkovLabs
👉 LinkedIn: / volkovlabs
#Grafana #GrafanaPlugins #Visualization #visualización - Наука та технологія
Animated SVG is not yet easy to incorporate, but there is a way! Let me know if our instructions worked for you!
Is it easy now?
@@rsporsche Nothing changed since we published they video. You still need to create your own component to have animated SVG. You can do animated GIF out of the box.
Brillant! Thanks a lot for your video, I mean, as usual: you are great source of inspiration.
We appreciate the feedback! Do you use or plan to use the Canvas panel?
@@volkovlabs I tried a bit, but right now I am working on other subjects with Grafana. I have already some ideas, need time to implement. In you video I've understood we will be able to "get" some API endpoints with Grafana in a near future?
@@renobodyrenobody It's a POST request for now. You can enable it in the configuration.
thank you for video , its very helpful
Glad you learned from it! Are you creating a new advanced elements or using native?
Great!!!!
Looks like you found what you are looking for. Glad it helped.
Your videos have helped me so much as I've been working on my weather station project. I am lost now though as I am trying to create a custom animated svg that shows wind direction based on input, for example NNE from my data source. Any ideas where I can start?
As we demonstrated to create an animated SVG, you need to add an advanced component, which requires forking Grafana and build it yourself. Depends on your projects, I would suggest to check out the Apache ECharts.
There is a popular topic for wind direction in Grafana Forum: community.grafana.com/t/wind-direction-speed-timeline/67168/20
--
Mikhail
Hello, thanks for the great video! I followed the blog post to a T and do not see the pizza oven option in the dropdown (i already enabled advanced elements to see wind turbine etc). I added the source code to the elements folder with the others and updated the registry. Any thoughts? Do i have to compile grafana after the change?
Yes, Grafana needs to be compiled to see the change. We described steps in the blog volkovlabs.io/blog/pizzeria-canvas-20230723/#developing-and-building-a-docker-image
First of all, great video!
Do you just have to change the enable_alpha settting of the [plugins]-section to true and remove the semicolon in the grafana.ini-File to activate the button?
Because when I did this nothing has changed and the button hasn't appeared.
That's a great question. I have tried to update `enable_alpha` using environment variable in Docker container and it does not work, when it's supposed to. I can see Alpha panels, which means that settings enabled. I did both just in case.
```
- GF_PANELS_ENABLE_ALPHA=true
- GF_PLUGINS_ENABLE_ALPHA=true
```
When I added Pizza Oven element, I looked at the button's code and removed `state: PluginState.alpha` from the element's code and compiled Grafana to test it.
```
export const buttonItem: CanvasElementItem = {
id: 'button',
name: 'Button',
description: 'Button',
state: PluginState.alpha,
```
I looked at the Grafana source code, it should be working, but it's not. I can't easily find an issue in the Grafana GitHub repository. It needs additional investigation and submit an issue to Grafana.
It is very useful for me , But if datasource is a list , when I have multi elements , how to bind text value from second item ( or others ) ? .
Selected field for the element will show the latest item by default. If you need any other element, use transformations or update query accordingly.
Great video!! Tks!! .....i dont understand how i can upload a SVG icon =/
Daria explained it at 1:46. SVG icons can be loaded from external URL or from Grafana's img folder. Depends on the installation files can be copied to the Docker container or local folders.
Canvas panel for Grafana is very difficult to use.
Please tell us about the process of compiling Grafana to use Canvas panel for Grafana.
The process explained in details in the blog post for this video: volkovlabs.io/blog/pizzeria-canvas-20230723/#developing-and-building-a-docker-image
@@volkovlabs
Thank you for quick response.
Hi @volkovlabs Could you please provide example for 3d panel creation with @react-three/fiber
There is no Grafana plugin for react-three library as I know of. You can create 3D panels using Apache ECharts or there is a new beta Grafana panel.
Thank you@@volkovlabs
Very good explanation. Canvas gives some predefined icons, server, text, etc. But for me, flowcharting is better. But it is not maintained.
Thank you. I have not used flowcharting and it's Angular plugin, which are end of life in G10.
I have same thoughts, flowcharting plugins does the same, no need to edit source code to define animations. I like it but no longer maintain.
I hope future canvas release will look like flowcharting.
@@henroljeogutierrez1294 I hope so, Canvas journey just started.
@@volkovlabs In this case a lot of people will not update to G11. For me, flow charting is really powerful. I hope canvas plugin will shortly gives us possibilities similar to flow charting.
@@rafa2343 Looking at the number of downloads flowcharting is widely used. If Canvas can't fully replace it before G11, we can look into updating and supporting it.
We will need to find a sponsor for this project.
line editing, snap to grid missing its sad :/
It has a potential. Still some functionality is missing.
agree@@volkovlabs