From 32adc53070d1fa5d1bb0098165abd80cd3d3ad14 Mon Sep 17 00:00:00 2001
From: Eelco Dolstra <eelco.dolstra@logicblox.com>
Date: Fri, 25 Mar 2016 14:32:36 +0100
Subject: [PATCH] Add tooltips to metrics showing the exact value of the data
 point

---
 src/root/common.tt            |  1 +
 src/root/static/css/hydra.css | 10 ++++++++++
 src/root/static/js/common.js  | 17 +++++++++++++++++
 3 files changed, 28 insertions(+)

diff --git a/src/root/common.tt b/src/root/common.tt
index 98227c6b..6a29a718 100644
--- a/src/root/common.tt
+++ b/src/root/common.tt
@@ -561,6 +561,7 @@ BLOCK includeFlot %]
   <script src="[% c.uri_for("/static/js/flot/jquery.flot.min.js") %]" type="text/javascript"></script>
   <script src="[% c.uri_for("/static/js/flot/jquery.flot.time.min.js") %]" type="text/javascript"></script>
   <script src="[% c.uri_for("/static/js/flot/jquery.flot.selection.min.js") %]" type="text/javascript"></script>
+  <div id="flot-tooltip" class="flot-tooltip"></div>
 [% END;
 
 
diff --git a/src/root/static/css/hydra.css b/src/root/static/css/hydra.css
index 51fdfaf5..8bcc99c0 100644
--- a/src/root/static/css/hydra.css
+++ b/src/root/static/css/hydra.css
@@ -129,3 +129,13 @@ pre.taillog {
     max-height: 60em;
     overflow: hidden;
 }
+
+div.flot-tooltip {
+    display: none;
+    position: absolute;
+    border: 1px solid #fdd;
+    padding: 2px;
+    background-color: #fee;
+    opacity: 0.80;
+    z-index: 100;
+}
diff --git a/src/root/static/js/common.js b/src/root/static/js/common.js
index 56315e88..e204ecb4 100644
--- a/src/root/static/js/common.js
+++ b/src/root/static/js/common.js
@@ -229,6 +229,23 @@ function showChart(id, dataUrl, yaxis) {
           }
         });
 
+        $("#" + id + "-chart").bind("plothover", function (event, pos, item) {
+            if (item) {
+                var i = data[item.dataIndex];
+                var date = new Date(i.timestamp * 1000);
+                var s =
+                    "Build <em>" + i.id + "</em><br/>"
+                    + "on " + date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate() + ""
+                    + ":<br/><strong>" + i.value
+                    + (i.unit != null ? " " + i.unit : "") + "</strong>";
+                $("#flot-tooltip")
+                    .html(s)
+                    .css({top: item.pageY + 10, left: item.pageX + 10})
+                    .show();
+            } else
+                $("#flot-tooltip").hide();
+        });
+
         // Zoom in to the last two months by default.
         plot.setSelection({ xaxis: { from: Math.max(minTime, maxTime - 60 * 24 * 60 * 60 * 1000), to: maxTime } });
       }