Flip hover detail to prevent going off the screen

web/static/css/graph.css

@@ -22,6 +22,17 @@ svg {
         margin: 0 0 0 0px;
 }
 
+.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;

web/static/js/graph.js

@@ -377,7 +377,19 @@ Prometheus.Graph.prototype.updateGraph = function(reloadGraph) {
       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 = jQuery(this.element);
+
+      jQuery(".item", element).each(function() {
+        if ($(this).outerWidth() + element.offset().left > width) {
+          $(this).addClass("flipped")
+        } else {
+          $(this).removeClass("flipped")
+        }
+      })
+    },
   });
 
   var legend = new Rickshaw.Graph.Legend({