[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>

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