Ich möchte dann auch meinen Teil beitragen 
Die ultimative Grafana Integration >>> transparent <<<
Bevor ich hier allerdings groß schreibe, möchte ich mich bei der Community bedanken die mich zu dem Ergebnis gebracht haben.
So nun aber ... ich möchte euch hier zwei Möglichkeiten zeigen, wie Ihr Grafana bestmöglich in die Lovelace UI integrieren könnt.
- Grafana transparent komplett auf einer ganzen Seite als Iframe
- Einzelnes Panel transparent als Iframe
1)
Hierzu benötigt Ihr zuerst das plugin "Boom Theme"
Use grafana-cli
grafana-cli plugins install yesoreyeram-boomtheme-panel
Danach ein neues Panel erstellen und als Visualisierung Boom Theme wählen. Unter Custom Style / CSS Override folgenden Code einfügen:
body{
background: transparent;
}
.page-dashboard .main-view, .page-explore .main-view{
background: transparent !important;
border: 0px solid transparent !important;
}
.panel-container{
border: 0px solid #1F2129 !important;
}
.graph-legend-table .graph-legend-series:nth-child(2n) {
background: transparent;
}
Das Panel am besten oben einsortieren damit es direkt geladen wird.
Speichern und ab zu Lovelace.
-> Bearbeiten und neue Ansicht Hinzufügen
-> Karte hinzufügen "Manuell"
YAML-Code hinzufügen:
type: iframe
url: 'http://192.xxx.x.xxx:3000/deinegrafanaurlausdembrowser'
aspect_ratio: 50%
Speichern und ich hoffe dein Erfolgserlebnis ist da
2)
Hier erstellen wir zuerst eine mygrafana.css Datei mit folgendem Inhalt:
@charset "UTF-8";
body.dashboard-solo, .panel-container, .main-view{
background-color: transparent;
}
.graph-legend-table th{
color: white;
}
.view{
/*background-color: linear-gradient(0deg, #2c2a3f, #4f344c, #2c2a3f) !important; *//*Hintergrundfarbe vom Dahsboard auf dem der Container liegt*/
/*background-color: #332939 !important;*/
}
.graph-legend-table .graph-legend-series:nth-child(2n) {
background: transparent;
}
Und laden diese über die Lovelace Adaptereinstellungen -> Kundenspezifische hoch.
Danach loggen wir uns per ssh auf dem Grafana Server ein und öffnen die index.html
sudo nano /usr/share/grafana/public/views/index.html
Hier muss nun innerhalb des Head-Bereichs folgender Code eingefügt werden:
(IP anpassen)
<link rel="stylesheet" href="http://192.xxx.x.xxx:8091/cards/mygrafana.css" type="text/css"/>
Habe es vor </head> eingefügt. Hauptsache irgendwo da.
Panel als Iframe sollte klar sein:
-> Panel Share
-> embed link Copy
-> Lovelace Iframe link einfügen
Nach einem Reboot sollte es hoffentlich alles laufen.
Falls nicht habt ihr vielleicht noch folgendes Problem. Ich hatte eine ältere Grafana Version 6.0.x und musste erst upgraden auf 7.xxx. Dazu fehlte dann noch der Eintrag das Grafana eingebettet werden darf.
Dazu kontrolliert die Grafana.ini
sudo nano /etc/grafana/grafana.ini
Unter Security
allow_embedding = true
Und kontrolliert unter Anonymus Auth
[auth.anonymous]
# enable anonymous access
enabled = true
# specify organization name that should be used for unauthenticated users
org_name = iobroker <<<( hier muss euer Organisation name rein den Ihr bei Grafana hinterlegt habt)
# specify role for unauthenticated users
org_role = Viewer
Speichern, Schließen, Reboot und ich hoffe es funktioniert
Ich bin nun mal noch so frei und behaupte ohne es getestet zu haben das es auch in jeder anderen Visualisierung geht da es um Grafana und Iframe geht und nicht direkt um Lovelace.
Grüße,
Christoph
