From ac9c02d4b079dc443de10a9562118c624098b30f Mon Sep 17 00:00:00 2001
From: GilbN <gilberg@gmail.com>
Date: Thu, 18 Jun 2020 19:06:18 +0200
Subject: [PATCH] Created Grafana (markdown)

---
 Grafana.md | 160 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 160 insertions(+)
 create mode 100644 Grafana.md

diff --git a/Grafana.md b/Grafana.md
new file mode 100644
index 0000000..98c5ed2
--- /dev/null
+++ b/Grafana.md
@@ -0,0 +1,160 @@
+# Grafana Themes
+
+Custom [Grafana](https://github.com/grafana/grafana) CSS for [Organizr](https://github.com/causefx/Organizr) homepage integration and consistent UI.
+
+![](https://raw.githubusercontent.com/gilbN/theme.park/master/Screenshots/grafana/grafana.gif)
+
+```
+https://gilbn.github.io/theme.park/CSS/themes/grafana/XXX.css
+aquamarine.css
+hotline.css
+dark.css
+plex.css
+space-gray.css
+organizr-dashboard.css
+```
+
+#### For panel integration on the Organizr homepage you can use `organizr-dashboard.css` if you use the Plex theme in Organizr. The theme is an "internal" theme that is meant to be used in an Organizr iframe as the background is set to transparent.
+NOTE: When viewing Grafana in Organizr iframe using `organizr-dashboard.css` it will follow the Organizr theme. When viewing it outside of Organizr iframe the background will be white ect. If you don't want this you can create two reverse proxies. One for grafana organizr homepage integration and one for the regular grafana theme.
+
+### Check out https://technicalramblings.com/blog/spice-up-your-homepage-part-ii/
+
+![](https://technicalramblings.com/wp-content/uploads/2019/01/orgdash.jpg)
+
+### **TIP:**
+Click the `kiosk` button and use that link if you don't want to show the top bar and side bar inside Organizr! There are two modes, one where the side menu and variables ect disappear and one where just the panels are visible.
+
+![](https://i.imgur.com/pVSKUzi.png)
+
+Check out my Varken dashboard here: https://grafana.com/dashboards/9558
+
+### Screenshots
+<details><summary>Expand</summary>
+<p>
+<img src="https://raw.githubusercontent.com/gilbN/theme.park/master/Screenshots/grafana/aquamarine.png"></img>
+<img src="https://raw.githubusercontent.com/gilbN/theme.park/master/Screenshots/grafana/hotline.png"></img>
+<img src="https://raw.githubusercontent.com/gilbN/theme.park/master/Screenshots/grafana/space-gray.png"></img>
+<img src="https://raw.githubusercontent.com/gilbN/theme.park/master/Screenshots/grafana/plex.jpg"></img>
+<img src="https://raw.githubusercontent.com/gilbN/theme.park/master/Screenshots/grafana/dark.png"></img>
+<img src="https://raw.githubusercontent.com/gilbN/theme.park/master/Screenshots/graforg/2.jpg"></img>
+</p>
+</details>
+
+### Custom HTML for Organizr Homepage
+
+
+![](https://raw.githubusercontent.com/gilbN/theme.park/master/Screenshots/graforg/3.jpg)
+
+<details><summary>Expand</summary>
+
+Thank you [Fma965](https://gist.github.com/Fma965) for the base [code](https://gist.github.com/Fma965/d30ac1fa5695304a7d6dcdc748220027)
+
+Change the ***Panel name*** to what you want and the ***src*** to the panel URL.
+
+```css
+<h5><span>Panel name</span></h5>
+  <div class="overflowhider"><embed id="grafanadwidget1" src='https://graforg.domain.com/panel-embed-link'/>**
+```
+The URL can be found by clicking **share** on the panel you want to add.
+
+<img src="https://i.imgur.com/Tl69yi3.png"></img>
+
+If you dont want the ***Panel name*** text, just remove the `<h5><span>` line entirely.
+
+```css
+<style>
+.flex {
+  	display: flex;
+  	flex-wrap: wrap;
+ 	align-items: center;
+  	justify-content: center;
+	background: transparent;
+	margin-top:10px;
+	box-shadow: none !important;
+}
+.flex-child {
+	flex: 1 1 1 1;
+	padding: 1px 1px 1px 1px;
+}
+#flex-grafanadwidget1 {
+	min-width: 25%;
+}
+#flex-grafanadwidget2 {
+	min-width: 25%;
+}
+#flex-grafanadwidget3 {
+	min-width: 25%;
+}
+#flex-grafanadwidget4 {
+	min-width: 25%;
+}
+@media only screen and (max-width: 1374px) {
+    #flex-grafanadwidget1, #flex-grafanadwidget2, #flex-grafanadwidget3, #flex-grafanadwidget4 {
+        min-width: 50%;
+    }
+}
+@media only screen and (max-width: 640px) {
+    #flex-grafanadwidget1, #flex-grafanadwidget2, #flex-grafanadwidget3, #flex-grafanadwidget4 {
+        min-width: 100%;
+    }
+@media only screen and (max-width: 400px) {
+    .flex-child>h5 {
+	margin-left: 15px;
+    }
+#announcementRow {
+	background-color:transparent !important;
+}
+.flex-child>h5 {
+	text-transform: uppercase;
+	font-weight: 600 !important;
+	font-size: 15px;important;
+	color: #eee;
+}
+.overflowhider {
+	height: 100%;
+	overflow: hidden;
+}
+#grafanadwidget1 {
+	position: relative;
+	height: calc(250px);
+	width: calc(100%);
+}
+#grafanadwidget2 {
+    position: relative;
+	height:calc(250px);
+	width:calc(100%);
+}
+#grafanadwidget3 {
+	position: relative;
+	height: calc(250px);
+	width: calc(100%);
+}
+#grafanadwidget4 {
+    position: relative;
+	height:calc(250px);
+	width:calc(100%);
+}
+</style>
+
+<div id="announcementRow" class="row">
+	<div class="content-box flex">
+<div class="flex-child" id="flex-grafanadwidget1">
+  <h5><span>Panel name</span></h5>
+  <div class="overflowhider"><embed id="grafanadwidget1" src='https://graforg.domain.com/panel-embed-link'/></div>
+  </div>
+<div class="flex-child box-shadow" id="flex-grafanadwidget2">
+  <h5><span>Panel name</span></h5>
+  <div class="overflowhider"><embed id="grafanadwidget2" src='https://graforg.domain.com/panel-embed-link' /></div>
+  </div>
+<div class="flex-child" id="flex-grafanadwidget3">
+  <h5><span>Panel name</span></h5>
+  <div class="overflowhider"><embed id="grafanadwidget3" src='https://graforg.domain.com/panel-embed-link'/></div>
+  </div>
+<div class="flex-child box-shadow" id="flex-grafanadwidget4">
+  <h5><span>Panel name</span></h5>
+  <div class="overflowhider"><embed id="grafanadwidget4" src='https://graforg.domain.com/panel-embed-link' /></div>
+  </div>
+	</div>
+</div>
+```
+</details>
\ No newline at end of file