[pypy-svn] r71491 - in codespeed: pyspeed/codespeed pyspeed/media/css pyspeed/media/images pyspeed/media/js pyspeed/templates tools

tobami at codespeak.net tobami at codespeak.net
Thu Feb 25 13:23:15 CET 2010


Author: tobami
Date: Thu Feb 25 13:23:13 2010
New Revision: 71491

Added:
   codespeed/pyspeed/media/images/gridline_units.png   (contents, props changed)
   codespeed/pyspeed/templates/comparison.html
Modified:
   codespeed/pyspeed/codespeed/urls.py
   codespeed/pyspeed/codespeed/views.py
   codespeed/pyspeed/media/css/main.css
   codespeed/pyspeed/media/images/gridline.png
   codespeed/pyspeed/media/js/codespeed.js
   codespeed/pyspeed/templates/base.html
   codespeed/pyspeed/templates/overview.html
   codespeed/pyspeed/templates/overview_table.html
   codespeed/pyspeed/templates/timeline.html
   codespeed/tools/import_from_json.py
Log:
Change to a variable width layout. Logarithmic scale for overview bar chart

Modified: codespeed/pyspeed/codespeed/urls.py
==============================================================================
--- codespeed/pyspeed/codespeed/urls.py	(original)
+++ codespeed/pyspeed/codespeed/urls.py	Thu Feb 25 13:23:13 2010
@@ -33,8 +33,12 @@
     (r'^overview/table/$', 'overviewtable'),
     (r'^timeline/$', 'timeline'),
     (r'^timeline/json/$', 'getdata'),
-    (r'^results/$', 'results'),
-    (r'^results/table/$', 'resultstable'),
+    #(r'^comparison/$', 'comparison'),
+    #(r'^results/$', 'results'),
+    #(r'^results/table/$', 'resultstable'),
+)
+
+urlpatterns += patterns('pyspeed.codespeed.views',
     # URL interface for adding results
     (r'^result/add/$', 'addresult'),
 )

Modified: codespeed/pyspeed/codespeed/views.py
==============================================================================
--- codespeed/pyspeed/codespeed/views.py	(original)
+++ codespeed/pyspeed/codespeed/views.py	Thu Feb 25 13:23:13 2010
@@ -12,6 +12,9 @@
 def results(request):
     return render_to_response('results.html')
 
+def compare(request):
+    return render_to_response('comparison.html')
+    
 def getdata(request):
     if request.method != 'GET':
         return HttpResponseNotAllowed('GET')
@@ -22,7 +25,12 @@
     ).order_by('-number')[:data["revisions"]]
     
     result_list = {}
-    for interpreter in data["interpreters"].split(","):
+    result_list["error"] = "None"
+    interpreters = data["interpreters"].split(",")
+    if interpreters[0] == "":
+        result_list["error"] = "No interpreters selected"
+        return HttpResponse(json.dumps( result_list ))
+    for interpreter in interpreters:
         results = []
         for rev in lastrevisions:
             res = Result.objects.filter(

Modified: codespeed/pyspeed/media/css/main.css
==============================================================================
--- codespeed/pyspeed/media/css/main.css	(original)
+++ codespeed/pyspeed/media/css/main.css	Thu Feb 25 13:23:13 2010
@@ -1,4 +1,5 @@
 body {
+    min-width: 960px;
     margin: 0; padding: 0; background-color: #596A74;
     background-image: url(/media/images/vgradient-s.png);
     background-repeat: repeat-x;
@@ -6,14 +7,11 @@
 a:link, a:visited { text-decoration: none; }
 a:hover { text-decoration: underline; }
 
-h1 { margin: 0; font-style: italic; }
-div#containter { width: 68em; margin-left: auto; margin-right: auto; }
-/* div#header { width: 100%; margin: 0; margin-bottom: 0.8em; padding: 0.8em; float:left; } */
+div#containter { width: 98%; margin-bottom: 1%; margin-left: auto; margin-right: auto; }
+
 div#title {
-    width: 100%;
-    float: left;
+    position: relative;
     margin-bottom: 0.8em;
-    padding: 0.2em;
     background-color: #F1F1F1;
     color: #000000;
     -moz-border-radius-bottomleft: 12px;
@@ -21,25 +19,21 @@
     -webkit-border-radius-bottomleft: 12px;
     -webkit-border-radius-bottomright: 12px;
 }
-div#title img { float: left; }
-div#title h1 { float: left; margin-top: 19px; }
+div#title img { float: left; padding: 0.2em;}
+div#title h1 { line-height: 72px; margin: 0; font-style: italic; }
+div#wrapper { margin: 0; }
 
-div#wrapper { width: 100%; margin: 0; margin-bottom: 0.8em; float:left; }
+div#nav ul { margin: 0; padding: 0; padding-left: 15.3em; }
+div#nav li { display: inline-block; }
 
-div#navigation { float: left; }
-div#tabs { width: 100%; color: #FFFFFF; }
-div#tabs ul { margin: 0; padding: 0; padding-left: 14.3em; }
-div#tabs li {
-    display: inline-block;
-    margin-left: 0.5em;
-}
-
-div#tabs ul li a:link, div#tabs ul li a:visited {
+div#nav ul li a:link, div#nav ul li a:visited {
     display: block;
+    width: 8.5em;
     text-decoration: none;
+    text-align: center;
     background-color: #DADADA;
     color: #888888;
-    padding: 1em;
+/*     padding: 1em; */
     padding-top: 0.6em;
     padding-bottom: 0.3em;
     -moz-border-radius-topleft: 20px;
@@ -48,48 +42,41 @@
     -webkit-border-radius-topright: 20px;
 }
 
-div#tabs ul li a.current {
+div#nav ul li a.current {
     background-color: #F1F1F1;
     color: #000000;
     font-weight: bold;
 }
 
-div#tabs ul li a:hover { background-color: #F1F1F1; color: #2D2F32; }
-
+div#nav ul li a:hover { background-color: #F1F1F1; color: #2D2F32; }
 
 div#workarea {
-    float: left;
-    width: 98%;
     background-color: #F1F1F1;
     padding: 0.8em;
     -moz-border-radius: 12px;
     -webkit-border-radius: 12px;
 }
 
+div#sidebar {
+    width: 13.7em;
+    float: left;
+    -moz-border-radius: 12px;
+    -webkit-border-radius: 12px;
+}
+
+
 div#configbar {
-    width: 51em;
     position: relative;
-    float: right;
+    margin-left: 14.5em;
     background-color: #FFFFFF;
     margin-bottom: 0.8em;
-/*     border: 1px dashed red; */
     padding: 0.8em;
     -moz-border-radius: 12px;
     -webkit-border-radius: 12px;
 }
 
-div#sidebar {
-/*     border: 1px dashed red; */
-    float: left;
-    margin-right: 0.8em;
-    -moz-border-radius: 12px;
-    -webkit-border-radius: 12px;
-}
-
 div#content {
-    width: 51em;
-    float: right;
-    clear:right;
+    margin-left: 14.5em;
     padding: 0.8em;
     text-align: center;
     background-color: #FFFFFF;
@@ -98,9 +85,9 @@
 }
 
 .sidebox {
+    overflow: hidden;
     margin: 0;
     margin-bottom: 2.2em;
-    width: 14.2em;
 /*     background: url(sbbody-r.gif) no-repeat bottom right; */
     font-size: 90%;
 }
@@ -140,10 +127,8 @@
 }
 
 /* tables */
-table#results thead tr th { width: 7em; }
-table#result_list thead tr th { width: 8em; }
-
 table.tablesorter {
+    width: 100%;
     font-family:arial;
     font-size: 11pt;
     text-align: left;
@@ -152,6 +137,17 @@
     border-spacing: 0px;
     border: 1px solid #CDCDCD;
 }
+
+table#results thead tr th { padding-right: 9px; }
+table#results thead tr th.w {  width: 6em; }
+table#results thead tr th.bar {
+    background-image: url(/media/images/gridline_units.png);
+    background-repeat: no-repeat;
+    background-position: left bottom;
+    vertical-align: top;
+    text-align: center;
+}
+
 table.tablesorter thead tr td{}
 table.tablesorter thead tr th, table.tablesorter tfoot tr th {
     background-color: #9DADC6;
@@ -189,10 +185,9 @@
 
 table.tablesorter tbody td.text {text-align: left;}
 
-table.tablesorter thead th.bar { width: 410px !important; }
 table.tablesorter tbody td.bar {
     background-image: url(/media/images/gridline.png);
-    background-repeat: repeat-x;
+    background-repeat: repeat;
     background-position: left top;
     text-align: left;
     padding: 0px;
@@ -207,8 +202,6 @@
 
 table.tablesorter tbody span {
   display: block; 
-/*   top: 10px;  */
-/*   left: 0;  */
   height: 1.45em;
   margin-top: 0.2em;
   background: #5AA1D3; 
@@ -224,9 +217,9 @@
     cursor: pointer;
 }
 
-a#permalink { float: right; font-size: small;}
+a#permalink { float: right; font-size: small; }
 
-div#plot { height: 500px; width: 800px; }
+div#plot { height: 500px; width: 100%; }
 
 /* new clearfix */
 .clearfix:after {

Modified: codespeed/pyspeed/media/images/gridline.png
==============================================================================
Binary files. No diff available.

Added: codespeed/pyspeed/media/images/gridline_units.png
==============================================================================
Binary file. No diff available.

Modified: codespeed/pyspeed/media/js/codespeed.js
==============================================================================
--- codespeed/pyspeed/media/js/codespeed.js	(original)
+++ codespeed/pyspeed/media/js/codespeed.js	Thu Feb 25 13:23:13 2010
@@ -1 +1,29 @@
-//?
\ No newline at end of file
+function getLoadText(text, h) {
+    //Create loading text
+    h = h - 32;
+    if(h < 80) { h = 200; }
+    var loadtext = '<div><p style="line-height:' + h + 'px;">' + text + '</p></div>';
+    return loadtext;
+}
+
+function transToLogBars(gridlength, maxwidth, value) {
+  //Size bars according to comparison value, using a logarithmic scale, base 2
+  c = Math.log(value)/Math.log(2);
+  var cmargin = gridlength * 2;
+  var cwidth = 1;
+  if (c >= 0) {
+    cwidth = c * gridlength;
+    //Check too fast
+    if ((cwidth + cmargin) > maxwidth) { cwidth = maxwidth - 103; }
+  } else {
+    c = - gridlength * c;
+    cwidth = c;
+    cmargin = gridlength * 2 - c;
+    // Check too slow
+    if (cmargin < 0) { cmargin = 0; cwidth = gridlength * 2; }
+  }
+  var res = new Object();
+  res["margin"] = cmargin + "px";
+  res["width"] = cwidth + "px";
+  return res;
+}

Modified: codespeed/pyspeed/templates/base.html
==============================================================================
--- codespeed/pyspeed/templates/base.html	(original)
+++ codespeed/pyspeed/templates/base.html	Thu Feb 25 13:23:13 2010
@@ -18,22 +18,19 @@
 
 <body>
 <div id="containter">
-<!-- <div id="header"> -->
-<div id="title"><img src="/media/images/pypy_logo.png" hight="68" width="200" align="middle"/><h1>SPEED CENTER</h1></div>
-<!-- </div> -->
+<div id="title"><img src="/media/images/pypy_logo.png" hight="68" width="200" /><h1>SPEED CENTER</h1></div>
 
 <div id="wrapper">
-<div id="navigation">
+<div id="nav">
 {% block navigation %}
-  <div id="tabs">
     <ul>
       <li><a href="/overview/">Overview</a></li>
       <li><a href="#">Timeline</a></li>
       <li><a href="/results/">Results</a></li>
     </ul>
-  </div>{% endblock %}
+{% endblock %}
 </div>
-<div id="workarea">
+<div id="workarea" class="clearfix">
 {% block body %}
   <div id="configbar">Start page</div>
 {% endblock %}
@@ -41,7 +38,7 @@
 </div>
 {% block footer %}
 {% endblock %}
-<div style="clear: both;">
+<!-- <div style="clear: both;"> -->
 </div>
 </body>
 </html>

Added: codespeed/pyspeed/templates/comparison.html
==============================================================================
--- (empty file)
+++ codespeed/pyspeed/templates/comparison.html	Thu Feb 25 13:23:13 2010
@@ -0,0 +1,10 @@
+{% extends "base.html" %}
+{% block navigation %}
+<!--   <div id="tabs"> -->
+    <ul>
+      <li><a href="/overview/">Overview</a></li>
+      <li><a href="/timeline/">Timeline</a></li>
+      <li><a href="/comparison/" class="current">Comparison</a></li>
+    </ul>
+<!--   </div> -->
+{% endblock %}

Modified: codespeed/pyspeed/templates/overview.html
==============================================================================
--- codespeed/pyspeed/templates/overview.html	(original)
+++ codespeed/pyspeed/templates/overview.html	Thu Feb 25 13:23:13 2010
@@ -23,7 +23,6 @@
   
   function updateTable() {
     $("#results > tbody > tr").each(function() {
-      var tdwidth = parseInt($("#results thead tr").find("th:eq(5)").css("width"));
       //Color change column
       var change = $(this).children("td:eq(2)").text().slice(0, -1);
       var colorcode = "status-yellow";
@@ -31,17 +30,16 @@
       else if(change < -0.3) { colorcode = "status-green"; }
       $(this).children("td:eq(2)").addClass(colorcode);
       //Color comparison column
-      var comp = parseFloat($(this).children("td:eq(4)").text())//remember to remove "x".slice(0, -1);
+      var comp = parseFloat($(this).children("td:eq(4)").text())
       colorcode = "status-yellow";
       if(comp < 0.8) { colorcode = "status-red"; }
       else if(comp > 1.2) { colorcode = "status-green"; }
       $(this).children("td:eq(4)").addClass(colorcode);
-      //Size bars according to comparison value
-      comp = comp*58;
-      if (comp > tdwidth) {
-          comp = "100%";
-      } else { comp = comp + "px"; }
-      $(this).children("td:eq(5)").find("span").css("width", comp);
+      //Size plot bars
+      var tdwidth = parseInt($("#results thead tr").find("th:eq(5)").css("width"));
+      var bar = transToLogBars(58, tdwidth, comp);
+      $(this).children("td:eq(5)").find("span").css("width", bar["width"]).css("margin-left", bar["margin"]);
+      //Link rows to timelines
       $(this).click(function () { 
         permalinkToTimeline($(this).children("td:eq(0)").text());
       });
@@ -62,19 +60,15 @@
       cache: false
     });
     
-    //Create loading text
-    h2 = parseInt($("#content").css("height")) - 16;
-    if(h2 < 40) { h2 = 40; }
-    h = "height:" + h2;
-    h2 = h2/2 + 30;
-    var ajax_load = '<div style="' + h + 'px;"><p style="line-height:' + h2 + 'px;">loading...</p></div>';
-    
-    var loadUrl = "table/";
-    $("#results").fadeOut("fast", function() { $("#content").html(ajax_load); });
-    $("#content").load(loadUrl, $.param(getConfiguration()), function(responseText) { updateTable(); });
+    h = parseInt($("#content").css("height"));//get height for loading text
+    $("#results").fadeOut("fast", function() {
+      $("#content").html(getLoadText("Loading...", h));
+    });
+    $("#content").load("table/", $.param(getConfiguration()), function(responseText) { updateTable(); });
   }
   
   $(function() {
+    // Configure defaults
     $("#trend").val({{ defaulttrend }});
     $("#trend").change(refreshContent);
     $("#revision").val({{ selectedrevision }});
@@ -88,13 +82,13 @@
 {% endblock %}
 
 {% block navigation %}
-  <div id="tabs">
+<!--   <div id="tabs"> -->
     <ul>
       <li><a href="/overview/" class="current">Overview</a></li>
       <li><a href="/timeline/">Timeline</a></li>
-      <li><a href="/results/">Results</a></li>
+<!--       <li><a href="/comparison/">Comparison</a></li> -->
     </ul>
-  </div>
+<!--   </div> -->
 {% endblock %}
 
 {% block body %}
@@ -137,6 +131,6 @@
   </select><a id="permalink" href="javascript:permalink();">Permalink</a>
 </div>
 <div id="content">
-<table class="tablesorter"></table>
+<table id="results" class="tablesorter" style="height: 232px;"></table>
 </div>
 {% endblock %}

Modified: codespeed/pyspeed/templates/overview_table.html
==============================================================================
--- codespeed/pyspeed/templates/overview_table.html	(original)
+++ codespeed/pyspeed/templates/overview_table.html	Thu Feb 25 13:23:13 2010
@@ -1,13 +1,12 @@
 <table id="results" class="tablesorter">
 <thead>
   <tr>
-    <th>Benchmark</th><th>Result (s)</th><th>Current change</th><th>Trend</th><th>Times cpython</th><th class="bar"></th>
+    <th class="w">Benchmark</th><th class="w">Result (s)</th><th class="w">Current change</th><th class="w">Trend</th><th class="w">Times cpython</th><th class="bar">(logarithmic base 2)</th>
   </tr>
 </thead>
 <tbody>
 {% for row in table_list %}  <tr>
         <td class="text">{{ row.benchmark }}</td><td>{{ row.result|floatformat:3 }}</td><td>{{ row.change|floatformat:2 }}%</td><td>{{ row.trend }}{% ifnotequal row.trend "-" %}%{% endifnotequal %}</td><td>{{ row.relative|floatformat:2 }}</td><td class="bar"><span>-</span></td>
-<!--         <img src="/media/images/bar.png" alt="" height="16" width="34" /> -->
   </tr>{% endfor %}
 </tbody>
 </table>
\ No newline at end of file

Modified: codespeed/pyspeed/templates/timeline.html
==============================================================================
--- codespeed/pyspeed/templates/timeline.html	(original)
+++ codespeed/pyspeed/templates/timeline.html	Thu Feb 25 13:23:13 2010
@@ -27,16 +27,21 @@
   }
   
   function renderPlot(data) {
+    if(data["error"] != "None") {
+      h = parseInt($("#content").css("height"));
+      $("#content").html(getLoadText(data["error"], h));
+      return 1;
+    }
     var plotdata = new Array();
     var colors = new Array();
     $("input[name='interpreter']:checked").each(function() {
       id = $(this).val();
       colors.push({"label": $("label[for*='" + this.id + "']").html(), "color": seriesColors[id-1]});
-//       $(this).parent().css("background-color", seriesColors[id-1]);
-//       $(this).parent().css("opacity", 0.3);
+    // TODO: color list?       $(this).parent().css("background-color", seriesColors[id-1]);
+    //       $(this).parent().css("opacity", 0.3);
       plotdata.push(data[id]);
     });
-
+    $("#content").html('<div id="plot"></div>');
     plot = $.jqplot('plot',  plotdata, {
       series: colors,
       axes:{
@@ -50,23 +55,22 @@
   }
   
   function refreshContent() {
-    $.ajaxSetup ({  
-         cache: false  
-    });
-    
-    //loading text
-    h2 = parseInt($("#content").css("height")) - 16;
-    if(h2 < 40) { h2 = 40; }
-    h = "height:" + h2;
-    h2 = h2/2 + 30;
-    var ajax_load = '<div style="' + h + 'px;"><p style="line-height:' + h2 + 'px;">loading...</p></div>';
-    
-    $("#plot").fadeOut("fast", function() {
-      $(this).html(ajax_load);
-    }).fadeIn("fast", function() { $.getJSON("json/", getConfiguration(), renderPlot); });
+    var h = parseInt($("#content").css("height"));//get height for loading text
+    if ($("#plot").length == 0) {//Previous error, no plot div
+      $("#content").html(getLoadText("Loading...", h));
+      $.getJSON("json/", getConfiguration(), renderPlot);
+    } else {//normal case
+      $("#plot").fadeOut("fast", function() {
+        $("#content").html(getLoadText("Loading...", h));
+        $.getJSON("json/", getConfiguration(), renderPlot);
+      });
+    }
   }
   
   $(function() {
+    $.ajaxSetup ({  
+      cache: false  
+    });
     $("#revisions").val({{ defaultlast }});
     $("#revisions").change(refreshContent);
     $("input:checkbox").removeAttr('checked');
@@ -76,20 +80,18 @@
     $("input[name='interpreter']").change(refreshContent);
     $("input:radio[name='benchmark']").filter('[value={{ defaultbenchmark }}]').attr('checked', true);
     $("input[name='benchmark']").change(refreshContent);
-
+    
     refreshContent();
   });
 </script>
 {% endblock %}
 
 {% block navigation %}
-  <div id="tabs">
     <ul>
       <li><a href="/overview/">Overview</a></li>
       <li><a href="/timeline/" class="current">Timeline</a></li>
-      <li><a href="/results/">Results</a></li>
+<!--       <li><a href="/comparison/">Comparison</a></li> -->
     </ul>
-  </div>
 {% endblock %}
 
 {% block body %}
@@ -100,7 +102,6 @@
     {% for inter in interpreters %}<li>
     <input id="interpreter{{ inter.id }}" type="checkbox" name="interpreter" value="{{ inter.id }}" />
     <label for="interpreter{{ inter.id }}">{{ inter }}</label></li>
-<!--     <br> -->
     {% endfor %}
     </ul>
   </div>
@@ -131,6 +132,6 @@
   </select> revisions<a id="permalink" href="javascript:permalink();">Permalink</a>
 </div>
 <div id="content">
-<div id="plot" class="plot"></div>
+<div id="plot"></div>
 </div>
 {% endblock %}

Modified: codespeed/tools/import_from_json.py
==============================================================================
--- codespeed/tools/import_from_json.py	(original)
+++ codespeed/tools/import_from_json.py	Thu Feb 25 13:23:13 2010
@@ -7,7 +7,7 @@
 RESULTS_URL = 'http://buildbot.pypy.org/bench_results/'
 SPEEDURL = 'http://speed.pypy.org/'# This will be pyspeed.pypy.org/
 SAVE_CPYTHON = False
-START_REV = 71154
+START_REV = 71392
 
 def saveresult(data):
     params = urllib.urlencode(data)



More information about the Pypy-commit mailing list