Merge "Add axis to the timeline viewport."

app/js/directives/timeline-viewport.js

@@ -61,6 +61,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) {
@@ -223,6 +236,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 {
 
     }