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

Skip to content

Commit 364b6ec

Browse files
antoinergantoinerg
committed
update baselines
1 parent 69a305f commit 364b6ec

File tree

7 files changed

+137
-67
lines changed

7 files changed

+137
-67
lines changed

‎src/traces/indicator/plot.js

Lines changed: 57 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@ module.exports = function plot(gd, cdModule, transitionOpts, makeOnCompleteCallb
4747
var cd0 = cd[0];
4848
var trace = cd0.trace;
4949

50+
// Domain size
5051
var domain = trace.domain;
5152
var size = Lib.extendFlat({}, fullLayout._size, {
5253
w: fullLayout._size.w * (domain.x[1] - domain.x[0]),
@@ -56,7 +57,6 @@ module.exports = function plot(gd, cdModule, transitionOpts, makeOnCompleteCallb
5657
t: Math.max(fullLayout._size.t, fullLayout.height * domain.y[0]),
5758
b: Math.max(fullLayout._size.b, fullLayout.height * (1 - domain.y[0]))
5859
});
59-
var centerX = size.l + size.w / 2;
6060

6161
// bignumber
6262
var isBigNumber = trace.mode.indexOf('bignumber') !== -1;
@@ -66,18 +66,18 @@ module.exports = function plot(gd, cdModule, transitionOpts, makeOnCompleteCallb
6666
var hasTicker = trace.mode.indexOf('delta') !== -1;
6767
var tickerPercentFmt = d3.format('2%');
6868

69-
// trendline
70-
var hasSparkline = trace.mode === 'sparkline';
71-
if(hasSparkline) isBigNumber = true;
72-
7369
// gauge related
7470
var isGauge = trace.mode.indexOf('gauge') !== -1;
75-
var isCircular = isGauge && trace.gauge.shape === 'circular';
76-
var isBullet = isGauge && trace.gauge.shape === 'bullet';
7771

72+
// circular gauge
73+
var isCircular = isGauge && trace.gauge.shape === 'circular';
7874
var theta = Math.PI / 2;
7975
var radius = Math.min(size.w / 2, size.h * 0.75);
8076
var innerRadius = cn.innerRadius * radius;
77+
78+
// bullet gauge
79+
var isBullet = isGauge && trace.gauge.shape === 'bullet';
80+
8181
var isWide = !(size.h > radius);
8282

8383
function valueToAngle(v) {
@@ -87,60 +87,60 @@ module.exports = function plot(gd, cdModule, transitionOpts, makeOnCompleteCallb
8787
return angle;
8888
}
8989

90+
// TODO: Move the following to defaults
91+
// Position elements
9092
var bignumberVerticalMargin, mainFontSize;
91-
var tickerVerticalMargin, tickerFontSize, gaugeFontSize;
92-
if(isBigNumber && !isGauge) {
93-
// Center the text
94-
mainFontSize = Math.min(size.w / (trace.max.toString().length), size.h / 2);
95-
bignumberVerticalMargin = size.t + size.h / 2;
96-
tickerFontSize = 0.5 * mainFontSize;
97-
}
98-
if(hasTicker && !isGauge && !isBigNumber) {
99-
bignumberVerticalMargin = 0;
100-
tickerVerticalMargin = size.t + size.h / 2;
101-
mainFontSize = Math.min(size.w / (trace.max.toString().length), size.h / 2);
102-
tickerFontSize = mainFontSize;
103-
}
104-
if(isCircular) {
105-
bignumberVerticalMargin = size.t + size.h;
106-
if(!isWide) bignumberVerticalMargin -= (size.h - radius) / 2;
107-
// TODO: check formatted size of the number
108-
mainFontSize = Math.min(2 * innerRadius / (trace.max.toString().length));
109-
tickerFontSize = 0.35 * mainFontSize;
110-
}
111-
if(isBullet) {
112-
// Center the text
113-
mainFontSize = Math.min(size.w / (trace.max.toString().length), size.h / 2);
114-
bignumberVerticalMargin = size.t + size.h / 2;
115-
tickerFontSize = 0.5 * mainFontSize;
93+
var tickerVerticalMargin, tickerFontSize, tickerBaseline;
94+
var gaugeFontSize;
95+
var labelFontSize;
96+
var centerX = size.l + size.w / 2;
97+
98+
if(!isGauge) {
99+
// when no gauge, we are only constrained by figure size
100+
if(isBigNumber) {
101+
// Center the text vertically
102+
mainFontSize = Math.min(size.w / (trace.max.toString().length), size.h / 2);
103+
tickerFontSize = 0.5 * mainFontSize;
104+
bignumberVerticalMargin = size.t + size.h / 2;
105+
tickerVerticalMargin = size.t + size.h - tickerFontSize / 2;
106+
} else {
107+
mainFontSize = Math.min(size.w / (trace.max.toString().length), size.h / 2);
108+
tickerFontSize = mainFontSize;
109+
bignumberVerticalMargin = 0;
110+
tickerVerticalMargin = size.t + size.h / 2;
111+
}
112+
labelFontSize = 0.35 * mainFontSize;
113+
} else {
114+
if(isCircular) {
115+
bignumberVerticalMargin = size.t + size.h;
116+
if(!isWide) bignumberVerticalMargin -= (size.h - radius) / 2;
117+
// TODO: check formatted size of the number
118+
mainFontSize = Math.min(2 * innerRadius / (trace.max.toString().length));
119+
tickerFontSize = 0.35 * mainFontSize;
120+
}
121+
if(isBullet) {
122+
// Center the text
123+
mainFontSize = Math.min(size.w / (trace.max.toString().length), size.h / 2);
124+
bignumberVerticalMargin = size.t + size.h / 2;
125+
tickerFontSize = 0.5 * mainFontSize;
126+
}
127+
gaugeFontSize = Math.max(0.25 * mainFontSize, (radius - innerRadius) / 4);
128+
labelFontSize = gaugeFontSize;
129+
130+
if(!isBigNumber) {
131+
tickerFontSize = 0.75 * mainFontSize;
132+
tickerVerticalMargin = bignumberVerticalMargin;
133+
tickerBaseline = 'bottom';
134+
} else {
135+
tickerVerticalMargin = bignumberVerticalMargin + tickerFontSize;
136+
}
116137
}
117-
gaugeFontSize = Math.max(0.25 * mainFontSize, (radius - innerRadius) / 4);
118-
if(!tickerVerticalMargin) tickerVerticalMargin = !isGauge ? size.t + size.h - tickerFontSize / 2 : bignumberVerticalMargin + tickerFontSize;
119138

120139
plotGroup.each(function() {
121-
var data;
122-
// Draw trendline
123-
data = cd.filter(function() {return hasSparkline;});
124-
var x = d3.scale.linear().domain([trace.min, cd0.historical.length - 1]).range([0, size.w]);
125-
var y = d3.scale.linear().domain([trace.min, trace.max]).range([size.h, 0]);
126-
var line = d3.svg.line()
127-
.x(function(d, i) { return x(i);})
128-
.y(function(d) { return y(d);});
129-
var sparkline = d3.select(this).selectAll('path.sparkline').data(data);
130-
sparkline.enter().append('svg:path').classed('sparkline', true);
131-
sparkline
132-
.attr('d', line(cd0.historical))
133-
.style('fill', 'none')
134-
.style('stroke', 'rgba(255, 255, 255, 0.5)')
135-
.style('stroke-width', 2)
136-
.attr('transform', 'translate(' + size.l + ', ' + size.t + ')');
137-
sparkline.exit().remove();
138-
139140
// bignumber
140-
data = cd.filter(function() {return isBigNumber;});
141+
var data = cd.filter(function() {return isBigNumber;});
141142
var number = d3.select(this).selectAll('text.number').data(data);
142143
number.enter().append('text').classed('number', true);
143-
144144
number.attr({
145145
x: centerX,
146146
y: bignumberVerticalMargin,
@@ -177,7 +177,7 @@ module.exports = function plot(gd, cdModule, transitionOpts, makeOnCompleteCallb
177177
x: centerX,
178178
y: tickerVerticalMargin,
179179
'text-anchor': 'middle',
180-
'alignment-baseline': 'middle'
180+
'alignment-baseline': tickerBaseline || 'middle'
181181
})
182182
.call(Drawing.font, trace.font)
183183
.style('font-size', tickerFontSize)
@@ -195,12 +195,12 @@ module.exports = function plot(gd, cdModule, transitionOpts, makeOnCompleteCallb
195195
name.enter().append('text').classed('name', true);
196196
name.attr({
197197
x: centerX,
198-
y: size.t + gaugeFontSize / 2,
198+
y: size.t + labelFontSize / 2,
199199
'text-anchor': 'middle',
200200
'alignment-baseline': 'middle'
201201
})
202202
.call(Drawing.font, trace.font)
203-
.style('font-size', gaugeFontSize)
203+
.style('font-size', labelFontSize)
204204
.text(trace.name);
205205
name.exit().remove();
206206

‎test/image/baselines/indicator_bignumber.png

473 Bytes
Loading

‎test/image/baselines/indicator_bullet.png

564 Bytes
Loading

‎test/image/baselines/indicator_gauge.png

26.1 KB
Loading

‎test/image/baselines/indicator_scatter.png

-1.65 KB
Loading

‎test/image/baselines/indicator_sparkline.png

-4.06 KB
Loading

‎test/image/mocks/indicator_gauge.json

Lines changed: 80 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
{
22
"data": [{
3+
"domain": {"x": [0, 0.474], "y": [0, 1]},
34
"name": "Speed",
45
"type": "indicator",
5-
"mode": "gauge+delta",
6-
"delta": {
7-
"showpercentage": true
6+
"mode": "gauge+bignumber+delta",
7+
"ticker": {
8+
"showticker": true
89
},
910
"max": 500,
1011
"target": 475,
@@ -20,21 +21,90 @@
2021
"color": "rgba(255, 255, 0, 0.5)"
2122
}
2223
},
23-
"values": [400, 450],
24-
"font": {
25-
"color": "white",
26-
"family": "Dosis"
27-
}
24+
"values": [400, 450]
25+
}, {
26+
"domain": {"x": [0.474, 0.789], "y": [0, 0.666]},
27+
"name": "Speed",
28+
"type": "indicator",
29+
"mode": "gauge+bignumber+delta",
30+
"ticker": {
31+
"showticker": true
32+
},
33+
"max": 500,
34+
"target": 475,
35+
"gauge": {
36+
"background": {
37+
"color": "rgba(255, 255, 255, 0.25)",
38+
"line": {
39+
"width": 2,
40+
"color": "rgba(255, 255, 255, 0.5)"
41+
}
42+
},
43+
"target": {
44+
"color": "rgba(255, 255, 0, 0.5)"
45+
}
46+
},
47+
"values": [400, 450]
48+
},{
49+
"domain": {"x": [0.789, 1], "y": [0, 0.333]},
50+
"name": "Speed",
51+
"type": "indicator",
52+
"mode": "gauge+bignumber+delta",
53+
"ticker": {
54+
"showticker": true
55+
},
56+
"max": 500,
57+
"target": 475,
58+
"gauge": {
59+
"background": {
60+
"color": "rgba(255, 255, 255, 0.25)",
61+
"line": {
62+
"width": 2,
63+
"color": "rgba(255, 255, 255, 0.5)"
64+
}
65+
},
66+
"target": {
67+
"color": "rgba(255, 255, 0, 0.5)"
68+
}
69+
},
70+
"values": [400, 450]
71+
},{
72+
"domain": {"x": [0.789, 1], "y": [0.333, 0.333]},
73+
"name": "Speed",
74+
"type": "indicator",
75+
"mode": "gauge+bignumber+delta",
76+
"ticker": {
77+
"showticker": true
78+
},
79+
"max": 500,
80+
"target": 475,
81+
"gauge": {
82+
"background": {
83+
"color": "rgba(255, 255, 255, 0.25)",
84+
"line": {
85+
"width": 2,
86+
"color": "rgba(255, 255, 255, 0.5)"
87+
}
88+
},
89+
"target": {
90+
"color": "rgba(255, 255, 0, 0.5)"
91+
}
92+
},
93+
"values": [400, 450]
2894
}],
2995
"layout": {
30-
"width": 375,
31-
"height": 250,
96+
"width": 900,
97+
"height": 300,
3298
"paper_bgcolor": "black",
3399
"margin": {
34100
"t": 25,
35101
"r": 25,
36102
"l": 25,
37103
"b": 25
104+
},
105+
"font": {
106+
"color": "white",
107+
"family": "Dosis"
38108
}
39109
},
40110
"config": {

0 commit comments

Comments
 (0)