|
|
@ -2079,12 +2079,14 @@ nv.models.legend = function() {
|
|
|
|
var margin = {top: 5, right: 0, bottom: 5, left: 10},
|
|
|
|
var margin = {top: 5, right: 0, bottom: 5, left: 10},
|
|
|
|
width = 400,
|
|
|
|
width = 400,
|
|
|
|
height = 20,
|
|
|
|
height = 20,
|
|
|
|
color = d3.scale.category20().range();
|
|
|
|
color = d3.scale.category20().range(),
|
|
|
|
|
|
|
|
align = true;
|
|
|
|
|
|
|
|
|
|
|
|
var dispatch = d3.dispatch('legendClick', 'legendMouseover', 'legendMouseout');
|
|
|
|
var dispatch = d3.dispatch('legendClick', 'legendMouseover', 'legendMouseout');
|
|
|
|
|
|
|
|
|
|
|
|
function chart(selection) {
|
|
|
|
function chart(selection) {
|
|
|
|
selection.each(function(data) {
|
|
|
|
selection.each(function(data) {
|
|
|
|
|
|
|
|
var availableWidth = width - margin.left - margin.right;
|
|
|
|
|
|
|
|
|
|
|
|
var wrap = d3.select(this).selectAll('g.legend').data([data]);
|
|
|
|
var wrap = d3.select(this).selectAll('g.legend').data([data]);
|
|
|
|
var gEnter = wrap.enter().append('g').attr('class', 'nvd3 legend').append('g');
|
|
|
|
var gEnter = wrap.enter().append('g').attr('class', 'nvd3 legend').append('g');
|
|
|
@ -2120,6 +2122,59 @@ nv.models.legend = function() {
|
|
|
|
series.exit().remove();
|
|
|
|
series.exit().remove();
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// NEW ALIGNING CODE, TODO: drastically clean up ... just initial code to make sure the math is right
|
|
|
|
|
|
|
|
if (align) {
|
|
|
|
|
|
|
|
var seriesWidths = [];
|
|
|
|
|
|
|
|
series.each(function(d,i) {
|
|
|
|
|
|
|
|
seriesWidths.push(d3.select(this).select('text').node().getComputedTextLength() + 28); // 28 is ~ the width of the circle plus some padding
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//console.log('Series Widths: ', JSON.stringify(seriesWidths));
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
var seriesPerRow = 0;
|
|
|
|
|
|
|
|
var legendWidth = 0;
|
|
|
|
|
|
|
|
var columnWidths = [];
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
while ( legendWidth < availableWidth && seriesPerRow < seriesWidths.length) {
|
|
|
|
|
|
|
|
columnWidths[seriesPerRow] = seriesWidths[seriesPerRow];
|
|
|
|
|
|
|
|
legendWidth += seriesWidths[seriesPerRow++];
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
while ( legendWidth > availableWidth && seriesPerRow > 1 ) {
|
|
|
|
|
|
|
|
columnWidths = [];
|
|
|
|
|
|
|
|
seriesPerRow--;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
for (k = 0; k < seriesWidths.length; k++) {
|
|
|
|
|
|
|
|
if (seriesWidths[k] > (columnWidths[k % seriesPerRow] || 0) )
|
|
|
|
|
|
|
|
columnWidths[k % seriesPerRow] = seriesWidths[k];
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
legendWidth = columnWidths.reduce(function(prev, cur, index, array) {
|
|
|
|
|
|
|
|
return prev + cur;
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
//console.log(columnWidths, legendWidth, seriesPerRow);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
var xPositions = [];
|
|
|
|
|
|
|
|
for (var i = 0, curX = 0; i < seriesPerRow; i++) {
|
|
|
|
|
|
|
|
xPositions[i] = curX;
|
|
|
|
|
|
|
|
curX += columnWidths[i];
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
series
|
|
|
|
|
|
|
|
.attr('transform', function(d, i) {
|
|
|
|
|
|
|
|
return 'translate(' + xPositions[i % seriesPerRow] + ',' + (5 + Math.floor(i / seriesPerRow) * 20) + ')';
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//position legend as far right as possible within the total width
|
|
|
|
|
|
|
|
g.attr('transform', 'translate(' + (width - margin.right - legendWidth) + ',' + margin.top + ')');
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
height = margin.top + margin.bottom + (5 + Math.ceil(seriesWidths.length / seriesPerRow) * 20) + 15;
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
|
|
|
|
|
|
|
var ypos = 5,
|
|
|
|
var ypos = 5,
|
|
|
|
newxpos = 5,
|
|
|
|
newxpos = 5,
|
|
|
|
maxwidth = 0,
|
|
|
|
maxwidth = 0,
|
|
|
@ -2143,11 +2198,11 @@ nv.models.legend = function() {
|
|
|
|
//position legend as far right as possible within the total width
|
|
|
|
//position legend as far right as possible within the total width
|
|
|
|
g.attr('transform', 'translate(' + (width - margin.right - maxwidth) + ',' + margin.top + ')');
|
|
|
|
g.attr('transform', 'translate(' + (width - margin.right - maxwidth) + ',' + margin.top + ')');
|
|
|
|
|
|
|
|
|
|
|
|
//update height value if calculated larger than current
|
|
|
|
|
|
|
|
//Asuming legend is always horizontal for now, removing if clause because this does not let legend shrink after expanding
|
|
|
|
|
|
|
|
//TODO: allow legend to be horizontal or vertical, instead of definign height/width define one, and maybe call it maxHeight/maxWidth
|
|
|
|
|
|
|
|
//if (height < margin.top + margin.bottom + ypos + 15)
|
|
|
|
|
|
|
|
height = margin.top + margin.bottom + ypos + 15;
|
|
|
|
height = margin.top + margin.bottom + ypos + 15;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
@ -2181,6 +2236,12 @@ nv.models.legend = function() {
|
|
|
|
return chart;
|
|
|
|
return chart;
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
chart.align = function(_) {
|
|
|
|
|
|
|
|
if (!arguments.length) return align;
|
|
|
|
|
|
|
|
align = _;
|
|
|
|
|
|
|
|
return chart;
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
return chart;
|
|
|
|
return chart;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|