I’m currently working on a project where I need to create a custom visualization graph. This graph has already been implemented in Grafana 6, and my task is to rewrite it for Grafana 10.
The previous developer used the p5 library along with p5-react-wrapper to create the graph. While that works, I’m wondering if there are best practices or alternative methods for creating custom graphs without using p5.
I’m developing the project using React 18 and Node 18, and I’m seeking some guidance on how best to proceed. Attached below is a screenshot of how the graph looked in Grafana 6.
Looking at the p5 library, it allows to do a lot of dynamic visualizations, 3D, etc. The question is which visualizations were implemented in Grafana 6.
Grafana 10 provides many native and community panels, which should work out of the box.
Only 2D that’s way I don’t know why the previous developer took this approach with 5 . Okay but if somebody would need to write a custom one what would be the best approach to do that. I think that only Custom panel should be made… But I don’t know how to make only that without making new chart as well…
You can play around with the latest Grafana out-of-the-box features (e.g. left and right Y-axes) here. There are a lot of customization features in v10 that may not have existed in v6.
Do you already have a working installation of Grafana 10, and if yes, have you tried pasting your Influx query into that?
This is the first time building grafana plugin. And yes I have aprox. 3 years of React development. It’s just hard time navigation and figure it out what previous developer had in mind why it was he took this approach 3.
And yes I have previous code. But it’s written so bad… Everything in one file… The created with React custom panels so (x-asix,y-asxis options etc.) then for the chart he used p5 wrapper and p5 and p5 so where the graph is build it’s like 900 lines of code with no comments and no logical naming…
I’ve already figure out most of logic but he so overcomplicated thing that I can’t get my head around… And the module.tsx has like 1000 lines of code… In module.ts he proccesed data and made graph, PanelOptions…
Yes I have installed latest grafana and the latest grafana plugin package for development. And yes I have already pasted that influx Query and I get the data as well… Well the biggest problem is the code previous developer wrote i can’t figure it out really…
Yes I did watch the video… I read the documentation as well… Yea I still can’t belavie that this even works… Because based on code he had 0 experience with React or any development I would say…
No going with migration has no point… I already started rewriting right now I have a problem that he created on every Data series a new series data in real life looks like this
This is Vector plugin and enables the display of vector channels in Grafana. Typical
vector channels are FFTs and Scope Math channels.
But quite hard to explain… These are docs where everything is more explained
