Commits

Bryan O'Sullivan  committed 7efcb5e

Add footer and explanation to HTML report.

  • Participants
  • Parent commits 4be86b7

Comments (0)

Files changed (2)

File templates/criterion.css

+html, body {
+  height: 100%;
+  margin: 0;
+}
+
+#wrap {
+  min-height: 100%;
+}
+
+#main {
+  overflow: auto;
+  padding-bottom: 180px;  /* must be same height as the footer */
+}
+
+#footer {
+  position: relative;
+  margin-top: -180px; /* negative value of footer height */
+  height: 180px;
+  clear: both;
+  background: #888;
+  margin: 40px 0 0;
+  color: white;
+  font-size: larger;
+  font-weight: 300;
+} 
+
+body:before {
+  /* Opera fix */
+  content: "";
+  height: 100%;
+  float: left;
+  width: 0;
+  margin-top: -32767px;
+}
+
 body {
   font: 14px Helvetica Neue;
   text-rendering: optimizeLegibility;
   margin-top: 1em;
-  overflow-y: scroll;
 }
 
 a:link {
   text-decoration: none;
 }
 
+#footer a {
+  color: white;
+  text-decoration: underline;
+}
+
 .hover {
   color: steelblue;
   text-decoration: none;
   margin: auto;
 }
 
+.footfirst {
+  position: relative;
+  top: 30px;
+}
+
 th {
   font-weight: 500;
   opacity: 0.8;

File templates/report.tpl

     </script>
     <style type="text/css">
 {{#include}}criterion.css{{/include}}
-</style>
+    </style>
+    <!--[if !IE 7]>
+	    <style type="text/css">
+		    #wrap {display:table;height:100%}
+	    </style>
+    <![endif]-->
  </head>
     <body>
-      <div class="body">
+     <div id="wrap">
+      <div id="main" class="body">
     <h1>criterion performance measurements</h1>
 
 <h2>overview</h2>
 
+<p><a href="#grokularation">want to understand this report?</a></p>
+
 <div id="overview" class="ovchart" style="width:900px;height:100px;"></div>
 
 {{#report}}
  </span>
 {{/report}}
 
+ <h2><a name="grokularation">understanding this report</a></h2>
+
+ <p>In this report, each function benchmarked by criterion is assigned
+   a section of its own.  In each section, we display two charts, each
+   with an <i>x</i> axis that represents measured execution time.
+   These charts are active; if you hover your mouse over data points
+   and annotations, you will see more details.</p>
+
+ <ul>
+   <li>The chart on the left is a
+     <a href="http://en.wikipedia.org/wiki/Kernel_density_estimation">kernel
+       density estimate</a> (also known as a KDE) of time
+     measurements.  This graphs the probability of any given time
+     measurement occurring.  A spike indicates that a measurement of a
+     particular time occurred; its height indicates how often that
+     measurement was repeated.</li>
+
+   <li>The chart on the right is the raw data from which the kernel
+     density estimate is built.  Measurements are displayed on
+     the <i>y</i> axis in the order in which they occurred.</li>
+ </ul>
+   
+ <p>Under the charts is a small table displaying the mean and standard
+   deviation of the measurements.  We use a statistical technique
+   called
+   the <a href="http://en.wikipedia.org/wiki/Bootstrapping_(statistics)">bootstrap</a>
+   to provide confidence intervals on our estimates of these values.
+   The bootstrap-derived upper and lower bounds on the mean and
+   standard deviation let you see how accurate we believe those
+   estimates to be.  (Hover the mouse over the table headers to see
+   the confidence levels.)</p>
+   
+ <p>A noisy benchmarking environment can cause some or many
+   measurements to fall far from the mean.  These outlying
+   measurements can have a significant inflationary effect on the
+   estimate of the standard deviation.  We calculate and display an
+   estimate of the extent to which the standard deviation has been
+   inflated by outliers.</p>
+
 <script type="text/javascript">
 $(function () {
   function mangulate(number, name, mean, times, kdetimes, kdepdf) {
-    kdetimes = $.scaleTimes(kdetimes)[0];
     var meanSecs = mean;
-    mean *= $.timeUnits(mean)[0];
-    var ts = $.scaleTimes(times);
-    var units = ts[1];
-    ts = ts[0];
+    var units = $.timeUnits(mean);
+    var scale = units[0];
+    units = units[1];
+    mean *= scale;
+    kdetimes = $.scaleBy(scale, kdetimes);
+    var ts = $.scaleBy(scale, times);
     var kq = $("#kde" + number);
     var k = $.plot(kq,
            [{ label: name + " time densities",
               data: $.zip(kdetimes, kdepdf),
               }],
-           { xaxis: { $.unitFormatter(units) },
+           { xaxis: { tickFormatter: $.unitFormatter(units) },
              yaxis: { ticks: false },
-             grid: { hoverable: true, markings: [ { color: '#6fd3fb',
+             grid: { borderColor: "#777",
+                     hoverable: true, markings: [ { color: '#6fd3fb',
                      lineWidth: 1.5, xaxis: { from: mean, to: mean } } ] },
            });
     var o = k.pointOffset({ x: mean, y: 0});
            [{ label: name + " times",
               data: timepairs }],
            { points: { show: true },
-             grid: { hoverable: true },
+             grid: { borderColor: "#777", hoverable: true },
              xaxis: { min: kdetimes[0], max: kdetimes[kdetimes.length-1],
                       tickFormatter: $.unitFormatter(units) },
              yaxis: { ticks: false },
   var oq = $("#overview");
   o = $.plot(oq, xs, { bars: { show: true, horizontal: true,
                                barWidth: 0.75, align: "center" },
-                       grid: { hoverable: true },
+                       grid: { borderColor: "#777", hoverable: true },
                        legend: { show: xs.length > 1 },
                        xaxis: { max: Math.max.apply(undefined,means[0]) * 1.02 },
                        yaxis: { ticks: ylabels, tickColor: '#ffffff' } });
 </script>
 
    </div>
+  </div>
+  <div id="footer">
+    <div class="body">
+     <div class="footfirst">
+      <h2>colophon</h2>
+      <p>This report was created using the
+	<a href="http://hackage.haskell.org/package/criterion">criterion</a>
+	benchmark execution and performance analysis tool.</p>
+      <p>Criterion is developed and maintained
+      by <a href="http://www.serpentine.com/blog/">Bryan O'Sullivan</a>.</p>
+     </div>
+    </div>
+  </div>
  </body>
 </html>