add chart for build wall time. closes #1

index.html

@@ -14,7 +14,14 @@
 	</form>
 
 	<div class="column">
-		<h2>Individual build durations (in minutes)</h2>
+		<h2>Build durations (in minutes)</h2>
+		<h3>duration = sum of job run times</h3>
+		<div id="build-times-duration"></div>
+	</div>
+
+	<div class="column">
+		<h2>Build wall times (in minutes)</h2>
+		<h3>wall time = finished_at - started_at</h3>
 		<div id="build-times"></div>
 	</div>
 

script.js

@@ -75,7 +75,7 @@ function renderBuildCounts(container, data) {
 		.style("stroke", "#000");
 }
 
-function renderBuildTimes(container, data, baseUrl) {
+function renderBuildTimes(container, barValue, data, baseUrl) {
 	var paddingLeft = 5; // space to the left of the bars
 	var paddingRight = 10; // space to the right of the bars
 	var barHeight = 5; // height of one bar
@@ -84,9 +84,6 @@ function renderBuildTimes(container, data, baseUrl) {
 	var gridChartOffset = 3; // space between start of grid and first bar
 	var maxBarWidth = 450; // width of the bar with the max value
 
-	// accessor functions 
-	var barValue = function(d) { return d.duration/60; };
-
 	// scales
 	var yScale = d3.scale.ordinal()
 		.domain(d3.range(0, data.length))
@@ -192,7 +189,19 @@ function updateChart() {
 			builds.push(build);
 		});
 
-		renderBuildTimes('#build-times', builds, baseUrl);
+		function getDuration(build) {
+			return build.duration/60;
+		}
+
+		function getClockTime(build) {
+			var started_at = Date.parse(build.started_at);
+			var finished_at = Date.parse(build.finished_at);
+
+			return (finished_at - started_at) / 60000;
+		}
+
+		renderBuildTimes('#build-times-duration', getDuration, builds, baseUrl);
+		renderBuildTimes('#build-times', getClockTime, builds, baseUrl);
 		renderBuildCounts('#build-counts', d3.entries(buildCounts), baseUrl);
 
 		if (++i < n && curOldestBuild < oldestBuild) {

style.css

@@ -1,3 +1,12 @@
+h2 {
+	margin-bottom: 5px;
+}
+
+h3 {
+	margin-top: 0;
+	color: gray;
+}
+
 form {
 	display: block;
 	margin-bottom: 10px;