|
|
|
|
|
|
|
nv.models.sparkline = function() {
|
|
|
|
|
|
|
|
//============================================================
|
|
|
|
// Public Variables with Default Settings
|
|
|
|
//------------------------------------------------------------
|
|
|
|
|
|
|
|
var margin = {top: 2, right: 0, bottom: 2, left: 0}
|
|
|
|
, width = 400
|
|
|
|
, height = 32
|
|
|
|
, animate = true
|
|
|
|
, x = d3.scale.linear()
|
|
|
|
, y = d3.scale.linear()
|
|
|
|
, getX = function(d) { return d.x }
|
|
|
|
, getY = function(d) { return d.y }
|
|
|
|
, color = nv.utils.getColor(['#000'])
|
|
|
|
, xDomain
|
|
|
|
, yDomain
|
|
|
|
;
|
|
|
|
|
|
|
|
//============================================================
|
|
|
|
|
|
|
|
|
|
|
|
function chart(selection) {
|
|
|
|
selection.each(function(data) {
|
|
|
|
var availableWidth = width - margin.left - margin.right,
|
|
|
|
availableHeight = height - margin.top - margin.bottom,
|
|
|
|
container = d3.select(this);
|
|
|
|
|
|
|
|
|
|
|
|
//------------------------------------------------------------
|
|
|
|
// Setup Scales
|
|
|
|
|
|
|
|
x .domain(xDomain || d3.extent(data, getX ))
|
|
|
|
.range([0, availableWidth]);
|
|
|
|
|
|
|
|
y .domain(yDomain || d3.extent(data, getY ))
|
|
|
|
.range([availableHeight, 0]);
|
|
|
|
|
|
|
|
//------------------------------------------------------------
|
|
|
|
|
|
|
|
|
|
|
|
//------------------------------------------------------------
|
|
|
|
// Setup containers and skeleton of chart
|
|
|
|
|
|
|
|
var wrap = container.selectAll('g.nv-wrap.nv-sparkline').data([data]);
|
|
|
|
var wrapEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-sparkline');
|
|
|
|
var gEnter = wrapEnter.append('g');
|
|
|
|
var g = wrap.select('g');
|
|
|
|
|
|
|
|
wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
|
|
|
|
|
|
|
|
//------------------------------------------------------------
|
|
|
|
|
|
|
|
|
|
|
|
var paths = wrap.selectAll('path')
|
|
|
|
.data(function(d) { return [d] });
|
|
|
|
paths.enter().append('path');
|
|
|
|
paths.exit().remove();
|
|
|
|
paths
|
|
|
|
.style('stroke', function(d,i) { return d.color || color(d, i) })
|
|
|
|
.attr('d', d3.svg.line()
|
|
|
|
.x(function(d,i) { return x(getX(d,i)) })
|
|
|
|
.y(function(d,i) { return y(getY(d,i)) })
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
|
|
// TODO: Add CURRENT data point (Need Min, Mac, Current / Most recent)
|
|
|
|
var points = wrap.selectAll('circle.nv-point')
|
|
|
|
.data(function(data) {
|
|
|
|
var yValues = data.map(function(d, i) { return getY(d,i); });
|
|
|
|
function pointIndex(index) {
|
|
|
|
if (index != -1) {
|
|
|
|
var result = data[index];
|
|
|
|
result.pointIndex = index;
|
|
|
|
return result;
|
|
|
|
} else {
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
var maxPoint = pointIndex(yValues.lastIndexOf(y.domain()[1])),
|
|
|
|
minPoint = pointIndex(yValues.indexOf(y.domain()[0])),
|
|
|
|
currentPoint = pointIndex(yValues.length - 1);
|
|
|
|
return [minPoint, maxPoint, currentPoint].filter(function (d) {return d != null;});
|
|
|
|
});
|
|
|
|
points.enter().append('circle');
|
|
|
|
points.exit().remove();
|
|
|
|
points
|
|
|
|
.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)
|
|
|
|
.attr('class', function(d,i) {
|
|
|
|
return getX(d, d.pointIndex) == x.domain()[1] ? 'nv-point nv-currentValue' :
|
|
|
|
getY(d, d.pointIndex) == y.domain()[0] ? 'nv-point nv-minValue' : 'nv-point nv-maxValue'
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
return chart;
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
//============================================================
|
|
|
|
// Expose Public Variables
|
|
|
|
//------------------------------------------------------------
|
|
|
|
|
|
|
|
chart.margin = function(_) {
|
|
|
|
if (!arguments.length) return margin;
|
|
|
|
margin.top = typeof _.top != 'undefined' ? _.top : margin.top;
|
|
|
|
margin.right = typeof _.right != 'undefined' ? _.right : margin.right;
|
|
|
|
margin.bottom = typeof _.bottom != 'undefined' ? _.bottom : margin.bottom;
|
|
|
|
margin.left = typeof _.left != 'undefined' ? _.left : margin.left;
|
|
|
|
return chart;
|
|
|
|
};
|
|
|
|
|
|
|
|
chart.width = function(_) {
|
|
|
|
if (!arguments.length) return width;
|
|
|
|
width = _;
|
|
|
|
return chart;
|
|
|
|
};
|
|
|
|
|
|
|
|
chart.height = function(_) {
|
|
|
|
if (!arguments.length) return height;
|
|
|
|
height = _;
|
|
|
|
return chart;
|
|
|
|
};
|
|
|
|
|
|
|
|
chart.x = function(_) {
|
|
|
|
if (!arguments.length) return getX;
|
|
|
|
getX = d3.functor(_);
|
|
|
|
return chart;
|
|
|
|
};
|
|
|
|
|
|
|
|
chart.y = function(_) {
|
|
|
|
if (!arguments.length) return getY;
|
|
|
|
getY = d3.functor(_);
|
|
|
|
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 = _;
|
|
|
|
return chart;
|
|
|
|
};
|
|
|
|
|
|
|
|
chart.yDomain = function(_) {
|
|
|
|
if (!arguments.length) return yDomain;
|
|
|
|
yDomain = _;
|
|
|
|
return chart;
|
|
|
|
};
|
|
|
|
|
|
|
|
chart.animate = function(_) {
|
|
|
|
if (!arguments.length) return animate;
|
|
|
|
animate = _;
|
|
|
|
return chart;
|
|
|
|
};
|
|
|
|
|
|
|
|
chart.color = function(_) {
|
|
|
|
if (!arguments.length) return color;
|
|
|
|
color = nv.utils.getColor(_);
|
|
|
|
return chart;
|
|
|
|
};
|
|
|
|
|
|
|
|
//============================================================
|
|
|
|
|
|
|
|
|
|
|
|
return chart;
|
|
|
|
}
|