added xlabel

2 files changed, 22 insertions, 3 deletions

diff --git a/tools/template/app/less/index.less b/tools/template/app/less/index.less
index a00ab1f85fb..7dd4964047e 100644
--- a/tools/template/app/less/index.less
+++ b/tools/template/app/less/index.less
@@ -113,6 +113,10 @@ svg.multiline {
     shape-rendering: crispEdges;
   }
 
+  .cross {
+    shape-rendering: crispEdges;
+  }
+
   .x.axis path {
     display: none;
   }
diff --git a/tools/template/views/viz/d3-multiline.js b/tools/template/views/viz/d3-multiline.js
index c226b2c0336..9f98326c75a 100644
--- a/tools/template/views/viz/d3-multiline.js
+++ b/tools/template/views/viz/d3-multiline.js
@@ -112,7 +112,7 @@ module.exports = function(opts) {
       .attr("x2", width);
 
     crosshairY
-      .attr("y2", height);
+      .attr("y2", height+20);
 
     windshield
       .attr("width", width)
@@ -160,6 +160,13 @@ module.exports = function(opts) {
     // focus.select("rect.marker")
     //   .style("fill", serie.color);
 
+    xlabel
+      .attr('transform', 'translate(' + x(accx(d)) + ',' + (height+34) + ')')
+      .text(options.xSetting === 'relative' ? 
+        d3.format(',')(accx(d)) : 
+        d3.time.format('%b %d %H:%M:%S')(accx(d)))
+      .moveToFront();
+
     crosshairX
       .attr("y1", y(d.y))
       .attr("y2", y(d.y));
@@ -242,13 +249,13 @@ module.exports = function(opts) {
   var crosshairX = svg.append("line")
     .style("stroke", "#ddd")
     .style("display", "none")
-    .attr("class", 'x')
+    .attr("class", 'x cross')
     .attr("x1", 0);
 
   var crosshairY = svg.append("line")
     .style("stroke", "#ddd")
     .style("display", "none")
-    .attr("class", 'x')
+    .attr("class", 'x cross')
     .attr("y1", 0);
 
   // focus
@@ -261,6 +268,12 @@ module.exports = function(opts) {
     .attr("fill", "none")
     .attr("stroke-width", 2);
 
+  var xlabel = svg.append("text")
+    .attr('text-anchor', 'middle')
+    .attr('class', 'xlabel')
+    .attr('font-size', '0.8em')
+    .attr('fill', '#bbb');
+
   // focus.append('rect')
   //   .attr("class", "marker")
   //   .attr("width", 6)
@@ -289,11 +302,13 @@ module.exports = function(opts) {
       crosshairX.style("display", null);
       crosshairY.style("display", null);
       focus.style("display", null);
+      xlabel.style("display", null);
     })
     .on("mouseout", function() { 
       focus.style("display", "none"); 
       crosshairX.style("display", "none"); 
       crosshairY.style("display", "none"); 
+      xlabel.style("display", "none");
     })
     .on("mousemove", mousemove);