blob42/nvd3
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Issue #68 updated sparklinePlus model to standard format, still needs refactoring

Browse Source
This commit is contained in:
Bob Monteverde 2012-08-21 19:44:50 -04:00
parent f7e07a8db8
commit c9a92269f4
5 changed files with 168 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
examples/sparklinePlus.html
View File

@ -13,7 +13,7 @@ text {
}
#chart1 {
width: 400px;
width: 500px;
height: 50px;
}
@ -29,12 +29,11 @@ text {
<script src="../src/models/sparklinePlus.js"></script>
<script>
//Format A
nv.addGraph({
generate: function() {
var chart = nv.models.sparklinePlus()
.width(400)
.height(50)
//.width(400)
//.height(50)
d3.select("#chart1")
.datum(sine())

140
nv.d3.js
View File

@ -8593,6 +8593,18 @@ nv.models.sparkline = function() {
return chart;
};
chart.xScale = function(_) {
if (!arguments.length) return x;
x = _;
return chart;
};
chart.yScale = function(_) {
if (!arguments.length) return y;
y = _;
return chart;
};
chart.xDomain = function(_) {
if (!arguments.length) return xDomain;
xDomain = _;
@ -8624,33 +8636,41 @@ nv.models.sparkline = function() {
}
nv.models.sparklinePlus = function() {
var margin = {top: 15, right: 40, bottom: 3, left: 40},
width = 400,
height = 50,
animate = true,
getX = function(d) { return d.x },
getY = function(d) { return d.y },
color = nv.utils.defaultColor(),
id = Math.floor(Math.random() * 100000), //Create semi-unique ID incase user doesn't selet one
xTickFormat = d3.format(',r'),
yTickFormat = d3.format(',.2f'),
noData = "No Data Available."
;
var x = d3.scale.linear(),
y = d3.scale.linear(),
sparkline = nv.models.sparkline();
//============================================================
// Public Variables with Default Settings
//------------------------------------------------------------
var sparkline = nv.models.sparkline();
var margin = {top: 15, right: 40, bottom: 3, left: 40}
, width = null
, height = null
, x
, y
, color = nv.utils.defaultColor()
, xTickFormat = d3.format(',r')
, yTickFormat = d3.format(',.2f')
, noData = "No Data Available."
;
//============================================================
function chart(selection) {
selection.each(function(data) {
var availableWidth = width - margin.left - margin.right,
availableHeight = height - margin.top - margin.bottom;
var container = d3.select(this);
var availableWidth = (width || parseInt(container.style('width')) || 960)
- margin.left - margin.right,
availableHeight = (height || parseInt(container.style('height')) || 400)
- margin.top - margin.bottom;
//------------------------------------------------------------
// Display No Data message if there's nothing to show.
if (!data || !data.length || !data.filter(function(d) { return d.values.length }).length) {
if (!data || !data.length) {
container.append('text')
.attr('class', 'nvd3 nv-noData')
.attr('x', availableWidth / 2)
@ -8667,32 +8687,41 @@ nv.models.sparklinePlus = function() {
x .domain(d3.extent(data, getX ))
.range([0, availableWidth]);
//------------------------------------------------------------
// Setup Scales
y .domain(d3.extent(data, getY ))
.range([availableHeight, 0]);
x = sparkline.xScale();
y = sparkline.yScale();
//------------------------------------------------------------
var wrap = d3.select(this).selectAll('g.nv-wrap.nv-sparklineplus').data([data]);
//------------------------------------------------------------
// Setup containers and skeleton of chart
var wrap = container.selectAll('g.nv-wrap.nv-sparklineplus').data([data]);
var gEnter = wrap.enter().append('g')
//var gEnter = svg.enter().append('svg').append('g');
var sparklineWrap = gEnter.append('g').attr('class', 'nvd3 nv-wrap nv-sparklineplus')
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
.style('stroke', function(d, i){ return d.color || color(d, i) });
sparkline
.xDomain(x.domain())
.yDomain(y.domain());
//------------------------------------------------------------
//------------------------------------------------------------
// Main Chart Component(s)
sparkline
.width(availableWidth)
.height(availableHeight)
sparklineWrap
//.attr('width', width)
//.attr('height', height)
.call(sparkline);
//------------------------------------------------------------
var hoverValue = sparklineWrap.append('g').attr('class', 'nv-hoverValue');
var hoverArea = sparklineWrap.append('g').attr('class', 'nv-hoverArea');
@ -8703,13 +8732,13 @@ nv.models.sparklinePlus = function() {
.attr('x1', x.range()[1])
.attr('y1', -margin.top)
.attr('x2', x.range()[1])
.attr('y2', height)
.attr('y2', availableHeight)
var hoverX = hoverValue.append('text').attr('class', 'nv-xValue')
var hoverX = hoverValue.append('text').attr('class', 'nv-xValue')
.attr('text-anchor', 'end')
.attr('dy', '.9em')
var hoverY = hoverValue.append('text').attr('class', 'nv-yValue')
var hoverY = hoverValue.append('text').attr('class', 'nv-yValue')
//.attr('transform', function(d) { return 'translate(' + x(d) + ',0)' })
.attr('text-anchor', 'start')
.attr('dy', '.9em')
@ -8734,11 +8763,11 @@ nv.models.sparklinePlus = function() {
//.text(xTickFormat(pos));
.text(xTickFormat(Math.round(x.invert(pos)))); //TODO: refactor this line
var f = function(data, x){
var distance = Math.abs(getX(data[0]) - x) ;
var distance = Math.abs(sparkline.x()(data[0]) - x) ;
var closestIndex = 0;
for (var i = 0; i < data.length; i++){
if (Math.abs(getX(data[i]) - x) < distance) {
distance = Math.abs(getX(data[i]) -x);
if (Math.abs(sparkline.x()(data[i]) - x) < distance) {
distance = Math.abs(sparkline.x()(data[i]) -x);
closestIndex = i;
}
}
@ -8748,7 +8777,7 @@ nv.models.sparklinePlus = function() {
hoverY
.attr('transform', function(d) { return 'translate(' + (pos + 6) + ',' + (-margin.top) + ')' })
//.text(data[pos] && yTickFormat(data[pos].y));
.text(yTickFormat(getY(data[f(data, Math.round(x.invert(pos)))]))); //TODO: refactor this line
.text(yTickFormat(sparkline.y()(data[f(data, Math.round(x.invert(pos)))]))); //TODO: refactor this line
}
});
@ -8757,6 +8786,15 @@ nv.models.sparklinePlus = function() {
}
//============================================================
// Expose Public Variables
//------------------------------------------------------------
// expose chart's sub-components
chart.sparkline = sparkline;
d3.rebind(chart, sparkline, 'x', 'y', 'xScale', 'yScale');
chart.margin = function(_) {
if (!arguments.length) return margin;
margin = _;
@ -8766,40 +8804,24 @@ nv.models.sparklinePlus = function() {
chart.width = function(_) {
if (!arguments.length) return width;
width = _;
sparkline.width(_ - margin.left - margin.right);
return chart;
};
chart.height = function(_) {
if (!arguments.length) return height;
height = _;
sparkline.height(_ - margin.top - margin.bottom);
return chart;
};
chart.x = function(_) {
if (!arguments.length) return getX;
getX = d3.functor(_);
sparkline.x(_);
chart.xTickFormat = function(_) {
if (!arguments.length) return xTickFormat;
xTickFormat = _;
return chart;
};
chart.y = function(_) {
if (!arguments.length) return getY;
getY = d3.functor(_);
sparkline.y(_);
return chart;
};
chart.id = function(_) {
if (!arguments.length) return id;
id = _;
return chart;
};
chart.animate = function(_) {
if (!arguments.length) return animate;
animate = _;
chart.yTickFormat = function(_) {
if (!arguments.length) return yTickFormat;
yTickFormat = _;
return chart;
};
@ -8809,6 +8831,8 @@ nv.models.sparklinePlus = function() {
return chart;
};
//============================================================
return chart;
}

2
nv.d3.min.js vendored
View File

File diff suppressed because one or more lines are too long

12
src/models/sparkline.js
View File

@ -116,6 +116,18 @@ nv.models.sparkline = function() {
return chart;
};
chart.xScale = function(_) {
if (!arguments.length) return x;
x = _;
return chart;
};
chart.yScale = function(_) {
if (!arguments.length) return y;
y = _;
return chart;
};
chart.xDomain = function(_) {
if (!arguments.length) return xDomain;
xDomain = _;

128
src/models/sparklinePlus.js
View File

@ -1,32 +1,40 @@
nv.models.sparklinePlus = function() {
var margin = {top: 15, right: 40, bottom: 3, left: 40},
width = 400,
height = 50,
animate = true,
getX = function(d) { return d.x },
getY = function(d) { return d.y },
color = nv.utils.defaultColor(),
id = Math.floor(Math.random() * 100000), //Create semi-unique ID incase user doesn't selet one
xTickFormat = d3.format(',r'),
yTickFormat = d3.format(',.2f'),
noData = "No Data Available."
;
var x = d3.scale.linear(),
y = d3.scale.linear(),
sparkline = nv.models.sparkline();
//============================================================
// Public Variables with Default Settings
//------------------------------------------------------------
var sparkline = nv.models.sparkline();
var margin = {top: 15, right: 40, bottom: 3, left: 40}
, width = null
, height = null
, x
, y
, color = nv.utils.defaultColor()
, xTickFormat = d3.format(',r')
, yTickFormat = d3.format(',.2f')
, noData = "No Data Available."
;
//============================================================
function chart(selection) {
selection.each(function(data) {
var availableWidth = width - margin.left - margin.right,
availableHeight = height - margin.top - margin.bottom;
var container = d3.select(this);
var availableWidth = (width || parseInt(container.style('width')) || 960)
- margin.left - margin.right,
availableHeight = (height || parseInt(container.style('height')) || 400)
- margin.top - margin.bottom;
//------------------------------------------------------------
// Display No Data message if there's nothing to show.
if (!data || !data.length || !data.filter(function(d) { return d.values.length }).length) {
if (!data || !data.length) {
container.append('text')
.attr('class', 'nvd3 nv-noData')
.attr('x', availableWidth / 2)
@ -43,32 +51,41 @@ nv.models.sparklinePlus = function() {
x .domain(d3.extent(data, getX ))
.range([0, availableWidth]);
//------------------------------------------------------------
// Setup Scales
y .domain(d3.extent(data, getY ))
.range([availableHeight, 0]);
x = sparkline.xScale();
y = sparkline.yScale();
//------------------------------------------------------------
var wrap = d3.select(this).selectAll('g.nv-wrap.nv-sparklineplus').data([data]);
//------------------------------------------------------------
// Setup containers and skeleton of chart
var wrap = container.selectAll('g.nv-wrap.nv-sparklineplus').data([data]);
var gEnter = wrap.enter().append('g')
//var gEnter = svg.enter().append('svg').append('g');
var sparklineWrap = gEnter.append('g').attr('class', 'nvd3 nv-wrap nv-sparklineplus')
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
.style('stroke', function(d, i){ return d.color || color(d, i) });
sparkline
.xDomain(x.domain())
.yDomain(y.domain());
//------------------------------------------------------------
//------------------------------------------------------------
// Main Chart Component(s)
sparkline
.width(availableWidth)
.height(availableHeight)
sparklineWrap
//.attr('width', width)
//.attr('height', height)
.call(sparkline);
//------------------------------------------------------------
var hoverValue = sparklineWrap.append('g').attr('class', 'nv-hoverValue');
var hoverArea = sparklineWrap.append('g').attr('class', 'nv-hoverArea');
@ -79,13 +96,13 @@ nv.models.sparklinePlus = function() {
.attr('x1', x.range()[1])
.attr('y1', -margin.top)
.attr('x2', x.range()[1])
.attr('y2', height)
.attr('y2', availableHeight)
var hoverX = hoverValue.append('text').attr('class', 'nv-xValue')
var hoverX = hoverValue.append('text').attr('class', 'nv-xValue')
.attr('text-anchor', 'end')
.attr('dy', '.9em')
var hoverY = hoverValue.append('text').attr('class', 'nv-yValue')
var hoverY = hoverValue.append('text').attr('class', 'nv-yValue')
//.attr('transform', function(d) { return 'translate(' + x(d) + ',0)' })
.attr('text-anchor', 'start')
.attr('dy', '.9em')
@ -110,11 +127,11 @@ nv.models.sparklinePlus = function() {
//.text(xTickFormat(pos));
.text(xTickFormat(Math.round(x.invert(pos)))); //TODO: refactor this line
var f = function(data, x){
var distance = Math.abs(getX(data[0]) - x) ;
var distance = Math.abs(sparkline.x()(data[0]) - x) ;
var closestIndex = 0;
for (var i = 0; i < data.length; i++){
if (Math.abs(getX(data[i]) - x) < distance) {
distance = Math.abs(getX(data[i]) -x);
if (Math.abs(sparkline.x()(data[i]) - x) < distance) {
distance = Math.abs(sparkline.x()(data[i]) -x);
closestIndex = i;
}
}
@ -124,7 +141,7 @@ nv.models.sparklinePlus = function() {
hoverY
.attr('transform', function(d) { return 'translate(' + (pos + 6) + ',' + (-margin.top) + ')' })
//.text(data[pos] && yTickFormat(data[pos].y));
.text(yTickFormat(getY(data[f(data, Math.round(x.invert(pos)))]))); //TODO: refactor this line
.text(yTickFormat(sparkline.y()(data[f(data, Math.round(x.invert(pos)))]))); //TODO: refactor this line
}
});
@ -133,6 +150,15 @@ nv.models.sparklinePlus = function() {
}
//============================================================
// Expose Public Variables
//------------------------------------------------------------
// expose chart's sub-components
chart.sparkline = sparkline;
d3.rebind(chart, sparkline, 'x', 'y', 'xScale', 'yScale');
chart.margin = function(_) {
if (!arguments.length) return margin;
margin = _;
@ -142,40 +168,24 @@ nv.models.sparklinePlus = function() {
chart.width = function(_) {
if (!arguments.length) return width;
width = _;
sparkline.width(_ - margin.left - margin.right);
return chart;
};
chart.height = function(_) {
if (!arguments.length) return height;
height = _;
sparkline.height(_ - margin.top - margin.bottom);
return chart;
};
chart.x = function(_) {
if (!arguments.length) return getX;
getX = d3.functor(_);
sparkline.x(_);
chart.xTickFormat = function(_) {
if (!arguments.length) return xTickFormat;
xTickFormat = _;
return chart;
};
chart.y = function(_) {
if (!arguments.length) return getY;
getY = d3.functor(_);
sparkline.y(_);
return chart;
};
chart.id = function(_) {
if (!arguments.length) return id;
id = _;
return chart;
};
chart.animate = function(_) {
if (!arguments.length) return animate;
animate = _;
chart.yTickFormat = function(_) {
if (!arguments.length) return yTickFormat;
yTickFormat = _;
return chart;
};
@ -185,6 +195,8 @@ nv.models.sparklinePlus = function() {
return chart;
};
//============================================================
return chart;
}