Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit e2a2dad

Browse files
antoinergantoinerg
committed
indicator: change delta from bottom-aligned to being underneath number
1 parent 3df3829 commit e2a2dad

File tree

7 files changed

+95
-21
lines changed

7 files changed

+95
-21
lines changed

‎src/traces/indicator/plot.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -111,10 +111,10 @@ module.exports = function plot(gd, cdModule, transitionOpts, makeOnCompleteCallb
111111
// when no gauge, we are only constrained by figure size
112112
if(hasBigNumber) {
113113
// Center the text vertically
114-
mainFontSize = Math.min(size.w / (trace.max.toString().length), size.h / 2);
114+
mainFontSize = Math.min(size.w / (trace.max.toString().length), size.h / 3);
115115
deltaFontSize = 0.5 * mainFontSize;
116116
bignumberVerticalMargin = size.t + size.h / 2;
117-
deltaVerticalMargin = size.t + size.h - deltaFontSize / 2;
117+
deltaVerticalMargin = Math.min(size.t + size.h / 2 + mainFontSize / 2 + deltaFontSize / 2);
118118
} else {
119119
mainFontSize = Math.min(size.w / (trace.max.toString().length + 2), size.h / 2);
120120
deltaFontSize = mainFontSize;
@@ -141,7 +141,7 @@ module.exports = function plot(gd, cdModule, transitionOpts, makeOnCompleteCallb
141141
bignumberVerticalMargin = size.t + size.h / 2;
142142
bignumberX = size.l + (p + (1 - p) / 2) * size.w;
143143
deltaFontSize = 0.5 * mainFontSize;
144-
deltaVerticalMargin = bignumberVerticalMargin + 1.5 * deltaFontSize;
144+
deltaVerticalMargin = bignumberVerticalMargin + mainFontSize / 2 + deltaFontSize;
145145
labelFontSize = 0.4 * mainFontSize;
146146
}
147147

‎test/image/baselines/indicator_bignumber.png

27 KB
Loading

‎test/image/baselines/indicator_bullet.png

437 Bytes
Loading

‎test/image/baselines/indicator_scatter.png

86 Bytes
Loading

‎test/image/mocks/indicator_bignumber.json

Lines changed: 89 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,103 @@
11
{
22
"data": [{
3-
"name": "Accounts",
4-
"type": "indicator",
5-
"mode": "bignumber+delta",
6-
"delta": {
7-
"showpercentage": true
3+
"domain": {
4+
"x": [0, 0.33],
5+
"y": [0, 0.33]
6+
},
7+
"name": "Accounts",
8+
"type": "indicator",
9+
"mode": "bignumber+delta",
10+
"delta": {
11+
"showpercentage": true
12+
},
13+
"max": 500,
14+
"values": [400, 450],
15+
"font": {
16+
"color": "white",
17+
"family": "Dosis"
18+
}
819
},
9-
"max": 500,
10-
"values": [400, 450],
11-
"font": {
12-
"color": "white",
13-
"family": "Dosis"
20+
{
21+
"domain": {
22+
"x": [0.33, 0.66],
23+
"y": [0, 0.66]
24+
},
25+
"name": "Accounts",
26+
"type": "indicator",
27+
"mode": "bignumber+delta",
28+
"delta": {
29+
"showpercentage": true
30+
},
31+
"max": 500,
32+
"values": [400, 450],
33+
"font": {
34+
"color": "white",
35+
"family": "Dosis"
36+
}
37+
},
38+
{
39+
"domain": {
40+
"x": [0.66, 1],
41+
"y": [0, 1]
42+
},
43+
"name": "Accounts",
44+
"type": "indicator",
45+
"mode": "bignumber+delta",
46+
"delta": {
47+
"showpercentage": true
48+
},
49+
"max": 500,
50+
"values": [400, 450],
51+
"font": {
52+
"color": "white",
53+
"family": "Dosis"
54+
}
1455
}
15-
}],
56+
],
1657
"layout": {
17-
"width": 250,
18-
"height": 250,
58+
"width": 750,
59+
"height": 500,
1960
"paper_bgcolor": "black",
2061
"margin": {
2162
"t": 50,
2263
"r": 25,
2364
"l": 25,
2465
"b": 50
25-
}
26-
66+
},
67+
"shapes": [{
68+
"type": "rect",
69+
"x0": 0,
70+
"x1": 0.33,
71+
"y0": 0.66,
72+
"y1": 1,
73+
"line": {
74+
"color": "rgba(255, 255, 255, 0.35)",
75+
"width": 1
76+
},
77+
"fill": "rgba(0,0,0,0)"
78+
}, {
79+
"type": "rect",
80+
"x0": 0.33,
81+
"x1": 0.66,
82+
"y0": 0.33,
83+
"y1": 1,
84+
"line": {
85+
"color": "rgba(255, 255, 255, 0.35)",
86+
"width": 1
87+
},
88+
"fill": "rgba(0,0,0,0)"
89+
},{
90+
"type": "rect",
91+
"x0": 0.66,
92+
"x1": 1.0,
93+
"y0": 0,
94+
"y1": 1,
95+
"line": {
96+
"color": "rgba(255, 255, 255, 0.35)",
97+
"width": 1
98+
},
99+
"fill": "rgba(0,0,0,0)"
100+
}]
27101
},
28102
"config": {
29103
"responsive": true

‎test/image/mocks/indicator_bullet.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -96,8 +96,8 @@
9696
"height": 250,
9797
"margin": {
9898
"t": 10,
99-
"r": 10,
100-
"l": 10,
99+
"r": 25,
100+
"l": 25,
101101
"b": 10
102102
}
103103
},

‎test/image/mocks/indicator_scatter.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"data": [{
33
"domain": {
4-
"y": [0.25, 0.75],
4+
"y": [0, 1],
55
"x": [0.25, 0.75]
66
},
77
"name": "Users online",

0 commit comments

Comments
 (0)