Issue #284 show current value to the right of the sparkline

examples/sparklinePlus.html

@@ -40,7 +40,6 @@ nv.addGraph(function() {
     .transition().duration(250)
       .call(chart);
 
-  nv.utils.windowResize(chart.update);
 
   return chart;
 });

nv.d3.js

@@ -9598,6 +9598,7 @@ nv.models.sparklinePlus = function() {
     , paused = false
     , xTickFormat = d3.format(',r')
     , yTickFormat = d3.format(',.2f')
+    , showValue = true
     , noData = "No Data Available."
     ;
 
@@ -9613,6 +9614,7 @@ nv.models.sparklinePlus = function() {
           availableHeight = (height || parseInt(container.style('height')) || 400)
                              - margin.top - margin.bottom;
 
+      var currentValue = sparkline.y()(data[data.length-1], data.length-1);
 
       chart.update = function() { chart(selection) };
       chart.container = this;
@@ -9661,6 +9663,7 @@ nv.models.sparklinePlus = function() {
       var g = wrap.select('g');
 
       gEnter.append('g').attr('class', 'nv-sparklineWrap');
+      gEnter.append('g').attr('class', 'nv-valueWrap');
       gEnter.append('g').attr('class', 'nv-hoverArea');
 
       wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
@@ -9683,6 +9686,20 @@ nv.models.sparklinePlus = function() {
       //------------------------------------------------------------
 
 
+      var valueWrap = g.select('.nv-valueWrap');
+
+      var value = valueWrap.selectAll('.nv-currentValue')
+          .data([currentValue]);
+
+      value.enter().append('text').attr('class', 'nv-currentValue')
+          .attr('transform', function(d,i) { return 'translate(' + (availableWidth + 8) + ',' + y(d) + ')' })
+          .attr('dy', '.32em');
+
+      value
+          .style('fill', sparkline.color()(data[data.length-1], data.length-1))
+          .text(yTickFormat(currentValue));
+
+
 
       gEnter.select('.nv-hoverArea').append('rect')
           .on('mousemove', sparklineHover)
@@ -9818,6 +9835,12 @@ nv.models.sparklinePlus = function() {
     return chart;
   };
 
+  chart.showValue = function(_) {
+    if (!arguments.length) return showValue;
+    showValue = _;
+    return chart;
+  };
+
   chart.noData = function(_) {
     if (!arguments.length) return noData;
     noData = _;

src/models/sparklinePlus.js

@@ -16,6 +16,7 @@ nv.models.sparklinePlus = function() {
     , paused = false
     , xTickFormat = d3.format(',r')
     , yTickFormat = d3.format(',.2f')
+    , showValue = true
     , noData = "No Data Available."
     ;
 
@@ -31,6 +32,7 @@ nv.models.sparklinePlus = function() {
           availableHeight = (height || parseInt(container.style('height')) || 400)
                              - margin.top - margin.bottom;
 
+      var currentValue = sparkline.y()(data[data.length-1], data.length-1);
 
       chart.update = function() { chart(selection) };
       chart.container = this;
@@ -79,6 +81,7 @@ nv.models.sparklinePlus = function() {
       var g = wrap.select('g');
 
       gEnter.append('g').attr('class', 'nv-sparklineWrap');
+      gEnter.append('g').attr('class', 'nv-valueWrap');
       gEnter.append('g').attr('class', 'nv-hoverArea');
 
       wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
@@ -101,6 +104,20 @@ nv.models.sparklinePlus = function() {
       //------------------------------------------------------------
 
 
+      var valueWrap = g.select('.nv-valueWrap');
+
+      var value = valueWrap.selectAll('.nv-currentValue')
+          .data([currentValue]);
+
+      value.enter().append('text').attr('class', 'nv-currentValue')
+          .attr('transform', function(d,i) { return 'translate(' + (availableWidth + 8) + ',' + y(d) + ')' })
+          .attr('dy', '.32em');
+
+      value
+          .style('fill', sparkline.color()(data[data.length-1], data.length-1))
+          .text(yTickFormat(currentValue));
+
+
 
       gEnter.select('.nv-hoverArea').append('rect')
           .on('mousemove', sparklineHover)
@@ -236,6 +253,12 @@ nv.models.sparklinePlus = function() {
     return chart;
   };
 
+  chart.showValue = function(_) {
+    if (!arguments.length) return showValue;
+    showValue = _;
+    return chart;
+  };
+
   chart.noData = function(_) {
     if (!arguments.length) return noData;
     noData = _;

src/nv.d3.css

@@ -551,8 +551,11 @@ svg .title {
 }
 
 .nvd3.nv-sparklineplus .nv-currentValue {
+  /*
   stroke: #444;
-  fill: #444;
+  fill: #000;
+  */
+  font-size: 1em;
 }
 
 /**********