initial commit

MMM-GrafanaChart.js

@@ -0,0 +1,45 @@
+Module.register("MMM-GrafanaChart", {
+    // Default module config.
+    defaults: {
+        height:"100%",
+        width:"100%",
+        refreshInterval: 900
+    },
+
+    // Define start sequence.
+    start: function() {
+        Log.info("Starting module: " + this.name);
+        this.scheduleUpdate(this.config.refreshInterval);
+    },
+    // Override dom generator.
+    getDom: function() {
+        var iframe = document.createElement("IFRAME");
+        iframe.style = "border:0"
+        iframe.width = this.config.width;
+        iframe.height = this.config.height;
+        iframe.src =  "http://" +  this.config.host + ":" + this.config.port + "/dashboard-solo/db/" + this.config.dashboardname+  "?orgId=" + this.config.orgId + "&panelId=" + this.config.panelId;;
+        iframe.setAttribute("timestamp", new Date().getTime());
+        return iframe;
+    },
+    scheduleUpdate: function(delay) {
+        var nextLoad = this.config.refreshInterval;
+        if (typeof delay !== "undefined" && delay >= 0) {
+            nextLoad = delay * 1000; // Convert seconds to millis
+        }
+        var self = this;
+        setTimeout(function() {
+            self.updateFrame();
+        }, nextLoad);
+    },
+    updateFrame: function() {
+        if (this.config.url === "") {
+            Log.error("Tried to refresh, iFrameReload URL not set!");
+            return;
+        }
+        this.src = "http://" +  this.config.host + ":" + this.config.port + "/dashboard-solo/db/" + this.config.dashboardname+  "?orgId=" + this.config.orgId + "&panelId=" + this.config.panelId;
+        Log.info("attempting to update dom for iFrameReload");
+        Log.info('/"this/" module is: ' + this);
+        this.updateDom(1000);
+        this.scheduleUpdate(this.config.refreshInterval);
+    }
+});

README.md

@@ -1,2 +1,80 @@
-# MMM-GrafanaChart
-This MagicMirror² module allows you to display a diagram generated by grafana
+# Magic Mirror Module: MMM-GrafanaChart
+This [MagicMirror²](https://github.com/MichMich/MagicMirror) module allows you to display a chart generated by [grafana](https://grafana.com/).
+
+<b>Important Note:</b> This module requires a running grafana installation. To install Grafana, follow the original [installation instructions](http://docs.grafana.org/installation/).
+
+[This blogpost]() describes how to install and use grafana for displaying a  weatherchart like the one below.
+
+## Installation of the module
+
+In your terminal, go to your MagicMirror's Module folder:
+````
+cd ~/MagicMirror/modules
+````
+
+Clone this repository:
+````
+git clone https://github.com/SvenSommer/MMM-GrafanaChart
+````
+
+Configure the module in your `config.js` file.
+
+## Configuration
+
+To use this module, you have to specify where your grafana installation is hosted and which chart you'd like to display.
+Everything you need is in the url when you're viewing your chart in your browser
+
+![url provides needed information](https://github.com/SvenSommer/MMM-GrafanaChart/blob/master/config_url.png?raw=true)
+
+
+Add the module to the modules array in the `config/config.js` file:
+````javascript
+modules: [
+	{
+	 module: 'MMM-GrafanaChart',
+		 classes: 'everyone',
+		 position: 'top_right',   // This can be any of the regions.
+		 config: {
+					host: "grafana_host", //Mandatory. See url when displaying within grafana
+					port: 3000, // Mandatory.
+					dashboardname: "weatherforecast", // Mandatory.
+					orgId: 1, // Mandatory.
+					panelId: 2, // Mandatory.
+					width: "100%", // Optional. Default: 100%
+					height: "100%", // Optional. Default: 100%
+					refreshInterval: 900 //Optional. Default: 900 = 1/4 hour
+				}
+	},
+]
+````
+
+## Optional configuration options
+
+The following properties can be configured:
+
+
+<table width="100%">
+	<!-- why, markdown... -->
+	<thead>
+		<tr>
+			<th>Option</th>
+			<th width="100%">Description</th>
+		</tr>
+	<thead>
+	<tbody>
+		<tr>
+			<td><code>width</code></td>
+			<td>Width of the displayed chart. <code>'150 px'</code> or <code>'50 %'</code> are valid options.	<br><b>Default value:<code>"100%"</code></b></td>
+		</tr>
+		<tr>
+			<td><code>height</code></td>
+			<td>Height of the displayed chart. <code>'150 px'</code> or <code>'50 %'</code> are valid options.	<br><b>Default value:<code>"100%"</code></b></td>
+		</tr>
+			<tr>
+			<td><code>refreshInterval</code></td>
+			<td>Update interval of the diagram in seconds.
+				<br><b>Default value:</b> <code>900</code>  = 15 \* 60 (four times every hour)
+			</td>
+		</tr>
+	</tbody>
+</table>