Skip to content

Commit

Permalink
Merge pull request #4568 from plotly/fix4567-display-narrow-bars
Browse files Browse the repository at this point in the history 
Fix for displaying narrow bars in interactive mode
  • Loading branch information
@archmoj
archmoj authored Feb 12, 2020
2 parents acc9c21 + 494775b commit 9aa3df9
Show file tree
Hide file tree
Showing 4 changed files with 315 additions and 41 deletions.
66 changes: 40 additions & 26 deletions src/traces/bar/plot.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -114,6 +114,7 @@ function plot(gd, plotinfo, cdModule, traceLayer, opts, makeOnCompleteCallback)
}

var isHorizontal = (trace.orientation === 'h');
var withTransition = hasTransition(opts);

var pointGroup = Lib.ensureSingle(plotGroup, 'g', 'points');

Expand All @@ -139,26 +140,35 @@ function plot(gd, plotinfo, cdModule, traceLayer, opts, makeOnCompleteCallback)
var y0 = xy[1][0];
var y1 = xy[1][1];

var isBlank = (
x0 === x1 ||
y0 === y1 ||
!isNumeric(x0) ||
!isNumeric(x1) ||
!isNumeric(y0) ||
!isNumeric(y1)
);
// empty bars
var isBlank = (isHorizontal ? x1 - x0 : y1 - y0) === 0;

// display zeros if line.width > 0
if(isBlank && shouldDisplayZeros && helpers.getLineWidth(trace, di) && (isHorizontal ? x1 - x0 === 0 : y1 - y0 === 0)) {
if(isBlank && shouldDisplayZeros && helpers.getLineWidth(trace, di)) {
isBlank = false;
}
di.isBlank = isBlank;

if(isBlank && isHorizontal) x1 = x0;
if(isBlank && !isHorizontal) y1 = y0;
// skip nulls
if(!isBlank) {
isBlank = (
!isNumeric(x0) ||
!isNumeric(x1) ||
!isNumeric(y0) ||
!isNumeric(y1)
);
}

// record isBlank
di.isBlank = isBlank;

var spansHorizontal = isHorizontal && (x0 !== x1);
var spansVertical = !isHorizontal && (y0 !== y1);
// for blank bars, ensure start and end positions are equal - important for smooth transitions
if(isBlank) {
if(isHorizontal) {
x1 = x0;
} else {
y1 = y0;
}
}

// in waterfall mode `between` we need to adjust bar end points to match the connector width
if(adjustPixel && !isBlank) {
Expand All @@ -185,16 +195,24 @@ function plot(gd, plotinfo, cdModule, traceLayer, opts, makeOnCompleteCallback)
mc = di.mc || trace.marker.color;
}

var offset = d3.round((lw / 2) % 1, 2);

function roundWithLine(v) {
var offset = d3.round((lw / 2) % 1, 2);

// if there are explicit gaps, don't round,
// it can make the gaps look crappy
return (opts.gap === 0 && opts.groupgap === 0) ?
d3.round(Math.round(v) - offset, 2) : v;
}

function expandToVisible(v, vc) {
function expandToVisible(v, vc, hideZeroSpan) {
if(hideZeroSpan && v === vc) {
// should not expand zero span bars
// when start and end positions are identical
// i.e. for vertical when y0 === y1
// and for horizontal when x0 === x1
return v;
}

// if it's not in danger of disappearing entirely,
// round more precisely
return Math.abs(v - vc) >= 2 ? roundWithLine(v) :
Expand All @@ -215,14 +233,10 @@ function plot(gd, plotinfo, cdModule, traceLayer, opts, makeOnCompleteCallback)
var op = Color.opacity(mc);
var fixpx = (op < 1 || lw > 0.01) ? roundWithLine : expandToVisible;

if(spansHorizontal) {
x0 = fixpx(x0, x1);
x1 = fixpx(x1, x0);
}
if(spansVertical) {
y0 = fixpx(y0, y1);
y1 = fixpx(y1, y0);
}
x0 = fixpx(x0, x1, isHorizontal);
x1 = fixpx(x1, x0, isHorizontal);
y0 = fixpx(y0, y1, !isHorizontal);
y1 = fixpx(y1, y0, !isHorizontal);
}

var sel = transition(Lib.ensureSingle(bar, 'path'), fullLayout, opts, makeOnCompleteCallback);
Expand All @@ -231,7 +245,7 @@ function plot(gd, plotinfo, cdModule, traceLayer, opts, makeOnCompleteCallback)
.attr('d', 'M' + x0 + ',' + y0 + 'V' + y1 + 'H' + x1 + 'V' + y0 + 'Z')
.call(Drawing.setClipUrl, plotinfo.layerClipId, gd);

if(!fullLayout.uniformtext.mode && hasTransition(opts)) {
if(!fullLayout.uniformtext.mode && withTransition) {
var styleFns = Drawing.makePointStyleFns(trace);
Drawing.singlePointStyle(di, sel, trace, styleFns, gd);
}
Expand Down
Binary file added test/image/baselines/bar_show_narrow.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
166 changes: 166 additions & 0 deletions test/image/mocks/bar_show_narrow.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,166 @@
{
"data": [
{
"type": "bar",
"width": 0.001,
"x": [
"A",
"B",
"C",
"D"
],
"y": [
0.001,
0.01,
0.1,
1
]
},
{
"type": "bar",
"width": 0.001,
"x": [
"A",
"B",
"C",
"D"
],
"y": [
0.001,
0.01,
0.1,
1
],
"xaxis": "x2",
"yaxis": "y2"
},
{
"type": "bar",
"width": 0.001,
"orientation": "h",
"x": [
0.001,
0.01,
0.1,
1
],
"y": [
"A",
"B",
"C",
"D"
],
"text": [
0,
null,
0.001,
1
],
"xaxis": "x3",
"yaxis": "y3"
},
{
"type": "bar",
"width": 0.001,
"orientation": "h",
"x": [
0.001,
0.01,
0.1,
1
],
"y": [
"A",
"B",
"C",
"D"
],
"xaxis": "x4",
"yaxis": "y4"
}
],
"layout": {
"showlegend": false,
"width": 800,
"height": 800,
"dragmode": "pan",
"xaxis": {
"domain": [
0,
0.48
]
},
"xaxis2": {
"autorange": "reversed",
"anchor": "y2",
"domain": [
0.52,
1
]
},
"xaxis3": {
"range": [
-0.01,
1
],
"zeroline": false,
"anchor": "y3",
"domain": [
0,
0.48
]
},
"xaxis4": {
"range": [
-0.01,
1
],
"zeroline": false,
"autorange": "reversed",
"anchor": "y4",
"domain": [
0.52,
1
]
},
"yaxis": {
"range": [
-0.01,
1
],
"zeroline": false,
"domain": [
0,
0.48
]
},
"yaxis2": {
"range": [
-0.01,
1
],
"zeroline": false,
"autorange": "reversed",
"anchor": "x2",
"domain": [
0.52,
1
]
},
"yaxis3": {
"anchor": "x3",
"domain": [
0.52,
1
]
},
"yaxis4": {
"autorange": "reversed",
"anchor": "x4",
"domain": [
0,
0.48
]
}
}
}
Loading

0 comments on commit 9aa3df9

Please sign in to comment.