Add axis to the timeline viewport.

This adds a labeled time axis to the main viewport chart. Previously
time was only displayed as part of the cursor, but now it is also
visible at all times on the chart itself.

Change-Id: I8f2379ef50a1d4f4ea2869aa26f1a7e5744bdb8a

app/js/directives/timeline-viewport.js

@@ -62,6 +62,19 @@ function timelineViewport($document) {
         .style('font', '12px sans-serif')
         .style('font-weight', 'bold');
 
+    var format = d3.time.format('%H:%M');
+    var axis = d3.svg.axis()
+        .scale(xSelected)
+        .tickSize(5)
+        .tickFormat(function(f) { return format(new Date(f)); })
+        .orient('bottom');
+
+    var axisGroup = chart.append('g')
+        .attr('class', 'axis')
+        .attr('transform', 'translate(' + margin.left + ',' + (height + margin.top) + ')')
+        .attr('clip-path', 'url(#clip)')
+        .call(axis);
+
     var selectedRect = null;
 
     var color = function(rect, color) {
@@ -224,6 +237,8 @@ function timelineViewport($document) {
     var update = function(data) {
       updateItems(timelineController.data);
       updateLanes(timelineController.data);
+
+      axisGroup.call(axis);
     };
 
     var select = function(rect) {

app/js/directives/timeline.js

@@ -42,7 +42,7 @@ function timeline($log, datasetService) {
     self.dataRaw = [];
     self.dstat = [];
 
-    self.margin = { top: 40, right: 10, bottom: 10, left: 80 };
+    self.margin = { top: 40, right: 10, bottom: 20, left: 80 };
     self.width = 0;
     self.height = 550 - this.margin.top - this.margin.bottom;
 

app/styles/directives/_timeline-viewport.scss

@@ -1,4 +1,23 @@
 timeline-viewport svg {
+    .axis {
+        shape-rendering: crispEdges;
+
+        path {
+            fill: none;
+            stroke: lightgray;
+        }
+
+        line {
+            fill: none;
+            stroke: lightgray;
+        }
+
+        text {
+            font: 9px sans-serif;
+            fill: #888;
+        }
+    }
+
     .filter-hit {
 
     }