Permalink
Browse files

Detail View Update

When clicking on the home page graphs, you are now
taken through to the detail view for that graph.

The graph contains some of the other stored data.
  • Loading branch information...
1 parent 4b6d562 commit 6e7eedf3cb0514d88a2e5c78141a83cf78b31ea3 @d0ugal d0ugal committed Jan 3, 2012
Showing with 131 additions and 65 deletions.
  1. +28 −7 gauge/models.py
  2. +15 −4 gauge/static/dashboard.js
  3. +0 −19 gauge/static/dddash.js
  4. +68 −33 gauge/static/metric.js
  5. +14 −1 gauge/templates/gauge/detail.html
  6. +6 −1 gauge/views.py
View
@@ -33,7 +33,7 @@ class Meta:
def __unicode__(self):
return self.name
- def gather_data(self, since, suite, significant_only):
+ def gather_data(self, since, suite, significant_only, detail=False):
"""
Gather data from an "instant" metric.
@@ -46,13 +46,34 @@ def gather_data(self, since, suite, significant_only):
if significant_only:
data = data.filter(significant=True)
- data = data.values_list('run_date', 'avg_base', 'avg_changed')
-
data_sets = []
- data_sets.append({'data': [(timegm(t.timetuple()), std)
- for (t, std, __) in data]})
- data_sets.append({'data': [(timegm(t.timetuple()), std)
- for (t, __, std) in data]})
+
+ if not detail:
+
+ fields = ['run_date', 'avg_base', 'avg_changed']
+
+ else:
+
+ fields = ['run_date', 'avg_base', 'avg_changed',
+ 'min_base', 'min_changed', 'std_base', 'std_changed']
+
+ data = data.values_list(*fields)
+
+ for i, field in enumerate(fields):
+
+ if field == 'run_date':
+ continue
+
+ data_values = []
+
+ for values in data:
+ data_values.append((timegm(values[0].timetuple()), values[i]))
+
+ data_sets.append({
+ 'label': field,
+ 'data': data_values,
+ })
+
return data_sets
@@ -21,23 +21,34 @@ $(function () {
var timestamp_element = e.parent().find('span.timestamp');
var original_value = value_element.html();
- var url = "/metric/" + e.data('suite') + "/" + e.data('metric') + '.json';
+ var url = "/metric/" + e.data('suite') + "/" + e.data('metric');
+ var json_url = url + '.json';
var significant = e.data('significant');
if (significant == '1'){
+ json_url += "?significant";
url += "?significant";
}
- $.getJSON(url, function(response) {
+ $.getJSON(json_url, function(response) {
+
+ for(var i=0;i<response.data.length;i++){
+ for(var y=0; y<response.data[i].data.length;y++){
+ response.data[i].data[y][0] *= 1000;
+ }
+ }
var options = {
xaxis: {show: false, mode: "time"},
yaxis: {show: true},
grid: {borderWidth: 0, hoverable: true},
colors: ["white", "yellow"],
lines: { show: true },
- points: { show: true }
+ points: { show: true },
+ legend: {
+ show: false
+ }
};
$.plot(e, response.data, options);
@@ -53,7 +64,7 @@ $(function () {
$("#tooltip").remove();
- var d = new Date(item.datapoint[0] * 1000);
+ var d = new Date(item.datapoint[0]);
var date_string = $.plot.formatDate(d, "%0d %b %y");
var value = Math.round(item.datapoint[1] * 100000000) / 100000000;
var label = "<strong>" + value + "</strong><br/>" + date_string;
@@ -1,19 +0,0 @@
-dddash = {
- format_timestamp: function(timestamp, period) {
- var d = new Date(timestamp);
- if (period == 'instant') {
- return $.plot.formatDate(d, "%b %d, %h:%M%p");
-
- } else if (period == 'daily') {
- return $.plot.formatDate(d, "%b %d");
-
- } else if (period == 'weekly') {
- // A bit more complicated than the above: the timestamp is in the
- // middle of the week, so we have to bracket the date. This is
- // something of a fudge here, but it works well enough.
- var start = new Date(d.getTime() - (3 * 24 * 60 * 60 * 1000));
- var end = new Date(d.getTime() + (3 * 24 * 60 * 60 * 1000));
- return $.plot.formatDate(start, "%b %d") + ' - ' + $.plot.formatDate(end, "%b %d");
- }
- }
-}
View
@@ -1,7 +1,27 @@
$(function () {
+ function showTooltip(x, y, contents) {
+ $('<div id="tooltip">' + contents + '</div>').css( {
+ position: 'absolute',
+ display: 'none',
+ top: y + 5,
+ left: x -45,
+ border: '1px solid #fdd',
+ padding: '2px',
+ opacity: 0.80,
+ color: '#000',
+ 'background-color': '#fff'
+ }).appendTo("body").fadeIn(200);
+ }
+
var e = $("#graph");
- var url = "/metric/" + e.data('suite') + "/" + e.data('metric') + ".json?days=365";
+ var url = "/metric/" + e.data('suite') + "/" + e.data('metric') + ".json?days=365&detail";
+
+ var significant = e.data('significant');
+
+ if (significant == '1'){
+ url += "&significant";
+ }
var hover = {
show: function(x, y, message) {
@@ -16,50 +36,65 @@ $(function () {
};
$.getJSON(url, function(response) {
- for (var i=0; i < response.data.length; i++) {
- response.data[i][0] = response.data[i][0] * 1000;
+
+ for(var i=0;i<response.data.length;i++){
+ for(var y=0; y<response.data[i].data.length;y++){
+ response.data[i].data[y][0] *= 1000;
+ }
}
+
var options = {
xaxis: {
mode: "time",
tickColor: "rgba(0,0,0,0)",
- minTickSize: [1, "day"]
+ show: true
},
- yaxis: {min: 0, ticks: 4},
+ yaxis: {min: 0, ticks: 10},
grid: {borderWidth: 0, hoverable: true, color: "white"},
- colors: ["yellow"]
- };
- var plot = $.plot(e, [response.data], options);
+ lines: { show: true },
+ points: { show: true },
+ legend: {
+ show: true,
+ backgroundColor: 'rgba(0,0,0,1)',
+ labelFormatter: function(string, series){
+ if (string.indexOf("_base") != -1){
+ string = string.replace("_base", "");
+ return string.toUpperCase() + " " + $('.control.branch').html();
- var format_message = function(timestamp, measurement) {
- var unit = measurement == 1 ? response.unit : response.unit_plural;
- return dddash.format_timestamp(timestamp, response.period) + '<br>' + measurement + ' ' + unit;
+ } else if (string.indexOf("_changed") != -1){
+ string = string.replace("_changed", "");
+ return string.toUpperCase() + " " + $('.experiment.branch').html();
+
+ }
+ return string;
+ },
+ margin: [-100, 0]
+ }
};
+ var plot = $.plot(e, response.data, options);
var previousPoint = null;
- e.bind("plothover", function(event, pos, item) {
- if (item) {
- if (previousPoint != item.dataIndex) {
- previousPoint = item.dataIndex;
- hover.hide();
- var message = format_message.apply(null, item.datapoint);
- var x, y;
- if (response.period == 'instant') {
- x = item.pageX + 10;
- y = item.pageY + 10;
- } else {
- // I'd like this hover to be centered over the bar. This
- // simple math sorta works, but it assumes a *lot* about
- // the plot and basically won't scale. Grr.
- x = item.pageX - 40;
- y = item.pageY - 50;
+ e.bind('plothover', function(event, pos, item) {
+
+ if (item) {
+ if (previousPoint != item.dataIndex) {
+ previousPoint = item.dataIndex;
+
+ $("#tooltip").remove();
+
+ var d = new Date(item.datapoint[0]);
+ var date_string = $.plot.formatDate(d, "%0d %b %y");
+ var value = Math.round(item.datapoint[1] * 100000000) / 100000000;
+ var label = "<strong>" + value + "</strong><br/>" + date_string;
+
+ showTooltip(item.pageX, item.pageY, label);
+
}
- hover.show(x, y, message);
}
- } else {
- hover.hide();
- previousPoint = null;
- }
- });
+ else {
+ $("#tooltip").remove();
+ previousPoint = null;
+ }
+ });
});
});
@@ -7,5 +7,18 @@
{% endblock %}
{% block content %}
- <div id="graph" data-metric="{{ benchmark.name }}" data-suite="{{ suite.id }}"></div>
+
+ <h2 id="suite{{ suite.id }}">{{ suite.description }} </h2>
+ <h2 class="key">
+ <span class="control branch">{{ suite.control }}</span>
+ <strong>vs</strong>
+ <span class="experiment branch">{{ suite.experiment }}</span>
+ </h2>
+ <h4>
+ Source: {{ suite.repository.url }}<br/>
+ {{ suite.benchmark_runs }} Runs Each On Python {{ suite.python_version.name }}<br/>
+ </h4>
+
+ <div id="graph" data-metric="{{ benchmark.name }}" data-suite="{{ suite.id }}" data-significant="{% if significant %}1{% else %}0{% endif %}"></div>
+
{% endblock %}
View
@@ -26,19 +26,24 @@ def index(request):
@cache_page(60 * 60)
def metric_detail(request, suite_id, metric_slug):
+
+ significant = 'significant' in request.GET
+
suite = get_object_or_404(BenchmarkSuite, id=suite_id)
benchmark = get_object_or_404(Benchmark, name=metric_slug)
return render(request, 'gauge/detail.html', {
'suite': suite,
'benchmark': benchmark,
+ 'significant': significant,
})
@cache_page(60 * 60)
def metric_json(request, suite_id, metric_slug):
significant = 'significant' in request.GET
+ detail = 'detail' in request.GET
suite = get_object_or_404(BenchmarkSuite, id=suite_id)
@@ -55,7 +60,7 @@ def metric_json(request, suite_id, metric_slug):
d = datetime.datetime.now() - datetime.timedelta(days=daysback)
doc = model_to_dict(benchmark)
- doc['data'] = benchmark.gather_data(since=d, suite=suite, significant_only=significant)
+ doc['data'] = benchmark.gather_data(since=d, suite=suite, significant_only=significant, detail=detail)
return http.HttpResponse(
simplejson.dumps(doc, indent=4 if settings.DEBUG else None),

0 comments on commit 6e7eedf

Please sign in to comment.