Update labels on hover for realtime dashboard graph

web/assets/javascripts/dashboard.js

@@ -43,10 +43,43 @@ var realtimeGraph = function(updatePath) {
 
   graph.render();
 
-  var hoverDetail = new Rickshaw.Graph.HoverDetail({
-    graph: graph,
-    yFormatter: function(y) { return Math.floor(y) }
+  var legend = document.querySelector('#realtime-legend');
+  var Hover = Rickshaw.Class.create(Rickshaw.Graph.HoverDetail, {
+    render: function(args) {
+      legend.innerHTML = args.formattedXValue;
+
+      args.detail.sort(function(a, b) { return a.order - b.order }).forEach( function(d) {
+        var line = document.createElement('div');
+        line.className = 'line';
+
+        var swatch = document.createElement('div');
+        swatch.className = 'swatch';
+        swatch.style.backgroundColor = d.series.color;
+
+        var label = document.createElement('div');
+        label.className = 'tag';
+        label.innerHTML = d.name + ": " + Math.floor(d.formattedYValue);
+
+        line.appendChild(swatch);
+        line.appendChild(label);
+
+        legend.appendChild(line);
+
+        var dot = document.createElement('div');
+        dot.className = 'dot';
+        dot.style.top = graph.y(d.value.y0 + d.value.y) + 'px';
+        dot.style.borderColor = d.series.color;
+
+        this.element.appendChild(dot);
+
+        dot.className = 'dot active';
+
+        this.show();
+
+      }, this );
+    }
   });
+  var hover = new Hover( { graph: graph } );
 
   var i = 0;
   poller = setInterval(function() {
@@ -201,7 +234,7 @@ var resetGraphs = function() {
 };
 
 // Resize graphs after resizing window
-var debounce = function(fn, timeout) 
+var debounce = function(fn, timeout)
 {
   var timeoutID = -1;
   return function() {

web/assets/stylesheets/application.css

@@ -394,6 +394,27 @@ div.interval-slider input {
   width: 160px;
 }
 
+#realtime-legend {
+  width: 440px;
+  text-align: left;
+  margin-top: 5px;
+  float: right;
+}
+#realtime-legend .tag {
+  display: inline-block;
+}
+#realtime-legend .line {
+  display: inline-block;
+  margin: 0 0 0 20px;
+}
+
+@media (max-width: 790px) {
+  #realtime-legend {
+    float: none;
+    width: 100%;
+    margin-bottom: 20px;
+  }
+}
 /* Beacon
 ********************************** */
 

web/views/dashboard.erb

@@ -15,8 +15,8 @@
   </div>
 </div>
 
-<h5></h5>
 <div id="realtime"></div>
+<div id="realtime-legend"></div>
 
 <h5>
   <span class="history-heading"><%= t('History') %></span>