Fix issue with sparkline min and max dots incorrectly positioned

examples/sparklinePlus.html

@@ -25,32 +25,36 @@ text {
 <script src="../src/models/sparklinePlus.js"></script>
 <script>
 
-nv.addGraph({
-  generate: function() {
-    var chart = nv.models.sparklinePlus()
-                  //.width(400)
-                  //.height(50)
-
-    d3.select("#chart1")
-        //.datum([]) //for testing "noData"
-        .datum(sine())
-      .transition().duration(250)
-        .call(chart);
-
-    return chart;
-  },
-  callback: function(graph) {
-    //log("Sparkline rendered");
-  }
+nv.addGraph(function() {
+  var data = sine();
+  var chart = nv.models.sparklinePlus()
+
+  chart
+    .x(function(d,i) { return i })
+    .xTickFormat(function(d) {
+      return d3.time.format('%x')(new Date(data[d].x))
+    })
+
+  d3.select("#chart1")
+      .datum(data)
+    .transition().duration(250)
+      .call(chart);
+
+
+  return chart;
 });
 
 
+var now =+new Date();
 
 function sine() {
   var sin = [];
 
+
+  nv.log(now);
+
   for (var i = 0; i < 100; i++) {
-    sin.push({x: i + 100, y: Math.sin(i/10)});
+    sin.push({x: now + i * 1000 * 60 * 60 * 24, y: Math.sin(i/10)});
   }
 
   return sin;

nv.d3.js

@@ -9460,12 +9460,18 @@ nv.models.sparkline = function() {
 
       // TODO: Add CURRENT data point (Need Min, Mac, Current / Most recent)
       var points = wrap.selectAll('circle.nv-point')
-          .data(function(d) { return d.filter(function(p,i) { return y.domain().indexOf(getY(p,i)) != -1 || getX(p,i) == x.domain()[1]  }) });
+          .data(function(data) {
+            return data.map(function(d,i) {
+              if (y.domain().indexOf(getY(d,i)) != -1 || getX(d,i) == x.domain()[1]) d.pointIndex = i;
+              return d;
+            })
+            .filter(function(d) { return typeof d.pointIndex != 'undefined' })
+          });
       points.enter().append('circle').attr('class', 'nv-point');
       points.exit().remove();
       points
-          .attr('cx', function(d,i) { return x(getX(d,i)) })
-          .attr('cy', function(d,i) { return y(getY(d,i)) })
+          .attr('cx', function(d,i) { return x(getX(d,d.pointIndex)) })
+          .attr('cy', function(d,i) { return y(getY(d,d.pointIndex)) })
           .attr('r', 2)
           .style('stroke', function(d,i) { return d.x == x.domain()[1] ? '#444' : d.y == y.domain()[0] ? '#d62728' : '#2ca02c' })
           .style('fill', function(d,i) { return d.x == x.domain()[1] ? '#444' : d.y == y.domain()[0] ? '#d62728' : '#2ca02c' });

src/models/sparkline.js

@@ -67,12 +67,18 @@ nv.models.sparkline = function() {
 
       // TODO: Add CURRENT data point (Need Min, Mac, Current / Most recent)
       var points = wrap.selectAll('circle.nv-point')
-          .data(function(d) { return d.filter(function(p,i) { return y.domain().indexOf(getY(p,i)) != -1 || getX(p,i) == x.domain()[1]  }) });
+          .data(function(data) {
+            return data.map(function(d,i) {
+              if (y.domain().indexOf(getY(d,i)) != -1 || getX(d,i) == x.domain()[1]) d.pointIndex = i;
+              return d;
+            })
+            .filter(function(d) { return typeof d.pointIndex != 'undefined' })
+          });
       points.enter().append('circle').attr('class', 'nv-point');
       points.exit().remove();
       points
-          .attr('cx', function(d,i) { return x(getX(d,i)) })
-          .attr('cy', function(d,i) { return y(getY(d,i)) })
+          .attr('cx', function(d,i) { return x(getX(d,d.pointIndex)) })
+          .attr('cy', function(d,i) { return y(getY(d,d.pointIndex)) })
           .attr('r', 2)
           .style('stroke', function(d,i) { return d.x == x.domain()[1] ? '#444' : d.y == y.domain()[0] ? '#d62728' : '#2ca02c' })
           .style('fill', function(d,i) { return d.x == x.domain()[1] ? '#444' : d.y == y.domain()[0] ? '#d62728' : '#2ca02c' });

src/nv.d3.css

@@ -532,7 +532,10 @@ svg .title {
 
 .nvd3.nv-sparklineplus .nv-xValue,
 .nvd3.nv-sparklineplus .nv-yValue {
+  /*
   stroke: #666;
+  */
+  stroke-width: 0;
   font-size: .8em;
   font-weight: normal;
 }