Commits

Bryan O'Sullivan committed c481906

Major progress!

Moved some generic code out to a (crufty) jQuery plugin.

Fixed up times and densities to have the same axis orientation.
(Thanks to Jen for that suggestion!)

Comments (0)

Files changed (6)

Criterion/Report.hs

     , reportAnalysis :: SampleAnalysis
     } deriving (Eq, Show, Typeable, Data)
 
+templateDir :: FilePath
+templateDir = "templates"
+
 templatePath :: FilePath
-templatePath = joinPath ["templates","report.tpl"]
+templatePath = joinPath [templateDir,"report.tpl"]
 
 javascriptPath :: FilePath
-javascriptPath = joinPath ["templates","js"]
+javascriptPath = joinPath [templateDir,"js"]
 
 report :: String -> [Report] -> Criterion ()
 report name reports = do
   jsURI <- fmap pathToURI . liftIO $ getDataFileName javascriptPath
-  let context "report" = MuList $ map inner reports
-      context "jspath" = MuVariable jsURI
-      context _        = MuNothing
+  tplURI <- fmap pathToURI . liftIO $ getDataFileName templateDir
+  let context "report"  = MuList $ map inner reports
+      context "jspath"  = MuVariable jsURI
+      context "tplpath" = MuVariable tplURI
+      context _         = MuNothing
       inner Report{..} = mkStrContext $ \nym ->
                          case nym of
                            "name"     -> MuVariable reportName
-                           "jsname"   -> enc name
                            "number"   -> MuVariable reportNumber
                            "times"    -> enc reportTimes
                            "kdetimes" -> enc kdeTimes
   templates/js/jquery-1.6.4.min.js
   templates/js/jquery.criterion.js
   templates/js/jquery.flot-0.7.min.js
+  templates/criterion.css
   templates/report.tpl
 
 description:
 import Criterion.Config
 
 main = defaultMainWith defaultConfig (return ()) [
-         bench "fib 10" $ whnf fib 10
-       , bench "fib 30" $ whnf fib 30
-       , bench "intmap 50k" $ whnf intmap 50000
-       , bench "intmap 75k" $ whnf intmap 75000
+         bgroup "fib" [
+           bench "fib 10" $ whnf fib 10
+         , bench "fib 30" $ whnf fib 30
+         ],
+         bgroup "intmap" [
+           bench "intmap 50k" $ whnf intmap 50000
+         , bench "intmap 75k" $ whnf intmap 75000
+         ]
        ]
         
 fib :: Int -> Int

templates/criterion.css

+body {
+  font: 14px Helvetica Neue;
+  text-rendering: optimizeLegibility;
+  margin-top: 1em;
+  overflow-y: scroll;
+}
+
+a {
+  color: steelblue;
+  text-decoration: none;
+}
+
+.hover {
+  color: steelblue;
+  text-decoration: none;
+}
+
+.body {
+  width: 960px;
+  margin: auto;
+}
+
+h1 {
+  font-size: 36px;
+  font-weight: 300;
+  margin-bottom: .3em;
+}
+
+h2 {
+  font-size: 30px;
+  font-weight: 300;
+  margin-bottom: .3em;
+}

templates/js/jquery.criterion.js

 
     return x.toString().substring(0,prec) + " " + t[1];
   };
+
+  $.addTooltip = function(name, renderText) {
+    function showTooltip(x, y, contents) {
+	$('<div id="tooltip">' + contents + '</div>').css( {
+	    position: 'absolute',
+	    display: 'none',
+	    top: y + 5,
+	    left: x + 5,
+	    border: '1px solid #fdd',
+	    padding: '2px',
+	    'background-color': '#fee',
+	    opacity: 0.80
+	}).appendTo("body").fadeIn(200);
+    };
+    var pp = null;
+    $(name).bind("plothover", function (event, pos, item) {
+	$("#x").text(pos.x.toFixed(2));
+	$("#y").text(pos.y.toFixed(2));
+
+	if (item) {
+	    if (pp != item.dataIndex) {
+		pp = item.dataIndex;
+
+		$("#tooltip").remove();
+		var x = item.datapoint[0].toFixed(2),
+		    y = item.datapoint[1].toFixed(2);
+
+		showTooltip(item.pageX, item.pageY, renderText(x,y));
+	    }
+	}
+	else {
+	    $("#tooltip").remove();
+	    pp = null;            
+	}
+    });
+  };
 })(jQuery);

templates/report.tpl

 	    src="file://{{jspath}}/jquery.flot-0.7.min.js"></script>
     <script language="javascript" type="text/javascript"
 	    src="file://{{jspath}}/jquery.criterion.js"></script>
+    <style type="text/css">
+@import url("file://{{tplpath}}/criterion.css");
+</style>
  </head>
     <body>
+      <div class="body">
     <h1>criterion performance measurements</h1>
 
 <ul>
 
 {{#report}}
 <h2><a name="b{{number}}">{{name}}</a></h2>
-    <div id="kde{{number}}" style="width:600px;height:300px;"></div>
-    Ran in <span class="time">{{anMean.estPoint}}</span>.
-    <div id="time{{number}}" style="width:600px;height:300px;"></div>
+    <div id="kde{{number}}" class="kdechart" style="width:600px;height:300px;"></div>
+    <p>Ran in <span class="time">{{anMean.estPoint}}</span>.</p>
+    <p class="timechart">Timing data</p>
+    <div id="time{{number}}" class="timechart" style="width:600px;height:300px;"></div>
 {{/report}}
 
 <script type="text/javascript">
 $(function () {
-  function showTooltip(x, y, contents) {
-      $('<div id="tooltip">' + contents + '</div>').css( {
-	  position: 'absolute',
-	  display: 'none',
-	  top: y + 5,
-	  left: x + 5,
-	  border: '1px solid #fdd',
-	  padding: '2px',
-	  'background-color': '#fee',
-	  opacity: 0.80
-      }).appendTo("body").fadeIn(200);
-  };
   function mangulate(number, name, times, kdetimes, kdepdf) {
     kdetimes = $.scaleTimes(kdetimes)[0];
     var ts = $.scaleTimes(times);
 	   });
     var timepairs = new Array(ts.length);
     for (var i = 0; i < ts.length; i++)
-      timepairs[i] = [i,ts[i]];
+      timepairs[i] = [ts[i],i];
     $.plot($("#time" + number),
 	   [{ label: name + " times (" + units + ")",
 	      data: timepairs }],
 	   { points: { show: true },
 	     grid: { hoverable: true },
-	     xaxis: { ticks: false },
-	     yaxis: { min: 0 },
+             xaxis: { min: kdetimes[0], max: kdetimes[kdetimes.length-1] },
+	     yaxis: { ticks: false },
 	   });
-      var pp = null;
-      $("#time" + number).bind("plothover", function (event, pos, item) {
-	  $("#x").text(pos.x.toFixed(2));
-	  $("#y").text(pos.y.toFixed(2));
-
-	  if (item) {
-	      if (pp != item.dataIndex) {
-		  pp = item.dataIndex;
-
-		  $("#tooltip").remove();
-		  var x = item.datapoint[0].toFixed(2),
-		      y = item.datapoint[1].toFixed(2);
-
-		  showTooltip(item.pageX, item.pageY, y + " " + units);
-	      }
-	  }
-	  else {
-	      $("#tooltip").remove();
-	      pp = null;            
-	  }
-      });
+    $.addTooltip("#kde" + number, function(x,y) { return x + ' ' + units; });
+    $.addTooltip("#time" + number, function(x,y) { return x + ' ' + units; });
   };
   {{#report}}
   mangulate({{number}}, "{{name}}",
     $(".time").text(function(_, text) {
         return $.renderTime(text);
       });
+    $("div.timechart").toggle();
+    $("p.timechart").click(function() {
+        $(this).next().toggle();
+      }).hover(function() {
+        $(this).addClass("hover");
+        $(this).css("cursor", "pointer");
+      }, function() {
+        $(this).removeClass("hover");
+        $(this).css("cursor", "auto");
+      });
   });
 </script>
 
+   </div>
  </body>
 </html>