|
@@ -57,6 +57,7 @@ nv.models.lineWithBrushChart = function() {
|
|
|
, noData = 'No Data Available.'
|
|
, noData = 'No Data Available.'
|
|
|
, dispatch = d3v3.dispatch('tooltipShow', 'tooltipHide', 'stateChange', 'changeState', 'brush')
|
|
, dispatch = d3v3.dispatch('tooltipShow', 'tooltipHide', 'stateChange', 'changeState', 'brush')
|
|
|
, controlWidth = function() { return showControls ? (selectionHidden ? 240 : 300) : 0 }
|
|
, controlWidth = function() { return showControls ? (selectionHidden ? 240 : 300) : 0 }
|
|
|
|
|
+ , legendWidth = 175
|
|
|
, transitionDuration = 250
|
|
, transitionDuration = 250
|
|
|
, extent
|
|
, extent
|
|
|
, brushExtent = null
|
|
, brushExtent = null
|
|
@@ -104,6 +105,7 @@ nv.models.lineWithBrushChart = function() {
|
|
|
|
|
|
|
|
var availableWidth = (width || parseInt(container.style('width')) || 960)
|
|
var availableWidth = (width || parseInt(container.style('width')) || 960)
|
|
|
- margin.left - margin.right,
|
|
- margin.left - margin.right,
|
|
|
|
|
+ availableChartWidth = Math.max(availableWidth - legendWidth, 0),
|
|
|
availableHeight = (height || parseInt(container.style('height')) || 400)
|
|
availableHeight = (height || parseInt(container.style('height')) || 400)
|
|
|
- margin.top - margin.bottom;
|
|
- margin.top - margin.bottom;
|
|
|
|
|
|
|
@@ -178,31 +180,37 @@ nv.models.lineWithBrushChart = function() {
|
|
|
gEnter.append('g').attr('class', 'nv-x nv-axis');
|
|
gEnter.append('g').attr('class', 'nv-x nv-axis');
|
|
|
gEnter.append('g').attr('class', 'nv-y nv-axis');
|
|
gEnter.append('g').attr('class', 'nv-y nv-axis');
|
|
|
gEnter.append('g').attr('class', 'nv-linesWrap');
|
|
gEnter.append('g').attr('class', 'nv-linesWrap');
|
|
|
- gEnter.append('g').attr('class', 'nv-legendWrap');
|
|
|
|
|
|
|
+ // We put the legend in an another SVG to support scrolling
|
|
|
|
|
+ var legendDiv = d3.select(container.node().parentNode).select('div');
|
|
|
|
|
+ var legendSvg = legendDiv.select('svg').size() === 0 ? legendDiv.append('svg') : legendDiv.select('svg');
|
|
|
|
|
+ legendSvg.style('height', (data.length * 20 + 6) + 'px').selectAll('g').remove();
|
|
|
|
|
+ var legendG = legendSvg.append('g').attr('class', 'nvd3 nv-wrap nv-legendWrap');
|
|
|
gEnter.append('g').attr('class', 'nv-interactive');
|
|
gEnter.append('g').attr('class', 'nv-interactive');
|
|
|
gEnter.append('g').attr('class', 'nv-controlsWrap');
|
|
gEnter.append('g').attr('class', 'nv-controlsWrap');
|
|
|
|
|
|
|
|
g.select("rect")
|
|
g.select("rect")
|
|
|
- .attr("width",availableWidth)
|
|
|
|
|
|
|
+ .attr("width",availableChartWidth)
|
|
|
.attr("height",(availableHeight > 0) ? availableHeight : 0);
|
|
.attr("height",(availableHeight > 0) ? availableHeight : 0);
|
|
|
//------------------------------------------------------------
|
|
//------------------------------------------------------------
|
|
|
// Legend
|
|
// Legend
|
|
|
|
|
|
|
|
if (showLegend) {
|
|
if (showLegend) {
|
|
|
- legend.width(availableWidth - controlWidth());
|
|
|
|
|
|
|
+ legend.width(legendWidth);
|
|
|
|
|
+ legend.height(availableHeight);
|
|
|
|
|
+ legend.rightAlign(false);
|
|
|
|
|
+ legend.margin({top: 5, right: 0, left: 10, bottom: 0});
|
|
|
|
|
|
|
|
- g.select('.nv-legendWrap')
|
|
|
|
|
|
|
+ try {
|
|
|
|
|
+ legendG
|
|
|
.datum(data)
|
|
.datum(data)
|
|
|
- .call(legend);
|
|
|
|
|
-
|
|
|
|
|
- if ( margin.top != legend.height()) {
|
|
|
|
|
- margin.top = legend.height();
|
|
|
|
|
- availableHeight = (height || parseInt(container.style('height')) || 400)
|
|
|
|
|
- - margin.top - margin.bottom;
|
|
|
|
|
|
|
+ .call(legend)
|
|
|
|
|
+ .selectAll('text')
|
|
|
|
|
+ .append('title')
|
|
|
|
|
+ .text(function(d){
|
|
|
|
|
+ return d.key;
|
|
|
|
|
+ });
|
|
|
}
|
|
}
|
|
|
-
|
|
|
|
|
- wrap.select('.nv-legendWrap')
|
|
|
|
|
- .attr('transform', 'translate(0,' + (-margin.top) +')')
|
|
|
|
|
|
|
+ catch (e){}
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
if (showControls) {
|
|
if (showControls) {
|
|
@@ -225,7 +233,7 @@ nv.models.lineWithBrushChart = function() {
|
|
|
|
|
|
|
|
if (rightAlignYAxis) {
|
|
if (rightAlignYAxis) {
|
|
|
g.select(".nv-y.nv-axis")
|
|
g.select(".nv-y.nv-axis")
|
|
|
- .attr("transform", "translate(" + availableWidth + ",0)");
|
|
|
|
|
|
|
+ .attr("transform", "translate(" + availableChartWidth + ",0)");
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
//------------------------------------------------------------
|
|
//------------------------------------------------------------
|
|
@@ -236,7 +244,7 @@ nv.models.lineWithBrushChart = function() {
|
|
|
//Set up interactive layer
|
|
//Set up interactive layer
|
|
|
if (useInteractiveGuideline) {
|
|
if (useInteractiveGuideline) {
|
|
|
interactiveLayer
|
|
interactiveLayer
|
|
|
- .width(availableWidth)
|
|
|
|
|
|
|
+ .width(availableChartWidth)
|
|
|
.height(availableHeight)
|
|
.height(availableHeight)
|
|
|
.margin({left:margin.left, top:margin.top})
|
|
.margin({left:margin.left, top:margin.top})
|
|
|
.svgContainer(container)
|
|
.svgContainer(container)
|
|
@@ -246,7 +254,7 @@ nv.models.lineWithBrushChart = function() {
|
|
|
|
|
|
|
|
|
|
|
|
|
lines
|
|
lines
|
|
|
- .width(availableWidth)
|
|
|
|
|
|
|
+ .width(availableChartWidth)
|
|
|
.height(availableHeight)
|
|
.height(availableHeight)
|
|
|
.color(data.map(function(d,i) {
|
|
.color(data.map(function(d,i) {
|
|
|
return d.color || color(d, i);
|
|
return d.color || color(d, i);
|
|
@@ -315,7 +323,7 @@ nv.models.lineWithBrushChart = function() {
|
|
|
if (showXAxis) {
|
|
if (showXAxis) {
|
|
|
xAxis
|
|
xAxis
|
|
|
.scale(x)
|
|
.scale(x)
|
|
|
- .ticks( availableWidth / 100 )
|
|
|
|
|
|
|
+ .ticks( availableChartWidth / 100 )
|
|
|
.tickSize(-availableHeight, 0);
|
|
.tickSize(-availableHeight, 0);
|
|
|
|
|
|
|
|
g.select('.nv-x.nv-axis')
|
|
g.select('.nv-x.nv-axis')
|
|
@@ -329,7 +337,7 @@ nv.models.lineWithBrushChart = function() {
|
|
|
yAxis
|
|
yAxis
|
|
|
.scale(y)
|
|
.scale(y)
|
|
|
.ticks( availableHeight / 36 )
|
|
.ticks( availableHeight / 36 )
|
|
|
- .tickSize( -availableWidth, 0);
|
|
|
|
|
|
|
+ .tickSize( -availableChartWidth, 0);
|
|
|
|
|
|
|
|
g.select('.nv-y.nv-axis')
|
|
g.select('.nv-y.nv-axis')
|
|
|
.transition()
|
|
.transition()
|