Stage one of major code cleanup / consistency check
This commit is contained in:
Bob Monteverde
parent
5beda82c05
commit
ab80bda59c
@ -1,5 +1,10 @@
|
||||
|
||||
nv.models.cumulativeLineChart = function() {
|
||||
|
||||
//============================================================
|
||||
// Public Variables with Default Settings
|
||||
//------------------------------------------------------------
|
||||
|
||||
var margin = {top: 30, right: 20, bottom: 50, left: 60},
|
||||
color = d3.scale.category20().range(),
|
||||
width = null,
|
||||
@ -7,19 +12,23 @@ nv.models.cumulativeLineChart = function() {
|
||||
showLegend = true,
|
||||
tooltips = true,
|
||||
showRescaleToggle = false, //TODO: get rescale y functionality back (need to calculate exten of y for ALL possible re-zero points
|
||||
rescaleY = true;
|
||||
tooltip = function(key, x, y, e, graph) {
|
||||
rescaleY = true,
|
||||
tooltip = function(key, x, y, e, graph) {
|
||||
return '<h3>' + key + '</h3>' +
|
||||
'<p>' + y + ' at ' + x + '</p>'
|
||||
};
|
||||
},
|
||||
x, y; //can be accessed via chart.lines.[x/y]Scale()
|
||||
|
||||
|
||||
//============================================================
|
||||
// Private Variables
|
||||
//------------------------------------------------------------
|
||||
|
||||
var lines = nv.models.line(),
|
||||
x = lines.xScale(),
|
||||
y = lines.yScale(),
|
||||
dx = d3.scale.linear(),
|
||||
id = lines.id(),
|
||||
xAxis = nv.models.axis().scale(x).orient('bottom').tickPadding(5),
|
||||
yAxis = nv.models.axis().scale(y).orient('left'),
|
||||
xAxis = nv.models.axis().orient('bottom').tickPadding(5),
|
||||
yAxis = nv.models.axis().orient('left'),
|
||||
legend = nv.models.legend().height(30),
|
||||
controls = nv.models.legend().height(30),
|
||||
dispatch = d3.dispatch('tooltipShow', 'tooltipHide'),
|
||||
@ -31,11 +40,6 @@ nv.models.cumulativeLineChart = function() {
|
||||
];
|
||||
|
||||
var showTooltip = function(e, offsetElement) {
|
||||
//console.log('left: ' + offsetElement.offsetLeft);
|
||||
//console.log('top: ' + offsetElement.offsetLeft);
|
||||
|
||||
//TODO: FIX offsetLeft and offSet top do not work if container is shifted anywhere
|
||||
//var offsetElement = document.getElementById(selector.substr(1)),
|
||||
var left = e.pos[0] + ( offsetElement.offsetLeft || 0 ),
|
||||
top = e.pos[1] + ( offsetElement.offsetTop || 0),
|
||||
x = xAxis.tickFormat()(lines.x()(e.point)),
|
||||
@ -79,14 +83,16 @@ nv.models.cumulativeLineChart = function() {
|
||||
- margin.top - margin.bottom;
|
||||
|
||||
|
||||
var data = indexify(index.i, data);
|
||||
|
||||
x = lines.xScale();
|
||||
y = lines.yScale();
|
||||
|
||||
dx .domain([0, data[0].values.length - 1]) //Assumes all series have same length
|
||||
.range([0, availableWidth])
|
||||
.clamp(true);
|
||||
|
||||
|
||||
var data = indexify(index.i, data);
|
||||
|
||||
|
||||
var wrap = container.selectAll('g.wrap.cumulativeLine').data([data]);
|
||||
var gEnter = wrap.enter().append('g').attr('class', 'wrap nvd3 cumulativeLine').append('g');
|
||||
@ -101,8 +107,6 @@ nv.models.cumulativeLineChart = function() {
|
||||
var g = wrap.select('g');
|
||||
|
||||
|
||||
|
||||
|
||||
if (showLegend) {
|
||||
legend.width(availableWidth);
|
||||
|
||||
@ -167,6 +171,7 @@ nv.models.cumulativeLineChart = function() {
|
||||
|
||||
|
||||
xAxis
|
||||
.scale(x)
|
||||
.ticks( availableWidth / 100 )
|
||||
.tickSize(-availableHeight, 0);
|
||||
|
||||
@ -177,6 +182,7 @@ nv.models.cumulativeLineChart = function() {
|
||||
|
||||
|
||||
yAxis
|
||||
.scale(y)
|
||||
.ticks( availableHeight / 36 )
|
||||
.tickSize( -availableWidth, 0);
|
||||
|
||||
@ -184,6 +190,11 @@ nv.models.cumulativeLineChart = function() {
|
||||
.call(yAxis);
|
||||
|
||||
|
||||
|
||||
//============================================================
|
||||
// Event Handling/Dispatching (in chart's scope)
|
||||
//------------------------------------------------------------
|
||||
|
||||
controls.dispatch.on('legendClick', function(d,i) {
|
||||
d.disabled = !d.disabled;
|
||||
rescaleY = !d.disabled;
|
||||
@ -221,16 +232,10 @@ nv.models.cumulativeLineChart = function() {
|
||||
});
|
||||
*/
|
||||
|
||||
lines.dispatch.on('elementMouseover.tooltip', function(e) {
|
||||
e.pos = [e.pos[0] + margin.left, e.pos[1] + margin.top];
|
||||
dispatch.tooltipShow(e);
|
||||
dispatch.on('tooltipShow', function(e) {
|
||||
if (tooltips) showTooltip(e, that.parentNode);
|
||||
});
|
||||
if (tooltips) dispatch.on('tooltipShow', function(e) { showTooltip(e, that.parentNode) } ); // TODO: maybe merge with above?
|
||||
|
||||
lines.dispatch.on('elementMouseout.tooltip', function(e) {
|
||||
dispatch.tooltipHide(e);
|
||||
});
|
||||
if (tooltips) dispatch.on('tooltipHide', nv.tooltip.cleanup);
|
||||
|
||||
});
|
||||
|
||||
@ -244,6 +249,28 @@ nv.models.cumulativeLineChart = function() {
|
||||
}
|
||||
|
||||
|
||||
//============================================================
|
||||
// Event Handling/Dispatching (out of chart's scope)
|
||||
//------------------------------------------------------------
|
||||
|
||||
lines.dispatch.on('elementMouseover.tooltip', function(e) {
|
||||
e.pos = [e.pos[0] + margin.left, e.pos[1] + margin.top];
|
||||
dispatch.tooltipShow(e);
|
||||
});
|
||||
|
||||
lines.dispatch.on('elementMouseout.tooltip', function(e) {
|
||||
dispatch.tooltipHide(e);
|
||||
});
|
||||
|
||||
dispatch.on('tooltipHide', function() {
|
||||
if (tooltips) nv.tooltip.cleanup();
|
||||
});
|
||||
|
||||
|
||||
//============================================================
|
||||
// Global getters and setters
|
||||
//------------------------------------------------------------
|
||||
|
||||
chart.dispatch = dispatch;
|
||||
chart.legend = legend;
|
||||
chart.xAxis = xAxis;
|
||||
@ -297,7 +324,10 @@ nv.models.cumulativeLineChart = function() {
|
||||
|
||||
|
||||
|
||||
// ********** FUNCTIONS **********
|
||||
|
||||
//============================================================
|
||||
// Functions
|
||||
//------------------------------------------------------------
|
||||
|
||||
/* Normalize the data according to an index point. */
|
||||
function indexify(idx, data) {
|
||||
@ -318,6 +348,5 @@ nv.models.cumulativeLineChart = function() {
|
||||
}
|
||||
|
||||
|
||||
|
||||
return chart;
|
||||
}
|
||||
|
||||
@ -1,6 +1,10 @@
|
||||
|
||||
nv.models.line = function() {
|
||||
//Default Settings
|
||||
|
||||
//============================================================
|
||||
// Public Variables with Default Settings
|
||||
//------------------------------------------------------------
|
||||
|
||||
var margin = {top: 0, right: 0, bottom: 0, left: 0},
|
||||
width = 960,
|
||||
height = 500,
|
||||
@ -8,31 +12,36 @@ nv.models.line = function() {
|
||||
id = Math.floor(Math.random() * 10000), //Create semi-unique ID incase user doesn't select one
|
||||
getX = function(d) { return d.x }, // accessor to get the x value from a data point
|
||||
getY = function(d) { return d.y }, // accessor to get the y value from a data point
|
||||
clipEdge = false; // if true, masks lines within x and y scale
|
||||
clipEdge = false, // if true, masks lines within x and y scale
|
||||
x, y; //can be accessed via chart.scatter.[x/y]Scale()
|
||||
|
||||
|
||||
//============================================================
|
||||
// Private Variables
|
||||
//------------------------------------------------------------
|
||||
|
||||
var scatter = nv.models.scatter()
|
||||
.id(id)
|
||||
.size(16) // default size
|
||||
.sizeDomain([16,256]), //set to speed up calculation, needs to be unset if there is a cstom size accessor
|
||||
x, y, x0, y0,
|
||||
x0, y0,
|
||||
timeoutID;
|
||||
|
||||
|
||||
function chart(selection) {
|
||||
selection.each(function(data) {
|
||||
var availableWidth = width - margin.left - margin.right,
|
||||
availableHeight = height - margin.top - margin.bottom;
|
||||
availableHeight = height - margin.top - margin.bottom,
|
||||
container = d3.select(this);
|
||||
|
||||
//scales need to be set here incase a custom scale was set
|
||||
x = x || scatter.xScale();
|
||||
y = y || scatter.yScale();
|
||||
x = scatter.xScale();
|
||||
y = scatter.yScale();
|
||||
|
||||
x0 = x0 || x;
|
||||
y0 = y0 || y;
|
||||
|
||||
|
||||
var wrap = d3.select(this).selectAll('g.wrap.line').data([data]);
|
||||
var wrap = container.selectAll('g.wrap.line').data([data]);
|
||||
var wrapEnter = wrap.enter().append('g').attr('class', 'wrap nvd3 line');
|
||||
var defsEnter = wrapEnter.append('defs');
|
||||
var gEnter = wrapEnter.append('g');
|
||||
@ -83,10 +92,10 @@ nv.models.line = function() {
|
||||
.attr('class', function(d,i) { return 'group series-' + i })
|
||||
.classed('hover', function(d) { return d.hover })
|
||||
.style('fill', function(d,i){ return color[i % color.length] })
|
||||
.style('stroke', function(d,i){ return color[i % color.length] })
|
||||
.style('stroke', function(d,i){ return color[i % color.length] });
|
||||
d3.transition(groups)
|
||||
.style('stroke-opacity', 1)
|
||||
.style('fill-opacity', .5)
|
||||
.style('fill-opacity', .5);
|
||||
|
||||
|
||||
var paths = groups.selectAll('path')
|
||||
@ -109,7 +118,7 @@ nv.models.line = function() {
|
||||
);
|
||||
|
||||
|
||||
//store old scales for use in transitions on update, to animate from old to new positions
|
||||
//store old scales for use in transitions on update
|
||||
x0 = x.copy();
|
||||
y0 = y.copy();
|
||||
|
||||
@ -119,6 +128,10 @@ nv.models.line = function() {
|
||||
}
|
||||
|
||||
|
||||
//============================================================
|
||||
// Global getters and setters
|
||||
//------------------------------------------------------------
|
||||
|
||||
chart.dispatch = scatter.dispatch;
|
||||
|
||||
d3.rebind(chart, scatter, 'interactive', 'size', 'xScale', 'yScale', 'zScale', 'xDomain', 'yDomain', 'sizeDomain', 'forceX', 'forceY', 'forceSize', 'clipVoronoi', 'clipRadius');
|
||||
|
||||
@ -1,5 +1,10 @@
|
||||
|
||||
nv.models.lineChart = function() {
|
||||
|
||||
//============================================================
|
||||
// Public Variables with Default Settings
|
||||
//------------------------------------------------------------
|
||||
|
||||
var margin = {top: 30, right: 20, bottom: 50, left: 60},
|
||||
color = d3.scale.category20().range(),
|
||||
width = null,
|
||||
@ -9,17 +14,20 @@ nv.models.lineChart = function() {
|
||||
tooltip = function(key, x, y, e, graph) {
|
||||
return '<h3>' + key + '</h3>' +
|
||||
'<p>' + y + ' at ' + x + '</p>'
|
||||
};
|
||||
},
|
||||
x, y; //can be accessed via chart.lines.[x/y]Scale()
|
||||
|
||||
|
||||
//============================================================
|
||||
// Private Variables
|
||||
//------------------------------------------------------------
|
||||
|
||||
var lines = nv.models.line(),
|
||||
x = lines.xScale(),
|
||||
y = lines.yScale(),
|
||||
xAxis = nv.models.axis().scale(x).orient('bottom').tickPadding(5),
|
||||
yAxis = nv.models.axis().scale(y).orient('left'),
|
||||
xAxis = nv.models.axis().orient('bottom').tickPadding(5),
|
||||
yAxis = nv.models.axis().orient('left'),
|
||||
legend = nv.models.legend().height(30),
|
||||
dispatch = d3.dispatch('tooltipShow', 'tooltipHide');
|
||||
|
||||
|
||||
var showTooltip = function(e, offsetElement) {
|
||||
var left = e.pos[0] + ( offsetElement.offsetLeft || 0 ),
|
||||
top = e.pos[1] + ( offsetElement.offsetTop || 0),
|
||||
@ -41,6 +49,8 @@ nv.models.lineChart = function() {
|
||||
availableHeight = (height || parseInt(container.style('height')) || 400)
|
||||
- margin.top - margin.bottom;
|
||||
|
||||
x = lines.xScale();
|
||||
y = lines.yScale();
|
||||
|
||||
|
||||
var wrap = container.selectAll('g.wrap.lineChart').data([data]);
|
||||
@ -95,7 +105,7 @@ nv.models.lineChart = function() {
|
||||
|
||||
|
||||
xAxis
|
||||
//.scale(x)
|
||||
.scale(x)
|
||||
.ticks( availableWidth / 100 )
|
||||
.tickSize(-availableHeight, 0);
|
||||
|
||||
@ -106,7 +116,7 @@ nv.models.lineChart = function() {
|
||||
|
||||
|
||||
yAxis
|
||||
//.scale(y)
|
||||
.scale(y)
|
||||
.ticks( availableHeight / 36 )
|
||||
.tickSize( -availableWidth, 0);
|
||||
|
||||
@ -115,6 +125,9 @@ nv.models.lineChart = function() {
|
||||
|
||||
|
||||
|
||||
//============================================================
|
||||
// Event Handling/Dispatching (in chart's scope)
|
||||
//------------------------------------------------------------
|
||||
|
||||
legend.dispatch.on('legendClick', function(d,i) {
|
||||
d.disabled = !d.disabled;
|
||||
@ -131,7 +144,6 @@ nv.models.lineChart = function() {
|
||||
});
|
||||
|
||||
/*
|
||||
//
|
||||
legend.dispatch.on('legendMouseover', function(d, i) {
|
||||
d.hover = true;
|
||||
selection.transition().call(chart)
|
||||
@ -143,16 +155,9 @@ nv.models.lineChart = function() {
|
||||
});
|
||||
*/
|
||||
|
||||
lines.dispatch.on('elementMouseover.tooltip', function(e) {
|
||||
e.pos = [e.pos[0] + margin.left, e.pos[1] + margin.top];
|
||||
dispatch.tooltipShow(e);
|
||||
dispatch.on('tooltipShow', function(e) {
|
||||
if (tooltips) showTooltip(e, that.parentNode);
|
||||
});
|
||||
if (tooltips) dispatch.on('tooltipShow', function(e) { showTooltip(e, that.parentNode) } ); // TODO: maybe merge with above?
|
||||
|
||||
lines.dispatch.on('elementMouseout.tooltip', function(e) {
|
||||
dispatch.tooltipHide(e);
|
||||
});
|
||||
if (tooltips) dispatch.on('tooltipHide', nv.tooltip.cleanup);
|
||||
|
||||
});
|
||||
|
||||
@ -161,11 +166,32 @@ nv.models.lineChart = function() {
|
||||
chart.update = function() { chart(selection) };
|
||||
chart.container = this; // I need a reference to the container in order to have outside code check if the chart is visible or not
|
||||
|
||||
|
||||
return chart;
|
||||
}
|
||||
|
||||
|
||||
//============================================================
|
||||
// Event Handling/Dispatching (out of chart's scope)
|
||||
//------------------------------------------------------------
|
||||
|
||||
lines.dispatch.on('elementMouseover.tooltip', function(e) {
|
||||
e.pos = [e.pos[0] + margin.left, e.pos[1] + margin.top];
|
||||
dispatch.tooltipShow(e);
|
||||
});
|
||||
|
||||
lines.dispatch.on('elementMouseout.tooltip', function(e) {
|
||||
dispatch.tooltipHide(e);
|
||||
});
|
||||
|
||||
dispatch.on('tooltipHide', function() {
|
||||
if (tooltips) nv.tooltip.cleanup();
|
||||
});
|
||||
|
||||
|
||||
//============================================================
|
||||
// Global getters and setters
|
||||
//------------------------------------------------------------
|
||||
|
||||
chart.dispatch = dispatch;
|
||||
chart.legend = legend;
|
||||
chart.xAxis = xAxis;
|
||||
|
||||
@ -1,6 +1,10 @@
|
||||
|
||||
nv.models.scatter = function() {
|
||||
//Default Settings
|
||||
|
||||
//============================================================
|
||||
// Public Variables with Default Settings
|
||||
//------------------------------------------------------------
|
||||
|
||||
var margin = {top: 0, right: 0, bottom: 0, left: 0},
|
||||
width = 960,
|
||||
height = 500,
|
||||
@ -23,6 +27,11 @@ nv.models.scatter = function() {
|
||||
clipRadius = function() { return 25 }, // function to get the radius for point clips
|
||||
xDomain, yDomain, sizeDomain; // Used to manually set the x and y domain, good to save time if calculation has already been made
|
||||
|
||||
|
||||
//============================================================
|
||||
// Private Variables
|
||||
//------------------------------------------------------------
|
||||
|
||||
var dispatch = d3.dispatch('elementClick', 'elementMouseover', 'elementMouseout'),
|
||||
x0, y0, z0,
|
||||
timeoutID;
|
||||
@ -30,7 +39,6 @@ nv.models.scatter = function() {
|
||||
|
||||
function chart(selection) {
|
||||
selection.each(function(data) {
|
||||
|
||||
var availableWidth = width - margin.left - margin.right,
|
||||
availableHeight = height - margin.top - margin.bottom,
|
||||
container = d3.select(this);
|
||||
@ -242,7 +250,7 @@ nv.models.scatter = function() {
|
||||
clearTimeout(timeoutID); //make sure unncesary repeat calls to updateInteractiveLayer don't occur
|
||||
timeoutID = setTimeout(updateInteractiveLayer, 1000);
|
||||
|
||||
//store old scales for use in transitions on update, to animate from old to new positions, and sizes
|
||||
//store old scales for use in transitions on update
|
||||
x0 = x.copy();
|
||||
y0 = y.copy();
|
||||
z0 = z.copy();
|
||||
@ -253,6 +261,10 @@ nv.models.scatter = function() {
|
||||
}
|
||||
|
||||
|
||||
//============================================================
|
||||
// Global getters and setters
|
||||
//------------------------------------------------------------
|
||||
|
||||
chart.dispatch = dispatch;
|
||||
|
||||
chart.x = function(_) {
|
||||
@ -375,7 +387,7 @@ nv.models.scatter = function() {
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.shape= function(_) {
|
||||
chart.shape = function(_) {
|
||||
if (!arguments.length) return getShape;
|
||||
getShape = _;
|
||||
return chart;
|
||||
|
||||
@ -1,7 +1,10 @@
|
||||
// THIS IS AN ATTEMPT TO CLEAN UP THIS MODEL
|
||||
|
||||
nv.models.stackedArea = function() {
|
||||
//Default Settings
|
||||
|
||||
//============================================================
|
||||
// Public Variables with Default Settings
|
||||
//------------------------------------------------------------
|
||||
|
||||
var margin = {top: 0, right: 0, bottom: 0, left: 0},
|
||||
width = 960,
|
||||
height = 500,
|
||||
@ -12,7 +15,8 @@ nv.models.stackedArea = function() {
|
||||
style = 'stack',
|
||||
offset = 'zero',
|
||||
order = 'default',
|
||||
clipEdge = false; // if true, masks lines within x and y scale
|
||||
clipEdge = false, // if true, masks lines within x and y scale
|
||||
x, y; //can be accessed via chart.scatter.[x/y]Scale()
|
||||
|
||||
/************************************
|
||||
* offset:
|
||||
@ -26,6 +30,11 @@ nv.models.stackedArea = function() {
|
||||
* 'default' (input order)
|
||||
************************************/
|
||||
|
||||
|
||||
//============================================================
|
||||
// Private Variables
|
||||
//------------------------------------------------------------
|
||||
|
||||
var stacked = d3.layout.stack()
|
||||
//.offset('zero')
|
||||
.values(function(d) { return d.values }) //TODO: make values customizeable in EVERY model in this fashion
|
||||
@ -39,9 +48,7 @@ nv.models.stackedArea = function() {
|
||||
}),
|
||||
scatter = nv.models.scatter()
|
||||
.size(2.2) // default size
|
||||
.sizeDomain([2.5]), //set to speed up calculation, needs to be unset if there is a cstom size accessor
|
||||
x = scatter.xScale(),
|
||||
y = scatter.yScale(),
|
||||
.sizeDomain([2.5]),
|
||||
dispatch = d3.dispatch('tooltipShow', 'tooltipHide', 'areaClick', 'areaMouseover', 'areaMouseout');
|
||||
|
||||
function chart(selection) {
|
||||
@ -49,6 +56,8 @@ nv.models.stackedArea = function() {
|
||||
var availableWidth = width - margin.left - margin.right,
|
||||
availableHeight = height - margin.top - margin.bottom;
|
||||
|
||||
x = scatter.xScale();
|
||||
y = scatter.yScale();
|
||||
|
||||
// Injecting point index into each point because d3.layout.stack().out does not give index
|
||||
// ***Also storing getY(d,i) as yStacked so that it can be set to 0 if series is disabled
|
||||
@ -97,9 +106,8 @@ nv.models.stackedArea = function() {
|
||||
scatter
|
||||
.width(availableWidth)
|
||||
.height(availableHeight)
|
||||
//.x(function(d) { return d.display.x })
|
||||
.x(getX)
|
||||
.y(function(d) { return d.display.y + d.display.y0 }) // TODO: allow for getY to be other than d.y
|
||||
.y(function(d) { return d.display.y + d.display.y0 })
|
||||
.forceY([0])
|
||||
.color(data.map(function(d,i) {
|
||||
return d.color || color[i % color.length];
|
||||
@ -114,7 +122,6 @@ nv.models.stackedArea = function() {
|
||||
|
||||
|
||||
|
||||
|
||||
wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
|
||||
|
||||
|
||||
@ -133,13 +140,11 @@ nv.models.stackedArea = function() {
|
||||
|
||||
var area = d3.svg.area()
|
||||
.x(function(d,i) { return x(getX(d,i)) })
|
||||
//.x(function(d) { return x(d.display.x) })
|
||||
.y0(function(d) { return y(d.display.y0) })
|
||||
.y1(function(d) { return y(d.display.y + d.display.y0) });
|
||||
|
||||
var zeroArea = d3.svg.area()
|
||||
.x(function(d,i) { return x(getX(d,i)) })
|
||||
//.x(function(d) { return x(d.display.x) })
|
||||
.y0(function(d) { return y(d.display.y0) })
|
||||
.y1(function(d) { return y(d.display.y0) });
|
||||
|
||||
@ -176,7 +181,7 @@ nv.models.stackedArea = function() {
|
||||
});
|
||||
})
|
||||
d3.transition(path.exit())
|
||||
.attr('d', function(d,i) { return zeroArea(d.values,i) }) // TODO: fix this so transition is still fluid
|
||||
.attr('d', function(d,i) { return zeroArea(d.values,i) })
|
||||
.remove();
|
||||
path
|
||||
.style('fill', function(d,i){ return d.color || color[i % color.length] })
|
||||
@ -185,9 +190,10 @@ nv.models.stackedArea = function() {
|
||||
.attr('d', function(d,i) { return area(d.values,i) })
|
||||
|
||||
|
||||
scatter.dispatch.on('elementClick.area', function(e) {
|
||||
dispatch.areaClick(e);
|
||||
})
|
||||
//============================================================
|
||||
// Event Handling/Dispatching (in chart's scope)
|
||||
//------------------------------------------------------------
|
||||
|
||||
scatter.dispatch.on('elementMouseover.area', function(e) {
|
||||
g.select('.area-' + e.seriesIndex).classed('hover', true);
|
||||
});
|
||||
@ -202,6 +208,27 @@ nv.models.stackedArea = function() {
|
||||
}
|
||||
|
||||
|
||||
//============================================================
|
||||
// Event Handling/Dispatching (out of chart's scope)
|
||||
//------------------------------------------------------------
|
||||
|
||||
scatter.dispatch.on('elementClick.area', function(e) {
|
||||
dispatch.areaClick(e);
|
||||
})
|
||||
scatter.dispatch.on('elementMouseover.tooltip', function(e) {
|
||||
e.pos = [e.pos[0] + margin.left, e.pos[1] + margin.top],
|
||||
dispatch.tooltipShow(e);
|
||||
});
|
||||
scatter.dispatch.on('elementMouseout.tooltip', function(e) {
|
||||
dispatch.tooltipHide(e);
|
||||
});
|
||||
|
||||
|
||||
|
||||
//============================================================
|
||||
// Global getters and setters
|
||||
//------------------------------------------------------------
|
||||
|
||||
chart.dispatch = dispatch;
|
||||
chart.scatter = scatter;
|
||||
|
||||
@ -252,14 +279,12 @@ nv.models.stackedArea = function() {
|
||||
chart.offset = function(_) {
|
||||
if (!arguments.length) return offset;
|
||||
offset = _;
|
||||
//stacked.offset(offset);
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.order = function(_) {
|
||||
if (!arguments.length) return order;
|
||||
order = _;
|
||||
//stacked.order(order);
|
||||
return chart;
|
||||
};
|
||||
|
||||
@ -287,16 +312,5 @@ nv.models.stackedArea = function() {
|
||||
};
|
||||
|
||||
|
||||
|
||||
scatter.dispatch.on('elementMouseover.tooltip', function(e) {
|
||||
e.pos = [e.pos[0] + margin.left, e.pos[1] + margin.top],
|
||||
dispatch.tooltipShow(e);
|
||||
});
|
||||
|
||||
scatter.dispatch.on('elementMouseout.tooltip', function(e) {
|
||||
dispatch.tooltipHide(e);
|
||||
});
|
||||
|
||||
|
||||
return chart;
|
||||
}
|
||||
|
||||
@ -1,5 +1,10 @@
|
||||
|
||||
nv.models.stackedAreaChart = function() {
|
||||
|
||||
//============================================================
|
||||
// Public Variables with Default Settings
|
||||
//------------------------------------------------------------
|
||||
|
||||
var margin = {top: 30, right: 25, bottom: 50, left: 60},
|
||||
width = null,
|
||||
height = null,
|
||||
@ -10,14 +15,17 @@ nv.models.stackedAreaChart = function() {
|
||||
tooltip = function(key, x, y, e, graph) {
|
||||
return '<h3>' + key + '</h3>' +
|
||||
'<p>' + y + ' on ' + x + '</p>'
|
||||
};
|
||||
},
|
||||
x, y; //can be accessed via chart.stacked.[x/y]Scale()
|
||||
|
||||
|
||||
//============================================================
|
||||
// Private Variables
|
||||
//------------------------------------------------------------
|
||||
|
||||
var stacked = nv.models.stackedArea(),
|
||||
x = stacked.xScale(),
|
||||
y = stacked.yScale(),
|
||||
xAxis = nv.models.axis().scale(x).orient('bottom').tickPadding(5),
|
||||
yAxis = nv.models.axis().scale(y).orient('left'),
|
||||
xAxis = nv.models.axis().orient('bottom').tickPadding(5),
|
||||
yAxis = nv.models.axis().orient('left'),
|
||||
legend = nv.models.legend().height(30),
|
||||
controls = nv.models.legend().height(30),
|
||||
dispatch = d3.dispatch('tooltipShow', 'tooltipHide');
|
||||
@ -45,13 +53,13 @@ nv.models.stackedAreaChart = function() {
|
||||
var container = d3.select(this),
|
||||
that = this;
|
||||
|
||||
|
||||
var availableWidth = (width || parseInt(container.style('width')) || 960)
|
||||
- margin.left - margin.right,
|
||||
availableHeight = (height || parseInt(container.style('height')) || 400)
|
||||
- margin.top - margin.bottom;
|
||||
|
||||
|
||||
x = stacked.xScale();
|
||||
y = stacked.yScale();
|
||||
|
||||
var wrap = container.selectAll('g.wrap.stackedAreaChart').data([data]);
|
||||
var gEnter = wrap.enter().append('g').attr('class', 'wrap nvd3 stackedAreaChart').append('g');
|
||||
@ -109,6 +117,7 @@ nv.models.stackedAreaChart = function() {
|
||||
|
||||
|
||||
xAxis
|
||||
.scale(x)
|
||||
.ticks( availableWidth / 100 )
|
||||
.tickSize( -availableHeight, 0);
|
||||
|
||||
@ -118,6 +127,7 @@ nv.models.stackedAreaChart = function() {
|
||||
.call(xAxis);
|
||||
|
||||
yAxis
|
||||
.scale(y)
|
||||
.ticks(stacked.offset() == 'wiggle' ? 0 : availableHeight / 36)
|
||||
.tickSize(-availableWidth, 0)
|
||||
.tickFormat(stacked.offset() == 'expand' ? d3.format('%') : d3.format(',.2f')); //TODO: stacked format should be set by caller
|
||||
@ -126,6 +136,9 @@ nv.models.stackedAreaChart = function() {
|
||||
.call(yAxis);
|
||||
|
||||
|
||||
//============================================================
|
||||
// Event Handling/Dispatching (in chart's scope)
|
||||
//------------------------------------------------------------
|
||||
|
||||
stacked.dispatch.on('areaClick.toggle', function(e) {
|
||||
if (data.filter(function(d) { return !d.disabled }).length === 1)
|
||||
@ -179,37 +192,52 @@ nv.models.stackedAreaChart = function() {
|
||||
selection.transition().call(chart);
|
||||
});
|
||||
|
||||
|
||||
stacked.dispatch.on('tooltipShow', function(e) {
|
||||
//disable tooltips when value ~= 0
|
||||
//// TODO: consider removing points from voronoi that have 0 value instead of this hack
|
||||
if (!Math.round(stacked.y()(e.point) * 100)) { // 100 will not be good for very small numbers... will have to think about making this valu dynamic, based on data range
|
||||
setTimeout(function() { d3.selectAll('.point.hover').classed('hover', false) }, 0);
|
||||
return false;
|
||||
}
|
||||
|
||||
e.pos = [e.pos[0] + margin.left, e.pos[1] + margin.top],
|
||||
dispatch.tooltipShow(e);
|
||||
dispatch.on('tooltipShow', function(e) {
|
||||
if (tooltips) showTooltip(e, that.parentNode);
|
||||
});
|
||||
if (tooltips) dispatch.on('tooltipShow', function(e) { showTooltip(e, that.parentNode) } ); // TODO: maybe merge with above?
|
||||
|
||||
stacked.dispatch.on('tooltipHide', function(e) {
|
||||
dispatch.tooltipHide(e);
|
||||
});
|
||||
if (tooltips) dispatch.on('tooltipHide', nv.tooltip.cleanup);
|
||||
|
||||
|
||||
//TODO: decide if this makes sense to add into all the models for ease of updating (updating without needing the selection)
|
||||
chart.update = function() { selection.transition().call(chart) };
|
||||
chart.container = this; // I need a reference to the container in order to have outside code check if the chart is visible or not
|
||||
|
||||
});
|
||||
|
||||
|
||||
//TODO: decide if this makes sense to add into all the models for ease of updating (updating without needing the selection)
|
||||
chart.update = function() { selection.transition().call(chart) };
|
||||
chart.container = this; // I need a reference to the container in order to have outside code check if the chart is visible or not
|
||||
|
||||
return chart;
|
||||
}
|
||||
|
||||
|
||||
|
||||
//============================================================
|
||||
// Event Handling/Dispatching (out of chart's scope)
|
||||
//------------------------------------------------------------
|
||||
|
||||
stacked.dispatch.on('tooltipShow', function(e) {
|
||||
//disable tooltips when value ~= 0
|
||||
//// TODO: consider removing points from voronoi that have 0 value instead of this hack
|
||||
if (!Math.round(stacked.y()(e.point) * 100)) { // 100 will not be good for very small numbers... will have to think about making this valu dynamic, based on data range
|
||||
setTimeout(function() { d3.selectAll('.point.hover').classed('hover', false) }, 0);
|
||||
return false;
|
||||
}
|
||||
|
||||
e.pos = [e.pos[0] + margin.left, e.pos[1] + margin.top],
|
||||
dispatch.tooltipShow(e);
|
||||
});
|
||||
|
||||
stacked.dispatch.on('tooltipHide', function(e) {
|
||||
dispatch.tooltipHide(e);
|
||||
});
|
||||
|
||||
dispatch.on('tooltipHide', function() {
|
||||
if (tooltips) nv.tooltip.cleanup();
|
||||
});
|
||||
|
||||
|
||||
|
||||
//============================================================
|
||||
// Global getters and setters
|
||||
//------------------------------------------------------------
|
||||
|
||||
chart.dispatch = dispatch;
|
||||
chart.stacked = stacked;
|
||||
chart.xAxis = xAxis;
|
||||
@ -217,22 +245,6 @@ nv.models.stackedAreaChart = function() {
|
||||
|
||||
d3.rebind(chart, stacked, 'x', 'y', 'size', 'xScale', 'yScale', 'xDomain', 'yDomain', 'sizeDomain', 'interactive', 'offset', 'order', 'style', 'clipEdge', 'forceX', 'forceY', 'forceSize');
|
||||
|
||||
/*
|
||||
chart.x = function(_) {
|
||||
if (!arguments.length) return getX;
|
||||
getX = d3.functor(_); //not used locally, so could jsut be a rebind
|
||||
stacked.x(getX);
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.y = function(_) {
|
||||
if (!arguments.length) return getY;
|
||||
getY = d3.functor(_);
|
||||
stacked.y(getY);
|
||||
return chart;
|
||||
};
|
||||
*/
|
||||
|
||||
chart.margin = function(_) {
|
||||
if (!arguments.length) return margin;
|
||||
margin = _;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user