[FTUI3] Grafana-Image-Renderer Integration

[presskopf]

Hallo zusammen,

eigentlich wollte ich es erst in Codeschnipseln posten, ist aber vermutlich hier besser.
Vor allem weil ich nicht so richtig überblickt habe, ob es sowas nicht schon gibt.

Seit ich ChatGPT für mich programmieren lasse, komme ich auch mit Javascript zurecht. 
Also, das folgende Werk wurde nur auf meinen Geheiß erstellt. Selbst Handanlegen kann ich nur rudimentär. Da muss ich ehrlich sein.
Ob der Code "toll und effizient" erstellt wurde, weiß ich nicht, aber er tut erst mal das, was er soll. 

Worum geht's?
Ich nutze gerne im FTUI3 Diagramme, die ich mir vom Grafana-Renderer erstellen lasse.
In der Bezugs-URL kann man ja den Zeitabschnitt direkt eingeben. Eingebunden als <ftui-image> ist das halt statisch. Dynamisch wäre aber toll.

Und so setzte ich die KI darauf an.
Herausgekommen ist die angehängte "grafana-render.component.js".
Es wird ein Default-Zeitabschnitt eingestellt, bspw. "month". Nun kann man per Klick vor und zurück navigieren.
Als das ging, ließ ich zusätzlich noch eine Umstellung des Zeitabschnitts integrieren.

Das Rendern findet natürlich auf dem Grafana-Server statt und das dauert, je nach Diagramm natürlich.
Die Grafana-Render-URL muss aufgedröselt werden; wer Grafana kennt, kommt damit normalerweise zurecht.

setPeriod('hour' | 'day' | 'week' | 'month' | 'year')
Kurzaufrufe: setHour(), setDay(), setWeek(), setMonth(), setYear()
back()/next() bleiben für Offsets (z.B. Vormonat) bestehen.

Die Grafana-Render-URL muss aufgedröselt werden; wer Grafana kennt, kommt damit normalerweise zurecht.
Hier ein beispielhafte Integration:

Code Auswählen Erweitern

<ftui-grafana-render
  alias="grafanaRender"
  ip="192.168.0.142"
  port="3000"
  uid="cecac1lh9v9q8c"
  dashboard="wasserverbrauch"
  panel-id="5"
  org-id="1"
  range-unit="month"
  theme="dark"
  width="1400"
  height="300"
  refresh="300"
  nocache>
</ftui-grafana-render>

<!-- Navigation -->
<ftui-icon name="chevron-left" @click="grafanaRender.back()"></ftui-icon>
<ftui-icon name="chevron-right" @click="grafanaRender.next()"></ftui-icon>

<!-- Zeitraum-Umschalter -->
<ftui-label @click="grafanaRender.setDay()">Day</ftui-label>
<ftui-label @click="grafanaRender.setWeek()">Week</ftui-label>
<ftui-label @click="grafanaRender.setMonth()">Month</ftui-label>
<ftui-label @click="grafanaRender.setYear()">Year</ftui-label>

Ergänzung 07.12.2025:
Es gibt nun noch weitere Zeitspannen:
2 Tage: grafanaRender.set2Days() → range="2d", Offset 0
7 Tage: grafanaRender.set7Days() → range="7d"
30 Tage: grafanaRender.set30Days() → range="30d"
90 Tage: grafanaRender.set90Days() → range="90d"
6 Monate: grafanaRender.set6Months() → range="6M"
1 Jahr: grafanaRender.set1Year() → range="1y"

Integration entweder

Code Auswählen Erweitern

<ftui-label @click="grafanaRender.setRangeSpan('7d')" class="size-4">7 Days</ftui-label>
oder

Code Auswählen Erweitern

<ftui-label @click="grafanaRender.set7Days()" class="size-4">7 Days</ftui-label>

Bin gespannt, ob's jemand noch gebrauchen kann. Würde mich jedenfalls freuen. 

[meier81]

Hallo presskopf,

hab eben deinen Beitrag hier gefunden, hört sich echt interessant an. Hab bei mir nämlich auch Grafana im Einsatz.

Helfe mir mal kurz, hab deine

Code Auswählen Erweitern

grafana-render.component.js runtergeladen und im Ordner

Code Auswählen Erweitern

components einen neuen Ordner Namens

Code Auswählen Erweitern

grafana-render erstellt und die Datei dort reingelegt.

Stehe jetzt gerade etwas auf dem Schlauch, wie hast du jetzt den Code eingefügt? Wenn ich das richtig gesehen habe geht das ja bei dir als Popup auf, hast du dann den Code in eine eigene html-Datei gepackt und rufst das dann mit

Code Auswählen Erweitern

<ftui-label @click="grafanaRender.setRangeSpan('7d')" class="size-4">7 Days</ftui-label> nur auf? Hast du da evtl. noch ein detailreicheres Beispiel für mich?

Danke dir schonmal, LG Markus