~sylvain-pineau/launchpad-results/trend-reports-jqplot

« back to all changes in this revision

Viewing changes to templates/teststats.html

  • Committer: Sylvain Pineau
  • Date: 2011-11-16 11:34:28 UTC
  • Revision ID: sylvain.pineau@canonical.com-20111116113428-6odycuhwfuflq350
Add a new view to display trend reports based on system benchmarks.
JS rendering powered by jqPlot (http://www.jqplot.com)

Show diffs side-by-side

added added

removed removed

Lines of Context:
 
1
{% extends "base-layout.html" %}
 
2
 
 
3
{% comment %}
 
4
Copyright 2010-2011 Canonical Ltd.  This software is licensed under the
 
5
GNU Affero General Public License version 3 (see the file  LICENSE).
 
6
{% endcomment %}
 
7
 
 
8
{% load i18n %}
 
9
 
 
10
{% block page_title %}{% trans "Test stats in Launchpad" %}{% endblock %}
 
11
 
 
12
{% block page_label %}{% trans "Benchmark Trend Reports" %}{% endblock %}
 
13
 
 
14
{% block watermark %}{% trans "Test stats" %}{% endblock %}
 
15
 
 
16
{% block content %}
 
17
 
 
18
<link rel="stylesheet" type="text/css" href="/+static/css/jquery.jqplot.min.css" />
 
19
 
 
20
<script type="text/javascript" src="/+static/js/stats/jquery.min.js"></script>
 
21
<script type="text/javascript" src="/+static/js/stats/jquery.jqplot.min.js"></script>
 
22
<script type="text/javascript" src="/+static/js/stats/jqplot.dateAxisRenderer.min.js"></script>
 
23
<script type="text/javascript" src="/+static/js/stats/jqplot.highlighter.min.js"></script>
 
24
<script type="text/javascript" src="/+static/js/stats/jqplot.canvasTextRenderer.min.js"></script>
 
25
<script type="text/javascript" src="/+static/js/stats/jqplot.canvasAxisTickRenderer.min.js"></script>
 
26
<script type="text/javascript" src="/+static/js/stats/jqplot.canvasTextRenderer.min.js"></script>
 
27
<script type="text/javascript" src="/+static/js/stats/jqplot.canvasAxisLabelRenderer.min.js"></script>
 
28
 
 
29
<style type="text/css">
 
30
div.jqplot-target {
 
31
    margin: 20px;
 
32
}
 
33
.jqplot-highlighter-tooltip {
 
34
    font-size: 1em;
 
35
}
 
36
</style>
 
37
 
 
38
<div class="top-portlet">
 
39
    {% if series %}
 
40
          <p>These are the latest trend reports for {{ pillar.name}} {{ series.name }} series.</p>
 
41
    {% else %}
 
42
          <p>These are the latest trend reports for {{ pillar.name }}.</p>
 
43
    {% endif %}
 
44
 
 
45
{% for key in stats_report %}
 
46
    <a href="#{{ key }}">{{ key }}</a><br>
 
47
{% endfor %}
 
48
 
 
49
<script type="text/javascript">
 
50
    $(document).ready(function(){
 
51
    {% for key, ts_data in stats_report.items %}     
 
52
 
 
53
        plot{{ forloop.counter }} = $.jqplot('chart{{ forloop.counter }}', [[{% for run in ts_data %} ['{{ run.ts }}', {{ run.data }}], {% endfor %}]], {
 
54
            title:'{{ key }}',
 
55
            highlighter:{
 
56
                show: true, 
 
57
                tooltipAxes: 'xy', 
 
58
                sizeAdjust: 7.5, 
 
59
                formatString: '%s<br>%s {% for run in ts_data %}{% if forloop.last %}{{ run.scale }}{% endif %}{% endfor %}'
 
60
                },
 
61
            axes:{
 
62
                xaxis:{
 
63
                    renderer:$.jqplot.DateAxisRenderer,
 
64
                    tickOptions: {fontSize: '8pt'}
 
65
                },
 
66
                yaxis:{
 
67
                    label: '{% for run in ts_data %}{% if forloop.last %}{{ run.scale }}{% endif %}{% endfor %}',
 
68
                    min: 0,
 
69
                    labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
 
70
                    tickOptions:{formatString:'%.2f', fontSize: '10pt'}
 
71
                }
 
72
            }
 
73
        });
 
74
    {% endfor %}
 
75
});
 
76
</script>
 
77
 
 
78
{% for key in stats_report %} 
 
79
    <div id="chart{{ forloop.counter }}" style="height:300px; width:650px;"><a name="{{ key }}"></a></div>
 
80
{% endfor %}  
 
81
        
 
82
{% endblock %}