Skip to content

Commit 1ce7848

Browse files
archmojarchmoj
authored
Merge pull request #3848 from plotly/fix3797-display-bars-with-height-zero
Display bar outlines with height zero
2 parents 66b2f40 + 7224fe4 commit 1ce7848

8 files changed

+330
-112
lines changed

Diff for: ‎src/traces/bar/plot.js

+15-8
Original file line numberDiff line numberDiff line change
@@ -67,9 +67,13 @@ module.exports = function plot(gd, plotinfo, cdModule, traceLayer, opts) {
6767
var bartraces = Lib.makeTraceGroups(traceLayer, cdModule, 'trace bars').each(function(cd) {
6868
var plotGroup = d3.select(this);
6969
var trace = cd[0].trace;
70+
var isWaterfall = (trace.type === 'waterfall');
71+
var isFunnel = (trace.type === 'funnel');
72+
var isBar = (trace.type === 'bar');
73+
var shouldDisplayZeros = isBar || isFunnel;
7074

7175
var adjustPixel = 0;
72-
if(trace.type === 'waterfall' && trace.connector.visible && trace.connector.mode === 'between') {
76+
if(isWaterfall && trace.connector.visible && trace.connector.mode === 'between') {
7377
adjustPixel = trace.connector.line.width / 2;
7478
}
7579

@@ -101,10 +105,11 @@ module.exports = function plot(gd, plotinfo, cdModule, traceLayer, opts) {
101105
var y0 = xy[1][0];
102106
var y1 = xy[1][1];
103107

104-
var isBlank = di.isBlank = (
105-
!isNumeric(x0) || !isNumeric(x1) ||
106-
!isNumeric(y0) || !isNumeric(y1) ||
107-
x0 === x1 || y0 === y1
108+
var isBlank = di.isBlank = !(
109+
isNumeric(x0) && isNumeric(x1) &&
110+
isNumeric(y0) && isNumeric(y1) &&
111+
(x0 !== x1 || (shouldDisplayZeros && isHorizontal)) &&
112+
(y0 !== y1 || (shouldDisplayZeros && !isHorizontal))
108113
);
109114

110115
// in waterfall mode `between` we need to adjust bar end points to match the connector width
@@ -231,7 +236,7 @@ function appendBarText(gd, plotinfo, bar, calcTrace, i, x0, x1, y0, y1, opts) {
231236

232237
if(!text ||
233238
textPosition === 'none' ||
234-
(calcBar.isBlank && (
239+
((calcBar.isBlank || x0 === x1 || y0 === y1) && (
235240
textPosition === 'auto' ||
236241
textPosition === 'inside'))) {
237242
bar.select('text').remove();
@@ -513,6 +518,8 @@ function getTextPosition(trace, index) {
513518
function calcTextinfo(calcTrace, index, xa, ya) {
514519
var trace = calcTrace[0].trace;
515520
var isHorizontal = (trace.orientation === 'h');
521+
var isWaterfall = (trace.type === 'waterfall');
522+
var isFunnel = (trace.type === 'funnel');
516523

517524
function formatLabel(u) {
518525
var pAxis = isHorizontal ? ya : xa;
@@ -542,7 +549,7 @@ function calcTextinfo(calcTrace, index, xa, ya) {
542549
if(tx === 0 || tx) text.push(tx);
543550
}
544551

545-
if(trace.type === 'waterfall') {
552+
if(isWaterfall) {
546553
var delta = +cdi.rawS || cdi.s;
547554
var final = cdi.v;
548555
var initial = final - delta;
@@ -552,7 +559,7 @@ function calcTextinfo(calcTrace, index, xa, ya) {
552559
if(hasFlag('final')) text.push(formatNumber(final));
553560
}
554561

555-
if(trace.type === 'funnel') {
562+
if(isFunnel) {
556563
if(hasFlag('value')) text.push(formatNumber(cdi.s));
557564

558565
var nPercent = 0;

Diff for: ‎test/image/baselines/bar-marker-line-colorscales.png

285 Bytes
Loading

Diff for: ‎test/image/baselines/bar_display_height_zero.png

35.7 KB
Loading

Diff for: ‎test/image/baselines/error_bar_bar_ids.png

56 Bytes
Loading

Diff for: ‎test/image/baselines/funnel_horizontal_group_basic.png

218 Bytes
Loading

Diff for: ‎test/image/baselines/funnel_vertical_overlay_custom_arrays.png

-1 Bytes
Loading

Diff for: ‎test/image/mocks/bar_display_height_zero.json

+180
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,180 @@
1+
{
2+
"data": [
3+
{
4+
"type": "bar",
5+
"marker": {
6+
"line": {
7+
"width": 10
8+
}
9+
},
10+
"x": [
11+
"A",
12+
"B",
13+
"C"
14+
],
15+
"y": [
16+
0,
17+
null,
18+
1
19+
],
20+
"text": [
21+
0,
22+
null,
23+
1
24+
],
25+
"textposition": "auto",
26+
"insidetextanchor": "middle",
27+
"cliponaxis": false
28+
},
29+
{
30+
"type": "bar",
31+
"marker": {
32+
"line": {
33+
"width": 10
34+
}
35+
},
36+
"x": [
37+
"A",
38+
"B",
39+
"C"
40+
],
41+
"y": [
42+
0,
43+
null,
44+
1
45+
],
46+
"text": [
47+
0,
48+
null,
49+
1
50+
],
51+
"textposition": "auto",
52+
"insidetextanchor": "middle",
53+
"cliponaxis": false,
54+
"xaxis": "x2",
55+
"yaxis": "y2"
56+
},
57+
{
58+
"type": "bar",
59+
"marker": {
60+
"line": {
61+
"width": 10
62+
}
63+
},
64+
"orientation": "h",
65+
"x": [
66+
0,
67+
null,
68+
1
69+
],
70+
"y": [
71+
"A",
72+
"B",
73+
"C"
74+
],
75+
"text": [
76+
0,
77+
null,
78+
1
79+
],
80+
"textposition": "auto",
81+
"insidetextanchor": "middle",
82+
"cliponaxis": false,
83+
"xaxis": "x3",
84+
"yaxis": "y3"
85+
},
86+
{
87+
"type": "bar",
88+
"marker": {
89+
"line": {
90+
"width": 10
91+
}
92+
},
93+
"orientation": "h",
94+
"x": [
95+
0,
96+
null,
97+
1
98+
],
99+
"y": [
100+
"A",
101+
"B",
102+
"C"
103+
],
104+
"text": [
105+
0,
106+
null,
107+
1
108+
],
109+
"textposition": "auto",
110+
"insidetextanchor": "middle",
111+
"cliponaxis": false,
112+
"xaxis": "x4",
113+
"yaxis": "y4"
114+
}
115+
],
116+
"layout": {
117+
"showlegend": true,
118+
"width": 800,
119+
"height": 800,
120+
"dragmode": "pan",
121+
"xaxis": {
122+
"domain": [
123+
0,
124+
0.48
125+
]
126+
},
127+
"xaxis2": {
128+
"autorange": "reversed",
129+
"anchor": "y2",
130+
"domain": [
131+
0.52,
132+
1
133+
]
134+
},
135+
"xaxis3": {
136+
"anchor": "y3",
137+
"domain": [
138+
0,
139+
0.48
140+
]
141+
},
142+
"xaxis4": {
143+
"autorange": "reversed",
144+
"anchor": "y4",
145+
"domain": [
146+
0.52,
147+
1
148+
]
149+
},
150+
"yaxis": {
151+
"domain": [
152+
0,
153+
0.48
154+
]
155+
},
156+
"yaxis2": {
157+
"autorange": "reversed",
158+
"anchor": "x2",
159+
"domain": [
160+
0.52,
161+
1
162+
]
163+
},
164+
"yaxis3": {
165+
"anchor": "x3",
166+
"domain": [
167+
0.52,
168+
1
169+
]
170+
},
171+
"yaxis4": {
172+
"autorange": "reversed",
173+
"anchor": "x4",
174+
"domain": [
175+
0,
176+
0.48
177+
]
178+
}
179+
}
180+
}

0 commit comments

Comments
 (0)