Update history graph with new hover legend

web/assets/javascripts/dashboard.js

@@ -139,10 +139,43 @@ var historyGraph = function() {
 
   graph.render();
 
-  var hoverDetail = new Rickshaw.Graph.HoverDetail({
+  var legend = document.querySelector('#history-legend');
-    graph: graph,
+  var Hover = Rickshaw.Class.create(Rickshaw.Graph.HoverDetail, {
-    yFormatter: function(y) { return Math.floor(y).numberWithDelimiter() },
+    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 createSeries = function(obj) {

web/assets/stylesheets/application.css

@@ -394,33 +394,45 @@ div.interval-slider input {
   width: 160px;
 }
 
-#realtime-legend {
+#realtime-legend,
+#history-legend {
   width: 490px;
   text-align: left;
   margin-top: 5px;
   float: right;
 }
-#realtime-legend .line {
+#realtime-legend .line,
+#history-legend .line {
   display: inline-block;
   margin: 0 0 0 20px;
 }
-#realtime-legend .swatch {
+#realtime-legend .swatch,
+#history-legend .swatch {
   display: inline-block;
   width: 10px;
   height: 10px;
   margin: 0 8px 0 0;
 }
-#realtime-legend .tag {
+#realtime-legend .tag,
+#history-legend .tag {
   display: inline-block;
 }
 
 @media (max-width: 790px) {
-  #realtime-legend {
+  #realtime-legend,
+  #history-legend {
     float: none;
     width: 100%;
     margin-bottom: 20px;
   }
 }
+
+@media (max-width: 500px) {
+  #realtime-legend,
+  #history-legend {
+    text-align: center;
+  }
+}
 /* Beacon
 ********************************** */
 

web/views/dashboard.erb

@@ -26,6 +26,7 @@
   <a href="<%= root_path %>?days=180" class="history-graph <%= "active" if params[:days] == "180" %>"><%= t('SixMonths') %></a>
 </h5>
 <div id="history" data-processed="<%= h Sidekiq.dump_json(@processed_history) %>" data-failed="<%= h Sidekiq.dump_json(@failed_history) %>" data-update-url="<%= root_path %>dashboard/stats"></div>
+<div id="history-legend"></div>
 
 <br/>
 <h5>Redis</h5>