2 nv.models.sparklinePlus = function() {
4 //============================================================
5 // Public Variables with Default Settings
6 //------------------------------------------------------------
8 var sparkline = nv.models.sparkline();
10 var margin = {top: 15, right: 100, bottom: 10, left: 50}
17 , xTickFormat = d3.format(',r')
18 , yTickFormat = d3.format(',.2f')
21 , rightAlignValue = false
22 , noData = "No Data Available."
25 //============================================================
28 function chart(selection) {
29 selection.each(function(data) {
30 var container = d3.select(this);
32 var availableWidth = (width || parseInt(container.style('width')) || 960)
33 - margin.left - margin.right,
34 availableHeight = (height || parseInt(container.style('height')) || 400)
35 - margin.top - margin.bottom;
39 chart.update = function() { chart(selection) };
40 chart.container = this;
43 //------------------------------------------------------------
44 // Display No Data message if there's nothing to show.
46 if (!data || !data.length) {
47 var noDataText = container.selectAll('.nv-noData').data([noData]);
49 noDataText.enter().append('text')
50 .attr('class', 'nvd3 nv-noData')
52 .style('text-anchor', 'middle');
55 .attr('x', margin.left + availableWidth / 2)
56 .attr('y', margin.top + availableHeight / 2)
57 .text(function(d) { return d });
61 container.selectAll('.nv-noData').remove();
64 var currentValue = sparkline.y()(data[data.length-1], data.length-1);
66 //------------------------------------------------------------
70 //------------------------------------------------------------
73 x = sparkline.xScale();
74 y = sparkline.yScale();
76 //------------------------------------------------------------
79 //------------------------------------------------------------
80 // Setup containers and skeleton of chart
82 var wrap = container.selectAll('g.nv-wrap.nv-sparklineplus').data([data]);
83 var wrapEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-sparklineplus');
84 var gEnter = wrapEnter.append('g');
85 var g = wrap.select('g');
87 gEnter.append('g').attr('class', 'nv-sparklineWrap');
88 gEnter.append('g').attr('class', 'nv-valueWrap');
89 gEnter.append('g').attr('class', 'nv-hoverArea');
91 wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
93 //------------------------------------------------------------
96 //------------------------------------------------------------
97 // Main Chart Component(s)
99 var sparklineWrap = g.select('.nv-sparklineWrap');
102 .width(availableWidth)
103 .height(availableHeight);
108 //------------------------------------------------------------
111 var valueWrap = g.select('.nv-valueWrap');
113 var value = valueWrap.selectAll('.nv-currentValue')
114 .data([currentValue]);
116 value.enter().append('text').attr('class', 'nv-currentValue')
117 .attr('dx', rightAlignValue ? -8 : 8)
119 .style('text-anchor', rightAlignValue ? 'end' : 'start');
122 .attr('x', availableWidth + (rightAlignValue ? margin.right : 0))
123 .attr('y', alignValue ? function(d) { return y(d) } : 0)
124 .style('fill', sparkline.color()(data[data.length-1], data.length-1))
125 .text(yTickFormat(currentValue));
129 gEnter.select('.nv-hoverArea').append('rect')
130 .on('mousemove', sparklineHover)
131 .on('click', function() { paused = !paused })
132 .on('mouseout', function() { index = []; updateValueLine(); });
133 //.on('mouseout', function() { index = null; updateValueLine(); });
135 g.select('.nv-hoverArea rect')
136 .attr('transform', function(d) { return 'translate(' + -margin.left + ',' + -margin.top + ')' })
137 .attr('width', availableWidth + margin.left + margin.right)
138 .attr('height', availableHeight + margin.top);
142 function updateValueLine() { //index is currently global (within the chart), may or may not keep it that way
145 var hoverValue = g.selectAll('.nv-hoverValue').data(index)
147 var hoverEnter = hoverValue.enter()
148 .append('g').attr('class', 'nv-hoverValue')
149 .style('stroke-opacity', 0)
150 .style('fill-opacity', 0);
153 .transition().duration(250)
154 .style('stroke-opacity', 0)
155 .style('fill-opacity', 0)
159 .attr('transform', function(d) { return 'translate(' + x(sparkline.x()(data[d],d)) + ',0)' })
160 .transition().duration(250)
161 .style('stroke-opacity', 1)
162 .style('fill-opacity', 1);
164 if (!index.length) return;
166 hoverEnter.append('line')
168 .attr('y1', -margin.top)
170 .attr('y2', availableHeight);
173 hoverEnter.append('text').attr('class', 'nv-xValue')
175 .attr('y', -margin.top)
176 .attr('text-anchor', 'end')
180 g.select('.nv-hoverValue .nv-xValue')
181 .text(xTickFormat(sparkline.x()(data[index[0]], index[0])));
183 hoverEnter.append('text').attr('class', 'nv-yValue')
185 .attr('y', -margin.top)
186 .attr('text-anchor', 'start')
189 g.select('.nv-hoverValue .nv-yValue')
190 .text(yTickFormat(sparkline.y()(data[index[0]], index[0])));
195 function sparklineHover() {
198 var pos = d3.mouse(this)[0] - margin.left;
200 function getClosestIndex(data, x) {
201 var distance = Math.abs(sparkline.x()(data[0], 0) - x);
202 var closestIndex = 0;
203 for (var i = 0; i < data.length; i++){
204 if (Math.abs(sparkline.x()(data[i], i) - x) < distance) {
205 distance = Math.abs(sparkline.x()(data[i], i) - x);
212 index = [getClosestIndex(data, Math.round(x.invert(pos)))];
223 //============================================================
224 // Expose Public Variables
225 //------------------------------------------------------------
227 // expose chart's sub-components
228 chart.sparkline = sparkline;
230 d3.rebind(chart, sparkline, 'x', 'y', 'xScale', 'yScale', 'color');
232 chart.options = nv.utils.optionsFunc.bind(chart);
234 chart.margin = function(_) {
235 if (!arguments.length) return margin;
236 margin.top = typeof _.top != 'undefined' ? _.top : margin.top;
237 margin.right = typeof _.right != 'undefined' ? _.right : margin.right;
238 margin.bottom = typeof _.bottom != 'undefined' ? _.bottom : margin.bottom;
239 margin.left = typeof _.left != 'undefined' ? _.left : margin.left;
243 chart.width = function(_) {
244 if (!arguments.length) return width;
249 chart.height = function(_) {
250 if (!arguments.length) return height;
255 chart.xTickFormat = function(_) {
256 if (!arguments.length) return xTickFormat;
261 chart.yTickFormat = function(_) {
262 if (!arguments.length) return yTickFormat;
267 chart.showValue = function(_) {
268 if (!arguments.length) return showValue;
273 chart.alignValue = function(_) {
274 if (!arguments.length) return alignValue;
279 chart.rightAlignValue = function(_) {
280 if (!arguments.length) return rightAlignValue;
285 chart.noData = function(_) {
286 if (!arguments.length) return noData;
291 //============================================================