diff --git a/MMM-GrafanaChart.js b/MMM-GrafanaChart.js new file mode 100755 index 0000000..047ce44 --- /dev/null +++ b/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); + } +}); diff --git a/README.md b/README.md old mode 100644 new mode 100755 index 4b4638c..39cb098 --- a/README.md +++ b/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/). + +Important Note: 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: + + +
Option | +Description | +
---|---|
width |
+ Width of the displayed chart. '150 px' or '50 %' are valid options. Default value: "100%" |
+
height |
+ Height of the displayed chart. '150 px' or '50 %' are valid options. Default value: "100%" |
+
refreshInterval |
+ Update interval of the diagram in seconds.
+ Default value: 900 = 15 \* 60 (four times every hour)
+ |
+