Merge pull request #133 from bernerdschaefer/graph-display-tweaks

Graph display tweaks

web/static/css/graph.css

@@ -9,7 +9,6 @@ body {
 .graph {
         position: relative;
         min-height: 400px;
-        overflow-x: hidden;
 }
 
 svg {
@@ -22,3 +21,36 @@ svg {
         vertical-align: top;
         margin: 0 0 0 0px;
 }
+
+.graph .detail .x_label.flipped {
+  right: 0;
+}
+
+.graph .detail .item.flipped {
+  right: 10px;
+}
+
+.graph .detail .item.flipped:before {
+  content: "\25b8";
+  left: auto;
+  right: 1px;
+  font-size: 0.8em;
+}
+
+.graph .detail .item.active {
+  line-height: 1.4em;
+  padding: 0.5em;
+}
+
+.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/exprBrowser.js

@@ -17,7 +17,7 @@ function submitQuery() {
 }
 
 function bindHandlers() {
-  jQuery.ajaxSetup({
+  $.ajaxSetup({
       cache: false
   });
   $("#queryForm").submit(submitQuery);

web/static/js/graph.js

@@ -288,6 +288,16 @@ Prometheus.Graph.prototype.submitQuery = function() {
   });
 };
 
+Prometheus.Graph.prototype.renderLabels = function(labels) {
+  var labelStrings = [];
+  for (label in labels) {
+    if (label != "name") {
+      labelStrings.push("<strong>" + label + "</strong>: " + labels[label]);
+    }
+  }
+  return labels = "<div class='labels'>" + labelStrings.join("<br>") + "</div>";
+}
+
 Prometheus.Graph.prototype.metricToTsName = function(labels) {
   var tsName = labels["name"] + "{";
   var labelStrings = [];
@@ -318,6 +328,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,12 +380,42 @@ 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>" + y + '</strong><br>';
+      return content + self.renderLabels(series.labels);
+    },
+    onRender: function() {
+      var width = this.graph.width;
+      var element = $(this.element);
+
+      $(".x_label", element).each(function() {
+        if ($(this).outerWidth() + element.offset().left > width) {
+          $(this).addClass("flipped");
+        } else {
+          $(this).removeClass("flipped");
+        }
+      })
+
+      $(".item", element).each(function() {
+        if ($(this).outerWidth() + element.offset().left > width) {
+          $(this).addClass("flipped");
+        } else {
+          $(this).removeClass("flipped");
+        }
+      })
+    },
   });
 
   var legend = new Rickshaw.Graph.Legend({
     element: self.legend[0],
-    graph: self.rickshawGraph
+    graph: self.rickshawGraph,
+  });
+
+  var highlighter = new Rickshaw.Graph.Behavior.Series.Highlight( {
+    graph: self.rickshawGraph,
+    legend: legend
   });
 
   var shelving = new Rickshaw.Graph.Behavior.Series.Toggle({
@@ -424,7 +465,7 @@ function addGraph(options) {
 }
 
 function init() {
-  jQuery.ajaxSetup({
+  $.ajaxSetup({
     cache: false
   });