Using Grafana UI components in my own application

See: https://www.npmjs.com/package/@grafana/ui

I’ve been npm installing it and @grafana/data but find it difficult to make things come to life. What I would want is to use the Grafana React components to render Prometheus data in my own project. But I’m not even sure this is something that is supposed to be possible or not. The lack of documentation for a stand-alone solution suggests it isn’t.

I quote:

Our goal is to deliver Grafana’s common UI elements for plugins developers and contributors.

So it doesn’t seem like this code is suggested to be used for stand-alone projects.

Can someone point out if what I want is allowed? And if it is, where I could find documentation?

2 Likes

Well, it’s an open source project, so I don’t see how it wouldn’t be allowed. However, I doubt you’ll get much (or any) support for doing it as it really has nothing to do with the project.

Hello @mhageman ,
is there any progress regarding this question? I have the same issue, I also want to implement grafana UI components in my mobile hybride application and need a proper package, I can use.
Is it possible with @grafana/ui?

Hi @mhageman and @sebasian101 what sort of problems did you have trying to implement grafana/ui? Were you able to solve any? I’m also trying to implement the UI components.

Last I checked, in 2019, Grafana was not what I needed. I wanted to render graphs in an application for a Fortune 500 company, but Grafana did not (at the time) allow you to easily render just one type of graph as a stand-alone component, or not very easily anyway.

I ended up saving time by not using Grafana for our purposes, by basically writing it myself, combined with some code that I took from open-source solutions.

My misunderstanding was because a PM in that project referred to Grafana as a React component library to render stand-alone graphs in our apps. That was and still doesn’t seem to be the case.

Car analogy time: I needed just the seat. Grafana is the entire car.

Note: This might have changed in the past 3 years. I don’t know because I haven’t touched Grafana since.

July 2022:
There is no solution to this problem, yet.
It is not possible to use Grafana as a standalone component and integrate it in your own application. You have to query your data and build your own UI with ChartJS or some other tools.

Well, I was able to recreate grafana gauge using d3.js, I know it’s not a solution to this but I was driven by the same intention of using grafana as standalone components, if anyone interested: GitHub - antoniolago/react-gauge-component: React gauge component for data visualization.

hello, I have the same question, can anyone indicate any tools related or not to grafana, related to the construction and implementation of dashboards…?