Render graph labels vertically

This helps to make the timeseries with many labels fit on the screen.

web/static/css/graph.css

@@ -9,7 +9,6 @@ body {
 .graph {
         position: relative;
         min-height: 400px;
-        overflow-x: hidden;
 }
 
 svg {
@@ -22,3 +21,21 @@ svg {
         vertical-align: top;
         margin: 0 0 0 0px;
 }
+
+.graph .detail .item.active {
+  line-height: 1.4em;
+  padding: 0.5em;
+}
+
+.graph .detail .item.active .labels {
+  font-size: 11px;
+  line-height: 11px;
+}
+
+.graph .detail .item .detail_swatch {
+  float: right;
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  margin: 2px 2px 0 8px;
+ }

web/static/js/graph.js

@@ -318,6 +318,7 @@ Prometheus.Graph.prototype.transformData = function(json) {
   var data = json.Value.map(function(ts) {
     return {
       name: self.metricToTsName(ts.Metric),
+      labels: ts.Metric,
       data: ts.Values.map(function(value) {
         return {
           x: value.Timestamp,
@@ -369,7 +370,19 @@ Prometheus.Graph.prototype.updateGraph = function(reloadGraph) {
   }
 
   var hoverDetail = new Rickshaw.Graph.HoverDetail({
-    graph: self.rickshawGraph
+    graph: self.rickshawGraph,
+    formatter: function(series, x, y) {
+      var swatch = '<span class="detail_swatch" style="background-color: ' + series.color + '"></span>';
+      var content = swatch + series.labels["name"] + ": <strong>" + parseInt(y) + '</strong><br>';
+      var labelStrings = []
+      for (label in series.labels) {
+        if (label != "name") {
+          labelStrings.push("<strong>"+label + "</strong>: " + series.labels[label]);
+        }
+      }
+      var labels = "<div class='labels'>"+ labelStrings.join("<br>") + "</div>";
+      return content + labels;
+    }
   });
 
   var legend = new Rickshaw.Graph.Legend({