From 19c85d503f0574dd971805da9f87f613faf3b7ae Mon Sep 17 00:00:00 2001
From: Tim Buckley <timothy.jas.buckley@hpe.com>
Date: Fri, 8 Jan 2016 16:20:22 -0700
Subject: [PATCH] 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        | 15 +++++++++++++++
 app/js/directives/timeline.js                 |  2 +-
 app/styles/directives/_timeline-viewport.scss | 19 +++++++++++++++++++
 3 files changed, 35 insertions(+), 1 deletion(-)

diff --git a/app/js/directives/timeline-viewport.js b/app/js/directives/timeline-viewport.js
index ea90738..af0ea2b 100644
--- a/app/js/directives/timeline-viewport.js
+++ b/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) {
diff --git a/app/js/directives/timeline.js b/app/js/directives/timeline.js
index 125ad46..3901ac7 100644
--- a/app/js/directives/timeline.js
+++ b/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;
 
diff --git a/app/styles/directives/_timeline-viewport.scss b/app/styles/directives/_timeline-viewport.scss
index 3456ae8..4a4a849 100644
--- a/app/styles/directives/_timeline-viewport.scss
+++ b/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 {
 
     }