Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Override bar width for discreteBar and discreteBarChart #2119

Open
wants to merge 8 commits into
base: master
Choose a base branch
from
Open

Override bar width for discreteBar and discreteBarChart #2119

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
db95346
When wrapLabels=false (default behaviour) will wrap any label on any …
josemf Oct 24, 2017
8fef1b5
Merge pull request #1 from felix-app/wrap-ticks-default-newline
josemf Oct 24, 2017
69cbadb
Most recent nvd3 builds
josemf Oct 24, 2017
5b33a42
Managed to control the bar width and margins with a new option overri…
josemf Oct 24, 2017
db7ccaa
Implemented overrideBarWidth—bypasses d3 rangeBand for width calculat…
josemf Oct 25, 2017
f81f406
Delete map file
josemf Mar 2, 2019
d2e931a
Delete built file
josemf Mar 2, 2019
97f0b34
Delete map file
josemf Mar 2, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion build/nv.d3.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
/* nvd3 version 1.8.6-dev (https://github.com/novus/nvd3) 2017-10-14 */
/* nvd3 version 1.8.6-dev (https://github.com/novus/nvd3) 2017-10-24 */
.nvd3 .nv-axis {
pointer-events:none;
opacity: 1;
Expand Down
55 changes: 44 additions & 11 deletions build/nv.d3.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
/* nvd3 version 1.8.6-dev (https://github.com/novus/nvd3) 2017-10-14 */
/* nvd3 version 1.8.6-dev (https://github.com/novus/nvd3) 2017-10-24 */
(function(){

// set up main nv object
Expand Down Expand Up @@ -1539,29 +1539,56 @@ nv.utils.noData = function(chart, container) {
Wrap long labels.
*/
nv.utils.wrapTicks = function (text, width) {

text.each(function() {
var text = d3.select(this),
words = text.text().split(/\s+/).reverse(),
word,
line = [],
lineNumber = 0,
lineHeight = 1.1,
y = text.attr("y"),
dy = parseFloat(text.attr("dy")),
tspan = text.text(null).append("tspan").attr("x", 0).attr("y", y).attr("dy", dy + "em");
lines = [],
line = [];

while (word = words.pop()) {
line.push(word);
tspan.text(line.join(" "));
if (tspan.node().getComputedTextLength() > width) {
text.text(line.join(" "));

if (text.node().getComputedTextLength() > width) {
line.pop();
tspan.text(line.join(" "));
lines.push(line.join(" "));
line = [word];
tspan = text.append("tspan").attr("x", 0).attr("y", y).attr("dy", ++lineNumber * lineHeight + dy + "em").text(word);
}
}

lines.push(line.join(" "));

nv.utils.wrapTicksLines.call(this, lines)
});
};

nv.utils.wrapTicksNewLines = function (text) {
text.each(function() {
var text = d3.select(this),
lines = text.text().split("\n");

nv.utils.wrapTicksLines.call(this, lines)
});
}

nv.utils.wrapTicksLines = function (lines) {

var text = d3.select(this),
y = text.attr("y"),
dy = parseFloat(text.attr("dy")),
lineHeight = 1.1,
line;

text.text(null);

for(var i=0; i < lines.length; ++i) {
line = lines[i];
text.append("tspan").attr("x", 0).attr("y", y).attr("dy", i * lineHeight + dy + "em").text(line);
}
};

/*
Check equality of 2 array
*/
Expand Down Expand Up @@ -4412,6 +4439,9 @@ nv.models.discreteBarChart = function() {
if (wrapLabels) {
g.selectAll('.tick text')
.call(nv.utils.wrapTicks, chart.xAxis.rangeBand())
} else {
g.selectAll('.tick text')
.call(nv.utils.wrapTicksNewLines)
}
}

Expand Down Expand Up @@ -9881,6 +9911,9 @@ nv.models.multiBarChart = function() {
if (wrapLabels) {
g.selectAll('.tick text')
.call(nv.utils.wrapTicks, chart.xAxis.rangeBand())
} else {
g.selectAll('.tick text')
.call(nv.utils.wrapTicksNewLines)
}

if (reduceXTicks)
Expand Down
1 change: 0 additions & 1 deletion build/nv.d3.js.map
View file
Open in desktop

This file was deleted.

12 changes: 0 additions & 12 deletions build/nv.d3.min.js
View file
Open in desktop

This file was deleted.

1 change: 0 additions & 1 deletion build/nv.d3.min.js.map
View file
Open in desktop

This file was deleted.

38 changes: 28 additions & 10 deletions src/models/discreteBar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ nv.models.discreteBar = function() {
, dispatch = d3.dispatch('chartClick', 'elementClick', 'elementDblClick', 'elementMouseover', 'elementMouseout', 'elementMousemove', 'renderEnd')
, rectClass = 'discreteBar'
, duration = 250
, overrideBarWidth = null
;

//============================================================
Expand All @@ -35,6 +36,14 @@ nv.models.discreteBar = function() {
var x0, y0;
var renderWatch = nv.utils.renderWatch(dispatch, duration);


//============================================================
// Private methods
//------------------------------------------------------------

var rangeWidth = nv.utils.rangeWidth.bind(chart);
var rangeLeft = nv.utils.rangeLeft.bind(chart);

function chart(selection) {
renderWatch.reset();
selection.each(function(data) {
Expand All @@ -50,7 +59,7 @@ nv.models.discreteBar = function() {
point.series = i;
});
});

// Setup Scales
// remap and flatten the data for use in calculating the scales' domains
var seriesData = (xDomain && yDomain) ? [] : // if we know xDomain and yDomain, no need to calculate
Expand Down Expand Up @@ -106,7 +115,7 @@ nv.models.discreteBar = function() {

var barsEnter = bars.enter().append('g')
.attr('transform', function(d,i,j) {
return 'translate(' + (x(getX(d,i)) + x.rangeBand() * .05 ) + ', ' + y(0) + ')'
return 'translate(' + (x(getX(d,i)) + rangeWidth(x) * .05 ) + ', ' + y(0) + ')'
})
.on('mouseover', function(d,i) { //TODO: figure out why j works above, but not here
d3.select(this).classed('hover', true);
Expand Down Expand Up @@ -150,10 +159,10 @@ nv.models.discreteBar = function() {
});
d3.event.stopPropagation();
});

barsEnter.append('rect')
.attr('height', 0)
.attr('width', x.rangeBand() * .9 / data.length )
.attr('width', rangeWidth(x) * .9 / data.length )

if (showValues) {
barsEnter.append('text')
Expand All @@ -163,26 +172,27 @@ nv.models.discreteBar = function() {
bars.select('text')
.text(function(d,i) { return valueFormat(getY(d,i)) })
.watchTransition(renderWatch, 'discreteBar: bars text')
.attr('x', x.rangeBand() * .9 / 2)
.attr('x', rangeWidth(x) * .9 / 2)
.attr('y', function(d,i) { return getY(d,i) < 0 ? y(getY(d,i)) - y(0) + 12 : -4 })

;
} else {
bars.selectAll('text').remove();
}

bars
.attr('class', function(d,i) { return getY(d,i) < 0 ? 'nv-bar negative' : 'nv-bar positive' })
.style('fill', function(d,i) { return d.color || color(d,i) })
.style('stroke', function(d,i) { return d.color || color(d,i) })
.select('rect')
.attr('class', rectClass)
.watchTransition(renderWatch, 'discreteBar: bars rect')
.attr('width', x.rangeBand() * .9 / data.length);
.attr('width', rangeWidth(x) * .9 / data.length);
bars.watchTransition(renderWatch, 'discreteBar: bars')
//.delay(function(d,i) { return i * 1200 / data[0].values.length })
.attr('transform', function(d,i) {
var left = x(getX(d,i)) + x.rangeBand() * .05,

var left = rangeLeft(x, x(getX(d,i)), i) + rangeWidth(x) * .05,
top = getY(d,i) < 0 ?
y(0) :
y(0) - y(getY(d,i)) < 1 ?
Expand Down Expand Up @@ -231,7 +241,7 @@ nv.models.discreteBar = function() {
valueFormat: {get: function(){return valueFormat;}, set: function(_){valueFormat=_;}},
id: {get: function(){return id;}, set: function(_){id=_;}},
rectClass: {get: function(){return rectClass;}, set: function(_){rectClass=_;}},

// options that require extra logic in the setter
margin: {get: function(){return margin;}, set: function(_){
margin.top = _.top !== undefined ? _.top : margin.top;
Expand All @@ -245,10 +255,18 @@ nv.models.discreteBar = function() {
duration: {get: function(){return duration;}, set: function(_){
duration = _;
renderWatch.reset(duration);
}},
overrideBarWidth: {get: function(){return overrideBarWidth;}, set: function(_){
if(!_) overrideBarWidth = null;
else
overrideBarWidth = {
width: _ && _.width !== undefined ? _.width : _,
padding: _ && _.padding !== undefined ? _.padding : 0
}
}}
});

nv.utils.initOptions(chart);

return chart;
};
44 changes: 37 additions & 7 deletions src/models/discreteBarChart.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ nv.models.discreteBarChart = function() {
, width = null
, height = null
, color = nv.utils.getColor()
, showLegend = false
, showLegend = false
, showXAxis = true
, showYAxis = true
, rightAlignYAxis = false
Expand All @@ -30,6 +30,7 @@ nv.models.discreteBarChart = function() {
, noData = null
, dispatch = d3.dispatch('beforeUpdate','renderEnd')
, duration = 250
, overrideBarWidth = null
;

xAxis
Expand Down Expand Up @@ -58,6 +59,12 @@ nv.models.discreteBarChart = function() {

var renderWatch = nv.utils.renderWatch(dispatch, duration);

//============================================================
// Private methods
//------------------------------------------------------------

var rangeWidth = nv.utils.rangeWidth.bind(chart);

function chart(selection) {
renderWatch.reset();
renderWatch.models(discretebar);
Expand Down Expand Up @@ -132,7 +139,8 @@ nv.models.discreteBarChart = function() {
// Main Chart Component(s)
discretebar
.width(availableWidth)
.height(availableHeight);
.height(availableHeight)
.overrideBarWidth(overrideBarWidth);

var barsWrap = g.select('.nv-barsWrap')
.datum(data.filter(function(d) { return !d.disabled }));
Expand All @@ -145,9 +153,9 @@ nv.models.discreteBarChart = function() {
.append('rect');

g.select('#nv-x-label-clip-' + discretebar.id() + ' rect')
.attr('width', x.rangeBand() * (staggerLabels ? 2 : 1))
.attr('width', rangeWidth(x) * (staggerLabels ? 2 : 1))
.attr('height', 16)
.attr('x', -x.rangeBand() / (staggerLabels ? 1 : 2 ));
.attr('x', -rangeWidth(x) / (staggerLabels ? 1 : 2 ));

// Setup Axes
if (showXAxis) {
Expand All @@ -158,6 +166,7 @@ nv.models.discreteBarChart = function() {

g.select('.nv-x.nv-axis')
.attr('transform', 'translate(0,' + (y.range()[0] + ((discretebar.showValues() && y.domain()[0] < 0) ? 16 : 0)) + ')');

g.select('.nv-x.nv-axis').call(xAxis);

var xTicks = g.select('.nv-x.nv-axis').selectAll('g');
Expand All @@ -176,7 +185,22 @@ nv.models.discreteBarChart = function() {

if (wrapLabels) {
g.selectAll('.tick text')
.call(nv.utils.wrapTicks, chart.xAxis.rangeBand())
.call(nv.utils.wrapTicks, rangeWidth(chart.xAxis))
} else {
g.selectAll('.tick text')
.call(nv.utils.wrapTicksNewLines)
}

if(overrideBarWidth) {

// adjust ticks position

g.selectAll('.nv-x .nv-wrap g.tick').attr('transform', function(d,i,j) {

var translateX = overrideBarWidth.width*i + overrideBarWidth.padding*(i+1) + (overrideBarWidth.width/2);

return 'translate('+translateX+',0)';
});
}
}

Expand Down Expand Up @@ -268,12 +292,18 @@ nv.models.discreteBarChart = function() {
color: {get: function(){return color;}, set: function(_){
color = nv.utils.getColor(_);
discretebar.color(color);
legend.color(color);
legend.color(color);
}},
rightAlignYAxis: {get: function(){return rightAlignYAxis;}, set: function(_){
rightAlignYAxis = _;
yAxis.orient( (_) ? 'right' : 'left');
}}
}},
overrideBarWidth: {get: function(){return overrideBarWidth;}, set: function(_){
overrideBarWidth = {
width: _.width !== undefined ? _.width : _,
padding: _.padding !== undefined ? _.padding : 0
}
}}
});

nv.utils.inheritOptions(chart, discretebar);
Expand Down
3 changes: 3 additions & 0 deletions src/models/multiBarChart.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -294,6 +294,9 @@ nv.models.multiBarChart = function() {
if (wrapLabels) {
g.selectAll('.tick text')
.call(nv.utils.wrapTicks, chart.xAxis.rangeBand())
} else {
g.selectAll('.tick text')
.call(nv.utils.wrapTicksNewLines)
}

if (reduceXTicks)
Expand Down
Loading