Add tooltips to metrics showing the exact value of the data point

This commit is contained in:
Eelco Dolstra 2016-03-25 14:32:36 +01:00
parent 3e2911803d
commit 32adc53070
3 changed files with 28 additions and 0 deletions

View file

@ -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.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.time.min.js") %]" type="text/javascript"></script>
<script src="[% c.uri_for("/static/js/flot/jquery.flot.selection.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; [% END;

View file

@ -129,3 +129,13 @@ pre.taillog {
max-height: 60em; max-height: 60em;
overflow: hidden; overflow: hidden;
} }
div.flot-tooltip {
display: none;
position: absolute;
border: 1px solid #fdd;
padding: 2px;
background-color: #fee;
opacity: 0.80;
z-index: 100;
}

View file

@ -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. // Zoom in to the last two months by default.
plot.setSelection({ xaxis: { from: Math.max(minTime, maxTime - 60 * 24 * 60 * 60 * 1000), to: maxTime } }); plot.setSelection({ xaxis: { from: Math.max(minTime, maxTime - 60 * 24 * 60 * 60 * 1000), to: maxTime } });
} }