Hintergrund von Grafana Dashboard in VIS entfernen

Feuersturm

@saeft_2003 Ich hab es mit Grafana10 noch nicht wieder ausprobiert, kann dir daher leider nicht sagen ob es weiterhin gehen sollte oder ob die Änderung mittlerweile anders aussehen muss.

saeft_2003

@feuersturm

OK. Gibt es unter grafana 10 eine andere Möglichkeit den Hintergrund transparent oder eine feste Farbe zu machen?

Feuersturm

@saeft_2003 ich bin da aktuell raus, da ich in meiner vis kein grafana mehr einbette. Hab es nicht wirklich genutzt und daher ist es raus geflogen.

bloop

@saeft_2003 Ich habe Grafana 10 am laufen und es funktioniert.
Musste nach dem Upgrade allerdings die index.html erneut anpassen.

weiterhin zu finden unter:
/usr/share/grafana/public/views/index.html

<link rel="stylesheet" href="http://IPvonIobroker/vis.0/mygrafana4.css" type="text/css">

saeft_2003

@bloop

Cool danke das muss ich ausprobieren!

saeft_2003

@bloop sagte in Hintergrund von Grafana Dashboard in VIS entfernen:

@saeft_2003 Ich habe Grafana 10 am laufen und es funktioniert.
Musste nach dem Upgrade allerdings die index.html erneut anpassen.

weiterhin zu finden unter:
/usr/share/grafana/public/views/index.html
<link rel="stylesheet" href="http://IPvonIobroker/vis.0/mygrafana4.css" type="text/css">

Geht bei mir nicht mit meiner css.

Postest du bitte mal die Datei mygrafana4.css

bloop

@saeft_2003
Besteht lediglich aus:

@charset "UTF-8";
 
 :root {
	color-scheme: none !important;
}
.panel-container {
    background-color: transparent !important; 

}

index.html:

<!doctype html><html lang="en"><head>[[ if and .CSPEnabled .IsDevelopmentEnv ]]<meta http-equiv="Content-Security-Policy" content="[[.CSPContent]]"/>[[ end ]]<meta charset="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/><meta name="viewport" content="width=device-width"/><meta name="theme-color" content="#000"/><title>[[.AppTitle]]</title><base href="[[.AppSubUrl]]/"/><link rel="icon" type="image/png" href="[[.FavIcon]]"/><link rel="apple-touch-icon" sizes="180x180" href="[[.AppleTouchIcon]]"/><link rel="mask-icon" href="[[.ContentDeliveryURL]]public/img/grafana_mask_icon.svg" color="#F05A28"/>[[ if eq .ThemeType "light" ]]<link rel="stylesheet" href="[[.ContentDeliveryURL]]public/build/grafana.light.469af479381f2d6cb442.css"/>[[ else if eq .ThemeType "dark" ]]<link rel="stylesheet" href="[[.ContentDeliveryURL]]public/build/grafana.dark.886efb710af4d17a895d.css"/>[[ end ]]<script nonce="[[.Nonce]]">performance.mark('frontend_boot_css_time_seconds');</script><meta name="apple-mobile-web-app-capable" content="yes"/><meta name="apple-mobile-web-app-status-bar-style" content="black"/><meta name="msapplication-TileColor" content="#2b5797"/><meta name="msapplication-config" content="public/img/browserconfig.xml"/>

<link rel="stylesheet" href="http://IPAdresse/vis.0/mygrafana4.css" type="text/css">

</head>

<body class="theme-[[ .ThemeType ]] [[.AppNameBodyClass]]"><style>

body.dashboard-solo { background: none !important; }

.preloader__enter {
        opacity: 0;
        animation-name: preloader-fade-in;
        animation-iteration-count: 1;
        animation-duration: 0.9s;
        animation-delay: 1.35s;
        animation-fill-mode: forwards;
      }

      .preloader__bounce {
        text-align: center;
        animation-name: preloader-bounce;
        animation-duration: 0.9s;
        animation-iteration-count: infinite;
      }

usw.

saeft_2003

@bloop

bei mir will es nicht funktionieren. Wenn ich die index datei von dir übernehme zerhaut es mir die ganzen charts... Wenn ich den head abschnitt von meiner grafana 8 index datei nehme startet grafna 10 nicht mehr.

So hab ich es jetzt aber der Hintergrund beibt der originale,

Index:

<!DOCTYPE html>
<html lang="[[.User.Language]]">
  <head>
    [[ if and .CSPEnabled .IsDevelopmentEnv ]]
    <!-- Cypress overwrites CSP headers in HTTP requests, so this is required for e2e tests-->
    <meta  http-equiv="Content-Security-Policy" content="[[.CSPContent]]"/>
    [[ end ]]
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width" />
    <meta name="theme-color" content="#000" />

    <title>[[.AppTitle]]</title>

    <base href="[[.AppSubUrl]]/" />

    <link rel="icon" type="image/png" href="[[.FavIcon]]" />
    <link rel="apple-touch-icon" sizes="180x180" href="[[.AppleTouchIcon]]" />
    <link rel="mask-icon" href="[[.ContentDeliveryURL]]public/img/grafana_mask_icon.svg" color="#F05A28" />

    <!-- If theme is "system", we inject the stylesheets with javascript further down the page -->
    [[ if eq .ThemeType "light" ]]
    <link rel="stylesheet" href="[[.ContentDeliveryURL]][[.Assets.CSSLight]]" />
    [[ else if eq .ThemeType "dark" ]]
    <link rel="stylesheet" href="[[.ContentDeliveryURL]][[.Assets.CSSDark]]" />
    [[ end ]]

    <script nonce="[[.Nonce]]">
      performance.mark('frontend_boot_css_time_seconds');
    </script>

    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="msapplication-TileColor" content="#2b5797" />
    <meta name="msapplication-config" content="public/img/browserconfig.xml" />
    <link rel="stylesheet" href="http://192.168.178.90:8082/vis.0/mygrafana2.css" type="text/css">
  </head>

CSS:

@charset "UTF-8";

 

 :root {

	color-scheme: none !important;

}

.panel-container {

    background-color: transparent !important; 

 

}

Hast du noch eine Idee was ich probieren kann?

bloop

@saeft_2003
Hast du mal versucht

body.dashboard-solo { background: none !important; }

unter Style einzufügen?

<body class="theme-[[ .ThemeType ]] [[.AppNameBodyClass]]"><style>
 
body.dashboard-solo { background: none !important; }
 
.preloader__enter {
        opacity: 0;

Ebenfalls würde ich die mygrafana.css komplett löschen. Vis neu starten anschließend neu hochladen und Grafana neu starten.

saeft_2003

@bloop

Danke probiere ich heute Abend mal aus.

saeft_2003

@bloop sagte in Hintergrund von Grafana Dashboard in VIS entfernen:

body.dashboard-solo { background: none !important; }

Ich habs jetzt so gemacht und grafana neu gestartet (hab ich immer gemacht) und geht auch nicht...


  <body class="theme-[[ .ThemeType ]] [[.AppNameBodyClass]]">
    <style>
body.dashboard-solo { background: none !important; }
      .preloader {
        height: 100%;
        flex-direction: column;
        display: flex;
        justify-content: center;
        align-items: center;
      }

bloop

@saeft_2003
Welche Grafana Version läuft bei dir?
Ich habe die 10.1.5 am laufen.

Anderer Ansatz:
Ich habe für jedes in der VIS eingebettete Diagramm ein eigenes Dashboard erstellt (um die Größe richtig anpassen zu können) und die Visualization via Embed als iframe eingebettet. Hier würden sich auch unterschiedliche Themes auswählen lassen.
Hast du hier eventuell nicht das Default Theme ausgewählt? bzw. was ist in den Grundeinstellungen als Default definiert? In der config unter users / default_theme zu finden. - Bei mir dark

saeft_2003

@bloop

Ich hab 10.2.3 installiert. Als theme war dark gewählt das habe ich auf default gestellt. Später probiere ich es nochmal ob sich was geändert hat.

Meine charts sind auch über iframe in der VIS

Kail

@saeft_2003
Hallo,
habt ihr eine funktionierende Lösung für die Version 10.2.3 gefunden?
Nach einem Systemupdate geht es bei mir auch nicht mehr.
Grüße Kail

saeft_2003

@kail

Nein hab leider keine Lösung gefunden. Von welcher Version hast du das Update gemacht, also mit welcher ging es bei dir noch?

Kail

@saeft_2003
Der Vorgänger hatte höchstens eine 9 vorne in der Versionsnummer. Die genaue, kann ich Dir erst am Wochenende nennen.

saeft_2003

@kail

Sag bitte Bescheid falls du eine Lösung findest…

Kail

@saeft_2003
Bescheid
Habe mal analysiert und romprobiert. Folge Einträge entfernen bei mir den Hintergrund
in der 10.2.3. In meiner Vis stelle ich im iframe nur einzelne Diagramme dar und keine kompletten Dashboards.

    :root {
       color-scheme: none;
      }

      [class*="panel-container"] {
         background: transparent !important;
      }

      body.dashboard-solo {
         background: none !important;
      }

Grüße Kail

saeft_2003

@kail

Ich bekomms nicht hin. Kannst du bitte mal deine index.html posten wo auf die grafana.css verwiesen wird.

Kail

@saeft_2003
Meine Einträge sind direkt in der index.html.
index.html

Bildschirmfoto 2024-01-18 um 14.15.43.png

Community Forum

NEWS

Hintergrund von Grafana Dashboard in VIS entfernen

Support us

371

32.6k

82.3k

1.3m