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

Skip to content

Commit 3233697

Browse files
antoinergantoinerg
committed
fix domain, bullet: title to the left, size thickness of value
1 parent 9b613c6 commit 3233697

File tree

8 files changed

+119
-80
lines changed

8 files changed

+119
-80
lines changed

‎src/traces/indicator/attributes.js

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -141,6 +141,16 @@ module.exports = {
141141
}),
142142
value: extendDeep({}, gaugeArcAttr, {
143143
color: {dflt: 'green'},
144+
size: {
145+
valType: 'number',
146+
role: 'style',
147+
min: 0,
148+
max: 1,
149+
editType: 'style',
150+
description: [
151+
'Sets the size of the value bar as a fraction of total size.'
152+
].join(' ')
153+
},
144154
description: [
145155
'Set the appearance of the gauge\'s value'
146156
].join(' ')
@@ -160,15 +170,14 @@ module.exports = {
160170
'Sets the color of the threshold line.'
161171
].join(' ')
162172
},
163-
height: {
173+
size: {
164174
valType: 'number',
165175
role: 'style',
166176
min: 0,
167177
max: 1,
168-
dflt: 0.75,
169178
editType: 'style',
170179
description: [
171-
'Sets the height of the threshold line has a fraction.'
180+
'Sets the height of the threshold line as a fraction.'
172181
].join(' ')
173182
},
174183
width: {

‎src/traces/indicator/constants.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,5 +18,5 @@ module.exports = {
1818
},
1919
bulletHeight: 35,
2020
innerRadius: 0.75,
21-
valueHeight: 0.5
21+
valueHeight: 0.5 // thickness of value bars relative to full thickness
2222
};

‎src/traces/indicator/defaults.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ var Lib = require('../../lib');
1212
var attributes = require('./attributes');
1313
var handleDomainDefaults = require('../../plots/domain').defaults;
1414
var Template = require('../../plot_api/plot_template');
15+
var cn = require('./constants.js');
1516
// var handleDomainDefaults = require('../../plots/domain').defaults;
1617
// var handleText = require('../bar/defaults').handleText;
1718

@@ -49,12 +50,14 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
4950
coerceGauge('value.color');
5051
coerceGauge('value.line.color');
5152
coerceGauge('value.line.width');
53+
var defaultValueSize = cn.valueHeight * (traceOut.gauge.shape === 'bullet' ? 0.25 : 0.5);
54+
coerceGauge('value.size', defaultValueSize);
5255
coerceGauge('target.color');
5356
coerceGauge('target.line.color');
5457
coerceGauge('target.line.width');
5558

5659
coerceGauge('threshold.value');
57-
coerceGauge('threshold.height');
60+
coerceGauge('threshold.size');
5861
coerceGauge('threshold.width');
5962
coerceGauge('threshold.color');
6063

‎src/traces/indicator/plot.js

Lines changed: 41 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,9 @@ var d3 = require('d3');
1313
var Lib = require('../../lib');
1414
var Drawing = require('../../components/drawing');
1515
var cn = require('./constants');
16+
var svgTextUtils = require('../../lib/svg_text_utils');
1617
// var Plots = require('../../plots/plots');
1718
// var Axes = require('../../plots/cartesian/axes');
18-
// var svgTextUtils = require('../../lib/svg_text_utils');
1919
//
2020
// // arc cotangent
2121
// function arcctg(x) { return Math.PI / 2 - Math.atan(x); }
@@ -52,12 +52,15 @@ module.exports = function plot(gd, cdModule, transitionOpts, makeOnCompleteCallb
5252
var size = Lib.extendFlat({}, fullLayout._size, {
5353
w: fullLayout._size.w * (domain.x[1] - domain.x[0]),
5454
h: fullLayout._size.h * (domain.y[1] - domain.y[0]),
55-
l: Math.max(fullLayout._size.l, fullLayout.width * domain.x[0]),
56-
r: Math.max(fullLayout._size.r, fullLayout.width * (1 - domain.x[1])),
57-
t: Math.max(fullLayout._size.t, fullLayout.height * domain.y[0]),
58-
b: Math.max(fullLayout._size.b, fullLayout.height * (1 - domain.y[0]))
55+
l: fullLayout._size.l + fullLayout._size.w * domain.x[0],
56+
r: fullLayout._size.r + fullLayout._size.w * (1 - domain.x[1]),
57+
t: fullLayout._size.t + fullLayout._size.h * domain.y[0],
58+
b: fullLayout._size.b + fullLayout._size.h * (1 - domain.y[1])
5959
});
6060

61+
// title
62+
var hasTitle = true;
63+
6164
// bignumber
6265
var hasBigNumber = trace.mode.indexOf('bignumber') !== -1;
6366
var fmt = d3.format(trace.valueformat);
@@ -98,6 +101,7 @@ module.exports = function plot(gd, cdModule, transitionOpts, makeOnCompleteCallb
98101
// Position elements
99102
var bignumberVerticalMargin, mainFontSize, bignumberX;
100103
var deltaVerticalMargin, deltaFontSize, deltaBaseline;
104+
var bulletHeight = Math.min(cn.bulletHeight, size.h / 2);
101105
var gaugeFontSize;
102106
var labelFontSize;
103107
var centerX = size.l + size.w / 2;
@@ -133,12 +137,12 @@ module.exports = function plot(gd, cdModule, transitionOpts, makeOnCompleteCallb
133137
if(isBullet) {
134138
// Center the text
135139
var p = 0.75;
136-
mainFontSize = Math.min(0.25 * size.w / (trace.max.toString().length), size.h / 2);
140+
mainFontSize = Math.min(0.2 * size.w / (trace.max.toString().length), bulletHeight);
137141
bignumberVerticalMargin = size.t + size.h / 2;
138142
bignumberX = size.l + (p + (1 - p) / 2) * size.w;
139143
deltaFontSize = 0.5 * mainFontSize;
140144
deltaVerticalMargin = bignumberVerticalMargin + 1.5 * deltaFontSize;
141-
labelFontSize = 0.75 * mainFontSize;
145+
labelFontSize = 0.4 * mainFontSize;
142146
}
143147

144148
if(!hasBigNumber) {
@@ -148,6 +152,21 @@ module.exports = function plot(gd, cdModule, transitionOpts, makeOnCompleteCallb
148152
}
149153

150154
plotGroup.each(function() {
155+
// Trace name
156+
var name = d3.select(this).selectAll('text.name').data(cd);
157+
name.enter().append('text').classed('name', true);
158+
name.attr({
159+
x: isBullet ? size.l + 0.23 * size.w : centerX,
160+
y: isBullet ? bignumberVerticalMargin : size.t + labelFontSize / 2,
161+
'text-anchor': isBullet ? 'end' : 'middle',
162+
'alignment-baseline': 'central'
163+
})
164+
.text(trace.name)
165+
.call(Drawing.font, trace.font)
166+
.style('font-size', labelFontSize)
167+
.call(svgTextUtils.convertToTspans, gd);
168+
name.exit().remove();
169+
151170
// bignumber
152171
var data = cd.filter(function() {return hasBigNumber;});
153172
var number = d3.select(this).selectAll('text.number').data(data);
@@ -196,20 +215,6 @@ module.exports = function plot(gd, cdModule, transitionOpts, makeOnCompleteCallb
196215
.text(deltaText);
197216
delta.exit().remove();
198217

199-
// Trace name
200-
var name = d3.select(this).selectAll('text.name').data(cd);
201-
name.enter().append('text').classed('name', true);
202-
name.attr({
203-
x: centerX,
204-
y: size.t + labelFontSize / 2,
205-
'text-anchor': 'middle',
206-
'alignment-baseline': 'central'
207-
})
208-
.call(Drawing.font, trace.font)
209-
.style('font-size', labelFontSize)
210-
.text(trace.name);
211-
name.exit().remove();
212-
213218
// Draw circular gauge
214219
data = cd.filter(function() {return isAngular;});
215220
var gauge = d3.select(this).selectAll('g.gauge').data(data);
@@ -246,8 +251,8 @@ module.exports = function plot(gd, cdModule, transitionOpts, makeOnCompleteCallb
246251
.startAngle(-theta);
247252

248253
var valueArcPath = d3.svg.arc()
249-
.innerRadius((innerRadius + radius) / 2 - cn.valueHeight / 2 * (radius - innerRadius))
250-
.outerRadius((innerRadius + radius) / 2 + cn.valueHeight / 2 * (radius - innerRadius))
254+
.innerRadius((innerRadius + radius) / 2 - trace.gauge.value.size / 2 * (radius - innerRadius))
255+
.outerRadius((innerRadius + radius) / 2 + trace.gauge.value.size / 2 * (radius - innerRadius))
251256
.startAngle(-theta);
252257

253258
// TODO: DRY up the following code to draw the different arcs
@@ -395,14 +400,16 @@ module.exports = function plot(gd, cdModule, transitionOpts, makeOnCompleteCallb
395400
// Axes.drawOne(gd, ya);
396401
// }
397402
data = cd.filter(function() {return isBullet;});
398-
var bulletHeight = cn.bulletHeight;
399-
var innerBulletHeight = cn.valueHeight * bulletHeight;
403+
var innerBulletHeight = trace.gauge.value.size * bulletHeight;
400404
var bulletVerticalMargin = bignumberVerticalMargin - bulletHeight / 2;
401405
var bullet = d3.select(this).selectAll('g.bullet').data(data);
402406
bullet.enter().append('g').classed('bullet', true);
403-
bullet.attr('transform', 'translate(' + size.l + ',' + bulletVerticalMargin + ')');
407+
bullet.attr('transform', 'translate(' + (size.l + (hasTitle ? 0.25 : 0) * size.w) + ',' + bulletVerticalMargin + ')');
404408

405-
var scale = d3.scale.linear().domain([trace.min, trace.max]).range([0, ((hasBigNumber || hasDelta) ? 0.75 : 1.0) * size.w]);
409+
var bulletWidth = 1;
410+
if(hasBigNumber || hasDelta) bulletWidth -= 0.25;
411+
if(hasTitle) bulletWidth -= 0.25;
412+
var scale = d3.scale.linear().domain([trace.min, trace.max]).range([0, bulletWidth * size.w]);
406413

407414
// TODO: prevent rect width from being negative
408415
var bgBullet = bullet.selectAll('g.bgBullet').data(cd);
@@ -453,8 +460,8 @@ module.exports = function plot(gd, cdModule, transitionOpts, makeOnCompleteCallb
453460
threshold.select('line')
454461
.attr('x1', scale(trace.gauge.threshold.value))
455462
.attr('x2', scale(trace.gauge.threshold.value))
456-
.attr('y1', (1 - trace.gauge.threshold.height) / 2 * bulletHeight)
457-
.attr('y2', (1 - (1 - trace.gauge.threshold.height) / 2) * bulletHeight)
463+
.attr('y1', (1 - trace.gauge.threshold.size) / 2 * bulletHeight)
464+
.attr('y2', (1 - (1 - trace.gauge.threshold.size) / 2) * bulletHeight)
458465
.style('stroke', trace.gauge.threshold.color)
459466
.style('stroke-width', trace.gauge.threshold.width);
460467
threshold.exit().remove();
@@ -469,19 +476,18 @@ module.exports = function plot(gd, cdModule, transitionOpts, makeOnCompleteCallb
469476
group.append('path');
470477
ticks.select('path')
471478
.attr('d', 'M0,0V' + 0.1 * bulletHeight)
472-
.style('stroke', 'white');
479+
.style('stroke', trace.font.color);
473480

474481
group.insert('text');
475482
ticks.select('text')
476483
.text(function(d) { return fmt(d);})
477484
.call(Drawing.font, trace.font)
485+
.style('font-size', labelFontSize)
478486
.attr({
479-
y: 20,
487+
y: 0.2 * bulletHeight,
480488
'text-anchor': 'middle',
481-
'alignment-baseline': 'central'
482-
})
483-
.style('fill', 'white');
484-
489+
'alignment-baseline': 'hanging'
490+
});
485491
ticks
486492
.attr('transform', function(d) {
487493
var pos = scale(d);

‎test/image/baselines/indicator_bullet.png

6.43 KB
Loading

‎test/image/baselines/indicator_gauge.png

166 Bytes
Loading

‎test/image/baselines/indicator_scatter.png

364 Bytes
Loading

‎test/image/mocks/indicator_bullet.json

Lines changed: 61 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,77 +1,98 @@
11
{
22
"data": [{
3-
"domain": {"y": [0, 0.4]},
4-
"name": "Speed",
3+
"domain": {"y": [0, 0.33]},
4+
"name": "<b>Revenue</b><br><span style='color: gray; font-size:0.8em'>U.S. $ (1,000s)</span>",
55
"type": "indicator",
66
"mode": "bignumber+gauge",
7-
"ticker": {
8-
"showticker": false
9-
},
10-
"max": 500,
11-
"target": 300,
7+
"max": 300,
8+
"target": 150,
129
"gauge": {
1310
"shape": "bullet",
1411
"threshold": {
15-
"color": "rgba(255, 255, 255, 0.5)",
12+
"color": "black",
1613
"width": 2,
1714
"height": 0.75,
18-
"value": 450
15+
"value": 220
1916
},
2017
"background": {
21-
"color": "rgba(255, 255, 255, 0.25)",
18+
"color": "rgba(0, 0, 0, 0.1)",
2219
"line": {
2320
"width": 2,
24-
"color": "rgba(255, 255, 255, 0.5)"
21+
"color": "rgba(0, 0, 0, 0.1)"
2522
}
2623
},
2724
"target": {
28-
"color": "rgba(255, 255, 0, 0.5)"
25+
"color": "rgba(0, 0, 0, 0.25)"
26+
},
27+
"value": {
28+
"color": "rgba(0, 0, 0, 1)"
2929
}
3030
},
31-
"values": [125, 175],
32-
"font": {
33-
"color": "white",
34-
"family": "Dosis"
35-
}
36-
},
37-
{
38-
"domain": {"y": [0.6, 1]},
39-
"name": "Temperature",
31+
"values": [125, 175]
32+
}, {
33+
"domain": {"y": [0.33, 0.66]},
34+
"name": "<b>Profit</b><br><span style='color: gray; font-size:0.8em'>%</span>",
4035
"type": "indicator",
4136
"mode": "bignumber+gauge",
42-
"ticker": {
43-
"showticker": false
44-
},
4537
"max": 100,
46-
"target": 60,
38+
"target": 75,
4739
"gauge": {
4840
"shape": "bullet",
4941
"background": {
50-
"color": "rgba(255, 255, 255, 0.25)",
42+
"color": "rgba(0, 0, 0, 0.1)",
5143
"line": {
5244
"width": 2,
53-
"color": "rgba(255, 255, 255, 0.5)"
45+
"color": "rgba(0, 0, 0, 0.1)"
5446
}
5547
},
5648
"target": {
57-
"color": "rgba(255, 255, 0, 0.5)"
49+
"color": "rgba(0, 0, 0, 0.25)"
50+
},
51+
"value": {
52+
"color": "rgba(0, 0, 0, 1)"
5853
}
5954
},
60-
"values": [63, 55],
61-
"font": {
62-
"color": "white",
63-
"family": "Dosis"
64-
}
55+
"values": [25, 35],
56+
"valueformat": "0"
57+
}, {
58+
"domain": {"y": [0.66, 1]},
59+
"name": "<b>Avg Order Size</b><br><span style='color: gray; font-size:0.8em'>U.S. $</span>",
60+
"type": "indicator",
61+
"mode": "bignumber+gauge",
62+
"max": 300,
63+
"target": 150,
64+
"gauge": {
65+
"shape": "bullet",
66+
"threshold": {
67+
"color": "black",
68+
"width": 2,
69+
"height": 0.75,
70+
"value": 210
71+
},
72+
"background": {
73+
"color": "rgba(0, 0, 0, 0.1)",
74+
"line": {
75+
"width": 2,
76+
"color": "rgba(0, 0, 0, 0.1)"
77+
}
78+
},
79+
"target": {
80+
"color": "rgba(0, 0, 0, 0.25)"
81+
},
82+
"value": {
83+
"color": "rgba(0, 0, 0, 1)"
84+
}
85+
},
86+
"values": [200, 220]
6587
}],
6688
"layout": {
67-
"width": 375,
68-
"height": 300,
69-
"paper_bgcolor": "black",
89+
"width": 600,
90+
"height": 250,
7091
"margin": {
71-
"t": 25,
72-
"r": 0,
73-
"l": 25,
74-
"b": 15
92+
"t": 10,
93+
"r": 10,
94+
"l": 10,
95+
"b": 10
7596
}
7697
},
7798
"config": {

0 commit comments

Comments
 (0)